From d667358ee40317380286d09492d885ed9b064e8a Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sat, 29 Nov 2025 22:27:15 +0100
Subject: [PATCH] chore: rearrange styles

---
 src/_includes/layouts/diffuse.vto             |  6 --
 src/index.css                                 |  3 +-
 src/styles/base.css                           |  7 ++
 .../blur/artwork-controller/element.css       | 10 +-
 src/themes/blur/artwork-controller/element.js | 10 +-
 src/themes/blur/artwork-controller/index.vto  |  4 +-
 src/themes/blur/index.css                     |  7 --
 src/themes/blur/index.vto                     | 95 ++++++++++---------
 8 files changed, 65 insertions(+), 77 deletions(-)
 create mode 100644 src/styles/base.css

diff --git a/src/_includes/layouts/diffuse.vto b/src/_includes/layouts/diffuse.vto
index df219717..0f304047 100644
--- a/src/_includes/layouts/diffuse.vto
+++ b/src/_includes/layouts/diffuse.vto
@@ -26,12 +26,6 @@ styles: []
     <meta name="theme-color" content="#8a90a9" />
 
     <!-- Styles -->
-    <style>
-      @import "{{base}}styles/reset.css";
-      @import "{{base}}styles/fonts.css";
-      @import "{{base}}styles/variables.css";
-    </style>
-
     {{ for url of styles }}
       <link rel="stylesheet" href="{{ url }}" />
     {{ /for }}
diff --git a/src/index.css b/src/index.css
index 5c1377db..61645fa9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,4 @@
-@import "./styles/diffuse/colors.css";
-@import "./styles/diffuse/fonts.css";
+@import "./styles/base.css";
 
 body {
   background-color: var(--bg-color);
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 00000000..8bf516c8
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,7 @@
+@import "./reset.css";
+@import "./variables.css";
+@import "./fonts.css";
+@import "./animations.css";
+
+@import "./diffuse/colors.css";
+@import "./diffuse/fonts.css";
diff --git a/src/themes/blur/artwork-controller/element.css b/src/themes/blur/artwork-controller/element.css
index fbf90832..c2747d8c 100644
--- a/src/themes/blur/artwork-controller/element.css
+++ b/src/themes/blur/artwork-controller/element.css
@@ -1,12 +1,4 @@
-@import "../../../styles/reset.css";
-@import "../../../styles/variables.css";
-@import "../../../styles/animations.css";
-/*@import "../../../styles/icons/phosphor.css";*/
-
-@import "../../../styles/diffuse/colors.css";
-@import "../../../styles/diffuse/fonts.css";
-
-:root {
+:host {
   --transition-durition: 500ms;
 }
 
diff --git a/src/themes/blur/artwork-controller/element.js b/src/themes/blur/artwork-controller/element.js
index 62eb22a7..e76cda2c 100644
--- a/src/themes/blur/artwork-controller/element.js
+++ b/src/themes/blur/artwork-controller/element.js
@@ -16,10 +16,10 @@ import { signal } from "@common/signal.js";
  */
 
 class ArtworkController extends DiffuseElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-  }
+  // constructor() {
+  //   super();
+  //   this.attachShadow({ mode: "open" });
+  // }
 
   // SIGNALS
 
@@ -225,7 +225,7 @@ class ArtworkController extends DiffuseElement {
   render({ html }) {
     return html`
       <style>
-      @import "../../../styles/fonts.css";
+      /*@import "../../../styles/icons/phosphor.css";*/
       @import "./element.css";
       </style>
 
diff --git a/src/themes/blur/artwork-controller/index.vto b/src/themes/blur/artwork-controller/index.vto
index a655bf8a..beee0f37 100644
--- a/src/themes/blur/artwork-controller/index.vto
+++ b/src/themes/blur/artwork-controller/index.vto
@@ -1,7 +1,9 @@
 ---
 layout: layouts/diffuse.vto
+base: ../../../
 
-base: "../../../"
+styles:
+  - ../../../styles/base.css
 
 scripts:
   - element.js
diff --git a/src/themes/blur/index.css b/src/themes/blur/index.css
index 2ff243c1..6ac7fa78 100644
--- a/src/themes/blur/index.css
+++ b/src/themes/blur/index.css
@@ -1,10 +1,3 @@
-@import "./variables.css";
-@import "../../styles/diffuse/colors.css";
-@import "../../styles/diffuse/fonts.css";
-
-/***********************************
- * Base
- ***********************************/
 body {
   background-color: oklch(from var(--bg-color) calc(l - 0.025) c h);
   color: var(--text-color);
diff --git a/src/themes/blur/index.vto b/src/themes/blur/index.vto
index 66ca8923..c942d318 100644
--- a/src/themes/blur/index.vto
+++ b/src/themes/blur/index.vto
@@ -1,47 +1,48 @@
-<!doctype html>
-<html>
-  <head>
-    <link rel="stylesheet" href="index.css" />
-  </head>
-  <body>
-    <!-- UI -->
-    <main>
-    </main>
-
-    <!-- Engines -->
-    <de-audio group="shared"></de-audio>
-    <de-queue group="shared"></de-queue>
-
-    <!-- Inputs, Outputs & Processors -->
-    <dop-indexed-db></dop-indexed-db>
-    <dp-metadata></dp-metadata>
-
-    <di-opensubsonic id="input"></di-opensubsonic>
-
-    <!-- Transformers -->
-    <dtor-default id="output" output-selector="dtos-json"></dtor-default>
-    <dtos-json output-selector="dop-indexed-db">now</dtos-json>
-
-    <!-- Orchestrators -->
-    <do-process-tracks
-      input-selector="#input"
-      metadata-processor-selector="dp-metadata"
-      output-selector="#output"
-    ></do-process-tracks>
-
-    <do-queue-audio
-      input-selector="#input"
-      audio-engine-selector="de-audio"
-      queue-engine-selector="de-queue"
-    ></do-queue-audio>
-
-    <do-queue-tracks
-      input-selector="#input"
-      output-selector="#output"
-      queue-engine-selector="de-queue"
-    ></do-queue-tracks>
-
-    <!-- Scripts -->
-    <script src="index.js" type="module"></script>
-  </body>
-</html>
+---
+layout: layouts/diffuse.vto
+base: ../../
+
+styles:
+  - ../../styles/base.css
+  - index.css
+
+scripts:
+  - index.js
+---
+
+<!-- UI -->
+<main>
+</main>
+
+<!-- Engines -->
+<de-audio group="shared"></de-audio>
+<de-queue group="shared"></de-queue>
+
+<!-- Inputs, Outputs & Processors -->
+<dop-indexed-db></dop-indexed-db>
+<dp-metadata></dp-metadata>
+
+<di-opensubsonic id="input"></di-opensubsonic>
+
+<!-- Transformers -->
+<dtor-default id="output" output-selector="dtos-json"></dtor-default>
+<dtos-json output-selector="dop-indexed-db">now</dtos-json>
+
+<!-- Orchestrators -->
+<do-process-tracks
+  input-selector="#input"
+  metadata-processor-selector="dp-metadata"
+  output-selector="#output"
+></do-process-tracks>
+
+<do-queue-audio
+  input-selector="#input"
+  audio-engine-selector="de-audio"
+  queue-engine-selector="de-queue"
+></do-queue-audio>
+
+<do-queue-tracks
+  input-selector="#input"
+  output-selector="#output"
+  queue-engine-selector="de-queue"
+></do-queue-tracks>
-- 
2.51.2