@graupl/graupl 1.0.0-alpha.12 → 1.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -0
- package/dist/base/button.css +1 -1
- package/dist/base/button.css.map +1 -1
- package/dist/base/form.css +1 -1
- package/dist/base/form.css.map +1 -1
- package/dist/base/link.css +1 -1
- package/dist/base/link.css.map +1 -1
- package/dist/base/table.css +1 -1
- package/dist/base/table.css.map +1 -1
- package/dist/base.css +1 -1
- package/dist/base.css.map +1 -1
- package/dist/component/card.css +2 -0
- package/dist/component/card.css.map +1 -0
- package/dist/component/input-group.css +1 -1
- package/dist/component/input-group.css.map +1 -1
- package/dist/component/menu.css +2 -0
- package/dist/component/menu.css.map +1 -0
- package/dist/component/navigation.css +2 -0
- package/dist/component/navigation.css.map +1 -0
- package/dist/component.css +1 -1
- package/dist/component.css.map +1 -1
- package/dist/graupl.css +1 -1
- package/dist/graupl.css.map +1 -1
- package/dist/layout/columns.css +1 -1
- package/dist/layout/columns.css.map +1 -1
- package/dist/layout/flex-columns.css +2 -0
- package/dist/layout/flex-columns.css.map +1 -0
- package/dist/layout.css +1 -1
- package/dist/layout.css.map +1 -1
- package/dist/theme/typography.css +1 -1
- package/dist/theme/typography.css.map +1 -1
- package/dist/theme.css +1 -1
- package/dist/theme.css.map +1 -1
- package/dist/utilities/order.css +2 -0
- package/dist/utilities/order.css.map +1 -0
- package/dist/utilities/spacing.css +1 -1
- package/dist/utilities/spacing.css.map +1 -1
- package/dist/utilities/typography.css +1 -1
- package/dist/utilities/typography.css.map +1 -1
- package/dist/utilities.css +1 -1
- package/dist/utilities.css.map +1 -1
- package/eslint.config.js +1 -0
- package/index.html +619 -325
- package/package.json +1 -1
- package/scss/component/card.scss +3 -0
- package/scss/component/menu.scss +3 -0
- package/scss/component/navigation.scss +3 -0
- package/scss/layout/flex-columns.scss +3 -0
- package/scss/utilities/order.scss +3 -0
- package/src/js/navigation.js +34 -0
- package/src/scss/_defaults.scss +15 -1
- package/src/scss/base/button/_defaults.scss +8 -3
- package/src/scss/base/button/_index.scss +99 -36
- package/src/scss/base/button/_variables.scss +43 -11
- package/src/scss/base/form/_index.scss +2 -4
- package/src/scss/base/form/_variables.scss +8 -0
- package/src/scss/base/link/_defaults.scss +37 -6
- package/src/scss/base/link/_index.scss +72 -12
- package/src/scss/base/link/_variables.scss +175 -18
- package/src/scss/base/table/_index.scss +2 -4
- package/src/scss/base/table/_variables.scss +8 -0
- package/src/scss/component/_index.scss +3 -0
- package/src/scss/component/card/_defaults.scss +29 -0
- package/src/scss/component/card/_index.scss +143 -0
- package/src/scss/component/card/_variables.scss +185 -0
- package/src/scss/component/menu/_defaults.scss +65 -0
- package/src/scss/component/menu/_index.scss +304 -0
- package/src/scss/component/menu/_variables.scss +491 -0
- package/src/scss/component/navigation/_defaults.scss +29 -0
- package/src/scss/component/navigation/_index.scss +189 -0
- package/src/scss/component/navigation/_variables.scss +237 -0
- package/src/scss/functions/_theme.scss +16 -0
- package/src/scss/layout/_index.scss +1 -0
- package/src/scss/layout/columns/_index.scss +22 -0
- package/src/scss/layout/flex-columns/_defaults.scss +18 -0
- package/src/scss/layout/flex-columns/_index.scss +77 -0
- package/src/scss/layout/flex-columns/_variables.scss +26 -0
- package/src/scss/mixins/_media-queries.scss +8 -0
- package/src/scss/theme/typography/_defaults.scss +1 -1
- package/src/scss/theme/typography/_variables.scss +5 -2
- package/src/scss/utilities/_index.scss +2 -0
- package/src/scss/utilities/order/_defaults.scss +19 -0
- package/src/scss/utilities/order/_index.scss +35 -0
- package/src/scss/utilities/order/_variables.scss +6 -0
- package/src/scss/utilities/ratio/_defaults.scss +24 -0
- package/src/scss/utilities/ratio/_index.scss +26 -0
- package/src/scss/utilities/ratio/_variables.scss +9 -0
- package/src/scss/utilities/spacing/_index.scss +33 -16
package/index.html
CHANGED
|
@@ -9,353 +9,647 @@
|
|
|
9
9
|
</head>
|
|
10
10
|
|
|
11
11
|
<body>
|
|
12
|
-
<main class="container">
|
|
12
|
+
<main class="container pb-10">
|
|
13
13
|
<h1>Hello Graupl!</h1>
|
|
14
14
|
<p>Graupl is a modular CSS framework with the goal of making it easy to theme a site.</p>
|
|
15
15
|
<p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
|
|
16
16
|
<p>Graupl supports light and dark modes out-of-the-box.</p>
|
|
17
|
-
<
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<p>Graupl provides default styling for all form elements.</p>
|
|
36
|
-
<form class="full-width rg-4">
|
|
37
|
-
<div class="input-group">
|
|
38
|
-
<label for="input">Input</label>
|
|
39
|
-
<input type="text" placeholder="Input" id="input">
|
|
40
|
-
<small class="help-text">This is some help text to assist with knowing what the field is about.</small>
|
|
41
|
-
</div>
|
|
42
|
-
<div class="input-group inline"><label for="input-readonly">Readonly Input</label>
|
|
43
|
-
<input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input" readonly>
|
|
44
|
-
<small class="help-text">This is some help text to assist with knowing what the field is about.</small>
|
|
45
|
-
</div>
|
|
46
|
-
<div class="input-group"><label for="input-disabled">Disabled Input</label>
|
|
47
|
-
<input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
|
|
48
|
-
<small class="help-text">This is some help text to assist with knowing what the field is about.</small>
|
|
49
|
-
</div>
|
|
50
|
-
<div class="input-group inline"><label for="textarea">Textarea</label>
|
|
51
|
-
<textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
|
|
52
|
-
</div>
|
|
53
|
-
<div class="input-group"><label for="textarea-readonly">Readonly Textarea</label>
|
|
54
|
-
<textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly"
|
|
55
|
-
readonly>Readonly Textarea</textarea>
|
|
56
|
-
</div>
|
|
57
|
-
<div class="input-group"><label for="textarea-disabled">Disabled Textarea</label>
|
|
58
|
-
<textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
|
|
17
|
+
<button id="dark-mode-toggle" class="button mt-5">Toggle dark mode</button>
|
|
18
|
+
<div class="py-10 full-width container">
|
|
19
|
+
<h2>Buttons</h2>
|
|
20
|
+
<p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.
|
|
21
|
+
</p>
|
|
22
|
+
<div class="columns count-4">
|
|
23
|
+
<button class="button">Default Button</button>
|
|
24
|
+
<button class="button primary">Primary Button</button>
|
|
25
|
+
<button class="button secondary">Secondary Button</button>
|
|
26
|
+
<button class="button tertiary">Tertiary Button</button>
|
|
27
|
+
<button class="button link">Link Button</button>
|
|
28
|
+
<a class="button" href="#">Anchor Button</a>
|
|
29
|
+
<button class="button" disabled>Default Button</button>
|
|
30
|
+
<button class="button primary" disabled>Primary Button</button>
|
|
31
|
+
<button class="button secondary" disabled>Secondary Button</button>
|
|
32
|
+
<button class="button tertiary" disabled>Tertiary Button</button>
|
|
33
|
+
<button class="button link" disabled>Link Button</button>
|
|
34
|
+
<a class="button" href="#" disabled>Anchor Button</a>
|
|
59
35
|
</div>
|
|
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
|
-
<label for
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
36
|
+
</div>
|
|
37
|
+
<div class="py-10 full-width container">
|
|
38
|
+
<h2>Form elements</h2>
|
|
39
|
+
<p>Graupl provides default styling for all form elements.</p>
|
|
40
|
+
<form class="full-width rg-4">
|
|
41
|
+
<div class="input-group">
|
|
42
|
+
<label for="input">Input</label>
|
|
43
|
+
<input type="text" placeholder="Input" id="input">
|
|
44
|
+
<small class="help-text">This is some help text to assist with knowing what the field is about.</small>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="input-group inline"><label for="input-readonly">Readonly Input</label>
|
|
47
|
+
<input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input" readonly>
|
|
48
|
+
<small class="help-text">This is some help text to assist with knowing what the field is about.</small>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="input-group"><label for="input-disabled">Disabled Input</label>
|
|
51
|
+
<input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
|
|
52
|
+
<small class="help-text">This is some help text to assist with knowing what the field is about.</small>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="input-group inline"><label for="textarea">Textarea</label>
|
|
55
|
+
<textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="input-group"><label for="textarea-readonly">Readonly Textarea</label>
|
|
58
|
+
<textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly"
|
|
59
|
+
readonly>Readonly Textarea</textarea>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="input-group"><label for="textarea-disabled">Disabled Textarea</label>
|
|
62
|
+
<textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="input-group inline"><label for="select">Select</label>
|
|
65
|
+
<select id="select">
|
|
66
|
+
<option value="1">Option 1</option>
|
|
67
|
+
<option value="2">Option 2</option>
|
|
68
|
+
<optgroup label="Group 1">
|
|
69
|
+
<option value="3">Option 3</option>
|
|
70
|
+
<option value="4">Option 4</option>
|
|
71
|
+
<option value="5">Option 5</option>
|
|
72
|
+
</optgroup>
|
|
73
|
+
</select>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="input-group"><label for="select-disabled">Disabled Select</label>
|
|
76
|
+
<select id="select-disabled" disabled>
|
|
77
|
+
<option value="1">Option 1</option>
|
|
78
|
+
<option value="2">Option 2</option>
|
|
79
|
+
<optgroup label="Group 1">
|
|
80
|
+
<option value="3">Option 3</option>
|
|
81
|
+
<option value="4">Option 4</option>
|
|
82
|
+
<option value="5">Option 5</option>
|
|
83
|
+
</optgroup>
|
|
84
|
+
</select>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="input-group"><label for"multi-select">Multi-select</label>
|
|
87
|
+
<select id="multi-select" multiple>
|
|
88
|
+
<option value="1">Option 1</option>
|
|
89
|
+
<option value="2">Option 2</option>
|
|
90
|
+
<optgroup label="Group 1">
|
|
91
|
+
<option value="3">Option 3</option>
|
|
92
|
+
<option value="4">Option 4</option>
|
|
93
|
+
<option value="5">Option 5</option>
|
|
94
|
+
</optgroup>
|
|
95
|
+
</select>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="input-group inline"><label for="multi-select-disabled">Disabled Multi-select</label>
|
|
98
|
+
<select id="multi-select-disabled" multiple disabled>
|
|
99
|
+
<option value="1">Option 1</option>
|
|
100
|
+
<option value="2">Option 2</option>
|
|
101
|
+
<optgroup label="Group 1">
|
|
102
|
+
<option value="3">Option 3</option>
|
|
103
|
+
<option value="4">Option 4</option>
|
|
104
|
+
<option value="5">Option 5</option>
|
|
105
|
+
</optgroup>
|
|
106
|
+
</select>
|
|
107
|
+
</div>
|
|
108
|
+
<fieldset>
|
|
109
|
+
<legend>Checkboxes</legend>
|
|
110
|
+
<label for="checkbox">
|
|
111
|
+
<input type="checkbox" id="checkbox"> Checkbox</label>
|
|
112
|
+
<label for="checkbox-checked">
|
|
113
|
+
<input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
|
|
114
|
+
<label for="checkbox-disabled">
|
|
115
|
+
<input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
|
|
116
|
+
</fieldset>
|
|
117
|
+
<fieldset>
|
|
118
|
+
<legend>Radio Buttons</legend>
|
|
119
|
+
<label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
|
|
120
|
+
<label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
|
|
121
|
+
<label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled
|
|
122
|
+
Radio</label>
|
|
123
|
+
</fieldset>
|
|
124
|
+
<fieldset disabled>
|
|
125
|
+
<legend>Disabled Fieldset</legend>
|
|
126
|
+
<label for="disabled-fieldset-checkbox">
|
|
127
|
+
<input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
|
|
128
|
+
</fieldset>
|
|
129
|
+
<div class="input-group"><label for="range">Range</label>
|
|
130
|
+
<input type="range" class="range" id="range">
|
|
131
|
+
</div>
|
|
132
|
+
</form>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="py-10 full-width container">
|
|
135
|
+
<h2>Navigation</h2>
|
|
136
|
+
<div class="py-7">
|
|
137
|
+
<nav class="navigation" data-graupl-menu-type="DisclosureMenu" data-graupl-menu-options="{'optionalKeySupport': true}">
|
|
138
|
+
<a class="navigation-branding" href="#">Graupl</a>
|
|
139
|
+
<button class="navigation-toggle ml-auto mr-0" aria-label="Toggle navigation"></button>
|
|
140
|
+
<ul class="menu">
|
|
141
|
+
<li class="menu-item"><a class="menu-link" href="#">Home</a></li>
|
|
142
|
+
<li class="menu-item submenu-item">
|
|
143
|
+
<button class="menu-link button link submenu-toggle">About</button>
|
|
144
|
+
<ul class="submenu">
|
|
145
|
+
<li class="menu-item"><a class="menu-link" href="#">About Us</a></li>
|
|
146
|
+
<li class="menu-item"><a class="menu-link" href="#">Our Team</a></li>
|
|
147
|
+
<li class="menu-item"><a class="menu-link" href="#">Our Mission</a></li>
|
|
148
|
+
</ul>
|
|
149
|
+
</li>
|
|
150
|
+
<li class="menu-item"><a class="menu-link" href="#">Blog</a></li>
|
|
151
|
+
<li class="menu-item"><a class="menu-link" href="#">Portfolio</a></li>
|
|
152
|
+
<li class="menu-item"><a class="menu-link button tertiary" href="#">Contact</a></li>
|
|
153
|
+
</ul>
|
|
154
|
+
</nav>
|
|
127
155
|
</div>
|
|
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
|
-
Front-end web developer course 2021
|
|
174
|
-
</caption>
|
|
175
|
-
<thead>
|
|
176
|
-
<tr>
|
|
177
|
-
<th scope="col">Person</th>
|
|
178
|
-
<th scope="col">Most interest in</th>
|
|
179
|
-
<th scope="col">Age</th>
|
|
180
|
-
</tr>
|
|
181
|
-
</thead>
|
|
182
|
-
<tbody>
|
|
183
|
-
<tr>
|
|
184
|
-
<th scope="row">Chris</th>
|
|
185
|
-
<td>HTML tables</td>
|
|
186
|
-
<td>22</td>
|
|
187
|
-
</tr>
|
|
188
|
-
<tr>
|
|
189
|
-
<th scope="row">Dennis</th>
|
|
190
|
-
<td>Web accessibility</td>
|
|
191
|
-
<td>45</td>
|
|
192
|
-
</tr>
|
|
193
|
-
<tr>
|
|
194
|
-
<th scope="row">Sarah</th>
|
|
195
|
-
<td>JavaScript frameworks</td>
|
|
196
|
-
<td>29</td>
|
|
197
|
-
</tr>
|
|
198
|
-
<tr>
|
|
199
|
-
<th scope="row">Karen</th>
|
|
200
|
-
<td>Web performance</td>
|
|
201
|
-
<td>36</td>
|
|
202
|
-
</tr>
|
|
203
|
-
</tbody>
|
|
204
|
-
<tfoot>
|
|
205
|
-
<tr>
|
|
206
|
-
<th scope="row" colspan="2">Average age</th>
|
|
207
|
-
<td>33</td>
|
|
208
|
-
</tr>
|
|
209
|
-
</tfoot>
|
|
210
|
-
</table>
|
|
211
|
-
<table class="secondary bordered striped-columns hoverable">
|
|
212
|
-
<caption>
|
|
213
|
-
Front-end web developer course 2021
|
|
214
|
-
</caption>
|
|
215
|
-
<thead>
|
|
216
|
-
<tr>
|
|
217
|
-
<th scope="col">Person</th>
|
|
218
|
-
<th scope="col">Most interest in</th>
|
|
219
|
-
<th scope="col">Age</th>
|
|
220
|
-
</tr>
|
|
221
|
-
</thead>
|
|
222
|
-
<tbody>
|
|
223
|
-
<tr>
|
|
224
|
-
<th scope="row">Chris</th>
|
|
225
|
-
<td>HTML tables</td>
|
|
226
|
-
<td>22</td>
|
|
227
|
-
</tr>
|
|
228
|
-
<tr>
|
|
229
|
-
<th scope="row">Dennis</th>
|
|
230
|
-
<td>Web accessibility</td>
|
|
231
|
-
<td>45</td>
|
|
232
|
-
</tr>
|
|
233
|
-
<tr>
|
|
234
|
-
<th scope="row">Sarah</th>
|
|
235
|
-
<td>JavaScript frameworks</td>
|
|
236
|
-
<td>29</td>
|
|
237
|
-
</tr>
|
|
238
|
-
<tr>
|
|
239
|
-
<th scope="row">Karen</th>
|
|
240
|
-
<td>Web performance</td>
|
|
241
|
-
<td>36</td>
|
|
242
|
-
</tr>
|
|
243
|
-
</tbody>
|
|
244
|
-
<tfoot>
|
|
245
|
-
<tr>
|
|
246
|
-
<th scope="row" colspan="2">Average age</th>
|
|
247
|
-
<td>33</td>
|
|
248
|
-
</tr>
|
|
249
|
-
</tfoot>
|
|
250
|
-
</table>
|
|
251
|
-
<table class="tertiary striped-columns hoverable">
|
|
252
|
-
<caption>
|
|
253
|
-
Front-end web developer course 2021
|
|
254
|
-
</caption>
|
|
255
|
-
<thead>
|
|
256
|
-
<tr>
|
|
257
|
-
<th scope="col">Person</th>
|
|
258
|
-
<th scope="col">Most interest in</th>
|
|
259
|
-
<th scope="col">Age</th>
|
|
260
|
-
</tr>
|
|
261
|
-
</thead>
|
|
262
|
-
<tbody>
|
|
263
|
-
<tr>
|
|
264
|
-
<th scope="row">Chris</th>
|
|
265
|
-
<td>HTML tables</td>
|
|
266
|
-
<td>22</td>
|
|
267
|
-
</tr>
|
|
268
|
-
<tr>
|
|
269
|
-
<th scope="row">Dennis</th>
|
|
270
|
-
<td>Web accessibility</td>
|
|
271
|
-
<td>45</td>
|
|
272
|
-
</tr>
|
|
273
|
-
<tr>
|
|
274
|
-
<th scope="row">Sarah</th>
|
|
275
|
-
<td>JavaScript frameworks</td>
|
|
276
|
-
<td>29</td>
|
|
277
|
-
</tr>
|
|
278
|
-
<tr>
|
|
279
|
-
<th scope="row">Karen</th>
|
|
280
|
-
<td>Web performance</td>
|
|
281
|
-
<td>36</td>
|
|
282
|
-
</tr>
|
|
283
|
-
</tbody>
|
|
284
|
-
<tfoot>
|
|
285
|
-
<tr>
|
|
286
|
-
<th scope="row" colspan="2">Average age</th>
|
|
287
|
-
<td>33</td>
|
|
288
|
-
</tr>
|
|
289
|
-
</tfoot>
|
|
290
|
-
</table>
|
|
291
|
-
<div class="responsive-table">
|
|
292
|
-
<table class="striped-columns">
|
|
156
|
+
</div>
|
|
157
|
+
<div class="py-10 full-width container">
|
|
158
|
+
<h2>Tables</h2>
|
|
159
|
+
<p>Graupl provides some default styling for tables as well as some other useful features to customize them.</p>
|
|
160
|
+
<table class="bordered striped-rows hoverable">
|
|
161
|
+
<caption>
|
|
162
|
+
Front-end web developer course 2021
|
|
163
|
+
</caption>
|
|
164
|
+
<thead>
|
|
165
|
+
<tr>
|
|
166
|
+
<th scope="col">Person</th>
|
|
167
|
+
<th scope="col">Most interest in</th>
|
|
168
|
+
<th scope="col">Age</th>
|
|
169
|
+
</tr>
|
|
170
|
+
</thead>
|
|
171
|
+
<tbody>
|
|
172
|
+
<tr>
|
|
173
|
+
<th scope="row">Chris</th>
|
|
174
|
+
<td>HTML tables</td>
|
|
175
|
+
<td>22</td>
|
|
176
|
+
</tr>
|
|
177
|
+
<tr>
|
|
178
|
+
<th scope="row">Dennis</th>
|
|
179
|
+
<td>Web accessibility</td>
|
|
180
|
+
<td>45</td>
|
|
181
|
+
</tr>
|
|
182
|
+
<tr>
|
|
183
|
+
<th scope="row">Sarah</th>
|
|
184
|
+
<td>JavaScript frameworks</td>
|
|
185
|
+
<td>29</td>
|
|
186
|
+
</tr>
|
|
187
|
+
<tr>
|
|
188
|
+
<th scope="row">Karen</th>
|
|
189
|
+
<td>Web performance</td>
|
|
190
|
+
<td>36</td>
|
|
191
|
+
</tr>
|
|
192
|
+
</tbody>
|
|
193
|
+
<tfoot>
|
|
194
|
+
<tr>
|
|
195
|
+
<th scope="row" colspan="2">Average age</th>
|
|
196
|
+
<td>33</td>
|
|
197
|
+
</tr>
|
|
198
|
+
</tfoot>
|
|
199
|
+
</table>
|
|
200
|
+
<table class="primary collapsed striped-columns hoverable">
|
|
293
201
|
<caption>
|
|
294
|
-
|
|
202
|
+
Front-end web developer course 2021
|
|
295
203
|
</caption>
|
|
296
|
-
<thead
|
|
204
|
+
<thead>
|
|
297
205
|
<tr>
|
|
298
|
-
<th
|
|
299
|
-
<th
|
|
300
|
-
<th
|
|
301
|
-
<th scrop="col">Column 4</th>
|
|
302
|
-
<th scrop="col">Column 5</th>
|
|
303
|
-
<th scrop="col">Column 6</th>
|
|
304
|
-
<th scrop="col">Column 7</th>
|
|
305
|
-
<th scrop="col">Column 8</th>
|
|
306
|
-
<th scrop="col">Column 9</th>
|
|
307
|
-
<th scrop="col">Column 10</th>
|
|
308
|
-
<th scrop="col">Column 11</th>
|
|
309
|
-
<th scrop="col">Column 12</th>
|
|
206
|
+
<th scope="col">Person</th>
|
|
207
|
+
<th scope="col">Most interest in</th>
|
|
208
|
+
<th scope="col">Age</th>
|
|
310
209
|
</tr>
|
|
311
210
|
</thead>
|
|
312
211
|
<tbody>
|
|
313
212
|
<tr>
|
|
314
|
-
<
|
|
315
|
-
<td>
|
|
316
|
-
<td>
|
|
317
|
-
<td>Row 1, Column 4</td>
|
|
318
|
-
<td>Row 1, Column 5</td>
|
|
319
|
-
<td>Row 1, Column 6</td>
|
|
320
|
-
<td>Row 1, Column 7</td>
|
|
321
|
-
<td>Row 1, Column 8</td>
|
|
322
|
-
<td>Row 1, Column 9</td>
|
|
323
|
-
<td>Row 1, Column 10</td>
|
|
324
|
-
<td>Row 1, Column 11</td>
|
|
325
|
-
<td>Row 1, Column 12</td>
|
|
213
|
+
<th scope="row">Chris</th>
|
|
214
|
+
<td>HTML tables</td>
|
|
215
|
+
<td>22</td>
|
|
326
216
|
</tr>
|
|
327
217
|
<tr>
|
|
328
|
-
<
|
|
329
|
-
<td>
|
|
330
|
-
<td>
|
|
331
|
-
<td>Row 2, Column 4</td>
|
|
332
|
-
<td>Row 2, Column 5</td>
|
|
333
|
-
<td>Row 2, Column 6</td>
|
|
334
|
-
<td>Row 2, Column 7</td>
|
|
335
|
-
<td>Row 2, Column 8</td>
|
|
336
|
-
<td>Row 2, Column 9</td>
|
|
337
|
-
<td>Row 2, Column 10</td>
|
|
338
|
-
<td>Row 2, Column 11</td>
|
|
339
|
-
<td>Row 2, Column 12</td>
|
|
218
|
+
<th scope="row">Dennis</th>
|
|
219
|
+
<td>Web accessibility</td>
|
|
220
|
+
<td>45</td>
|
|
340
221
|
</tr>
|
|
341
222
|
<tr>
|
|
342
|
-
<
|
|
343
|
-
<td>
|
|
344
|
-
<td
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
<
|
|
348
|
-
<td
|
|
349
|
-
<td>
|
|
350
|
-
<td class="tertiary">Row 3, Column 9</td>
|
|
351
|
-
<td>Row 3, Column 10</td>
|
|
352
|
-
<td class="tertiary">Row 3, Column 11</td>
|
|
353
|
-
<td>Row 3, Column 12</td>
|
|
223
|
+
<th scope="row">Sarah</th>
|
|
224
|
+
<td>JavaScript frameworks</td>
|
|
225
|
+
<td>29</td>
|
|
226
|
+
</tr>
|
|
227
|
+
<tr>
|
|
228
|
+
<th scope="row">Karen</th>
|
|
229
|
+
<td>Web performance</td>
|
|
230
|
+
<td>36</td>
|
|
354
231
|
</tr>
|
|
355
232
|
</tbody>
|
|
233
|
+
<tfoot>
|
|
234
|
+
<tr>
|
|
235
|
+
<th scope="row" colspan="2">Average age</th>
|
|
236
|
+
<td>33</td>
|
|
237
|
+
</tr>
|
|
238
|
+
</tfoot>
|
|
356
239
|
</table>
|
|
240
|
+
<table class="secondary bordered striped-columns hoverable">
|
|
241
|
+
<caption>
|
|
242
|
+
Front-end web developer course 2021
|
|
243
|
+
</caption>
|
|
244
|
+
<thead>
|
|
245
|
+
<tr>
|
|
246
|
+
<th scope="col">Person</th>
|
|
247
|
+
<th scope="col">Most interest in</th>
|
|
248
|
+
<th scope="col">Age</th>
|
|
249
|
+
</tr>
|
|
250
|
+
</thead>
|
|
251
|
+
<tbody>
|
|
252
|
+
<tr>
|
|
253
|
+
<th scope="row">Chris</th>
|
|
254
|
+
<td>HTML tables</td>
|
|
255
|
+
<td>22</td>
|
|
256
|
+
</tr>
|
|
257
|
+
<tr>
|
|
258
|
+
<th scope="row">Dennis</th>
|
|
259
|
+
<td>Web accessibility</td>
|
|
260
|
+
<td>45</td>
|
|
261
|
+
</tr>
|
|
262
|
+
<tr>
|
|
263
|
+
<th scope="row">Sarah</th>
|
|
264
|
+
<td>JavaScript frameworks</td>
|
|
265
|
+
<td>29</td>
|
|
266
|
+
</tr>
|
|
267
|
+
<tr>
|
|
268
|
+
<th scope="row">Karen</th>
|
|
269
|
+
<td>Web performance</td>
|
|
270
|
+
<td>36</td>
|
|
271
|
+
</tr>
|
|
272
|
+
</tbody>
|
|
273
|
+
<tfoot>
|
|
274
|
+
<tr>
|
|
275
|
+
<th scope="row" colspan="2">Average age</th>
|
|
276
|
+
<td>33</td>
|
|
277
|
+
</tr>
|
|
278
|
+
</tfoot>
|
|
279
|
+
</table>
|
|
280
|
+
<table class="tertiary striped-columns hoverable">
|
|
281
|
+
<caption>
|
|
282
|
+
Front-end web developer course 2021
|
|
283
|
+
</caption>
|
|
284
|
+
<thead>
|
|
285
|
+
<tr>
|
|
286
|
+
<th scope="col">Person</th>
|
|
287
|
+
<th scope="col">Most interest in</th>
|
|
288
|
+
<th scope="col">Age</th>
|
|
289
|
+
</tr>
|
|
290
|
+
</thead>
|
|
291
|
+
<tbody>
|
|
292
|
+
<tr>
|
|
293
|
+
<th scope="row">Chris</th>
|
|
294
|
+
<td>HTML tables</td>
|
|
295
|
+
<td>22</td>
|
|
296
|
+
</tr>
|
|
297
|
+
<tr>
|
|
298
|
+
<th scope="row">Dennis</th>
|
|
299
|
+
<td>Web accessibility</td>
|
|
300
|
+
<td>45</td>
|
|
301
|
+
</tr>
|
|
302
|
+
<tr>
|
|
303
|
+
<th scope="row">Sarah</th>
|
|
304
|
+
<td>JavaScript frameworks</td>
|
|
305
|
+
<td>29</td>
|
|
306
|
+
</tr>
|
|
307
|
+
<tr>
|
|
308
|
+
<th scope="row">Karen</th>
|
|
309
|
+
<td>Web performance</td>
|
|
310
|
+
<td>36</td>
|
|
311
|
+
</tr>
|
|
312
|
+
</tbody>
|
|
313
|
+
<tfoot>
|
|
314
|
+
<tr>
|
|
315
|
+
<th scope="row" colspan="2">Average age</th>
|
|
316
|
+
<td>33</td>
|
|
317
|
+
</tr>
|
|
318
|
+
</tfoot>
|
|
319
|
+
</table>
|
|
320
|
+
<div class="responsive-table">
|
|
321
|
+
<table class="striped-columns">
|
|
322
|
+
<caption>
|
|
323
|
+
A "responsive" table element. Resize the window to see the effect.
|
|
324
|
+
</caption>
|
|
325
|
+
<thead class="primary">
|
|
326
|
+
<tr>
|
|
327
|
+
<th scrop="col">Column 1</th>
|
|
328
|
+
<th scrop="col">Column 2</th>
|
|
329
|
+
<th scrop="col">Column 3</th>
|
|
330
|
+
<th scrop="col">Column 4</th>
|
|
331
|
+
<th scrop="col">Column 5</th>
|
|
332
|
+
<th scrop="col">Column 6</th>
|
|
333
|
+
<th scrop="col">Column 7</th>
|
|
334
|
+
<th scrop="col">Column 8</th>
|
|
335
|
+
<th scrop="col">Column 9</th>
|
|
336
|
+
<th scrop="col">Column 10</th>
|
|
337
|
+
<th scrop="col">Column 11</th>
|
|
338
|
+
<th scrop="col">Column 12</th>
|
|
339
|
+
</tr>
|
|
340
|
+
</thead>
|
|
341
|
+
<tbody>
|
|
342
|
+
<tr>
|
|
343
|
+
<td>Row 1, Column 1</td>
|
|
344
|
+
<td>Row 1, Column 2</td>
|
|
345
|
+
<td>Row 1, Column 3</td>
|
|
346
|
+
<td>Row 1, Column 4</td>
|
|
347
|
+
<td>Row 1, Column 5</td>
|
|
348
|
+
<td>Row 1, Column 6</td>
|
|
349
|
+
<td>Row 1, Column 7</td>
|
|
350
|
+
<td>Row 1, Column 8</td>
|
|
351
|
+
<td>Row 1, Column 9</td>
|
|
352
|
+
<td>Row 1, Column 10</td>
|
|
353
|
+
<td>Row 1, Column 11</td>
|
|
354
|
+
<td>Row 1, Column 12</td>
|
|
355
|
+
</tr>
|
|
356
|
+
<tr>
|
|
357
|
+
<td>Row 2, Column 1</td>
|
|
358
|
+
<td>Row 2, Column 2</td>
|
|
359
|
+
<td>Row 2, Column 3</td>
|
|
360
|
+
<td>Row 2, Column 4</td>
|
|
361
|
+
<td>Row 2, Column 5</td>
|
|
362
|
+
<td>Row 2, Column 6</td>
|
|
363
|
+
<td>Row 2, Column 7</td>
|
|
364
|
+
<td>Row 2, Column 8</td>
|
|
365
|
+
<td>Row 2, Column 9</td>
|
|
366
|
+
<td>Row 2, Column 10</td>
|
|
367
|
+
<td>Row 2, Column 11</td>
|
|
368
|
+
<td>Row 2, Column 12</td>
|
|
369
|
+
</tr>
|
|
370
|
+
<tr>
|
|
371
|
+
<td class="tertiary">Row 3, Column 1</td>
|
|
372
|
+
<td>Row 3, Column 2</td>
|
|
373
|
+
<td class="tertiary highlight">Row 3, Column 3</td>
|
|
374
|
+
<td>Row 3, Column 4</td>
|
|
375
|
+
<td class="tertiary">Row 3, Column 5</td>
|
|
376
|
+
<td>Row 3, Column 6</td>
|
|
377
|
+
<td class="tertiary">Row 3, Column 7</td>
|
|
378
|
+
<td>Row 3, Column 8</td>
|
|
379
|
+
<td class="tertiary">Row 3, Column 9</td>
|
|
380
|
+
<td>Row 3, Column 10</td>
|
|
381
|
+
<td class="tertiary">Row 3, Column 11</td>
|
|
382
|
+
<td>Row 3, Column 12</td>
|
|
383
|
+
</tr>
|
|
384
|
+
</tbody>
|
|
385
|
+
</table>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
<div class="py-10 full-width container">
|
|
389
|
+
<h2>Columns</h2>
|
|
390
|
+
<div class="columns count-6 py-5">
|
|
391
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
392
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
393
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
394
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
395
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
396
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
397
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
398
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
399
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
400
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
401
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
402
|
+
<div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
<div class="py-10 full-width container">
|
|
406
|
+
<h2>Flex columns</h2>
|
|
407
|
+
<div class="flex-columns py-5">
|
|
408
|
+
<div class="col-6 col-md-8 col-xl-9 py-7 bg-primary-700 text-primary-100 px-5">
|
|
409
|
+
<div class="flex-columns">
|
|
410
|
+
<div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
|
|
411
|
+
<div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="col-6 col-md-4 col-xl-3 py-7 bg-primary-700 text-primary-100 px-5"></div>
|
|
415
|
+
<div class="col-12 py-7 bg-primary-700 text-primary-100 px-5">
|
|
416
|
+
<div class="flex-columns">
|
|
417
|
+
<div class="col-6 col-md-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
|
|
418
|
+
<div class="col-6 col-md-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
<div class="col-8 py-7 bg-primary-700 text-primary-100 px-5">
|
|
422
|
+
<div class="flex-columns">
|
|
423
|
+
<div class="col-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
|
|
424
|
+
<div class="col-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
<div class="col-4 py-7 bg-primary-700 text-primary-100 px-5"></div>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
<div class="py-10 full-width container">
|
|
431
|
+
<h2>Cards</h2>
|
|
432
|
+
<div class="columns">
|
|
433
|
+
<div class="card">
|
|
434
|
+
<div class="card-image">
|
|
435
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
436
|
+
</div>
|
|
437
|
+
<div class="card-content">
|
|
438
|
+
<div class="card-header">
|
|
439
|
+
<h3 class="card-title">Title</h3>
|
|
440
|
+
</div>
|
|
441
|
+
<div class="card-body">
|
|
442
|
+
<p>This is some text that describes the card.</p>
|
|
443
|
+
</div>
|
|
444
|
+
<div class="card-footer">
|
|
445
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
</div>
|
|
449
|
+
<div class="card">
|
|
450
|
+
<div class="card-image">
|
|
451
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
452
|
+
</div>
|
|
453
|
+
<div class="card-content">
|
|
454
|
+
<div class="card-header">
|
|
455
|
+
<h3 class="card-title">Title</h3>
|
|
456
|
+
</div>
|
|
457
|
+
<div class="card-body">
|
|
458
|
+
<p>This is some text that describes the card.</p>
|
|
459
|
+
</div>
|
|
460
|
+
<div class="card-footer">
|
|
461
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
<div class="card">
|
|
466
|
+
<div class="card-image">
|
|
467
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
468
|
+
</div>
|
|
469
|
+
<div class="card-content">
|
|
470
|
+
<div class="card-header">
|
|
471
|
+
<h3 class="card-title">Title</h3>
|
|
472
|
+
</div>
|
|
473
|
+
<div class="card-body">
|
|
474
|
+
<p>This is some text that describes the card.</p>
|
|
475
|
+
</div>
|
|
476
|
+
<div class="card-footer">
|
|
477
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
478
|
+
</div>
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
481
|
+
<div class="card">
|
|
482
|
+
<div class="card-image">
|
|
483
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
484
|
+
</div>
|
|
485
|
+
<div class="card-content">
|
|
486
|
+
<div class="card-header">
|
|
487
|
+
<h3 class="card-title">Title</h3>
|
|
488
|
+
</div>
|
|
489
|
+
<div class="card-body">
|
|
490
|
+
<p>This is some text that describes the card.</p>
|
|
491
|
+
</div>
|
|
492
|
+
<div class="card-footer">
|
|
493
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
494
|
+
</div>
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
497
|
+
<div class="card">
|
|
498
|
+
<div class="card-image">
|
|
499
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
500
|
+
</div>
|
|
501
|
+
<div class="card-content">
|
|
502
|
+
<div class="card-header">
|
|
503
|
+
<h3 class="card-title">Title</h3>
|
|
504
|
+
</div>
|
|
505
|
+
<div class="card-body">
|
|
506
|
+
<p>This is some text that describes the card.</p>
|
|
507
|
+
</div>
|
|
508
|
+
<div class="card-footer">
|
|
509
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
510
|
+
</div>
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
<div class="card">
|
|
514
|
+
<div class="card-image">
|
|
515
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
516
|
+
</div>
|
|
517
|
+
<div class="card-content">
|
|
518
|
+
<div class="card-header">
|
|
519
|
+
<h3 class="card-title">Title</h3>
|
|
520
|
+
</div>
|
|
521
|
+
<div class="card-body">
|
|
522
|
+
<p>This is some text that describes the card.</p>
|
|
523
|
+
</div>
|
|
524
|
+
<div class="card-footer">
|
|
525
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
526
|
+
</div>
|
|
527
|
+
</div>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
<div class="py-10 full-width container">
|
|
532
|
+
<h2>Horizontal Cards</h2>
|
|
533
|
+
<div class="columns count-2">
|
|
534
|
+
<div class="card horizontal">
|
|
535
|
+
<div class="card-image">
|
|
536
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
537
|
+
</div>
|
|
538
|
+
<div class="card-content">
|
|
539
|
+
<div class="card-header">
|
|
540
|
+
<h3 class="card-title">Title</h3>
|
|
541
|
+
</div>
|
|
542
|
+
<div class="card-body">
|
|
543
|
+
<p>This is some text that describes the card.</p>
|
|
544
|
+
</div>
|
|
545
|
+
<div class="card-footer">
|
|
546
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
<div class="card horizontal right">
|
|
551
|
+
<div class="card-image">
|
|
552
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
553
|
+
</div>
|
|
554
|
+
<div class="card-content">
|
|
555
|
+
<div class="card-header">
|
|
556
|
+
<h3 class="card-title">Title</h3>
|
|
557
|
+
</div>
|
|
558
|
+
<div class="card-body">
|
|
559
|
+
<p>This is some text that describes the card.</p>
|
|
560
|
+
</div>
|
|
561
|
+
<div class="card-footer">
|
|
562
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
</div>
|
|
566
|
+
<div class="card horizontal">
|
|
567
|
+
<div class="card-image">
|
|
568
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
569
|
+
</div>
|
|
570
|
+
<div class="card-content">
|
|
571
|
+
<div class="card-header">
|
|
572
|
+
<h3 class="card-title">Title</h3>
|
|
573
|
+
</div>
|
|
574
|
+
<div class="card-body">
|
|
575
|
+
<p>This is some text that describes the card.</p>
|
|
576
|
+
</div>
|
|
577
|
+
<div class="card-footer">
|
|
578
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
579
|
+
</div>
|
|
580
|
+
</div>
|
|
581
|
+
</div>
|
|
582
|
+
<div class="card horizontal right">
|
|
583
|
+
<div class="card-image">
|
|
584
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
585
|
+
</div>
|
|
586
|
+
<div class="card-content">
|
|
587
|
+
<div class="card-header">
|
|
588
|
+
<h3 class="card-title">Title</h3>
|
|
589
|
+
</div>
|
|
590
|
+
<div class="card-body">
|
|
591
|
+
<p>This is some text that describes the card.</p>
|
|
592
|
+
</div>
|
|
593
|
+
<div class="card-footer">
|
|
594
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
595
|
+
</div>
|
|
596
|
+
</div>
|
|
597
|
+
</div>
|
|
598
|
+
<div class="card horizontal">
|
|
599
|
+
<div class="card-image">
|
|
600
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
601
|
+
</div>
|
|
602
|
+
<div class="card-content">
|
|
603
|
+
<div class="card-header">
|
|
604
|
+
<h3 class="card-title">Title</h3>
|
|
605
|
+
</div>
|
|
606
|
+
<div class="card-body">
|
|
607
|
+
<p>This is some text that describes the card.</p>
|
|
608
|
+
</div>
|
|
609
|
+
<div class="card-footer">
|
|
610
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
611
|
+
</div>
|
|
612
|
+
</div>
|
|
613
|
+
</div>
|
|
614
|
+
<div class="card horizontal right">
|
|
615
|
+
<div class="card-image">
|
|
616
|
+
<img src="https://unsplash.it/1000/400" alt="Card image">
|
|
617
|
+
</div>
|
|
618
|
+
<div class="card-content">
|
|
619
|
+
<div class="card-header">
|
|
620
|
+
<h3 class="card-title">Title</h3>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="card-body">
|
|
623
|
+
<p>This is some text that describes the card.</p>
|
|
624
|
+
</div>
|
|
625
|
+
<div class="card-footer">
|
|
626
|
+
<a class="button primary stretched" href="#">Card Action</a>
|
|
627
|
+
</div>
|
|
628
|
+
</div>
|
|
629
|
+
</div>
|
|
630
|
+
</div>
|
|
357
631
|
</div>
|
|
358
632
|
</main>
|
|
633
|
+
<script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/disclosure-menu.iife.js"></script>
|
|
634
|
+
<script src="src/js/navigation.js"></script>
|
|
635
|
+
<script>
|
|
636
|
+
const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
637
|
+
const setTheme = window.localStorage.getItem('theme') || preferredTheme;
|
|
638
|
+
const themeToggle = document.getElementById('dark-mode-toggle');
|
|
639
|
+
|
|
640
|
+
document.documentElement.classList.add(`${setTheme}-mode`);
|
|
641
|
+
themeToggle.innerHTML = setTheme === 'dark' ? 'Toggle light mode' : 'Toggle dark mode';
|
|
642
|
+
|
|
643
|
+
themeToggle.addEventListener('click', () => {
|
|
644
|
+
const currentTheme = document.documentElement.classList.contains('dark-mode') ? 'dark' : 'light';
|
|
645
|
+
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
646
|
+
|
|
647
|
+
document.documentElement.classList.remove(`${currentTheme}-mode`);
|
|
648
|
+
document.documentElement.classList.add(`${newTheme}-mode`);
|
|
649
|
+
window.localStorage.setItem('theme', newTheme);
|
|
650
|
+
themeToggle.innerHTML = newTheme === 'dark' ? 'Toggle light mode' : 'Toggle dark mode';
|
|
651
|
+
});
|
|
652
|
+
</script>
|
|
359
653
|
</body>
|
|
360
654
|
|
|
361
655
|
</html>
|