From a2a7678765c8518fe95761d219bd54a38384bd9e Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Wed, 1 Apr 2026 15:23:16 +0200
Subject: [PATCH] chore: some styling improvements

---
 src/_includes/layouts/kitchen.vto         |  6 ------
 src/common/pages/from-uri.js              |  7 ++++++-
 src/facets/data/export-import/index.html  |  4 ++++
 src/facets/data/v3-import/index.html      |  4 ++++
 src/facets/playback/auto-queue/index.html |  1 -
 src/guide.vto                             | 25 ++++++++++++++++-------
 src/styles/wireframe/ui.css               |  5 +++++
 7 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/_includes/layouts/kitchen.vto b/src/_includes/layouts/kitchen.vto
index c79cacfd..3f7cf192 100644
--- a/src/_includes/layouts/kitchen.vto
+++ b/src/_includes/layouts/kitchen.vto
@@ -15,12 +15,6 @@ scripts:
   - common/pages/version-upgrade.js
 ---
 
-<style>
-  .construct, h2 {
-    color: var(--accent);
-  }
-</style>
-
 <header style="overflow: hidden">
   <div>
     <div class="diffuse-logo-container diffuse-logo-container--condensed">
diff --git a/src/common/pages/from-uri.js b/src/common/pages/from-uri.js
index 923bc9f4..9e91f98b 100644
--- a/src/common/pages/from-uri.js
+++ b/src/common/pages/from-uri.js
@@ -59,7 +59,9 @@ export function openAddFromURIModal() {
               />
             </div>
           </div>
-          <div style="display: flex; gap: var(--space-xs); margin-top: var(--space-sm)">
+          <div
+            style="display: flex; font-size: var(--fs-sm); gap: var(--space-xs); margin-top: var(--space-sm)"
+          >
             <button type="submit" class="button--bg-accent">Add</button>
             <button type="button" id="add-uri-cancel">
               Cancel
@@ -112,12 +114,15 @@ export function openAddFromURIModal() {
   const nameEl = /** @type {HTMLInputElement} */ (
     dialog.querySelector("#add-uri-name")
   );
+
   const kindEl = /** @type {HTMLSelectElement} */ (
     dialog.querySelector("#add-uri-kind")
   );
+
   const uriEl = /** @type {HTMLInputElement} */ (
     dialog.querySelector("#add-uri-uri")
   );
+
   if (nameEl) nameEl.value = "";
   if (kindEl) kindEl.value = "interactive";
   if (uriEl) uriEl.value = "";
diff --git a/src/facets/data/export-import/index.html b/src/facets/data/export-import/index.html
index 630e387c..0b9edfa2 100644
--- a/src/facets/data/export-import/index.html
+++ b/src/facets/data/export-import/index.html
@@ -53,6 +53,10 @@
     padding: var(--space-md);
   }
 
+  button {
+    flex: 1;
+  }
+
   p {
     line-height: var(--leading-relaxed);
     max-width: 42ch;
diff --git a/src/facets/data/v3-import/index.html b/src/facets/data/v3-import/index.html
index 831f3c7d..ae8b64ed 100644
--- a/src/facets/data/v3-import/index.html
+++ b/src/facets/data/v3-import/index.html
@@ -43,6 +43,10 @@
     padding: var(--space-md);
   }
 
+  button {
+    flex: 1;
+  }
+
   p {
     line-height: var(--leading-relaxed);
     max-width: 42ch;
diff --git a/src/facets/playback/auto-queue/index.html b/src/facets/playback/auto-queue/index.html
index 73a73da7..8a1c9397 100644
--- a/src/facets/playback/auto-queue/index.html
+++ b/src/facets/playback/auto-queue/index.html
@@ -61,7 +61,6 @@
 
   label {
     flex: 1;
-    flex-wrap: wrap;
     letter-spacing: var(--leading-relaxed);
     text-transform: uppercase;
   }
diff --git a/src/guide.vto b/src/guide.vto
index e44af730..6bbae318 100644
--- a/src/guide.vto
+++ b/src/guide.vto
@@ -4,11 +4,22 @@ base: ../
 title: Guide | Diffuse
 ---
 
+<style>
+  h2 {
+    color: var(--bg-color);
+    background: oklch(from var(--accent-twist-2) l c h / 0.8);
+    display: inline-block;
+    line-height: 0.75;
+    text-box: trim-both cap alphabetic;
+    padding: var(--space-3xs);
+  }
+</style>
+
 <h1 hidden>Guide</h1>
 
 <div class="columns">
   <section>
-    <h3>Concept</h3>
+    <h2>Concept</h2>
 
     <p>
       Diffuse is unlike traditional software; instead of combining several features into a single user interface and producing data output, we do the opposite, we start with the data and work our way up from there.
@@ -28,7 +39,7 @@ title: Guide | Diffuse
   </section>
 
   <section>
-    <h3>Getting started</h3>
+    <h2>Getting started</h2>
 
     <ul style="display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); padding-left: 0">
       <!-- 1 -->
@@ -52,7 +63,7 @@ title: Guide | Diffuse
       <!-- 4 -->
       <li class="with-icon" style="gap: var(--space-sm)">
         <i class="ph-fill ph-sparkle" style="opacity: 0.4"></i>
-        <span><strong style="color: var(--accent-twist-4)">Continue exploring, enable some additional features</strong> such as making played audio available offline automatically.</span>
+        <span><strong>Continue exploring, enable some additional features</strong> such as making played audio available offline automatically.</span>
       </li>
 
       <!-- 5 -->
@@ -65,7 +76,7 @@ title: Guide | Diffuse
 </div>
 
 <section id="tutorial">
-  <h3>Tutorial</h3>
+  <h2>Tutorial</h2>
 
   <div class="columns">
     <div>
@@ -74,7 +85,7 @@ title: Guide | Diffuse
       </p>
 
       <p>
-        <button id="add-sample-content" class="button--bg-accent">
+        <button id="add-sample-content" class="button--bg-twist-2">
           <span>Add sample content</span>
         </button>
       </p>
@@ -88,7 +99,7 @@ title: Guide | Diffuse
       </p>
 
       <p>
-        <a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
+        <a class="button button--bg-twist-2" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
           Play audio
         </a>
       </p>
@@ -108,7 +119,7 @@ title: Guide | Diffuse
       </p>
 
       <p>
-        <a class="button button--bg-accent" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}" target="_blank">
+        <a class="button button--bg-twist-2" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}" target="_blank">
           Add audio input
         </a>
       </p>
diff --git a/src/styles/wireframe/ui.css b/src/styles/wireframe/ui.css
index d353fa0e..30e6836f 100644
--- a/src/styles/wireframe/ui.css
+++ b/src/styles/wireframe/ui.css
@@ -3,6 +3,10 @@ body {
   color: var(--text-color);
 }
 
+main {
+  width: min(var(--container-md), 100vw);
+}
+
 .panel {
   border: 2px solid var(--form-color);
   border-radius: var(--radius-md);
@@ -105,6 +109,7 @@ select {
   padding: var(--space-2xs) var(--space-xs);
   transition-duration: 250ms;
   transition-property: border-color;
+  width: 100%;
 
   &:focus {
     border-color: var(--accent);
-- 
2.51.2