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.

src/cards.css

@@ -19,17 +19,27 @@
   max-width: 4ch;
 }
 
-.mbox .mbox-header {
+.mbox-body {
+  color: var(--color-accent);
   flex-basis: calc(100% - 64px - 1rem);
   flex-grow: 0;
   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-grow: 0;
   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;
 }

src/main.css

@@ -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 {

src/main.js

@@ -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} `]),
   ]);
 }