figured out font colors, widths, style (#116)

purajit · web-flow · commit 3de2e8820652 · 2024-10-04T01:06:14.000-07:00
diff --git a/Makefile b/Makefile
@@ -23,11 +23,11 @@ enter-server:
 	docker exec -w /usr/share/nginx/html -it purajit.com sh
 
 generate-pages-local: get-yass
-	./generate_site.py yass_config_local.json
+	uv run ./generate_site.py yass_config_local.json
 
 # only used in local testing, but with "CDN" paths instead of local ones
 generate-pages-cdn: get-yass
-	./generate_site.py yass_config_prod.json
+	uv run ./generate_site.py yass_config_prod.json
 
 clean:
 	git clean -fd
diff --git a/requirements.txt b/requirements.txt
@@ -1 +1,2 @@
 Jinja2==3.1.2
+marko
diff --git a/templates/footer.html b/templates/footer.html
@@ -1,4 +1,3 @@
-            <div class="v-spacer"></div>
             <div class="force-dyad">ah, a force dyad</div>
         </div>
     </div>
diff --git a/templates/header.html b/templates/header.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 {% include 'head.html' %}
-<body class="bgimg" style="background-image: url({{ static_url }}/images/bg1-blurred.jpg);">
+<body class="bgimg">
     <div id="main">
         <div id="name">
             <a href="{{ parent_page }}">←</a>
diff --git a/templates/index.css b/templates/index.css
@@ -21,17 +21,22 @@
 }
 
 :root {
-    --bg: #181a1b;
+    --light-bg: #e5dcc3;
+    --bg: #301f15;
     --text: #e8e6e3;
     --page-margin: 8%;
 }
 
 body {
     font-family: "Libre Caslon Text";
     color: var(--text);
-    background-color: var(--bg);
-    margin: 0;
+    background-color: var(--light-bg);
     width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 8%;
+    padding-bottom: 8%;
+    margin: 0;
 }
 
 /* overriding defaults */
@@ -70,7 +75,7 @@ input {
 code {
     background: #3A3B3C;
     border-left: 3px solid #f36d33;
-    color: white;
+    color: var(--light-bg);
     page-break-inside: avoid;
     font-family: "Lekton";
     font-size: 19px;
@@ -83,27 +88,18 @@ code {
 }
 
 /* primary page elements that appear everywhere */
-.bgimg {
-    /* actual image url in code to allow for static url templating */
-    background-size: 100% 100%;
-    position: absolute;
-    background-attachment: fixed;
-}
-
 #main {
     display: flex;
     flex-direction: column;
     font-weight: 500;
-    margin: var(--page-margin) auto var(--page-margin) auto;
-    min-width: 300px;
-    max-width: 1350px;
+    width: min(1000px, 100vw);
 }
 
 #name {
     font-size: 60px;
     font-weight: bold;
-    background-color: var(--text);
-    color: var(--bg);
+    background-color: var(--bg);
+    color: var(--light-bg);
     width: fit-content;
     padding: 10px 10px 10px 10px;
     margin-bottom: 30px;
@@ -119,16 +115,21 @@ code {
     margin-bottom: 200px;
 }
 
-#name > a, .contents-item > a {
-    color: inherit;
+#name > a {
+    color: var(--light-bg);
+    text-decoration: none;
+}
+
+.contents-item > a {
+    color: var(--bg);
     text-decoration: none;
 }
 
 .contents-item {
     font-size: 45px;
     width: fit-content;
     padding: 10px 10px 10px 10px;
-    background-color: black;
+    /* background-color: var(--bg); */
 }
 
 .contents-item:not(:first-of-type) {
@@ -146,22 +147,22 @@ code {
     width: 100%;
     padding: 50px;
     font-size: 25px;
-    background: black;
+    background: var(--bg);
     border-radius: 20px;
     box-sizing: border-box;
 }
 
 .writing {
-    background: white;
-    color: black;
+    background: var(--bg);
+    color: D7CDB0;
 }
 
 .preserve-whitespace {
     white-space: pre-wrap;
 }
 
 .writing-title {
-    color: darksalmon;
+    color: var(--light-bg);
 }
 
 /* tables
@@ -185,7 +186,7 @@ code {
 
 .table-column {
     flex: 1;
-    border: 1px solid white;
+    border: 1px solid var(--light-bg);
     min-height: 40px;
     display: flex;
     align-items: center;
@@ -198,12 +199,12 @@ code {
 }
 
 .table-column:not(:nth-last-of-type(1)) {
-    border-right: 1px solid white;
+    border-right: 1px solid var(--light-bg);
 }
 
 .table-header {
-    background-color: white !important;
-    color: black;
+    background-color: var(--light-bg) !important;
+    color: var(--bg);
     font-weight: bold;
     position: sticky;
     top: 0;
@@ -304,7 +305,7 @@ code {
     height: 300px;
     resize: none;
     border: none;
-    border-bottom: 1px solid rgba(172, 225, 110, 0.5);
+    border-bottom: 1px solid var(--light-bg);
     background: transparent;
     outline: none;
     color: var(--text);
@@ -313,7 +314,7 @@ code {
     margin-top: 30px;
 }
 
-#hourglass-form {
+ #hourglass-form {
     margin-top: 10px;
     margin-bottom: 10px;
 }
@@ -350,13 +351,10 @@ code {
     justify-content: center;
     margin-left: 10px;
     margin-right: 10px;
-    height:
- var(--cs-height-min);
+    height: var(--cs-height-min);
     cursor: pointer;
     user-select: none;
-    transition: brightness 0.1s ease, filter 0.1s ease;
     border-radius: 5px;
-    filter: brightness(150%);
-    background: grey;
-    color: black;
+    background: var(--light-bg);
+    color: var(--bg);
 }
diff --git a/templates/template_index.html b/templates/template_index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 {% include 'head.html' %}
-<body class="bgimg" style="background-image: url({{ static_url }}/images/bg1-blurred.jpg);">
+<body class="bgimg">
     <div id="main" class="index-page">
         <div id="name">
             {{ title }}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`- <div class="v-spacer"></div>`
`2`	`1`	`<div class="force-dyad">ah, a force dyad</div>`
`3`	`2`	`</div>`
`4`	`3`	`</div>`