public/index.html

@@ -20,15 +20,20 @@
          line-height: 1.2;
      }
 
+     @media screen and (min-width: 768px) {
+         body {
+             margin: 24px;
+         }
+     }
+
      h1, h2, h3 {
          font-family: serif;
-         margin: 18px 0;
+         margin: 16px 0;
      }
 
      h1 {
          font-size: 36px;
          line-height: 48px;
-         margin-top: 0;
      }
 
      h2 {
@@ -51,28 +56,19 @@
      }
 
      p {
-         margin: 18px 0;
+         margin: 16px 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;
      }
@@ -135,12 +131,16 @@
      }
 
      section.posts header.controls {
+         margin-top: -16px;
          padding: 0 0 36px;
-         display: block;
+         display: grid;
+         grid-template:
+             "a"
+             "b"
+             "c";
      }
 
      section.posts header.controls .search-form input {
-         margin: 0;
          width: 80%;
      }
 
@@ -148,7 +148,7 @@
          width: 20px;
          height: 20px;
          vertical-align: middle;
-         margin-left: 18px;
+         margin-left: 16px;
          overflow: visible;
      }
 
@@ -171,43 +171,35 @@
 
      section.posts header.controls .buttons {
          display: flex;
-         justify-content: start;
+         justify-content: end;
          flex-wrap: wrap;
      }
 
-     section.posts header.controls .search-form {
+     section.posts header.controls .post-info {
-         margin: 18px 0;
-         grid-area: a;
-     }
-
-     section.posts header.controls .display-info {
          grid-area: b;
      }
 
-     section.posts header.controls .buttons {
+     section.posts header.controls .search-form {
          grid-area: c;
      }
 
-     section.posts header.controls .buttons .control-button {
+     section.posts header.controls .buttons {
-         margin: 6px 12px 6px 0;
+         grid-area: a;
      }
 
      @media screen and (min-width: 640px) {
          section.posts header.controls {
-             display: grid;
              grid-template:
-                 "a b"
+                 "a a"
-                 "c c";
+                 "b c";
          }
 
-         section.posts header.controls .display-info {
+         section.posts header.controls .post-info {
-             margin-top: 12px;
+             grid-area: a;
-             grid-area: c;
          }
 
          section.posts header.controls .search-form {
-             margin: 0;
+             grid-area: b;
-             grid-area: a;
          }
 
          section.posts header.controls .search-form input {
@@ -215,8 +207,7 @@
          }
 
          section.posts header.controls .buttons {
-             justify-content: end;
+             grid-area: c;
-             grid-area: b;
          }
      }
 
@@ -262,7 +253,7 @@
      }
 
      section.posts .post .attachments {
-         margin-top: 18px;
+         margin-top: 16px;
          max-height: 320px;
          display: flex;
          align-items: flex-start;
@@ -273,7 +264,7 @@
      section.posts .post .attachments img,
      section.posts .post .attachments video {
          max-height: 320px;
-         margin-left: 18px;
+         margin-left: 16px;
      }
 
      section.posts .post .attachments img:first-child,
@@ -311,7 +302,7 @@
 
      blockquote {
          margin-left: 0;
-         padding: 18px 0 18px 24px;
+         padding: 16px 0 16px 24px;
          border-left: 3px solid #f5e6ab;
      }
 

src/computersandblues/lodestone/app.cljs

@@ -508,11 +508,6 @@
     [: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))
@@ -520,6 +515,11 @@
                                                  (if (= 1 n-displayed)
                                                    " match"
                                                    " matches")))))]
+      [:section.search-form
+       [search {:query query}]
+       [loading-indicator {:loading loading}]
+       #_(cond (= api-state :loading) " …"
+             (= api-state :error) " API Error!")]
       [:section.buttons
        [:button.control-button {:on-click fetch-more-posts! :disabled (boolean (seq loading))} "⇓ Fetch more"]
        [:button.control-button {:on-click disconnect-account!} "▤ Disconnect account"]]]
@@ -556,7 +556,6 @@
       [:li [:code "\"for (this|that)\""] " will match \"for this\" and \"for that\"."]]]
     [:li "Terms can be prefixed to change default behavior:"
      [:ul
-      [:li [:code "body:term"] " will return results that have a fuzzy match for \"term\" anywhere in the post body or in any image or video description."]
       [:li "Date prefixes can be used to restrict a date range for your results. Dates are meant to be given like "
        [:code "2025-11-22"] " / " [:code "YYYY-MM-DD"] ", but month and day are optional."
        [:ul