theme accordions

.vitepress/hooks/Template.vue

@@ -5,7 +5,24 @@ defineProps<{ title: string; description?: string }>()
 <template>
   <div
     tw="w-full h-full bg-black flex flex-col"
-    style="background-image: url(https://fmhy.pages.dev/og.png)"
+    style="
+      background-image: linear-gradient(
+        43deg,
+        #b794f4 2%,
+        #b18df2 7.5%,
+        #ab87ef 13%,
+        #9f7aea 24%,
+        #8c6ee2 32%,
+        #7864d8 40%,
+        #4c51bf 56%,
+        #4949ae 60.5%,
+        #46419b 65%,
+        #3c366b 74%,
+        #2f315d 80.5%,
+        #272d47 87%,
+        #1a202c 100%
+      );
+    "
   >
     <div
       tw="p-10 w-full min-h-0 grow flex flex-col items-center justify-between"
@@ -22,6 +39,5 @@ defineProps<{ title: string; description?: string }>()
         <div style="color: #c0caf5" tw="mt-2 text-4xl" v-html="description" />
       </div>
     </div>
-    <div tw="shrink-0 h-2 w-full flex" style="background-color: #c4b5fd" />
   </div>
 </template>

.vitepress/theme/style.css

@@ -1,9 +1,9 @@
 :root {
   /* Colors: Brand */
-  --vp-c-brand-1: #7bc5e4;
-  --vp-c-brand-2: #c4e2f2;
-  --vp-c-brand-3: #4882a7;
-  --vp-c-brand-soft: #a4d5ec;
+  --vp-c-brand-1: theme('colors.swarm.400');
+  --vp-c-brand-2: theme('colors.swarm.500');
+  --vp-c-brand-3: theme('colors.swarm.700');
+  --vp-c-brand-soft: theme('colors.swarm.300');
 
   /* Colors: Button */
   --vp-button-brand-bg: var(--vp-c-brand-1);
@@ -24,26 +24,22 @@
   --vp-c-bg-mark: rgb(232, 232, 232);
 
   /* Colors: Custom Block */
-  --vp-custom-block-info-bg: rgba(171, 210, 244, 0.05);
-  --vp-custom-block-info-border: #60c4fa;
-  --vp-custom-block-info-text: rgb(39, 115, 145);
-  --vp-custom-block-info-text-deep: rgb(18, 121, 162);
-  --vp-custom-block-tip-bg: rgba(137, 202, 176, 0.05);
-  --vp-custom-block-tip-border: rgba(34, 197, 94, 1);
-  --vp-custom-block-tip-text: rgb(10, 128, 90);
-  --vp-custom-block-tip-text-deep: rgb(11, 133, 94);
-  --vp-custom-block-warning-bg: rgba(250, 204, 21, 0.05);
-  --vp-custom-block-warning-border: rgba(245, 158, 11, 1);
-  --vp-custom-block-warning-text: rgb(166, 114, 35);
-  --vp-custom-block-warning-text-deep: rgb(199, 109, 6);
-  --vp-custom-block-danger-bg: rgba(220, 38, 38, 0.05);
-  --vp-custom-block-danger-border: rgba(248, 113, 113, 1);
-  --vp-custom-block-danger-text: rgb(196, 46, 46);
-  --vp-custom-block-danger-text-deep: rgba(220, 38, 38, 1);
-
-  /* Scrollbar */
-  scroll-behavior: smooth;
-  scrollbar-width: 4px;
+  --vp-custom-block-info-bg: theme('colors.swarm.100');
+  --vp-custom-block-info-border: theme('colors.swarm.800');
+  --vp-custom-block-info-text: theme('colors.swarm.800');
+  --vp-custom-block-info-text-deep: theme('colors.swarm.900');
+  --vp-custom-block-tip-bg: theme('colors.meadow.100');
+  --vp-custom-block-tip-border: theme('colors.meadow.800');
+  --vp-custom-block-tip-text: theme('colors.meadow.800');
+  --vp-custom-block-tip-text-deep: theme('colors.meadow.900');
+  --vp-custom-block-warning-bg: rgba(253, 224, 71, 0.1);
+  --vp-custom-block-warning-border: rgba(202, 138, 4, 1);
+  --vp-custom-block-warning-text: rgba(234, 179, 8, 1);
+  --vp-custom-block-warning-text-deep: rgba(250, 204, 21, 1);
+  --vp-custom-block-danger-bg: theme('colors.carnation.100');
+  --vp-custom-block-danger-border: theme('colors.carnation.800');
+  --vp-custom-block-danger-text: theme('colors.carnation.800');
+  --vp-custom-block-danger-text-deep: theme('colors.carnation.900');
 }
 
 .dark {
@@ -53,22 +49,22 @@
   --vp-c-bg-elv: rgba(23, 23, 23, 0.8);
 
   /* Colors: Custom Block */
-  --vp-custom-block-info-bg: rgba(84, 110, 155, 0.1);
-  --vp-custom-block-info-border: #3686b1;
-  --vp-custom-block-info-text: #52b0e3;
-  --vp-custom-block-info-text-deep: #00b7ff;
-  --vp-custom-block-tip-bg: rgba(51, 130, 118, 0.1);
-  --vp-custom-block-tip-border: rgba(4, 120, 87, 1);
-  --vp-custom-block-tip-text: rgb(25, 190, 129);
-  --vp-custom-block-tip-text-deep: rgba(52, 211, 153, 1);
+  --vp-custom-block-info-bg: theme('colors.swarm.950');
+  --vp-custom-block-info-border: theme('colors.swarm.600');
+  --vp-custom-block-info-text: theme('colors.swarm.500');
+  --vp-custom-block-info-text-deep: theme('colors.swarm.600');
+  --vp-custom-block-tip-bg: theme('colors.meadow.950');
+  --vp-custom-block-tip-border: theme('colors.meadow.600');
+  --vp-custom-block-tip-text: theme('colors.meadow.500');
+  --vp-custom-block-tip-text-deep: theme('colors.meadow.600');
   --vp-custom-block-warning-bg: rgba(253, 224, 71, 0.1);
   --vp-custom-block-warning-border: rgba(202, 138, 4, 1);
   --vp-custom-block-warning-text: rgba(234, 179, 8, 1);
   --vp-custom-block-warning-text-deep: rgba(250, 204, 21, 1);
-  --vp-custom-block-danger-bg: rgba(239, 68, 68, 0.1);
-  --vp-custom-block-danger-border: rgba(127, 29, 29, 1);
-  --vp-custom-block-danger-text: rgba(248, 113, 113, 1);
-  --vp-custom-block-danger-text-deep: rgba(248, 113, 113, 1);
+  --vp-custom-block-danger-bg: theme('colors.carnation.950');
+  --vp-custom-block-danger-border: theme('colors.carnation.600');
+  --vp-custom-block-danger-text: theme('colors.carnation.400');
+  --vp-custom-block-danger-text-deep: theme('colors.carnation.500');
 }
 
 .vp-doc a {
@@ -124,17 +120,13 @@
 */
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
-    120deg,
-    #c4b5fd 30%,
-    #7bc5e4
-  );
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
+      #c4b5fd 30%,
+      #7bc5e4);
 
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    #c4b5fd 50%,
-    #47caff 50%
-  );
+  --vp-home-hero-image-background-image: linear-gradient(-45deg,
+      #c4b5fd 50%,
+      #47caff 50%);
   --vp-home-hero-image-filter: blur(44px);
 }
 
@@ -240,7 +232,7 @@
   }
 }
 
-#VPContent strong > a {
+#VPContent strong>a {
   font-weight: bold;
 }
 

feedback.md

@@ -8,7 +8,20 @@ outline: false
 ---
 ### Feedback
 
-**Anonymous comments, taken from reddit, discord, twitter, and our feedback system. This is why we do it. People are the motivation, equality is the goal.**
+:::tip What is this?
+Anonymous comments, taken from reddit, discord, twitter, and our feedback system. This is why we do it. People are the motivation, equality is the goal.
+:::
+
+
+:::info Balls
+nyaboom > explodives
+:::
+
+
+
+:::danger Balls
+nyaboom > explodives
+:::
 
 ***
 

package.json

@@ -16,9 +16,9 @@
     "postinstall": "nitropack prepare"
   },
   "dependencies": {
+    "@fmhy/colors": "^0.0.11",
     "@headlessui/vue": "^1.7.17",
     "@resvg/resvg-js": "^2.6.0",
-    "vitepress": "npm:@taskylizard/vitepress@1.0.10",
     "consola": "^3.2.3",
     "feed": "^4.2.2",
     "fs-extra": "^11.2.0",
@@ -28,6 +28,7 @@
     "nprogress": "^0.2.0",
     "pathe": "^1.1.2",
     "unocss": "^0.58.4",
+    "vitepress": "npm:@taskylizard/vitepress@1.0.10",
     "vue": "^3.4.15",
     "x-satori": "^0.1.5",
     "zod": "^3.22.4"

unocss.config.ts

@@ -1,4 +1,11 @@
-import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
+import {
+  defineConfig,
+  presetUno,
+  presetAttributify,
+  presetIcons,
+  transformerDirectives
+} from 'unocss'
+import { colors, shortcuts } from '@fmhy/colors'
 
 export default defineConfig({
   content: {
@@ -6,6 +13,7 @@ export default defineConfig({
   },
   theme: {
     colors: {
+      ...colors,
       primary: 'var(--vp-c-brand-1)',
       bg: 'var(--vp-c-bg)',
       'bg-alt': 'var(--vp-c-bg-alt)',
@@ -15,6 +23,7 @@ export default defineConfig({
       div: 'var(--vp-c-divider)'
     }
   },
+  shortcuts,
   presets: [
     presetUno(),
     presetAttributify(),
@@ -25,5 +34,6 @@ export default defineConfig({
         'vertical-align': 'middle'
       }
     })
-  ]
+  ],
+  transformers: [transformerDirectives()]
 })