Document body: search prefix

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;
+         display: block;
-         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: 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 {
+     section.posts header.controls .buttons .control-button {
-         grid-area: a;
+         margin: 6px 12px 6px 0;
      }
 
      @media screen and (min-width: 640px) {
          section.posts header.controls {
+             display: grid;
              grid-template:
-                 "a a"
+                 "a b"
-                 "b c";
+                 "c c";
          }
 
-         section.posts header.controls .post-info {
+         section.posts header.controls .display-info {
-             grid-area: a;
+             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;
      }
 

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))
@@ -515,11 +520,6 @@
                                                  (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,6 +556,7 @@
       [: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