Redesign.

No more retro CRT

assets/style.css

@@ -1,37 +1,38 @@
-/* === CRT Base === */
+/* === Fonts === */
+@font-face {
+    font-family: "Iosevka Etoile";
+    src: url("/_/fonts/IosevkaEtoile.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Iosevka Slab";
+    src: url("/_/fonts/IosevkaSlab.woff2") format("woff2");
+}
+
+/* === Theme === */
+:root {
+    --bg: #2e2e2e;
+    --bg-panel: #434343;
+    --bg-panel-hover: #585858;
+    --text: #e6e6e6;
+    --text-muted: #cfcfcf;
+    --primary: #87458a;
+    --primary-hover: #d64d95;
+    --secondary: #c48401;
+    --link: #01b6c4;
+    --link-hover: #d6d24d;
+}
+
+/* === Base === */
 body {
-    background-color: black;
+    background-color: var(--bg);
-    background-image: radial-gradient(rgba(0, 150, 0, 0.75), black 120%);
-    background-attachment: fixed;
-    background-size: cover;
-    background-repeat: no-repeat;
     min-height: 100vh;
     margin: 0;
     overflow: auto;
     padding: 0;
-    color: white;
+    color: var(--text);
     font:
-        1rem Inconsolata,
+        1rem "Iosevka Etoile",
         monospace;
-    text-shadow: 0 0 5px #c8c8c8;
-}
-
-body::after {
-    content: "";
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: repeating-linear-gradient(
-        0deg,
-        rgba(0, 0, 0, 0.15),
-        rgba(0, 0, 0, 0.15) 1px,
-        transparent 1px,
-        transparent 2px
-    );
-    pointer-events: none;
-    z-index: 9999;
 }
 
 * {
@@ -40,24 +41,26 @@ body::after {
     padding: 0;
 }
 
-::selection {
-    background: #0080ff;
-    text-shadow: none;
-}
-
 /* === Links === */
 a {
-    color: #ffb300;
+    color: var(--text);
     text-decoration: none;
 }
 a:hover {
-    color: #ffd54f;
+    color: var(--primary-hover);
+}
+
+.content a {
+    color: var(--link);
+}
+.content a:hover {
+    color: var(--link-hover);
 }
 
 /* === Header === */
 header {
     padding: 0.75rem 1rem;
-    border-bottom: 1px dashed #0a0;
+    border-bottom: 1px dashed var(--secondary);
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -79,38 +82,46 @@ header {
 }
 
 .sep {
-    color: #060;
+    color: var(--secondary);
 }
 
 .btn {
     background: none;
     border: none;
-    color: #ffb300;
+    color: var(--text);
     font: inherit;
     cursor: pointer;
     padding: 0;
     text-decoration: none;
     display: inline-block;
     white-space: nowrap;
-    text-shadow: inherit;
 }
 .btn::before {
     content: "[";
+    color: var(--secondary);
 }
 .btn::after {
     content: "]";
+    color: var(--secondary);
 }
 .btn:hover {
-    color: #ffd54f;
+    color: var(--primary-hover);
 }
 
 /* === Button modifiers === */
+/* For inline buttons */
 .btn-small {
     font-size: 0.65rem;
     font-weight: normal;
     vertical-align: middle;
 }
 
+/* For toolbars */
+.btn-tool {
+    font-size: 0.85rem;
+    padding: 0 0.15rem;
+}
+
 /* === Main === */
 main {
     max-width: 860px;
@@ -129,13 +140,13 @@ main {
 .content h4,
 .content h5,
 .content h6 {
-    color: white;
+    color: var(--text);
     margin: 1.25rem 0 0.5rem;
     line-height: 1.3;
 }
 .content h1 {
     font-size: 1.75rem;
-    border-bottom: 1px dashed #0a0;
+    border-bottom: 1px dashed var(--secondary);
     padding-bottom: 0.25rem;
 }
 .content h2 {
@@ -155,20 +166,20 @@ main {
     margin: 0.25rem 0;
 }
 .content blockquote {
-    border-left: 3px solid #0a0;
+    border-left: 3px solid var(--secondary);
     padding: 0.25rem 1rem;
-    color: #888;
+    color: var(--text-muted);
     margin: 0.75rem 0;
 }
 .content code {
-    font-family: Inconsolata, monospace;
+    font-family: "Iosevka Etoile", monospace;
     font-size: 0.875em;
-    background: #001a00;
+    background: var(--bg-panel);
     padding: 0.1em 0.35em;
 }
 .content pre {
-    background: #001a00;
+    background: var(--bg-panel);
-    border: 1px solid #0a0;
+    border: 1px solid var(--secondary);
     padding: 1rem;
     overflow-x: auto;
     margin: 0.75rem 0;
@@ -185,17 +196,17 @@ main {
 }
 .content th,
 .content td {
-    border: 1px solid #0a0;
+    border: 1px solid var(--secondary);
     padding: 0.4rem 0.75rem;
     text-align: left;
 }
 .content th {
-    background: #001a00;
+    background: var(--bg-panel);
-    color: white;
+    color: var(--text);
 }
 .content hr {
     border: none;
-    border-top: 1px dashed #0a0;
+    border-top: 1px dashed var(--secondary);
     margin: 1.5rem 0;
 }
 .content img {
@@ -204,32 +215,31 @@ main {
 
 /* === File listing === */
 .listing {
-    border: 1px solid #0a0;
+    border: 1px solid var(--secondary);
 }
 .listing-header {
     padding: 0.5rem 1rem;
     font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: white;
+    color: var(--text);
-    border-bottom: 1px solid #0a0;
+    border-bottom: 1px solid var(--secondary);
 }
 .listing-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.6rem 1rem;
-    border-top: 1px solid #060;
+    border-top: 1px solid var(--secondary);
     font-size: 0.95rem;
 }
 .listing-item:hover {
-    background: #001a00;
+    background: var(--bg-panel-hover);
 }
 .listing-item .icon {
     width: 1.25rem;
     text-align: center;
     flex-shrink: 0;
-    filter: drop-shadow(0 0 4px #c8c8c8);
 }
 .listing-item a {
     flex: 1;
@@ -237,13 +247,11 @@ main {
     text-overflow: ellipsis;
     white-space: nowrap;
     color: inherit;
-    text-shadow: inherit;
 }
 .listing-item .meta {
-    color: #888;
+    color: var(--text-muted);
     font-size: 0.8rem;
     white-space: nowrap;
-    text-shadow: none;
 }
 
 /* === Editor toolbar === */
@@ -251,32 +259,15 @@ main {
     display: flex;
     flex-wrap: wrap;
     gap: 0.25rem;
-    border: 1px solid #0a0;
+    border: 1px solid var(--secondary);
     border-bottom: none;
     padding: 0.4rem 0.6rem;
-    background: #001a00;
+    background: var(--bg-panel-hover);
-}
-
-.btn-tool {
-    color: #0f0;
-    font-size: 0.85rem;
-    padding: 0 0.15rem;
-    text-shadow: 0 0 4px #0a0;
-}
-.btn-tool::before {
-    color: #060;
-}
-.btn-tool::after {
-    color: #060;
-}
-.btn-tool:hover {
-    color: #fff;
-    text-shadow: 0 0 6px #0f0;
 }
 
 .toolbar-sep {
     width: 1px;
-    background: #060;
+    background: var(--secondary);
     margin: 0 0.2rem;
     align-self: stretch;
 }
@@ -292,8 +283,8 @@ main {
     left: 0;
     display: none;
     z-index: 100;
-    background: #001a00;
+    background: var(--bg-panel);
-    border: 1px solid #0a0;
+    border: 1px solid var(--secondary);
     min-width: 9rem;
 }
 
@@ -319,13 +310,11 @@ main {
 textarea {
     width: 100%;
     min-height: 60vh;
-    background: #000;
+    background: var(--bg);
-    border: 1px solid #0a0;
+    border: 1px solid var(--secondary);
     border-top: none;
-    color: #0f0;
+    color: var(--text);
-    caret-color: #0f0;
+    font-family: "Iosevka Slab", monospace;
-    text-shadow: 0 0 4px #0a0;
-    font: inherit;
     font-size: 0.9rem;
     line-height: 1.6;
     padding: 1rem;
@@ -333,16 +322,12 @@ textarea {
     outline: none;
     box-sizing: border-box;
 }
-textarea:focus {
-    border-color: #0f0;
-    box-shadow: 0 0 5px #0a0;
-}
 
 /* === Diary views === */
 .diary-section {
     margin: 2rem 0;
     padding-top: 1.5rem;
-    border-top: 1px dashed #0a0;
+    border-top: 1px dashed var(--secondary);
 }
 
 .diary-section:first-child {
@@ -353,13 +338,13 @@ textarea:focus {
 
 .diary-section h2 {
     font-size: 1.2rem;
-    color: white;
+    color: var(--text);
     margin-bottom: 0.75rem;
     font-weight: normal;
 }
 
 .diary-photo-count {
-    color: #888;
+    color: var(--text-muted);
     font-size: 0.85rem;
 }
 
@@ -400,7 +385,7 @@ textarea:focus {
 /* === hr === */
 hr {
     border: none;
-    border-top: 1px dashed #0a0;
+    border-top: 1px dashed var(--secondary);
     margin: 1rem 0;
 }
 
@@ -412,10 +397,10 @@ hr {
     background: #111;
 }
 ::-webkit-scrollbar-thumb {
-    background: #0a0;
+    background: var(--primary);
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: #0f0;
+    background: var(--primary-hover);
 }
 
 /* === Responsive === */