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;
}
Minified version
:root{--body:sans-serif;--hx:monospace;--ico:"Ш☰";--bd:1px solid var(--card);--thm:#07bbbc;--bg:#fafafa;--txt:#000000;--card:#07bcbc17}@media (prefers-color-scheme:dark){:root{--bg:#000000;--txt:#FAFFFF;--card:#07bcbc5a}}*,::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)}h1,h2,h3,h4,h5,h6{font-family:var(--hx);line-height:normal}h1{font-size:3em}h2{font-size:2.4em}a{color:var(--thm)}a:hover{text-decoration:none}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}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-posts{padding:0}:is(.home,.posts) .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}