Extract HydeFront partials

Author: emmadesilva

_media/app.css

@@ -0,0 +1,15 @@
+.prose blockquote.info {
+    @apply border-blue-500;
+}
+
+.prose blockquote.success {
+    @apply border-green-500;
+}
+
+.prose blockquote.warning {
+    @apply border-amber-500;
+}
+
+.prose blockquote.danger {
+    @apply border-red-600;
+}

packages/hydefront/components/blockquotes.css

@@ -0,0 +1,20 @@
+.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
+    @apply w-fit;
+}
+
+.prose :is(h1,h2,h3,h4,h5,h6):hover .heading-permalink,
+.prose :is(h1,h2,h3,h4,h5,h6):focus .heading-permalink {
+    @apply opacity-75 grayscale transition-opacity duration-100 ease-out;
+}
+
+.heading-permalink {
+    @apply opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 scroll-m-4;
+}
+
+.heading-permalink::before {
+    @apply content-['#'];
+}
+
+.heading-permalink:hover, .heading-permalink:focus {
+    @apply opacity-100 grayscale-0;
+}

packages/hydefront/components/heading-permalinks.css

@@ -0,0 +1,23 @@
+.table-of-contents {
+    @apply pb-3;
+}
+
+.table-of-contents > li {
+    @apply my-[0.35rem];
+}
+
+.table-of-contents ul {
+    @apply pl-2;
+}
+
+.table-of-contents a {
+    @apply block -ml-8 pl-8 opacity-80 hover:opacity-100 hover:bg-gray-200/20 transition-all duration-300 relative;
+}
+
+.table-of-contents a::before {
+    @apply content-['#'] text-[75%] opacity-50 mr-1 transition-opacity duration-300;
+}
+
+.table-of-contents a:hover::before {
+    @apply opacity-100;
+}

packages/hydefront/components/table-of-contents.css

@@ -0,0 +1,11 @@
+pre code.torchlight {
+    @apply block py-4 px-0 min-w-max;
+}
+
+pre code.torchlight .line {
+    @apply px-4;
+}
+
+pre code.torchlight .line-number, pre code.torchlight .summary-caret {
+    @apply mr-4;
+}

packages/hydefront/components/torchlight.css

@@ -11,95 +11,11 @@
 * See https://hydephp.com/docs/1.x/managing-assets#loading-from-cdn
 */
 
+@import 'hydefront/components/table-of-contents.css';
+@import 'hydefront/components/heading-permalinks.css';
+@import 'hydefront/components/torchlight.css';
+@import 'hydefront/components/blockquotes.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/**
- * Documentation Pages - Table of Contents
- */
-
-.table-of-contents {
-    @apply pb-3;
-}
-
-.table-of-contents > li {
-    @apply my-[0.35rem];
-}
-
-.table-of-contents ul {
-    @apply pl-2;
-}
-
-.table-of-contents a {
-    @apply block -ml-8 pl-8 opacity-80 hover:opacity-100 hover:bg-gray-200/20 transition-all duration-300 relative;
-}
-
-.table-of-contents a::before {
-    @apply content-['#'] text-[75%] opacity-50 mr-1 transition-opacity duration-300;
-}
-
-.table-of-contents a:hover::before {
-    @apply opacity-100;
-}
-
-/**
- * Documentation Pages - Heading Permalinks
- */
-
-.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
-    @apply w-fit;
-}
-
-.prose :is(h1,h2,h3,h4,h5,h6):hover .heading-permalink,
-.prose :is(h1,h2,h3,h4,h5,h6):focus .heading-permalink {
-    @apply opacity-75 grayscale transition-opacity duration-100 ease-out;
-}
-
-.heading-permalink {
-    @apply opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 scroll-m-4;
-}
-
-.heading-permalink::before {
-    @apply content-['#'];
-}
-
-.heading-permalink:hover, .heading-permalink:focus {
-    @apply opacity-100 grayscale-0;
-}
-
-/**
- * Torchlight
- */
-
-pre code.torchlight {
-    @apply block py-4 px-0 min-w-max;
-}
- 
-pre code.torchlight .line {
-    @apply px-4;
-}
- 
-pre code.torchlight .line-number, pre code.torchlight .summary-caret {
-    @apply mr-4;
-}
-
-/**
- * Colored Blockquotes
- */
-
-.prose blockquote.info {
-    @apply border-blue-500;
-}
-
-.prose blockquote.success {
-    @apply border-green-500;
-}
-
-.prose blockquote.warning {
-    @apply border-amber-500;
-}
-
-.prose blockquote.danger {
-    @apply border-red-600;
-}