My minimal Bearblog CSS
This is one of CSS themes i used, this one is really minimal and customizable. This CSS code is minified for lighter experience, i beautify this CSS, using tools like js-beautify.
With using this, you can already customize to your favorite color, soft border radius, and clean bloglist layout.
This theme is primarily inspired by Bearming and Nihar's NSS.
/* Light mode */
:root {
--body: sans-serif;
--hx: monospace;
--ico: "Ш☰";
--bd: 1px solid var(--card);
--thm: #07bbbc;
--bg: #ffffff;
--txt: #000000;
--card: #07bcbc17;
}
/* Dark mode */
@media (prefers-color-scheme:dark) {
:root {
--bg: #000000;
--txt: #FAFFFF;
--card: #07bcbc5a;
}
}
/* Basic styles */
*,
::after,
::before {
box-sizing: border-box;
}
body {
font: 1.2em/1.6em var(--body);
max-width: 38em;
margin: 0 auto;
padding: 1em;
background: var(--bg);
color: var(--txt);
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hx);
line-height: normal;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.4em;
}
/* Links */
a {
color: var(--thm);
}
a:hover {
text-decoration: none;
}
/* Navigation */
header {
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
padding: 1.25em 0 0;
}
.title {
margin-right: auto;
}
.title::before {
content: var(--ico);
font: 600 3.5em/1 sans-serif;
display: inline-block;
}
.title h1 {
font-size: 0;
}
nav a {
margin: 0 .85vw;
}
main>:is(h1, p):first-of-type {
margin: .25em 0;
}
/* Misc elements */
img, video {
max-width: 100%;
}
blockquote, code, img, pre {
background: var(--card);
border-radius: .4em;
}
code {
padding: .5em;
}
pre {
overflow: auto;
line-height: 1.6em;
padding: 1em;
}
blockquote {
margin: 1em 0;
padding: 1px 1em;
}
/* Blog list */
.blog-posts {
padding: 0;
}
.blog-posts li {
display: flex;
flex-direction: row-reverse;
padding: .7em 0;
border-top: var(--bd);
}
.blog-posts li:last-child {
border-bottom: var(--bd);
}
.blog-posts a {
flex: 1;
}