Fix invisible scrollbars on webkit.org

https://bugs.webkit.org/show_bug.cgi?id=270528 Reviewed by Timothy Hatcher. * Websites/webkit.org/wp-content/themes/webkit/header.php: * Websites/webkit.org/wp-content/themes/webkit/style.css: (:root): (@media(prefers-color-scheme:dark) :root): (body): (header): (footer): Canonical link: https://commits.webkit.org/275701@main
WebKit · Mar 5, 2024 · 0960edb · 0960edb
1 parent b87dc9e
commit 0960edb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/Websites/webkit.org/wp-content/themes/webkit/header.php b/Websites/webkit.org/wp-content/themes/webkit/header.php
@@ -5,6 +5,7 @@
     <meta name="robots" content="noodp">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover">
+    <meta name="theme-color" content="hsl(203.6, 100%, 12%)">
 
     <title><?php if ( is_front_page() ) echo "WebKit";
         else { wp_title(''); echo ' | WebKit'; } ?></title>

diff --git a/Websites/webkit.org/wp-content/themes/webkit/style.css b/Websites/webkit.org/wp-content/themes/webkit/style.css
@@ -8,7 +8,6 @@ Version: 1.0
 */
 
 :root {
-    --background-color: hsl(203.6, 100%, 12%);
     --link-color: hsl(200, 100%, 40%);
     --text-color: hsl(0, 0%, 20%);
     --text-color-light: hsl(0, 0%, 87%);
@@ -19,6 +18,7 @@ Version: 1.0
     --inverse-link-color: hsl(206.7, 100%, 70%);
 
     --content-background-color: hsl(0, 0%, 96.9%);
+    --header-background-color: hsl(203.6, 100%, 12%);
     --horizontal-rule-color: hsl(0, 0%, 86.7%);
 
     --code-background-color: hsl(0, 0%, 94.9%);
@@ -128,7 +128,6 @@ Version: 1.0
 
 @media(prefers-color-scheme:dark) {
     :root {
-        --background-color: hsl(203.6, 100%, 12%);
         --link-color: hsl(206.7, 100%, 70%);
         --text-color: hsl(240, 1.3%, 84.5%);
         --text-color-light: hsl(0, 0%, 33.3%);
@@ -139,6 +138,7 @@ Version: 1.0
         --inverse-link-color: hsl(206.7, 100%, 70%);
 
         --content-background-color: hsl(120, 2%, 9%);
+        --header-background-color: hsl(203.6, 100%, 12%);
         --horizontal-rule-color: hsl(0, 0%, 33.3%);
 
         --code-background-color: hsl(120, 1%, 19.4%);
@@ -281,7 +281,7 @@ body {
     line-height: 1.52947;
     letter-spacing: -0.021rem;
     background-color: hsl(203.6, 100%, 12%);
-    background-color: var(--background-color);
+    background-color: var(--content-background-color);
     color: hsl(0, 0%, 20%);
     color: var(--text-color);
 }
@@ -505,6 +505,7 @@ input[type=submit] {
 
 /** Header **/
 header {
+    background-color: var(--header-background-color);
     overflow: visible;
     width: 100vw;
     max-width: 100%;
@@ -739,6 +740,8 @@ a.download {
 
 /** Footer **/
 footer {
+    background-color: var(--header-background-color);
+    box-shadow: 0 100vh 0 100vh var(--header-background-color);
     content: "";
     display: table;
     clear: both;