near/computersandblues.lodestone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve search bar appearance

Browse source
This commit is contained in:
arne 2025-11-22 18:29:38 +01:00
commit b98c4ce1c9
2 changed files with 44 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

69
public/index.html
View file

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

5
src/computersandblues/lodestone/app.cljs
View file

@ -508,6 +508,11 @@
[:section.posts [:section.posts
[:h2 "Favorites"] [:h2 "Favorites"]
[:header.controls [:header.controls
[:section.search-form
[search {:query query}]
[loading-indicator {:loading loading}]
#_(cond (= api-state :loading) " …"
(= api-state :error) " API Error!")]
[:p.display-info [:p.display-info
(str "Loaded " total " posts" (str "Loaded " total " posts"
(when (or query (> total per-page)) (when (or query (> total per-page))