Fix: skill table wrapping (#46)

* refactor: skills-table styling * fix: remove unused font value * fix: skills table wraps in production * feat: display skills list discs
cjshearer · Jun 18, 2024 · 1b18f7a · 1b18f7a
1 parent a775e72
commit 1b18f7a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -4,7 +4,7 @@
 
 @layer base {
   body {
-    @apply prose prose-sm prose-neutral prose-resume font-[Roboto_Flex,_sans-serif] dark:prose-invert;
+    @apply prose prose-sm prose-neutral prose-resume font-[Roboto_Flex] dark:prose-invert;
     @apply dark:bg-neutral-800;
   }
 
@@ -28,6 +28,10 @@
   .inline-svg {
     @apply inline-block [&_svg]:inline-block [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:fill-current [&_svg]:align-[calc(0.5cap-0.5em)];
   }
+
+  .skills-table {
+    @apply pl-0 [&>li>*]:table-cell [&>li>ul>li]:inline-block [&>li>ul]:list-none [&>li]:table-row;
+  }
 }
 
 @page {

diff --git a/content/_index.md b/content/_index.md
@@ -27,6 +27,7 @@ Software Developer with 3 Years of Experience in Full Stack Web and Mobile Devel
 
 ## Skills {class="md:hidden"}
 
+<!-- for some reason, classes aren't applied without this extra spacing -->
 <!-- prettier-ignore -->
 - Languages:
     - TypeScript
@@ -71,7 +72,7 @@ Software Developer with 3 Years of Experience in Full Stack Web and Mobile Devel
     - Sentry
     - Stripe
     - SendGrid
-{ class="table pl-0 md:float-right md:block print:md:float-none print:md:table [&>li>*]:table-cell md:[&>li>*]:block print:md:[&>li>*]:table-cell [&>li>ul>li]:inline md:[&>li>ul>li]:block print:md:[&>li>ul>li]:inline [&>li>ul]:list-none md:[&>li>ul]:list-disc [&>li]:table-row"}
+{ class="max-md:skills-table md:float-right [&>li]:list-none print:md:float-none"}
 
 ## Experience