fix: make article metadata fill container width first

src/pages/about/index.astro

@@ -143,7 +143,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
       </h1>
       <p class="text-secondary/70 max-w-md text-pretty">
         <Link
-          class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline"
+          class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline hover:decoration-2 hover:underline-offset-2"
           href="https://www.google.com/maps/place/Devon"
         >
           <Icon name="mdi:earth" class="h-3 w-3" />
@@ -155,7 +155,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
           aria-label="Website"
           class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
         >
-          <Icon name="mdi:link-variant" class="h-4 w-4" />
+          <Icon name="mdi:web" class="h-4 w-4" />
         </Link>
         <Link
           href={`mailto:${SITE.EMAIL}`}
@@ -183,7 +183,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
         class="text-secondary/70 hidden max-w-md items-center text-pretty print:flex"
       >
         <Link
-          class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
+          class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline"
           href={`mailto:${SITE.EMAIL}`}
         >
           <Icon name="mdi:email" class="h-3 w-3" />
@@ -212,11 +212,9 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
       of 3D environments. Using either real-time or offline rendering techniques
       in software packages such as Blender, Unreal Engine, and more recently: Godot.
       In addition to this I also have an interest in web development, graphic design,
-      and cyber security which all make up a large part of my hobbies not including
-      motorbikes. If you're reading this offline, my portfolio of work can be found
-      on my website at <a
-        href="/projects"
-        class="text-secondary underline hover:no-underline"
+      and cyber security which partially make up my hobbies excluding riding motorbikes.
+      If you're reading this offline, my portfolio of work can be found on my website
+      at <a href="/projects" class="text-secondary underline hover:no-underline"
         >troylusty.com/projects</a
       >.
     </p>
@@ -233,7 +231,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
         <p class="text-secondary/70">
           Do you think I'd be a good fit to help out on a project you're working
           on, or maybe just want to chat? <Link
-            href="mailto:hello@troylusty.com"
+            href={`mailto:${SITE.EMAIL}`}
             class="underline hover:no-underline"
           >
             Send me an email!</Link

src/pages/posts/index.astro

@@ -3,7 +3,6 @@ import { getCollection } from "astro:content";
 import { SITE, POSTS } from "@consts";
 import ShowcasePost from "@components/ShowcasePost.astro";
 import Layout from "@layouts/Layout.astro";
-import Link from "@components/Link.astro";
 
 const posts = (await getCollection("posts"))
   .filter((post) => !post.data.draft)
@@ -23,11 +22,11 @@ const posts = (await getCollection("posts"))
       posts.map((article: any) => <ShowcasePost collection={article} />)
     }
   </ol>
-  <div class="flex justify-end">
-    <Link
+  <div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
+    <a
       href="/posts.xml"
       class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
-      >View posts feed</Link
+      >View posts feed</a
     >
   </div>
 </Layout>

src/pages/projects/index.astro

@@ -3,7 +3,6 @@ import { getCollection } from "astro:content";
 import { PROJECTS, SITE } from "@consts";
 import Layout from "@layouts/Layout.astro";
 import ShowcaseProject from "@components/ShowcaseProject.astro";
-import Link from "@components/Link.astro";
 
 const projects = (await getCollection("projects"))
   .filter((project) => !project.data.draft)
@@ -19,11 +18,11 @@ const projects = (await getCollection("projects"))
   >
     {projects.map((article: any) => <ShowcaseProject collection={article} />)}
   </ol>
-  <div class="flex justify-end">
-    <Link
+  <div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
+    <a
       href="/projects.xml"
       class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
-      >View projects feed</Link
+      >View projects feed</a
     >
   </div>
 </Layout>

src/pages/tags/[tag].astro

@@ -62,9 +62,11 @@ const allArticlesWithTag = [...blogPostsWithTag, ...projectsWithTag]
   >
     {allArticlesWithTag.map((article) => <ShowcasePost collection={article} />)}
   </ul>
-  <a
-    href="/tags"
-    class="animate-reveal w-fit underline opacity-0 [animation-delay:0.2s] hover:no-underline"
-    >See all tags</a
-  >
+  <div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
+    <a
+      href="/tags"
+      class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
+      >See all tags</a
+    >
+  </div>
 </Layout>

src/pages/tags/index.astro

@@ -41,12 +41,14 @@ const allTagsSorted = freqSort(allTags);
   >
     {
       allTagsSorted.map((tag: string) => (
-        <a
-          href={`/tags/${createSlug(tag)}`}
-          class="underline hover:no-underline"
-        >
-          {tag}
-        </a>
+        <li>
+          <a
+            href={`/tags/${createSlug(tag)}`}
+            class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center font-sans text-sm font-light text-nowrap capitalize no-underline transition-colors duration-300"
+          >
+            {tag}
+          </a>
+        </li>
       ))
     }
   </ol>