+
diff --git a/src/style.css b/src/style.css
index ebb047158..980d92ef7 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,90 +104,51 @@
*/
/**
- * 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 {
- flex-shrink: 0;
- flex-basis: auto;
- flex-grow: 1;
- display: flex;
- flex: 1;
-}
-
-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,
-body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
- 'Liberation Sans', Helvetica, Arial, sans-serif;
-}
-
-#preload {
- width: 100px;
- position: fixed;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
-}
-
-/* Buttons and inputs have a font set by UA, so we'll have to reset that */
-button,
-input,
-textarea {
- font: inherit;
- 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 {
+ color-scheme: dark;
--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%);
+ 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;
+}
+
+/* Buttons and inputs have a font set by UA, so we'll have to reset that */
+button,
+input,
+textarea {
+ font: inherit;
+ line-height: inherit;
}
/* Remove autofill styles on Webkit */
@@ -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 512178327..71e5ac089 100644
--- a/web/index.html
+++ b/web/index.html
@@ -36,6 +36,53 @@
-->
+
+
@@ -90,7 +137,7 @@