Small mobile layout tweaks

This commit is contained in:
Jonny Barnes 2025-12-11 19:58:17 +00:00
commit 6b4607e4f9
Signed by: jonny
SSH key fingerprint: SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
7 changed files with 35 additions and 33 deletions

View file

@ -9,7 +9,7 @@
body {
display: grid;
grid-template-columns: 1fr min(80ch, 95vw) 1fr;
grid-template-columns: 1fr min(80ch, 80vw) 1fr;
grid-template-rows: min-content 1fr min-content;
padding-inline: 4vw;
@ -30,6 +30,10 @@
flex-direction: row;
align-items: center;
gap: 1ex;
input {
min-width: 0;
}
}
}
}

View file

@ -1,37 +1,35 @@
@layer components {
.h-feed {
.note {
display: flex;
flex-direction: column;
border: 1px solid var(--clr-border);
border-radius: var(--border-radius);
padding: 1ex 2ex;
.note {
display: flex;
flex-direction: column;
border: 1px solid var(--clr-border);
border-radius: var(--border-radius);
padding: 1ex 2ex;
.e-content > p:first-child {
margin-block-start: 0;
}
.syndication-links {
display: flex;
flex-direction: row;
gap: 1ex;
svg {
border-radius: 4px;
width: auto;
height: 1lh;
}
}
.e-content > p:first-child {
margin-block-start: 0;
}
.reply-to {
font-size: 85%;
margin-inline: 2ex;
padding-inline: 1ex;
border: 1px solid var(--clr-border);
border-bottom: none;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
.syndication-links {
display: flex;
flex-direction: row;
gap: 1ex;
svg {
border-radius: 4px;
width: auto;
height: 1lh;
}
}
}
.reply-to {
font-size: 85%;
margin-inline: 2ex;
padding-inline: 1ex;
border: 1px solid var(--clr-border);
border-bottom: none;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
}

View file

@ -88,8 +88,8 @@
<div class="footer-actions">
<search>
<form action="/search" method="get">
<label for="search" class="sr-only">Search</label>
<input type="search" id="search" name="q" title="Search"><button type="submit">Search</button>
<input type="search" id="search" name="q" aria-label="Search">
<button type="submit">Search</button>
</form>
</search>
@auth()