Introduction

I just did a round of updates on the blog theme, mostly about the reading experience: fonts load more smoothly, article pages are wider and more comfortable, code blocks got a toolbar, and the table of contents now works on mobile too. This post records what changed.

Fonts

LXGW WenKai and Font Awesome were both being loaded twice, and the font only switched in after the page finished loading, so the first screen used to flash. Now the font CSS loads directly in the page head, no more flash, and the number of requests is cut in half.

Article Pages

• The content width no longer stretches mindlessly with the screen; it caps at 780px, so it’s not tiring to read on big displays
• The sidebar table of contents now scrolls with you, so you don’t have to scroll back to the top to check it on long posts
• Body font size, line height, and heading spacing were all re-tuned

Table of Contents on Mobile

Previously the TOC simply didn’t show on small screens, so with long technical posts the only way to jump to a section was scrolling down. Now there’s a Table of Contents (N) block right under the title; it only expands when you tap it, so it takes up no room.

Code Blocks

Code blocks got a toolbar:

• Language shown in the top-left corner (YAML, BASH, that kind of thing)
• Copy button in the top-right corner, and it changes to Copied after you click it
• Code blocks longer than 24 lines can be collapsed, with the button showing something like Collapse · 44 lines
• On phones the code block stretches full width, so horizontal scrolling feels much better

Homepage List

The post list on the homepage got a small touch-up: a little dot in front of each title, a faint dashed line between rows, and the title turns orange on hover. On phones the date moves below the title. It’s still a plain, simple list.

Previous / Next Posts

Added previous and next post navigation at the bottom of each article, right before the comments section, with the titles shown. Either side hides automatically when there’s no previous or next post, so when you’re reading technical posts you can just click through to the next one instead of going back to the homepage.

Back to Top

Added a back-to-top button in the bottom-right corner. It’s a little cat paw, only appears after you’ve scrolled a bit, and clicking it smooth-scrolls you back up.

Colors

Colors and corner radii were consolidated into CSS variables at the top of the stylesheet. If I want to fine-tune the palette later, I only need to change one place instead of searching the whole file for hex values.

Cleanup

A batch of old code got cleaned up along the way: dead commented-out code in the header, a JS file nobody uses anymore, and a style referencing the wrong font.

Feel free to follow my blog at www.bboy.app

Have Fun