Ready. Set. Go!HEADmaster

1 files changed, 112 insertions, 0 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
new file mode 100644
index 0000000..6beaff3
--- /dev/null
+++ b/assets/css/default.css
@@ -0,0 +1,112 @@
+/* Red is a low-luminance color, and luminance is what we need
+ * for reading and for detecting fine details. Saturated Red,
+ * Orange, Purple should generally be paired with white, and
+ * not black. This is true for standard vision but it's doubly
+ * true for individuals with certain color vision deficiencies
+ * (color blind) particularly protanopia, who see reds much darker.
+ */
+
+
+html {
+    color-scheme: dark;
+    --background-color: #0D1B1E;
+    --foreground-color: #D5D5D5;
+    --red-color: #FFADD6;
+    --yellow-color: #FFFF00;
+    --green-color: #00FF7F;
+    --blue-color: #00FFFF;
+    --purple-color: #DCC6E0;
+    --fs-tfc: clamp(2.25rem, 2vw + 1.5rem, 3.25rem);
+    --fs-tfb: clamp(1.25rem, 2vw + 0.2rem, 2rem);
+    --fs-tfa: clamp(1rem, 2vw + 0.1rem, 1.5rem);
+    --fs-tf: 1rem;
+    --fs-tfx: .75rem;
+    font-size: var(--fs-tf);
+    font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
+    font-variant-numeric: oldstyle-nums;
+}
+@media (prefers-color-scheme: light) {
+    html {
+        color-scheme: light;
+        --background-color: #D5D5D5;
+        --foreground-color: #0D1B1E;
+        --red-color: #AA0000;
+        --yellow-color: #804600;
+        --green-color: #205E3B;
+        --blue-color: #1B365D;
+        --purple-color: #360036;
+    }
+}
+
+body {
+    max-width: 100%;
+    min-height: 99dvh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    grid-template-rows: auto 1fr auto;
+}
+
+main {
+    max-width: 46rem; 
+    margin: clamp(1rem, 8vw, 5rem);
+}
+
+a {
+    color: var(--blue-color);
+}
+a:visited {
+    color: var(--yellow-color);
+}
+a[href$=".pdf"]::after {
+  content: " (PDF)";
+  vertical-align: super;
+  font-size: var(--fs-tfx);
+}
+
+abbr {
+    font-variant-caps: all-small-caps;
+    text-transform: lowercase;
+}
+footer {
+    height: 1rem;
+    font-size: var(--fs-tfx);
+    margin-left: clamp(1rem, 8vw, 5rem);
+}
+
+h1 {
+    color: var(--green-color);
+    font-size: var(--fs-tfc);
+    font-weight: bold;
+}
+
+h2 {
+    color: var(--blue-color);
+    font-size: var(--fs-tfb);
+    font-weight: bold;
+}
+
+h3 {
+    font-size: var(--fs-tfa);
+}
+
+.smallcaps {
+    font-variant-caps: all-small-caps;
+    text-transform: lowercase;
+}
+
+.hello {
+    color: var(--blue-color);
+}
+.name {
+    display: block;
+    margin: 10px 0;
+    color: var(--green-color);
+    font-size: var(--fs-tfc);
+    font-weight:bold;
+}
+.description {
+    font-size: var(--fs-tfc);
+    font-weight: normal;
+    color: var(--foreground-color);
+}