From 970590497f4528ff16b10904febe66fd5edc285c Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Sun, 13 Jul 2025 15:41:56 +0100
Subject: [PATCH] fix width (???), return button backgrounds

---
 src/lib/app.css             |  2 +-
 src/lib/ui/Button.svelte    | 17 ++++++-----------
 src/lib/ui/Modal.svelte     |  2 +-
 src/lib/ui/post/Post.svelte |  2 --
 4 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/lib/app.css b/src/lib/app.css
index cca7bbd..e0c8b4a 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -79,7 +79,7 @@ header, #widgets {
 }
 
 main {
-    width: 732px;
+    width: 700px;
 }
 
 img.emoji {
diff --git a/src/lib/ui/Button.svelte b/src/lib/ui/Button.svelte
index 883fb8c..c20c923 100644
--- a/src/lib/ui/Button.svelte
+++ b/src/lib/ui/Button.svelte
@@ -63,7 +63,7 @@
         border-radius: 8px;
         border: 2px solid var(--bg-700);
 
-        background-color: transparent;
+        background-color: var(--bg-700);
         color: var(--text);
 
         transition-property: border-color, background-color, color;
@@ -79,11 +79,13 @@
     }
 
     button:hover {
-        background-color: color-mix(in srgb, transparent, var(--bg-700) 50%);
+        border-color: color-mix(in srgb, var(--bg-700), black 10%);
+        background-color: color-mix(in srgb, var(--bg-700), black 10%);
     }
 
     button:active {
-        background-color: var(--bg-700);
+        border-color: color-mix(in srgb, var(--bg-700), black 20%);
+        background-color: color-mix(in srgb, var(--bg-700), black 20%);
     }
 
     button.active {
@@ -124,18 +126,11 @@
     button.disabled {
         color: var(--text);
         opacity: .5;
+        background: transparent;
         border-color: transparent;
         cursor: initial;
     }
 
-    button.disabled:hover {
-        background-color: transparent;
-    }
-
-    button.disabled:active {
-        background-color: transparent;
-    }
-
     .icon:not(:empty) {
         height: 1.8em;
         margin-right: 8px;
diff --git a/src/lib/ui/Modal.svelte b/src/lib/ui/Modal.svelte
index 3ac3727..5fa3ae3 100644
--- a/src/lib/ui/Modal.svelte
+++ b/src/lib/ui/Modal.svelte
@@ -38,7 +38,7 @@
         z-index: 101;
 
         padding: 16px;
-        width: 732px;
+        width: 700px;
         border-radius: 8px;
         box-shadow: 0px 16px 64px 4px rgba(0,0,0,0.5);
         animation: modal_pop_up .15s cubic-bezier(0.22, 1, 0.36, 1);
diff --git a/src/lib/ui/post/Post.svelte b/src/lib/ui/post/Post.svelte
index 71718a2..dc7f6e1 100644
--- a/src/lib/ui/post/Post.svelte
+++ b/src/lib/ui/post/Post.svelte
@@ -74,8 +74,6 @@
 
 <style>
     .post-container {
-        width: 732px;
-        max-width: 732px;
         display: flex;
         flex-direction: column;
         border-top: 1px solid color-mix(in srgb, transparent, var(--text) 25%);