Blog Design V 2.0
Back in December, I locked in the first real site theme for this blog and website.
Since then I've tried my best to refrain from tinkering with things in the CSS. Today that changes. I'm rolling out the second official redesign, which is black and white theme with a slightly more minimal nav bar.
It's not a significant change, but it does hit the kind of aesthetic I've always been drawn to but could never quite pull off. I used Claude to help me get all the way there, but the theme and layout has been pieced together over the last few few months, with lots of inspiration from the people blogging here at Bear.
Those include:
- Gobino for the basic blogs/notes/photos structure of the home page.
- Jedda for the embedded photos and photo feed.
- Sylvia for the embedded notes and notes feed.
- Mono for border styling of notes.
- mgx for a script to add time stamps to notes.
- Robert for the upvote button.
- James for blog list styling.
- Dave for nav bar inspiration.
Below you can see the full blog theme if you're interested in replicating anything here. I also use the meta tag to highlight all the changes I've made to the site.
Toggle to see my blog CSS
/* ================================
Black & White Minimal Theme
================================ */
: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: #3b3b3b;
--link-color: #3b3b3b;
--visited-color: #3b3b3b;
--muted-color: #777777;
--border-color: #d8d8d8;
--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: #c2c2c2;
--visited-color: #c2c2c2;
--muted-color: #666666;
--border-color: #333333;
--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;
}
h1 {
font-size: 1.5em;
}
p {
margin-top: 0.4em;
margin-bottom: 0.8em;
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: underline;
text-decoration-color: var(--border-color);
text-underline-offset: 3px;
}
a:hover {
text-decoration-color: var(--text-color);
}
/* Header layout — title and nav aligned on same baseline */
header {
display: flex;
align-items: baseline;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-color);
margin-bottom: 2rem;
}
nav, footer {
text-transform: lowercase;
}
/* Site title sits inline with nav links */
.title h1 {
font-size: 1rem;
font-weight: 500;
margin: 0;
margin-right: 1rem;
}
nav p {
margin: 0;
display: flex;
align-items: baseline;
gap: 0;
}
nav p > * {
margin-right: 1rem;
}
nav a {
font-size: 1rem;
color: var(--text-color);
text-decoration: none;
text-transform: lowercase;
}
nav a:hover {
text-decoration: underline;
text-decoration-color: var(--text-color);
}
.title, footer a, nav a {
text-decoration: none;
color: inherit;
}
strong, b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
time {
font-style: normal;
font-size: 0.9rem;
color: var(--muted-color);
}
main {
line-height: 1.6;
margin: 2rem 0 3rem 0;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px solid var(--border-color);
}
img {
max-width: 100%;
border-radius: 8px;
}
code {
font-family: monospace;
padding: 2px 5px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
font-size: 0.875em;
}
blockquote {
border-left: 1px solid var(--muted-color);
margin-left: 12px;
padding-left: 10px;
color: var(--muted-color);
font-style: italic;
}
footer {
padding: 12px 0;
text-align: center;
font-size: 0.85em;
color: var(--muted-color);
border-top: 1px solid var(--border-color);
margin-top: 3rem;
}
.title:hover {
text-decoration: none;
}
.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;
}
.footnotes {
font-size: 0.9em;
}
/* =========================
Blog post list
========================= */
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li a {
color: var(--link-color);
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 110px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
/* Blog post styling via James Zhan *//
ul.blog-posts li time {
color: #666;
}
.inline{ width:auto !important; }
ul.blog-posts li{ display:flex; margin-bottom:4px; flex-direction:column; }
@media (min-width:600px){
ul.blog-posts li{ flex-direction:row; }
}
ul.blog-posts li span{ flex:0 0 auto; min-width:11ch;}
/* =========================
Notes Embed Section
========================= */
.notes ul.embedded.blog-posts li {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
padding: 0.9em;
background-color: var(--code-background-color);
border-radius: 8px;
margin-top: 0.9em;
justify-content: space-between;
align-items: baseline;
}
.notes ul.embedded.blog-posts li time {
text-decoration: none;
color: var(--muted-color);
}
.notes ul.embedded.blog-posts > li div p:first-child {
margin-top: 0;
}
.notes ul.embedded.blog-posts {
padding: unset;
}
.notes ul.embedded.blog-posts > li > a {
visibility: hidden;
font-size: 0px;
text-decoration: none;
}
.notes ul.embedded.blog-posts > li > a::after {
visibility: visible;
content: "→";
font-size: 1rem;
}
.notes ul.embedded.blog-posts > li > div {
flex-basis: 100%;
}
.notes img {
max-width: 350px;
width: 100%;
height: auto;
display: block;
margin: 0.1em 0;
}
.notes ul.embedded.blog-posts li {
flex-wrap: wrap-reverse;
}
.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: 0;
border: none;
}
.photos ul.embedded.blog-posts li a {
display: block;
white-space: normal;
}
.photos ul.embedded.blog-posts li time {
text-decoration: none;
color: var(--muted-color);
}
.photos ul.embedded.blog-posts li p:has(img) {
display: block;
}
.photos ul.embedded.blog-posts li p:not(:has(img)) {
display: none;
}
.photos ul.embedded.blog-posts li p img:not(:first-of-type) {
display: none !important;
}
/* =========================
Upvote button
========================= */
: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-color);
font-family: inherit;
font-size: inherit;
cursor: pointer;
transition: transform 0.15s ease;
}
:is(.post, .page) .upvote-button:hover {
transform: scale(1.15);
}
:is(.post, .page) .upvote-button svg {
display: none !important;
}
:is(.post, .page) .upvote-button::before {
content: "♡";
font-size: 1.3rem;
line-height: 1;
color: var(--text-color);
transition: color 0.15s ease;
}
:is(.post, .page) .upvote-button .upvote-count {
display: none !important;
}
:is(.post, .page) .upvote-button:is(.upvoted, [disabled]) {
cursor: default;
}
:is(.post, .page) .upvote-button:is(.upvoted, [disabled])::before {
content: "♥";
color: var(--text-color);
}
:is(.post, .page) .upvote-button:is(.upvoted, [disabled]) .upvote-count {
color: var(--text-color);
}
:is(.post, .page) .upvote-button:focus-visible {
outline: 2px solid var(--text-color);
outline-offset: 2px;
border-radius: 2px;
}