change the order of layers loading

nimiq · Apr 9, 2024 · f929a28 · f929a28
1 parent 4ba2e91
commit f929a28
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 106 deletions.
diff --git a/.vitepress/theme/components/header/Header.vue b/.vitepress/theme/components/header/Header.vue
@@ -71,7 +71,7 @@ const showEnvironment = __BUILD_ENVIRONMENT__ !== 'production'
       </template>
       <template v-else>
         <SearchBox v-if="showSearch" @close="showSearch = false" />
-        <button ml-96 text-14 py-6 px-12 input-text min-w-192 group flex="~ gap-8 items-center" rounded-full class="group" @click="showSearch = true">
+        <button ml-32 text-14 py-6 px-12 input-text min-w-192 group flex="~ gap-8 items-center" rounded-full class="group" @click="showSearch = true">
           <div i-nimiq:magnifying-glass text="12 neutral-700 group-hocus:blue/80 transition" />
           <span text="neutral-800 group-hocus:blue transition">Search</span>
           <div flex="~ items-baseline gap-4" pointer-events-none mr--3 mb--1 py-2 lh="11" select-none rounded-full ring="1 neutral/10 group-hocus:blue-600" ml-auto font-sans font-medium text="11 neutral/80 group-hocus:blue" px-6 bg="neutral-200 group-hocus:blue-400" transition font-mono>

diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -1,6 +1,6 @@
 // https://vitepress.dev/guide/custom-theme
-import './style.css'
 import Theme from 'vitepress/theme'
+import './style.css'
 import 'uno.css'
 import { h, nextTick, onMounted, watch } from 'vue'
 import { useRoute } from 'vitepress'

diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
@@ -1,119 +1,115 @@
-@layer nq-reset, vp-base, vp-components, vp-utilities, nq-colors, nq-preflight, nq-typography, nq-utilities, utilities, components, styles;
-
-@layer styles {
-
-  :root {
-    --vp-c-default-1: var(--vp-c-gray-1);
-    --vp-c-default-2: var(--vp-c-gray-2);
-    --vp-c-default-3: var(--vp-c-gray-3);
-    --vp-c-default-soft: var(--vp-c-gray-soft);
-
-    --vp-c-brand-1: var(--vp-c-indigo-1);
-    --vp-c-brand-2: var(--vp-c-indigo-2);
-    --vp-c-brand-3: var(--vp-c-indigo-3);
-    --vp-c-brand-soft: var(--vp-c-indigo-soft);
-
-    --vp-c-tip-1: var(--vp-c-brand-1);
-    --vp-c-tip-2: var(--vp-c-brand-2);
-    --vp-c-tip-3: var(--vp-c-brand-3);
-    --vp-c-tip-soft: var(--vp-c-brand-soft);
-
-    --vp-c-warning-1: var(--vp-c-gold-1);
-    --vp-c-warning-2: var(--vp-c-gold-2);
-    --vp-c-warning-3: var(--vp-c-gold-3);
-    --vp-c-warning-soft: var(--vp-c-gold-soft);
-
-    --vp-c-danger-1: var(--vp-c-red-1);
-    --vp-c-danger-2: var(--vp-c-red-2);
-    --vp-c-danger-3: var(--vp-c-red-3);
-    --vp-c-danger-soft: var(--vp-c-red-soft);
-
-    --vp-button-brand-border: transparent;
-    --vp-button-brand-text: var(--vp-c-white);
-    --vp-button-brand-bg: var(--vp-c-brand-3);
-    --vp-button-brand-hover-border: transparent;
-    --vp-button-brand-hover-text: var(--vp-c-white);
-    --vp-button-brand-hover-bg: var(--vp-c-brand-2);
-    --vp-button-brand-active-border: transparent;
-    --vp-button-brand-active-text: var(--vp-c-white);
-    --vp-button-brand-active-bg: var(--vp-c-brand-1);
-
-    --vp-c-brand-1: rgb(var(--nq-blue));
-    --vp-backdrop-bg-color: rgb(var(--nq-neutral) / 0.2);
-    --vp-c-bg: rgb(var(--nq-neutral-0));
-    --vp-c-bg-elv: rgb(var(--nq-neutral-0));
-    --vp-c-divider: rgb(var(--nq-neutral-100));
-    --vp-c-neutral-inverse: rgb(var(--nq-neutral-100));
-    --vp-input-switch-color: rgb(var(--nq-neutral));
-    --vp-c-text-1: rgb(var(--nq-neutral-800));
-    --vp-c-text-2: rgb(var(--nq-neutral-700));
-    --vp-c-gutter: rgb(var(--nq-neutral-50));
-
-    --vp-c-bg-soft: rgb(var(--nq-neutral-200));
-    --vp-c-border: rgb(var(--nq-neutral-400));
-    --vp-shadow-3: var(--nq-shadow);
-
-    --vp-font-family-base: Mulish;
-    --vp-font-family-mono: 'Fira Code';
-
-    --vp-sidebar-width: 300px;
-
-    --vp-nav-height: 68px;
-
-    @media (min-width: 720px) {
-      --vp-nav-height: 72px;
-    }
-  }
 
-  html {
-    --uno: scroll text-16;
-  }
 
-  .medium-zoom-overlay {
-    z-index: 99;
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-gold-1);
+  --vp-c-warning-2: var(--vp-c-gold-2);
+  --vp-c-warning-3: var(--vp-c-gold-3);
+  --vp-c-warning-soft: var(--vp-c-gold-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+
+  --vp-c-brand-1: rgb(var(--nq-blue));
+  --vp-backdrop-bg-color: rgb(var(--nq-neutral) / 0.6);
+  --vp-c-bg: rgb(var(--nq-neutral-0));
+  --vp-c-bg-elv: rgb(var(--nq-neutral-0));
+  --vp-c-divider: rgb(var(--nq-neutral-100));
+  --vp-c-neutral-inverse: rgb(var(--nq-neutral-100));
+  --vp-input-switch-color: rgb(var(--nq-neutral));
+  --vp-c-text-1: rgb(var(--nq-neutral-800));
+  --vp-c-text-2: rgb(var(--nq-neutral-700));
+  --vp-c-gutter: rgb(var(--nq-neutral-50));
+
+  --vp-c-bg-soft: rgb(var(--nq-neutral-200));
+  --vp-c-border: rgb(var(--nq-neutral-400));
+  --vp-shadow-3: var(--nq-shadow);
+
+  --vp-font-family-base: Mulish;
+  --vp-font-family-mono: 'Fira Code';
+
+  --vp-sidebar-width: 300px;
+
+  --vp-nav-height: 68px;
+
+  @media (min-width: 720px) {
+    --vp-nav-height: 72px;
   }
+}
 
-  .medium-zoom-image--opened {
-    z-index: 99;
-  }
+html {
+  --uno: scroll text-16;
+}
 
-  .medium-zoom-image--hidden {
-    z-index: 99;
-  }
+.medium-zoom-overlay {
+  z-index: 99;
+}
 
-  :is(h1, h2):where(:not(.prose)) {
-    --uno: max-w-520;
-  }
+.medium-zoom-image--opened {
+  z-index: 99;
+}
 
-  :is(h1, h2, h3, h4, h5, h6) {
-    --uno: w-full;
-    /* TODO Remove this */
-  }
+.medium-zoom-image--hidden {
+  z-index: 99;
+}
 
-  .subline {
-    --uno: subline text-neutral-700;
-  }
+:is(h1, h2):where(:not(.prose)) {
+  --uno: max-w-520;
+}
 
-  h1 {
-    --uno: my-0;
-  }
+:is(h1, h2, h3, h4, h5, h6) {
+  --uno: w-full;
+  /* TODO Remove this */
+}
 
-  h1+p {
-    --uno: mt-48 md:mt-64;
-  }
+.subline {
+  --uno: subline text-neutral-700;
+}
 
-  h2+p.subline {
-    --uno: mt-40 md:mt-48;
-  }
+h1 {
+  --uno: my-0;
+}
 
-  .VPHome {
-    padding-top: 96px;
-    max-width: calc(var(--vp-layout-max-width) - 64px);
-    margin: 0 auto;
-  }
+h1+p {
+  --uno: mt-48 md:mt-64;
+}
 
-  .VPLocalNav.has-sidebar .container {
-    margin: 0 auto;
-  }
+h2+p.subline {
+  --uno: mt-40 md:mt-48;
+}
+
+.VPHome {
+  padding-top: 96px;
+  max-width: calc(var(--vp-layout-max-width) - 64px);
+  margin: 0 auto;
+}
 
+.VPLocalNav.has-sidebar .container {
+  margin: 0 auto;
 }
diff --git a/.vitepress/vite.config.ts b/.vitepress/vite.config.ts
@@ -59,6 +59,25 @@ export default defineConfig(async ({ mode }) => {
 
       ViteImageOptimizer(),
 
+      {
+        name: 'layer-definition',
+        transformIndexHtml: {
+          enforce: 'pre',
+          transform(_html, ctx) {
+            return [{
+              tag: 'style',
+              // add the css to the head of the document
+              attrs: { type: 'text/css' },
+              children: [
+                `@layer vp-reset, vp-base, vp-components, vp-utilities, vp-colors, vp-preflight, vp-typography, vp-utilities, utilities, components;`,
+              ],
+
+              injectTo: ctx.server ? 'body-prepend' : 'head',
+            }]
+          },
+        },
+      },
+
       {
         /**
          * nimiq-css works using layers.