Saturday, March 7
Starlight CSS tweaks: A hero for a blog index page
Yesterday, I created (a rough version of) an Astro component that renders a stream of recent posts for a blog index page. I’m already using it on days.ohn.sh. For now, I’m using Astro’s Starlight documentation framework, which means the default styling isn’t optimized for a blog.
In Starlight, styles can be customized site-wide with the global customCss config option. In this case, I only wanted to modify the hero on the main index page. Luckily, you can import CSS into an MDX page, just like you would in an Astro component. Doing so allows for page-specific CSS tweaks.
Git Commits
days commits 11
ohnsh/days-
9:17 pm — John Sherrell <dev@ohn.sh>
Favicon discussion.
-
6:36 pm — John Sherrell <dev@ohn.sh>
Applying splash.css site-wide.
-
6:32 pm — John Sherrell <dev@ohn.sh>
Content update (OG images).
-
6:21 pm — John Sherrell <dev@ohn.sh>
Fix rendering of plain markdown code blocks by removing mdx config from astro.config.mjs. By default the mdx config extends the markdown config, making it redundant anyway.
-
5:24 pm — John Sherrell <dev@ohn.sh>
Added video, section about external links.
-
4:08 pm — John Sherrell <dev@ohn.sh>
Add rehype plugin to open external links in new tab.
-
3:17 pm — John Sherrell <dev@ohn.sh>
Content update: themes.
-
12:00 pm — John Sherrell <dev@ohn.sh>
Added content explaining recent Starlight customizations.
-
11:20 am — John Sherrell <dev@ohn.sh>
Added splash-like hero to the index, tweaked CSS for that specific page. Considering hiding TOC site-wide.
-
1:58 am — John Sherrell <dev@ohn.sh>
Style tweaks.
-
1:20 am — John Sherrell <dev@ohn.sh>
Added recent days feed to index page. Used HiDeoo/starlight-blog as a starting point but kept very little code.