It was time. After years running the same Blogger template with minor tweaks here and there, I decided to rebuild the entire theme from scratch. The goal was clear: bring La Rebelion in line with Google's own Material Design 3 (M3) language, taking direct inspiration from [blog.google](https://blog.google) and delivering a reading experience that feels clean, modern, and unmistakably Google.
Here is everything that changed, and why.
The Design Direction
Google Blog became the north star. If you have ever read an article on blog.google, you know the experience: white space that breathes, typography that commands attention, and a layout that puts the content front and centre with zero distractions. That is exactly what I wanted for La Rebelion.
The principles behind every decision:
- M3 tokens everywhere: Surfaces, containers, outlines, elevation, accent colours: all defined through CSS custom properties following the Material Design 3 specification.
- Google Sans + Roboto pairing: Headlines use Google Sans for that distinctive Google personality. Body text runs on Roboto for maximum readability.
- Google Blue (#1a73e8) as the accent: One accent colour, used consistently across links, buttons, active states, and the theme toggle.
Light and Dark, Automatically
The new theme ships with a three-state toggle: light, dark, and auto.
In auto mode (the default), the theme reads the time of day. Between 6:00 AM and 6:59 PM you get the clean white palette. From 7:00 PM to 5:59 AM, the dark M3 surface (#1c1b1f) takes over. Tap the toggle once and you override to your preference. Tap again to return to auto.
A small inline script in the `<head>` prevents any flash of unstyled content (FOUC) by applying the correct class before the first paint. The toggle itself is an M3 pill switch, relocated from the bottom-right corner into the navigation bar where it belongs.
The dark palette follows Google's M3 dark theme specification: deep surfaces with subtle container differentiation, muted borders, and a softer blue accent (#a8c7fa) that is easy on the eyes at night.
Article Pages: The Google Blog Layout
This is where the biggest visual shift happened. Individual article pages now follow the blog.google layout almost pixel for pixel:
- 726px body width: centred. The same column width Google uses for their articles.
- Title, date, reading time, body, and footer** all share the same 726px max-width with `margin: 0 auto`, creating a perfectly aligned reading column.
- 2.5rem titles in Google Sans, bold (700 weight), with tight letter-spacing (-0.02em) for that headline punch.
- 1.0625rem body text at 1.75 line-height. Generous leading that makes long-form content comfortable to read.
- Full-bleed images with subtle M3 border-radius. No shadows, no borders, just clean rounded corners.
- Clean post footer separated by a single 1px border-top, keeping author info and labels visually distinct without being heavy.
Card styling is completely removed on article pages. No background, no shadow, no padding box. The content stands on its own against a pure white (or dark) surface.
Index Page: Bordered Cards with Personality
The homepage takes a different approach. Each post appears inside a bordered card with:
- 1px border in the theme's outline colour
- Subtle rounded corners (M3 radius tokens)
- Hover elevation for interactive feedback
- Larger titles (1.75rem) than the previous version, making scanning easier
- Date headers styled as accent-coloured eyebrow labels in uppercase
The body text on index cards matches the article page's typographic rhythm: same font, same line-height, same colour treatment. Consistency across every view.
The Footer: Google Blog Columns
The old footer was functional but forgettable. The new one is modelled directly on blog.google's footer pattern:
- Three-column layout with the La Rebelion logo, navigation links, and social icons
- MutationObserver on the body class attribute swaps the logo between light and dark versions automatically when the theme changes
- Compact copyright bar at the bottom with visitor stats
- Collapses gracefully into a single column on mobile
Search and Subscribe Widgets
Two widgets that previously had no custom styling now match the theme perfectly:
Search ("Buscar artículo"): The input field and button form a pill-shaped pair. The input gets M3 border treatment with a focus ring in accent blue. The search button is a solid accent fill with white text, rounded on the right side to complete the pill shape. Dark mode adjusts the hover state to a lighter blue with dark text.
Telegram ("LaRebelionBOT Feeds"): White text on the accent blue background with a full-radius pill shape. The old inline styles that were overriding the theme CSS on hover (turning the background grey and making the white text invisible) have been stripped out entirely. All styling now lives in the main stylesheet where it can be maintained cleanly.
Fully Responsive: Mobile and Tablets
This was the final piece. The previous theme had a Blogger conditional viewport tag that forced `width=1100` on non-mobile devices, which meant tablets got a desktop layout crammed into a smaller screen. That is gone.
The new responsive system includes four breakpoints:
1280px: Releases the fixed max-width on layout regions so content can reflow naturally on smaller monitors.
1024px (tablet): The sidebar drops below the main content as a full-width section. Column padding resets to zero. Content padding tightens.
768px (small tablet / large phone): This is the main responsive breakpoint. The header compresses. Navigation tabs become horizontally scrollable with hidden scrollbars and touch momentum. The theme toggle shrinks to a compact size. Article titles, body, date, reading time, and footer all switch to `max-width: 100%` to fill the available width. Index cards lose horizontal padding. The footer stacks vertically. The search and Telegram widgets go full-width.
480px (mobile phone): Final tightening. Smaller header text. Tighter card padding. Article images bleed slightly past their container for a full-width feel. Label chips and pager buttons compact further.
The Blogger template-skin's `min-width: $(content.width)` was also overridden to `min-width: 0`, which was critical: without that change, the body would never shrink below 1234px regardless of the viewport tag.
Technical Notes
A few implementation details for anyone working with Blogger themes:
1. CSS Custom Properties for theming. Every colour, radius, shadow, and transition is defined as a variable. The dark theme simply reassigns those variables under `body.dark`, making the entire palette swap happen in one class toggle.
2. FOUC prevention. An inline `<script>` in the `<head>` checks `localStorage` for a manual preference and falls back to time-based detection. It applies the `.dark` class before any CSS or content loads.
3. No em dashes in sight. A personal rule: em dashes are one of the most recognisable AI-generated text patterns. Every piece of writing on this blog avoids them entirely.
4. CDATA balance matters. Blogger themes use XML with CDATA sections for CSS and JavaScript. Any edit must maintain exact balance: 10 open CDATA tags, 10 close. One mismatch and the entire theme breaks.
5. Specificity strategy. Article pages use `body.item` and `body.static_page` selectors. Index pages use `body:not(.item):not(.static_page)`. This keeps styles cleanly separated without conflicts.
What Comes Next
The foundation is solid. From here, the roadmap includes performance optimisation (lazy loading, critical CSS inlining), structured data improvements for richer search results, and possibly a reading progress bar for long articles.
For now, La Rebelion has the clean, confident design it deserved. Built on Google's M3 principles, inspired by blog.google, and fully responsive from desktop to pocket.
Welcome to the new La Rebelion.
