init

public/pub/page.css

@@ -0,0 +1,201 @@
+:root {
+    font-family: 'Open Sans', sans-serif;
+    --mono-fonts: 'Jetbrains Mono', 'Courier New', Courier, monospace;
+    --theme: #0aa;
+    --theme-100: #088;
+    
+    --theme-alt: #a0a;
+
+    --fg: #000;
+    --fg-alt: #fff;
+
+    --bg: #fff;
+    --bg-100: #eee;
+    --bg-200: #ddd;
+    --bg-300: #ccc;
+    --bg-400: #bbb;
+
+    color: var(--fg);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --fg: #fff;
+        --bg: #222;
+        --bg-100: #333;
+        --bg-200: #444;
+        --bg-300: #555;
+        --bg-400: #666;
+    }
+}
+
+body {
+    margin: 0;
+    background-color: var(--bg);
+    width: 100%;
+}
+
+nav {
+    padding: 1em 1em;
+    display: flex;
+    justify-content: space-between;
+    border-top: 5px solid var(--theme);
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1em;
+    margin-bottom: 4em;
+}
+
+footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: .25em .5em;
+    background-color: #111;
+    color: #666;
+    border-top: 2px solid var(--theme-100);
+}
+
+a {
+    color: var(--theme);
+    transition: color .3s ease-in-out;
+
+    &:hover {
+        color: var(--fg);
+    }
+
+    &.alt {
+        color: var(--fg);
+
+        &:hover {
+            color: var(--theme);
+        }
+    }
+}
+
+button,
+.button {
+    outline: none;
+    border: none;
+    width: fit-content;
+    text-decoration: none;
+    font-weight: 700;
+    background-color: var(--theme);
+    color: var(--fg-alt);
+    font-family: var(--mono-fonts);
+    text-transform: uppercase;
+    text-rendering: optimizeLegibility;
+    border-radius: 5px;
+    margin: .2em;
+    padding: 10px 20px;
+    transition: background-color .3s ease-in-out;
+    cursor: pointer;
+    border: 1px solid var(--fg-alt);
+
+    &:hover {
+        background-color: var(--theme-100);
+    }
+
+    &.alt {
+        border: 2px solid var(--fg-alt);
+        color: var(--fg-alt);
+        background-color: var(--theme-alt);
+        
+        &:hover {
+            color: var(--bg-400);
+            background-color: var(--fg-alt);
+        }
+    }
+}
+
+section {
+    padding: 2em;
+    background-color: var(--bg-100);
+    display: flex;
+    flex-direction: column;
+
+    .tag {
+        width: fit-content;
+        background-color: var(--theme);
+        color: var(--fg-alt);
+        padding: 3px 8px;
+        border-radius: 7px;
+        margin-bottom: 1rem;
+        margin-right: 1em;
+        text-transform: uppercase;
+        text-rendering: optimizeLegibility;
+
+        &.alt {
+            background-color: var(--theme-alt);
+        }
+
+        &.full {
+            width: 100%;
+        }
+    }
+
+    &.board {
+        background-color: var(--theme);
+        color: var(--fg-alt);
+
+        &.glare {
+            background: linear-gradient(40deg, #a3c, #e2a, #d3c, #a3c);
+        }
+    }
+}
+
+.landscape {
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+    margin: .5em 0;
+
+    &.border {
+        border: 2px solid var(--bg-200);
+        border-radius: 7px;
+        padding: 5px;
+    }
+}
+
+div.card {
+    display: flex;
+    flex-direction: column;
+
+    height: fit-content;
+    width: fit-content;
+
+    margin: 1em;
+    padding: 1em 1.5em;
+    border-radius: 7px;
+
+    background-color: var(--bg-200);
+
+    &.wide {
+        width: 100%;
+    }
+
+    &.tall {
+        height: 100%;
+    }
+}
+
+.mono {
+    font-family: var(--mono-fonts);
+}
+
+.uppercase {
+    text-transform: uppercase;
+}
+
+[hidden] {
+    display: none;
+}
+
+div.space { height: 1em; }
+
+h1, h2, h3, h4, h5, h6 { margin: 0; }