Content-addressed version deploy system for Diffuse
elements.diffuse.sh
1h2 {
2 color: var(--accent);
3}
4
5.chronicle {
6 margin-top: var(--space-xl);
7 max-width: var(--container-4xl);
8
9 @media (min-width: 42rem) {
10 display: flex;
11 gap: 0 var(--space-md);
12 }
13}
14
15.entry {
16 border-radius: var(--radius-lg);
17 display: block;
18 height: 0;
19 letter-spacing: var(--tracking-wide);
20 margin-top: var(--space-md);
21 overflow: hidden;
22 padding-top: 45%;
23 position: relative;
24 text-align: center;
25 width: 100%;
26
27 &::after {
28 background: var(--accent);
29 content: "";
30 inset: 0;
31 mix-blend-mode: multiply;
32 opacity: 0.25;
33 position: absolute;
34 z-index: 1;
35 }
36
37 @media (prefers-color-scheme: dark) {
38 &::after {
39 mix-blend-mode: hue;
40 opacity: 1;
41 }
42 }
43
44 @media (min-width: 42rem) {
45 flex: 1;
46 margin-top: 0;
47 padding-top: 27.5%;
48 }
49
50 img {
51 bottom: 0;
52 display: block;
53 left: 0;
54 position: absolute;
55 width: 100%;
56 }
57
58 & > span {
59 color: var(--bg-color);
60 font-size: var(--fs-md);
61 font-weight: 800;
62 left: 50%;
63 margin: 0;
64 position: absolute;
65 text-shadow: var(--text-shadow-sm);
66 top: 50%;
67 transform: translate(-50%, -50%);
68 white-space: nowrap;
69 z-index: 10;
70
71 @media (prefers-color-scheme: dark) {
72 & {
73 color: unset;
74 }
75 }
76 }
77}
78
79#artifacts-list {
80 word-break: break-all;
81
82 li p small {
83 font-weight: 600;
84 opacity: 0.4;
85 }
86
87 .date {
88 display: inline-block;
89 font-weight: 300;
90 margin-top: var(--space-3xs);
91 opacity: 0.25;
92 }
93}
94
95#versions-list {
96 word-break: break-all;
97
98 li small {
99 display: block;
100 font-weight: 600;
101 margin-top: var(--space-3xs);
102 opacity: 0.4;
103 overflow: hidden;
104 text-overflow: ellipsis;
105 width: 61.8%;
106
107 @media (min-width: 28rem) {
108 white-space: nowrap;
109 }
110 }
111}