Merge pull request #28 from tnonate/feature/definition

Definition styling

package.json

@@ -25,7 +25,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.6",
-    "sass": "^1.57.1",
+    "sass": "^1.80.3",
     "string-strip-html": "^13.0.4",
     "svgo": "2.8",
     "ts-node": ">= 10.9.1",

src/components/common/GuidesList.astro

@@ -19,7 +19,7 @@ const pages = allPages
         page.frontmatter.topic && (
           <li class="w-full list-none">
             <a
-              class="flex h-40 w-full items-center justify-center rounded-lg border-4 border-solid p-4 text-center font-semibold border-gradient-secondary border-bg-primary dark:border-bg-primary-dark"
+              class="flex h-40 w-full items-center justify-center rounded-lg underline-offset-2 decoration-blue-400 decoration-2 hover:underline hover:opacity-75 border-4 border-solid p-4 text-center font-semibold border-gradient-secondary border-bg-primary dark:border-bg-primary-dark"
               href={page.url}
             >
               {page.frontmatter.topic}

src/components/common/LinkGrid.astro

@@ -25,8 +25,8 @@ const { items } = Astro.props;
       return (
         <li class="flex list-none" title={item.not_encouraged ? "Not encouraged" : ""}>
           <Container
-            class={`flex flex-1 items-center gap-4 rounded-lg border-4 p-4 border-bg-primary dark:border-bg-primary-dark ${
-              item.not_encouraged ? "border-gradient-warning" : "border-gradient-secondary"
+            class={`flex flex-1 items-center gap-4 decoration-blue-400 rounded-lg border-4 p-4 border-bg-primary dark:border-bg-primary-dark ${
+              item.not_encouraged ? "border-gradient-warning decoration-red-400" : "border-gradient-secondary"
             }`}
             href={!hasSubLink && item.link}
           >
@@ -41,17 +41,17 @@ const { items } = Astro.props;
                 class="aspect-square h-auto w-full object-contain"
               />
             </PossibleLink>
-            <div class="flex w-fit flex-col justify-center">
+            <div class="flex w-fit flex-col justify-center decoration-inherit">
               <PossibleLink
                 href={hasSubLink && item.link}
-                class="border-none text-base font-medium motion-safe:transition-all xs:text-lg sm:break-normal sm:text-xl"
+                class="border-none text-base font-medium motion-safe:transition-all decoration-inherit xs:text-lg sm:break-normal sm:text-xl"
               >
                 {item.name}
               </PossibleLink>
               {item.sublink && item.subtext && (
                 <a
                   href={item.sublink}
-                  class="w-fit text-primary-contrast text-opacity-80 dark:text-primary-dark-contrast dark:text-opacity-80"
+                  class="w-fit text-primary-contrast text-opacity-80 decoration-inherit dark:text-primary-dark-contrast dark:text-opacity-80"
                 >
                   {/* In the built output Astro does not preserve the whitespace, hence this workaround */}
                   {item.subtext.split("\n").map((line) => (

src/components/layout/TableOfContents.astro

@@ -21,7 +21,7 @@ const { headings } = Astro.props;
             style={{ marginLeft: heading.depth !== 2 ? `${(heading.depth - 2) * 2}rem` : undefined }}
           >
             <a
-              class="border-gradient-primary border-bg-tertiary hover:border-b-4 dark:border-bg-tertiary-dark"
+              class="underline-offset-2 decoration-indigo-500 decoration-2 hover:underline hover:opacity-75"
               href={`#${heading.slug}`}
             >
               {heading.text}
@@ -57,7 +57,7 @@ const { headings } = Astro.props;
             style={{ marginLeft: heading.depth !== 2 ? `${(heading.depth - 2) * 2}rem` : undefined }}
           >
             <a
-              class="border-gradient-primary border-bg-tertiary hover:border-b-4 dark:border-bg-tertiary-dark"
+              class="underline-offset-2 decoration-indigo-500 decoration-2 hover:underline hover:opacity-75"
               href={`#${heading.slug}`}
             >
               {heading.text}

src/components/pages/blog-index/BlogList.astro

@@ -21,7 +21,7 @@ BlogPages.sort((a, b) => {
 
       return (
         <a
-          class={`flex items-center justify-between rounded-t-lg p-4 ${
+          class={`flex items-center justify-between rounded-t-lg p-4 decoration-blue-400 ${
             index != length - 1 && "border-0 border-b-4 border-gradient-secondary"
           }`}
           href={`https://blog.thenewoil.org/${page.slug}`}

src/styles/main.scss

@@ -10,15 +10,15 @@
   *,
   *::after,
   *::before {
-    @apply box-border leading-7;
+    @apply leading-7;
   }
 
   summary {
     @apply cursor-pointer list-none;
   }
 
-  details > summary::-webkit-details-marker,
-  details > summary::marker {
+  details>summary::-webkit-details-marker,
+  details>summary::marker {
     width: 0;
     height: 0;
     display: none;
@@ -27,6 +27,7 @@
 
   html {
     height: 100vh;
+
     @supports (height: 100dvh) {
       height: 100dvh;
     }
@@ -79,7 +80,16 @@
     @apply font-medium;
   }
 
-  :where(main a) {
-    @apply border-b-2 border-transparent bg-origin-border p-0 text-inherit no-underline transition-opacity border-gradient-primary border-bg-primary hover:opacity-75 active:opacity-60 dark:border-bg-primary-dark;
+  main a,
+  main dfn {
+    @apply underline underline-offset-2 decoration-2 p-0 transition-opacity hover:opacity-75;
+  }
+
+  main a {
+    @apply decoration-indigo-500 active:opacity-60;
+  }
+
+  main dfn {
+    @apply decoration-blue-400;
   }
 }