init: initial site

public/res/anchors.js

@@ -0,0 +1,4 @@
+document.querySelectorAll("h2")
+    .forEach(e => {
+        e.onclick = () => window.location.hash = e.parentElement.id;
+    });

public/res/cases.js

@@ -0,0 +1,30 @@
+class Case {
+    constructor (name = "Project", description = "This is a project.", url = undefined) {
+        this.name = name;
+        this.description = description;
+        this.url = url;
+    }
+}
+
+const CASES = [
+];
+
+const casesButton = document.querySelector("button#cases-button");
+const casesDiv = document.querySelector("div#cases");
+if (casesButton && CASES.length > 0) casesButton.hidden = false; 
+
+function showCases() {
+    if (!casesButton) return console.log("k");
+    if (casesDiv.hidden) casesDiv.innerHTML = "";
+    casesDiv.hidden = !casesDiv.hidden;
+
+    let list = document.createElement("ul");
+    CASES.forEach(c => {
+        console.log(c);
+        // a dirty hack :p
+        list.innerHTML += `<li><${c.url ? 'a' : 'span'}><strong>${c.name}<strong> - ${c.description}</${c.url ? 'a' : 'span'}></li>`;
+    });
+    casesDiv.appendChild(list);
+}
+
+casesButton.onclick = showCases;

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;
+}