Make highlights section into cards

daniel-panhead · Apr 19, 2024 · 20c34ae · 20c34ae
1 parent 7a4985d
commit 20c34ae
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/src/components/HighlightCard.astro b/src/components/HighlightCard.astro
@@ -34,27 +34,24 @@ const { title, date, primacy = 0 } = Astro.props;
     flex-direction: column;
     gap: 16px;
     font-size: 14px;
-    padding: 12px;
-    border: 1px solid transparent;
+    padding: 16px;
+    border: 1px solid black;
     border-radius: var(--default-border-radius);
-    transition-property: all,border;
-    transition-duration: 150ms;
-    transition-timing-function: ease;
-  }
 
-  .highlights_card:hover {
-    border: 1px solid black;
+    @media (min-width: 1024px) {
+      padding: 24px;
+    }
   }
 
-  .highlights_card--primary:hover {
+  .highlights_card--primary {
     background-color: var(--primary);
   }
 
-  .highlights_card--secondary:hover {
+  .highlights_card--secondary {
     background-color: var(--secondary);
   }
 
-  .highlights_card--tertiary:hover {
+  .highlights_card--tertiary {
     background-color: var(--tertiary);
   }
 

diff --git a/src/components/HighlightsSection.astro b/src/components/HighlightsSection.astro
@@ -29,7 +29,7 @@ import HighlightCard from "./HighlightCard.astro"
       developer, I'm working on our central experiment control interface
       using technologies like React, Python, Docker, Arduino, and MQTT.
     </HighlightCard>
-    <hr>
+    <!-- <hr> -->
     <HighlightCard title="UBC BIOMOD Club" date="May 2023 - Now" primacy={1}>
       <svg
         class="text-secondary"
@@ -56,7 +56,7 @@ import HighlightCard from "./HighlightCard.astro"
       website. I also helped develop the website for our 2023 competition
       submission, where we placed 5th internationally!
     </HighlightCard>
-    <hr>
+    <!-- <hr> -->
     <HighlightCard title="UBC ARC" date="May 2023 - Dec 2023" primacy={0}>
       <svg
         class="text-primary"
@@ -105,8 +105,11 @@ import HighlightCard from "./HighlightCard.astro"
 		gap: 20px;
 		@media (min-width: 1024px) {
 			flex-direction: row;
-			gap: 36px;
+			gap: 40px;
 		}
+    @media (min-width: 1280px) {
+      gap: 60px;
+    }
 	}
 
 	hr {