feed: update feed colors and spacing
ci/woodpecker/pr/woodpecker Pipeline was successful Details
ci/woodpecker/push/woodpecker Pipeline was successful Details

- 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
pull/79/head
OFF0 1 year ago
parent 5e61dcef0c
commit 36ba582dd4
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA

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

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

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

@ -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;
--bgcolor-nav: darkslateblue;
--color: #e3e3e3;
--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,

@ -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 {
padding: 3rem 3rem 3rem calc(var(--profileimg-size) + var(--gap));
.content h1 {
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;
}
}

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

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

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

Loading…
Cancel
Save