html {
--bg-color: #fff;
--bg-tint-color: #f6f6f6;
--fg-tint-color: #777;
--focus-color: #0079d3;
--border-color: #ccc;
--button-color: #aaa;
--button-hover-color: #bbb;
background: #dae0e6;
color: #222;
line-height: 1.5;
font-family: sans-serif;
}
body {
max-inline-size: 45em;
margin-block: 0;
margin-inline: auto;
padding-block: 4em 1em;
padding-inline: 0;
}
a {
color: var(--focus-color);
}
h1, h2, h3, h4, h5 {
line-height: 1.2;
font-weight: 500;
margin-block: 0 0.3em;
}
h1 a,
h2 a {
color: inherit;
text-decoration: none;
}
p {
margin-block: 0 0.8em;
}
blockquote {
font-style: italic;
font-size: small;
padding-inline-start: 0.5em;
border-inline-start: 0.4em solid var(--border-color);
margin-inline-start: 0;
}
hr {
border: 0;
border-block-end: 1px solid var(--border-color);
}
input {
background: var(--bg-tint-color);
color: inherit;
border: 1px solid var(--border-color);
border-radius: 4px;
padding-block: 0.3em;
padding-inline: 0.75em;
font-family: inherit;
font-size: inherit;
line-height: 1.8;
}
input:hover,
input:focus {
border-color: var(--focus-color);
background: var(--bg-color);
}
#header {
background: var(--bg-color);
z-index: 1;
border-block-end: 1px solid var(--border-color);
position: absolute;
inset-block-start: 0;
inset-inline: 0;
padding-block: 0.4em;
padding-inline: 1em;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
}
#header input {
inline-size: 20em;
max-inline-size: 50vi;
}
.brand {
display: block;
color: inherit;
text-decoration: none;
font-size: 150%;
font-weight: bold;
}
.posts {
padding: 0;
margin: 0;
}
.post {
display: flow-root;
background: var(--bg-color);
border-radius: 4px;
border: 1px solid var(--border-color);
padding: 0.5em;
margin-block-end: 1em;
word-wrap: anywhere;
}
.post header {
margin-block-end: 0.5em;
font-size: small;
}
.post header a {
color: inherit;
text-decoration: none;
}
.post header a:hover,
.post header a:focus {
text-decoration: underline;
}
.post footer {
display: flex;
gap: 1em;
color: var(--fg-tint-color);
font-weight: bold;
font-size: small;
margin-block-start: 0.5em;
}
.post footer a {
color: inherit;
text-decoration: none;
}
.poster {
display: block;
margin-inline: -0.5em;
inline-size: calc(100% + 1em);
max-block-size: 90vb;
object-fit: contain;
}
.thumbnail {
float: right;
margin: 0 0 1em 1em;
}
.u-bold {
font-weight: bold;
}
.meta {
color: var(--fg-tint-color);
}
.more {
display: block;
background: var(--button-color);
color: inherit;
text-decoration: none;
padding: 0.5em;
text-align: center;
border-radius: 4px;
text-transform: uppercase;
font-weight: bold;
}
.more:focus,
.more:hover {
background: var(--button-hover-color);
}
.comments {
margin: 0;
padding: 0;
padding-inline-start: 1.5em;
border-inline-start: 2px solid var(--border-color);
}
.comment {
display: block;
position: relative;
margin-block: 3em;
}
.posts-sort {
display: flex;
gap: 1em;
font-weight: bold;
}
.comments-sort {
display: flex;
gap: 1em;
margin-block-start: 4em;
text-transform: uppercase;
font-size: x-small;
color: var(--fg-tint-color);
font-weight: bold;
padding-block: 1em;
border-block-end: 1px solid var(--border-color);
}
.comments-replies {
color: var(--fg-tint-color);
font-size: x-small;
cursor: pointer;
}
.posts-sort a,
.comments-sort a {
text-decoration: none;
}
.posts-sort svg {
block-size: 1em;
color: inherit;
vertical-align: -0.1em;
}
.icon {
border-radius: 50%;
block-size: 5em;
float: left;
margin-right: 0.5em;
}
@media (prefers-color-scheme: dark) {
html {
--bg-color: #111;
--bg-tint-color: #000;
--fg-tint-color: #888;
--border-color: #222;
--button-color: #222;
--button-hover-color: #333;
color-scheme: dark;
background: #000;
color: #fff;
}
}