Define table of contents styles with Tailwind

hydephp · Nov 15, 2024 · 712cf95 · 712cf95
1 parent 92c4d11
commit 712cf95
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 42 deletions.
diff --git a/_media/app.css b/_media/app.css
diff --git a/packages/hydefront/dist/hyde.css b/packages/hydefront/dist/hyde.css
diff --git a/packages/hydefront/dist/hyde.css.map b/packages/hydefront/dist/hyde.css.map
diff --git a/packages/hydefront/sass/docs/table-of-contents.scss b/packages/hydefront/sass/docs/table-of-contents.scss
diff --git a/packages/hydefront/sass/hyde-docs.scss b/packages/hydefront/sass/hyde-docs.scss
@@ -3,7 +3,6 @@
  */
 
 @use 'docs/search';
-@use 'docs/table-of-contents';
 @use 'docs/heading-permalinks';
 
 html {

diff --git a/resources/assets/app.css b/resources/assets/app.css
@@ -16,3 +16,27 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.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;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,6 @@ @@
      */
     @use 'docs/search';
-    @use 'docs/table-of-contents';
     @use 'docs/heading-permalinks';
     html {
@@ Expand Down @@