Fix CSS in production bugs (#32)

Author: NigelBreslaw

REUSE.toml

@@ -18,15 +18,14 @@ SPDX-License-Identifier = "Apache-2.0"
 [[annotations]]
 path = [
   "docs/**.json",
-  "docs/src/styles/**.css",
+  "docs/src/assets/styles/**.css",
   "docs/src/assets/**.svg",
   "docs/src/assets/**.webp",
   ".gitignore",
   "docs/pnpm-lock.yaml",
   "docs/src/assets/favicons/apple-touch-icon.png",
   "docs/src/assets/favicons/favicon.ico",
   "docs/src/assets/images/Components.png",
-  "docs/src/assets/styles/tailwind.css",
   "docs/src/config.yaml",
 ]
 precedence = "aggregate"

docs/astro.config.ts

@@ -66,7 +66,10 @@ export default defineConfig({
             logo: {
                 src: "./src/assets/slint-logo-small-light.svg",
             },
-            customCss: ["./src/styles/custom.css", "./src/styles/theme.css"],
+            customCss: [
+                "./src/assets/styles/custom.css",
+                "./src/assets/styles/theme.css",
+            ],
 
             components: {
                 Footer: "./src/components/Footer.astro",

docs/src/styles/custom.css renamed to docs/src/assets/styles/custom.css

@@ -55,18 +55,18 @@
     --sl-color-bg: #1b1b1f;
     --sl-color-hairline: #212329;
     --sl-color-hairline-shade: var(--sl-color-hairline);
-    --badge-border-color: --sl-color-hairline;
+    --badge-border-color: var(--sl-color-hairline);
     --slint-code-background: #151517;
 
-    .screenshot-container {
-        background-color: #cdcdcd;
-    }
-
     --sl-color-accent-low: hsl(228, 70%, 30%);
     --sl-color-accent: hsl(228, 100%, 70%);
     --sl-color-accent-high: hsl(228, 90%, 85%);
 }
 
+.screenshot-container {
+    background-color: #cdcdcd;
+}
+
 /* Light mode colors. */
 :root[data-theme="light"] {
     --sl-text-h3: var(--sl-text-2xl);
@@ -76,16 +76,17 @@
     --sl-color-hairline: #edeef3;
     --slint-code-background: #f6f6f7;
 
-    .screenshot-container {
-        background-color: whitesmoke;
-    }
-
     --sl-color-accent-high: hsl(222, 80%, 35%);
     --sl-color-accent: hsl(222, 89%, 55%);
     --sl-color-accent-low: hsl(222, 89%, 85%);
-    .site-title {
-        color: #000;
-    }
+}
+
+:root[data-theme="light"] .site-title {
+    color: #000;
+}
+
+:root[data-theme="light"] .screenshot-container {
+    background-color: whitesmoke;
 }
 
 .hero {
@@ -101,7 +102,6 @@
 
 .site-title {
     font-size: 1.3rem;
-    color: #fff;
     margin-top: -4px;
 }
 
@@ -124,8 +124,6 @@ span {
     color: var(--sl-color-orange-high);
 }
 
-.sl-markdown-content {
-    .slint-property {
-        margin-top: 0.1rem;
-    }
+.sl-markdown-content .slint-property {
+    margin-top: 0.1rem;
 }

docs/src/assets/styles/theme.css

@@ -0,0 +1,32 @@
+theme-switcher {
+    align-items: center;
+}
+.theme-selector-light,
+.theme-selector-dark {
+    user-select: none;
+    z-index: 999999;
+    position: relative;
+    cursor: pointer;
+}
+.theme-selector-light:hover,
+.theme-selector-dark:hover {
+    color: var(--sl-color-accent-high);
+}
+
+.theme-selector-light {
+    display: none;
+}
+.theme-selector-dark {
+    display: inline-block;
+}
+
+:root[data-theme="light"] .theme-selector-light {
+    display: inline-block;
+}
+:root[data-theme="light"] .theme-selector-dark {
+    display: none;
+}
+:root[data-theme="light"] .theme-selector-light:hover,
+:root[data-theme="light"] .theme-selector-dark:hover {
+    color: var(--sl-color-accent);
+}