diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 0000000..1c49d9b
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,17 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "gitsubmodule"
+    directory: "/" # Location of .gitmodules file
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    # Workflow files stored in the
+    # default location of `.github/workflows`
+    directory: "/"
+    schedule:
+      interval: "weekly"
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index da17e86..fb3574e 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,6 +1,6 @@
 name: Build CI
 
-on: 
+on:
   pull_request:
     types: [opened, reopened]
   push:
@@ -24,12 +24,13 @@ jobs:
       - name: Install dependencies
         # cmake ships with the ubuntu-latest runner
         run: |
-          sudo apt-get install python3-dev graphviz
+          sudo apt-get install python3-dev
           python3 -m pip install -r docs/requirements.txt -r requirements.txt -r requirements-dev.txt
 
       - name: Run cpp-linter as a py pkg
         id: linter
         run: |
+          sudo apt-get install clang-format-12
           cpp-linter \
           --version=12 \
           --style=file \
@@ -56,8 +57,13 @@ jobs:
       - name: Match pylint problems to diff via github annotations
         run: python ./.github/workflows/pylint_matcher.py pylint.json
 
+      - name: Get doc dependencies
+        run: sudo apt-get install -y libgl1-mesa-dev libxkbcommon-x11-0 graphviz
       - name: Build docs
         working-directory: docs
+        # required for pySide6 on headless linux (as used by sphinx-social-cards extension)
+        env:
+          QT_QPA_PLATFORM: offscreen
         run: sphinx-build -E -W -b html . _build/html
 
       - name: Save built docs as artifact
@@ -67,7 +73,7 @@ jobs:
           path: ${{ github.workspace }}/docs/_build/html
 
       - name: upload to github pages
-        if: github.event_name !='pull_request'
+        if: github.ref == 'refs/heads/main'
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.readthedocs.yaml b/.readthedocs.yaml
index 1e3b577..ac47b60 100644
--- a/.readthedocs.yaml
+++ b/.readthedocs.yaml
@@ -11,6 +11,12 @@ build:
     - python3-dev
     - graphviz
     - cmake
+    - libgl1-mesa-dev
+    - libxkbcommon-x11-0
+  # setting a public env var from RTD config is not yet implemented.
+  # See https://github.com/readthedocs/readthedocs.org/issues/6311
+  # Instead, use the RTD project's  settings page (admin/environment variables) to
+  # set QT_QPA_PLATFORM=offscreen
 
 python:
   install:
diff --git a/docs/social_cards/layouts/custom.yml b/docs/social_cards/layouts/custom.yml
index fdc82d4..b609285 100644
--- a/docs/social_cards/layouts/custom.yml
+++ b/docs/social_cards/layouts/custom.yml
@@ -1,6 +1,6 @@
 # {% block color_vals %}
-bg_color: &bg_color '{{ layout.background_color }}'
-fg_color: &fg_color '{{ layout.color }}'
+bg_color: &bg_color '{{ layout.background_color | yaml }}'
+fg_color: &fg_color '{{ layout.color | yaml }}'
 # {% endblock %}
 
 row1_width: &row1_width 1080
@@ -11,38 +11,34 @@ layers:
   # the base layer for the background
   - background:
       color: *bg_color
-      image: >
-        {% if layout.background_image %}
-        {{ layout.background_image }}
-        {% endif %}
+      image: '{{ layout.background_image }}'
   # the layer for the logo/icon image
   - size: { width: 60, height: 60 }
     offset: { x: 1050, y: 60 }
     icon:
       image: >
-        {% if page.meta.icon %}
-        {{ page.meta.icon }}
-        {% elif layout.logo.image %}
-        {{ layout.logo.image }}
-        {% endif %}
-      color: >
-        {% if layout.logo.color %}
-        {{ layout.logo.color }}
-        {% endif %}
+        #% if page.meta.icon %#
+        '{{ page.meta.icon }}'
+        #% elif layout.logo.image %#
+        '{{ layout.logo.image }}'
+        #% endif %#
+      color: '{{ layout.logo.color | yaml }}'
   # the layer for the large logo image
   - size: { width: 640, height: 320 }
     offset: { x: 560, y: *col2 }
     icon:
       image: '{{ layout.background_image }}'
   # fancy bg art
-  # {% for r in range(60, 640, 90) %}
-  - offset: { x: {{ -r }}, y: {{ -r }} }
-    size: { width: {{ r  * 2}}, height: {{ r * 2 }} }
+  - offset: { x: -630, y: -630 }
+    size: { width: 1260, height: 1260 }
     ellipse:
-      border:
-        width: {{ ((640 - r) * 0.1) | int }}
-        color: '#802a033c'
-  # {% endfor %}
+      radial_gradient:
+        colors:
+          0.5: rgba(0, 0, 0, 0)
+          1.0: rgba(128, 42, 3, 0.24)
+        spread: repeat
+        center: { x: 0, y: 0 }
+        radius: 90
   # the layer for the site's name
   - offset: { x: 60, y: 60 }
     size: { width: 960, height: 60 }
@@ -54,34 +50,32 @@ layers:
   - size: { width: *row1_width, height: 150 }
     offset: { x: 60, y: 150 }
     typography:
-      content: >
-        {% if page.meta.title %}
-        {{ page.meta.title }}
-        {% elif page.title %}
-        {{ page.title }}
-        {% endif %}
+      content: >-
+        #% if page.meta.title %#
+        '{{ page.meta.title }}'
+        #% elif page.title %#
+        '{{ page.title }}'
+        #% endif %#
       line:
         height: 0.9
       font:
         weight: 500
-      border: 
-        color: deep-orange
-        width: 4
       color: *fg_color
-      align: center top
+      align: center
+      overflow: on
   # the layer for the site's (or page's) description
   - offset: { x: 60, y: *col2 }
     size: { width: 490, height: 290 }
     typography:
-      content: >
-        {% if page.meta and page.meta.description %}
-        {{ page.meta.description }}
-        {% else %}
-        {{ config.site_description }}
-        {% endif %}
+      content: >-
+        #% if page.meta and page.meta.description %#
+        '{{ page.meta.description }}'
+        #% else %#
+        '{{ config.site_description }}'
+        #% endif %#
       line:
         height: 0.87
         amount: 4
       overflow: on
       align: start bottom
-      color: '{{ layout.color }}'
+      color: '{{ layout.color | yaml }}'