8 files changed, 41 insertions(+), 28 deletions(-)

M bricks/base-header.thtml
M bricks/navbar.thtml
M pages/colophon.fxg
M scripts/fetch-greet.js
A static/darker-grotesque.ttf
M styles/base.css
M styles/index.css
M templates/pages/index.thtml

@@ 2,7 2,3 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="/styles/base.css">
 <script src="/scripts/dyn-codeberg-logo.js"></script>
-
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">

@@ 15,7 15,7 @@
     </div>
     <div class="link-group">
         <a href="/colophon.html">colophon</a>
-        <a href="/static/nowhere.html">nowhere</a>
+        <a href="/nowhere">nowhere</a>
     </div>
 
 </nav>

@@ 4,13 4,12 @@ you're looking at a <#https://en.wiktionary.org/wiki/beautiful#English beautiful
 
 ===== fonts =====
 
-this website's main text is set in //Merriweather//, a serif font optimised for screens. All headers and other sans-serif elements are set in //Geom//.
+this website's main text is set in //Georgia//, a web-safe serif font. All headers and other sans-serif elements are set in //Darker Grotesque//.
 
 ===== technical =====
 
-the site generator is a non-gmo <#https://github.com/m1kadev/www.m1kadev.nl/tree/main/kethel/ elixir tool>. the internal markup language is <#https://github.com/m1kadev/fxg fxg>, made to be more legible than markdown. 
+the site generator is a non-gmo <#https://github.com/m1kadev/www.m1kadev.nl/tree/main/kethel/ elixir tool>. the internal markup language is <#https://github.com/m1kadev/fxg fxg>, made to be more legible than markdown.
 
 templating the final html is handled by <#https://mustache.github.io mustache>, a stateless templating library.
 
 css, js, and html parsing are handled by lightningcss, uglifyjs, and html-minifier-next, respectively.
-

@@ 6,10 6,9 @@ addEventListener("load", async (ev) => {
     const greetElem = document.getElementById("greet");
     const request = await fetch("https://api.m1kadev.nl/greet");
     const repsonse = await request.json();
-    greetElem.innerHTML = repsonse.quote; // this is misspelled in the prod api LMAAO
+    greetElem.innerHTML = repsonse.quote;
     greetElem.lang = repsonse.lang;
-    authorElem.innerHTML = repsonse.author;
-    authorElem.style.display = "none";
+    authorElem.innerHTML = `- ${repsonse.author}`;
 
     greetElem.parentElement.style.display = "initial";
 });

@@ 1,11 1,18 @@
+@font-face {
+    font-family: "Darker Grotesque";
+    src: url("/static/darker-grotesque.ttf");
+}
+
 :root {
-    --serif-font: "Merriweather", serif;
-    --sans-serif-font: "Geom", sans-serif;
+    --serif-font: "Georgia", serif;
+    --sans-serif-font: "Darker Grotesque", sans-serif;
     color-scheme: light dark;
     --fg-color: light-dark(#1a1417, #eee);
     --bg-color: light-dark(#fdf9fa, #212121);
     --accent-color: #ee41b4;
-    --main-padding: 0.65rem;
+    --main-padding: 0.4rem;
+    --paragraph-padding: 0.65rem;
+
     --main-border: 0.075rem solid var(--fg-color);
 }
 


@@ 27,11 34,14 @@ h6 {
     margin: 0;
     border-bottom: var(--main-border);
     padding: var(--main-padding);
-    font-weight: 500;
     font-style: italic;
     font-stretch: condensed;
 }
 
+h1 {
+    font-size: 28pt;
+}
+
 a {
     color: var(--accent-color);
 }


@@ 72,21 82,17 @@ nav {
     font-size: 1.2rem;
 }
 
-nav > h3 {
-    font-weight: normal;
-    font-size: 1.2rem;
-}
-
 main {
     width: 100vw;
 }
 
 p {
     border-bottom: var(--main-border);
+
     padding-right: calc(-450px + 100%);
-    padding-bottom: var(--main-padding);
-    padding-top: var(--main-padding);
-    padding-left: var(--main-padding);
+    padding-bottom: var(--paragraph-padding);
+    padding-top: var(--paragraph-padding);
+    padding-left: var(--paragraph-padding);
     margin: 0;
 }
 

@@ 1,14 1,27 @@
 aside > h2 {
-    border-left: 0.1rem solid var(--fg-color);
+    font-size: 24pt;
+    font-family: var(--sans-serif-font);
+    border-bottom: 0;
 }
 
 aside > span {
-    border-left: 0.1rem solid var(--fg-color);
+    font-family: var(--serif-font);
+    font-style: italic;
+    text-align: right;
+    margin-top: 1rem;
+    display: none;
+}
+
+aside:hover > span {
+    display: initial;
 }
 
 aside {
     writing-mode: vertical-rl;
+    border-left: 0.1rem solid var(--fg-color);
     border-bottom: 0;
-    display: flex;
-    flex-direction: column;
+}
+
+aside:hover {
+    padding-left: 0.5rem;
 }

@@ 22,8 22,8 @@
         {{ &footer }}
     </main>
     <aside style="display:none;">
-        <span id="author"></span>
         <h2 id="greet">placehoders are nice :)</h2>
+        <span id="author"></span>
     </aside>
 </body>
 </html>