Initial Commit

static/style.css

@@ -0,0 +1,202 @@
+* {
+    --color: oklch(0.4 0.25 var(--hue));
+    --color-max: oklch(0.8 0.25 var(--hue));
+    --color-bg1: oklch(0.8 0.15 var(--hue));
+    --color-bg2: oklch(1.0 0.05 var(--hue));
+}
+
+html {
+    background-color: white;
+    color: black;
+    font-family: Arial, Helvetica, sans-serif;
+    min-height: 100vh;
+    margin: 0;
+    --hue: 0;
+    --ade: 130;
+    --bea: 242;
+    --cam: 350;
+    --des: 73;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+input,
+button,
+textarea,
+select,
+output {
+    border: 1px solid var(--color);
+    background-color: var(--color-bg2);
+    color: var(--color);
+    font-size: inherit;
+    font-family: inherit;
+    font-variant: inherit;
+    padding: 0.1em 0.25em;
+}
+
+ul {
+    list-style-type: disclosure-closed;
+}
+
+label {
+    font-size: 0.75em;
+    font-variant: small-caps;
+}
+
+h2 {
+    font-variant: small-caps;
+    font-size: inherit;
+    margin: 0;
+    background-color: var(--color);
+    color: white;
+    width: fit-content;
+    padding: 0 0.25em;
+    position: relative;
+    height: 1lh;
+}
+
+h2::before {
+    position: absolute;
+    top: 0;
+    right: -1lh;
+    content: "";
+    display: block;
+    height: 100%;
+    aspect-ratio: 1/1;
+    background-color: var(--color);
+    clip-path: polygon(100% 0, 0 0, 0 100%);
+    transform: scale(1.005);
+}
+
+h3 {
+    padding: 0 0.25em;
+    font-variant: small-caps;
+    font-size: inherit;
+    margin: 0;
+    color: var(--color);
+}
+
+hr {
+    border: none;
+    border-bottom: 1px dashed var(--color);
+}
+
+header {
+    display: flex;
+    flex-direction: row;
+    height: 5em;
+    color: var(--color);
+    font-variant: small-caps;
+
+    >a {
+        background-color: var(--color-bg1);
+        padding: 0.5em;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .icon-bg {
+            fill: var(--color);
+        }
+
+        .icon-txt {
+            dominant-baseline: central;
+            letter-spacing: 0.5ch;
+            font: 28px Arial, sans-serif;
+        }
+    }
+
+    >div {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+
+        >* {
+            flex-grow: 1;
+            align-content: center;
+            flex-basis: 0;
+        }
+
+    }
+}
+
+#header-top {
+    background-color: var(--color-bg1);
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    min-height: 2.5em;
+
+    >div {
+        margin: 0.25em 0;
+        padding-right: 1em;
+        background-color: var(--color-bg2);
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 1em;
+        align-items: center;
+
+        a {
+            color: inherit;
+            text-decoration: none;
+            white-space: nowrap;
+        }
+    }
+}
+
+#header-bottom {
+    display: flex;
+    flex-direction: row;
+    min-height: 2.5em;
+
+    >form {
+        flex-grow: 1;
+        margin-top: 0.25em;
+        display: flex;
+        flex-direction: row;
+        gap: 0.25em;
+        justify-content: center;
+
+        >* {
+            height: fit-content;
+        }
+    }
+}
+
+.spacer {
+    display: inline-block;
+    height: 100%;
+    aspect-ratio: 1/1;
+    background-color: var(--color-bg1);
+    clip-path: polygon(100% 0, 0 0, 0 100%);
+    transform: scale(1.005);
+}
+
+@media (max-width: 750px) {
+    header {
+        height: fit-content;
+        flex-direction: column;
+
+        #header-top>div>a {
+            display: none;
+        }
+
+        #header-top>div>a:first-of-type {
+            display: block;
+        }
+
+        #searchform {
+            display: none;
+        }
+    }
+
+    .spacer {
+        transform: scale(1.1);
+    }
+}