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