From 61e004e3ac7c7a04ac8b9fa646b7cba166a91738 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 23 Sep 2024 14:19:24 -0500 Subject: [PATCH] Untangle base styles --- bskyweb/templates/base.html | 38 ++++++++++++++++----------------- src/alf/themes.ts | 1 + src/style.css | 42 +++++++------------------------------ web/index.html | 36 +++++++++++++++---------------- 4 files changed, 46 insertions(+), 71 deletions(-) diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 2c233a4c2d..74d0422259 100644 --- a/bskyweb/templates/base.html +++ b/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; diff --git a/src/alf/themes.ts b/src/alf/themes.ts index 9f7ec5c673..7779dd46d7 100644 --- a/src/alf/themes.ts +++ b/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', diff --git a/src/style.css b/src/style.css index 6ef2454995..980d92ef77 100644 --- a/src/style.css +++ b/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 */ diff --git a/web/index.html b/web/index.html index d26c656046..71e5ac0892 100644 --- a/web/index.html +++ b/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;