Various improvements

- new mono font
- copy updates
- simpler logic for header section

assets/css/screen.css

@@ -65,8 +65,7 @@ production stylesheet in assets/built/screen.css
     --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     --font-serif: "EB Garamond", Georgia, Times, serif;
     --font-serif-alt: Georgia, Times, serif;
-    --font-slab: "Roboto Slab", Georgia, Times, serif;
-    --font-mono: Menlo, Courier, monospace;
+    --font-mono: "JetBrains Mono", Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
     --container-width: 1320px;
     --container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
     --grid-gap: 42px;
@@ -112,11 +111,20 @@ production stylesheet in assets/built/screen.css
 }
 
 @font-face {
-    font-family: "Roboto Slab";
+    font-family: "JetBrains Mono";
     font-style: normal;
-    font-weight: 100 900;
+    font-weight: 100 800;
     font-display: swap;
-    src: url(/assets/fonts/roboto-slab-roman.woff2) format("woff2");
+    src: url(/assets/fonts/jetbrains-mono-roman.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: "JetBrains Mono";
+    font-style: italic;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(/assets/fonts/jetbrains-mono-italic.woff2) format("woff2");
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -279,7 +287,7 @@ button.gh-form-input {
     color: rgb(0 0 0 / 0.3);
 }
 
-:is(.has-serif-title, .has-slab-title) .gh-form-input {
+:is(.has-serif-title, .has-mono-title) .gh-form-input {
     padding-inline: 20px;
 }
 
@@ -315,7 +323,7 @@ button.gh-form-input {
     cursor: pointer;
 }
 
-:is(.has-serif-title,.has-slab-title) button.gh-form-input {
+:is(.has-serif-title,.has-mono-title) button.gh-form-input {
     padding-inline-start: 50px;
 }
 
@@ -335,7 +343,7 @@ button.gh-form-input {
     color: var(--color-secondary-text);
 }
 
-:is(.has-serif-title,.has-slab-title) .gh-form > svg {
+:is(.has-serif-title,.has-mono-title) .gh-form > svg {
     left: 16px;
 }
 
@@ -975,6 +983,7 @@ Search                         LOGO                    Login Subscribe
     display: flex;
     gap: 4px;
     flex-wrap: wrap;
+    padding-bottom: 1px;
     font-size: 1.25rem;
     font-weight: 500;
     line-height: 1.05;
@@ -1686,7 +1695,7 @@ Search                         LOGO                    Login Subscribe
     border-bottom: 1px solid var(--color-border);
 }
 
-.gh-container-title:has(+ .gh-main:not(:has(.gh-card))) {
+.gh-container:not(:has(.gh-card)) .gh-container-title {
     display: none;
 }
 
@@ -2193,8 +2202,8 @@ unless a heading is the very first element in the post content */
     font-family: var(--font-serif);
 }
 
-.has-slab-title .kg-toggle-card .kg-toggle-heading-text {
-    font-family: var(--font-slab);
+.has-mono-title .kg-toggle-card .kg-toggle-heading-text {
+    font-family: var(--font-mono);
 }
 
 /* Callout */
@@ -2232,8 +2241,8 @@ blockquote.kg-blockquote-alt {
     font-family: var(--font-serif);
 }
 
-.has-slab-title .kg-card.kg-header-card h2.kg-header-card-header {
-    font-family: var(--font-slab);
+.has-mono-title .kg-card.kg-header-card h2.kg-header-card-header {
+    font-family: var(--font-mono);
 }
 
 .has-serif-body .kg-header-card h3.kg-header-card-subheader {
@@ -2287,8 +2296,8 @@ blockquote.kg-blockquote-alt {
     font-family: var(--font-serif);
 }
 
-.has-slab-title .kg-product-card.kg-card .kg-product-card-title {
-    font-family: var(--font-slab);
+.has-mono-title .kg-product-card.kg-card .kg-product-card-title {
+    font-family: var(--font-mono);
 }
 
 .has-serif-body .kg-product-card-description :is(p, ul, ol) {
@@ -2466,7 +2475,7 @@ figcaption a {
     --factor: 1.15;
 }
 
-.has-slab-title {
+.has-mono-title {
     --factor: 1.1;
 }
 
@@ -2479,9 +2488,8 @@ figcaption a {
     font-weight: 550;
 }
 
-.has-slab-title :is(.is-title, .gh-content :is(h2, h3)) {
-    font-family: var(--font-slab);
-    font-weight: 650;
+.has-mono-title :is(.is-title, .gh-content :is(h2, h3)) {
+    font-family: var(--font-mono);
 }
 
 .has-sans-body .is-body {
@@ -2497,7 +2505,7 @@ figcaption a {
     letter-spacing: -0.015em;
 }
 
-.has-slab-title .gh-header.is-classic .gh-header-title {
+.has-mono-title .gh-header.is-classic .gh-header-title {
     letter-spacing: -0.01em;
 }
 
@@ -2515,7 +2523,7 @@ figcaption a {
     font-size: calc(1.6rem*var(--factor, 1))
 }
 
-.has-slab-title .gh-featured-feed .gh-card-title {
+.has-mono-title .gh-featured-feed .gh-card-title {
     font-size: calc(1.5rem*var(--factor, 1));
     letter-spacing: 0;
 }
@@ -2524,12 +2532,12 @@ figcaption a {
     font-size: clamp(1.6rem, 0.23vw + 1.51rem, 1.8rem);
 }
 
-.has-slab-title .gh-card-title {
+.has-mono-title .gh-card-title {
     font-size: calc(1.8rem*var(--factor, 1));
 }
 
-.has-slab-title .gh-header.gh-header.is-highlight .gh-card-title,
-.has-slab-title .gh-header.gh-header.gh-header.is-magazine .gh-card-title {
+.has-mono-title .gh-header.gh-header.is-highlight .gh-card-title,
+.has-mono-title .gh-header.gh-header.gh-header.is-magazine .gh-card-title {
     line-height: 1.15;
 }
 
@@ -2583,12 +2591,12 @@ figcaption a {
     border-radius: 0;
 }
 
-.has-slab-title :is(.gh-button) {
-    border-radius: 6px;
+.has-mono-title :is(.gh-button) {
+    border-radius: 0;
 }
 
-.has-slab-title :is(.gh-form) {
-    border-radius: 8px;
+.has-mono-title :is(.gh-form) {
+    border-radius: 0;
 }
 
 .has-serif-title .gh-cta-title {
@@ -2599,7 +2607,7 @@ figcaption a {
 /* ---------------------------------------------------------- */
 
 .gh-footer {
-    margin-top: 6vw;
+    margin-top: 12vw;
     font-size: 1.5rem;
     color: var(--color-darker-gray);
 }