From d76a44aa02d0ebfdafdf66d2d153627b4141f8a5 Mon Sep 17 00:00:00 2001
From: Jet <jet@extremist.software>
Date: Thu, 26 Mar 2026 17:40:58 -0700
Subject: [PATCH] fix: more visual fixes to make it tidy

---
 src/pages/qa.ts        |  6 +++---
 src/styles/globals.css | 25 ++++++++++++++-----------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/pages/qa.ts b/src/pages/qa.ts
index e1b2152..67a4640 100644
--- a/src/pages/qa.ts
+++ b/src/pages/qa.ts
@@ -66,8 +66,8 @@ function renderQuestions(list: HTMLElement, questions: Question[]) {
           <div class="qa-item-meta" role="note">
             ${formatQuestionTooltip(q)}
           </div>
-          <p style="color: var(--light-cyan);">${escapeHtml(q.question)}</p>
-          <p class="mt-[1ch]" style="color: var(--light-green);">${escapeHtml(q.answer)}</p>
+          <p style="color: var(--light-gray);">${escapeHtml(q.question)}</p>
+          <p class="mt-[1ch]" style="color: var(--light-blue);">${escapeHtml(q.answer)}</p>
         </section>`,
     )
     .join("");
@@ -91,7 +91,7 @@ export async function qaPage(outlet: HTMLElement) {
                 class="qa-textarea"
                 aria-describedby="qa-status char-count"
                 placeholder="${escapeHtml(placeholderQuestion)}">${escapeHtml(draft)}</textarea>
-              <div class="qa-input-bar" aria-hidden="true">
+              <div class="qa-input-bar">
                 <span id="char-count" class="qa-bar-text">${draft.length}/200</span>
                 <button id="qa-submit" type="submit" class="qa-button">[SUBMIT]</button>
               </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ac2cc7b..76d299c 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -53,6 +53,11 @@ body {
   line-height: 1;
 }
 
+::selection {
+  background-color: var(--light-blue);
+  color: var(--black);
+}
+
 *,
 *::before,
 *::after {
@@ -93,7 +98,7 @@ body {
 }
 
 .site-shell {
-  width: min(100%, 66.666667%);
+  width: min(100%, 60%);
   box-sizing: border-box;
   margin: 0 auto;
   user-select: text;
@@ -166,6 +171,9 @@ a[aria-current="page"] {
   padding: 1ch;
   background-color: rgba(0, 0, 0, 0.18);
   border: 2px solid var(--white);
+  display: flex;
+  flex-direction: column;
+  gap: 1ch;
 }
 
 .qa-page {
@@ -206,13 +214,13 @@ a[aria-current="page"] {
 
 .qa-textarea {
   width: 100%;
+  min-height: 2lh;
   background-color: transparent;
   border: none;
   caret-color: var(--white);
+  caret-shape: block;
   color: var(--light-gray);
   padding: 0;
-  padding-right: 14ch;
-  padding-bottom: 4ch;
   overflow-y: auto;
   resize: none;
   font-family: inherit;
@@ -225,17 +233,11 @@ a[aria-current="page"] {
 }
 
 .qa-input-bar {
-  position: absolute;
-  right: 2px;
-  bottom: 2px;
-  left: 2px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1ch;
-  padding: 0 1ch 1ch;
-  pointer-events: none;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
+  pointer-events: auto;
 }
 
 .qa-bar-text {
@@ -244,11 +246,12 @@ a[aria-current="page"] {
 
 .qa-button {
   border: none;
-  padding: 0.25ch 1ch;
+  padding: 0;
   color: var(--yellow);
   background: transparent;
   font-family: inherit;
   font-size: inherit;
+  line-height: inherit;
   cursor: pointer;
   pointer-events: auto;
 }