From 2b39175011422a0d8f96d7f598f46e2a781dd28f Mon Sep 17 00:00:00 2001
From: Steph Enders <steph@senders.io>
Date: Thu, 29 Feb 2024 09:31:15 -0500
Subject: Initial rework commit: Build Script POC and CSS done

I've created the main CSS layout and a proof of concept for the build
script: this will actually build any "done" _post/ file and generate
it as a workable HTML file. However, no index file generate, rss, or
gemini is implemented
---
 www/index.css | 193 ++++++++++++++++++++--------------------------------------
 1 file changed, 65 insertions(+), 128 deletions(-)

(limited to 'www/index.css')

diff --git a/www/index.css b/www/index.css
index 21baa50..eb1340b 100644
--- a/www/index.css
+++ b/www/index.css
@@ -1,153 +1,90 @@
-/* default / light */
+/*:root {
+    --bg-color: #A1EEBD;
+    --site-header-color: #7BD3EA;
+    --main-bg-color: #fff;
+    --border-color: #F6D6D6;
+    --main-width: 800px;
+}*/
 :root {
-  --background: white;
-  --font: black;
-  --quote: #eee;
-  --link: #0303ee;
-  --linkv: #551a8b;
-  --linkf: #f02727;
-  --articleborder: #060606;
-  --tableborder: #aaa;
-  --tablehead: #ebcfff;
-  --tablez: #eee;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #1e1e1e;
-    --font: #eee;
-    --quote: #444;
-    --link: #00d3d3;
-    --linkv: #cd78f4;
-    --linkf: #f02727;
-    --articleborder: #23ed9b;
-    --tableborder: #aaa;
-    --tablehead: #6f5a7e;
-    --tablez: #313131;
-  }
+    --blue: #7BD3EA;
+    --green: #A1EEBD;
+    --pink:  #F6D6D6;
+    --bg-color: #ffffeb;
+    --code-color: white;
+    --border-color: var(--pink);
+    --article-border-color: var(--green);
+    --article-border-outset-color: var(--blue);
+    --main-width: 800px;
 }
 
-html,body { 
-  margin: 0; 
-  font-family: sans-serif;
-  background-color: var(--background);
-  color: var(--font);
-}
-a {
-  color: var(--link);
-}
-a:visited {
-  color: var(--linkv);
-}
-a:focus {
-  color: var(--linkf);
-}
-#body { 
-  margin: 16px auto; 
-  max-width: 700px;
-}
-@media only screen and (max-width: 800px) {
-  #body {
-    margin: 16px 10%;
-    max-width: 700px;
-  }
+html, body {
+    margin: 0;
+    background-color: var(--bg-color);
 }
 
-#body article { 
-  border-bottom: 1px solid var(--articleborder); 
-}
-#body article:last { border-bottom: none; }
-#body table { border-collapse: collapse; border: 1px solid var(--tableborder); }
-#body table thead tr { background-color: var(--tablehead); }
-#body table td, #body table th { border: 1px solid var(--tableborder); padding: 2px 8px; } 
-#body table tr:nth-child(even) { background-color: var(--tablez); }
-#body ul.compact { columns: 2; }
+/* NAV */
 
-#body blockquote {
-  background-color: var(--quote);
-  border-radius: 2px;
-  padding: 4px;
+#site-header {
+    margin: 16px;
+    text-align: center;
 }
 
-#body blockquote p {
-  font-style: italic;
+#site-title {
+    font-size: 3em;
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: var(--pink);
+    color: #000;
+    font-family: monospace;
 }
 
-#body figure blockquote {
-  margin: 0;
+#cursor {
+    color: #444;
 }
 
-#header {
-        background-color: #060606;
-        color: #67ff79;
-        border-bottom: 4px solid #23ed9b;
-        line-height: 2em;
-        margin: 0;
-        padding: 8px 10%;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-}
-@media only screen and (max-width: 800px) {
-  #header {
-    flex-direction: column;
-    align-items: center;
-  }
-}
-#header > nav { flex: initial; }
-#header > nav > a:link { color: #81b7ff }
-#header > nav > a:visited { color: #cd78f4; }
-#header > nav > a:focus, #header > nav > a:active, #header > nav > a:hover { color: #6005dd; }
-#header > .title { flex: auto; font-family: monospace; font-size: 1.5em; }
-#header > a.title:link, 
-  #header > a.title:visited, 
-  #header > a.title:hover,
-  #header > a.title:focus,
-  #header > a.title:active { 
-  color:inherit; text-decoration: none; 
-}
-#footer {
-  font-size: 0.90em;
-  float:right;
+nav {
+    margin: 4px 0;
 }
 
-#copyright {
-  font-size: 0.80em;
-  float:left;
+nav a:not(:first-child){
+    margin-left: 4px;
 }
 
-article .footer {
-  font-size: 0.90em;
-  float:right;
+/* MAIN */
+main {
+    max-width: var(--main-width);
+    margin: auto auto;
+    border-color: var(--article-border-color);
+    border-right-color: var(--article-border-outset-color);
+    border-bottom-color: var(--article-border-outset-color);
+    border-radius: 4px;
+    border-style: solid;
+}
+main article {
+    margin: 16px;
+    line-height: 1.5em;
 }
 
-.footnote {
-  /* always shift the footnotes a bit below whats above */
-  margin: 24px 0 0 0;
-  font-size: 0.75em;
+main article h1 {
+    text-align: center;
 }
 
-code {
-  font-family: monospace;
-  background-color: var(--quote);
-  padding: 4px 4px;
-  border-radius: 5px 5px;
-  display: inline-block;
-}
-code.inline {
-  display: inline;
-  padding: 2px 2px;
+main footer {
+    background-color: var(--pink);
+    margin: 16px 0;
+    padding: 2px 16px;
 }
 
-.scaled-half {
-  display:inline;
-}
-.scaled-half > img {
-  width: 25%;
-  height: 25%;
+
+footer {
+    font-size: .8em;
+    padding: 16px;
 }
-.scaled-half:hover > img {
-  width: auto;
-  height: auto;
+#copyright {
+    text-align: center;
 }
 
-#tutorial { margin: 2% }
+pre, code {
+    background-color: var(--code-color);
+    padding: 4px 16px;
+}
-- 
cgit v1.2.3-54-g00ecf