Reduce page width and tweak sizing

src/_layouts/about.html

@@ -9,8 +9,8 @@
       crossorigin: true
 ---
 
-<article class="prose">
-  <h1>About Me</h1>
+<article class="prose rhythm">
+  <h1 class="size-font-4xl">About Me</h1>
   <div class="rhythm">
     {{ content }}
   </div>

src/_pages/about.md

@@ -9,7 +9,7 @@ layout: about
   {% include "image.html" src: 'src/assets/images/profile-photo.jpg', alt: '', isLinked: false, className: "float right", imgClassName: "circle", isLazy: false %}
 </p>
 
-Thanks for dropping by! My name's Aleksandr—and yes, that's spelled *without* an `e` between the `d` and the `r`, pronounced just like *Alexander*. Don't worry about my last name, though; it's quite long, and most people butcher it anyway.
+<p style="margin: 0">Thanks for dropping by! My name's Aleksandr—and yes, that's spelled <em>without</em> an <code>e</code> between the <code>d</code> and the <code>r</code>, pronounced just like <em>Alexander</em>. Don't worry about my last name, though; it's quite long, and most people butcher it anyway.</p>
 
 Speaking of last names, if mine hasn't already [betrayed me](http://www.armeniapedia.org/wiki/Armenian_Last_Names), I was originally born in Armenia, a beautiful country nestled between Europe, Asia, and a bunch of biblically old mountains. You can almost spot it on a world map if you squint hard enough.
 

src/_pages/index.html

@@ -5,12 +5,12 @@
 <article class="home-page stack">
   <section class="home-page-hero">
     <div class="hero stack gap--4">
-      <h1 class="hero-title">Hi, I&rsquo;m Aleksandr</h1>
+      <h1 class="size-font-5xl">Hi, I&rsquo;m Aleksandr</h1>
       <p class="hero-subtitle">I write scalable, performant, and accessible software for the web. You can read <a href="/blog/">my blog</a>, learn more <a href="/about/">about me</a>, or subscribe to <a href="/feed.xml">my RSS feed</a>.</p>
     </div>
     <figure class="hero-hashart gap--3">
       {% hashArt buildInfo.hash %}
-      <figcaption class="size-font-sm"><a href="/blog/16-shades-of-gray/">What is this?</a></figcaption>
+      <figcaption class="size-font-xs"><a href="/blog/16-shades-of-gray/">What is this?</a></figcaption>
     </figure>
   </section>
   <section class="stack gap-0">

src/assets/styles/art.scss

@@ -82,7 +82,7 @@ html {
         text-transform: uppercase;
         letter-spacing: tracking("lg");
         text-shadow: to-rems(1px) to-rems(1px);
-        font-size: calc(var(--font-size-multiplier) * #{font-size("4xl")});
+        font-size: calc(var(--font-size-multiplier) * #{font-size("5xl")});
         @include font($family: "display", $weight: "regular");
 
         @include tablet-sm {

src/assets/styles/partials/_tokens.scss

@@ -52,6 +52,12 @@ $tokens: (
         tracking: "sm",
       ),
       "4xl": (
+        min: 36px,
+        max: 58px,
+        leading: "3xs",
+        tracking: "sm",
+      ),
+      "5xl": (
         min: 40px,
         max: 72px,
         leading: "3xs",

src/assets/styles/partials/components/_float.scss

@@ -1,22 +1,16 @@
 @import "../mixins";
 
 .float {
-  --spacing: #{spacing("2")};
-  float: none;
+  --spacing: #{spacing("-2")};
   max-width: to-rems(160px);
   margin-block-end: var(--spacing);
 
-  &.left {
-    margin-inline-end: var(--spacing);
-    float: left;
-  }
-
   &.right {
     margin-inline-start: var(--spacing);
     float: right;
   }
 
   @include mobile-lg {
-    max-width: to-rems(200px);
+    max-width: to-rems(190px);
   }
 }

src/assets/styles/partials/components/_postPreview.scss

@@ -15,7 +15,7 @@
     display: grid;
     gap: spacing("3");
     /* stylelint-disable-next-line scss/no-global-function-names */
-    grid-template-columns: repeat(auto-fill, minmax(min(#{to-rems(330px)}, 100%), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min(#{to-rems(300px)}, 100%), 1fr));
 
     @include mobile-lg {
       gap: spacing("0");

src/assets/styles/partials/utils/_container.scss

@@ -1,7 +1,7 @@
 @import "../functions";
 
 .container {
-  --container-max-width: #{to-rems(1036px)};
+  --container-max-width: #{to-rems(1000px)};
   /* stylelint-disable-next-line scss/no-global-function-names */
   --padding-x: #{spacing("0")};
 

src/assets/styles/partials/utils/_hero.scss

@@ -2,7 +2,7 @@
 @import "../mixins";
 
 .hero {
-  max-width: to-rems(760px);
+  max-width: 65ch;
 
   &-title {
     @include font($size: "4xl");