diff --git a/assets/css/style.css b/assets/css/style.css
index a12b283..7df0fb6 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,95 +1,187 @@
-@layer base, per-site;
+: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 {
- :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 {
+ 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. */
+ --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;
}
- 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. */
- --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);
- }
+ & > summary {
+ cursor: pointer;
+ user-select: none;
}
- .container {
- max-width: 600px;
- margin: 0 auto;
- padding: 0 5px;
+ &[open] > summary {
+ border-bottom: 1px solid var(--accent-color);
+ margin-left: 0;
+ margin-right: 0;
}
+}
- footer {
- margin-top: 4rem;
- }
+ol.step-by-step-instructions {
+ margin-top: 1rem;
- img {
- width: 100%;
- }
+ li {
+ margin-top: 0.5rem;
+ margin-bottom: 1rem;
- 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;
+ &::marker {
+ color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
+ font-size: larger;
}
- & > summary {
- cursor: pointer;
- user-select: none;
+ &>div {
+ display: flex;
+ flex-direction: row;
+ gap: 1ch;
+ justify-content: space-between;
}
- &[open] > summary {
- border-bottom: 1px solid var(--accent-color);
- margin-left: 0;
- margin-right: 0;
+ 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;
+}
diff --git a/index.html b/index.html
index bd4735b..baa4778 100644
--- a/index.html
+++ b/index.html
@@ -10,33 +10,31 @@
@@ -117,7 +18,7 @@