feat: rewrite header to new style and rename site

1 files changed, 32 insertions, 79 deletions

diff --git a/static/style.css b/static/style.css
index f171743..fde2bd9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,4 +1,5 @@
- {
+
+:root {
     color-scheme: light dark;
     
     --site-bg: #fff;
@@ -16,6 +17,13 @@
     --blockquote-color: ##666666;
     
     --pre-bg: #f0f0f0;
+
+    --font-size: 1.2em;
+    --h1-size: 1.2em;
+    --header-font-size: 0.9em;
+
+    --site-font: monospace;
+    --header-font: arial;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -34,23 +42,20 @@
 }
 /* ----------- Entire site */
 body {
-    font-family: 'monospace';
+    font-family: var(--site-font);
     padding: 0;
-    margin: 0;
-    font-size: 1.2cem;
+    font-size: var(--font-size);
     background-color: var(--site-bg);
     color: var(--text-color);
-}
-.the-site {
-    display: flex;
-    flex-wrap: wrap;
-    margin-left: auto;
-    margin-right: auto;
     max-width: 800px;
-    margin-top: 20px;
+    margin: auto;
+}
+header {
+    width: 100%;
+    text-align: center;
 }
 main, footer {
-    width: 600px;
+    width: 100%;
     max-width: 95%;
     margin-left: auto;
     margin-right: auto;
@@ -68,84 +73,32 @@ a {
 a:hover {
     text-decoration: underline;
 }
-/* ----------- Left column */
-.left-column {
-    flex: 200px 0;
-    text-align: center;
-    flex-shrink: 0;
-    margin-bottom: 20px;
-}
 
-@media (max-width: 100000px) {
-    #topnav {
-        width: 100%;
-    }
-    .left-column {
-        flex: 100%;
-    }
+/* ----------- Site header */
+header {
+    font-family: var(--header-font);
+    font-size: var(--header-font-size);
 }
-
-/* ----------- Site title */
 h1 {
-    font-size: 2.5em;
+    font-size: var(--h1-size);
     margin: 0;
-}
-@media (max-width: 71000000px) {
-    h1 {
-        margin-bottom: 10px;
-    }
+    padding-bottom: 5px;
+    padding-top: 10px;
 }
 
-/* ----------- Logo */
-logo{
-    height: auto;
-    width: auto;
-}
-@media (max-width: 7100000000px) {
-    .logo img {
-        height: 40px;
-    }
+#top-nav #main-nav {
+    padding-bottom: 5px;
 }
-p
-/* ----------- Main navigation */
-.left-column nav {
-    margin-top: 30px;
-    flex-shrink: 0;
+#top-nav {
 }
-.left-column nav a {
-    display: block;
-    margin-bottom: 5px;
+#top-nav a {
+    margin-right: 5px;
 }
-@media (max-width: 71000000000px) {
-    .left-column nav a {
-        display: inline-block;
-        margin-right: 10px;
-    }
-    h1 {
-        font-size: 1.5em;
-        display: inline-block;
-    }
-    .the-site {
-        margin-top: 5px;
-    }
-    .left-column nav {
-        margin-top: 0;
-        margin-bottom: 10px;
-    }
+                  
 
-}
-/* ----------- Right column */
-.right-column {
-    flex: 50%;
-}
+/* ---------- Main */
 main {
-    padding: 0px;
-}
-
-@media (max-width: 710000000000px) {
-    .right-column {
-        flex: 100%;
-    }
+    margin-top: 30px;
 }
 
 /* ----------- Taxmomy list */