+
diff --git a/src/style.css b/src/style.css
index ebb0471584..980d92ef77 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,11 @@
+/**
+ * IMPORTANT
+ *
+ * Some of these styles are duplicated in the `web/index.html` and
+ * `bskyweb/templates/base.html` files. Depending on what you're updating, you
+ * may need to touch all three. Ask Eric if you aren't sure.
+ */
+
@font-face {
font-family: 'Inter-Regular';
src: local('Inter-Regular'),
@@ -96,46 +104,43 @@
*/
/**
- * Extend the react-native-web reset:
- * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
+ * BEGIN STYLES
+ *
+ * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
*/
-html,
-body,
-#root {
- width: 100%;
- /* To smooth any scrolling behavior */
- -webkit-overflow-scrolling: touch;
- margin: 0px;
- padding: 0px;
- /* Allows content to fill the viewport and go beyond the bottom */
- min-height: 100%;
+:root {
+ --text: black;
+ --background: white;
+ --backgroundLight: hsl(211, 20%, 95%);
}
-#root {
- flex-shrink: 0;
- flex-basis: auto;
- flex-grow: 1;
- display: flex;
- flex: 1;
+@media (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: dark;
+ --text: white;
+ --background: black;
+ --backgroundLight: hsl(211, 20%, 20%);
+ }
}
-html {
- /* 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%;
- height: calc(100% + env(safe-area-inset-top));
- scrollbar-gutter: stable both-edges;
+html.theme--light {
+ --text: black;
+ --background: white;
+ --backgroundLight: hsl(211, 20%, 95%);
+ background-color: white;
}
-html,
-body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
- 'Liberation Sans', Helvetica, Arial, sans-serif;
+html.theme--dark {
+ color-scheme: dark;
+ background-color: black;
+ --text: white;
+ --background: black;
+ --backgroundLight: hsl(211, 20%, 20%);
}
-
-#preload {
- width: 100px;
- position: fixed;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
+html.theme--dim {
+ color-scheme: dark;
+ background-color: hsl(211, 28%, 12%);
+ --text: white;
+ --background: hsl(211, 20%, 4%);
+ --backgroundLight: hsl(211, 20%, 10%);
}
/* Buttons and inputs have a font set by UA, so we'll have to reset that */
@@ -146,42 +151,6 @@ textarea {
line-height: inherit;
}
-/* Color theming */
-/* Default will always be white */
-:root {
- --text: black;
- --background: white;
- --backgroundLight: hsl(211, 20%, 95%);
-}
-/* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */
-@media (prefers-color-scheme: dark) {
- :root {
- --text: white;
- --background: black;
- --backgroundLight: hsl(211, 20%, 20%);
- color-scheme: dark;
- }
-}
-
-/* Overwrite those preferences with the selected theme */
-html.theme--light {
- --text: black;
- --background: white;
- --backgroundLight: hsl(211, 20%, 95%);
-}
-html.theme--dark {
- --text: white;
- --background: black;
- --backgroundLight: hsl(211, 20%, 20%);
- color-scheme: dark;
-}
-html.theme--dim {
- --text: white;
- --background: hsl(211, 20%, 4%);
- --backgroundLight: hsl(211, 20%, 10%);
- color-scheme: dark;
-}
-
/* Remove autofill styles on Webkit */
input:autofill,
input:-webkit-autofill,
@@ -200,19 +169,6 @@ input::-webkit-date-and-time-value {
text-align: left;
}
-body {
- display: flex;
- /* Allows you to scroll below the viewport; default value is visible */
- overflow-y: auto;
- overscroll-behavior-y: none;
- text-rendering: optimizeLegibility;
- background-color: var(--background);
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -ms-overflow-style: scrollbar;
- font-synthesis-weight: none;
-}
-
/* Remove default link styling */
a {
color: inherit;
diff --git a/web/index.html b/web/index.html
index 512178327f..71e5ac0892 100644
--- a/web/index.html
+++ b/web/index.html
@@ -36,6 +36,53 @@
-->
+
+
@@ -90,7 +137,7 @@