Merge pull request 'feat: present theme switch as a segmented control' (#15) from feat/segmented-theme-switch into main

Reviewed-on: #15

.gitea/workflows/build-and-publish.yml

@@ -18,7 +18,7 @@ jobs:
       packages: write
     steps:
       - name: Checkout
-        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        uses: actions/checkout@v4
         with:
           # Full history and tags are required to derive the next version
           # from the conventional-commit messages since the last release.
@@ -94,21 +94,21 @@ jobs:
           echo "Computed bump=${bump}, release=${release}, base=${base}"
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3
+        uses: docker/setup-qemu-action@v3
 
       - name: Set up Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
+        uses: docker/setup-buildx-action@v3
 
       - name: Log in to the Gitea container registry
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.repository_owner }}
           password: ${{ secrets.PACKAGES_TOKEN }}
 
       - name: Build and push
-        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6
+        uses: docker/build-push-action@v6
         with:
           context: .
           platforms: linux/amd64,linux/arm64

Dockerfile

@@ -1,7 +1,7 @@
 # Lightweight, non-root nginx serving the static site.
 # Runs as user "nginx" and listens on 8080, ready to sit behind an
 # external reverse proxy that terminates TLS and forwards requests.
-FROM nginxinc/nginx-unprivileged:1.27-alpine-slim
+FROM nginxinc/nginx-unprivileged:1.31-alpine-slim@sha256:6616de6eaa82bc2ee3541fa287a8fca7dc7271e6374e9402014dbd13f4a980ae
 
 COPY default.conf /etc/nginx/conf.d/default.conf
 COPY --chown=nginx:nginx index.html styles.css script.js messages.js /usr/share/nginx/html/

styles.css

@@ -63,10 +63,13 @@ body {
   padding: 1.5rem;
 }
 
+/* Segmented control: both options joined in one rounded container,
+   with the active segment filled. */
 .theme-toggle {
-  display: flex;
-  gap: 0.5rem;
-  border: none;
+  display: inline-flex;
+  border: 2px solid var(--button-bg);
+  border-radius: 999px;
+  overflow: hidden;
   margin: 0;
   padding: 0;
 }
@@ -75,19 +78,22 @@ body {
   font-family: inherit;
   font-size: 0.9rem;
   font-weight: 600;
-  padding: 0.5rem 1rem;
-  border: 2px solid var(--button-bg);
-  border-radius: 999px;
+  padding: 0.5rem 1.1rem;
+  border: none;
   background: transparent;
   color: var(--text);
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease;
 }
 
+/* Divider between the two segments. */
+.theme-button + .theme-button {
+  border-left: 2px solid var(--button-bg);
+}
+
 .theme-button[aria-pressed="true"] {
   background: var(--button-active-bg);
   color: var(--button-active-text);
-  border-color: var(--button-active-bg);
 }
 
 .stage {