feed: update feed colors and spacing

- font: use regular font and smaller font size on mobile
- made publish button smaller on mobile
- add borders between notes and increase card spacing
- changed background colors of cards and nav

src/profiles.ts

@@ -173,7 +173,7 @@ export const renderProfile = (id: string) => {
     if (h1) {
       h1.textContent = profile.name;
     } else {
-      header.prepend(elem('h1', {}, profile.name));
+      header.append(elem('h1', {}, profile.name));
     }
   }
 };

src/styles/cards.css

@@ -1,13 +1,14 @@
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
 .mbox {
   align-items: center;
+  border-bottom: 1px solid var(--bgcolor-nav);
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
   flex-wrap: wrap;
   /* margin-bottom: 1rem; */
   max-width: var(--content-width);
-  padding: 0 0 0 var(--gap-half);
+  padding: var(--gap-half) var(--gap-half) 0 var(--gap-half);
 }
 .mbox:last-child {
   margin-bottom: 0;
@@ -42,6 +43,7 @@
   flex-basis: 100%;
   flex-grow: 0;
   flex-shrink: 1;
+  padding-bottom: var(--gap-half);
   word-break: break-word;
 }
 .mbox-body div a {
@@ -52,11 +54,19 @@
 }
 
 .mbox-header {
+  align-items: start;
+  display: flex;
+  gap: var(--gap-quarter);
+  justify-content: space-between;
   margin-top: 0;
+  min-height: 1.8rem;
 }
 .mbox-header a {
   font-size: var(--font-small);
 }
+.mbox-header small {
+  white-space: nowrap;
+}
 
 .mbox-kind0-name {
   color: var(--color);
@@ -83,19 +93,17 @@
   overflow: clip;
 }
 .mbox .mbox {
+  border-bottom: none;
   max-width: 100%;
   overflow: visible;
   padding: 0;
   position: relative;
 }
-.mbox .buttons {
-  margin-top: .2rem;
-}
 .mbox button:not(#publish) {
   --bg-color: none;
   --border-color: none;
 }
-.mbox button img + small {
+.mbox button img + small:not(:empty) {
   padding-left: .5rem;
 }
 .mbox-replies {
@@ -208,10 +216,14 @@
 .mbox-replies .mbox .mbox .mbox-body {
   display: flex;
   flex-wrap: wrap;
-  font-size: var(--font-small);
   padding-bottom: var(--gap-half);
   padding-top: var(--gap-eight);
 }
+@media (orientation: portrait) {
+  .mbox-replies .mbox .mbox .mbox-body {
+    font-size: var(--font-small);
+  }
+}
 .mbox-replies .mbox .mbox .mbox-header a:last-of-type::after {
   content: " ";
   display: inline-block;

src/styles/form.css

@@ -104,8 +104,8 @@ textarea:focus {
   flex-basis: 100%;
   gap: var(--gap);
   justify-content: start;
-  margin-top: var(--gap-half);
+  margin: .6rem 0;
-  min-height: 3.2rem;
+  min-height: 2.2rem;
 }
 form .buttons,
 .form .buttons,

src/styles/main.css

@@ -24,6 +24,11 @@
   --profileimg-size-half: 2rem;
   --profileimg-size-quarter: 1rem;
 }
+@media (orientation: portrait) {
+  :root {
+    --content-width: 100%;
+  }
+}
 
 ::selection {
   background: #ff79f9;
@@ -36,6 +41,9 @@
 
 @media (prefers-color-scheme: light) {
   html {
+    --color: rgb(93, 93, 93);
+    --color-accent: rgb(16, 93, 176);
+    --color-danger: #0e0e0e;
     --bgcolor: #fff;
     --bgcolor-nav: gainsboro;
     --bgcolor-accent: #7badfc;
@@ -43,24 +51,21 @@
     --bgcolor-danger-input: rgba(255 255 255 / .85);
     --bgcolor-inactive: #bababa;
     --bgcolor-textinput: #fff;
-    --color: rgb(68 68 68);
-    --color-accent: rgb(16, 93, 176);
-    --color-danger: #0e0e0e;
   }
 }
 
 @media (prefers-color-scheme: dark) {
   html {
-    --bgcolor: #191919;
+    --color: #e3e3e3;
-    --bgcolor-nav: darkslateblue;
+    --color-accent: #828282;
+    --color-danger: #e3e3e3;
+    --bgcolor: #101010;
+    --bgcolor-nav: rgb(31, 22, 51);
     --bgcolor-accent: rgb(16, 93, 176);
     --bgcolor-danger: rgb(169, 0, 0);
     --bgcolor-danger-input: rgba(0 0 0 / .5);
-    --bgcolor-inactive: #434343;
+    --bgcolor-inactive: #202122;
     --bgcolor-textinput: #0e0e0e;
-    --color: #e3e3e3;
-    --color-accent: #828282;
-    --color-danger: #e3e3e3;
   }
 
   img {
@@ -81,9 +86,15 @@ body {
   background-color: var(--bgcolor);
   color: var(--color);
   font-size: 1.6rem;
-  line-height: 1.313;
+  line-height: 1.375;
   word-break: break-all;
 }
+@media (orientation: portrait) {
+  body {
+    font-size: 1.4rem;
+    line-height: 1.5;
+  }
+}
 
 html, body {
   min-height: 100%;
@@ -98,7 +109,7 @@ button,
 input,
 select,
 textarea {
-  font-family: monospace;
+  font-family: sans-serif;
 }
 
 small,

src/styles/view.css

@@ -109,7 +109,6 @@ nav button {
   flex-grow: 1;
   margin-inline: auto;
   overflow-y: auto;
-  padding: var(--gap-half) 0 0 0;
   width: 100%;
 }
 main .content {
@@ -127,6 +126,33 @@ nav a {
   text-decoration: none;
 }
 
-.content > header {
+.content h1 {
-  padding: 3rem 3rem 3rem calc(var(--profileimg-size) + var(--gap));
+  padding: 0;
+}
+
+.hero {
+  --extra-space: calc(var(--profileimg-size) + var(--gap-half));
+  border-bottom: 1px solid var(--bgcolor-nav);
+  padding: var(--gap-half);
+}
+
+.hero h1 {
+  padding-left: var(--extra-space);
+}
+
+.hero small {
+  color: var(--color-accent);
+  font-size: 1.1rem;
+  display: block;
+  max-width: 100%;
+  overflow: clip;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@media (min-width: 64ch) {
+  .hero small {
+    padding-left: var(--extra-space);
+    text-align: left;
+  }
 }

src/styles/write.css

@@ -12,8 +12,10 @@
 }
 @media (orientation: portrait) {
   #bubble {
-    bottom: calc(4 * var(--gap));
+    bottom: 7rem;
-    right: var(--gap);
+    right: 3rem;
+    height: 7rem;
+    width: 7rem;
   }
 }
 #bubble svg {

src/utils/dom.ts

@@ -145,7 +145,7 @@ export const elemCanvas = (text: string) => {
   const color = `#${text.slice(0, 6)}`;
   context.fillStyle = color;
   context.fillRect(0, 0, 80, 80);
-  context.fillStyle = '#111';
+  context.fillStyle = '#202122';
   context.fillRect(0, 50, 80, 32);
   context.font = 'bold 18px monospace';
   if (color === '#000000') {

src/view.ts

@@ -57,7 +57,7 @@ const createContainer = (
   const dom: DOMMap = {};
   switch (options.type) {
     case 'profile':
-      const header = elem('header', {}, 
+      const header = elem('header', {className: 'hero'},
         elem('small', {}, route)
       );
       dom[options.id] = header;