[wip] new rgb guide

assets/css/style.css

@@ -1,62 +1,95 @@
-:root {
-  /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
-  --accent-color-light: #DC049B;
-  /* A modified version of accent-color-light, which works nicely as a link color
-   * and with the dark theme */
-  --accent-color-dark: #dc49b0;
-}
+@layer base, per-site;
 
-body {
-  font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
+@layer base {
+  :root {
+    /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
+    --accent-color-light: #DC049B;
+    /* A modified version of accent-color-light, which works nicely as a link color
+     * and with the dark theme */
+    --accent-color-dark: #dc49b0;
+  }
 
-  text-align: left;
+  body {
+    font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
 
-  /* Use dark grey instead of black to be lighter on the eyes. But also a grey
-   * which still works with the link color nicely. */
-  background-color: #ffffff;
-  color: #2B2B2B;
+    text-align: left;
+    line-height: 1.4;
 
-  @media (prefers-color-scheme: dark) {
-    /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
-    /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
-    background-color: #1b1b1b;
-    color: #ebebeb;
+    /* Use dark grey instead of black to be lighter on the eyes. But also a grey
+     * which still works with the link color nicely. */
+    --bg-color: #ffffff;
+    --fg-color: #2b2b2b;
+    --accent-color: var(--accent-color-light);
+    background-color: var(--bg-color);
+    color: var(--fg-color);
+
+    @media (prefers-color-scheme: dark) {
+      /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
+      /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
+      --bg-color: #1b1b1b;
+      --fg-color: #ebebeb;
+      --accent-color: var(--accent-color-dark);
+    }
+  }
+
+  .container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 5px;
+  }
+
+  footer {
+    margin-top: 4rem;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  a:link, a:visited {
+    color: var(--accent-color);
+  }
+
+  u {
+    text-decoration-color: var(--accent-color);
+  }
+
+  .title {
+    text-align: center;
+  }
+
+  .hero-img {
+    max-width: 500px;
+    display: block;
+    margin: 0 auto;
+  }
+
+  p.bigger {
+    font-size: 1.2rem;
+  }
+
+  section {
+    margin-top: 3rem;
+  }
+
+  details {
+    border: 1px solid var(--accent-color);
+    border-radius: 8px;
+    background-color: color-mix(in hsl, var(--accent-color) 20%, var(--bg-color) 80%);
+
+    & > * {
+      padding: 0.5rem 1ch;
+    }
+
+    & > summary {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    &[open] > summary {
+      border-bottom: 1px solid var(--accent-color);
+      margin-left: 0;
+      margin-right: 0;
+    }
   }
 }
-
-.container {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 0 5px;
-}
-
-footer {
-  margin-top: 4rem;
-}
-
-img {
-  width: 100%;
-}
-
-
-a:link, a:visited {
-  color: var(--accent-color-light);
-  @media (prefers-color-scheme: dark) {
-    color: var(--accent-color-dark);
-  }
-}
-
-
-.title {
-  text-align: center;
-}
-
-.hero-img {
-  max-width: 500px;
-  display: block;
-  margin: 0 auto;
-}
-
-p.bigger {
-  font-size: 1.2rem;
-}