1 files changed, 149 insertions, 87 deletions

diff --git a/css/base.css b/css/base.css
index 1ec9ff3..df8506e 100644
--- a/css/base.css
+++ b/css/base.css
@@ -19,154 +19,216 @@
 /* */
 
 :root {
-        --theight: fit-content;
-        --bheight: fit-content; /* min-content This feels hackey but it works & stops overflow */
+    --bgcolor: #232627;
+    --fgcolor: rgb(255, 255, 255);
 
-        --cblack: #000000;
-        --cwhite: #ffffff;
-        --cgray: #232627; /* Nicer gray than previously */
+    --tb_bgcolor: black;
+    --tb_fgcolor: white;
+    --tb_height: fit-content;
+    --tb_padding: 1vw;
 
-        /* Color palate for the site */
-        --cebony: #2e2920;
-        --ctaupe: #e9e6e2;
-        --corange: #f9c070;
-        --ctan: #8e4c30;
+    --padding_sides: 3vw;
+    --padding_updown: 2vw;
+
+    --linkcolor: #f9c070;
 }
 
 * {
-        padding: 0;
-        margin: 0;
+    margin: 0;
+    padding: 0;
 }
 
 body {
-        background-color: var(--cgray);
-        color: var(--ctaupe);
-        font-family: Verdana, Geneva, Tahoma, sans-serif;
+    background-color: var(--bgcolor);
+    color: var(--fgcolor);
+
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
 li {
-        list-style-type: '- ';
+    list-style: "";
 }
 
-ul {
-    padding-top: 1vw;
-    padding-bottom: 1vw;
-    padding-left: 2vw;
-    padding-right: 2vw;
-} /* Looks good for the links */
-
 a {
-        color: var(--corange);
+    color: var(--linkcolor);
 }
 
 .vertcontain {
     display: flex;
     flex-flow: column nowrap;
-
     justify-content: space-around;
     align-content: center;
 }
 
-#content {
-        padding: 1vw;
-        margin: 1vw;
-        margin-bottom: 5vw; /* Not knowing about this was fucking annoying */
+.side-by-side {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
 
-        overflow: auto;
-        overflow-wrap: break-word;
+.centered {
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
 }
 
-#top-bar {
-        padding: 0.5vw;
+.blockedout {
+    display: inline-block;
+    width: 100%;
+}
 
-        /* Floats h1 and ul/li side by side */
-        display: flex;
-    flex-flow: row nowrap;
-        justify-content: space-between;
-        align-items: center;
-        align-content: center;
+.indented {
+    text-indent: 4ch each-line;
+}
 
-        height: var(--theight);
+a.bracketed::before {
+    content: "[";
+}
+a.bracketed::after {
+    content: "]";
+}
+
+a.nodec {
+    text-decoration: none;
+}
+
+a.nocolor {
+    color:inherit;
+}
+
+#top-bar {
+    display:flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: var(--tb_bgcolor);
+    color: var(--tb_fgcolor);
 
-        background-color: var(--cblack);
-        color: var(--cwhite);
+    padding: var(--tb_padding);
+    height: var(--tb_height);
 
-        position: -webkit-sticky;
+    position: -webkit-sticky;
         position: sticky;
         top: 0;
 
-        font-family: 'zai_courier_polski_1941Rg', 'Courier New', Courier, monospace;
+    font-family: 'zai_courier_polski_1941Rg';
 }
 
 #top-bar h1 {
-        text-align: left;
-        font-size: 5vw;
+    font-family: inherit;
+    font-size: max(5vw, 5ch);
 }
 
 #top-bar a {
-        color: inherit;
-        text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }
 
-#top-bar li {
-        list-style: none;
-        display: inline;
-        float: none;
+input {
+    display: none;
 }
-#top-bar li a::before {
-        content: "[";
+
+label {
+    cursor: pointer;
+    font-weight: bold;
+    font-family: 'zai_courier_polski_1941Rg';
+    font-size: max(2.5vw, 3ch);
 }
-#top-bar li a::after {
-        content: "]";
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+    width: fit-content;
 }
 
-#bottom-bar {
-        padding: 0.5vw;
-        height: var(--bheight);
-        width: 100%;
+.drophold {
+    background-color: inherit;
+    color: inherit;
+    
+    border: none;
+}
 
-        position: fixed;
-        bottom: 0;
+.dropdown-content {
+    display: none;
+    position: absolute;
+    z-index: 1;
 
-        background-color: var(--cblack);
-        color: var(--cwhite);
+    width: 100%;
+    overflow: auto;
 
-        list-style-type: none;
+    background-color: var(--tb_bgcolor);
+    color: var(--tb_fgcolor);
+}
 
-        font-family: 'zai_courier_polski_1941Rg', 'Courier New', Courier, monospace;
-        text-align: center;
+.drophold:checked~.dropdown-content {
+    display: block;
+}
 
-        /* overflow: auto; Idk why this is "overflowing" but this should be a good enough fix fow now */
-        overflow: auto;
+.dropdown-content a:hover {
+    font-style: italic;
 }
 
-#bottom-flex {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+.dropdown-content a::before {
+    content: "[";
 }
 
-#bottom-bar a {
-        color: inherit;
-        text-decoration: none;
-        font-weight: bold;
+.dropdown-content a::after {
+    content: "]";
 }
 
-/* Surround links with square brackets in the footer */
-#bottom-bar a::before {
-        content: "[";
+.dropdown-content li {
+    text-align: center;
+}
+
+.spacer {
+    width: 50%;
+    height: 50%;
 }
-#bottom-bar a::after {
-        content: "]";
+
+#ddnav {
+    width: 35%;
+    text-align: center;
+
+    font-family: inherit;
 }
 
-#bottom-bar ul {
-    padding: 0;
+#content {
+    padding-left: var(--padding_sides);
+    padding-right: var(--padding_sides);
+
+    padding-top: var(--padding_updown);
+    padding-bottom: var(--padding_updown);
+
+    margin-bottom: 5vw; /* I should find a better way than just setting a static number */
+}
+
+#bottom-bar {
+    padding: 0.75ch;
+    height: fit-content;
+    width: 100%;
+
+    position: fixed;
+    bottom: 0;
+
+    color: var(--tb_fgcolor);
+    background-color: var(--tb_bgcolor);
+
+    font-family: 'zai_courier_polski_1941Rg', 'Courier New', Courier, monospace;
+        text-align: center;
+}
+
+#bottom-bar a {
+    color: inherit;
+    text-decoration: none;
+}
+
+#bottom-bar a::before {
+    content: "["
 }
 
-#bottom-bar li {
-        display: inline;
-        float: none;
+#bottom-bar a:after {
+    content: "]"
 }
 
 #copyrightnotice {