aboutsummaryrefslogtreecommitdiff
path: root/template/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'template/style.css')
-rwxr-xr-xtemplate/style.css436
1 files changed, 0 insertions, 436 deletions
diff --git a/template/style.css b/template/style.css
deleted file mode 100755
index 20ed862..0000000
--- a/template/style.css
+++ /dev/null
@@ -1,436 +0,0 @@
1/*@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');*/
2
3:root {
4 --base-document-width: 640px;
5 --base-font-size: 16px;
6 --base-line-heigh: 1.6em;
7 --base-color: #111111;
8
9 --link-color: #111111;
10 --link-color-hover: #111111;
11
12 --label-color: #222222;
13
14 --border-color: #eeeeee;
15
16 --badge-background-color: #eeeeee;
17 --badge-label-color: #111111;
18
19 --code-font-size: 13px;
20
21 --comment-form-font: 16px 'Times New Roman', Times, serif;
22}
23
24* {
25 box-sizing: border-box;
26}
27
28body {
29 background: white;
30 /*font-family: 'Times New Roman', Times, serif;*/
31 /*font-family: 'IBM Plex Sans', sans-serif;*/
32 font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
33 color: var(--base-color);
34 font-size: var(--base-font-size);
35 line-height: var(--base-line-heigh);
36 padding: 0;
37 margin: 0;
38 padding-bottom: 100px;
39}
40
41hr {
42 border: 0;
43 border-top: 5px solid #f7f7f7;
44}
45
46
47::selection {
48 background: rgb(255, 241, 177);
49 color: #000;
50}
51
52::-moz-selection {
53 background: rgb(255, 241, 177);
54 color: #000;
55}
56
57.cursor {
58 cursor: pointer;
59}
60
61/* width of the page */
62
63.wrapper {
64 max-width: var(--base-document-width);
65 margin: 0 auto;
66}
67
68/* links */
69
70a {
71 color: black;
72}
73
74a:hover {
75 background: rgb(255, 241, 177);
76}
77
78
79/* headings */
80
81h1 {
82 font-size: 220%;
83 line-height: 1.2em;
84}
85
86h2 {
87 font-size: 180%;
88 line-height: 1.2em;
89}
90
91h3 {
92 font-size: 160%;
93 line-height: 1.2em;
94}
95
96h4 {
97 font-size: 140%;
98 line-height: 1.2em;
99}
100
101h5 {
102 font-size: 120%;
103 line-height: 1.2em;
104}
105
106h6 {
107 font-size: 100%;
108 line-height: 1.2em;
109}
110
111h1[itemtype="headline"] {
112 padding-bottom: 0;
113 margin-bottom: 20px;
114 font-size: 230%;
115 line-height: 1.2em;
116 font-weight: 800;
117}
118
119/* tables */
120
121table {
122 width: 100%;
123}
124
125table,
126th,
127td {
128 border: 1px solid black;
129 text-align: left;
130}
131
132th,
133td {
134 padding: 5px 10px;
135}
136
137
138/* quotes */
139
140blockquote {
141 position: relative;
142 margin-block-start: 30px;
143 margin-block-end: 30px;
144 margin-right: 0;
145}
146
147blockquote:before {
148 content: ' ';
149 background-image: url('/assets/general/alert-light.svg');
150 background-size: 30px 30px;
151 height: 30px;
152 width: 30px;
153 position: absolute;
154 left: -40px;
155 top: 6px;
156}
157
158blockquote p {
159 padding-left: 10px;
160}
161
162
163/* header navigation */
164
165.navigation {
166 margin-block-start: 10px;
167 margin-block-end: 30px;
168}
169
170.navigation header {
171 display: flex;
172 align-items: center;
173}
174
175.navigation header a {
176 text-decoration: none;
177}
178
179.navigation header a:hover {
180 text-decoration: underline;
181}
182
183.navigation header .home {
184 font-size: 130%;
185 font-weight: 700;
186}
187
188.navigation header .home a {
189 color: var(--base-color);
190}
191
192.navigation header .home a:hover {
193 text-decoration: none;
194}
195
196.navigation header nav {
197 flex-grow: 1;
198 text-align: right;
199}
200
201.navigation header nav a {
202 padding: 0 10px;
203 font-size: 100%;
204 font-weight: 500;
205}
206
207/* index post list */
208
209.post-list {
210 list-style-type: none;
211 padding: 0;
212 margin: 0;
213}
214
215.post-list li {
216 margin: 0 0 15px 0;
217}
218
219.post-list li time {
220 display: block;
221 font-size: 80%;
222 font-weight: 500;
223 line-height: 1.2em;
224 color: #a7a7a7;
225}
226
227.post-list li a {
228 display: inline-block;
229 text-decoration: none;
230}
231
232.post-list li a:hover {}
233
234.post-list li a h2 {
235 font-weight: 400;
236 font-size: 100%;
237 margin: 0;
238}
239
240
241/* project list */
242
243.project-list {
244 margin-top: 60px;
245}
246
247.project-list a {}
248
249.project-list li {
250 list-style-type: disclosure-closed;
251 padding-left: 10px;
252}
253
254
255/* webring */
256
257.webring a {
258 font-weight: 500;
259}
260
261
262/* tag badges */
263
264.tags {
265 margin-top: 5px;
266}
267
268.tags a {
269 font-size: 80%;
270 padding: 2px 10px;
271 border-radius: 20px;
272
273 background: var(--badge-background-color);
274 color: var(--badge-label-color) !important;
275}
276
277.tags a:hover {
278 filter: brightness(90%);
279}
280
281
282/* helpers */
283
284.top-margin {
285 margin-top: 60px;
286}
287
288.top-margin-huge {
289 margin-top: 100px;
290}
291
292code {
293 font-family: monospace;
294 background: rgb(255, 241, 177);
295 border-radius: 5px;
296 padding: 2px 8px;
297 font-size: var(--code-font-size);
298 font-weight: 500;
299}
300
301pre>code {
302 background: unset;
303 padding: unset;
304
305 padding: 15px 20px !important;
306 border-radius: 5px !important;
307 font-weight: 400;
308}
309
310pre {
311 font-size: var(--code-font-size);
312 line-height: 1.5em;
313
314 margin-block-start: 40px;
315 margin-block-end: 40px;
316}
317
318img,
319video {
320 max-width: 100%;
321 margin: 30px auto;
322 display: block;
323 border-radius: 5px;
324}
325
326video {
327 background: var(--badge-background-color);
328}
329
330time {
331 color: var(--label-color);
332 font-size: 90%;
333}
334
335/* article */
336
337article a {
338 overflow-wrap: break-word;
339 word-wrap: break-word;
340 -webkit-hyphens: auto;
341 -ms-hyphens: auto;
342 -moz-hyphens: auto;
343 hyphens: auto;
344}
345
346article img {
347 max-width: 120%;
348 width: 120%;
349 position: relative;
350 left: -10%;
351 margin: 40px auto;
352 /* border: 1px solid #eee; */
353}
354
355article strong {
356 font-weight: 600;
357}
358
359article ol {
360 padding-inline-start: 30px;
361}
362
363article .katex-display {
364 margin: 3em 0 !important;
365}
366
367/* audio */
368
369audio {
370 width: 100%;
371 outline: none;
372}
373
374
375/* footer */
376
377.footer {
378 margin-top: 70px;
379 padding-top: 20px;
380 padding-bottom: 50px;
381 font-size: 90%;
382 color: #888;
383}
384
385.footer a {
386 color: #666;
387}
388
389/* responsive */
390
391@media only screen and (max-width: 960px) {
392 main {
393 padding: 0 20px;
394 }
395
396 footer {
397 padding: 0 20px;
398 }
399
400 h1[itemtype="headline"] {
401 font-size: 220%;
402 }
403
404 .navigation header {
405 padding: 0 20px;
406 }
407
408 article img {
409 max-width: 100%;
410 position: initial;
411 margin: 20px auto;
412 }
413}
414
415@media only screen and (max-width: 600px) {
416 .navigation header {
417 display: block;
418 }
419
420 .navigation header h3 {
421 text-align: center;
422 margin-bottom: 10px;
423 }
424
425 .navigation header nav {
426 text-align: center;
427 }
428
429 .post-list li a h2 {
430 font-weight: 500;
431 }
432
433 .search-trigger {
434 display: none;
435 }
436} \ No newline at end of file