atproto pds in zig
pds.zat.dev
pds
atproto
landing: replace glass treatment with motion
+53
-11
+53
-11
src/http/landing/assets.zig
+53
-11
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:
39
+
\\ position: relative; margin: 0; min-height: 100vh; overflow-x: hidden; background:
40
40
\\ radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--signal-a, var(--green)) 15%, transparent), transparent 35%),
41
41
\\ radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--signal-b, var(--accent)) 13%, transparent), transparent 32%),
42
42
\\ var(--bg); color: var(--text);
43
43
\\ font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
44
44
\\}
45
+
\\body::before, body::after {
46
+
\\ content: ""; position: fixed; inset: -18vmax; z-index: 0; pointer-events: none;
47
+
\\}
48
+
\\body::before {
49
+
\\ background:
50
+
\\ linear-gradient(108deg, transparent 0 22%, rgba(255,255,255,.10) 24%, transparent 27% 52%, rgba(255,255,255,.055) 54%, transparent 58%),
51
+
\\ linear-gradient(72deg, transparent 0 38%, color-mix(in srgb, var(--signal-b, var(--accent)) 11%, transparent) 44%, transparent 52%);
52
+
\\ filter: blur(20px) saturate(1.15); opacity: .7; transform: translate3d(-4%, 0, 0) rotate(-4deg);
53
+
\\ animation: light-drift 18s ease-in-out infinite alternate;
54
+
\\}
55
+
\\body::after {
56
+
\\ background:
57
+
\\ radial-gradient(ellipse at 22% 32%, rgba(255,255,255,.09), transparent 28%),
58
+
\\ radial-gradient(ellipse at 72% 18%, color-mix(in srgb, var(--signal-a, var(--green)) 14%, transparent), transparent 31%),
59
+
\\ radial-gradient(ellipse at 66% 78%, color-mix(in srgb, var(--signal-c, var(--pink)) 12%, transparent), transparent 30%);
60
+
\\ filter: blur(34px); opacity: .52; animation: frost-breathe 24s ease-in-out infinite alternate;
61
+
\\}
62
+
\\@keyframes light-drift {
63
+
\\ from { transform: translate3d(-5%, -1%, 0) rotate(-5deg) scale(1.02); }
64
+
\\ to { transform: translate3d(5%, 2%, 0) rotate(4deg) scale(1.08); }
65
+
\\}
66
+
\\@keyframes frost-breathe {
67
+
\\ from { transform: translate3d(0, -2%, 0) scale(1); opacity: .42; }
68
+
\\ to { transform: translate3d(-2%, 2%, 0) scale(1.06); opacity: .64; }
69
+
\\}
45
70
\\a { color: inherit; }
46
71
\\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; }
72
+
\\.shell { position: relative; z-index: 1; width: min(100%, 780px); margin: 0 auto; padding: 18px 16px 34px; }
48
73
\\header {
49
74
\\ position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px;
50
75
\\ min-height: 50px; margin: 0 0 26px; padding: 8px 0;
···
53
78
\\}
54
79
\\.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
80
\\.brand:hover { opacity: 0.82; }
56
-
\\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:
81
+
\\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) 58%, white 14%); border-radius: 18px; background:
82
+
\\ linear-gradient(110deg, rgba(255,255,255,.16), transparent 22% 76%, rgba(255,255,255,.08)),
57
83
\\ radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--signal-a, var(--green)) 12%, transparent), transparent 46%),
58
-
\\ 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); }
84
+
\\ color-mix(in srgb, var(--glass) 58%, transparent);
85
+
\\ box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -18px 42px rgba(255,255,255,.035), 0 8px 28px rgba(0,0,0,.12);
86
+
\\ backdrop-filter: blur(26px) saturate(1.26); -webkit-backdrop-filter: blur(26px) saturate(1.26); }
60
87
\\nav a, .settings { color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
61
88
\\nav a:hover, .settings:hover { color: var(--text); }
62
89
\\.icon-link, .settings {
···
65
92
\\ radial-gradient(circle at 30% 18%, rgba(255,255,255,.22), transparent 32%),
66
93
\\ linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.03)),
67
94
\\ color-mix(in srgb, var(--panel) 72%, transparent);
68
-
\\ box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 28px rgba(0,0,0,.18);
95
+
\\ box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -10px 24px rgba(255,255,255,.045), 0 10px 28px rgba(0,0,0,.18);
69
96
\\ transition: color 0.12s, border-color 0.12s, background 0.12s, transform 0.12s;
70
97
\\}
71
98
\\.logo-link::after {
···
110
137
\\}
111
138
\\.entropy-axis { display: flex; justify-content: space-between; color: var(--dim); font-size: 9px; }
112
139
\\.signal-empty { color: var(--dim); font-size: 11px; }
113
-
\\@media (prefers-reduced-motion: reduce) { .entropy-label, .entropy-bars i { transition: none; } }
140
+
\\@media (prefers-reduced-motion: reduce) {
141
+
\\ body::before, body::after, .pulse::before { animation: none; }
142
+
\\ .entropy-label, .entropy-bars i { transition: none; }
143
+
\\}
114
144
\\.pulse {
115
145
\\ margin: 0 0 30px; padding: 14px;
116
-
\\ border: 1px solid var(--line); border-radius: 8px; background:
146
+
\\ position: relative; border: 1px solid color-mix(in srgb, var(--line) 60%, white 10%); border-radius: 12px; background:
147
+
\\ linear-gradient(112deg, rgba(255,255,255,.105), transparent 18% 72%, rgba(255,255,255,.055)),
117
148
\\ linear-gradient(135deg, color-mix(in srgb, var(--signal-a, var(--green)) 12%, transparent), transparent 46%),
118
149
\\ 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%;
150
+
\\ color-mix(in srgb, var(--panel) 72%, transparent);
151
+
\\ overflow: hidden; max-width: 100%; backdrop-filter: blur(24px) saturate(1.18); -webkit-backdrop-filter: blur(24px) saturate(1.18);
152
+
\\ box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -24px 60px rgba(255,255,255,.035), 0 20px 54px rgba(0,0,0,.16);
153
+
\\}
154
+
\\.pulse::before {
155
+
\\ content: ""; position: absolute; inset: 0; pointer-events: none;
156
+
\\ background: linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.16) 47%, transparent 57% 100%);
157
+
\\ transform: translateX(-75%); animation: glass-sweep 9s ease-in-out infinite;
158
+
\\}
159
+
\\@keyframes glass-sweep {
160
+
\\ 0%, 18% { transform: translateX(-80%); opacity: 0; }
161
+
\\ 38% { opacity: .5; }
162
+
\\ 58%, 100% { transform: translateX(85%); opacity: 0; }
121
163
\\}
122
164
\\.pulse > div { min-width: 0; }
123
165
\\.pulse-kicker { color: var(--dim); font-size: 11px; text-transform: lowercase; }