Untangle base styles

bskyweb/templates/base.html

@@ -38,38 +38,38 @@
      *
      * ALL OTHER STYLES BELONG IN `src/style.css`
      *
-     * THIS NEEDS TO BE DUPLICATED IN `web/index.html`
+     * THIS NEEDS TO BE DUPLICATED IN `bskyweb/templates/base.html`
      */
-    :root {
-      --background: white;
+    html {
+      background-color: white;
+      scrollbar-gutter: stable both-edges;
     }
     @media (prefers-color-scheme: dark) {
-      :root {
-        color-scheme: dark;
-        --background: black;
+      html {
+        background-color: black;
       }
     }
-    html {
-      height: calc(100% + env(safe-area-inset-top));
-      scrollbar-gutter: stable both-edges;
+    html,
+    body {
+      margin: 0px;
+      padding: 0px;
+      font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
+      text-rendering: optimizeLegibility;
+      /* Platform-specific reset */
+      -webkit-overflow-scrolling: touch;
+      -webkit-text-size-adjust: 100%;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -ms-overflow-style: scrollbar;
+      font-synthesis-weight: none;
     }
     html,
     body,
     #root {
       display: flex;
       flex: 1 0 auto;
-      width: 100%;
-      margin: 0px;
-      padding: 0px;
       min-height: 100%;
-      font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
-      background-color: var(--background);
-
-      -webkit-overflow-scrolling: touch;
-      /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
-      -webkit-text-size-adjust: 100%;
     }
-
     #splash {
       position: fixed;
       width: 100px;

src/alf/themes.ts

@@ -303,6 +303,7 @@ export function createThemes({
     negative_950: `hsl(${hues.negative}, 91%, ${dimScale[12]}%)`,
     negative_975: `hsl(${hues.negative}, 91%, ${dimScale[13]}%)`,
   } as const
+  console.log(dimPalette)
 
   const light: Theme = {
     name: 'light',

src/style.css

@@ -104,7 +104,9 @@
 */
 
 /**
- * BEGIN STYLE
+ * BEGIN STYLES
+ *
+ * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
  */
 :root {
   --text: black;
@@ -120,53 +122,25 @@
   }
 }
 
-html {
-  height: calc(100% + env(safe-area-inset-top));
-  scrollbar-gutter: stable both-edges;
-}
-html,
-body,
-#root {
-  display: flex;
-  flex: 1 0 auto;
-  width: 100%;
-  margin: 0px;
-  padding: 0px;
-  min-height: 100%;
-  font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
-  background-color: var(--background);
-
-  /* Platform-specific */
-  -webkit-overflow-scrolling: touch;
-  /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
-  -webkit-text-size-adjust: 100%;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -ms-overflow-style: scrollbar;
-  font-synthesis-weight: none;
-}
 html.theme--light {
   --text: black;
   --background: white;
   --backgroundLight: hsl(211, 20%, 95%);
+  background-color: white;
 }
 html.theme--dark {
+  color-scheme: dark;
+  background-color: black;
   --text: white;
   --background: black;
   --backgroundLight: hsl(211, 20%, 20%);
-  color-scheme: dark;
 }
 html.theme--dim {
+  color-scheme: dark;
+  background-color: hsl(211, 28%, 12%);
   --text: white;
   --background: hsl(211, 20%, 4%);
   --backgroundLight: hsl(211, 20%, 10%);
-  color-scheme: dark;
-}
-body {
-  overflow-y: auto;
-  overscroll-behavior-y: none;
 }
 
 /* Buttons and inputs have a font set by UA, so we'll have to reset that */

web/index.html

@@ -45,36 +45,36 @@
        *
        * THIS NEEDS TO BE DUPLICATED IN `bskyweb/templates/base.html`
        */
-      :root {
-        --background: white;
+      html {
+        background-color: white;
+        scrollbar-gutter: stable both-edges;
       }
       @media (prefers-color-scheme: dark) {
-        :root {
-          color-scheme: dark;
-          --background: black;
+        html {
+          background-color: black;
         }
       }
-      html {
-        height: calc(100% + env(safe-area-inset-top));
-        scrollbar-gutter: stable both-edges;
+      html,
+      body {
+        margin: 0px;
+        padding: 0px;
+        font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
+        text-rendering: optimizeLegibility;
+        /* Platform-specific reset */
+        -webkit-overflow-scrolling: touch;
+        -webkit-text-size-adjust: 100%;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -ms-overflow-style: scrollbar;
+        font-synthesis-weight: none;
       }
       html,
       body,
       #root {
         display: flex;
         flex: 1 0 auto;
-        width: 100%;
-        margin: 0px;
-        padding: 0px;
         min-height: 100%;
-        font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
-        background-color: var(--background);
-
-        -webkit-overflow-scrolling: touch;
-        /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
-        -webkit-text-size-adjust: 100%;
       }
-
       #splash {
         position: fixed;
         width: 100px;