Something went wrong. Try again.
Content-addressed version deploy system for Diffuse elements.diffuse.sh
Something went wrong. Try again.
1.8 kB · 111 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112h2 { color: var(--accent);}
.chronicle { margin-top: var(--space-xl); max-width: var(--container-4xl);
@media (min-width: 42rem) { display: flex; gap: 0 var(--space-md); }}
.entry { border-radius: var(--radius-lg); display: block; height: 0; letter-spacing: var(--tracking-wide); margin-top: var(--space-md); overflow: hidden; padding-top: 45%; position: relative; text-align: center; width: 100%;
&::after { background: var(--accent); content: ""; inset: 0; mix-blend-mode: multiply; opacity: 0.25; position: absolute; z-index: 1; }
@media (prefers-color-scheme: dark) { &::after { mix-blend-mode: hue; opacity: 1; } }
@media (min-width: 42rem) { flex: 1; margin-top: 0; padding-top: 27.5%; }
img { bottom: 0; display: block; left: 0; position: absolute; width: 100%; }
& > span { color: var(--bg-color); font-size: var(--fs-md); font-weight: 800; left: 50%; margin: 0; position: absolute; text-shadow: var(--text-shadow-sm); top: 50%; transform: translate(-50%, -50%); white-space: nowrap; z-index: 10;
@media (prefers-color-scheme: dark) { & { color: unset; } } }}
#artifacts-list { word-break: break-all;
li p small { font-weight: 600; opacity: 0.4; }
.date { display: inline-block; font-weight: 300; margin-top: var(--space-3xs); opacity: 0.25; }}
#versions-list { word-break: break-all;
li small { display: block; font-weight: 600; margin-top: var(--space-3xs); opacity: 0.4; overflow: hidden; text-overflow: ellipsis; width: 61.8%;
@media (min-width: 28rem) { white-space: nowrap; } }}