Tinkering with Bearblog design

17 Oct 2024

I enjoy tinkering with blog design more than I enjoy writing blog posts — so the obvious thing to do is to write blog posts about tinkering with blog design.

I think I'm where I want to be with how this Bearblog looks now, so I thought I'd share some of the thinking behind it.

I wanted this Bearblog to feel like me:⁴

• Monochromatic & minimal, with pops of brightness, especially purple
• Tiny fun details, like sparkles ･ﾟ✧
• Captures my whims, with space for multiple content formats

I wanted to use defaults where relevant:

• Local system fonts, something familiar and readable
• Emojis instead of custom icons
• Tapping into an existing color scheme, instead of coming up with something new

I wanted to be mindful of experience & accessibility:

• Layout & sizing
  • 65-character line length & 1.6 line height for readability
  • 1–1.125rem font size based on viewport
  • Fluid scale and reflow for zooming without loss of content or functionality
• Content
  • Image content have text alternatives nearby, communicating relevant information, context, or sentiment
  • Heading tags are used semantically for structural hierarchy (h1 → h2 → h3 → h4)
  • No animations
• Colors
  • Light & dark mode colors, based on user preference
  • Text content have a readable color contrast¹
  • Colors are used semantically (purple text are always active links)
  • Links have dotted underlines, so that color is not the only visual indicator
  • Visited links have a subtle visual difference, with pink underline text instead of purple²

I wanted this Bearblog to be lightweight:

• Images are saved as .webp and ≤40kb³ ≤100kb
• Theme styles are ≤10kb
• Syntax highlight styles are ≤6kb