Index

joshstock.in / 7722378

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

Latest Commit

{#}TimeHashSubjectAuthor#(+)(-)GPG?
17615 Mar 2023 15:22f8eb074Adjust link anchor positioning for mobile screensJosh Stockin111G

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

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