1 files changed, 53 insertions, 0 deletions
diff --git a/src/doc/reference/theme/reference.css b/src/doc/reference/theme/reference.css
new file mode 100644
index 000000000..02e5f63df
--- /dev/null
+++ b/src/doc/reference/theme/reference.css
@@ -0,0 +1,53 @@
+/*
+.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
+the parenthetical. So for this example, you'd use
+```less-than <span class="parenthetical">symbol (`<`)</span>```
+*/
+.parenthetical {
+    white-space: nowrap;
+}
+
+/*
+Warnings and notes:
+
+Write the <div>s on their own line. E.g.
+
+<div class="warning">
+
+Warning: This is bad!
+
+</div>
+*/
+main .warning p {
+    padding: 10px 20px;
+    margin: 20px 0;
+}
+
+main .warning p::before {
+    content: "⚠️ ";
+}
+
+.light main .warning p,
+.rust main .warning p {
+    border: 2px solid red;
+    background: #ffcece;
+}
+
+.rust main .warning p {
+    /* overrides previous declaration */
+    border-color: #961717;
+}
+
+.coal main .warning p,
+.navy main .warning p,
+.ayu main .warning p {
+    background: #542626;
+}
+
+/* Make the links higher contrast on dark themes */
+.coal main .warning p a,
+.navy main .warning p a,
+.ayu main .warning p a {
+    color: #80d0d0;
+}