Merge pull request #295 from jermspeaks/bug/colors-rearranged

Standardize colors for hover over

src/components/CurationItem.astro

@@ -16,7 +16,7 @@ const { Content } = await item.render();
   <img class="w-full" src={heroImage} alt={heroImageAlt} />
   <div class="px-0 py-4">
     <div class="font-bold text-xl mb-2 dark:text-gray-200">
-      <a class="hover:underline hover:text-purple-500 visited:text-[#f25042]" href={link}>
+      <a class="hover:underline hover:text-purple-500 visited:text-amber-600" href={link}>
         {title}
       </a>
     </div>

src/components/FooterSocialItem.astro

@@ -9,7 +9,7 @@ export interface Props {
 const { link, title, rel, class: className } = Astro.props;
 ---
 
-<li class="hover:text-orange-400 dark:text-white">
+<li class="hover:text-purple-500 dark:text-white">
   <a
     class:list={[className]}
     href={link}

src/components/HeaderLink.astro

@@ -13,6 +13,6 @@ const isActive = href === pathname || href === pathname.replace(/^(\/\w*)\/?.*/,
   href={href}
   class:list={isActive
     ? [className, "inline-block", "font-extrabold", "underline"]
-    : [className, "inline-block", "no-underline", "hover:underline"]}
+    : [className, "inline-block", "no-underline", "hover:underline", "hover:text-purple-500"]}
   {...props}><slot /></a
 >

src/components/ProjectListItem.astro

@@ -15,7 +15,7 @@ const { project } = Astro.props;
   <img class="w-full" src={project.data.image} alt={project.data.imageAlt} />
   <div class="font-bold text-xl mb-2 dark:text-gray-200">
     <a
-      class="hover:underline hover:text-purple-500 visited:text-[#f25042] dark:visited:text-purple-300"
+      class="hover:underline hover:text-purple-500 visited:text-amber-600 dark:visited:text-purple-300"
       href={`/project/${project.slug}/`}
     >
       {project.data.title}

src/components/ProseArticle.astro

@@ -8,7 +8,7 @@ const { class: className } = Astro.props;
 
 <article
   class:list={[
-    "prose lg:prose-xl dark:prose-invert prose-img:mt-0 prose-img:mb-0 prose-figcaption:mt-0 hover:prose-a:text-amber-600",
+    "prose lg:prose-xl dark:prose-invert prose-img:mt-0 prose-img:mb-0 prose-figcaption:mt-0 hover:prose-a:text-purple-500",
     {
       ['mx-auto']: !className?.includes('mx-0'),
     },

src/components/ResumeContent.astro

@@ -1,13 +1,13 @@
 ---
 import type { CollectionEntry } from "astro:content";
 
-type CollectionProps = CollectionEntry<"resume">;
-type ExtendProps = {
-  headingLevel: Number;
+type Props = {
+  item: CollectionEntry<"resume">;
+  headingLevel?: Number;
 };
-type Props = CollectionProps & ExtendProps;
 
-const { data, render, headingLevel = 2 } = Astro.props;
+const { item, headingLevel = 2 } = Astro.props;
+const { data, render } = item;
 const { Content } = await render();
 ---
 

src/components/WritingListItem.astro

@@ -11,7 +11,7 @@ const { post } = Astro.props;
 
 <li class="dark:text-white my-8">
   <a
-    class="my-4 text-xl hover:underline hover:text-purple-500 visited:text-[#f25042] dark:visited:text-purple-300"
+    class="my-4 text-xl hover:underline hover:text-purple-500 visited:text-amber-600 dark:visited:text-purple-300"
     href={`/blog/${post.slug}/`}
   >
     {post.data.title}

src/pages/about/resume.astro

@@ -1,14 +1,20 @@
 ---
 import { getCollection } from "astro:content";
-import aboutLinks from "../../utils/aboutLinks";
 import AboutLayout from "../../layouts/About.astro";
+import aboutLinks from "../../utils/aboutLinks";
 import NavigationLinks from "../../components/NavigationLinks.astro";
 import ProseArticle from "../../components/ProseArticle.astro";
 import ResumeContent from "../../components/ResumeContent.astro";
 
-const resumeItems = (await getCollection("resume")).sort(
-  (a, b) => a.order > b.order
-);
+const resumeItems = (await getCollection("resume")).sort((a, b) => {
+  if (a.data.order > b.data.order) {
+    return 1;
+  } else if (a.data.order < b.data.order) {
+    return -1;
+  } else {
+    return 0;
+  }
+});
 ---
 
 <AboutLayout
@@ -19,13 +25,13 @@ const resumeItems = (await getCollection("resume")).sort(
   <NavigationLinks slot="navigation" items={aboutLinks} />
   <ProseArticle>
     <h1><strong>Jeremy Wong</strong></h1>
-    {resumeItems.slice(0, 6).map((resume) => <ResumeContent {...resume} />)}
+    {resumeItems.slice(0, 6).map((resume) => <ResumeContent item={resume} />)}
 
     <div class="flex flex-col md:flex-row justify-between align-top my-2">
       {
         resumeItems
           .slice(6)
-          .map((resume) => <ResumeContent headingLevel={3} {...resume} />)
+          .map((resume) => <ResumeContent headingLevel={3} item={resume} />)
       }
     </div>
   </ProseArticle>

src/pages/curation/antibooks/index.astro

@@ -46,7 +46,7 @@ const antiLibrary = (await getCollection("antiLibrary")).sort(
         antiLibrary.map((entry) => (
           <li class="flex flex-shrink-0 flex-grow-0 flex-col flex-[200px] rounded-sm box-border dark:text-white">
             <a
-              class="visited:text-[#f25042]"
+              class="visited:text-amber-600"
               href={`/curation/antibooks/${entry.slug}`}
             >
               <img

src/pages/curation/books/index.astro

@@ -15,7 +15,7 @@ const bookLibrary = (await getCollection("book")).sort(
         bookLibrary.map((book) => (
           <li class="flex flex-shrink-0 flex-grow-0 flex-col flex-[200px] rounded-sm box-border dark:text-white">
             <a
-              class="visited:text-[#f25042]"
+              class="visited:text-amber-600"
               href={`/curation/books/${book.slug}`}
             >
               <img

src/pages/curation/businesscards/index.astro

@@ -16,7 +16,7 @@ import CurationDetailsPage from "../../../layouts/CurationDetailsPage.astro";
         filmLibrary.map((film) => (
           <li class="flex flex-shrink-0 flex-grow-0 flex-col flex-[200px] rounded-sm box-border dark:text-white">
             <a
-              class="visited:text-[#f25042]"
+              class="visited:text-amber-600"
               href={`/curation/films/${film.slug}`}
             >
               <img

src/pages/curation/films/index.astro

@@ -15,7 +15,7 @@ const filmLibrary = (await getCollection("filmLibrary")).sort(
         filmLibrary.map((film) => (
           <li class="flex flex-shrink-0 flex-grow-0 flex-col flex-[200px] rounded-sm box-border dark:text-white">
             <a
-              class="visited:text-[#f25042]"
+              class="visited:text-amber-600"
               href={`/curation/films/${film.slug}`}
             >
               <img

src/pages/curation/index.astro

@@ -73,7 +73,7 @@ const curations = (await getCollection("curation")).sort((a, b) =>
           <li class="flex flex-col sm:flex-row flex-[100%] sm:flex-[48%] gap-4 mb-6 md:mb-0 rounded-sm box-border dark:text-white">
             <div class="flex-shrink-0 flex-grow-0 flex-initial sm:w-32">
               <a
-                class="visited:text-[#f25042]"
+                class="visited:text-amber-600"
                 href={`/curation/${item.data.type}/${item.slug}`}
               >
                 <img
@@ -86,7 +86,7 @@ const curations = (await getCollection("curation")).sort((a, b) =>
             <div class="md:py-0 md:px-0 mt-2 md:mt-0">
               <div class="font-bold mb-2">
                 <a
-                  class="hover:underline hover:text-purple-500 visited:text-[#f25042]"
+                  class="hover:underline hover:text-purple-500 visited:text-amber-600"
                   href={`/curation/${item.data.type}/${item.slug}`}
                 >
                   {item.data.title}

src/pages/curation/newsletter/[...slug].astro

@@ -41,7 +41,7 @@ const { Content } = await series.render();
               class="mt-0 lg:mt-0 flex-shrink-0 flex-grow-0 flex-[130px] italic text-slate-600"
               date={post.data.pubDate}
             />
-            <a class="visited:text-[#f25042]" href={`/blog/${post.slug}/`}>
+            <a class="visited:text-amber-600" href={`/blog/${post.slug}/`}>
               {post.data.title}
             </a>
           </li>

src/pages/curation/newsletter/index.astro

@@ -32,7 +32,7 @@ const series: [CollectionEntry<"series">] = (
             <li class="flex flex-col md:flex-row">
               <div class="flex flex-col md:flex-shrink-0 md:flex-grow-0 md:flex-[350px]">
                 <a
-                  class="hover:text-purple-700 dark:hover:text-purple-300 visited:text-[#f25042]"
+                  class="hover:text-purple-700 dark:hover:text-purple-300 visited:text-amber-600"
                   href={`/curation/newsletter/${s.slug}/`}
                 >
                   {s.data.title}

src/pages/index.astro

@@ -72,7 +72,7 @@ const combination = [...bookLibrary, ...filmLibrary, ...lindyLibrary]
       <h2 class="mb-2 text-2xl font-thin">
         Maker, Home Cook, Book and Film Nerd. Currently leading application
         development at <a
-          class="text-orange-700 hover:text-orange-300 dark:text-orange-500"
+          class="text-orange-700 hover:text-purple-500 dark:text-orange-500"
           href="https://clearlabs.com/"
           target="_blank">Clear Labs</a
         >
@@ -84,11 +84,7 @@ const combination = [...bookLibrary, ...filmLibrary, ...lindyLibrary]
         <div>
           <ProseArticle class="mx-0 mb-8">
             <h3 class="text-3xl font-medium underline">
-              <a
-                href="/blog"
-                class="hover:text-slate-800 dark:hover:text-slate-300"
-                >✍🏽 What I Wrote</a
-              >
+              <a href="/blog" class="hover:text-purple-500">✍🏽 What I Wrote</a>
             </h3>
           </ProseArticle>
           <ul class="list-none sm:p-0 grid grid-cols-1 gap-4">
@@ -98,9 +94,7 @@ const combination = [...bookLibrary, ...filmLibrary, ...lindyLibrary]
         <div>
           <ProseArticle class="mx-0 mb-8">
             <h3 class="text-3xl font-medium underline">
-              <a
-                href="/project"
-                class="hover:text-slate-800 dark:hover:text-slate-300"
+              <a href="/project" class="hover:text-purple-500"
                 >🚢 What I Shipped</a
               >
             </h3>
@@ -115,8 +109,10 @@ const combination = [...bookLibrary, ...filmLibrary, ...lindyLibrary]
         </div>
         <div class="col-span-1 md:col-span-2">
           <ProseArticle class="mx-0 mb-8">
-            <h3 class="text-3xl font-medium underline">
-              <a href="/curation">🎨 What I've Curated</a>
+            <h3 class="text-3xl font-medium underline ">
+              <a href="/curation"
+                >🎨 What I Curated</a
+              >
             </h3>
           </ProseArticle>
           <ul class="grid grid-cols-1 md:grid-cols-2 gap-8 list-none p-0">
@@ -125,7 +121,7 @@ const combination = [...bookLibrary, ...filmLibrary, ...lindyLibrary]
                 <li class="grid grid-cols-8 gap-2 mb-6 md:mb-0 rounded-sm box-border dark:text-white">
                   <div class="col-span-3 sm:col-span-2">
                     <a
-                      class="visited:text-[#f25042]"
+                      class="visited:text-amber-600"
                       href={`/curation/${item.data.type}/${item.slug}`}
                     >
                       <img
@@ -138,7 +134,7 @@ const combination = [...bookLibrary, ...filmLibrary, ...lindyLibrary]
                   <div class="col-span-5 sm:col-span-6 md:py-0 md:px-0 md:mt-0">
                     <div class="font-bold mb-2">
                       <a
-                        class="hover:underline hover:text-purple-500 visited:text-[#f25042]"
+                        class="hover:underline hover:text-purple-500 visited:text-amber-600"
                         href={`/curation/${item.data.type}/${item.slug}`}
                       >
                         {item.data.title}
@@ -178,7 +174,7 @@ const combination = [...bookLibrary, ...filmLibrary, ...lindyLibrary]
         <h3>
           <a
             href="/curation/newsletter"
-            class="hover:text-slate-800 dark:hover:text-slate-300"
+            class="hover:text-purple-500"
             >Newsletter Series</a
           >
         </h3>