My bearblog CSS theme, with sidebar and grid styles
This blog layout is fully Grid-based from the header and content layout, to the post cards. The result is amazing! And of course this website is responsive too, the Header now functions as a Sidebar on PC screens (>600px).
| Wide | Phone |
|---|---|
 |
 |
The idea of using the header as a sidebar initially came to me when I was browsing the Slyvia layout sandbox. Although the technique is different (I use a grid), this is where my idea started, while I was learning about grid-areas at W3Schools.
For the idea of posting in grid card form, I was inspired by Eleventy Excellent (including the clamp font), it uses a simple grid-template-columns technique with fr sizing unit.
Some of the features available:
- Variable and light/dark mode
- For flexible setting, i use
var(--*)things and:root - I use responsive font sizing using
clamp()andemunit.
- For flexible setting, i use
- Upvote button
- Instead use the default arrow SVG, i use 👍
- Card layout for posts
- You get the responsive card-like and full anchored (use
:after) in every post list - 2 cards per column (
1fr 1fr) on wide screen
- You get the responsive card-like and full anchored (use
- Sidebar-like header
- Like i said before, on wider screen the header will be showed like sidebar!
- Default accent
#07bbbc(Turqoise) applied via--link-color