Redesign website

5 files changed, 179 insertions, 76 deletions

diff --git a/static/css/blog.css b/static/css/blog.css
new file mode 100644
index 0000000..2b52dff
--- /dev/null
+++ b/static/css/blog.css
@@ -0,0 +1,63 @@
+#title {
+    margin: 0 0 3rem 0;
+}
+
+#title > h1 {
+    margin-bottom: 0.4rem;
+}
+
+figure {
+    text-align: center;
+    font-style: italic;
+    font-size: 0.8rem;
+}
+
+figure img {
+    max-width: 100%;
+    border-radius: 10px;
+}
+
+.blog-post, .blog-post-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.blog-post-title {
+    flex-grow: 1;
+}
+
+.blog-post {
+    padding: 0.2rem 0;
+}
+
+.blog-post-header {
+    padding: 0.5rem 0;
+    color: var(--color-text-muted);
+}
+
+.blog-post-header, .blog-post:last-of-type {
+    border-bottom: 1px dotted var(--color-text-muted);
+}
+
+#content {
+    position: relative;
+}
+
+#back-header {
+    position: relative;
+    font-size: 1rem;
+    top: -2rem;
+    font-family: var(--font-monospace);
+    width: 700px;
+}
+
+#back-container {
+    position: absolute;
+    height: 0;
+    width: 0;
+}
+
+#back-footer {
+    margin-top: 4rem;
+}
diff --git a/static/css/contact.css b/static/css/contact.css
new file mode 100644
index 0000000..42bd8d9
--- /dev/null
+++ b/static/css/contact.css
@@ -0,0 +1,24 @@
+.grid-outer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.grid-inner {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+}
+
+.grid-title {
+    flex-basis: 250px;
+    font-family: var(--font-monospace);
+    color: var(--color-text-muted);
+    text-align: right;
+}
+
+.grid-content {
+    width: 100%
+}
diff --git a/static/css/globalstyles.css b/static/css/globalstyles.css
index 1f22f5e..9fbb974 100644
--- a/static/css/globalstyles.css
+++ b/static/css/globalstyles.css
@@ -1,113 +1,81 @@
-@import url('https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-
-.website-name {
-    font-size: 10px;
-    font-weight: 700;
-    line-height: 1.2;
-    color: #ddd;
-    text-shadow: 0px 1px 10px #9876aa;
-}
+@import 'variables.css';
 
 html, body {
     border: 0;
     margin: 0;
     background-color: #111;
     color: #ddd;
-    font-family: 'Cousine', monospace, sans-serif;
-    line-height: 1.3;
+    line-height: 1.6;
+    font-size: 18px;
+    font-family: var(--font-sans-serif);
 }
 
-h1, h2, h3, h4, h5, h6 {
-    color: #cc7832
-}
-
-.code-block {
-    background-color: #222;
-    border: solid 1px #333;
-    padding: 10px;
-}
-
-#navbar {
-    background-color: #222;
-    width: 100%;
+#main-container {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: 10px;
+    width: 100%;
+    max-height: calc(100vh - 1rem);
 }
 
-.navbar-element {
-    background-color: #222;
+#navbar {
+    padding: 2rem 1rem 1rem 6rem;
     display: flex;
-    height: 30px;
-    text-align: center;
-    line-height: 30px;
-    padding: 10px;
-}
-
-.navbar-element:hover {
-    background-color: #888;
-    transition: 0.2s;
-    cursor: pointer;
+    flex-direction: column;
+    align-items: end;
+    gap: 0.4rem;
+    font-size: 0.9em;
+    font-family: var(--font-monospace);
 }
 
-.navbar-element > a {
-    color: #fff;
-    text-decoration: none;
+@media only screen and (max-width: 1000px) {
+    #navbar {
+        padding-left: 1rem;
+    }
 }
 
-.navbar-element > .highlight {
-    color: #ffc66d;
+a {
+    color: var(--color-text-link);
+    text-decoration: underline dotted var(--color-text-link);
 }
 
-#main-container {
-    max-width: 1200px;
-    margin: 0 auto;
+a:hover {
+    background-color: var(--color-text-link-bg);
 }
 
 #content-container {
-    box-shadow: 0px 0px 15px 10px rgba(152,118,170,0.05);
+    overflow: scroll;
+    max-height: 100%;
+    flex-grow: 1;
+    scrollbar-color: var(--color-scrollbar) var(--color-background);
 }
 
-#content {
-    padding: 20px;
-    max-width: 1200px;
-    background-color: #2b2b2b;
-    margin: 0 auto;
+::-webkit-scrollbar {
+    width: 4px;
+    background: var(--color-background);
 }
 
-a {
-    color: #9876aa;
-    text-decoration: underline;
+::-webkit-scrollbar-thumb {
+    background: var(--color-scrollbar);
+    border-radius: 2px;
 }
 
-.highlight {
-    color: #ffc66d;
+::-webkit-scrollbar-corner {
+    background: none;
 }
 
-.footer {
-    font-size: 10px;
-}
-
-.redlink {
-    color: #ff4136;
+#content {
+    margin: 8rem auto 6rem auto;
+    width: 700px; 
 }
 
-.box {
-    border: solid 1px #fff;
-    padding: 10px;
-    background-color: rgba(0, 0, 0, 0.1);
+h1, h2, h3, h4 {
+    font-family: var(--font-monospace);
 }
 
-.box-red {
-    border: solid 1px rgba(255, 0, 0, 0.5);
-    padding: 10px;
-    background-color: rgba(255, 0, 0, 0.2);
+.monospace {
+    font-family: var(--font-monospace);
 }
 
-table, th, td {
-	border: 1px solid rgb(200, 200, 200);
-	border-collapse: collapse;
-	padding: 10px;
+code {
+    font-family: var(--font-monospace);
 }
diff --git a/static/css/home.css b/static/css/home.css
new file mode 100644
index 0000000..4920ee3
--- /dev/null
+++ b/static/css/home.css
@@ -0,0 +1,27 @@
+.grid-outer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+}
+
+.grid-inner {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.grid-title {
+    flex-basis: 50px;
+    font-family: var(--font-monospace);
+    color: var(--color-text-muted);
+    text-align: right;
+}
+
+.grid-content {
+    width: 100%
+}
+
+.spacer {
+    height: 3rem;
+}
diff --git a/static/css/variables.css b/static/css/variables.css
new file mode 100644
index 0000000..123ee30
--- /dev/null
+++ b/static/css/variables.css
@@ -0,0 +1,21 @@
+@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@200&family=Hind&family=Noto+Sans&display=swap');
+
+@font-face {
+    font-family: 'Iosevka Web';
+    src: url(/fonts/iosevka-medium.woff2) format('woff2');
+    font-stretch: condensed;
+    font-display: swap;
+}
+
+:root {
+    --font-sans-serif: 'Hind', 'Noto Sans', 'Segoe UI', 'Chivo', sans-serif;
+    --font-monospace: 'Iosevka Web', monospace;
+    
+    --color-background: #111;
+    --color-text: #ddd;
+    --color-text-muted: #aaa;
+    --color-text-link: #ff851b;
+    --color-text-link-bg: rgba(255, 133, 27, 0.2);
+
+    --color-scrollbar: rgba(255, 255, 255, 0.4);
+}