aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorclarkzjw <[email protected]>2023-03-01 19:14:59 -0800
committerclarkzjw <[email protected]>2023-03-01 20:21:47 -0800
commit375c0d2544b20124a8cf497819006e01cd217225 (patch)
tree8984bf464561722f33dd15f60a7872ff1aa71912 /assets/new.scss
parentf87fef5388ca419f79c4750810e302cedfc310f5 (diff)
downloadphoto-375c0d2544b20124a8cf497819006e01cd217225.tar.gz
host photos.json on cloudflare r2
Diffstat (limited to 'assets/new.scss')
-rw-r--r--assets/new.scss679
1 files changed, 0 insertions, 679 deletions
diff --git a/assets/new.scss b/assets/new.scss
deleted file mode 100644
index 73c4ed8..0000000
--- a/assets/new.scss
+++ /dev/null
@@ -1,679 +0,0 @@
1---
2---
3
4:root {
5 --backgroundColor: #fdfdfd;
6 --textColor: #303030;
7 --secondaryTextColor: #404040;
8 --mutedTextColor: #707070;
9 --subtleBackgroundColor: #f5f5f5;
10 --heartedBackgroundColor: #ffe2e2;
11 --selectionBackgroundColor: #ffc;
12 --linkColor: #2357cd;
13 --borderColor: #ccc;
14 --hrColor: #888;
15 --activeColor: #74d274;
16 --langBackgroundColor: #eeeeee;
17 --langShadowColor: transparent;
18 --logoColor: #cccccc;
19 --photoBackground: #f4f4f4;
20}
21
22@media (prefers-color-scheme: dark) {
23 :root {
24 --backgroundColor: #151615;
25 --textColor: #dbdfdf;
26 --secondaryTextColor: #cfd5d5;
27 --mutedTextColor: #b4b6b8;
28 --subtleBackgroundColor: #3a3b3b;
29 --heartedBackgroundColor: #652222;
30 --selectionBackgroundColor: #19446b;
31 --linkColor: #6eb8ff;
32 --borderColor: #414141;
33 --hrColor: #888;
34 --activeColor: #74d274;
35 --langBackgroundColor: #2c2c2c;
36 --langShadowColor: #0b0c0b33;
37 --logoColor: #555555;
38 --photoBackground: #1a1a1a;
39 }
40}
41
42body {
43 background: var(--backgroundColor);
44 color: var(--textColor);
45 line-height: 1.7em;
46 padding: 0 2.5em;
47 margin: 0;
48 font-size: 18px;
49 word-wrap: break-word;
50}
51
52body, kbd {
53 font-family: system-ui, sans-serif;
54}
55
56a {
57 color: var(--linkColor);
58}
59
60::selection {
61 background: var(--selectionBackgroundColor);
62}
63
64header {
65 padding-top: 2.5em;
66}
67
68footer {
69 padding-bottom: 2.5em;
70}
71
72main {
73 padding-top: 1em;
74 padding-bottom: 3em;
75}
76
77header,
78main,
79footer {
80 max-width: 36em;
81 margin: auto;
82}
83
84h1, h2, h3, h4, h5, h6, .font {
85 font-family: 'Readex Pro', sans-serif;
86}
87
88.plain {
89 font-family: system-ui, sans-serif
90}
91
92h1, h2, h3, h4, h5, h6 {
93 margin: 1.4em 0 1em 0;
94 font-weight: normal;
95}
96
97.logo {
98 width: 2em;
99
100 path {
101 stroke: var(--logoColor);
102 }
103}
104
105.logo-container {
106 display: flex;
107 align-items: center;
108}
109
110.post-body {
111 .logo-container {
112 line-height: 1em;
113 color: var(--mutedTextColor);
114 }
115
116 .logo {
117 width: 1em;
118 margin-left: .8em;
119 margin-right: .4em;
120
121 path {
122 stroke: var(--mutedTextColor);
123 stroke-width: 22;
124 }
125 }
126
127 .h1 {
128 font-size: 1.5rem;
129 }
130}
131
132.h1 {
133 font-size: 1.2rem;
134 font-weight: normal;
135 margin-bottom: 0;
136}
137
138.text {
139 margin-right: .4rem;
140 font-size: inherit;
141 font-weight: normal;
142 display: inline-block;
143 margin-top: 0;
144}
145
146.terminal .line {
147 padding: 0;
148 margin-bottom: 1em;
149 line-height: 1.6em;
150}
151
152.terminal {
153 list-style: none;
154 padding-left: 0;
155
156 li {
157 padding: .1rem 0;
158 }
159
160 ul {
161 margin-top: 0.5rem;
162 }
163}
164
165.hr {
166 border: 0;
167 border-left: .7rem solid var(--textColor);
168 height: .7rem;
169 margin: 3rem 0;
170}
171
172.notes {
173 list-style: none;
174 margin: 0;
175 padding: 0;
176
177 .note {
178 border-bottom: 1px solid var(--borderColor);
179 padding-bottom: 3em;
180 margin-top: 3em;
181 }
182}
183
184.targeted {
185 color: var(--activeColor);
186 margin-right: .2em;
187 display: inline;
188}
189
190.note {
191 scroll-margin: 2em;
192
193 &:last-of-type {
194 border-bottom: 0;
195 }
196
197 .targeted {
198 display: none;
199 }
200
201 &:target .targeted {
202 display: inline;
203 }
204 p:first-child, blockquote:first-child { margin-top: 0; }
205 p:last-child, blockquote:last-child, img:last-child { margin-bottom: 0; }
206}
207
208.note-heading {
209 font-size: .8em;
210 line-height: 1;
211 font-weight: normal;
212 margin: 0;
213 color: var(--mutedTextColor);
214
215 a {
216 color: inherit;
217 text-decoration: none;
218 }
219}
220
221blockquote {
222 &::before {
223 content: '“';
224 font-size: 2rem;
225 position: absolute;
226 margin-left: -.5em;
227 color: var(--secondaryTextColor);
228 font-family: sans-serif;
229 }
230}
231
232img {
233 max-width: 100%;
234 margin: 1em 0;
235
236 &[width] {
237 margin: 0;
238 vertical-align: middle;
239 }
240}
241
242hr {
243 margin: 2em 0;
244 border: 0;
245 border-bottom: 1px solid var(--hrColor);
246}
247
248.pagination {
249 margin-top: 4em;
250}
251
252article {
253 font-family: system-ui, sans-serif;
254 font-size: 16px;
255}
256
257.smol {
258 font-size: .8em;
259 font-weight: normal;
260}
261
262.task-list-item-checkbox {
263 margin-right: .5em;
264 vertical-align: middle;
265}
266
267.entry-title {
268 margin: 0;
269}
270
271.entry {
272 margin-bottom: 3em;
273}
274
275.lang {
276 font-size: .8rem;
277 display: inline-flex;
278 margin-top: 2em;
279 white-space: nowrap;
280 box-shadow: 0 5px 15px var(--langShadowColor);
281
282 a[aria-current] {
283 color: var(--textColor);
284
285 &:before {
286 content: "●";
287 color: var(--activeColor);
288 }
289 }
290
291 a {
292 background-color: var(--langBackgroundColor);
293 border-color: var(--borderColor);
294 color: var(--mutedTextColor);
295 padding: 4px 16px;
296 margin-right: 1px;
297 text-decoration: none;
298
299 &:first-child {
300 border-top-left-radius: 6px;
301 border-bottom-left-radius: 6px;
302 }
303
304 &:last-child {
305 border-top-right-radius: 6px;
306 border-bottom-right-radius: 6px;
307 }
308
309 &:hover {
310 background: var(--langBackgroundColor);
311 }
312
313 &:focus {
314 z-index: 1;
315 }
316
317 &:before {
318 content: "○";
319 color: var(--borderColor);
320 padding-right: 10px;
321 }
322 }
323}
324
325.styled-link {
326 margin-left: .4rem;
327 font-size: .7em;
328}
329
330time {
331 font-size: .8em;
332 color: var(--mutedTextColor);
333}
334
335.desc {
336 color: var(--mutedTextColor);
337 font-size: 0.8em;
338}
339
340@keyframes flash {
341 0% {
342 opacity: 0;
343 }
344
345 50% {
346 opacity: 1;
347 }
348
349 100% {
350 opacity: 1;
351 }
352}
353
354.timestamp-colon {
355 animation-name: flash;
356 animation-duration: 2s;
357 animation-timing-function: step-end;
358 animation-iteration-count: infinite;
359}
360
361@media (prefers-reduced-motion: reduce) {
362 .timestamp-colon {
363 animation-name: none;
364 }
365}
366
367.offsetthis {
368 vertical-align: super;
369 font-size: .6em;
370}
371
372.photos {
373 display: flex;
374 gap: 1em;
375 flex-wrap: nowrap;
376 overflow: auto;
377 align-items: center;
378
379 .image-link {
380 flex-shrink: 0;
381 }
382
383 img {
384 background-color: var(--photoBackground);
385 }
386}
387
388figure {
389 margin: 1em 0 3em;
390
391 img {
392 margin: 0 auto;
393 max-height: calc(100vh - 6em);
394 background-color: var(--photoBackground);
395 display: block;
396 }
397
398 .image-link {
399 display: block;
400 width: fit-content;
401 margin: auto;
402 }
403
404 p {
405 margin-bottom: 0;
406 }
407}
408
409[data-page-title="Photos"] {
410 header, main, footer {
411 max-width: 100%;
412 }
413
414 input {
415 position: absolute;
416 left: -100px;
417
418 &:checked + label path {
419 fill: var(--activeColor);
420 }
421
422 &:focus + label {
423 outline: auto;
424 outline-color: var(--activeColor);
425 }
426 }
427
428 label {
429 top: -50px;
430 left: 100px;
431 padding: .5em;
432 cursor: pointer;
433 position: relative;
434 display: inline-flex;
435 }
436
437 label path {
438 fill: var(--logoColor);
439 }
440}
441
442.photos-wrapper {
443 &:focus { outline: none; }
444 scroll-behavior: smooth;
445 margin-top: -40px;
446 clear: both;
447 text-align: center;
448}
449
450.back-link {
451 text-decoration: none;
452 color: var(--textColor);
453 background-color: var(--langBackgroundColor);
454 width: 1.6em;
455 text-align: center;
456 line-height: 1.6em;
457 aspect-ratio: 1/1;
458 display: inline-block;
459 border-radius: 4em;
460}
461
462[value*="grid"]:checked ~ .photos-wrapper {
463 display: grid;
464 column-gap: 2.5em;
465 grid-template-columns: repeat(2, 1fr);
466 // https://caniuse.com/mdn-css_properties_grid-template-rows_masonry
467 grid-template-rows: masonry;
468
469 figure {
470 margin-bottom: 0;
471 }
472
473 img {
474 max-height: none;
475 height: auto;
476 }
477}
478
479[value="grid3fr"]:checked ~ .photos-wrapper {
480 grid-template-columns: repeat(3, 1fr);
481}
482
483[value="x-scroll"]:checked ~ .photos-wrapper {
484 display: flex;
485 overflow: auto;
486 gap: 1.5em;
487 scroll-snap-type: x mandatory;
488 scroll-snap-align: center;
489
490 figure {
491 scroll-snap-align: center;
492 margin-bottom: 0;
493 flex-shrink: 0;
494
495 &:has(.portrait) figcaption {
496 max-width: calc(100vh * 0.667 - 6em);
497 margin: auto;
498 }
499
500 &:has(.landscape) figcaption {
501 max-width: calc(100vw * 0.667 - 2em);
502 margin: auto;
503 }
504 }
505
506
507 img {
508 max-height: calc(100vh - 6em);
509 max-width: calc(100vw - 5em);
510 flex-shrink: 0;
511 }
512}
513
514figcaption {
515 padding: .5em 1em;
516
517 p {
518 margin: 0;
519 }
520}
521
522// This ensures that
523// 1. screens that are too short
524// 2. screens that are not tall enough to display the full width of a 3:2 image
525// at height: (100v - 6em) height
526// don't get the option to use horizontal scroll.
527
528// https://github.com/web-platform-tests/wpt/pull/34865
529// @media (max-height: 540px), (max-width: calc((100vh - 6em) * 1.5)) {
530@media (max-height: 540px), (max-width: calc(100vh * 1.4)) {
531 body {
532 padding: 0 2em;
533 }
534
535 .photos-wrapper {
536 margin-left: -2em;
537 margin-right: -2em;
538
539 img {
540 max-height: none;
541
542 &.landscape {
543 height: calc(100vw / 1.5);
544 }
545 &.portrait {
546 height: calc(100vw / 0.667);
547 }
548 &.square {
549 height: 100vw;
550 }
551 }
552 }
553
554 [name="layout"] {
555 &, + label { visibility: hidden; }
556 }
557}
558
559.stories {
560 display: flex;
561 gap: 1em;
562 align-items: center;
563 overflow: auto;
564 padding: 10px;
565 margin: -10px;
566}
567
568open-stories {
569 .count {
570 font-size: 0.8em;
571 }
572 &::part(dialog):focus {
573 outline: none;
574 }
575
576 &:not(:defined),
577 &::part(button) {
578 font-family: system-ui, sans-serif;
579 border: 1px solid var(--borderColor);
580 box-shadow: inset 0 0 0 2px var(--backgroundColor);
581 color: var(--textColor);
582 background: var(--subtleBackgroundColor);
583 padding: 1em 0;
584 text-align: center;
585 height: 76px;
586 width: 76px;
587 border-radius: 50%;
588 font-size: 0.65em;
589 box-sizing: border-box;
590 align-items: center;
591 display: flex;
592 flex-direction: column;
593 flex-shrink: 0;
594 transition: all .3s;
595 text-transform: lowercase;
596 line-height: normal;
597 justify-content: center;
598 cursor: pointer;
599
600 &:hover {
601 background: var(--linkColor);
602 color: var(--backgroundColor);
603 transform: scale(1.05);
604 }
605 }
606
607
608 &:not([is-highlight])::part(button) {
609 border-color: var(--secondaryTextColor);
610 }
611
612 &:not(.is-read):not(.is-empty):not([is-highlight])::part(button) {
613 border-color: var(--linkColor);
614 }
615
616
617 &.is-empty::part(button) {
618 pointer-events: none;
619 opacity: 0.5;
620 overflow: hidden;
621 position: relative;
622
623 &:before {
624 display: block;
625 content: '';
626 border-left: 1px solid var(--mutedTextColor);
627 position: absolute;
628 transform: rotate(-45deg);
629 top: 0;
630 left: 0;
631 width: 150%;
632 height: 150%;
633 transform-origin: top left;
634 }
635 }
636}
637
638.monospace {
639 font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
640 font-size: 0.9em;
641}
642
643open-heart.text-open-heart {
644 display: inline;
645 margin-left: 1em;
646 transition: all .4s;
647
648 &:not([disabled]):hover {
649 cursor: pointer;
650 color: var(--activeColor);
651 }
652
653 .on { display: none; }
654
655 &[aria-pressed="true"] {
656 border-color: var(--heartedBackgroundColor);
657 .on { display: initial; }
658 .off { display: none; }
659 }
660
661 &[count]::after {
662 content: "(" attr(count) ")";
663 }
664}
665
666kbd {
667 border: 1px solid var(--borderColor);
668 padding: 1px 4px;
669 border-radius: 3px;
670 box-shadow: 0 1px;
671 font-size: 0.9em;
672}
673
674nav {
675 display: flex;
676 flex-wrap: wrap;
677 column-gap: .6em;
678 margin: .6em 0;
679}
Powered by cgit v1.2.3 (git 2.41.0)