[wip] new rgb guide

assets/css/style.css

@@ -10,17 +10,22 @@ body {
   font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
 
   text-align: left;
+  line-height: 1.4;
 
   /* 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;
+  --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 */
-    background-color: #1b1b1b;
-    color: #ebebeb;
+    --bg-color: #1b1b1b;
+    --fg-color: #ebebeb;
+    --accent-color: var(--accent-color-dark);
   }
 }
 
@@ -40,12 +45,12 @@ img {
 
 
 a:link, a:visited {
-  color: var(--accent-color-light);
-  @media (prefers-color-scheme: dark) {
-    color: var(--accent-color-dark);
-  }
+  color: var(--accent-color);
 }
 
+u {
+  text-decoration-color: var(--accent-color);
+}
 
 .title {
   text-align: center;
@@ -60,3 +65,123 @@ a:link, a:visited {
 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;
+  }
+}
+
+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;
+}