[wip] new rgb guide

assets/css/style.css

@@ -1,12 +1,15 @@
-:root {
+@layer base, per-site;
+
+@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;
-}
+  }
 
-body {
+  body {
     font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
 
     text-align: left;
@@ -27,50 +30,49 @@ body {
       --fg-color: #ebebeb;
       --accent-color: var(--accent-color-dark);
     }
-}
+  }
 
-.container {
+  .container {
     max-width: 600px;
     margin: 0 auto;
     padding: 0 5px;
-}
+  }
 
-footer {
+  footer {
     margin-top: 4rem;
-}
+  }
 
-img {
+  img {
     width: 100%;
-}
+  }
 
-
+  a:link, a:visited {
-a:link, a:visited {
     color: var(--accent-color);
-}
+  }
 
-u {
+  u {
     text-decoration-color: var(--accent-color);
-}
+  }
 
-.title {
+  .title {
     text-align: center;
-}
+  }
 
-.hero-img {
+  .hero-img {
     max-width: 500px;
     display: block;
     margin: 0 auto;
-}
+  }
 
-p.bigger {
+  p.bigger {
     font-size: 1.2rem;
-}
+  }
 
-section {
+  section {
     margin-top: 3rem;
-}
+  }
 
-details {
+  details {
     border: 1px solid var(--accent-color);
     border-radius: 8px;
     background-color: color-mix(in hsl, var(--accent-color) 20%, var(--bg-color) 80%);
@@ -89,99 +91,5 @@ details {
       margin-left: 0;
       margin-right: 0;
     }
-}
-
-ol.step-by-step-instructions {
-  margin-top: 1rem;
-
-  li {
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-
-    &::marker {
-      color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
-      font-size: larger;
-    }
-
-    &>div {
-      display: flex;
-      flex-direction: row;
-      gap: 1ch;
-      justify-content: space-between;
-    }
-
-    input[type="checkbox"] {
-      margin: 4px;
-      width: 2rem;
-      height: 2rem;
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
   }
 }
-
-dl.key-value {
-  display: grid;
-  grid-template-columns: 2ch [keys] fit-content(30ch) [values] auto;
-  column-gap: 2ch;
-  row-gap: 0.2rem;
-
-  &>dt {
-    text-decoration-line: underline;
-    text-decoration-color: var(--accent-color);
-    grid-column-start: keys;
-    text-align: end;
-  }
-  &>dd {
-    margin-left: 0;
-    grid-column-start: values;
-    &::before {
-      content: "➡";
-      margin-right: 2ch;
-      color: color-mix(in hsl, var(--bg-color) 30%, var(--fg-color) 70%);
-    }
-  }
-}
-
-fieldset#detail-grade-picker {
-  border-color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
-  display: flex;
-  align-items: baseline;
-
-  label {
-    flex-grow: 1;
-    margin-left: 0.5ch;
-  }
-
-  input,label {
-    cursor: pointer;
-  }
-
-  /* input[type="radio"]:checked+label {
-    text-decoration-line: underline;
-    text-decoration-color: var(--accent-color);
-  } */
-}
-
-
-/* hide items with .detail-default-hide if the corresponding .detail-show-(all|simplified|short) is not currently active */
-body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked)) .detail-default-hide.detail-show-all {
-  display: none;
-}
-body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked)) .detail-default-hide.detail-show-simplified {
-  display: none;
-}
-body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked)) .detail-default-hide.detail-show-short {
-  display: none;
-}
-
-/* hide items with .detail-hide-(all|simplified|short) if the corresponding radio button is active */
-body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked) .detail-hide-all {
-  display: none;
-}
-body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked) .detail-hide-simplified {
-  display: none;
-}
-body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked) .detail-hide-short {
-  display: none;
-}

index.html

@@ -10,6 +10,7 @@
     <style>
       /* site-specific styles */
 
+      @layer per-site {
         .resources-container {
           display: flex;
           flex-wrap: wrap;
@@ -38,6 +39,7 @@
             }
           }
         }
+      }
     </style>
   </head>
   <body class="container">

rgb-ears-39c3.html

@@ -5,6 +5,105 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="assets/css/style.css" />
     <title>c3cat</title>
+
+    <style>
+    @layer per-site {
+      ol.step-by-step-instructions {
+        margin-top: 1rem;
+
+        li {
+          margin-top: 0.5rem;
+          margin-bottom: 1rem;
+
+          &::marker {
+            color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
+            font-size: larger;
+          }
+
+          &>div {
+            display: flex;
+            flex-direction: row;
+            gap: 1ch;
+            justify-content: space-between;
+          }
+
+          input[type="checkbox"] {
+            margin: 4px;
+            width: 2rem;
+            height: 2rem;
+            flex-shrink: 0;
+            flex-grow: 0;
+          }
+        }
+      }
+
+      dl.key-value {
+        display: grid;
+        grid-template-columns: 2ch [keys] fit-content(30ch) [values] auto;
+        column-gap: 2ch;
+        row-gap: 0.2rem;
+
+        &>dt {
+          text-decoration-line: underline;
+          text-decoration-color: var(--accent-color);
+          grid-column-start: keys;
+          text-align: end;
+        }
+        &>dd {
+          margin-left: 0;
+          grid-column-start: values;
+          &::before {
+            content: "➡";
+            margin-right: 2ch;
+            color: color-mix(in hsl, var(--bg-color) 30%, var(--fg-color) 70%);
+          }
+        }
+      }
+
+      fieldset#detail-grade-picker {
+        border-color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
+        display: flex;
+        align-items: baseline;
+
+        label {
+          flex-grow: 1;
+          margin-left: 0.5ch;
+        }
+
+        input,label {
+          cursor: pointer;
+        }
+
+        /* input[type="radio"]:checked+label {
+          text-decoration-line: underline;
+          text-decoration-color: var(--accent-color);
+        } */
+      }
+
+
+      /* hide items with .detail-default-hide if the corresponding .detail-show-(all|simplified|short) is not currently active */
+      body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked)) .detail-default-hide.detail-show-all {
+        display: none;
+      }
+      body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked)) .detail-default-hide.detail-show-simplified {
+        display: none;
+      }
+      body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked)) .detail-default-hide.detail-show-short {
+        display: none;
+      }
+
+      /* hide items with .detail-hide-(all|simplified|short) if the corresponding radio button is active */
+      body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked) .detail-hide-all {
+        display: none;
+      }
+      body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked) .detail-hide-simplified {
+        display: none;
+      }
+      body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked) .detail-hide-short {
+        display: none;
+      }
+    }
+    </style>
   </head>
   <body class="container">
     <main>
@@ -18,7 +117,7 @@
       <section id="introduction">
         <fieldset id="detail-grade-picker">
           <legend>Choose the grade of details you want this guide to appear in</legend>
-          <input type="radio" id="detail-picker-all" name="detail-grade-picker" value="all">
+          <input type="radio" id="detail-picker-all" name="detail-grade-picker" value="all" checked>
           <label for="detail-picker-all">Show everything</label>
 
           <input type="radio" id="detail-picker-simplified" name="detail-grade-picker" value="simplified">