From 0a563e6121803636a340f4fc6537b99151d3e66e Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Thu, 10 Jul 2025 18:11:49 +0100
Subject: [PATCH 1/2] rework post design; refine light theme

---
 src/lib/app.css                     | 16 ++++++++++++----
 src/lib/ui/Navigation.svelte        |  4 ++++
 src/lib/ui/post/Body.svelte         |  1 -
 src/lib/ui/post/Post.svelte         | 10 +++++-----
 src/lib/ui/post/ReplyContext.svelte |  3 +--
 src/routes/+page.svelte             |  1 +
 6 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/lib/app.css b/src/lib/app.css
index 2119752..cca7bbd 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -8,6 +8,12 @@
     --bg-600: #edf5ba;
     --accent: #899911;
     --text: #11100d;
+
+    --bg-1000: #fffcf7;
+    --bg-800: #f2e8d7;
+    --bg-700: #d9ccad;
+    --accent: #92a40a;
+    --text: #322e1f;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -31,10 +37,6 @@
     }
 }
 
-@supports (font-variation-settings: normal) {
-    body { font-family: InterVariable, sans-serif; }
-}
-
 body {
     margin: 0;
     padding: 0;
@@ -48,6 +50,12 @@ body {
     box-sizing: border-box;
 }
 
+@supports (font-variation-settings: normal) {
+    body {
+        font-family: InterVariable, sans-serif;
+    }
+}
+
 a {
     color: var(--accent);
     text-decoration: none;
diff --git a/src/lib/ui/Navigation.svelte b/src/lib/ui/Navigation.svelte
index a5bedfd..bb09632 100644
--- a/src/lib/ui/Navigation.svelte
+++ b/src/lib/ui/Navigation.svelte
@@ -200,6 +200,8 @@
         height: calc(100vh - 32px);
         border-radius: 8px;
         background-color: var(--bg-800);
+        transition: background-color .1s linear;
+        user-select: none;
     }
 
     .server-header {
@@ -213,6 +215,7 @@
         background-size: cover;
         background-color: var(--bg-600);
         background-image: linear-gradient(to top, var(--bg-800), var(--bg-600));
+        transition: background .1s linear;
     }
 
     .server-icon {
@@ -270,6 +273,7 @@
         font-size: .9em;
         opacity: .6;
         text-align: center;
+        user-select: text;
     }
 
     .version ul {
diff --git a/src/lib/ui/post/Body.svelte b/src/lib/ui/post/Body.svelte
index 2760b56..5cb160f 100644
--- a/src/lib/ui/post/Body.svelte
+++ b/src/lib/ui/post/Body.svelte
@@ -84,7 +84,6 @@
     }
 
     .post-text {
-        font-size: .9em;
         line-height: 1.45em;
         word-wrap: break-word;
     }
diff --git a/src/lib/ui/post/Post.svelte b/src/lib/ui/post/Post.svelte
index 1178a24..819d994 100644
--- a/src/lib/ui/post/Post.svelte
+++ b/src/lib/ui/post/Post.svelte
@@ -73,19 +73,19 @@
 </div>
 
 <style>
+    .post-container:first-of-type {
+        border-top: none;
+    }
     .post-container {
         width: 732px;
         max-width: 732px;
-        margin-bottom: 8px;
         display: flex;
         flex-direction: column;
-        border-radius: 8px;
-        background-color: var(--bg-800);
+        border-top: 1px solid color-mix(in srgb, transparent, var(--text) 25%);
     }
 
     .post {
         padding: 16px;
-        border-radius: 8px;
         transition: background-color .1s;
         cursor: pointer;
     }
@@ -100,7 +100,7 @@
     }
 
     .post:hover {
-        background-color: color-mix(in srgb, var(--bg-800), black 5%);
+        background-color: color-mix(in srgb, transparent, var(--bg-800) 25%);
     }
 
     .post-container:has(.post-context) .post {
diff --git a/src/lib/ui/post/ReplyContext.svelte b/src/lib/ui/post/ReplyContext.svelte
index 0474460..ebc124a 100644
--- a/src/lib/ui/post/ReplyContext.svelte
+++ b/src/lib/ui/post/ReplyContext.svelte
@@ -61,13 +61,12 @@
         flex-direction: row;
         color: var(--text);
         align-items: stretch;
-        border-radius: 8px;
         transition: background-color .1s;
         cursor: pointer;
     }
 
     .post-reply:hover {
-        background-color: color-mix(in srgb, var(--bg-800), black 5%);
+        background-color: color-mix(in srgb, var(--bg-800), transparent 50%);
     }
 
     .post-avatar-container {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 156a07b..c61d312 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -50,6 +50,7 @@
         margin: 16px 0 8px 0;
         display: flex;
         flex-direction: row;
+        user-select: none;
     }
 
     header h1 {

From c402f329a7cb4c85fc4d037134c57f5805be1657 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Thu, 10 Jul 2025 22:32:54 +0100
Subject: [PATCH 2/2] rework of navigation UI

---
 src/lib/ui/Button.svelte       | 22 +++++++++-------------
 src/lib/ui/Notification.svelte | 11 ++++++-----
 src/lib/ui/post/Body.svelte    |  2 +-
 src/lib/ui/post/Post.svelte    |  6 +++---
 src/routes/+page.svelte        |  1 +
 5 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/lib/ui/Button.svelte b/src/lib/ui/Button.svelte
index 22e4d87..883fb8c 100644
--- a/src/lib/ui/Button.svelte
+++ b/src/lib/ui/Button.svelte
@@ -48,10 +48,9 @@
 
 <style>
     button {
-        /* min-width: 64px; */
         width: 100%;
-        height: 54px;
-        padding: 16px;
+        height: fit-content;
+        padding: .7em .8em;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -62,12 +61,10 @@
         text-align: left;
 
         border-radius: 8px;
-        border-width: 2px;
-        border-style: solid;
+        border: 2px solid var(--bg-700);
 
-        background-color: var(--bg-700);
+        background-color: transparent;
         color: var(--text);
-        border-color: transparent;
 
         transition-property: border-color, background-color, color;
         transition-timing-function: ease-out;
@@ -82,13 +79,11 @@
     }
 
     button:hover {
-        background-color: color-mix(in srgb, var(--bg-700), var(--accent) 10%);
-        border-color: color-mix(in srgb, var(--bg-700), var(--accent) 20%);
+        background-color: color-mix(in srgb, transparent, var(--bg-700) 50%);
     }
 
     button:active {
-        background-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 50%);
-        border-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 10%);
+        background-color: var(--bg-700);
     }
 
     button.active {
@@ -127,7 +122,6 @@
     }
 
     button.disabled {
-        background-color: var(--bg-700);
         color: var(--text);
         opacity: .5;
         border-color: transparent;
@@ -135,13 +129,15 @@
     }
 
     button.disabled:hover {
+        background-color: transparent;
     }
 
     button.disabled:active {
+        background-color: transparent;
     }
 
     .icon:not(:empty) {
-        height: 150%;
+        height: 1.8em;
         margin-right: 8px;
     }
 
diff --git a/src/lib/ui/Notification.svelte b/src/lib/ui/Notification.svelte
index b44b63e..63e4703 100644
--- a/src/lib/ui/Notification.svelte
+++ b/src/lib/ui/Notification.svelte
@@ -141,18 +141,19 @@
 <style>
     .notification {
         display: block;
-        margin-bottom: 8px;
+        border-top: 1px solid color-mix(in srgb, transparent, var(--text) 50%);
         padding: 16px;
-        border-radius: 8px;
-        background: var(--bg-800);
         text-decoration: inherit;
         color: inherit;
         transition: background-color .1s;
         cursor: pointer;
     }
+    .notification:first-of-type {
+        border-top: none;
+    }
 
     .notification:hover {
-        background-color: color-mix(in srgb, var(--bg-800), black 5%);
+        background-color: color-mix(in srgb, var(--bg-800), transparent 50%);
     }
 
     header {
@@ -280,7 +281,7 @@
         width: calc(100% - 16px);
         margin-bottom: 10px;
         padding: 4px 8px;
-        --warn-bg: color-mix(in srgb, var(--bg-700), var(--accent) 1%);
+        --warn-bg: color-mix(in srgb, transparent, var(--bg-700) 50%);
         background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
         font-family: inherit;
         font-size: inherit;
diff --git a/src/lib/ui/post/Body.svelte b/src/lib/ui/post/Body.svelte
index 5cb160f..71e7547 100644
--- a/src/lib/ui/post/Body.svelte
+++ b/src/lib/ui/post/Body.svelte
@@ -60,7 +60,7 @@
         width: 100%;
         margin-bottom: 10px;
         padding: 4px 8px;
-        --warn-bg: color-mix(in srgb, var(--bg-700), var(--accent) 1%);
+        --warn-bg: color-mix(in srgb, transparent, var(--bg-700) 50%);
         background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
         font-family: inherit;
         font-size: inherit;
diff --git a/src/lib/ui/post/Post.svelte b/src/lib/ui/post/Post.svelte
index 819d994..71718a2 100644
--- a/src/lib/ui/post/Post.svelte
+++ b/src/lib/ui/post/Post.svelte
@@ -73,9 +73,6 @@
 </div>
 
 <style>
-    .post-container:first-of-type {
-        border-top: none;
-    }
     .post-container {
         width: 732px;
         max-width: 732px;
@@ -83,6 +80,9 @@
         flex-direction: column;
         border-top: 1px solid color-mix(in srgb, transparent, var(--text) 25%);
     }
+    .post-container:first-of-type {
+        border-top: none;
+    }
 
     .post {
         padding: 16px;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c61d312..a6dd0f0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -61,6 +61,7 @@
         margin-left: auto;
         display: flex;
         flex-direction: row;
+        align-items: center;
         gap: 8px;
     }