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..4240f3e 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))
@@ -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