Index

joshstock.in / 4174fd2

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

Latest Commit

{#}TimeHashSubjectAuthor#(+)(-)GPG?
21015 Sep 2024 14:084174fd2Style updatesJosh Stockin172G

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

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