chore(release): 1.2.1

Reviewed-on: #7

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.2.1](https://gitea.malio.fr/MALIO-DEV/Supervisor/compare/v1.2.0...v1.2.1) (2026-03-10)
+
+
+### Bug Fixes
+
+* reduce style loading flash ([4e393dd](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/4e393dd5e92a28d91e49affb9437687ac8de3817))
+
 # [1.2.0](https://gitea.malio.fr/MALIO-DEV/Supervisor/compare/v1.1.0...v1.2.0) (2026-03-10)
 
 

assets/css/main.css

@@ -20,14 +20,18 @@
   --font-mono: "JetBrains Mono", "Fira Code", monospace;
 }
 
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
-
 @layer base {
+  html {
+    background: rgb(var(--m-bg));
+    color-scheme: dark;
+  }
+
   * {
     box-sizing: border-box;
   }
 
   body {
+    min-height: 100vh;
     font-family: var(--font-display);
     background: rgb(var(--m-bg));
     color: rgb(var(--m-text));
@@ -35,6 +39,10 @@
     -moz-osx-font-smoothing: grayscale;
     transition: background-color 0.4s ease, color 0.4s ease;
   }
+
+  img {
+    display: block;
+  }
 }
 
 @layer utilities {

assets/css/malio.css

@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @layer base {
   :root {
     --m-primary: 15 20 40;

layouts/default.vue

@@ -18,32 +18,30 @@
         <slot name="sidebar"/>
         <nav class="sidebar-nav" aria-label="Sections">
           <p class="nav-label">Navigation</p>
+          <div class="flex flex-col gap-2">
+            <div class="bg-m-tertiary rounded-lg border border-m-accent/6">
               <NuxtLink
-            v-for="item in navItems"
+                  to="/"
-            :key="item.to"
+                  class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
-            v-slot="{ href, navigate, isExactActive }"
-            :to="item.to"
-            custom
               >
-            <a
+                <IconifyIcon
-              :href="href"
+                    icon="mdi:home"
-              class="nav-link"
+                    class="text-lg"/>
-              :class="{ 'nav-link-active': isExactActive }"
+                <p>Home</p>
-              :aria-current="isExactActive ? 'page' : undefined"
-              @click="navigate(); isMenuOpen = false"
-            >
-              <span class="nav-link-main">
-                <span class="nav-icon">
-                  <IconifyIcon :icon="item.icon" class="text-lg" />
-                </span>
-                <span>
-                  <span class="nav-title">{{ item.label }}</span>
-                  <span class="nav-caption">{{ item.caption }}</span>
-                </span>
-              </span>
-              <span class="nav-pill">{{ item.short }}</span>
-            </a>
               </NuxtLink>
+            </div>
+            <div class="bg-m-tertiary rounded-lg border border-m-accent/6">
+              <NuxtLink
+                  to="/backup"
+                  class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
+              >
+                <IconifyIcon
+                    icon="mdi:data"
+                    class="text-lg"/>
+                <p>Backup</p>
+              </NuxtLink>
+            </div>
+          </div>
         </nav>
       </div>
       <div class="sidebar-footer">
@@ -299,8 +297,7 @@ const navItems = [
   border: 1px solid transparent;
   color: white;
   text-decoration: none;
-  transition:
+  transition: background-color 0.2s ease,
-    background-color 0.2s ease,
   border-color 0.2s ease,
   transform 0.2s ease,
   box-shadow 0.2s ease;
@@ -319,8 +316,7 @@ const navItems = [
 }
 
 .nav-link-active {
-  background:
+  background: linear-gradient(135deg, rgb(var(--m-accent) / 0.16), rgb(255 255 255 / 0.04));
-    linear-gradient(135deg, rgb(var(--m-accent) / 0.16), rgb(255 255 255 / 0.04));
   border-color: rgb(var(--m-accent) / 0.24);
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
 }
@@ -378,8 +374,7 @@ const navItems = [
   padding: 1rem;
   border-radius: 16px;
   border: 1px solid rgb(var(--m-accent) / 0.14);
-  background:
+  background: radial-gradient(circle at top right, rgb(var(--m-accent) / 0.14), transparent 30%),
-    radial-gradient(circle at top right, rgb(var(--m-accent) / 0.14), transparent 30%),
   rgb(255 255 255 / 0.04);
 }
 

nuxt.config.ts

@@ -22,6 +22,18 @@ export default defineNuxtConfig({
   compatibilityDate: "2025-07-15",
   devtools: { enabled: true },
   css: ["~/assets/css/main.css"],
+  app: {
+    head: {
+      link: [
+        { rel: "preconnect", href: "https://fonts.googleapis.com" },
+        { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
+        {
+          rel: "stylesheet",
+          href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap"
+        }
+      ]
+    }
+  },
   runtimeConfig: {
     public: {
       appVersion: getRepoVersion()

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",
+    "iconify": "^1.4.0",
     "nuxt": "^4.3.1",
     "vue": "^3.5.29",
     "vue-router": "^4.6.4"