Shane Theme
Version 1.4.0 · A warm editorial FSE block theme for shane.blog
Reading Experience
Reading Progress Bar
A 3px terracotta bar fixed to the top of the viewport on single post pages. Fills left to right as the reader scrolls. Accounts for the WordPress admin bar height.
Estimated Read Time
Shortcode 4 min read outputs a formatted string like “4 min read” based on word count at 200 wpm. Used in the single post header.
Auto Table of Contents
On single posts with 2 or more headings (h2/h3), a “In this post” navigation block is automatically injected before the first heading. Active section highlights in terracotta as the reader scrolls (IntersectionObserver-based scroll-spy).
Copy Code Button
A “Copy” button appears in the top-right corner of every <pre> block on hover. Shows “Copied!” feedback for 2 seconds. Falls back to execCommand on HTTP (local dev).
Syntax Highlighting
Prism.js with a custom editorial palette. Supported languages: JavaScript, TypeScript, PHP, Python, Bash, JSON, YAML, SQL, CSS, HTML/Markup. Full dark mode support. Light mode uses a GitHub-inspired high-contrast palette.
Navigation & Discovery
Command Palette
Press ⌘K (or Ctrl+K) from anywhere on the site to open a search modal. Searches post titles and excerpts via the WordPress REST API with 280ms debounce. Keyboard navigation: ↑ ↓ to navigate, Enter to open, Esc to close.
Related Posts
Three posts from the same category appear at the bottom of every single post in a responsive 3-column grid. Degrades gracefully to 1 column on mobile.
Writing Tools
Footnotes
Inline shortcode 1. Renders a superscript number in the post body linked to a numbered list at the bottom of the post. The ↑ link returns the reader to the inline reference. Footnotes appear before the Related Posts section.
Usage:
This is a claim.[fn]Source: example.com[/fn]
Featured Image Controls
Blog Listing Toggle
A “Show on blog listing” toggle in the post editor sidebar (under “Cover Photo”) controls whether the featured image appears on the blog index. Off by default — opt-in per post.
Single Post Toggle
A “Show on single post” toggle (same panel) controls whether the featured image appears above the title on the single post page. On by default — opt-out per post.
Featured Image Fade
All featured images rendered via the shane-featured-image-fade class get a bottom-fade mask (mask-image), making them blend into the page background. Applied by default on single post pages.
Image “Fade Bottom” Block Style
Any individual image block can have the “Fade Bottom” style applied via the editor sidebar → Block → Styles. Applies the same bottom-fade mask without requiring a featured image.
Dark Mode
Dark/Light Toggle
A sun/moon icon button in the header toggles between light and dark mode. Preference is saved in localStorage and restored on every visit.
Default to Light
New visitors always start in light mode regardless of OS preference. On their first visit, a one-time hint (“Currently using light mode”) appears in Dancing Script for 5 seconds to the right of the toggle, then fades out over 2.5 seconds.
Warm Dark Palette
Dark mode uses a warm editorial palette: #18130E background, #D4612E terracotta accent, #FAF8F5 primary text. Designed to avoid harsh blue-tinted darks.
SEO & Sharing
Open Graph Meta
og:title, og:description, og:image, og:url, og:site_name auto-generated from post title, excerpt (or trimmed content), and featured image. Skipped automatically if Yoast SEO or Rank Math is active.
Twitter / X Card
twitter:card, twitter:title, twitter:description, twitter:image auto-generated alongside Open Graph tags. Uses summary_large_image format.
Design
Orange Dot in Site Title
The header site title renders as shane•blog with a terracotta bullet between the two words. Color swaps in dark mode.
Header Drop Shadow
The header uses a subtle box-shadow instead of a border for visual separation. Clean without drawing the eye.
Footer Tint
The footer uses a slightly tinted background to separate from the main content area without a hard line.
Typography
- Display: Playfair Display (serif) — headings and hero
- Body: Lato — UI, meta, captions
- Script: Dancing Script — decorative accents
- Code: Fira Code / Fira Mono — code blocks and inline code
Editor Enhancements
Cover Photo Panel
A custom “Cover Photo” settings panel in the Gutenberg post sidebar contains both featured image toggles. Only visible on posts.
Templates
| Template | Description |
|---|---|
index.html | Blog listing with featured images |
index-cards.html | Card-style blog listing |
single.html | Single post with featured image above title |
page.html | Default page |
page-online.html | Links page (Shane’s “Online” page) |
archive.html | Category/tag archive |
search.html | Search results |
404.html | Not found |
Footnotes
- … ↑