From 9023df0772a80315e6e2418160de8cf5111b91a5 Mon Sep 17 00:00:00 2001
From: nate smith <nateksmith@pm.me>
Date: Sat, 17 Aug 2024 15:03:26 -0500
Subject: [PATCH] bunch of cosmetic stuff

---
 templates/index.tmpl | 31 ++++++++++++++++++-------------
 web/assets/main.js   | 11 ++++++++++-
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/templates/index.tmpl b/templates/index.tmpl
index 1b64851..f798be1 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -25,7 +25,7 @@ body {
 }
 
 #about {
-  background-color: grey;
+  background-color: white;
   display: none;
   color: black;
 }
@@ -130,11 +130,17 @@ a {
       <div is="source-text" class="source"></div>
     </template>
 
-    <h1 style="display:block;margin:0">Trunkless</h1>
-    <p style="margin-top:0;font-size:80%">
-        <a is="about-toggler"></a>
-        <a is="theme-toggler"></a>
-    </p>
+    <div style="display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); gap: 10px;">
+      <div style="grid-column: 1 / 3; grid-row: 1">
+        <h1 style="display:inline-block;margin:0">Trunkless</h1>
+      </div>
+      <div style="grid-column: 3; grid-row: 1; text-align: right; font-size:150%">
+        <span class="corner" style="background:white; padding-right:1em; padding-left:1em; padding-bottom: .5em">
+        <a style="font-weight: bold" is="about-toggler"></a>
+        <a class="bordered" style="border: 1px solid black; padding: 0 6px 0 6px" is="theme-toggler"></a>
+        </span>
+      </div>
+    </div>
     <div id="about">
     <p>
       HELLO. THIS IS A <a href="https://github.com/vilmibm/trunkless">SOFT WARE</a> FOR MAKING <a href="https://en.wikipedia.org/wiki/Cut-up_technique">CUT-UP POETRY</a>. THERE ARE A VARIETY OF CORPORA TO CHOOSE FROM:
@@ -151,7 +157,6 @@ a {
     </p>
     </div>
     <div class="controls">
-      <button is="poem-resetter"></button>
       <form method="GET" action="/" style="display:inline">
         <label for="corpus-select">corpus:</label>
         <select name="corpus" id="corpus-select">
@@ -166,18 +171,18 @@ a {
         </select>
         <button type="submit">go</button>
       </form>
-
-      <form is="poem-saver" style="border: 1px solid grey; display:inline; padding:4px;">
+    </div>
+    <div class="main">
+      <div style="margin-bottom: 5px">
+        <button is="poem-regenner">regenerate unpinned lines</button>
+        <button is="poem-resetter"></button>
+      <form is="poem-saver" style="border-right: 1px solid grey;border-bottom: 1px solid grey;border-left: 1px solid grey; display:inline; padding:4px;">
         <button class="copy" type="submit">copy</button>
         <button class="save" type="submit">save</button>
         <input name="type" value="text" type="radio" checked />as text
         <input name="type" value="image" type="radio"/>as image
         <input name="sources" type="checkbox"/>include sources
       </form>
-    </div>
-    <div class="main">
-      <div style="margin-bottom: 5px">
-        <button is="poem-regenner">regenerate unpinned lines</button>
       </div>
       <div is="poem-lines"></div>
       <div>
diff --git a/web/assets/main.js b/web/assets/main.js
index bdd5443..89797bd 100644
--- a/web/assets/main.js
+++ b/web/assets/main.js
@@ -309,30 +309,39 @@ class ThemeToggler extends HTMLAnchorElement {
   constructor() {
     super();
     this.addEventListener("click", this.click);
-    this.theme = "dark";
+    this.theme = "light";
     this.innerText = "◑";
     this.setAttribute("aria-hidden", "true");
     this.style.cursor = "pointer";
   }
 
   click() {
+    // TODO this should all be done via class toggling my dude
     if (this.theme == "light") {
       this.theme = "dark";
       $("body").style.backgroundColor = "black";
       $("body").style.backgroundImage = 'url("/bg_dark.gif")';
       $("body").style.color = "white";
       $(".main").style.backgroundColor = "black";
+      $("#about").style.backgroundColor = "black";
+      $("#about").style.color = "white";
       $("h1").style.backgroundColor = "black";
       $(".controls form").style.backgroundColor = "black";
+      $(".corner").style.backgroundColor = "black";
+      $(".corner .bordered").style.border = "1px solid white";
       $$("a").forEach((e) => { e.style.color = "white" });
     } else {
       this.theme = "light";
       $("body").style.backgroundColor = "white";
       $("body").style.backgroundImage = 'url("/bg_light.gif")';
       $("body").style.color = "black";
+      $("#about").style.backgroundColor = "white";
+      $("#about").style.color = "black";
       $(".main").style.backgroundColor = "white";
       $(".controls form").style.backgroundColor = "white";
       $("h1").style.backgroundColor = "white";
+      $(".corner").style.backgroundColor = "white";
+      $(".corner .bordered").style.border = "1px solid black";
       $$("a").forEach((e) => { e.style.color = "black" });
     }
   }