init: initial site

2024-03-29 16:17:59 +01:00 · 2024-03-29 16:17:59 +01:00 · d6da14e4bb
commit d6da14e4bb
7 changed files with 292 additions and 0 deletions
--- a/public/res/style.css
+++ b/public/res/style.css
@ -0,0 +1,168 @@
+:root {
+    --fonts: Inter, 'Open Sans', 'Helvetica', 'Roboto', sans-serif;
+    --theme-color: #33e;
+    --theme-color-highlight: #55f;
+    --theme-color-highlight-2: #99f;
+    --theme-color-lowlight: #11b;
+
+    font-family: var(--fonts);
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    position: sticky;
+    top: 0%;
+    width: 100vw;
+    height: fit-content;
+    background-color: var(--theme-color, gray);
+    color: #fff;
+
+    box-shadow: 0 0 20px var(--theme-color-lowlight);
+}
+
+header div.logo {
+    padding: 1em;
+}
+
+header div.logo span {
+    font-weight: bolder;
+    font-size: 1.5em;
+
+    border: 1px;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    width: 100vw;
+}
+
+main section {
+    margin: 0 2.5em;
+    width: calc(100vw - (2.5em * 2));
+
+    >h2 {
+        text-decoration: underline;
+        text-decoration-color: #aaa;
+    }
+}
+
+section#intro {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin: 0;
+    width: 100vw;
+    background-color: var(--theme-color);
+    color: #fff;
+
+    font-size: 2em;
+
+    border-bottom: 3px solid gray;
+}
+
+div section {
+    width: fit-content;
+}
+
+/* --- */
+
+/* for anchors.js */
+h2:hover {
+    cursor: pointer;
+
+    &::before {
+        position: absolute;
+        content: '#';
+        text-decoration: underline;
+        text-decoration-color: var(--theme-color);
+        transform: translateX(-150%);
+    }
+}
+
+/* --- */
+
+pre, 
+code, 
+.mono {
+    font-family: 'Mononoki', 'Droid Sans Mono', monospace;
+}
+
+/* --- */
+
+form {
+    display: flex;
+    flex-direction: column;
+
+    gap: .75em;
+    margin: .5em 0;
+
+    padding: 1rem .5rem;
+    border: 2px solid #e3e3e3;
+    border-radius: 5px;
+}
+
+
+form input,
+form textarea {
+    font-family: var(--fonts);
+
+    width: 100%;
+    padding: .3em .2em;
+
+    outline: none;
+
+    border: 1px solid #e3e3e3;
+    border-radius: 5px;
+
+
+    &:hover {
+        background-color: 1px solid var(--theme-color-highlight);
+    }
+
+    transition: border .2s ease-in-out;
+}
+
+form input[type=button],
+form input[type=submit],
+button {
+    outline: none;
+    padding: .3em .5em;
+    border: 1px solid #e3e3e3;
+    background-color: #eee;
+    border-radius: 5px;
+
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--theme-color-highlight-2);
+    }
+
+    transition: background-color .2s ease-in-out;
+}
+
+div.columns {
+    display: flex;
+
+    @media (max-width: 600px) {
+        flex-direction: column;
+    }
+}
+
+div.rows {
+    display: flex;
+    flex-direction: column;
+}
+
+.faded {
+    opacity: .2;
+}