Initial commit

2025-08-15 06:25:45 -05:00
commit 00e123b432
8 changed files with 546 additions and 0 deletions
--- a/style.css
+++ b/style.css
@@ -0,0 +1,140 @@
+:root {
+    --background-color-light: #f4f4f4;
+    --text-color-light: #333;
+    --h1-color-light: #a00;
+    --log-background-color-light: #fff;
+    --log-border-color-light: #a00;
+
+    --background-color-dark: #333;
+    --text-color-dark: #f4f4f4;
+    --h1-color-dark: #f4f4f4;
+    --log-background-color-dark: #444;
+    --log-border-color-dark: #f4f4f4;
+
+    --button-background-color: #a00;
+    --button-text-color: #fff;
+    --button-hover-background-color: #c00;
+}
+
+body {
+    font-family: sans-serif;
+    text-align: center;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body[data-theme='light'] {
+    background-color: var(--background-color-light);
+    color: var(--text-color-light);
+}
+
+body[data-theme='dark'] {
+    background-color: var(--background-color-dark);
+    color: var(--text-color-dark);
+}
+
+.theme-switcher {
+    position: absolute;
+    right: .75rem;
+    top: .75rem;
+}
+
+#theme-switch {
+    background: none;
+    border: 1px solid;
+    cursor: pointer;
+    padding: .25rem .5rem;
+}
+
+body[data-theme='light'] #theme-switch {
+    border-color: var(--text-color-light);
+    color: var(--text-color-light);
+}
+
+body[data-theme='dark'] #theme-switch {
+    border-color: var(--text-color-dark);
+    color: var(--text-color-dark);
+}
+
+.container {
+    margin: auto;
+    overflow: hidden;
+    padding: 1.25rem;
+    width: 80%;
+}
+
+h1 { color: var(--h1-color-light); }
+
+body[data-theme='dark'] h1 { color: var(--h1-color-dark); }
+
+.scores {
+    border: 1px solid;
+    border-left: none;
+    border-right: none;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 1.25rem;
+    padding: .75rem 0;
+
+    h2 {
+        font-size: 1.5rem;
+        margin: 0;
+        padding: 0;
+    }
+}
+
+body[data-theme='light'] .scores {
+    border-color: var(--text-color-light);
+    color: var(--text-color-light);
+}
+
+body[data-theme='dark'] .scores {
+    border-color: var(--text-color-dark);
+    color: var(--text-color-dark);
+}
+
+.actions button {
+    background-color: var(--button-background-color);
+    border: none;
+    color: var(--button-text-color);
+    cursor: pointer;
+    font-size: 1em;
+    margin: 0 .5rem 1.5rem;
+    padding: .5rem 1.5rem;
+    transition: background-color 0.3s;
+
+    &:hover { background-color: var(--button-hover-background-color); }
+}
+
+.intro {
+    font-size: 1.1rem;
+    line-height: 1.4;
+    margin: 0 auto 1.5rem;
+    max-width: 64rem;
+    text-wrap: balance;
+}
+
+.log {
+    margin-top: 1.5rem;
+    text-align: left;
+}
+
+.log ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.log li {
+    margin-bottom: .25rem;
+    padding: .5rem;
+    transition: background-color 0.3s, border-left-color 0.3s;
+}
+
+body[data-theme='light'] .log li {
+    background: var(--log-background-color-light);
+    border-left: 5px solid var(--log-border-color-light);
+}
+
+body[data-theme='dark'] .log li {
+    background: var(--log-background-color-dark);
+    border-left: 5px solid var(--log-border-color-dark);
+}