From ad8ff9bfbb4daeaa027c3e4d791fb654397a2206 Mon Sep 17 00:00:00 2001
From: Jade Lovelace <lix@jade.fyi>
Date: Thu, 22 Aug 2024 13:51:29 -0700
Subject: [PATCH] type: readjust font sizes and spacings a little

This is in response to a minor complaint about the text size on
mastodon, which I agree with:
https://chaos.social/@imadnyc@mstdn.social/112961604691513932

I personally agree that 20px does not feel right, and more to the point,
our previous type scale was really odd: body text was 1.25rem (20px),
while the nav links were 1rem (16px). It seems like the intent of this
was to make it so that the body text was not 16px, which felt too small
(and does to me too).

However, it seems to me like the *actual* solution here is to set the
entire type scale overall larger, then decrease the size of any type
that looks particularly silly.

Thus, I've set the root font-size to 18px (via a percentage of 112.5%)
instead of the default 16px, which will fix all the 1rem font sizes
elsewhere in the site, to *make* 1rem a reasonable body text size.
---
 themes/lix/assets/scss/shared/_type.scss       | 10 ++++++++++
 themes/lix/assets/scss/shared/shared.scss      |  1 +
 themes/lix/layouts/_default/single.html        |  4 ++--
 themes/lix/layouts/partials/shared/header.html |  8 ++++----
 4 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 themes/lix/assets/scss/shared/_type.scss

diff --git a/themes/lix/assets/scss/shared/_type.scss b/themes/lix/assets/scss/shared/_type.scss
new file mode 100644
index 00000000..21665765
--- /dev/null
+++ b/themes/lix/assets/scss/shared/_type.scss
@@ -0,0 +1,10 @@
+html {
+  /* The default body text size of 16px is slightly too small. Make it 18px
+   * (relatively, of course, so that people can change their browser settings).
+   *
+   * Doing it this way ensures that the entire type scale aligns with the body
+   * text size rather than being detached from it (and possibly having
+   * too-small headers and similar problems).
+   */
+  font-size: 112.5%;
+}
diff --git a/themes/lix/assets/scss/shared/shared.scss b/themes/lix/assets/scss/shared/shared.scss
index 6b5dcf48..b19cd47f 100644
--- a/themes/lix/assets/scss/shared/shared.scss
+++ b/themes/lix/assets/scss/shared/shared.scss
@@ -3,6 +3,7 @@
 @import "fonts";
 @import "utilities";
 
+@import "type";
 @import "blockquote";
 @import "code";
 @import "header";
diff --git a/themes/lix/layouts/_default/single.html b/themes/lix/layouts/_default/single.html
index 2099b8ce..17194d79 100644
--- a/themes/lix/layouts/_default/single.html
+++ b/themes/lix/layouts/_default/single.html
@@ -4,7 +4,7 @@
       <div class="row justify-content-center pb-5">
         <div class="col-12">
           {{ with .Title | safeHTML }}
-            <h2 class="display-1 fw-bold text-center text-primary pb-3">{{ . }}</h2>
+            <h2 class="display-2 fw-bold text-center text-primary pb-3">{{ . }}</h2>
           {{ end }}
           {{ with .Params.description }}
             <p class="text-black-61 text-center pb-3">{{ . }}</p>
@@ -13,7 +13,7 @@
       </div>
       <div class="row pb-5">
         <div class="col-12 d-flex justify-content-center">
-          <div class="blog-content fs-5">
+          <div class="blog-content">
             {{ .Content }}
           </div>
         </div>
diff --git a/themes/lix/layouts/partials/shared/header.html b/themes/lix/layouts/partials/shared/header.html
index 224bfafc..432953a5 100644
--- a/themes/lix/layouts/partials/shared/header.html
+++ b/themes/lix/layouts/partials/shared/header.html
@@ -6,21 +6,21 @@
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse" id="navbarContent">
+    <nav id="navbarContent" class="collapse navbar-collapse">
       <ul class="navbar-nav ms-auto mb-2 mb-xl-0">
         {{ range .Site.Menus.main }}
           <li class="nav-item text-center">
-            <a class="nav-link text-primary px-4" href="{{ .URL }}">{{ .Name }}</a>
+            <a class="nav-link text-primary px-3" href="{{ .URL }}">{{ .Name }}</a>
           </li>
         {{ end }}
       </ul>
       <ul class="navbar-nav ms-xl-3 mb-2 mb-xl-0">
         {{ range .Site.Menus.buttons }}
           <li class="nav-item">
-            <a class="nav-link btn btn-primary text-light px-4" href="{{ .URL }}">{{ .Name }}</a>
+            <a class="nav-link btn btn-primary text-light px-3" href="{{ .URL }}">{{ .Name }}</a>
           </li>
         {{ end }}
       </ul>
-    </div>
+    </nav>
   </div>
 </nav>