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
parent
cab1d14603
commit
380b79038d
|
@ -19,17 +19,27 @@
|
|||
max-width: 4ch;
|
||||
}
|
||||
|
||||
.mbox .mbox-header {
|
||||
flex-basis: calc(100% - 64px - 1rem);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mbox .mbox-body {
|
||||
.mbox-body {
|
||||
color: var(--color-accent);
|
||||
flex-basis: calc(100% - 64px - 1rem);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
max-width: 96ch;
|
||||
}
|
||||
|
||||
.mbox-header {
|
||||
flex-basis: calc(100% - 64px - 1rem);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
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 "form.css";
|
||||
|
||||
:root {
|
||||
--font-small: 1.2rem;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #ff79f9;
|
||||
|
@ -56,7 +59,7 @@ body {
|
|||
}
|
||||
|
||||
small {
|
||||
font-size: 1.2rem;
|
||||
font-size: var(--font-small);
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
|
|
|
@ -85,12 +85,12 @@ function renderRecommendServer(evt, relay) {
|
|||
renderProfile(userName, host),
|
||||
`recommends server: ${evt.content}`
|
||||
]);
|
||||
rendernArticle([img, body]);
|
||||
rendernArticle([img, body], {className: 'mbox-recommend-server'});
|
||||
}
|
||||
|
||||
function renderProfile(userName, host) {
|
||||
return elem('header', {className: 'mbox-header'}, [
|
||||
elem('small', {}, [elem('strong', {}, userName), ` on ${host}`]),
|
||||
elem('small', {}, [elem('strong', {}, userName), ` on ${host} `]),
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue