Refactor everything

2024-10-21 16:46:25 +03:00 · 2024-10-21 16:46:25 +03:00 · 57903d4724
commit 57903d4724
parent b56ce43c80
45 changed files with 514 additions and 416 deletions
--- a/internal/server/public/main.css
+++ b/internal/server/public/main.css
@ -0,0 +1,117 @@
+/* Default theme */
+:root {
+    /* Light theme */
+    --text-light: #2b2a2a;
+    --bg-light: #f4edd7;
+
+    --clickable-light: #ed3e3b;
+    --clickable-hover-light: #e55552;
+    --clickable-label-light: #f4edd7;
+    --text-hover-light: #656565;
+
+    --textarea-bg-light: #f9f5e4;
+    --textarea-border-light: #c3c3c2;
+
+    /* Dark theme */
+    --text-dark: #f5f0e1;
+    --bg-dark: #1b1916;
+
+    --clickable-dark: #ed3e3b;
+    --clickable-hover-dark: #ae3836;
+    --clickable-label-dark: #f5f2ee;
+    --text-hover-dark: #a9a8a4;
+
+    --textarea-bg-dark: #201d1b; /* 252020 f5f0e1 */
+    --textarea-border-dark: #2c2727;
+}
+
+* { box-sizing: border-box; }
+body {
+    color: var(--text-light);
+    background-color: var(--bg-light);
+    font-size: 18px;
+    margin: auto auto;
+    max-width: 640px;
+    padding: 15px;
+    line-height: 1.4;
+    font-family: serif;
+    min-height: 85vh;
+    display: flex;
+    flex-direction: column;
+}
+h1,h2,h3,h4,h5,h6 { line-height: 1.2 }
+
+a, a:visited { color: var(--clickable-light); }
+a:hover, a:visited:hover { color: var(--clickable-hover-light); }
+a.no-accent, a.no-accent:visited { color: var(--text-light); }
+a.no-accent:hover, a.no-accent:visited:hover { color: var(--text-hover-light); }
+
+ul:not(li ul),  ol:not(li ol){
+    margin-left: 0;
+    padding-left: 0;
+    list-style-position: inside;
+}
+
+.list-title { margin-bottom: 0}
+.list-desc { margin-top: 0 }
+
+textarea, input {
+    background: var(--textarea-bg-light);
+    max-width: 640px;
+    width: 100%;
+    display: block;
+    resize: vertical;
+    outline: 0;
+    box-shadow: none;
+    border: 2px solid var(--textarea-border-light);
+    margin-bottom: 1em;
+    font-size: 18px;
+}
+input { height: 2.5em; }
+
+button {
+    background-color: var(--clickable-light);
+    border: none;
+    color: var(--clickable-label-light);
+    padding: 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 20px;
+    margin: 4px 2px;
+    border-radius: 4px;
+    cursor: pointer;
+    max-width: 640px;
+    width: 100%;
+}
+button:hover { background-color: var(--clickable-hover-light); }
+
+footer { margin-top: auto; }
+header > h1, header > p {
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+    body {
+        color: var(--text-dark);
+        background-color: var(--bg-dark);
+    }
+    textarea, input {
+        color: var(--text-dark);
+        background-color: var(--textarea-bg-dark);
+        border-color: var(--textarea-border-dark)
+    }
+
+    a, a:visited { color: var(--clickable-dark); }
+    a:hover, a:visited:hover { color: var(--clickable-hover-dark); }
+    a.no-accent, a.no-accent:visited { color: var(--text-dark); }
+    a.no-accent:hover, a.no-accent:visited:hover { color: var(--text-hover-dark); }
+
+    button {
+        background-color: var(--clickable-dark);
+        color: var(--clickable-label-dark);
+    }
+    button:hover { background-color: var(--clickable-hover-dark); }
+}