atproto pds in zig
pds.zat.dev
pds
atproto
landing: add liminal glass treatment
+54
-12
+54
-12
src/http/landing/assets.zig
+54
-12
src/http/landing/assets.zig
···
34
34
\\ color-scheme: light;
35
35
\\}
36
36
\\* { box-sizing: border-box; }
37
-
\\html { min-height: 100%; background: var(--bg); }
37
+
\\html { min-height: 100%; background: var(--bg); overflow-x: hidden; }
38
38
\\body {
39
-
\\ margin: 0; min-height: 100vh; background:
40
-
\\ radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--signal-a, var(--green)) 15%, transparent), transparent 35%),
41
-
\\ radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--signal-b, var(--accent)) 13%, transparent), transparent 32%),
39
+
\\ position: relative; margin: 0; min-height: 100vh; overflow-x: hidden; background:
40
+
\\ radial-gradient(ellipse at 8% 16%, color-mix(in srgb, var(--signal-c, var(--pink)) 18%, transparent), transparent 34%),
41
+
\\ radial-gradient(ellipse at 88% 6%, color-mix(in srgb, var(--signal-b, var(--accent)) 16%, transparent), transparent 31%),
42
+
\\ linear-gradient(105deg, color-mix(in srgb, var(--signal-a, var(--green)) 10%, transparent), transparent 28%, color-mix(in srgb, var(--signal-c, var(--pink)) 8%, transparent) 72%, transparent),
42
43
\\ var(--bg); color: var(--text);
43
44
\\ font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
44
45
\\}
46
+
\\body::before, body::after {
47
+
\\ content: ""; position: fixed; inset: auto; pointer-events: none; z-index: 0;
48
+
\\}
49
+
\\body::before {
50
+
\\ width: min(88vw, 760px); height: min(58vh, 520px); left: max(-180px, -12vw); top: -82px;
51
+
\\ border-radius: 46% 54% 54% 46% / 31% 35% 65% 69%;
52
+
\\ background:
53
+
\\ linear-gradient(108deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 19%, transparent 31%),
54
+
\\ radial-gradient(ellipse at 34% 42%, color-mix(in srgb, var(--signal-b, var(--accent)) 22%, transparent), transparent 58%),
55
+
\\ color-mix(in srgb, var(--panel) 40%, transparent);
56
+
\\ filter: blur(.2px) saturate(1.18); opacity: .72;
57
+
\\ transform: rotate(-8deg) skewX(-13deg);
58
+
\\ box-shadow: inset -48px 0 80px rgba(255,255,255,.035), inset 42px 8px 110px color-mix(in srgb, var(--signal-c, var(--pink)) 11%, transparent);
59
+
\\}
60
+
\\body::after {
61
+
\\ width: 48vw; height: 150vh; right: -29vw; top: -24vh; transform: rotate(15deg);
62
+
\\ background:
63
+
\\ linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent 18%),
64
+
\\ linear-gradient(90deg, transparent 44%, color-mix(in srgb, var(--signal-a, var(--green)) 14%, transparent), transparent 62%);
65
+
\\ filter: blur(18px); opacity: .82;
66
+
\\}
45
67
\\a { color: inherit; }
46
68
\\a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
47
-
\\.shell { width: min(100%, 780px); margin: 0 auto; padding: 18px 16px 34px; }
69
+
\\.shell { position: relative; z-index: 1; width: min(100%, 780px); margin: 0 auto; padding: 18px 16px 34px; }
70
+
\\.shell::before {
71
+
\\ content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: 78px; height: 340px; pointer-events: none;
72
+
\\ border-radius: 36px 58px 42px 68px;
73
+
\\ background:
74
+
\\ linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.055) 19%, transparent 25% 42%, rgba(255,255,255,.035) 43%, transparent 48%),
75
+
\\ radial-gradient(ellipse at 8% 60%, color-mix(in srgb, var(--signal-c, var(--pink)) 13%, transparent), transparent 54%);
76
+
\\ filter: blur(.35px); opacity: .75; transform: perspective(780px) rotateX(3deg) skewY(-1.5deg);
77
+
\\}
48
78
\\header {
49
79
\\ position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px;
50
80
\\ min-height: 50px; margin: 0 0 26px; padding: 8px 0;
···
54
84
\\.brand { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0; }
55
85
\\.brand:hover { opacity: 0.82; }
56
86
\\nav { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 4px; border: 1px solid color-mix(in srgb, var(--line) 66%, transparent); border-radius: 18px; background:
87
+
\\ linear-gradient(102deg, rgba(255,255,255,.11), transparent 18% 62%, rgba(255,255,255,.055)),
57
88
\\ radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--signal-a, var(--green)) 12%, transparent), transparent 46%),
58
89
\\ color-mix(in srgb, var(--glass) 38%, transparent);
59
-
\\ box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 28px rgba(0,0,0,.12); }
90
+
\\ box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 16px 0 34px rgba(255,255,255,.035), 0 8px 28px rgba(0,0,0,.12);
91
+
\\ backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25); }
60
92
\\nav a, .settings { color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
61
93
\\nav a:hover, .settings:hover { color: var(--text); }
62
94
\\.icon-link, .settings {
···
78
110
\\.icon-link:hover, .settings:hover { border-color: color-mix(in srgb, var(--signal-a, var(--green)) 55%, var(--line)); background: color-mix(in srgb, var(--panel-2) 86%, transparent); transform: translateY(-1px); }
79
111
\\.settings { flex: 0 0 auto; margin-left: 2px; }
80
112
\\.hero { margin: 52px 0 24px; }
81
-
\\h1 { margin: 0; color: var(--text); font-size: clamp(36px, 11vw, 74px); line-height: 0.95; letter-spacing: 0; }
113
+
\\h1 { margin: 0; color: var(--text); font-size: clamp(36px, 11vw, 74px); line-height: 0.95; letter-spacing: 0; text-shadow: 0 1px 0 rgba(255,255,255,.05), 0 28px 72px color-mix(in srgb, var(--signal-b, var(--accent)) 17%, transparent); }
82
114
\\.lede { margin: 14px 0 0; max-width: 47ch; color: var(--muted); font-size: 15px; }
83
115
\\.lede a, .lede code { color: var(--green); }
84
116
\\.entropy { width: min(100%, 330px); min-height: 76px; margin-top: 19px; display: grid; gap: 6px; }
···
113
145
\\@media (prefers-reduced-motion: reduce) { .entropy-label, .entropy-bars i { transition: none; } }
114
146
\\.pulse {
115
147
\\ margin: 0 0 30px; padding: 14px;
116
-
\\ border: 1px solid var(--line); border-radius: 8px; background:
117
-
\\ linear-gradient(135deg, color-mix(in srgb, var(--signal-a, var(--green)) 12%, transparent), transparent 46%),
118
-
\\ linear-gradient(315deg, color-mix(in srgb, var(--signal-c, var(--pink)) 10%, transparent), transparent 44%),
119
-
\\ var(--panel);
120
-
\\ overflow: hidden; max-width: 100%;
148
+
\\ position: relative; border: 1px solid color-mix(in srgb, var(--line) 78%, white 7%); border-radius: 12px; background:
149
+
\\ linear-gradient(103deg, rgba(255,255,255,.095), transparent 12% 58%, rgba(255,255,255,.045)),
150
+
\\ linear-gradient(135deg, color-mix(in srgb, var(--signal-a, var(--green)) 16%, transparent), transparent 48%),
151
+
\\ linear-gradient(315deg, color-mix(in srgb, var(--signal-c, var(--pink)) 13%, transparent), transparent 44%),
152
+
\\ color-mix(in srgb, var(--panel) 82%, transparent);
153
+
\\ overflow: hidden; max-width: 100%; backdrop-filter: blur(18px) saturate(1.16); -webkit-backdrop-filter: blur(18px) saturate(1.16);
154
+
\\ box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset -22px 0 60px rgba(255,255,255,.035), 0 20px 48px rgba(0,0,0,.13);
155
+
\\}
156
+
\\.pulse::after {
157
+
\\ content: ""; position: absolute; inset: -36px -28px auto auto; width: 48%; height: 84px; pointer-events: none;
158
+
\\ background: linear-gradient(101deg, transparent, rgba(255,255,255,.13), transparent 34%);
159
+
\\ transform: rotate(-9deg); filter: blur(8px); opacity: .5;
121
160
\\}
122
161
\\.pulse > div { min-width: 0; }
123
162
\\.pulse-kicker { color: var(--dim); font-size: 11px; text-transform: lowercase; }
···
220
259
\\ .entropy { width: min(100%, 250px); min-height: 68px; }
221
260
\\ .entropy-bars { gap: 3px; min-height: 36px; }
222
261
\\ .entropy-bars i:hover::after { display: none; }
262
+
\\ body::before { width: 105vw; height: 430px; left: -42vw; top: -92px; opacity: .56; }
263
+
\\ body::after { right: -52vw; opacity: .55; }
264
+
\\ .shell::before { left: -22px; right: -22px; top: 96px; height: 270px; opacity: .52; }
223
265
\\}
224
266
;
225
267