atproto pds in zig
pds.zat.dev
pds
atproto
Align landing header with zat style
+14
-13
+12
-11
src/http/landing/assets.zig
+12
-11
src/http/landing/assets.zig
···
30
30
\\a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
31
31
\\.shell { width: min(100%, 780px); margin: 0 auto; padding: 18px 16px 34px; }
32
32
\\header {
33
-
\\ position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 14px;
34
-
\\ margin: -18px -16px 26px; padding: 12px 16px;
33
+
\\ position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px;
34
+
\\ min-height: 48px; margin: -18px -16px 26px; padding: 8px 16px;
35
35
\\ background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px);
36
+
\\ -webkit-backdrop-filter: blur(14px);
36
37
\\ border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
37
38
\\ color: var(--muted); font-size: 12px;
38
39
\\}
39
-
\\.brand { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: 0.02em; }
40
-
\\nav { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
40
+
\\.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; }
41
+
\\.brand:hover { opacity: 0.82; }
42
+
\\nav { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
41
43
\\nav a, .settings { color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
42
44
\\nav a:hover, .settings:hover { color: var(--text); }
43
-
\\.text-link { display: none; padding: 4px 5px; }
44
45
\\.icon-link, .settings {
45
-
\\ width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--line);
46
-
\\ border-radius: 8px; background: var(--panel);
46
+
\\ width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--line);
47
+
\\ border-radius: 6px; background: color-mix(in srgb, var(--panel) 72%, transparent);
48
+
\\ transition: color 0.12s, border-color 0.12s, background 0.12s;
47
49
\\}
48
50
\\.icon-link img { width: 18px; height: 18px; object-fit: contain; display: block; }
49
-
\\.icon-link:hover, .settings:hover { border-color: var(--muted); }
51
+
\\.icon-link svg, .settings svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
52
+
\\.icon-link:hover, .settings:hover { border-color: var(--muted); background: color-mix(in srgb, var(--panel-2) 86%, transparent); }
50
53
\\.settings {
51
54
\\ flex: 0 0 auto;
52
55
\\}
53
-
\\.settings svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
54
56
\\.hero { margin: 52px 0 24px; }
55
57
\\h1 { margin: 0; color: var(--text); font-size: clamp(36px, 11vw, 74px); line-height: 0.95; letter-spacing: 0; }
56
58
\\.lede { margin: 14px 0 0; max-width: 47ch; color: var(--muted); font-size: 15px; }
···
121
123
\\@media (min-width: 680px) {
122
124
\\ .shell { padding-top: 24px; }
123
125
\\ header { margin-top: -24px; }
124
-
\\ nav { gap: 9px; }
125
-
\\ .text-link { display: inline-flex; }
126
+
\\ nav { gap: 8px; }
126
127
\\ .pulse-link, .pulse-cid { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
127
128
\\ .grid { grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr); align-items: start; }
128
129
\\ .resident a { grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; }
+2
-2
src/http/landing/mod.zig
+2
-2
src/http/landing/mod.zig
···
104
104
\\ <a class="icon-link" href="https://tangled.org/zat.dev/zds" aria-label="source on Tangled" title="source"><img alt="" src="https://assets.tangled.network/tangled_dolly_face_only_white_on_trans.svg"></a>
105
105
\\ <a class="icon-link" href="https://zat.dev" aria-label="zat.dev" title="zat.dev"><img alt="" src="https://zat.dev/favicon.svg"></a>
106
106
\\ <a class="icon-link" href="https://atproto.com" aria-label="AT Protocol" title="atproto"><img alt="" src="https://atproto.com/favicon.ico"></a>
107
-
\\ <a class="text-link" href="/xrpc/_health">health</a>
108
-
\\ <a class="text-link" href="/xrpc/com.atproto.server.describeServer">server</a>
107
+
\\ <a class="icon-link" href="/xrpc/_health" aria-label="health" title="health"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 12h4l2-5 4 10 2-5h4"/></svg></a>
108
+
\\ <a class="icon-link" href="/xrpc/com.atproto.server.describeServer" aria-label="server description" title="server"><svg aria-hidden="true" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="7" ry="3"/><path d="M5 5v7c0 1.7 3.1 3 7 3s7-1.3 7-3V5"/><path d="M5 12v7c0 1.7 3.1 3 7 3s7-1.3 7-3v-7"/></svg></a>
109
109
\\ <button class="settings" type="button" id="settings" aria-label="profile client settings" title="profile client"><svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg></button>
110
110
\\ </nav>
111
111
\\ </header>