diff --git a/public/index.html b/public/index.html index 73b6904..70ef75a 100644 --- a/public/index.html +++ b/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 { - margin: 18px 0; - grid-area: a; - } - - section.posts header.controls .display-info { + section.posts header.controls .post-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 { - margin: 6px 12px 6px 0; + section.posts header.controls .buttons { + grid-area: a; } @media screen and (min-width: 640px) { section.posts header.controls { - display: grid; grid-template: - "a b" - "c c"; + "a a" + "b c"; } - section.posts header.controls .display-info { - margin-top: 12px; - grid-area: c; + section.posts header.controls .post-info { + grid-area: a; } section.posts header.controls .search-form { - margin: 0; - grid-area: a; + grid-area: b; } section.posts header.controls .search-form input { @@ -215,8 +207,7 @@ } section.posts header.controls .buttons { - justify-content: end; - grid-area: b; + grid-area: c; } } @@ -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; } diff --git a/src/computersandblues/lodestone/app.cljs b/src/computersandblues/lodestone/app.cljs index 4240f3e..7f53999 100644 --- a/src/computersandblues/lodestone/app.cljs +++ b/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