Make highlights card background changeable

daniel-panhead · Apr 18, 2024 · 835c607 · 835c607
1 parent cfc02f6
commit 835c607
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/components/HighlightCard.astro b/src/components/HighlightCard.astro
@@ -2,12 +2,20 @@
 interface Props {
   title: string,
   date: string
+  primacy?: 0|1|2 // primary|secondary|tertiary
 }
 
-const { title, date } = Astro.props;
+const { title, date, primacy = 0 } = Astro.props;
 ---
 
-<div class="highlights_card">
+<div class:list={
+  [
+    "highlights_card",
+    {"highlights_card--primary": primacy === 0},
+    {"highlights_card--secondary": primacy === 1},
+    {"highlights_card--tertiary": primacy === 2}
+  ]
+}>
   <div class="highlights_card-header">
     <span class="highlights_card-title">
       <slot name="icon" />
@@ -35,10 +43,21 @@ const { title, date } = Astro.props;
   }
 
   .highlights_card:hover {
-    background-color: white;
     border: 1px solid black;
   }
 
+  .highlights_card--primary:hover {
+    background-color: var(--primary);
+  }
+
+  .highlights_card--secondary:hover {
+    background-color: var(--secondary);
+  }
+
+  .highlights_card--tertiary:hover {
+    background-color: var(--tertiary);
+  }
+
   .highlights_card-header {
     display: flex;
     flex-direction: column;

diff --git a/src/components/HighlightsSection.astro b/src/components/HighlightsSection.astro
@@ -5,7 +5,7 @@ import HighlightCard from "./HighlightCard.astro"
 <div class="highlights">
   <h2>Here's some highlights of my experience:</h2>
   <div class="highlights-container">
-    <HighlightCard title="Berlinguette Group" date="Jan 2024 - Now">
+    <HighlightCard title="Berlinguette Group" date="Jan 2024 - Now" primacy={2}>
       <svg
         class="text-tertiary"
         slot="icon"
@@ -30,7 +30,7 @@ import HighlightCard from "./HighlightCard.astro"
       using technologies like React, Python, Docker, Arduino, and MQTT.
     </HighlightCard>
     <hr>
-    <HighlightCard title="UBC BIOMOD Club" date="May 2023 - Now">
+    <HighlightCard title="UBC BIOMOD Club" date="May 2023 - Now" primacy={1}>
       <svg
         class="text-secondary"
         slot="icon"
@@ -57,9 +57,9 @@ import HighlightCard from "./HighlightCard.astro"
       submission, where we placed 5th internationally!
     </HighlightCard>
     <hr>
-    <HighlightCard title="UBC ARC" date="May 2023 - Dec 2023">
+    <HighlightCard title="UBC ARC" date="May 2023 - Dec 2023" primacy={0}>
       <svg
-      class="text-primary"
+        class="text-primary"
         slot="icon"
         aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"