From b98c4ce1c9a359ceed1e2f396014f42cad8f2232 Mon Sep 17 00:00:00 2001
From: arne <noreply@null.arnes.space>
Date: Sat, 22 Nov 2025 18:29:38 +0100
Subject: [PATCH] Improve search bar appearance

---
 public/index.html                        | 69 +++++++++++++-----------
 src/computersandblues/lodestone/app.cljs |  5 ++
 2 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/public/index.html b/public/index.html
index 70ef75a..73b6904 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,20 +20,15 @@
          line-height: 1.2;
      }
 
-     @media screen and (min-width: 768px) {
-         body {
-             margin: 24px;
-         }
-     }
-
      h1, h2, h3 {
          font-family: serif;
-         margin: 16px 0;
+         margin: 18px 0;
      }
 
      h1 {
          font-size: 36px;
          line-height: 48px;
+         margin-top: 0;
      }
 
      h2 {
@@ -56,19 +51,28 @@
      }
 
      p {
-         margin: 16px 0;
+         margin: 18px 0;
      }
 
      img.illustration {
          width: 150px;
          height: auto;
-         float: left;
          margin-right: 24px;
          margin-bottom: 24px;
          mix-blend-mode: luminosity;
          vertical-align: middle;
      }
 
+     @media screen and (min-width: 640px) {
+         h1 {
+             margin-top: 18px;
+         }
+
+         img.illustration {
+             float: left;
+         }
+     }
+
      p.intro {
          font-size: 20px;
      }
@@ -131,16 +135,12 @@
      }
 
      section.posts header.controls {
-         margin-top: -16px;
          padding: 0 0 36px;
-         display: grid;
-         grid-template:
-             "a"
-             "b"
-             "c";
+         display: block;
      }
 
      section.posts header.controls .search-form input {
+         margin: 0;
          width: 80%;
      }
 
@@ -148,7 +148,7 @@
          width: 20px;
          height: 20px;
          vertical-align: middle;
-         margin-left: 16px;
+         margin-left: 18px;
          overflow: visible;
      }
 
@@ -171,35 +171,43 @@
 
      section.posts header.controls .buttons {
          display: flex;
-         justify-content: end;
+         justify-content: start;
          flex-wrap: wrap;
      }
 
-     section.posts header.controls .post-info {
+     section.posts header.controls .search-form {
+         margin: 18px 0;
+         grid-area: a;
+     }
+
+     section.posts header.controls .display-info {
          grid-area: b;
      }
 
-     section.posts header.controls .search-form {
+     section.posts header.controls .buttons {
          grid-area: c;
      }
 
-     section.posts header.controls .buttons {
-         grid-area: a;
+     section.posts header.controls .buttons .control-button {
+         margin: 6px 12px 6px 0;
      }
 
      @media screen and (min-width: 640px) {
          section.posts header.controls {
+             display: grid;
              grid-template:
-                 "a a"
-                 "b c";
+                 "a b"
+                 "c c";
          }
 
-         section.posts header.controls .post-info {
-             grid-area: a;
+         section.posts header.controls .display-info {
+             margin-top: 12px;
+             grid-area: c;
          }
 
          section.posts header.controls .search-form {
-             grid-area: b;
+             margin: 0;
+             grid-area: a;
          }
 
          section.posts header.controls .search-form input {
@@ -207,7 +215,8 @@
          }
 
          section.posts header.controls .buttons {
-             grid-area: c;
+             justify-content: end;
+             grid-area: b;
          }
      }
 
@@ -253,7 +262,7 @@
      }
 
      section.posts .post .attachments {
-         margin-top: 16px;
+         margin-top: 18px;
          max-height: 320px;
          display: flex;
          align-items: flex-start;
@@ -264,7 +273,7 @@
      section.posts .post .attachments img,
      section.posts .post .attachments video {
          max-height: 320px;
-         margin-left: 16px;
+         margin-left: 18px;
      }
 
      section.posts .post .attachments img:first-child,
@@ -302,7 +311,7 @@
 
      blockquote {
          margin-left: 0;
-         padding: 16px 0 16px 24px;
+         padding: 18px 0 18px 24px;
          border-left: 3px solid #f5e6ab;
      }
 
diff --git a/src/computersandblues/lodestone/app.cljs b/src/computersandblues/lodestone/app.cljs
index 7f53999..3d94653 100644
--- a/src/computersandblues/lodestone/app.cljs
+++ b/src/computersandblues/lodestone/app.cljs
@@ -508,6 +508,11 @@
     [:section.posts
      [:h2 "Favorites"]
      [:header.controls
+      [:section.search-form
+       [search {:query query}]
+       [loading-indicator {:loading loading}]
+       #_(cond (= api-state :loading) " …"
+             (= api-state :error) " API Error!")]
       [:p.display-info
        (str "Loaded " total " posts"
             (when (or query (> total per-page))