Simple css to use Nord color scheme for your 🐻 bearblog
Navigate to your bearblog dashboard > Themes, and paste the content of css to "Edit the css" section. (be sure to empty it first)
Got issues with theme? Comment here to let me know!
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap'); | |
/*default: dark variant*/ | |
:root { | |
--width: 720px; | |
--font-main: 'Fira Code', monospace; | |
--font-secondary: 'Fira Code', monospace; | |
--font-scale: 1em; | |
--background-color: #2e3440; | |
--heading-color: #5e81ac; | |
--text-color: #d8dee9; | |
--link-color: #5e81ac; | |
--visited-color: #81a1c1; | |
--code-background-color: #4c566a; | |
--code-color: #e5e9f0; | |
--blockquote-color: #e5e9f0; | |
} | |
/* dark */ | |
@media (prefers-color-scheme: dark) { | |
:root { | |
--width: 720px; | |
--font-main: 'Fira Code', monospace; | |
--font-secondary: 'Fira Code', monospace; | |
--font-scale: 1em; | |
--background-color: #2e3440; | |
--heading-color: #5e81ac; | |
--text-color: #d8dee9; | |
--link-color: #5e81ac; | |
--visited-color: #81a1c1; | |
--code-background-color: #4c566a; | |
--code-color: #e5e9f0; | |
--blockquote-color: #e5e9f0; | |
} | |
} | |
/* light */ | |
@media (prefer-color-scheme: light){ | |
:root { | |
--width: 720px; | |
--font-main: 'Fira Code', monospace; | |
--font-secondary: 'Fira Code', monospace; | |
--font-scale: 1em; | |
--background-color: #eceff4; | |
--heading-color: #88c0d0; | |
--text-color: #2e3440; | |
--link-color: #81a1c1; | |
--visited-color: #88c0d0; | |
--code-background-color: #e5e9f0; | |
--code-color: #4c566a; | |
--blockquote-color: #4c566a; | |
} | |
} | |
body { | |
font-family: var(--font-secondary); | |
font-size: var(--font-scale); | |
margin: auto; | |
padding: 20px; | |
max-width: var(--width); | |
text-align: left; | |
background-color: var(--background-color); | |
word-wrap: break-word; | |
overflow-wrap: break-word; | |
line-height: 1.5; | |
color: var(--text-color); | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
font-family: var(--font-main); | |
color: var(--heading-color); | |
} | |
a { | |
color: var(--link-color); | |
cursor: pointer; | |
text-decoration: underline; | |
} | |
a:hover { | |
text-decoration: underline; | |
} | |
main { | |
margin-top: 40px; | |
margin-bottom: 20px; | |
padding: 30px; | |
border: 1px solid var(--link-color); | |
} | |
nav a { | |
margin-right: 8px; | |
} | |
strong, | |
b { | |
color: var(--heading-color); | |
} | |
button { | |
margin: 0; | |
cursor: pointer; | |
} | |
main { | |
line-height: 1.6; | |
} | |
table { | |
width: 100%; | |
} | |
hr { | |
border: 0; | |
border-top: 1px dashed; | |
} | |
img { | |
max-width: 100%; | |
} | |
code { | |
font-family: monospace; | |
padding: 2px; | |
background-color: var(--code-background-color); | |
color: var(--code-color); | |
border-radius: 3px; | |
} | |
blockquote { | |
border-top: 1px solid var(--heading-color); | |
border-bottom: 1px solid var(--heading-color); | |
color: var(--text-color); | |
padding: 20px; | |
font-style: italic; | |
margin-left: 0px; | |
margin-right: 0px; | |
} | |
footer { | |
padding: 25px 0; | |
text-align: center; | |
opacity: 0.6; | |
} | |
.title:hover { | |
text-decoration: none; | |
} | |
.title h1 { | |
font-size: 1em; | |
padding: 5px 10px; | |
background: var(--heading-color); | |
color: var(--background-color); | |
display: inline-block; | |
font-weight: 400; | |
} | |
.inline { | |
width: auto !important; | |
} | |
.highlight, | |
.code { | |
padding: 1px 15px; | |
background-color: var(--code-background-color); | |
color: var(--code-color); | |
border-radius: 3px; | |
margin-block-start: 1em; | |
margin-block-end: 1em; | |
overflow-x: auto; | |
} | |
.highlight { | |
border-left: 5px solid var(--heading-color); | |
} | |
/* blog post list */ | |
ul.blog-posts { | |
list-style-type: none; | |
padding: unset; | |
} | |
ul.blog-posts li { | |
display: flex; | |
margin-bottom: 20px; | |
} | |
ul.blog-posts li time { | |
font-style: normal; | |
} | |
ul.blog-posts li span { | |
flex: 0 0 130px; | |
} | |
ul.blog-posts li a:visited { | |
color: var(--visited-color); | |
} | |
table { | |
border-collapse: collapse; | |
} | |
table, | |
th, | |
td { | |
border: 1px dashed var(--heading-color); | |
padding: 10px; | |
} | |
@media only screen and (max-width:767px) { | |
main { | |
padding: 20px; | |
margin-top: 30px; | |
margin-bottom: 10px; | |
} | |
ul.blog-posts li { | |
flex-direction: column; | |
} | |
ul.blog-posts li span { | |
flex: unset; | |
} | |
} |