Improved styling of blog (#23)

* add theme switcher to header

* use dracula theme dark mode

* improve header links

* improve homepage layout

* add list-style to homepage

* improve homepage styling

* remove accidentally custom styling file

* improve styling from choldgraf template

* normalize date format

* add css for postlist

* add seaprator

* update css to simplify for theme

* remove underlines for titles

Author: TimMonko

pyproject.toml

@@ -9,4 +9,5 @@ dependencies = [
     "napari-sphinx-theme>=0.7.0",
     "sphinx>=8.2.3",
     "sphinx-autobuild>=2025.8.25",
+    "sphinx-design>=0.6.0",
 ]

requirements.txt

@@ -2,3 +2,4 @@ sphinx<7.3.0
 ablog
 napari-sphinx-theme
 myst-parser
+sphinx-design

source/_static/custom.css

@@ -0,0 +1,25 @@
+/* Custom styling for postlist - multiline layout */
+
+/* More spacing between blog posts */
+.postlist .ablog-post {
+    margin-bottom: 2em;
+}
+
+/* The paragraph containing title, date, author - make it smaller and grey */
+.postlist .ablog-post-title {
+    font-size: 0.9em;
+    line-height: 1.8;
+}
+
+/* Make the title link large, bold, and black - override parent styling */
+.postlist .ablog-post-title > a:first-child {
+    display: block;
+    font-size: 1.4em; /* 1.4 * 0.9em = 1.26em effectively */
+    font-weight: 700;
+    margin-bottom: 0.3em;
+    text-decoration: none;
+}
+
+.postlist .ablog-post-title a:not(:first-child) {
+    text-decoration: none;
+}

source/_templates/navbar-project.html

@@ -1,4 +1,4 @@
-<!-- A small template snippet for theme testing -->
+<!-- Blog navigation -->
 <a class="navbar-brand" href="{{ pathto(master_doc) }}">
-  napari
+  🏝️ Island Dispatch
 </a>

source/blog/sustainability_survey.md

@@ -9,8 +9,6 @@ language: English
 
 # Towards long-term sustainability for napari
 
-*Tues, Oct 21, 2025*
-
 The napari project has had a big year, with lots of new releases, community initiatives, and an expanding core team. In this post, we want to share the work supported by our current grant funding, the ongoing effort required to maintain the project, our current thoughts for ensuring napari’s long-term financial sustainability and the new funding models that we’re exploring to support the project’s needs. 
 
 We want **your** thoughts and feedback, so please **fill out [this short survey](https://napari.typeform.com/sustainability) by November 1st** to help guide our next steps!

source/conf.py

@@ -17,6 +17,7 @@
     "myst_parser",
     "ablog",
     "sphinx.ext.intersphinx",
+    "sphinx_design",
 ]
 
 templates_path = ['_templates']
@@ -25,7 +26,18 @@
 ]
 
 # ABlog configuration
-blog_baseurl = "https://napari.org"
+blog_baseurl = "https://napari.org/island-dispatch"
+blog_title = "The Island Dispatch"
+blog_path = "blog"
+blog_post_pattern = "blog/*/*"
+blog_feed_fulltext = True
+blog_feed_subtitle = "Community news and updates from the napari project"
+fontawesome_included = True
+post_redirect_refresh = 1
+# post_auto_image = 1
+post_auto_excerpt = 2
+post_date_format = "%Y %B %d"
+post_date_format_short = "%Y %b %d"
 
 # -- Options for HTML output -------------------------------------------------
 # https://www.sphinx-doc.org/en/master/usage/configuration.html#options-for-html-output
@@ -34,17 +46,24 @@
 html_static_path = ['_static']
 html_logo = "_static/logo.png"
 html_favicon = "_static/logo.png"
+html_css_files = ['custom.css']
 
 html_theme_options = {
-    #"external_links": [{"name": "napari hub", "url": "https://napari-hub.org"}],
+    "external_links": [
+        {"name": "napari.org", "url": "https://napari.org"},
+        {"name": "napari hub", "url": "https://napari-hub.org"},
+    ],
     "github_url": "https://github.com/napari/napari",
     "navbar_start": ["navbar-logo", "navbar-project"],
-    "navbar_end": ["navbar-icon-links"],
+    "navbar_end": ["navbar-icon-links", "theme-switcher"],
     "navbar_persistent": [],
     "header_links_before_dropdown": 6,
-    # "secondary_sidebar_items": ["page-toc"],
-    "pygment_light_style": "napari",
-    "pygment_dark_style": "napari",
+    "logo": {
+        "link": "https://napari.org",
+    },
+    "secondary_sidebar_items": [],
+    "pygments_light_style": "napari",
+    "pygments_dark_style": "dracula",
     # "announcement": "https://napari.org/dev/_static/announcement.html",
     "analytics": {
         # The domain you'd like to use for this analytics instance
@@ -53,3 +72,18 @@
         "plausible_analytics_url": "https://plausible.io/js/plausible.js",
     },
 }
+
+# HTML context for theme
+html_context = {
+    "default_mode": "auto",
+}
+
+# Sidebar configuration
+html_sidebars = {
+    "**": [
+        "search-field.html",
+        "ablog/postcard.html",
+        "ablog/recentposts.html",
+        "ablog/archives.html",
+    ]
+}

source/index.md

@@ -1,11 +1,8 @@
-# The Island Dispatch 🏝️
-
-Here's the napari community blog!
-
-## All posts
+# Welcome to the napari community blog! 🏝️
 
 ```{postlist}
-   :list-style: circle
-   :format: "{title}"
-   :sort:
+   :format: {title} {date} | {author}
+   :date: %Y %B %d
+   :excerpts:
+   :expand: Read more ...
 ```