Restyle header

.github/workflows/ci.yml

@@ -42,7 +42,7 @@ jobs:
       # that are expected to exist by the manifest.json view test.
     - run: |
         mkdir yarrharr/static
-        touch yarrharr/static/{icon,logotype,lettertype}-xyz.{ico,png,svg}
+        touch yarrharr/static/icon-xyz.{ico,png,svg}
         touch yarrharr/static/{normalize,main,fonts}-xyz.css
         touch yarrharr/static/{runtime,vendor,main}-xyz.js
 

bin/compile-static.py

@@ -337,6 +337,11 @@ async def process_fonts(root_dir: Path, w: Writer) -> None:
     ic_var_name = hashname("inconsolata", "ttf", ic_var)
     w.add_file_bytes(ic_var_name, ic_var)
 
+    montez_base = root_dir / "vendor" / "montez"
+    montez = (montez_base / "Montez-Regular.ttf").read_bytes()
+    montez_name = hashname("montez", "ttf", montez)
+    w.add_file_bytes(montez_name, montez)
+
     css = (
         f"""\
 @font-face {{
@@ -362,6 +367,14 @@ async def process_fonts(root_dir: Path, w: Writer) -> None:
   font-stretch: normal;
   src: url('{ic_var_name}');
 }}
+
+@font-face {{
+  font-family: 'Montez';
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  src: url('{montez_name}');
+}}
 """
     ).encode()
     w.add_file_bytes(hashname("fonts", "css", css), css)
@@ -378,8 +391,6 @@ async def _main(build_dir: Path, out_dir: Path, compress: bool) -> None:
     await asyncio.gather(
         process_svg(icon, w),
         rasterize_favicon(icon, build_dir, w),
-        process_svg(repo_root / "img" / "lettertype.svg", w),
-        process_svg(repo_root / "img" / "logotype.svg", w),
         process_glob((repo_root / "vendor" / "normalize.css").glob("normalize-*.css"), w),
         process_css(repo_root / "css" / "main.css", w),
         process_fonts(repo_root, w),

css/GlobalBar.css

@@ -1,39 +1,85 @@
-.yarrharr-masthead {
+#global-nav {
+    display: flex;
+    justify-content: space-between;
+    background: var(--footer-background-color);
+
+    --focus-offset: calc(2 * var(--focus-offset-in)); /* Don't clip focus ring. */
+
+    & > a[href],
+    & > button {
+        background: transparent;
+        border: none;
+    }
+
+    & > * {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+    }
+
+    & > * > .icon {
+        display: block;
+        font-size: var(--icon-size);
+    }
+
+    & > .square {
+        flex: 0 0 var(--bar-height);
+    }
+}
+
+
+#masthead {
     display: flex;
     flex: 0 0 auto;
+    font: 1.5rem Montez, sans-serif;
+    padding: 0 0.5rem;
 
-    img {
-        flex: 1 1 auto;
-        width: auto;
-        height: auto;
-        max-height: 100%;
-        filter: var(--logo-filter);
+    &:link {
+        text-decoration: none;
     }
 
     .logotype {
         display: block;
-        width: 10rem;
-    }
-    .lettertype {
-        display: none;
-        width: 3rem;
     }
 
     @media (max-width: 30rem) {
         .logotype { display: none; }
-        .lettertype { display: block; }
     }
 }
 
 .global-links {
     flex: 1 1 100%;
     display: flex;
 }
+
 .global-link {
-    flex: 0 1 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     --focus-offset: var(--focus-offset-in); /* Don't clip focus ring. */
     padding: 1rem; /* Ensure spacing between */
+    font-variant: small-caps;
+    font-variation-settings: "opsz" 25;
+
+    .icon {
+        --icon-color: var(--selected-color);
+    }
+
+    span {
+        padding: 0 0 0 0.25rem;
+    }
+
+    @media (max-width: 30rem) {
+        display: flex;
+        padding: 0.25rem;
+        flex-flow: column nowrap;
+        align-items: center;
+
+        &.secondary {
+            display: none;
+        }
+
+        span {
+            padding: 0.25rem 0 0 0;
+            font-size: smaller;
+        }
+    }
 }

css/icons.css

@@ -5,6 +5,7 @@
 /* Icons have this class by default, which makes them a generic gray. */
 .icon {
     color: var(--icon-color);
+    transform: translateY(0.075em);
 }
 
 .icon-heart {

css/inventory.css

@@ -7,8 +7,7 @@
     display: grid;
     grid-template-columns: 1fr min-content;
     align-items: center;
-    max-width: var(--layout-max-width);
-    margin: 0 auto;
+    padding: 0 0.5rem;
 }
 
 
@@ -77,7 +76,7 @@
     }
 
     .feed-list-item-header {
-        text-transform: uppercase;
+        font-variant: small-caps;
         font-size: smaller;
     }
 
@@ -201,7 +200,7 @@
     }
 
     .label-list-item-header {
-        text-transform: uppercase;
+        font-variant: small-caps;
         font-size: smaller;
     }
 

css/main.css

@@ -15,8 +15,6 @@
     --icon-color: #666;
     --icon-color-off: var(--border-color);
 
-    --logo-filter: none;
-
     --heart-color: #c92ccc;
     --check-color: #39cc5c;
     --selected-color: hsl(24.1, 100%, 49.2%);
@@ -54,11 +52,6 @@
         --icon-color: #eee;
         --icon-color-off: #666;
 
-        /* Invert the logo image so that it is legible in the dark theme. We
-         * don't go 100% because it is pretty bold.
-         */
-        --logo-filter: invert(90%);
-
         --font-weight-mono: 300;
 
         scrollbar-color: var(--quiet-text-color) var(--background-color);
@@ -263,40 +256,6 @@ select[multiple] {
     }
 }
 
-.bar {
-    display: flex;
-    justify-content: space-between;
-    height: var(--bar-height);
-    max-width: var(--layout-max-width);
-    margin: 0 auto;
-    line-height: var(--bar-line-height);
-    contain: size layout;
-
-    --focus-offset: var(--focus-offset-in); /* Don't clip focus ring. */
-
-    & > a[href],
-    & > button {
-        background: transparent;
-        border: none;
-    }
-
-    & > * {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-    }
-
-    & > * > .icon {
-        display: block;
-        font-size: var(--icon-size);
-    }
-
-    & > .square {
-        flex: 0 0 var(--bar-height);
-    }
-}
-
 /* Mostly used for the login page. */
 form.small-form {
     display: block;
@@ -323,6 +282,8 @@ form.small-form {
         padding: 1rem 1rem 0 0;
         flex: 100 1 auto;
 
+        font: 3.5rem Montez, sans-serif;
+
         text-align: center;
 
         img {