diff options
author | MCMXC <16797721+mcmxcdev@users.noreply.github.com> | 2024-02-10 18:37:40 -0700 |
---|---|---|
committer | Vijay A <vraravam@users.noreply.github.com> | 2024-02-13 06:59:44 +0530 |
commit | e1c47572a6235fd8fd20af888ac3a11c7ae1369d (patch) | |
tree | 2dccff36a441916d7014037cef3f7ce84a790cad /public/css/vanilla.css | |
parent | refactor: project maintenance (diff) | |
download | ferdium-server-e1c47572a6235fd8fd20af888ac3a11c7ae1369d.tar.gz ferdium-server-e1c47572a6235fd8fd20af888ac3a11c7ae1369d.tar.zst ferdium-server-e1c47572a6235fd8fd20af888ac3a11c7ae1369d.zip |
updates
Diffstat (limited to 'public/css/vanilla.css')
-rw-r--r-- | public/css/vanilla.css | 374 |
1 files changed, 274 insertions, 100 deletions
diff --git a/public/css/vanilla.css b/public/css/vanilla.css index 37bc051..191d545 100644 --- a/public/css/vanilla.css +++ b/public/css/vanilla.css | |||
@@ -1,138 +1,312 @@ | |||
1 | /* Reset */ | 1 | /* Reset */ |
2 | html, body, div, span, applet, object, iframe, | 2 | html, |
3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | 3 | body, |
4 | a, abbr, acronym, address, big, cite, code, | 4 | div, |
5 | del, dfn, em, img, ins, kbd, q, s, samp, | 5 | span, |
6 | small, strike, strong, sub, sup, tt, var, | 6 | applet, |
7 | b, u, i, center, | 7 | object, |
8 | dl, dt, dd, ol, ul, li, | 8 | iframe, |
9 | fieldset, form, label, legend, | 9 | h1, |
10 | table, caption, tbody, tfoot, thead, tr, th, td, | 10 | h2, |
11 | article, aside, canvas, details, embed, | 11 | h3, |
12 | figure, figcaption, footer, header, hgroup, | 12 | h4, |
13 | menu, nav, output, ruby, section, summary, | 13 | h5, |
14 | time, mark, audio, video { | 14 | h6, |
15 | margin: 0; | 15 | p, |
16 | padding: 0; | 16 | blockquote, |
17 | border: 0; | 17 | pre, |
18 | font-size: 100%; | 18 | a, |
19 | font: inherit; | 19 | abbr, |
20 | vertical-align: baseline; | 20 | acronym, |
21 | address, | ||
22 | big, | ||
23 | cite, | ||
24 | code, | ||
25 | del, | ||
26 | dfn, | ||
27 | em, | ||
28 | img, | ||
29 | ins, | ||
30 | kbd, | ||
31 | q, | ||
32 | s, | ||
33 | samp, | ||
34 | small, | ||
35 | strike, | ||
36 | strong, | ||
37 | sub, | ||
38 | sup, | ||
39 | tt, | ||
40 | var, | ||
41 | b, | ||
42 | u, | ||
43 | i, | ||
44 | center, | ||
45 | dl, | ||
46 | dt, | ||
47 | dd, | ||
48 | ol, | ||
49 | ul, | ||
50 | li, | ||
51 | fieldset, | ||
52 | form, | ||
53 | label, | ||
54 | legend, | ||
55 | table, | ||
56 | caption, | ||
57 | tbody, | ||
58 | tfoot, | ||
59 | thead, | ||
60 | tr, | ||
61 | th, | ||
62 | td, | ||
63 | article, | ||
64 | aside, | ||
65 | canvas, | ||
66 | details, | ||
67 | embed, | ||
68 | figure, | ||
69 | figcaption, | ||
70 | footer, | ||
71 | header, | ||
72 | hgroup, | ||
73 | menu, | ||
74 | nav, | ||
75 | output, | ||
76 | ruby, | ||
77 | section, | ||
78 | summary, | ||
79 | time, | ||
80 | mark, | ||
81 | audio, | ||
82 | video { | ||
83 | margin: 0; | ||
84 | padding: 0; | ||
85 | border: 0; | ||
86 | font-size: 100%; | ||
87 | font: inherit; | ||
88 | vertical-align: baseline; | ||
21 | } | 89 | } |
22 | * { | 90 | * { |
23 | box-sizing: border-box; | 91 | box-sizing: border-box; |
24 | } | 92 | } |
25 | 93 | ||
26 | |||
27 | |||
28 | /* Variables */ | 94 | /* Variables */ |
29 | :root { | 95 | :root { |
30 | --desktop-font-size: 1.3rem/1.5; | 96 | --desktop-font-size: 1.3rem/1.5; |
31 | --mobile-font-size: 1.1rem/1.4; | 97 | --mobile-font-size: 1.1rem/1.4; |
32 | --text-color: #2d2d2d; | 98 | --text-color: #2d2d2d; |
33 | --link-color: blue; | 99 | --link-color: blue; |
34 | --primary-color: lightsteelblue; | 100 | --primary-color: lightsteelblue; |
35 | --secondary-color: aliceblue; | 101 | --secondary-color: aliceblue; |
36 | --tertiary-color: whitesmoke; | 102 | --tertiary-color: whitesmoke; |
37 | } | 103 | } |
38 | 104 | ||
39 | |||
40 | |||
41 | |||
42 | /* Typography */ | 105 | /* Typography */ |
43 | body { | 106 | body { |
44 | color: var(--text-color); | 107 | color: var(--text-color); |
45 | padding: 3rem; | 108 | padding: 3rem; |
46 | font: var(--desktop-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; | 109 | font: |
110 | var(--desktop-font-size) -apple-system, | ||
111 | BlinkMacSystemFont, | ||
112 | 'Segoe UI', | ||
113 | Roboto, | ||
114 | Helvetica, | ||
115 | Arial, | ||
116 | sans-serif, | ||
117 | 'Apple Color Emoji', | ||
118 | 'Segoe UI Emoji', | ||
119 | 'Segoe UI Symbol'; | ||
47 | } | 120 | } |
48 | 121 | ||
49 | h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure { | 122 | h1, |
50 | margin: 2rem 0; | 123 | h2, |
124 | h3, | ||
125 | h4, | ||
126 | h5, | ||
127 | h6, | ||
128 | p, | ||
129 | blockquote, | ||
130 | dl, | ||
131 | img, | ||
132 | figure { | ||
133 | margin: 2rem 0; | ||
51 | } | 134 | } |
52 | 135 | ||
53 | h1,h2,h3,h4,h5,h6 { font-weight: bold; } | 136 | h1, |
54 | h1 { font-size: 200%; } | 137 | h2, |
55 | h2 { font-size: 150%; } | 138 | h3, |
56 | h3 { font-size: 120%; } | 139 | h4, |
57 | h4,h5,h6 { font-size: 100%; } | 140 | h5, |
58 | h5, h6 { text-transform: uppercase; } | 141 | h6 { |
59 | 142 | font-weight: bold; | |
60 | header h1 { border-bottom: 1px solid; } | 143 | } |
144 | h1 { | ||
145 | font-size: 200%; | ||
146 | } | ||
147 | h2 { | ||
148 | font-size: 150%; | ||
149 | } | ||
150 | h3 { | ||
151 | font-size: 120%; | ||
152 | } | ||
153 | h4, | ||
154 | h5, | ||
155 | h6 { | ||
156 | font-size: 100%; | ||
157 | } | ||
158 | h5, | ||
159 | h6 { | ||
160 | text-transform: uppercase; | ||
161 | } | ||
61 | 162 | ||
62 | p { margin: 2rem 0; } | 163 | header h1 { |
164 | border-bottom: 1px solid; | ||
165 | } | ||
63 | 166 | ||
64 | a,a:visited { color: var(--link-color); } | 167 | p { |
168 | margin: 2rem 0; | ||
169 | } | ||
65 | 170 | ||
66 | strong, time, b { font-weight: bold; } | 171 | a, |
67 | em, dfn, i { font-style: italic; } | 172 | a:visited { |
68 | sub { font-size: 60%; vertical-align: bottom; } | 173 | color: var(--link-color); |
69 | small { font-size: 80%; } | 174 | } |
70 | 175 | ||
71 | blockquote, q { | 176 | strong, |
72 | background: var(--secondary-color); | 177 | time, |
73 | border-left: 10px solid var(--primary-color); | 178 | b { |
74 | font-family: "Georgia", serif; | 179 | font-weight: bold; |
75 | padding: 1rem; | ||
76 | } | 180 | } |
77 | blockquote p:first-child { margin-top: 0; } | 181 | em, |
78 | cite { | 182 | dfn, |
79 | font-family: "Georgia", serif; | 183 | i { |
80 | font-style: italic; | 184 | font-style: italic; |
81 | font-weight: bold; | ||
82 | } | 185 | } |
83 | 186 | sub { | |
84 | kbd,code,samp,pre,var { font-family: monospace; font-weight: bold; } | 187 | font-size: 60%; |
85 | code, pre { | 188 | vertical-align: bottom; |
86 | background: var(--tertiary-color); | 189 | } |
87 | padding: 0.5rem 1rem; | 190 | small { |
191 | font-size: 80%; | ||
88 | } | 192 | } |
89 | code pre , pre code { padding: 0; } | ||
90 | 193 | ||
194 | blockquote, | ||
195 | q { | ||
196 | background: var(--secondary-color); | ||
197 | border-left: 10px solid var(--primary-color); | ||
198 | font-family: 'Georgia', serif; | ||
199 | padding: 1rem; | ||
200 | } | ||
201 | blockquote p:first-child { | ||
202 | margin-top: 0; | ||
203 | } | ||
204 | cite { | ||
205 | font-family: 'Georgia', serif; | ||
206 | font-style: italic; | ||
207 | font-weight: bold; | ||
208 | } | ||
91 | 209 | ||
210 | kbd, | ||
211 | code, | ||
212 | samp, | ||
213 | pre, | ||
214 | var { | ||
215 | font-family: monospace; | ||
216 | font-weight: bold; | ||
217 | } | ||
218 | code, | ||
219 | pre { | ||
220 | background: var(--tertiary-color); | ||
221 | padding: 0.5rem 1rem; | ||
222 | } | ||
223 | code pre, | ||
224 | pre code { | ||
225 | padding: 0; | ||
226 | } | ||
92 | 227 | ||
93 | /* Elements */ | 228 | /* Elements */ |
94 | hr { | 229 | hr { |
95 | background: var(--text-color); | 230 | background: var(--text-color); |
96 | border: 0; | 231 | border: 0; |
97 | height: 1px; | 232 | height: 1px; |
98 | margin: 4rem 0; | 233 | margin: 4rem 0; |
99 | } | 234 | } |
100 | 235 | ||
101 | img { max-width: 100%; } | 236 | img { |
237 | max-width: 100%; | ||
238 | } | ||
102 | 239 | ||
103 | figure { | 240 | figure { |
104 | border: 1px solid var(--primary-color); | 241 | border: 1px solid var(--primary-color); |
105 | display: inline-block; | 242 | display: inline-block; |
106 | padding: 1rem; | 243 | padding: 1rem; |
107 | width: auto; | 244 | width: auto; |
245 | } | ||
246 | figure img { | ||
247 | margin: 0; | ||
248 | } | ||
249 | figure figcaption { | ||
250 | font-size: 80%; | ||
108 | } | 251 | } |
109 | figure img { margin: 0; } | ||
110 | figure figcaption { font-size: 80%; } | ||
111 | 252 | ||
112 | ul, ol { margin: 2rem 0; padding: 0 0 0 4rem; } | 253 | ul, |
254 | ol { | ||
255 | margin: 2rem 0; | ||
256 | padding: 0 0 0 4rem; | ||
257 | } | ||
113 | 258 | ||
114 | dl dd { padding-left: 2rem; } | 259 | dl dd { |
260 | padding-left: 2rem; | ||
261 | } | ||
115 | 262 | ||
116 | table { | 263 | table { |
117 | border: 1px solid var(--primary-color); | 264 | border: 1px solid var(--primary-color); |
118 | border-collapse: collapse; | 265 | border-collapse: collapse; |
119 | table-layout: fixed; | 266 | table-layout: fixed; |
120 | width: 100%; | 267 | width: 100%; |
268 | } | ||
269 | table caption { | ||
270 | margin: 2rem 0; | ||
271 | } | ||
272 | table thead { | ||
273 | text-align: center; | ||
274 | } | ||
275 | table tbody { | ||
276 | text-align: right; | ||
277 | } | ||
278 | table tr { | ||
279 | border-bottom: 1px solid var(--primary-color); | ||
280 | } | ||
281 | table tbody tr:nth-child(even) { | ||
282 | background: var(--tertiary-color); | ||
283 | } | ||
284 | table th { | ||
285 | background: var(--secondary-color); | ||
286 | font-weight: bold; | ||
287 | } | ||
288 | table th, | ||
289 | table td { | ||
290 | padding: 1rem; | ||
291 | } | ||
292 | table th:not(last-of-type), | ||
293 | table td:not(last-of-type) { | ||
294 | border-right: 1px solid var(--primary-color); | ||
121 | } | 295 | } |
122 | table caption { margin: 2rem 0; } | ||
123 | table thead { text-align: center; } | ||
124 | table tbody { text-align: right; } | ||
125 | table tr { border-bottom: 1px solid var(--primary-color); } | ||
126 | table tbody tr:nth-child(even) { background: var(--tertiary-color); } | ||
127 | table th { background: var(--secondary-color); font-weight: bold; } | ||
128 | table th, table td { padding: 1rem; } | ||
129 | table th:not(last-of-type), table td:not(last-of-type) { border-right: 1px solid var(--primary-color); } | ||
130 | |||
131 | |||
132 | 296 | ||
133 | /* Mobile Styling */ | 297 | /* Mobile Styling */ |
134 | @media screen and (max-width: 50rem) { | 298 | @media screen and (max-width: 50rem) { |
135 | body { | 299 | body { |
136 | font: var(--mobile-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol" | 300 | font: |
137 | } | 301 | var(--mobile-font-size) -apple-system, |
138 | } \ No newline at end of file | 302 | BlinkMacSystemFont, |
303 | 'Segoe UI', | ||
304 | Roboto, | ||
305 | Helvetica, | ||
306 | Arial, | ||
307 | sans-serif, | ||
308 | 'Apple Color Emoji', | ||
309 | 'Segoe UI Emoji', | ||
310 | 'Segoe UI Symbol'; | ||
311 | } | ||
312 | } | ||