My Bearblog theme CSS, lightly annotated

26 Nov 2024

After Robert mentioned my post on short-form content, I received questions about the CSS I shared. I also saw a few test pages in the discovery feed.

It became clear that pre-existing theme CSS played a large role in whether the CSS I shared worked out-of-the-box. For some themes, further CSS adjustments were needed to properly style & display the embedded content.

I tried to address the most common issues in the FAQ.

A few people expressed interest in learning CSS. One asked, "Do you have any advice for self-learning?"

I shared that I sharpened my CSS skills as a teen from customizing blogs and personal websites. (I designed & wrote CSS for a lot of LiveJournal and MySpace pages for myself & friends.) I learned by reading the source code of websites I liked. A lot of it was trying different things and seeing what worked.

Today, a similar path might be customizing Bearblog pages. There's a community here exploring CSS & JS extensions on their blogs, and many are learning in public.

For those brand new to websites, HTML for People is a good intro to HTML & CSS.

And for those who understand the basics, I think right-click & Inspect goes a long way. When I'm interested in how a website looks, I examine how it was built. I also often refer to Mozilla's web docs, CSS: Cascading Style Sheets. It's a good reference for everything that's possible with CSS.

My theme CSS

In the spirit of learning in public, I wanted to share my Bearblog's theme CSS and the Markdown for my pages.

For reference, I have a test page that demos how all of the styles look.

Some notes:

• Variables, light & dark mode

  • I have a lot of variables in :root. A lot of this is unnecessary — but I'm persnickety about my font sizes & spacing, so here we are.

  • The bits that are most relevant here are defining light & dark mode colors and using rem to define font sizes. I wanted to be mindful of both to respect user preferences.

  • I set a filter on img to lower the brightness of images in dark mode so that they're more comfy for the eyes.

• Page styles

  • Another persnickety thing: on desktop, the content shifts depending on whether the scrollbar displays. It's noticeable when navigating from a page with very little content (no scroll) to a page with more content (has scroll). I do not like this content shift, so the CSS for html margins corrects for it. There are other solutions for this too.

• Navigation styles

  • I used custom class names for my navigation links. This allows me to style the current active page link differently — so when someone is on the About page, the About link displays with a solid border instead of a dotted one.

• Post meta styles

  • I have some pages that display the post_last_modified attribute, e.g., "Edited 3 weeks, 3 days ago." I styled this text with .last-modified. It's a small detail that can be seen on the bottom of my test page.

• Post content styles

  • The img width ensures images display within the defined body width. My images are larger and would stick out otherwise.

  • I covered what the span.email b CSS does in Keeping email addresses hidden from spam bots.

  • The ::marker line-height is another persnickety thing. I noticed my bulleted lists in my #links posts displayed unevenly, and this corrects for that. (Yes, sometimes I obsess over pixels.)

• Table styles

  • The only special thing here is the sticky table header.

• Upvote button styles

  • Beyond the adjustments I mentioned in Adding gradient sparkles to the blog title & upvote button, I also styled the cursor. When the button is active (untoasted), the cursor is a pointer, indicating that it's clickable. When the button is disabled (toasted), the cursor is an arrow, indicating no action can be taken.

• Blog list styles

  • Unlike many of the default themes, my date sits under my post title.

• Embedded post lists & content styles

  • I shared about embedded posts in Displaying a feed of short-form content. This is how the code is applied on my blog.

• Code & syntax highlight styles

  • This is for styling code blocks, as shared in Prettifying code with syntax highlighting.

  • For My theme CSS and Markdown for my pages, I added a .highlight pre style for word wrap. The pages are long, and I didn't want horizontal scroll on the code blocks.