My theme CSS

18 Jul 2025

This page contains my theme CSS. Last edited {{ post_last_modified }} ago.

For more on how I set up my Bearblog, see Markdown for my pages, my #bearblog posts, and Changelog.

Prior themes: v1

Base

:root {
  /* Fonts */
  --font: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  /* Font sizes */
  --step--2: clamp(0.6944rem, 0.6908rem + 0.0183vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8238rem + 0.0476vw, 0.9rem);
  --step-0: clamp(1rem, 0.9821rem + 0.0893vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1705rem + 0.1473vw, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3946rem + 0.227vw, 1.7578rem);
  --step-3: clamp(1.728rem, 1.661rem + 0.3352vw, 2.1973rem);
  /* Colors */
  --background-color: light-dark(#fffefd, #26233a);
  --text-color: light-dark(#3a333e, #fff3ed);
  --subtext-color: light-dark(#5c6988, #D5C3D2);
  --link-color: light-dark(#ef5667, #ebbcba);
  --visited-color: light-dark(#ef5667, #ebbcba);
  --accent-color: light-dark(#f3fbcd, #383857);
  --border-color: light-dark(#ffd9d3, #383857);
  --notes-bg: light-dark(#fffaf3, #362b48);
  --notes-border: light-dark(#e4e0de, #4f4764);
  --code-bg: light-dark(#fffaf3, #1f1d2e);
  --code-text: light-dark(#575279, #e0def4);
}
/* Page styles */
html {
  margin-left: calc(100vw - 100%);
}
@media (max-width: 768px) {
  html {
    margin-left: auto;
  }
}
body {
  max-width: 66ch;
  margin: 1.5em auto;
  padding: 0 1em;
  font: var(--step-0)/1.6 var(--font);
  color: var(--text-color);
  background-color: var(--background-color);
}
/* Headings */
h1,
h2,
h3 {
  line-height: 1.3;
  margin: 1.5rem 0;
}
h1 {
  font-size: var(--step-3);
}
h2 {
  font-size: var(--step-2);
}
h3 {
  font-size: var(--step-1);
}
/* Title */
.title h1 {
  margin: 0;
  font-size: var(--step-1);
  color: var(--subtext-color);
  font-weight: normal;
  font-style: italic;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: 1rem;
  text-underline-offset: -.7rem;
  text-decoration-skip-ink: none;
}
.title,
.title:hover {
  text-decoration: none;
}
/* Nav */
.about nav .nav-about a,
.notes nav .nav-notes a,
.status nav .nav-status a,
.clippings nav .nav-clippings a,
.now nav .nav-now a,
.bits nav .nav-bits a {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: 1.1rem;
  text-underline-offset: -.8rem;
  text-decoration-skip-ink: none;
  cursor: default;
}
nav::after {
  content: "—";
  color: var(--subtext-color);
}
.nav-boop button {
  all: unset;
  cursor: pointer;
}
.nav-boop button:focus {
  outline: revert;
}
/* Footer */
footer {
  font-size: var(--step--1);
}
footer span span {
  color: var(--subtext-color);
  margin: 0 .5em;
}
footer span:last-child {
  display: none;
}
footer span a:last-child {
  float: right;
}
/* Links */
a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-style: dotted;
}
a:hover {
  text-decoration: underline;
  text-decoration-style: solid;
}
a:visited {
  color: var(--visited-color);
}
/* Post meta */
time {
  font-style: italic;
  font-size: var(--step--1);
}
p:has(> .last-modified) {
  font-style: italic;
  font-size: var(--step--1);
}
.last-modified::before {
  content: "Edited ";
}
/* Post content */
img {
  width: 100%;
  margin: .5em 0;
  border-radius: .5em;
}
p:has(img) {
  line-height: 1;
}
:root[data-theme="dark"] img {
    filter: brightness(0.8);
}
hr {
  border: 0;
  margin: 1.5em 0;
}
hr::after {
  content: "—";
  color: var(--link-color);
}
blockquote {
  margin: 1.5em 1em;
  padding: 0 1em;
  border-left: .25rem solid var(--accent-color);
}
.footnote,
.footnote-ref a {
  text-decoration: none;
}
sup {
  vertical-align: top;
  font-size: var(--step--2);
}
.footnote {
  font-size: var(--step--2);
  margin-left: .5em;
}
.footnotes::before {
  content: "—";
  color: var(--link-color);
}
span.email b {
  display: none;
}
::marker {
  line-height: initial;
}
mark {
  display: block;
  padding: 1em;
  margin: 1.5em 0;
  color: var(--text-color);
  background-color: var(--accent-color);
  border-radius: .5em;
}
/* Tables */
table {
  width: 100%;
  margin: 1.5em 0;
  border: 1px solid var(--border-color);
  border-left: 0;
  border-radius: .5em;
  border-spacing: 0;
}
th, td {
  padding: .5em .75em; 
  border-left: 1px solid var(--border-color);    
}
th {
  position: sticky;
  top: 0;
  background-color: var(--border-color);
}
td {
  border-top: 1px solid var(--border-color);    
}
th:first-of-type {
  border-top-left-radius: .5em;
}
th:last-of-type {
  border-top-right-radius: .5em;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: .5em;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: .5em;
}
/* Upvote button */
.upvote-button svg,
.upvote-count {
  display: none;
}
.upvote-button::before {
  content: "<3";
  cursor: pointer;
  color: var(--link-color);
  font: var(--step-0)/1 var(--font);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: .6rem;
  text-underline-offset: -.6rem;
  text-decoration-skip-ink: none;
}
.upvote-button:hover::before {
  content: "<♡3";
  cursor: pointer;
}
.upvote-button[disabled]::before {
  content: "<♡3";
  cursor: default;
  color: var(--subtext-color);
  text-decoration: none;
}
/* Blog list */
ul.blog-posts {
  padding: 0;
  margin: 1.5em 0;
}
ul.blog-posts > li {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 1em;
  border-bottom: 1px solid var(--border-color);
}
ul.blog-posts > li:first-child {
  border-top: 1px solid var(--border-color);
}
ul.blog-posts > li > span:has(> i time) {
  white-space: nowrap;
  color: var(--subtext-color);
}
ul.blog-posts > li > a {
  text-decoration: none;
  width: 100%;
  padding: .75em 0;
}
ul.blog-posts > li:has(> a):hover {
  background-color: color-mix(in srgb, var(--border-color) 25%, transparent);
  margin: 0 -.75em;
  padding: 0 .75em;
  border-radius: .5em;
}
/* Code */
.highlight {
  font-size: var(--step--1);
  padding: .5em 1.5em;
  overflow-x: auto;
  margin: 1.5em 0;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--notes-border);
}
code {
  margin: 0 0.125em;
  padding: 0.25em 0.5em;
  background-color: var(--accent-color);
  font-size: var(--step--1);
}
/* Code wrap */
.code-wrap .highlight pre {
  white-space: break-spaces;
}

Tiny notes

/* Tiny notes */
.tiny-notes {
  width: 90vw;
  position: relative;
  left: calc(-45vw + 50%);
}
.tiny-notes ul.embedded.blog-posts {
  display: flex;
  gap: .5em;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding: .5em 0;
}
/* Box containing post content */
.tiny-notes ul.embedded.blog-posts > li {
  width: 200px;
  min-height: 200px;
  height: fit-content;
  padding: 2em;
  background-color: var(--notes-bg);
  border: 1px solid var(--notes-border);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  border-radius: 0;
}
/* Remove extra space above content */
.tiny-notes ul.embedded.blog-posts > li div p:first-child {
  margin-top: 0;
}
/* Hide title, but not link */
.tiny-notes ul.embedded.blog-posts > li > a {
  visibility: hidden;
  font-size: 0px;
  color: var(--subtext-color);
  text-decoration: none;
  width: auto;
  padding: 0;
}
/* Content that will be visibly linked */
.tiny-notes ul.embedded.blog-posts > li > a::after {
  visibility: visible;
  content: "♡"; /* Select an emoji, symbol, or other short text */
  font-size: var(--step-0);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: .6rem;
  text-underline-offset: -.6rem;
  text-decoration-skip-ink: none;
}
.tiny-notes ul.embedded.blog-posts > li > a:hover::after {
  color: var(--link-color);
}
/* Post body */
.tiny-notes ul.embedded.blog-posts > li > div {
  flex-basis: 100%;
  line-height: 1.4;
}
/* Embedded post content */
ul.embedded.blog-posts > li div p:first-child {
  margin-top: 0;
}
ul.embedded.blog-posts > li div > ul,
ul.embedded.blog-posts > li div > ol {
  margin-bottom: 1em;
}
ul.embedded.blog-posts > li div > ul li {
  list-style-type: disc;
}
ul.embedded.blog-posts > li div > ul li ul li {
  list-style-type: circle;
}
/* Tiny notes rotation */
.rotate ul.embedded.blog-posts > li:first-child {
  --rotate: -3deg;
}
.rotate ul.embedded.blog-posts > li:nth-child(odd) {
  margin-right: 1em;
}
.rotate ul.embedded.blog-posts > li:nth-child(even) {
  --rotate: -1deg;
  margin-top: 1em;
  z-index: 1;
}
.rotate ul.embedded.blog-posts > li:nth-child(3n) {
  --rotate: -3deg;
  align-self: center;
}
.rotate ul.embedded.blog-posts > li:nth-child(5n) {
  --rotate: 1deg;
  margin-top: 1.5em;
}
.rotate ul.embedded.blog-posts > li:nth-child(7n) {
  --rotate: 4deg;
  margin-bottom: 1em;
}
.rotate ul.embedded.blog-posts > li:nth-child(11n) {
  --rotate: 2deg;
  margin-top: .5em;
}
.rotate ul.embedded.blog-posts > li:nth-child(3),
.rotate ul.embedded.blog-posts > li:nth-child(13n) {
  --rotate: 6deg;
}
.rotate ul.embedded.blog-posts > li:nth-child(17n) {
  --rotate: -5deg;
}
.rotate ul.embedded.blog-posts > li {
  rotate: var(--rotate);
}

Clippings

(Supplements tiny notes CSS: increase width and rotate less.)

/* Clippings */
.clippings .tiny-notes ul.embedded.blog-posts > li {
  width: fit-content;
  max-width: 50ch;
  min-height: 200px;
  height: fit-content;
}
.clippings blockquote {
  border: none;
  margin: 0;
  padding: 0;
}
.clippings ul.embedded.blog-posts > li p:has(> a) {
  font-size: var(--step--1);
}
/* Clippings rotation */
.clippings .rotate ul.embedded.blog-posts > li {
  rotate: calc(var(--rotate) / 3);
}
.clippings .rotate ul.embedded.blog-posts > li:nth-child(5n) {
  max-width: 60ch;
}
.clippings .rotate ul.embedded.blog-posts > li:nth-child(7n) {
  max-width: 55ch;
}

Blank

/* Blank */
.blank header,
.blank footer,
.blank .tags {
  display: none;
}

Bookshelf

/* Bookshelf */
html:has(.bookshelf),
body.bookshelf {
  height: calc(100% - 1em);
}
body.bookshelf  {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.bookshelf main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.bookshelf .tags {
  display: none;
}
.bookshelf p:has(> i time) {
  margin: 0;
}
/* Shelf */
.books {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  border-bottom: 1px solid var(--notes-border);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  line-height: initial;
}
.books section {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--notes-border);
  padding: 0 1.5em;
  margin-bottom: -1px;
}
.books h2 {
  align-self: flex-start;
}
.books ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column-reverse;
}
/* Each book */
.books ul li {
  border: 1px solid var(--notes-border);
  background-color: var(--notes-bg);
  width: 25vw;
  max-width: 30em;
  padding: .5em .75em .75em;
  margin-bottom: -1px;
}
/* Hide book notes */
.books ul li > ul {
  display: none;
}
@media (max-width: 1280px) {
  .books section {
    flex-grow: 1;
  }
  .books .to-read {
    order: 3;
  }
  .books .reading {
    order: 1;
  }
  .books .read {
    order: 2;
  }
  .books ul li {
    width: 70vw;
  }
}
.books .stagger > ul > li:nth-child(2) {
  margin-left: var(--stagger-2);
}
.books .stagger > ul > li:nth-child(3n) {
  margin-left: var(--stagger-3);
}
.books .stagger > ul > li:nth-child(5n) {
  margin-left: var(--stagger-5);
}
.books .stagger > ul > li:nth-child(7n) {
  margin-left: var(--stagger-7);
}
.books .stagger.to-read {
  --stagger-2: -.25em;
  --stagger-3: .5em;
  --stagger-5: -.625em;
  --stagger-7: -.125em;
}
.books .stagger.reading {
  --stagger-2: .5em;
  --stagger-3: -.625em;
  --stagger-5: -.25em;
  --stagger-7: -.125em;
}
.books .stagger.read {
  --stagger-2: .25em;
  --stagger-3: -.5em;
  --stagger-5: .25em;
  --stagger-7: .625em;
}