refactor: build dashboard with vite

dashboard/src/style/app.css

@@ -1,13 +1,10 @@
-@import "~tailwindcss/base.css";
-@import "~tailwindcss/components.css";
-@import "~tailwindcss/utilities.css";
+@import "tailwindcss";
 
-@import "~vue-material-design-icons/styles.css";
+@import "vue-material-design-icons/styles.css";
 
-@import "components.pcss";
-@import "content.pcss";
+@import "./content.css";
 
-@import "docs.pcss";
+@import "./docs.css";
 
 /* Reset some icon default styles for more predictable alignment */
 .material-design-icon > .material-design-icon__svg {

dashboard/src/style/content.css

@@ -1,3 +1,5 @@
+@import "./components.css";
+
 .main-content {
   & h1 {
     @apply text-3xl;
@@ -25,7 +27,12 @@
 
   & a:not([class]),
   & a[class=""] {
-    @apply link;
+    @apply text-blue-400;
+    @apply underline;
+
+    &:hover {
+      @apply text-blue-200;
+    }
   }
 
   & ul:not([class]) {
@@ -47,7 +54,11 @@
   }
 
   & code:not([class]) {
-    @apply inline-code;
+    @apply inline-block;
+    @apply bg-gray-800;
+    @apply px-1;
+    @apply rounded;
+    @apply text-sm;
   }
 
   & .expandable:not(.wide) {

dashboard/src/style/docs.css

@@ -4,7 +4,7 @@
   }
 }
 
-@screen until-lg {
+@media (width < theme(--breakpoint-lg)) {
   .docs-sidebar.closed:not(:focus-within) {
       @apply sr-only;
   }

dashboard/src/style/initial.css

@@ -0,0 +1,3 @@
+@import "./reset.css";
+@import "./base.css";
+@import "./splash.css";

dashboard/src/style/initial.pcss

@@ -1,3 +0,0 @@
-@import "./reset.pcss";
-@import "./base.pcss";
-@import "./splash.pcss";

dashboard/src/style/reset.css

@@ -0,0 +1,50 @@
+@layer base {
+  /* Box sizing rules */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* Remove default padding */
+  ul,
+  ol {
+    padding: 0;
+  }
+
+  /* Remove default margin */
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  ul,
+  ol,
+  li,
+  figure,
+  figcaption,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
+
+  /* Inherit fonts for inputs and buttons */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  /* Remove all animations and transitions for people that prefer not to see them */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

dashboard/src/style/reset.pcss

@@ -1,48 +0,0 @@
-/* Box sizing rules */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Remove default padding */
-ul,
-ol {
-  padding: 0;
-}
-
-/* Remove default margin */
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-ul,
-ol,
-li,
-figure,
-figcaption,
-blockquote,
-dl,
-dd {
-  margin: 0;
-}
-
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-/* Remove all animations and transitions for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}