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/@[email protected]/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

@@ -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%;
+}

themes/lix/assets/scss/shared/shared.scss

@@ -3,6 +3,7 @@
 @import "fonts";
 @import "utilities";
 
+@import "type";
 @import "blockquote";
 @import "code";
 @import "header";

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 @@ <h2 class="display-1 fw-bold text-center text-primary pb-3">{{ . }}</h2>
       </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>

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>