Locking In My Blog Theme
The other day I stumbled upon Michael's blog. I really appreciated the simple, minimal and clean theme he was using.
I took inspiration from it and starting tinkering a few things on my own blog as well... then I saw this post: Locking in this bear blog theme.
Michael went through exactly what I've been doing since starting the blog here on Bear—a nonstop loop of seeing other blogs, getting inspired and tinkering with the design of your own.
To avoid doing that and simply spend time writing and creating things on the blog itself, Michael publicly locked in his theme and gave himself some stakes to prevent him from tinkering.
I think I've reached that point here with my own blog.
I'm happy with the way it looks. It's minimal enough for me, with a color scheme I like, a font I'm finally happy with, and the functionality to host short-form notes and photos.
So, I'll also be locking in my blog theme. At least for the next year. No style changes, no css tweaks, no html scripts. Just more posts, more notes, more photos.
Below you can see my full blog theme if you're interested in replicating anything from the site. You can also explore the meta tag to see all the changes I've made, with links to resources I used to implement those changes.
Toggle to see my blog CSS
:root {
--width: 640px;
--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", Verdana, sans-serif;
--font-secondary: var(--font-main);
--font-scale: 1em;
--background-color: #f0f0f0;
--heading-color: #383e3e;
--text-color: #383e3e;
--link-color: #197ba9;
--visited-color: #197ba9;
--code-background-color: #f7f7f7;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #24252e;
--heading-color: #c2c2c2;
--text-color: #c2c2c2;
--link-color: #8cc2dd;
--visited-color: #8cc2dd;
--code-background-color: #292a35;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 12px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.45;
color: var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-main);
color: var(--heading-color);
margin-top: 1.2em;
margin-bottom: 0.4em;
line-height: 1.25;
}
/* Making the heading sizes smaller */
h1 {
font-size: 1.5em;
}
/* Reduce paragraph spacing */
p {
margin-top: 0.4em;
margin-bottom: 0.8em;
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
strong, b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
time {
font-style: normal;
font-size: .9rem;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
border-radius: 8px;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid var(--text-color);
margin-left: 12px;
padding-left: 10px;
color: var(--text-color);
font-style: italic;
}
footer {
padding: 12px 0;
text-align: center;
font-size: .85em;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.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;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
ul.blog-posts li time {
color: #666;
}
/* =========================
Notes Embed Section
========================= */
.notes ul.embedded.blog-posts li {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
padding: .9em;
background-color: var(--code-background-color);
border-radius: 8px;
margin-top: .9em;
justify-content: space-between;
align-items: baseline;
}
/* Date styling of embedded posts */
.notes ul.embedded.blog-posts li time {
text-decoration: none;
font-weight: none;
color: #666;
}
/* Remove extra space above content */
.notes ul.embedded.blog-posts > li div p:first-child {
margin-top: 0;
}
/* Remove extra space to the left of content */
.notes ul.embedded.blog-posts {
padding: unset;
}
/* Hide title, but not link */
.notes ul.embedded.blog-posts > li > a {
visibility: hidden;
font-size: 0px;
text-decoration: none;
}
/* Content that will be visibly linked */
.notes ul.embedded.blog-posts > li > a::after {
visibility: visible;
content: "→"; /* Select an emoji, symbol, or other short text */
font-size: 1rem;
}
/* Date */
.notes ul.embedded.blog-posts > li span:has(> i time) {
}
/* Post body */
.notes ul.embedded.blog-posts > li > div {
flex-basis: 100%;
}
/* Make images in notes smaller */
.notes img {
max-width: 350px; /*maximum image height */
width: 100%;
height: auto; /* scales down with screen */
display: block;
margin-top: 0px;
margin: 0.1em 0;
}
/* Put the date and time on the same line */
.notes ul.embedded.blog-posts li {
flex-wrap: wrap-reverse; /* keep your layout */
}
.notes ul.embedded.blog-posts li span {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
}
/* =========================
Photos Embed Section
========================= */
.photos ul.embedded.blog-posts li {
display: block;
padding: 0px 0;
}
.photos ul.embedded.blog-posts li a {
display: block; /* Forces the link title to be on its own line */
white-space: normal; /* Allows the title to wrap if it's too long */
}
/* Date styling of embedded posts */
.photos ul.embedded.blog-posts li time {
text-decoration: none;
font-weight: none;
color: #666;
}
/* Show any <p> that contains an image */
.photos ul.embedded.blog-posts li p:has(img) {
display: block;
}
/* Hide <p> that do NOT contain an image (plain text paragraphs) */
.photos ul.embedded.blog-posts li p:not(:has(img)) {
display: none;
}
/* Hide all images except the first image inside the first <p> of each photo embed */
.photos ul.embedded.blog-posts li p img:not(:first-of-type) {
display: none !important;
}
/* =========================
Upvote button from Robert Birming
========================= */
/* Basic layout */
:is(.post, .page) .upvote-button {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 0.2rem;
margin-block: 1rem 0.8rem;
padding: 0;
border: none;
background: none;
color: var(--text);
font-family: inherit;
font-size: var(--font-small);
cursor: pointer;
transition: transform 0.15s ease;
}
/* Subtle grow on hover */
:is(.post, .page) .upvote-button:hover {
transform: scale(1.15);
}
/* Hide default Bear icon */
:is(.post, .page) .upvote-button svg {
display: none !important;
}
/* Empty heart icon before voting */
:is(.post, .page) .upvote-button::before {
content: "♡";
font-size: 1.3rem;
line-height: 1;
color: var(--link-color);
transition: color 0.15s ease;
}
/* Vote count */
:is(.post, .page) .upvote-button .upvote-count {
display: none !important;
}
/* Already upvoted state */
:is(.post, .page) .upvote-button:is(.upvoted, [disabled]) {
cursor: default;
}
/* Filled heart when upvoted */
:is(.post, .page) .upvote-button:is(.upvoted, [disabled])::before {
content: "♥";
color: var(--link-color);
}
/* Highlight count when upvoted */
:is(.post, .page) .upvote-button:is(.upvoted, [disabled]) .upvote-count {
color: var(--link-color);
}
/* Keyboard focus outline */
:is(.post, .page) .upvote-button:focus-visible {
outline: 2px solid var(--link-color);
outline-offset: 2px;
border-radius: 2px;
}