From 197bf5e46e36807370452af125cf88376aa83683 Mon Sep 17 00:00:00 2001
From: John Holdun <john@johnholdun.com>
Date: Sat, 23 Sep 2023 17:27:09 -0700
Subject: [PATCH 1/2] Update theme

---
 public/style.css                     | 390 +++++++++++++++++----------
 src/pages/about.hbs                  |   2 +-
 src/pages/admin/bookmarks.hbs        |  11 +-
 src/pages/admin/following.hbs        |  44 ++-
 src/pages/bookmark.hbs               |  24 +-
 src/pages/layouts/main.hbs           |  21 +-
 src/pages/network.hbs                |  39 ++-
 src/pages/partials/admin_subnav.hbs  |   6 +-
 src/pages/partials/edit_bookmark.hbs |   1 +
 src/pages/partials/pagination.hbs    |   2 +-
 src/pages/partials/show_bookmark.hbs |  40 ++-
 src/pages/partials/tag_list.hbs      |  16 +-
 src/pages/search.hbs                 |  11 +-
 src/routes/admin.js                  |  21 +-
 src/routes/auth.js                   |   2 +-
 src/routes/bookmark.js               |   9 +-
 src/routes/core.js                   |   2 +-
 17 files changed, 384 insertions(+), 257 deletions(-)

diff --git a/public/style.css b/public/style.css
index 9b43063..50ec16f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -9,27 +9,40 @@
   src: url('/PublicSans-Italic-VariableFont_wght.ttf');
 }
 
-/* Our default values set as CSS variables */
 :root {
-  --color-bg: #ffe6f8;
-  --color-text-main: #000000;
-  --color-primary: #d7f5ef;
-  --wrapper-height: 40vh;
-  --image-max-width: 300px;
-  --image-margin: 3rem;
   --font-family: 'Public Sans', sans-serif;
-  --font-family-header: 'Public Sans', sans-serif;
+  --font-size: 16px;
+  --color-background: #fff1fc;
+  --color-foreground: #000000;
+  --color-accent: #2914a0;
+  --color-link: #2800ff;
+  --color-dimmed: #545454;
 }
 
-/* Basic page style resets */
 * {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
+
 [hidden] {
   display: none !important;
 }
 
-/* Our remix on glitch button */
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+html {
+  font-size: var(--font-size);
+}
+
 .btn--remix {
   font-family: 'Public Sans', sans-serif;
   padding: 0.75rem 1rem;
@@ -48,9 +61,11 @@
   white-space: nowrap;
   margin-left: auto;
 }
+
 .btn--remix img {
   margin-right: 0.5rem;
 }
+
 .btn--remix:hover {
   background-color: #d0fff1;
 }
@@ -62,15 +77,16 @@
   padding: 1rem 0 0.75rem 0;
   width: 100%;
   flex-wrap: wrap;
-  border-top: 4px solid #fff;
+  border-top: .25rem solid #fff;
+  gap: 1rem;
 }
 
-.footer a {
-  display: flex;
+.footer a:not(.btn--remix) {
+  display: block;
+  line-height: 2.75rem;
 }
 
-.footer a:not(.btn--remix):link,
-a:not(.btn--remix):visited {
+.footer a:not(.btn--remix) {
   font-family: 'Public Sans', sans-serif;
   font-style: normal;
   font-weight: normal;
@@ -79,38 +95,46 @@ a:not(.btn--remix):visited {
   border-style: none;
 }
 
-.footer a:not(:first-child):not(.btn--remix):before {
-  content: " ";
-  display: block;
-  width: .125rem;
-  height: 1.25rem;
-  background: #000;
-  margin: 0 1rem;
+body {
+  font-family: 'Public Sans', sans-serif;
+  background-color: var(--color-background);
+  padding: 0 1rem;
+  max-width: 67.5rem;
+  margin: 0 auto;
+}
+
+a {
+  color: var(--color-link);
+  text-decoration: none;
 }
 
-.footer a:hover {
-  background: var(--color-primary);
+.wrapper {
+  min-height: 40vh;
+  margin: 2rem 0;
 }
 
-body {
-  font-family: 'Public Sans', sans-serif;
-  background-color: var(--color-bg);
+@media (min-width: 600px) {
+  .wrapper {
+    display: grid;
+    grid-template-columns: 20% 60% 20%;
+    grid-gap: 1rem;
+  }
 }
 
-/* Page structure */
-.wrapper {
-  min-height: var(--wrapper-height);
-  display: grid;
-  grid-template-columns: 33.334% 66.667%;
-  margin: 0 1rem;
+.wrapper > *:first-child:not(.content) {
+  grid-row: 1;
+  grid-column: 1;
 }
 
 .content {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-  justify-content: left;
-  max-width: 600px;
+  grid-row: 1;
+  grid-column: 2;
+}
+
+@media (max-width: 599px) {
+  .content:not(:only-child) {
+    margin-bottom: 2rem;
+  }
 }
 
 p,
@@ -124,146 +148,167 @@ label.small {
   font-size: 0.8rem;
 }
 
-/* Title h1 style */
 h1 {
-  color: #2800ff;
-  font-family: 'Public Sans', sans-serif;
+  color: var(--color-accent);
   font-style: normal;
   font-weight: 600;
-  font-size: 48px;
-  line-height: 105%;
-  margin: 2rem 0 0;
-  display: inline-block;
+  font-size: 3rem;
+  line-height: 3.15rem;
+  margin: 0 0 2rem;
 }
 
 h1 a {
   text-decoration: none;
-  font-weight: 600;
-  color: #2800ff !important;
-}
-
-/* Very light scaling for our illustration */
-.illo-container {
-  display: flex;
-  justify-content: flex-end;
-}
-.illustration {
-  max-width: 100%;
-  max-height: 150px;
-  margin-top: 1rem;
+  color: currentColor;
 }
 
-/* Styles for our poll form and its results */
-.poll-form,
-.poll-results {
-  background-color: #fff3fc;
-  padding: 0 16px 16px 16px;
-  border-radius: 8px;
-}
-.poll-form button:hover {
-  cursor: pointer;
-  box-shadow: -8px 4px 20px var(--color-primary);
-}
 button,
-input {
-  font-family: inherit;
-  font-size: 100%;
+input,
+textarea {
+  display: block;
+  font: inherit;
   background: #ffffff;
-  border: 1px solid #000000;
+  color: inherit;
+  border: 1px solid currentColor;
   box-sizing: border-box;
-  border-radius: 4px;
-  padding: 0.5rem 1rem;
+  border-radius: .25rem;
+  padding: calc(0.5rem - 1px) calc(1rem - 1px);
 }
+
 button {
   cursor: pointer;
 }
-label {
-  color: #000000;
-  font-weight: 500;
+
+input,
+textarea {
+  width: 75%;
 }
 
-/* Instructions */
-.instructions {
-  margin: 1rem auto 0;
+textarea {
+  height: 12rem;
 }
-.instructions p {
+
+label {
+  color: currentColor;
+  font-weight: normal;
   font-size: 1rem;
+  line-height: 1.25rem;
 }
+
 h2 {
-  color: #2800ff;
+  color: var(--color-accent);
+  margin-bottom: 2rem;
 }
 
-/* Admin page */
-table {
-  text-align: left;
-  border-collapse: collapse;
-  background-color: #fff3fc;
+h3 {
+  font-weight: bold;
+  margin-bottom: 1rem;
 }
-td,
-th {
-  border: 2px solid #ffffff;
-  padding: 0.5rem;
+
+p {
+  margin-bottom: 1rem;
 }
-a {
-  text-decoration: none;
-  font-weight: 500;
+
+p.error {
+  color: var(--color-accent);
 }
-p.error,
-p.error a:link,
-p.error a:visited {
-  color: #2800ff;
+
+p.error a {
+  color: currentColor;
 }
 
 .header {
-  display: grid;
-  grid-template-columns: 125px 2fr 1fr;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
+  border-bottom: .25rem solid #fff;
+  padding: 1rem 0;
+  margin-bottom: 2rem;
 }
 
-.header .title {
-  height: 100%;
+@media (min-width: 600px) {
+  .header {
+    display: flex;
+  }
+}
+
+.logo {
+  font-size: 3rem;
+  font-weight: 500;
+  line-height: 6rem;
+  margin: 0;
 }
 
-.header .logo img {
-  margin-left: -15px;
-  height: 125px;
+.logo a {
+  display: block;
+  color: inherit;
+}
+
+.logo img {
+  display: inline-block;
+  margin-right: .5rem;
+  height: 6rem;
   width: auto;
+  vertical-align: middle;
 }
-.header .menu {
+
+@media (max-width: 599px) {
+  .logo {
+    font-size: 2rem;
+    line-height: 3rem;
+  }
+
+  .logo img {
+    height: auto;
+    width: 3rem;
+  }
+}
+
+.menu {
   display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  align-items: flex-end;
-  gap: 15px;
-  margin-right: 20px;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
 }
 
 .bookmark {
-  margin-bottom: 40px;
+  margin-bottom: 2rem;
+}
+
+.bookmark .headline {
+  font-size: 1.25rem;
+  line-height: 1.25rem;
 }
 
 .bookmark .subhead {
-  margin-bottom: 10px;
+  font-size: .875rem;
+  line-height: 2rem;
 }
 
 .bookmark .subhead,
 .bookmark .bottom,
-.bookmark .tags a,
+.bookmark .tags a {
+  color: var(--color-dimmed);
+}
+
+.comment {
+  margin-bottom: 2rem;
+}
+
 .comment .top {
-  color: #707070;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 .comment .top .timestamp:before {
   content: "• ";
 }
 
-.bookmark .description {
-  margin-bottom: 10px;
+.comment .top a {
+  color: inherit;
+  text-decoration: none;
 }
 
-.bookmark .tags a,
-.bookmark .bottom a {
-  font-weight: normal;
+.comment .top .timestamp {
+  font-size: .75rem;
 }
 
 .bookmark .bottom span ~ span:before {
@@ -271,19 +316,20 @@ p.error a:visited {
 }
 
 .bookmark .tags {
-  margin-bottom: 4px;
+  font-size: .875rem;
+  line-height: 2rem;
 }
 
-.bookmark .tags .tag {
+.bookmark .tag {
   margin-right: 0.5rem;
   white-space: nowrap;
 }
 
-.bookmark .tags .tag-op {
-  font-weight: bold;
+.bookmark .tag-op {
+  line-height: 1rem;
 }
 
-.bookmark .tags .tag-add {
+.tag-add {
   color: green;
   font-size: 1.1rem;
 }
@@ -293,34 +339,31 @@ p.error a:visited {
   font-size: 1.5rem;
 }
 
-textarea {
-  display: block;
-  height: 192px;
-  width: 75%;
-}
-
 .tag-list {
-  margin-top: 20px;
+  list-style: none;
 }
 
-.tag-list ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
+.tag-list a {
+  color: var(--color-dimmed);
+  font-size: .875rem;
+  line-height: 1.25rem;
 }
 
 .bio {
   display: grid;
-  grid-gap: 5px;
-  grid-template-columns: 125px auto;
+  grid-gap: 0.3125rem;
+  grid-template-columns: 7.8125rem auto;
+  grid-gap: 1rem;
+  margin-bottom: 1rem;
 }
+
 .bio .avatar {
-  width: 125px;
+  width: 7.8125rem;
 }
 
 #taggedList {
   display: flex;
-  gap: 5px;
+  gap: .25rem;
 }
 
 #taggedList .tagged {
@@ -329,9 +372,9 @@ textarea {
   grid-template-columns: 1.5ch auto;
   align-items: center;
   text-align: center;
-  padding: 5px;
+  padding: calc(.25rem - 1px);
   border: 1px solid black;
-  border-radius: 8px 0 0 8px;
+  border-radius: .5rem 0 0 .5rem;
 }
 
 #taggedList .tagged:before {
@@ -344,7 +387,7 @@ textarea {
 
 .followers .follower {
   display: grid;
-  grid-template-columns: 50% 40px;
+  grid-template-columns: 50% 2.5rem;
   align-items: center;
 }
 
@@ -356,8 +399,61 @@ textarea {
   border-bottom: 1px solid #000000;
 }
 
-.search input[type='submit'] {
-  margin-left: 0.5rem;
+a.bookmark-date {
+  color: inherit;
+}
+
+.bookmark-date + .bookmark-domain:before {
+  content: "• ";
+}
+
+.form-group:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  cursor: pointer;
+}
+
+.form-group summary label {
+  display: inline;
+}
+
+.pagination {
+  font-size: .875rem;
+  line-height: 1.25rem;
+}
+
+.pagination span + span:before {
+  content: " • ";
+}
+
+.pagination span:not(.status) {
+  color: var(--color-dimmed);
+}
+
+.search {
+  margin-bottom: 1rem;
+}
+
+.admin-links {
+  list-style: none;
+}
+
+.admin-links a {
+  color: var(--color-dimmed);
+  font-size: .875rem;
+  line-height: 1.25rem;
+}
+
+.bookmark-permalink-title {
+  margin-bottom: 0;
+}
+
+.external-link {
+  font-size: .625em;
+  color: var(--color-dimmed);
 }
 
 .bookmark-date + .bookmark-domain:before {
diff --git a/src/pages/about.hbs b/src/pages/about.hbs
index 4311a79..b6a26d2 100644
--- a/src/pages/about.hbs
+++ b/src/pages/about.hbs
@@ -50,4 +50,4 @@
   and
   <a href="https://public-sans.digital.gov/">
     Public Sans</a>.
-  </p>
+</p>
diff --git a/src/pages/admin/bookmarks.hbs b/src/pages/admin/bookmarks.hbs
index ae8d3ca..d6339c0 100644
--- a/src/pages/admin/bookmarks.hbs
+++ b/src/pages/admin/bookmarks.hbs
@@ -11,6 +11,13 @@
   individually.
 </p>
 <form action="/bookmark/multiadd" method="post">
-  <textarea name="urls"></textarea>
-  <button type="submit">Import</button>
+  <div class="form-group">
+    <label for="multiadd_urls">
+      URLs (one per line)
+    </label>
+    <textarea id="multiadd_urls" name="urls"></textarea>
+  </div>
+  <div class="form-group">
+    <button type="submit">Import</button>
+  </div>
 </form>
diff --git a/src/pages/admin/following.hbs b/src/pages/admin/following.hbs
index 55aaa85..cbf2322 100644
--- a/src/pages/admin/following.hbs
+++ b/src/pages/admin/following.hbs
@@ -1,9 +1,5 @@
-<h3>
-  Manage your federated follows
-</h3>
-
-<div>
-  <form action="/admin/following/follow" method="POST">
+<form action="/admin/following/follow" method="POST">
+  <div class="form-group">
     <label for="actor">
       Enter username to follow
     </label>
@@ -13,26 +9,26 @@
       name="actor"
       placeholder="@updates@postmarks.glitch.me"
     />
+  </div>
+  <div class="form-group">
     <button type="submit">
       Follow
     </button>
-  </form>
-</div>
+  </div>
+</form>
 
-<div>
-  {{#each following}}
-    <div class="following">
-      <div class="info">
-        <a href="{{this}}">
-          {{this}}
-        </a>
-      </div>
-      <div class="actions">
-        <form action="/admin/following/unfollow" method="POST">
-          <input type="hidden" name="actor" value="{{this}}" />
-          <button type="submit">Unfollow</button>
-        </form>
-      </div>
+{{#each following}}
+  <div class="following">
+    <div class="info">
+      <a href="{{this}}">
+        {{this}}
+      </a>
+    </div>
+    <div class="actions">
+      <form action="/admin/following/unfollow" method="POST">
+        <input type="hidden" name="actor" value="{{this}}" />
+        <button type="submit">Unfollow</button>
+      </form>
     </div>
-  {{/each}}
-</div>
+  </div>
+{{/each}}
diff --git a/src/pages/bookmark.hbs b/src/pages/bookmark.hbs
index 5578b0f..d77d1f2 100644
--- a/src/pages/bookmark.hbs
+++ b/src/pages/bookmark.hbs
@@ -1,8 +1,18 @@
-{{> show_bookmark bookmark=bookmark }}
+<h1 class="bookmark-permalink-title">
+  <a href="{{bookmark.url}}">
+    {{bookmark.title}} <span class="external-link">↗</span>
+  </a>
+</h1>
 
-<h2>Comments</h2>
-{{#each comments }}
-  {{> show_comment comment=this }}
-{{else }}
-  No comments yet!
-{{/each}}
+{{> show_bookmark bookmark=bookmark permalink=true}}
+
+{{#if comments}}
+  <h2>
+    {{bookmark.comment_count}}
+    {{pluralize bookmark.comment_count "comment" "comments"}}
+  </h2>
+
+  {{#each comments }}
+    {{> show_comment comment=this }}
+  {{/each}}
+{{/if}}
diff --git a/src/pages/layouts/main.hbs b/src/pages/layouts/main.hbs
index 942c024..af54528 100644
--- a/src/pages/layouts/main.hbs
+++ b/src/pages/layouts/main.hbs
@@ -15,10 +15,10 @@
   <body>
     <div class="header">
       <div class="logo">
-        <img src="/postmarks-logo-small.png" />
-      </div>
-      <div class="title">
-        <h1><a href="/">{{siteName}}</a></h1>
+        <a href="/">
+          <img src="/postmarks-logo-small.png" />
+          {{siteName}}
+        </a>
       </div>
       <div class="menu">
         <a href="/about">About</a>
@@ -34,11 +34,17 @@
       </div>
     </div>
     <div class="wrapper">
-      {{> tag_list tags=tags}}
       <div class="content" role="main">
-        <h2>{{title}}</h2>
+        {{^if hideTitle}}
+          <h1>{{title}}</h1>
+        {{/if}}
         {{{body}}}
       </div>
+      {{#if admin}}
+        {{> admin_subnav}}
+      {{else}}
+        {{> tag_list tags=tags}}
+      {{/if}}
     </div>
     <footer class="footer">
       <a href="/">Home</a>
@@ -53,8 +59,7 @@
         <a href="/login">Login</a>
       {{/if}}
       <a class="btn--remix" target="_top" href="https://glitch.new/github.com/ckolderup/postmarks">
-        <img src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FLogo_Color.svg?v=1618199565140"
-          alt="" />
+        <img src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FLogo_Color.svg?v=1618199565140" alt="" />
         Remix on Glitch
       </a>
     </footer>
diff --git a/src/pages/network.hbs b/src/pages/network.hbs
index 69e580c..1c7ee20 100644
--- a/src/pages/network.hbs
+++ b/src/pages/network.hbs
@@ -1,23 +1,18 @@
-<h3>
-  Your network
-</h3>
-<div>
-  {{#each posts}}
-    <div class="network-post">
-      <div class="network-post-content">
-        {{{this.content}}}
-      </div>
-      <div class="network-post-credit">
-        by {{this.name}}
-      </div>
-      <div class="network-post-links">
-        <a href="/bookmark/new?url={{this.href}}&via={{this.url}}">
-          (Quickadd)
-        </a>
-        <a href="{{this.url}}">
-          (Permalink)
-        </a>
-      </div>
+{{#each posts}}
+  <div class="network-post">
+    <div class="network-post-content">
+      {{{this.content}}}
     </div>
-  {{/each}}
-</div>
+    <div class="network-post-credit">
+      by {{this.name}}
+    </div>
+    <div class="network-post-links">
+      <a href="/bookmark/new?url={{this.href}}&via={{this.url}}">
+        (Quickadd)
+      </a>
+      <a href="{{this.url}}">
+        (Permalink)
+      </a>
+    </div>
+  </div>
+{{/each}}
diff --git a/src/pages/partials/admin_subnav.hbs b/src/pages/partials/admin_subnav.hbs
index a747266..fe266c3 100644
--- a/src/pages/partials/admin_subnav.hbs
+++ b/src/pages/partials/admin_subnav.hbs
@@ -1,7 +1,7 @@
-<ul>
-  <li><a href="/admin/">Admin home/Bookmarklet</a></li>
+<ul class="admin-links">
+  <li><a href="/admin">Bookmarklet</a></li>
   <li><a href="/admin/bookmarks">Import bookmarks</a></li>
   <li><a href="/admin/followers">Permissions &amp; followers</a></li>
-  <li><a href="/admin/following">Manage your federated follows</a></li>
+  <li><a href="/admin/following">Federated follows</a></li>
   <li><a href="/admin/data">Data export</a></li>
 </ul>
diff --git a/src/pages/partials/edit_bookmark.hbs b/src/pages/partials/edit_bookmark.hbs
index 8245bf4..e2c8fd0 100644
--- a/src/pages/partials/edit_bookmark.hbs
+++ b/src/pages/partials/edit_bookmark.hbs
@@ -25,6 +25,7 @@
         value="{{bookmark.title}}"
       />
     </div>
+    <div class="form-group">
       <label for="bookmark_description">
         Description
       </label>
diff --git a/src/pages/partials/pagination.hbs b/src/pages/partials/pagination.hbs
index ec4b90a..be4483d 100644
--- a/src/pages/partials/pagination.hbs
+++ b/src/pages/partials/pagination.hbs
@@ -9,7 +9,7 @@
         Previous
       </span>
     {{/if}}
-    <span>
+    <span class="status">
       Page {{currentPage}} of {{totalPages}}
     </span>
     {{#if hasNextPage}}
diff --git a/src/pages/partials/show_bookmark.hbs b/src/pages/partials/show_bookmark.hbs
index e052d3e..54f7d5f 100644
--- a/src/pages/partials/show_bookmark.hbs
+++ b/src/pages/partials/show_bookmark.hbs
@@ -1,13 +1,21 @@
 <div class="bookmark">
-  <div class="headline">
-    <a href="{{bookmark.url}}">
-      {{bookmark.title}}
-    </a>
-  </div>
+  {{^if permalink}}
+    <div class="headline">
+      <a href="{{bookmark.url}}">
+        {{bookmark.title}}
+      </a>
+    </div>
+  {{/if}}
   <div class="subhead">
-    <span class="bookmark-date" title="{{bookmark.created_at}}">
-      {{bookmark.timestamp}}
-    </span>
+    {{#if permalink}}
+      <span class="bookmark-date" title="{{bookmark.created_at}}">
+        {{bookmark.timestamp}}
+      </span>
+    {{else}}
+      <a href="/bookmark/{{bookmark.id}}" class="bookmark-date" title="{{bookmark.created_at}}">
+        {{bookmark.timestamp}}
+      </a>
+    {{/if}}
     <span class="bookmark-domain">
       {{bookmark.domain}}
     </span>
@@ -47,12 +55,16 @@
     {{/if}}
   </div>
   <div class="bottom">
-    <span>
-      <a href="/bookmark/{{bookmark.id}}">
-        {{bookmark.comment_count}}
-        {{pluralize bookmark.comment_count "comment" "comments"}}
-      </a>
-    </span>
+    {{^if permalink}}
+      {{#if bookmark.comment_count}}
+        <span>
+          <a href="/bookmark/{{bookmark.id}}">
+            {{bookmark.comment_count}}
+            {{pluralize bookmark.comment_count "comment" "comments"}}
+          </a>
+        </span>
+      {{/if}}
+    {{/if}}
     {{#if @root.loggedIn}}
       <span>
         <a href="/bookmark/{{bookmark.id}}/edit">
diff --git a/src/pages/partials/tag_list.hbs b/src/pages/partials/tag_list.hbs
index e497ac1..774b545 100644
--- a/src/pages/partials/tag_list.hbs
+++ b/src/pages/partials/tag_list.hbs
@@ -1,7 +1,9 @@
-<div class="tag-list">
-  <ul>
-    {{#each tags}}
-      <li><a href="/tagged/{{this}}">#{{this}}</a></li>
-    {{/each}}
-  </ul>
-</div>
+<ul class="tag-list">
+  {{#each tags}}
+    <li>
+      <a href="/tagged/{{this}}">
+        #{{this}}
+      </a>
+    </li>
+  {{/each}}
+</ul>
diff --git a/src/pages/search.hbs b/src/pages/search.hbs
index becb338..7584efd 100644
--- a/src/pages/search.hbs
+++ b/src/pages/search.hbs
@@ -1,7 +1,14 @@
 <div class="search">
   <form action="/search">
-    <input name="query" value="{{keywords}}">
-    <button>Search</button>
+    <div class="form-group">
+      <label for="query" class="visually-hidden">
+        Query
+      </label>
+      <input id="query" name="query" value="{{keywords}}">
+    </div>
+    <div class="form-group">
+      <button>Search</button>
+    </div>
   </form>
 </div>
 {{#if error}}
diff --git a/src/routes/admin.js b/src/routes/admin.js
index fd72354..25a73d7 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -10,9 +10,8 @@ const DATA_PATH = '/app/.data';
 const router = express.Router();
 
 router.get('/', isAuthenticated, async (req, res) => {
-  const params = req.query.raw ? {} : { title: 'Admin' };
-  params.layout = 'admin';
-
+  const params = req.query.raw ? {} : { title: 'Bookmarklet' };
+  params.admin = true;
   params.bookmarklet = `javascript:(function(){w=window.open('https://${domain}/bookmark/popup?url='+encodeURIComponent(window.location.href)+'&highlight='+encodeURIComponent(window.getSelection().toString()),'postmarks','scrollbars=yes,width=550,height=600');})();`;
   params.bookmarkletTruncated = `${params.bookmarklet.substr(0, 30)}…`;
 
@@ -20,15 +19,15 @@ router.get('/', isAuthenticated, async (req, res) => {
 });
 
 router.get('/bookmarks', isAuthenticated, async (req, res) => {
-  const params = req.query.raw ? {} : { title: 'Admin: Import bookmarks' };
-  params.layout = 'admin';
+  const params = req.query.raw ? {} : { title: 'Import bookmarks' };
+  params.admin = true;
 
   return res.render('admin/bookmarks', params);
 });
 
 router.get('/followers', isAuthenticated, async (req, res) => {
-  const params = req.query.raw ? {} : { title: 'Admin: Permissions & followers' };
-  params.layout = 'admin';
+  const params = req.query.raw ? {} : { title: 'Permissions & followers' };
+  params.admin = true;
 
   const apDb = req.app.get('apDb');
 
@@ -59,8 +58,8 @@ router.get('/followers', isAuthenticated, async (req, res) => {
 });
 
 router.get('/following', isAuthenticated, async (req, res) => {
-  const params = req.query.raw ? {} : { title: 'Admin: Manage your federated follows' };
-  params.layout = 'admin';
+  const params = req.query.raw ? {} : { title: 'Federated follows' };
+  params.admin = true;
 
   const apDb = req.app.get('apDb');
 
@@ -79,8 +78,8 @@ router.get('/following', isAuthenticated, async (req, res) => {
 });
 
 router.get('/data', isAuthenticated, async (req, res) => {
-  const params = req.query.raw ? {} : { title: 'Admin: Data export' };
-  params.layout = 'admin';
+  const params = req.query.raw ? {} : { title: 'Data export' };
+  params.admin = true;
 
   return res.render('admin/data', params);
 });
diff --git a/src/routes/auth.js b/src/routes/auth.js
index 32237c5..46ad064 100644
--- a/src/routes/auth.js
+++ b/src/routes/auth.js
@@ -3,7 +3,7 @@ import { login, logout } from '../session-auth.js';
 
 const router = express.Router();
 
-router.get('/login', (req, res) => res.render('login', { sendTo: req.query.sendTo }));
+router.get('/login', (req, res) => res.render('login', { title: 'Login', sendTo: req.query.sendTo }));
 
 router.post('/login', login);
 router.get('/logout', logout);
diff --git a/src/routes/bookmark.js b/src/routes/bookmark.js
index 76ad026..ffa9224 100644
--- a/src/routes/bookmark.js
+++ b/src/routes/bookmark.js
@@ -82,15 +82,14 @@ router.get('/:id', async (req, res) => {
   const params = {};
   const bookmarksDb = req.app.get('bookmarksDb');
 
-  params.tags = await bookmarksDb.getTags();
-
   const bookmark = await bookmarksDb.getBookmark(req.params.id);
   const comments = await bookmarksDb.getVisibleCommentsForBookmark(bookmark.id);
 
   if (!bookmark) {
     params.error = data.errorMessage;
   } else {
-    params.title = `Bookmark: ${bookmark.title}`;
+    params.title = bookmark.title;
+    params.hideTitle = true;
     params.bookmark = bookmark;
     params.comments = comments;
   }
@@ -103,8 +102,6 @@ router.get('/:id/edit', isAuthenticated, async (req, res) => {
   const bookmarksDb = req.app.get('bookmarksDb');
   const apDb = req.app.get('apDb');
 
-  params.tags = await bookmarksDb.getTags();
-
   const bookmark = await bookmarksDb.getBookmark(req.params.id);
   bookmark.tagsArray = encodeURIComponent(JSON.stringify(bookmark.tags?.split(' ').map((b) => b.slice(1)) || []));
   const comments = await bookmarksDb.getAllCommentsForBookmark(req.params.id);
@@ -116,7 +113,7 @@ router.get('/:id/edit', isAuthenticated, async (req, res) => {
     params.allowed = permissions?.allowed;
     params.blocked = permissions?.blocked;
 
-    params.title = `Edit Bookmark: ${bookmark.title}`;
+    params.title = 'Edit Bookmark';
     params.bookmark = bookmark;
     params.comments = comments;
   }
diff --git a/src/routes/core.js b/src/routes/core.js
index ad15d46..ecb2c20 100644
--- a/src/routes/core.js
+++ b/src/routes/core.js
@@ -71,7 +71,7 @@ router.get('/network', isAuthenticated, async (req, res) => {
     href: linkify.find(post.content)?.[0]?.href,
   }));
 
-  return res.render('network', { posts: linksInPosts });
+  return res.render('network', { title: 'Your network', posts: linksInPosts });
 });
 
 router.get('/index.xml', async (req, res) => {

From f277022d71cc801c0adeefcbc1eb80de2c04a0aa Mon Sep 17 00:00:00 2001
From: John Holdun <john@johnholdun.com>
Date: Sat, 23 Sep 2023 17:43:46 -0700
Subject: [PATCH 2/2] Update admin nav

---
 public/style.css                    | 14 ++++++++++----
 server.js                           |  3 +++
 src/pages/admin/data.hbs            | 13 ++++++-------
 src/pages/layouts/main.hbs          |  4 ++--
 src/pages/partials/admin_subnav.hbs | 22 +++++++++++++++-------
 src/routes/admin.js                 | 23 ++++++++++++++++++-----
 6 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/public/style.css b/public/style.css
index 50ec16f..3362327 100644
--- a/public/style.css
+++ b/public/style.css
@@ -111,6 +111,8 @@ a {
 .wrapper {
   min-height: 40vh;
   margin: 2rem 0;
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 @media (min-width: 600px) {
@@ -205,7 +207,7 @@ h3 {
   margin-bottom: 1rem;
 }
 
-p {
+p, ol, ul, form {
   margin-bottom: 1rem;
 }
 
@@ -439,12 +441,16 @@ a.bookmark-date {
 
 .admin-links {
   list-style: none;
+  margin: 0 0 2rem;
+  font-weight: bold;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  color: var(--color-dimmed);
 }
 
 .admin-links a {
-  color: var(--color-dimmed);
-  font-size: .875rem;
-  line-height: 1.25rem;
+  font-weight: normal;
+  color: inherit;
 }
 
 .bookmark-permalink-title {
diff --git a/server.js b/server.js
index fe13642..f8f256f 100644
--- a/server.js
+++ b/server.js
@@ -94,6 +94,9 @@ const hbs = create({
     ifThisTag(tag, path, options) {
       return path === `/tagged/${tag}` ? options.fn(this) : options.inverse(this);
     },
+    eq(a, b, options) {
+      return a === b ? options.fn(this) : options.inverse(this);
+    },
   },
   partialsDir: './src/pages/partials',
   extname: '.hbs',
diff --git a/src/pages/admin/data.hbs b/src/pages/admin/data.hbs
index e84508d..42e596b 100644
--- a/src/pages/admin/data.hbs
+++ b/src/pages/admin/data.hbs
@@ -1,19 +1,18 @@
 <h3>
   Download bookmarks
 </h3>
-<p style="margin: 0;">
+<p>
   You can download your bookmarks as:
 </p>
-  <ul>
-    <li><a href="/admin/bookmarks.db">sqlite database</a></li>
-    <li><a href="/admin/bookmarks.csv">csv</a></li>
-  </ul>
+<ul>
+  <li><a href="/admin/bookmarks.db">sqlite database</a></li>
+  <li><a href="/admin/bookmarks.csv">csv</a></li>
+</ul>
 <p>
-  It's less likely you'll need this, but you can also download your
+  It’s less likely you’ll need this, but you can also download your
   activitypub.db
   <a href="/admin/activitypub.db">here</a>.
 </p>
-
 <form action="/admin/reset" method="post"
   onsubmit="return confirm('Last chance! This will DELETE ALL YOUR BOOKMARKS. Are you sure you want to do this?')">
   <h3>
diff --git a/src/pages/layouts/main.hbs b/src/pages/layouts/main.hbs
index af54528..86933de 100644
--- a/src/pages/layouts/main.hbs
+++ b/src/pages/layouts/main.hbs
@@ -40,8 +40,8 @@
         {{/if}}
         {{{body}}}
       </div>
-      {{#if admin}}
-        {{> admin_subnav}}
+      {{#if adminLinks}}
+        {{> admin_subnav links=adminLinks currentPath=currentPath}}
       {{else}}
         {{> tag_list tags=tags}}
       {{/if}}
diff --git a/src/pages/partials/admin_subnav.hbs b/src/pages/partials/admin_subnav.hbs
index fe266c3..94ba827 100644
--- a/src/pages/partials/admin_subnav.hbs
+++ b/src/pages/partials/admin_subnav.hbs
@@ -1,7 +1,15 @@
-<ul class="admin-links">
-  <li><a href="/admin">Bookmarklet</a></li>
-  <li><a href="/admin/bookmarks">Import bookmarks</a></li>
-  <li><a href="/admin/followers">Permissions &amp; followers</a></li>
-  <li><a href="/admin/following">Federated follows</a></li>
-  <li><a href="/admin/data">Data export</a></li>
-</ul>
+{{#if links}}
+  <ul class="admin-links">
+    {{#each links}}
+      <li>
+        {{#eq href ../currentPath}}
+          {{label}}
+        {{else}}
+          <a href="{{href}}">
+            {{label}}
+          </a>
+        {{/eq}}
+      </li>
+    {{/each}}
+  </ul>
+{{/if}}
diff --git a/src/routes/admin.js b/src/routes/admin.js
index 25a73d7..8847362 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -7,11 +7,20 @@ import { lookupActorInfo, createFollowMessage, createUnfollowMessage, signAndSen
 
 const DATA_PATH = '/app/.data';
 
+const ADMIN_LINKS = [
+  { href: '/admin', label: 'Bookmarklet' },
+  { href: '/admin/bookmarks', label: 'Import bookmarks' },
+  { href: '/admin/followers', label: 'Permissions & followers' },
+  { href: '/admin/following', label: 'Federated follows' },
+  { href: '/admin/data', label: 'Data export' },
+];
+
 const router = express.Router();
 
 router.get('/', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Bookmarklet' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
   params.bookmarklet = `javascript:(function(){w=window.open('https://${domain}/bookmark/popup?url='+encodeURIComponent(window.location.href)+'&highlight='+encodeURIComponent(window.getSelection().toString()),'postmarks','scrollbars=yes,width=550,height=600');})();`;
   params.bookmarkletTruncated = `${params.bookmarklet.substr(0, 30)}…`;
 
@@ -20,14 +29,16 @@ router.get('/', isAuthenticated, async (req, res) => {
 
 router.get('/bookmarks', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Import bookmarks' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
 
   return res.render('admin/bookmarks', params);
 });
 
 router.get('/followers', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Permissions & followers' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
 
   const apDb = req.app.get('apDb');
 
@@ -59,7 +70,8 @@ router.get('/followers', isAuthenticated, async (req, res) => {
 
 router.get('/following', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Federated follows' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
 
   const apDb = req.app.get('apDb');
 
@@ -79,7 +91,8 @@ router.get('/following', isAuthenticated, async (req, res) => {
 
 router.get('/data', isAuthenticated, async (req, res) => {
   const params = req.query.raw ? {} : { title: 'Data export' };
-  params.admin = true;
+  params.adminLinks = ADMIN_LINKS;
+  params.currentPath = req.originalUrl;
 
   return res.render('admin/data', params);
 });