Index

joshstock.in / b2bc5e5

Source for serving and static templating/compiling of https://joshstock.in.

Latest Commit

{#}TimeHashSubjectAuthor#(+)(-)GPG?
19308 Dec 2023 15:598145fecFractals articleJosh Stockin1107G

Blob @ joshstock.in / site / style / core.scss

text/plain13286 bytesdownload raw
1@import 'normalize';
2@import 'fonts';
3@import 'sizes';
4@import 'themes/themes';
5
6
7* {
8 box-sizing: border-box;
9}
10body {
11 display: flex;
12 line-height: 1.65;
13 padding: 0;
14 flex-flow: column;
15 min-height: 100%;
16 color: var(--text-color);
17 overflow-wrap: anywhere;
18 font-family: "Fira Sans", sans-serif;
19 font-size: $base-font-size;
20 text-rendering: optimizeLegibility;
21 background-color: var(--background-color);
22
23 a {
24 color: var(--link-color);
25 text-decoration: none;
26 &:hover {
27 text-decoration: underline;
28 }
29 &:visited {
30 color: var(--link-visited-color);
31 }
32 }
33
34 @media (max-width: $page-compress-width) {
35 & {
36 font-size: $mobile-font-size;
37 }
38 }
39}
40
41@media print {
42 * {
43 color: #000 !important;
44 white-space: pre-wrap;
45 max-width: 100%;
46 box-sizing: border-box !important;
47 }
48 img.svg.icon {
49 filter: none !important;
50 }
51 a {
52 color: #757575 !important;
53 }
54 div.banner-image {
55 display: none;
56 }
57 div.topbar-container {
58 position: unset;
59 }
60 .header::before {
61 height: 0 !important;
62 }
63 .blog-content {
64 h1, h2, h3, h4, h5, h6, p, pre, table {
65 margin: 0;
66 padding: 0;
67 }
68 }
69 .anchor {
70 display: none;
71 }
72 footer {
73 display: none;
74 }
75}
76
77div.banner-image {
78 width: 100%;
79 height: $base-banner-height;
80 background-image: url(/static/images/river.jpg);
81 background-size: cover;
82 background-position: 50% 30%;
83 transition: transform 1s linear;
84}
85.topbar-container {
86 width: 100%;
87 padding: $base-font-size;
88 font-family: 'Chivo';
89 /*position: sticky;*/
90 top: 0;
91 background-color: var(--background-color);
92 z-index: 10;
93 padding-bottom: 0;
94 margin-bottom: $base-font-size;
95 a, a:visited {
96 color: var(--text-color);
97 }
98 ul.topbar {
99 display: flex;
100 flex-wrap: wrap;
101 max-width: $topbar-max-width;
102 margin: 0 auto;
103 padding: 5px 0;
104 line-height: 1.15;
105 list-style: none;
106 border-bottom: 2px solid var(--border-color);
107
108 div.wrap-group {
109 @media (max-width: $topbar-reduce-width) {
110 margin-left: 0;
111 margin-right: $topbar-font-size-reduced;
112 display: inline-block;
113 }
114 }
115
116 li {
117 display: inline-block;
118 white-space: nowrap;
119 font-size: $topbar-font-size;
120 &.hfill {
121 flex: 1;
122 @media (max-width: $topbar-reduce-width) {
123 flex: none;
124 }
125 }
126 &.title {
127 margin-right: $topbar-font-size;
128 }
129 &:not(.title) {
130 @media (max-width: $topbar-reduce-width) {
131 font-size: $topbar-font-size-reduced;
132 padding: 4px 0;
133 vertical-align: middle;
134 }
135 }
136 &:not(.hfill):hover {
137 position: relative;
138 top: 1px;
139 transition: transform 0.3s linear;
140 cursor: pointer;
141 }
142 &:not(.title):not(.hfill):not(:last-of-type) {
143 margin-right: $topbar-font-size/2;
144 }
145 svg {
146 display: inline-block;
147 height: $topbar-font-size;
148 vertical-align: middle;
149 }
150 }
151 }
152}
153
154div.content-container {
155 display: flex;
156 flex-flow: column;
157 flex: 1;
158 width: 100%;
159 padding: 0 16px;
160
161 div.content-body {
162 width: 100%;
163 max-width: $page-max-width;
164 margin: 0 auto;
165
166 div.blog-metadata, div.blog-listing {
167 margin-bottom: 1.5em;
168 .title {
169 margin: 0 0 0.25em 0;
170 line-height: 1.25;
171 }
172 p {
173 margin: 0;
174 .readtime {
175 margin-left: 0.5em;
176 }
177 }
178 p.description {
179 margin-bottom: 0.5em;
180 }
181 a, a:visited {
182 color: var(--text-color);
183 &:not(.thumb):hover {
184 text-decoration: none;
185 border-bottom: 1px solid var(--text-color);
186 }
187 }
188 }
189
190 div.blog-listing {
191 display: flex;
192 flex: column;
193 height: fit-content;
194 min-height: 200px;
195 border-top: 1px solid var(--border-color);
196 padding-top: 1.5em;
197 a.blog-banner.thumb {
198 height: 100%;
199 padding-right: 1em;
200 flex: 1;
201 div {
202 width: 100%;
203 min-height: 200px;
204 height: 100%;
205 background-size: cover;
206 background-position: center;
207 }
208 }
209 .blog-listing-container {
210 flex: 2;
211 }
212 @media (max-width: $page-compress-width) {
213 display: block;
214 a.blog-banner.thumb {
215 height: 200px;
216 width: 100%;
217 padding-right: 0;
218 }
219 .blog-listing-container {
220 margin-top: 1em;
221 margin-bottom: 2em;
222 }
223 }
224 }
225
226 div.blog-content {
227 margin: 1em 0;
228 border-bottom: 1px solid var(--border-color);
229 }
230
231 div.blog-end {
232 p {
233 margin-top: 1em;
234 }
235 }
236
237 iframe {
238 width: 100%;
239 height: 600px;
240 border: 1px solid var(--border-color);
241 margin-bottom: 1em;
242 }
243
244 hr {
245 border: 1px solid var(--border-color);
246 margin-bottom: 1.5em;
247 }
248 h1, h2, h3, h4, h5, h6, p, pre {
249 padding: 0;
250 word-wrap: break;
251 }
252 p, pre {
253 line-height: 1.65;
254 }
255
256 h1, h2, h3, h4, h5, h6 {
257 margin: 1em 0 0.5em 0;
258 line-height: 1.25;
259 &:first-child {
260 margin: 0;
261 }
262 &.header {
263 position: relative;
264 scroll-margin-top: 1em;
265 .anchor {
266 opacity: 0.3;
267 position: absolute;
268 left: -$base-font-size*2;
269 top: calc(50% - #{$base-font-size/2});
270 .svg {
271 vertical-align: middle;
272 width: $base-font-size;
273 height: $base-font-size;
274 }
275 &:hover {
276 opacity: 0.6;
277 }
278 @media (max-width: $page-compress-width + $base-font-size*8) {
279 position: unset;
280 margin-left: 6px;
281 }
282 }
283 }
284 }
285
286 p {
287 margin: 1em 0 1em 0;
288 &:first-of-type {
289 margin-top: 0;
290 }
291 }
292
293 blockquote {
294 padding: 1em;
295 margin: 0.5em 0;
296 border-left: 8px solid var(--border-color);
297 background-color: var(--blockquote-background-color);
298 p:last-of-type {
299 margin-bottom: 0;
300 }
301 }
302
303 ul, ol {
304 padding-left: 0;
305 li {
306 position: relative;
307 margin-bottom: 0.5em;
308 margin-left: 0;
309 left: 1.5em;
310 margin-right: 1.5em;
311 }
312 }
313
314 div.codehilite {
315 border: 1px solid var(--border-color);
316 border-radius: 4px;
317 padding: 0;
318 margin: 0 0 1em 0;
319 background-color: var(--code-background-color);
320 pre {
321 padding: 1em;
322 margin: 0;
323 overflow-x: auto;
324 font-size: 0.8em;
325 }
326 }
327
328 code:not(.codehilite *) {
329 border: 1px solid var(--border-color);
330 border-radius: 4px;
331 padding: 0 2px;
332 background-color: var(--code-background-color);
333 color: var(--code-text-color);
334 font-size: 0.85em;
335 }
336
337 img, video {
338 position: relative;
339 z-index: 3;
340 max-width: 100%;
341 &.inline.svg {
342 height: 1em;
343 vertical-align: middle;
344 display: inline-block;
345 top: -1.5px;
346 }
347 &.small {
348 max-height: $content-image-small-height;
349 }
350 &.medium {
351 max-height: $content-image-medium-height;
352 }
353 }
354
355 table:not(#commento table) {
356 table-layout: auto;
357 max-width: 100%;
358 overflow-x: auto;
359 width: 100%;
360 border-spacing: 0;
361 border: 1px solid var(--border-color);
362 border-radius: 4px;
363 margin-bottom: 1em;
364 tr {
365 &:first-child, th {
366 font-weight: bolder;
367 background-color: var(--code-background-color);
368 td:first-child {
369 border-top-left-radius: 4px;
370 }
371 td:last-child {
372 border-top-right-radius: 4px;
373 }
374 }
375 &:not(:last-child) td {
376 border-bottom: 1px solid var(--border-color);
377 }
378 }
379 td {
380 padding: 4px 8px;
381 margin: 0;
382 &:not(:last-child) {
383 border-right: 1px solid var(--border-color);
384 }
385 }
386 }
387
388 iframe.full {
389 width: calc(100% - #{$content-image-float-offset*2 + $base-font-size*2});
390 margin-left: $content-image-float-offset;
391 @media (max-width: $figure-compress-width) {
392 & {
393 width: 100%;
394 margin-left: 0;
395 }
396 }
397 }
398 figure.heading-aligned {
399 margin-top: 1em !important;
400 }
401 figure {
402 display: table;
403 margin: 0;
404 &.float-left {
405 float: left;
406 position: relative;
407 left: $content-image-float-offset;
408 margin: 0 $content-image-float-offset+$base-font-size 8px 0;
409 }
410 &.float-right {
411 float: right;
412 position: relative;
413 right: $content-image-float-offset;
414 margin: 0 0 8px $content-image-float-offset+$base-font-size;
415 }
416 &.full {
417 display: block;
418 width: 100%;
419 img, video {
420 display: block;
421 margin: 0 auto;
422 }
423 figcaption {
424 display: block;
425 }
426 }
427 @media (max-width: $page-compress-width) {
428 &:not(.full) {
429 display: flex;
430 flex-direction: column;
431 max-width: 100% !important;
432 float: none;
433 width: fit-content;
434 align-items: center;
435 margin: 0 auto 8px auto !important;
436 img, video {
437 display: block;
438 max-width: 100%;
439 margin: 0 auto;
440 }
441 figcaption {
442 display: block;
443 margin: 1em auto 0 auto;
444 }
445 }
446 }
447 @media (max-width: $figure-compress-width) {
448 &:not(.full) {
449 max-width: 50%;
450 }
451 &.float-left {
452 position: inherit;
453 left: 0;
454 margin: 0 16px 8px 0;
455 }
456 &.float-right {
457 position: inherit;
458 right: 0;
459 margin: 0 0 8px 16px;
460 }
461 }
462 figcaption {
463 display: table-caption;
464 caption-side: bottom;
465 margin-top: 1em;
466 text-align: center;
467 width: 100%;
468 }
469 }
470 }
471
472 figcaption {
473 font-size: $figure-font-size;
474 margin-top: 4px;
475 color: var(--caption-color);
476 }
477
478 div.vfill {
479 flex: 1;
480 }
481
482 footer {
483 max-width: $page-max-width;
484 width: 100%;
485 margin: 64px auto 32px auto;
486 text-align: center;
487 border-top: 2px solid var(--border-color);
488 padding-top: 16px;
489 &>p {
490 margin: 0;
491 }
492 }
493}
494