marky

commit 4bf1a7d6da7d8618cd39888ad694b24c53e7b22c
parent 5ec023afa32753527a057c560f4d7c1da8e68b74
Author: David Eisinger <[email protected]>
Date:   Sun, 12 Oct 2025 11:39:53 -0400

Vertical centering

Diffstat:
M
internal/web/header.html
 | 
16
+++++++++-------
M
internal/web/styles.css
 | 
8
+++++---

2 files changed, 14 insertions(+), 10 deletions(-)
diff --git a/internal/web/header.html b/internal/web/header.html
@@ -1,9 +1,9 @@
-<header class="container header-flex">
-  <div class="branding">
-    <h1><a href="/">marky</a></h1>
-    <p class="muted">Lightweight bookmarking + plaintext archive</p>
-  </div>
-  <nav class="top-links">
+<header class="container">
+  <div class="header-flex">
+    <div class="branding">
+      <h1><a href="/">marky</a></h1>
+    </div>
+    <nav class="top-links">
     <template v-if="me && me.username">
       <div class="user-line">
         <span>Logged in as <a :href="`/u:${me.username}`"><b>{{ me.username }}</b></a></span>
@@ -18,5 +18,7 @@
         <a href="/" title="Log in to Marky">Log in</a>
       </div>
     </template>
-  </nav>
+    </nav>
+  </div>
+  <p class="muted subline">Lightweight bookmarking + plaintext archive</p>
 </header>
diff --git a/internal/web/styles.css b/internal/web/styles.css
@@ -2,13 +2,15 @@
 body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; margin: 0; }
 .container { max-width: 960px; margin: 0 auto; padding: 16px; }
 header { border-bottom: 1px solid #ddd3; }
-.header-flex { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
+.header-flex { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
 .branding { display: grid; gap: 4px; }
-h1 { margin: 0 0 4px 0; font-size: 24px; }
+.subline { margin-top: 2px; }
+.branding h1 { margin: 0; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
+.branding h1 a { text-decoration: none; }
 .container h1 a { color: inherit; text-decoration: none; }
 .container h1 a:hover { text-decoration: underline; }
 .muted { color: #666; margin: 0 0 8px 0; font-size: 13px; }
-.top-links { align-self: start; font-size: 13px; color: #555; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 10px; }
+.top-links { font-size: 13px; color: #555; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 10px; }
 .top-links .user-line { white-space: nowrap; }
 .top-links a { color: inherit; }
 .top-links .sep { margin: 0 6px; opacity: 0.6; }