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;
}
@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;
}