refactor css (#149)

Author: purajit

templates/header.html

@@ -4,5 +4,6 @@
     <div id="main">
         <div id="name">
             <a href="{{ parent_page }}">←</a>
-            {{ title }}</div>
+            {{ title }}
+        </div>
         <div id="contents">

templates/index.css

@@ -25,6 +25,7 @@
     --bg: #301f15;
     --text: #e8e6e3;
     --page-margin: 8%;
+    --gap: 0.5rem;
 }
 
 html, body {
@@ -133,78 +134,80 @@ code {
 .contents-item {
     font-size: 2rem;
     width: fit-content;
-    padding: 10px 10px 10px 10px;
     /* background-color: var(--bg); */
 }
 
-.contents-item:not(:first-of-type) {
-    margin-top: 10px;
-}
-
 /* TODO: just remove h1s and define classes with larger fonts */
 #contents h1 {
     padding: 0;
-    margin: 0px 0px 0px 0px;
+    margin: 0;
 }
 
 /* main box for all other pages*/
 .page-content {
     width: 100%;
     padding: 50px;
-    font-size: 1rem;
     background: var(--bg);
     border-radius: 20px;
     box-sizing: border-box;
 }
 
-.writing {
-    background: var(--bg);
-    color: D7CDB0;
+/* recipe page */
+.recipe-sidebar {
+    width: max(350px, 25%);
+    min-width: max(350px, 25%);
 }
 
-.preserve-whitespace {
-    white-space: pre-wrap;
+.recipe-sources {
+    font-size: 0.5rem;
 }
 
-.writing-title {
-    color: var(--light-bg);
+/* zeitgeist page */
+.zeitgeist-section .flex-row {
+    width: 100%;
 }
 
-/* tables
-   TODO: use simplified version used in mythmancer.com
-*/
-.table {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 40px;
+.zeitgeist-section img {
+    border: 0;
+    max-width: calc((100% - 2rem) / 5);
 }
 
-.table-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
+.zeitgeist-lower-row img {
+    max-width: calc((100% - 4.5rem) / 10);
 }
 
-.table-row.label {
+/* tools */
+#screamintovoid {
+    width: min(500px, 100%);
+    height: 300px;
+    resize: none;
+    border: none;
+    border-bottom: 1px solid var(--light-bg);
+    background: rgba(255, 255, 255, 0.04);
+    padding: 15px;
+    outline: none;
+    color: var(--text);
+    font-family: "Libre Caslon Text";
     font-size: 1rem;
 }
 
-.table-column {
-    flex: 1;
-    border: 1px solid var(--light-bg);
-    min-height: 40px;
+/* generics */
+.flex-col {
     display: flex;
-    align-items: center;
-    padding-left: 10px;
-    overflow: hidden;
+    flex-direction: column;
 }
 
-.table.no-borders .table-column {
-    border: none;
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.gappy {
+    gap: var(--gap);
 }
 
-.table-column:not(:nth-last-of-type(1)) {
-    border-right: 1px solid var(--light-bg);
+.gappy-2x {
+    gap: calc(2 * var(--gap));
 }
 
 .table-header {
@@ -215,119 +218,27 @@ code {
     top: 0;
 }
 
-.table .table-row:nth-child(even) {
-    background-color: rgb(255, 255, 255, 0.15);
-}
-
-.table .table-row.non-alternating:nth-child(even) {
-    background-color: transparent !important;
-}
-
-/* recipe page */
-.recipe-card {
-    display: flex;
-    flex-direction: row;
-}
-
-.recipe-sidebar {
-    display: flex;
-    flex-direction: column;
-    min-width: 350px;
-    max-width: 25%;
-}
-
-.recipe-ingredients {
-    padding-top: 20px;
-}
-
-.recipe-steps {
-    padding-left: 30px;
-}
-
-.recipe-sources {
-    padding-top: 20px;
-    font-size: 0.5rem;
-}
-
-/* about page */
-.work-logo {
-    height: 100px;
-    width: auto;
-}
-
-/* thoughts page */
-.thought-group {
-    margin-bottom: 40px;
-}
-
-/* TODO: replace brs with meaningful divs/sizing */
-.thoughts br {
-    margin-top: 5px;
-    display: block;
-}
-
-/* zeitgeist page */
-.zeitgeist-heading {
-    display: flex;
-    flex-direction: row;
-}
-
-.zeitgeist-section .table img {
-    width: 100%;
-}
-
-.zeitgeist-section .table-column {
-    padding: 5px;
-    border: 0;
-    border-right: 0;
-    max-width: 20%;
-}
-
-.zeitgeist-lower-row .table-column {
-    max-width: 10%;
-    box-sizing: border-box;
-}
-
-.zeitgeist-section .table-column:not(:nth-last-of-type(1)) {
-    border: 0;
-}
-
-.zeitgeist-section .table .table-row:nth-child(even) {
-    background-color: transparent;
+.table .flex-col {
+    min-height: 40px;
+    align-items: center;
+    overflow: hidden;
+    width: 50%;
 }
 
-/* tools */
-#qr {
-    display: flex;
-    flex-direction: column;
-    width: 300px;
-    align-self: center;
+.table > .flex-row:nth-child(even) {
+    background-color: rgb(255, 255, 255, 0.15);
 }
 
-#screamintovoid {
-    min-width: 40%;
-    max-width: 300px;
-    height: 300px;
-    resize: none;
-    border: none;
-    border-bottom: 1px solid var(--light-bg);
-    background: transparent;
-    outline: none;
-    color: var(--text);
-    font-family: "Libre Caslon Text";
-    font-size: 2rem;
-    margin-top: 30px;
+.table > .flex-row.non-alternating:nth-child(even) {
+    background-color: transparent !important;
 }
 
-#fullscreen-btn {
-    margin-left: auto;
-    width: fit-content;
-    cursor: pointer;
+.preserve-whitespace {
+    white-space: pre-wrap;
 }
 
-/* generics */
-.v-spacer {
-    height: 100%;
+.writing-title {
+    color: var(--light-bg);
 }
 
 .force-dyad {
@@ -337,20 +248,6 @@ code {
     display: flex;
 }
 
-.btn {
-    /* Button, should be paired with a color */
-    display: flex;
-    justify-content: center;
-    margin-left: 10px;
-    margin-right: 10px;
-    height: var(--cs-height-min);
-    cursor: pointer;
-    user-select: none;
-    border-radius: 5px;
-    background: var(--light-bg);
-    color: var(--bg);
-}
-
 .notes {
     font-size: 1rem;
 }

templates/template_about.html

@@ -1,13 +1,15 @@
 {% with title="purajit | about" %}
 {% include './header.html' %}
 {% endwith %}
-<div class="about page-content">
+<div class="page-content flex-col gappy">
     <h1>software engineer / writer (barely) / musician (not even)</h1>
-    i'd love to contribute to: education, public transit, biology, sustainability, lab research<br/>
-    don't contact me about: crypto/web3/blockchain, fintech, amazon, facebook, tech middleman/marketplace services<br/><br/>
+    <div>i'd love to contribute to: education, public transit, biology, sustainability, lab research</div>
+    <div>don't contact me about: crypto/web3/blockchain, fintech, amazon, facebook, tech middleman/marketplace services</div>
     <h1>worked at:</h1>
+    <div class="flex-row gappy">
     {% for job in data['work'] %}
-    <a href="{{ job['link'] }}"><img class="work-logo" src="{{ static_url }}/images/work-{{ job['key'] }}.png"></a>
+      <a href="{{ job['link'] }}"><img class="work-logo" src="{{ static_url }}/images/work-{{ job['key'] }}.png" height="100px"></a>
     {% endfor %}
+    </div>
 </div>
 {% include './footer.html' %}

templates/template_basics_table.html

@@ -1,7 +1,7 @@
 {% with title="purajit | recipes" %}
 {% include './header.html' %}
 {% endwith %}
-<div class="writing page-content">
+<div class="page-content">
     <h1 class="writing-title">{{ title }}</h1><br>
     <div class="table">
         <div class="table-row table-header">

templates/template_blog.html

@@ -1,7 +1,7 @@
 {% with title="purajit | blog" %}
 {% include './header.html' %}
 {% endwith %}
-<div class="writing page-content">
+<div class="page-content">
 {{ data }}
 </div>
 {% include './footer.html' %}

templates/template_content_table.html

@@ -1,5 +1,7 @@
+<div class="flex-col gappy-2x">
 {% for item in contents %}
 <div class="contents-item">
     <a href="{{ item['link'] }}">{{ item['title'] }}</a>
 </div>
 {% endfor %}
+</div>

templates/template_continuous_dice.html

@@ -105,6 +105,7 @@
   font-weight: 500;
   text-align: center;
   margin-bottom: 0.25rem;
+  border-bottom: 1px solid white;
 }
 
 .history-entry {

templates/template_lorem.html

@@ -1,7 +1,7 @@
 {% with title="purajit | lorem" %}
 {% include './header.html' %}
 {% endwith %}
-<div class="page-content">
-    {{ data }}
+<div class="page-content flex-col">
+{{ data }}
 </div>
 {% include './footer.html' %}

templates/template_qr.html

@@ -1,7 +1,7 @@
 {% with title="purajit | tools" %}
 {% include './header.html' %}
 {% endwith %}
-<div class="page-content">
-    <img id="qr" src="{{ static_url }}/images/qr.jpg">
+<div class="page-content flex-row">
+    <img id="qr" src="{{ static_url }}/images/qr.jpg" width="300px">
 </div>
 {% include './footer.html' %}