Move per-theme CSS variables to top
When defining colors relative to other colors defined per theme, it's
helpful to have these all defined as variables and have all the
variables defined in one place. Let's do that.
diff --git a/theme/reference.css b/theme/reference.css
index 99379a8..be0a2bd 100644
--- a/theme/reference.css
+++ b/theme/reference.css
@@ -1,5 +1,54 @@
/* Custom CSS for the Rust Specification. */
+/* Per-theme variables. */
+:root {
+ --railroad-background-color: hsl(30, 20%, 95%);
+ --railroad-background-image:
+ linear-gradient(to right, rgba(30, 30, 30, .05) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(30, 30, 30, .05) 1px, transparent 1px);
+ --railroad-path-stroke: black;
+ --railroad-rect-stroke: black;
+ --railroad-rect-fill: hsl(-290, 70%, 90%);
+}
+.light {
+ --alert-note-color: #0969da;
+ --alert-warning-color: #9a6700;
+ --alert-edition-color: #1a7f37;
+ --alert-example-color: #8250df;
+ --gramar-literal-bg: #fafafa;
+}
+.rust {
+ --alert-note-color: #023b95;
+ --alert-warning-color: #603700;
+ --alert-edition-color: #008200;
+ --alert-example-color: #8250df;
+ --grammar-literal-bg: #dedede;
+}
+.coal, .navy {
+ --alert-note-color: #4493f8;
+ --alert-warning-color: #d29922;
+ --alert-edition-color: #3fb950;
+ --alert-example-color: #ab7df8;
+ --grammar-literal-bg: #1d1f21;
+}
+.ayu {
+ --alert-note-color: #74b9ff;
+ --alert-warning-color: #f0b72f;
+ --alert-edition-color: #2bd853;
+ --alert-example-color: #d3abff;
+ --gramar-literal-bg: #191f26;
+}
+.coal, .navy, .ayu {
+ --railroad-background-color: hsl(230, 10%, 20%);
+ --railroad-background-image:
+ linear-gradient(to right, rgba(150, 150, 150, .05) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(150, 150, 150, .05) 1px, transparent 1px);
+ --railroad-path-stroke: hsl(200, 10%, 60%);
+ --railroad-text-fill: hsl(230, 30%, 80%);
+ --railroad-rect-stroke: hsl(200, 10%, 50%);
+ --railroad-rect-fill: hsl(230, 20%, 20%);
+}
+
/*
.parenthetical class used to keep e.g. "less-than symbol (<)" from wrapping
the end parenthesis onto its own line. Use in a span between the last word and
@@ -58,31 +107,6 @@
margin-right: 8px;
}
-.light .alert {
- --alert-note-color: #0969da;
- --alert-warning-color: #9a6700;
- --alert-edition-color: #1a7f37;
- --alert-example-color: #8250df;
-}
-.ayu .alert {
- --alert-note-color: #74b9ff;
- --alert-warning-color: #f0b72f;
- --alert-edition-color: #2bd853;
- --alert-example-color: #d3abff;
-}
-.rust .alert {
- --alert-note-color: #023b95;
- --alert-warning-color: #603700;
- --alert-edition-color: #008200;
- --alert-example-color: #8250df;
-}
-.coal .alert,
-.navy .alert {
- --alert-note-color: #4493f8;
- --alert-warning-color: #d29922;
- --alert-edition-color: #3fb950;
- --alert-example-color: #ab7df8;
-}
.alert-note blockquote {
border-inline-start-color: var(--alert-note-color);
}
@@ -596,20 +620,8 @@
color: var(--inline-code-color);
}
-.light .grammar-literal {
- background-color: #fafafa;
-}
-.rust .grammar-literal {
- background-color: #dedede;
-}
-.coal .grammar-literal {
- background-color: #1d1f21;
-}
-.navy .grammar-literal {
- background-color: #1d1f21;
-}
-.ayu .grammar-literal {
- background-color: #191f26;
+.grammar-literal {
+ background-color: var(--grammar-literal-bg);
}
.grammar-production:target, .railroad-production:target {
@@ -653,25 +665,6 @@
display: none;
}
-:root {
- --railroad-background-color: hsl(30, 20%, 95%);
- --railroad-background-image: linear-gradient(to right, rgba(30, 30, 30, .05) 1px, transparent 1px),
- linear-gradient(to bottom, rgba(30, 30, 30, .05) 1px, transparent 1px);
- --railroad-path-stroke: black;
- --railroad-rect-stroke: black;
- --railroad-rect-fill: hsl(-290, 70%, 90%);
-}
-
-.coal, .navy, .ayu {
- --railroad-background-color: hsl(230, 10%, 20%);
- --railroad-background-image: linear-gradient(to right, rgba(150, 150, 150, .05) 1px, transparent 1px),
- linear-gradient(to bottom, rgba(150, 150, 150, .05) 1px, transparent 1px);
- --railroad-path-stroke: hsl(200, 10%, 60%);
- --railroad-text-fill: hsl(230, 30%, 80%);
- --railroad-rect-stroke: hsl(200, 10%, 50%);
- --railroad-rect-fill: hsl(230, 20%, 20%);
-}
-
svg.railroad {
background-color: var(--railroad-background-color);
background-size: 15px 15px;
