Move global styles to app.css

Author: techniq

packages/svelte-ux/src/routes/+layout.svelte

@@ -301,55 +301,3 @@
     <slot />
   </main>
 </AppLayout>
-
-<style lang="postcss">
-  :global(body) {
-    @apply bg-surface-200 accent-primary;
-    /* background-image:
-      radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%),
-      radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */
-  }
-
-  :global(nav h1) {
-    @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b;
-  }
-
-  :global(nav h2) {
-    @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold;
-  }
-
-  :global(main h1:not(.prose *, .related *, .ApiDocs *)) {
-    @apply text-xl font-semibold mt-4 mb-2 border-b pb-1;
-    scroll-margin-top: 128px; /* sticky header */
-  }
-
-  :global(main h2:not(.prose *, .related *, .ApiDocs *)) {
-    @apply text-lg font-semibold mt-4 mb-1;
-    scroll-margin-top: 128px; /* sticky header */
-  }
-
-  :global(main h3:not(.prose *, .related *, .ApiDocs *)) {
-    @apply text-xs text-surface-content/50 mb-1;
-    scroll-margin-top: 128px; /* sticky header */
-  }
-  :global(main :not(.prose) h2 + h3) {
-    @apply -mt-1;
-  }
-
-  :global(main small) {
-    @apply text-xs text-surface-content/50 inline-block;
-  }
-
-  :global(.TableOfContents small) {
-    @apply hidden;
-  }
-
-  /* Code/Preview backgrounds */
-  :global(pre[class*='language-']) {
-    @apply bg-surface-content;
-  }
-
-  :global(.dark pre[class*='language-']) {
-    @apply bg-surface-300;
-  }
-</style>

packages/svelte-ux/src/routes/app.css

@@ -1,3 +1,53 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  @apply bg-surface-200 accent-primary;
+  /* background-image:
+      radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%),
+      radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */
+}
+
+nav h1 {
+  @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b;
+}
+
+nav h2 {
+  @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold;
+}
+
+main h1:not(.prose *, .related *, .ApiDocs *) {
+  @apply text-xl font-semibold mt-4 mb-2 border-b pb-1;
+  scroll-margin-top: 128px; /* sticky header */
+}
+
+main h2:not(.prose *, .related *, .ApiDocs *) {
+  @apply text-lg font-semibold mt-4 mb-1;
+  scroll-margin-top: 128px; /* sticky header */
+}
+
+main h3:not(.prose *, .related *, .ApiDocs *) {
+  @apply text-xs text-surface-content/50 mb-1;
+  scroll-margin-top: 128px; /* sticky header */
+}
+main :not(.prose) h2 + h3 {
+  @apply -mt-1;
+}
+
+main small {
+  @apply text-xs text-surface-content/50 inline-block;
+}
+
+.TableOfContents small {
+  @apply hidden;
+}
+
+/* Code/Preview backgrounds */
+pre[class*='language-'] {
+  @apply bg-surface-content;
+}
+
+.dark pre[class*='language-'] {
+  @apply bg-surface-300;
+}