Add dfn styling and remove hacky link gradient underlines

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/pages/en/guides/prologue/metadata.mdx

@@ -11,7 +11,7 @@ import Highlighting from "@components/common/Highlighting.astro";
 # Understanding Metadata
 
 Ninety-five percent of the web is [encrypted](https://twitter.com/jlivingood/status/1389584630299385856). That means that if you visit Facebook, your Internet Service Provider (ISP) can see that you visited and how long stayed, but they can't see your login credentials (username and password) or which exact pages you went to. This is done with the use of [Transport Layer Security](https://en.wikipedia.org/wiki/Transport_Layer_Security), or TLS, a powerful and increasingly popular encryption protocol used online.
-There are two problems with relying strictly on the current TLS model of the intert, however. First, it only protects data in transit. When you connect to Amazon, your ISP can see that you visited Amazon, but Amazon can see every page, click, and purchase without restriction. Second and more importantly, **often you don't need to see the content itself to start making powerful, accurate assumptions.**
+There are two problems with relying strictly on the current <dfn title="Transport Layer Security">TLS</dfn> model of the intert, however. First, it only protects data in transit. When you connect to Amazon, your ISP can see that you visited Amazon, but Amazon can see every page, click, and purchase without restriction. Second and more importantly, **often you don't need to see the content itself to start making powerful, accurate assumptions.**
 
 ## What is Metadata?
 

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,11 @@
     @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 {
+    @apply underline underline-offset-2 decoration-2 decoration-indigo-500 p-0 transition-opacity hover:opacity-75 active:opacity-60;
+  }
+
+  main dfn {
+    @apply underline underline-offset-2 decoration-2 decoration-blue-400 hover:opacity-75 transition-opacity;
   }
 }