From 32405244fb3f7c56c27ecc7ecdd93eb7676599af Mon Sep 17 00:00:00 2001
From: David Oliver <david@doliver.co.uk>
Date: Sun, 1 Mar 2026 22:39:51 +0100
Subject: [PATCH] Fix content container scrolling in older versions of Safari

It seems the 'content' CSS container being placed on the
absolutely-positioned, 100% height 'main' element results in a lack of
vertical scrolling in Safari 17.6. The container was placed on the
'main' element to allow setting of --hX-size custom properties of the
.content-inner element based on a size query using said element. Here,
we move the container back to .content-inner and directly use the font
size values themselves in the relevant rules.

Also removes outdated comment related to headings.

Fixes #2207
---
 assets/css/content/general.css | 33 ++++++++++++++++-----------------
 assets/css/layout.css          |  9 +--------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/assets/css/content/general.css b/assets/css/content/general.css
index 9d2d36b34..402363539 100644
--- a/assets/css/content/general.css
+++ b/assets/css/content/general.css
@@ -71,35 +71,26 @@
   font-weight: 400;
 }
 
-/* Headings
-Summary, Callbacks and Functions sections output h1 and h2,
-which we style as h2 and h3. */
 .content-inner {
-  --h1-size: 1.5rem;
-  --h2-size: 1.35rem;
-  --h3-size: 1.25rem;
-  --h4-h5-size: 1.15rem;
-  --h6-size: 1rem;
-
   & h1 {
-    font-size: var(--h1-size);
+    font-size: 1.5rem;
     margin-top: 1.75em;
   }
 
   & h2 {
-    font-size: var(--h2-size);
+    font-size: 1.35rem;
     margin-top: 1.5em;
     margin-bottom: 0.5em;
   }
 
   & h3 {
-    font-size: var(--h3-size);
+    font-size: 1.25rem;
     margin-top: 1.5em;
     margin-bottom: 0.5em;
   }
 
   & :is(h4, h5, h6) {
-    font-size: var(--h4-h5-size);
+    font-size: 1.15rem;
     margin-top: 1.25em;
     margin-bottom: 0.5em;
   }
@@ -109,14 +100,22 @@ which we style as h2 and h3. */
   }
 
   & h6 {
-    font-size: var(--h6-size);
+    font-size: 1rem;
   }
 }
 @container content (width > 600px) {
   .content-inner {
-    --h1-size: 2rem;
-    --h2-size: 1.75rem;
-    --h3-size: 1.45rem;
+    & h1 {
+      font-size: 2rem;
+    }
+
+    & h2 {
+      font-size: 1.75rem;
+    }
+
+    & h3 {
+      font-size: 1.45rem;
+    }
   }
 }
 
diff --git a/assets/css/layout.css b/assets/css/layout.css
index 27c52e997..de51b1ced 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -1,11 +1,3 @@
-/* Layout container contexts */
-
-#main {
-  container: content / inline-size;
-}
-
-/* Layout styles */
-
 html,
 body {
   box-sizing: border-box;
@@ -70,6 +62,7 @@ body {
 }
 
 .content .content-inner {
+  container: content / inline-size;
   max-width: var(--content-width);
   min-height: 100%;
   margin: 0 auto;