feed: change recommend server styling to show on oneline

As recommend servers is secondary meta information, it is enough to
show it smaller and on one line.
pull/2/head
OFF0 2 years ago
parent cab1d14603
commit 380b79038d
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA

@ -19,17 +19,27 @@
max-width: 4ch; max-width: 4ch;
} }
.mbox .mbox-header { .mbox-body {
color: var(--color-accent);
flex-basis: calc(100% - 64px - 1rem); flex-basis: calc(100% - 64px - 1rem);
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
margin-top: 0; max-width: 96ch;
} }
.mbox .mbox-body { .mbox-header {
color: var(--color-accent);
flex-basis: calc(100% - 64px - 1rem); flex-basis: calc(100% - 64px - 1rem);
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
max-width: 96ch; margin-top: 0;
}
.mbox-recommend-server .mbox-body {
display: block;
flex-basis: 100%;
font-size: var(--font-small);
}
.mbox-recommend-server .mbox-header {
display: inline;
} }

@ -2,6 +2,9 @@
@import "cards.css"; @import "cards.css";
@import "form.css"; @import "form.css";
:root {
--font-small: 1.2rem;
}
::selection { ::selection {
background: #ff79f9; background: #ff79f9;
@ -56,7 +59,7 @@ body {
} }
small { small {
font-size: 1.2rem; font-size: var(--font-small);
} }
*, ::after, ::before { *, ::after, ::before {

@ -85,12 +85,12 @@ function renderRecommendServer(evt, relay) {
renderProfile(userName, host), renderProfile(userName, host),
`recommends server: ${evt.content}` `recommends server: ${evt.content}`
]); ]);
rendernArticle([img, body]); rendernArticle([img, body], {className: 'mbox-recommend-server'});
} }
function renderProfile(userName, host) { function renderProfile(userName, host) {
return elem('header', {className: 'mbox-header'}, [ return elem('header', {className: 'mbox-header'}, [
elem('small', {}, [elem('strong', {}, userName), ` on ${host}`]), elem('small', {}, [elem('strong', {}, userName), ` on ${host} `]),
]); ]);
} }

Loading…
Cancel
Save