not messing with the base font size sure fixes a ton of problems....

components/Content.module.scss

@@ -1,13 +1,7 @@
 .content {
-  font-size: 0.925em;
+  font-size: 0.9em;
-  letter-spacing: -0.004em;
   line-height: 1.7;
 
-  b,
-  strong {
-    letter-spacing: 0.008em; // not sure why the discrepancy between weights
-  }
-
   blockquote {
     margin-left: 0;
     padding-left: 1.5em;
@@ -18,9 +12,8 @@
   h2,
   h3,
   h4 {
-    margin-top: 1.25em;
+    margin-top: 1em;
     margin-bottom: 0.5em;
-    letter-spacing: 0.001em;
     line-height: 1.5;
   }
 
@@ -33,7 +26,6 @@
   figure {
     margin: 1em auto;
     text-align: center;
-    line-height: 1;
 
     img {
       height: auto;
@@ -41,9 +33,9 @@
     }
 
     figcaption {
-      font-size: 0.95em;
+      font-size: 0.9em;
       line-height: 1.5;
-      margin-top: 0.5em;
+      margin-top: 0.3em;
       color: var(--medium);
     }
   }

components/Layout.module.scss

@@ -5,7 +5,7 @@
   background-color: var(--background-inner);
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 768px) {
   .main {
     padding: 1.25em;
   }

components/contact/ContactForm.module.scss

@@ -60,7 +60,6 @@
   margin-right: 1.5em;
   border: 0;
   border-radius: 0.3em;
-  font-size: 1.1em;
   cursor: pointer;
   user-select: none;
   color: var(--text);

components/home/Home.module.scss

@@ -1,13 +1,13 @@
 .home {
   h1 {
-    margin: 0 0 0.3em -0.03em; // TODO: why is this indented slightly?
+    margin: 0 0 0.5em -0.03em; // TODO: why is this indented slightly?
     font-size: 1.8em;
     font-weight: 500;
-    letter-spacing: -0.014em;
+    letter-spacing: -0.01em;
 
     .wave {
       display: inline-block;
-      margin-left: 2px;
+      margin-left: 0.1em;
       animation: wave 5s infinite;
       animation-delay: 1s;
       transform-origin: 65% 80%;
@@ -19,13 +19,13 @@
     margin: 0.5em 0 0.5em -0.03em; // TODO: why is this indented slightly?
     font-size: 1.35em;
     font-weight: 400;
-    letter-spacing: -0.022em;
+    letter-spacing: -0.016em;
     line-height: 1.4;
   }
 
   p {
     margin: 0.85em 0;
-    letter-spacing: -0.009em;
+    letter-spacing: -0.004em;
     line-height: 1.7;
 
     &:last-of-type {
@@ -55,17 +55,19 @@
   }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 768px) {
   .home {
-    font-size: 0.975em;
-
     h1 {
-      font-size: 1.6em;
+      font-size: 1.5em;
     }
 
     h2 {
       font-size: 1.2em;
     }
+
+    p {
+      font-size: 0.925em;
+    }
   }
 }
 

components/notes/List.module.scss

@@ -1,10 +1,10 @@
 .section {
-  margin: 1.5em 0;
+  margin: 2.4em 0;
 
   .year {
-    font-size: 2.1em;
+    font-size: 2.2em;
     margin-top: 0;
-    margin-bottom: 0.4em;
+    margin-bottom: 0.5em;
   }
 
   .list {
@@ -25,3 +25,9 @@
     margin-bottom: 0;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .section .year {
+    font-size: 2em;
+  }
+}

components/notes/ListItem.module.scss

@@ -1,6 +1,5 @@
 .row {
   display: flex;
-  letter-spacing: -0.008em;
   line-height: 1.75;
   margin-bottom: 1em;
 }

components/notes/Meta.module.scss

@@ -61,7 +61,6 @@
   font-size: 2.1em;
   line-height: 1.3;
   font-weight: 700;
-  letter-spacing: -0.006em;
 
   a {
     background: none;

components/page-footer/Footer.module.scss

@@ -1,6 +1,5 @@
 .footer {
   width: 100%;
-  letter-spacing: -0.005em;
   padding: 1.25em 1.5em;
   border-top: 1px solid var(--kinda-light);
   color: var(--medium-dark);
@@ -35,7 +34,7 @@
   will-change: transform;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 768px) {
   .footer {
     padding: 1em 1.25em 0;
 
@@ -50,7 +49,6 @@
   // stack columns on left instead of flexboxing across
   .row {
     display: block;
-    line-height: 2;
   }
 }
 

components/page-header/Header.module.scss

@@ -18,7 +18,7 @@
   justify-content: space-between;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 768px) {
   .header {
     padding: 0.75em 1.25em;
   }

components/page-header/Menu.module.scss

@@ -9,8 +9,6 @@
 .item {
   margin-left: 1.8em;
   display: inline-flex;
-  align-items: center;
-  line-height: 1;
 
   .link {
     display: inline-flex;
@@ -34,7 +32,6 @@
     font-weight: 500;
     margin-top: 0.125em;
     margin-left: 0.75em;
-    line-height: 1;
   }
 }
 
@@ -42,9 +39,9 @@
   margin-left: 1.25em;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 768px) {
   .menu {
-    max-width: 380px;
+    max-width: 360px;
     justify-content: space-between;
     flex-grow: 1;
   }

components/page-header/Name.module.scss

@@ -26,12 +26,11 @@
 
 .name {
   margin: 0 0.6em;
-  font-size: 1.25em;
+  font-size: 1.2em;
   font-weight: 500;
-  letter-spacing: -0.01em;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 768px) {
   .selfie {
     width: 70px;
     height: 70px;

components/page-header/ThemeToggle.module.scss

@@ -2,6 +2,5 @@
   border: 0;
   padding: 0;
   background: none;
-  line-height: 1;
   cursor: pointer;
 }

components/page/PageTitle.module.scss

@@ -1,6 +1,6 @@
 .title {
   margin-top: 0;
-  margin-bottom: 0.4em;
+  margin-bottom: 0.6em;
   font-size: 2em;
   text-align: center;
 
@@ -11,7 +11,7 @@
   }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 768px) {
   .title {
     font-size: 1.8em;
   }

components/projects/RepoCard.module.scss

@@ -1,6 +1,6 @@
 .card {
   width: 100%;
-  padding: 1em 1.2em;
+  padding: 1.2em;
   border: 1px solid;
   border-radius: 0.5em;
   font-size: 0.85em;
@@ -13,17 +13,18 @@
   }
 
   .description {
-    margin: 0.4em 0 0.7em;
+    margin: 0.7em 0;
     line-height: 1.7;
   }
 
   .meta {
     display: flex;
     flex-wrap: wrap;
+    align-items: baseline;
 
     .meta_item {
       margin-right: 1.5em;
-      font-size: 0.9em;
+      font-size: 0.875em;
       color: var(--medium);
 
       a {

package.json

@@ -80,7 +80,7 @@
     "@types/react-is": "^17.0.3",
     "autoprefixer": "^10.4.1",
     "cross-env": "^7.0.3",
-    "eslint": "~8.5.0",
+    "eslint": "~8.6.0",
     "eslint-config-next": "~12.0.7",
     "eslint-config-prettier": "~8.3.0",
     "eslint-plugin-prettier": "~4.0.0",

pages/contact.tsx

@@ -41,7 +41,7 @@ export default function Contact() {
           div {
             max-width: 600px;
             margin: 0 auto;
-            font-size: 0.925em;
+            font-size: 0.9em;
             line-height: 1.7;
           }
 

pages/previously.tsx

@@ -207,12 +207,13 @@ export default function Previously() {
           font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;
           font-weight: 600 !important;
         }
-        header nav a span:nth-of-type(2) {
+        header nav a span {
-          font-size: 1.1em;
+          font-size: 1.1em !important;
           font-weight: 700 !important;
         }
         header nav > a span:nth-of-type(2) {
-          font-size: 1.5em;
+          font-size: 1.4em !important;
+          font-weight: 700 !important;
         }
         main > div > div {
           font-size: 1.1em !important;

styles/index.scss

@@ -14,10 +14,6 @@ body {
   font-kerning: normal;
   font-variant-ligatures: normal;
   font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
-
-  // global base font size:
-  font-size: 0.975em;
-  line-height: 1.5;
 }
 
 code,
@@ -26,7 +22,6 @@ samp,
 pre,
 .monospace {
   font-family: typography.$font-stack-mono;
-  letter-spacing: normal;
 }
 
 // override above font-family if browser supports variable fonts
@@ -95,7 +90,6 @@ a {
 // all code
 code {
   font-size: 0.925em;
-  letter-spacing: normal;
   page-break-inside: avoid;
 }
 
@@ -118,7 +112,6 @@ code {
   color: var(--medium-light);
   background: none;
   font-weight: 300;
-  line-height: 1;
   opacity: 0; // overridden on hover
   user-select: none;
 
@@ -136,7 +129,7 @@ h2,
 h3,
 h4 {
   // offset (approximately) with sticky header so jumped-to content isn't hiding behind it
-  scroll-margin-top: 90px;
+  scroll-margin-top: 4em;
 
   &:hover {
     .h-anchor {
@@ -145,6 +138,14 @@ h4 {
   }
 }
 
+@media screen and (max-width: 768px) {
+  h2,
+  h3,
+  h4 {
+    scroll-margin-top: 5em;
+  }
+}
+
 // https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
 @media (prefers-reduced-motion: reduce) {
   *,

yarn.lock

@@ -1648,7 +1648,7 @@ acorn-walk@^8.0.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^8.0.4, acorn@^8.6.0:
+acorn@^8.0.4, acorn@^8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
   integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
@@ -2444,9 +2444,9 @@ duplexer@^0.1.2:
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
 electron-to-chromium@^1.4.17:
-  version "1.4.30"
+  version "1.4.31"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.30.tgz#0f75a1dce26dffbd5a0f7212e5b87fe0b61cbc76"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz#8d5ccc3f8253cd142b07afaa84f200fd33a7f2a6"
-  integrity sha512-609z9sIMxDHg+TcR/VB3MXwH+uwtrYyeAwWc/orhnr90ixs6WVGSrt85CDLGUdNnLqCA7liv426V20EecjvflQ==
+  integrity sha512-t3XVQtk+Frkv6aTD4RRk0OqosU+VLe1dQFW83MDer78ZD6a52frgXuYOIsLYTQiH2Lm+JB2OKYcn7zrX+YGAiQ==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -2689,10 +2689,10 @@ eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz#eee4acea891814cda67a7d8812d9647dd0179af2"
   integrity sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==
 
-eslint@~8.5.0:
+eslint@~8.6.0:
-  version "8.5.0"
+  version "8.6.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.5.0.tgz#ddd2c1afd8f412036f87ae2a063d2aa296d3175f"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.6.0.tgz#4318c6a31c5584838c1a2e940c478190f58d558e"
-  integrity sha512-tVGSkgNbOfiHyVte8bCM8OmX+xG9PzVG/B4UCF60zx7j61WIVY/AqJECDgpLD4DbbESD0e174gOg3ZlrX15GDg==
+  integrity sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw==
   dependencies:
     "@eslint/eslintrc" "^1.0.5"
     "@humanwhocodes/config-array" "^0.9.2"
@@ -2706,7 +2706,7 @@ eslint@~8.5.0:
     eslint-scope "^7.1.0"
     eslint-utils "^3.0.0"
     eslint-visitor-keys "^3.1.0"
-    espree "^9.2.0"
+    espree "^9.3.0"
     esquery "^1.4.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
@@ -2733,12 +2733,12 @@ eslint@~8.5.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-espree@^9.2.0:
+espree@^9.2.0, espree@^9.3.0:
-  version "9.2.0"
+  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.2.0.tgz#c50814e01611c2d0f8bd4daa83c369eabba80dbc"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.0.tgz#c1240d79183b72aaee6ccfa5a90bc9111df085a8"
-  integrity sha512-oP3utRkynpZWF/F2x/HZJ+AGtnIclaR7z1pYPxy7NYM2fSO6LgK/Rkny8anRSPK/VwEA1eqm2squui0T7ZMOBg==
+  integrity sha512-d/5nCsb0JcqsSEeQzFZ8DH1RmxPcglRWh24EFTlUEmCKoehXGdpsx0RkHDubqUI8LSAIKMQp4r9SzQ3n+sm4HQ==
   dependencies:
-    acorn "^8.6.0"
+    acorn "^8.7.0"
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^3.1.0"