Final tweaks

src/pages/app.css

@@ -47,6 +47,16 @@ header {
 }
 
 header h1 { font-size: 1.25rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
+header h1 a,
+header h1 a:hover,
+header h1 a:active,
+header h1 a:visited {
+    color: inherit;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+}
 header h1 .brand-emblem { height: 8rem; width: auto; margin-block: -0.2rem; }
 header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--grid-1); }
 
@@ -54,8 +64,7 @@ header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gri
 
 .nav-menu { display: inline-block; position: relative; }
 
-.nav-menu > summary,
-.nav-item {
+.nav-menu > summary {
     border-radius: 6px;
     cursor: pointer;
     display: inline-flex;
@@ -77,8 +86,7 @@ header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gri
 }
 
 .nav-menu > summary:hover,
-.nav-menu[open] > summary,
-.nav-item:hover { background: var(--line-soft); }
+.nav-menu[open] > summary { background: var(--line-soft); }
 
 .nav-menu[open] > summary::after { transform: rotate(180deg); }
 
@@ -136,14 +144,7 @@ header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gri
     display: flex;
 }
 
-.nav-auth {
-    align-items: baseline;
-    border-left: 1px solid var(--line);
-    display: inline-flex;
-    gap: var(--grid-1);
-    margin-left: var(--grid-1);
-    padding-left: var(--grid-2);
-}
+.nav-auth { display: inline-flex; gap: var(--grid-1); }
 
 main { padding: var(--grid-2) 0 var(--grid-4); }
 
@@ -907,7 +908,6 @@ dialog#quote-comment-dialog blockquote {
 
 @media (max-width: 40rem) {
     header { flex-direction: column; gap: var(--grid-1); }
-    .nav-auth { border-left: none; margin-left: 0; padding-left: 0; }
     .cards { grid-template-columns: 1fr; }
     .grid-2 { grid-template-columns: 1fr; }
     th, td { padding: 0.4rem 0.5rem; font-size: 0.9rem; }

src/pages/login.html

@@ -25,7 +25,7 @@
         <p stm-if="auth != null">Already signed in as <strong stm-text="auth.display_name">user</strong>.</p>
         <form stm-if="auth == null" stm-action="page.login" style="max-width: 24rem">
             <div class="form-row"><label for="login-username">Username</label>
-                <input id="login-username" name="username" required autocomplete="username" autofocus></div>
+                <input id="login-username" type="text" name="username" required autocomplete="username" autofocus></div>
             <div class="form-row"><label for="login-password">Password</label>
                 <input id="login-password" type="password" name="password" required autocomplete="current-password"></div>
             <button type="submit">Log in</button>

src/pages/main.html

@@ -14,9 +14,8 @@
 </head>
 <body>
     <header>
-        <h1><img class="brand-emblem" alt="" pstm-res-src="clanker-saddle-emblem.png">ClankerSaddle</h1>
-        <nav>
-            <a class="nav-item" href="/">Dashboard</a>
+        <h1><a href="/"><img class="brand-emblem" alt="" pstm-res-src="clanker-saddle-emblem.png">ClankerSaddle</a></h1>
+        <nav stm-if="auth != null">
             <!-- spry:nav-begin -->
             <details class="nav-menu" name="nav-menu">
                 <summary>Work</summary>
@@ -44,7 +43,7 @@
                 </div>
             </details>
             <!-- spry:nav-end -->
-            <span stm-if="auth != null" class="nav-auth">
+            <span class="nav-auth">
                 <details class="nav-menu" name="nav-menu">
                     <summary>Account</summary>
                     <div class="nav-dropdown">
@@ -56,7 +55,6 @@
                 <!-- spry:nav-auth-begin -->
                 <!-- spry:nav-auth-end -->
             </span>
-            <a class="nav-item" stm-if="auth == null" href="/login">Log in</a>
         </nav>
     </header>
     <main>