-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
330 lines (322 loc) · 11.1 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html lang="en" style="--system-enhanced: var(--ON)">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>system.css</title>
<meta name="description" content="A classless CSS base stylesheet to write modern websites using only HTML." />
<meta name="keywords" content="system, css, framework,classless css" />
<link rel="stylesheet" href="index.css" />
</head>
<body class="system">
<header>
<h3>system.css</h3>
<nav>
<a href="index.html">Home</a>
<a href="example.html" aria-current="page">Example</a>
<a href="forms.html">Forms</a>
<a href="style-api.html">Style API</a>
<a href="openprops.html">Themed</a>
</nav>
</header>
<main>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
<h2>Paragraph</h2>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. In id risus quis purus mollis
lobortis vel ac tellus. Nam pharetra lorem quis dui commodo dapibus. Curabitur aliquet sapien vitae
ligula pretium sollicitudin. Sed sed magna eu risus placerat gravida non sit amet augue. Morbi volutpat
lobortis imperdiet. Sed elit purus, commodo a mi in, condimentum sagittis urna. Etiam condimentum
pharetra cursus. Aliquam erat volutpat. In vel diam nulla. Praesent faucibus augue quis dui vehicula, a
consequat est fringilla. Sed nec nisi fermentum, maximus nunc ac, hendrerit lorem. Proin mollis metus in
erat dictum egestas. Proin nec ipsum viverra, scelerisque nisi in, faucibus nulla.
</p>
<aside>Just a random block of text inside an aside element!</aside>
<p>
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="300" fill="var(--system-surface-color)"></rect>
<text
x="50%"
y="50%"
dominant-baseline="middle"
text-anchor="middle"
font-family="system-ui"
font-size="2em"
fill="var(--system-gray-text)"
>
Aspect Ratio 4:3
</text></svg
>If you want the image to float place it inside a <code><p></code>, <code><li></code>,
<code><dd></code>, or a <code><td></code>.
</p>
<p>
Nunc accumsan molestie nisl non malesuada. In egestas tellus lectus, nec venenatis tellus pulvinar vel.
Fusce consectetur sodales ante, sed vehicula mauris pulvinar non. Cras tempor ante nec nibh iaculis
aliquet. In quis velit non dui dapibus tempus quis sed velit. Morbi a ornare sem. Maecenas ornare
molestie ex, sed maximus lorem viverra at. In tincidunt vel purus et suscipit. Aenean aliquam neque et
ipsum volutpat, eu laoreet justo vestibulum. Maecenas quam turpis, convallis id nibh efficitur, interdum
volutpat elit. Suspendisse potenti. Nulla in vulputate massa.
</p>
<p>
Normal, <abbr title="Abbreviations">abbr</abbr>, <del>del</del>, <dfn>dfn</dfn>, <em>em</em>,
<ins>ins</ins>, <mark>mark</mark>, <s>strike through</s>, <small>small</small>, <strong>strong</strong>,
<sub>sub</sub>, <sup>sup</sup>, <u>u</u>
</p>
<h2>Links</h2>
<p>
These are links:
<a href="?2017-06-2703%3A30%3A17" onclick="return false;"
>never visited link (just don't click or it will becomes visited)</a
>, <a href="https://sarajoy.dev">visited link</a>. Mouse hover to see effects.
</p>
<h2>Lists</h2>
<h3>Unordered list</h3>
<ul>
<li>List item</li>
<li>
List item
<ul>
<li>List item</li>
<li>List item</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam
inventore voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut
commodi odit quae ipsa quaerat enim.
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
</ul>
<h3>Ordered list</h3>
<ol>
<li>List item with a much longer description or more content.</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam inventore
voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut commodi odit quae ipsa
quaerat enim.
</li>
<li>
List item
<ol>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<h3>Mixed</h3>
<ul>
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>
List item
<ol>
<li>Nested list item</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam
inventore voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut
commodi odit quae ipsa quaerat enim.
</li>
<li>Nested list item</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<h3>Definition list</h3>
<dl>
<dt>Definition list</dt>
<dd>
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</dd>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</dd>
</dl>
<h3>Details & Summary</h3>
<details>
<summary>Question 1</summary>
<p>
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat
eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
<a href="#" onclick="return false;">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.
</p>
<details>
<summary>Related documents</summary>
<p>
Yes, this works. But in general be careful with nesting the
<code><details></code> element.
</p>
<ul>
<li>
<a href="#" onclick="return false;"
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
>
</li>
<li><a href="#" onclick="return false;">Aliquam tincidunt mauris eu risus.</a></li>
<li>
<a href="#" onclick="return false;"
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
>
</li>
<li><a href="#" onclick="return false;">Aliquam tincidunt mauris eu risus.</a></li>
</ul>
</details>
</details>
<details>
<summary>Question 2</summary>
<p>
Duis consequat metus et eros rutrum, interdum facilisis urna interdum. Etiam facilisis diam in
libero varius ultricies id id est. Sed lacinia pellentesque sem vel sagittis.
</p>
</details>
<h2>Blockquote</h2>
<blockquote>
Those people who think they know everything are a great annoyance to those of us who do. -
<cite>Isaac Asimov</cite>
</blockquote>
<h2>Code</h2>
<p>
This is inline code <code><div>div element</div></code>. This is sample output
<samp>sample</samp> And below is block code.
</p>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html></pre
>
<p>
The input keyboard <kbd>Ctrl</kbd>+<kbd>S</kbd>. This is variable: <var>y</var> = <var>m</var
><var>x</var> + <var>b</var>
</p>
<h2>Table</h2>
<table>
<thead>
<tr>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table footer</th>
<th>Table footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table data</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td>Table data</td>
<td>Table data</td>
</tr>
<tr>
<td>Table data</td>
<td>Table data</td>
</tr>
<tr>
<td>Table data</td>
<td>Table data</td>
</tr>
</tbody>
</table>
<h2>Buttons & Inputs</h2>
<p>
<button disabled="disabled">Disabled</button>
<button type="button">Cancel</button>
<button type="submit">Submit</button>
</p>
<p style="display: flex; flex-direction: column; align-items: start; gap: 1ex">
<input type="text" placeholder="placeholder" />
<input type="radio" />
<input type="checkbox" />
<input type="file" />
<input type="range" />
<input type="number" />
<input type="date" />
<progress max="100" value="30"></progress>
<select id="select" required="required">
<option>select</option>
<optgroup label="Group A">
<option>option 1a</option>
<option>option 2a</option>
</optgroup>
<optgroup label="Group B">
<option>option 1b</option>
<option>option 2b</option>
</optgroup>
</select>
<textarea id="textarea"></textarea>
</p>
<h2>Figure</h2>
<figure>
<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
<rect width="800" height="450" fill="var(--system-surface-color)"></rect>
<text
x="50%"
y="50%"
dominant-baseline="middle"
text-anchor="middle"
font-family="system-ui"
font-size="72px"
fill="var(--system-gray-text)"
>
Aspect Ratio 16:9
</text>
</svg>
<figcaption>This is a figcaption</figcaption>
</figure>
</main>
<footer>
<p>
View on <a href="https://github.com/dutchcelt/system.css">Github</a>.
<svg
aria-hidden="true"
height="16"
viewBox="0 0 16 16"
version="1.1"
width="16"
fill="var(--system-canvas-text)"
>
<path
d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
></path>
</svg>
</p>
</footer>
</body>
</html>