First Batch for Teslafest

src/components/genericHero.astro

@@ -0,0 +1,32 @@
+---
+export interface Props {
+  text: string
+}
+const { text } = Astro.props
+---
+
+<div>
+  {text}
+</div>
+
+<style>
+  div {
+    display: flex;
+    width: 100%;
+    max-height: auto;
+    background-color: var(--c-duskgray);
+    text-align: center;
+    justify-content: center;
+    color: white;
+    font-size: 2.75rem;
+    letter-spacing: 0.075em;
+    padding: 2rem 0rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: bolder;
+  }
+  @media (min-width: 900px) {
+    div {
+      font-size: 4.5rem;
+    }
+  }
+</style>

src/components/questListing.astro

@@ -82,6 +82,7 @@ const render_date = releaseDate.toLocaleDateString(
 
   a:hover > article {
     transform: scaleY(102.5%) scaleX(101%);
+    transition: transform var(--speed) var(--ease);
   }
 
   @media (min-width: 900px) {
@@ -104,10 +105,45 @@ const render_date = releaseDate.toLocaleDateString(
       margin-right: 0.825rem;
     }
 
+    a:hover article {
+      border-color: var(--c-darkpurple);
+    }
+
     article {
+      border-style: solid;
+      border-width: 2px;
+      border-color: var(--c-darkergray);
       align-items: flex-start;
       align-content: flex-start;
       margin-left: 0.5rem;
     }
   }
+
+  @media (min-width: 1500px) {
+    .circle {
+      display: none;
+    }
+
+    article {
+      margin: unset;
+      flex-wrap: nowrap;
+      min-height: 12rem;
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    a {
+      width: 30.5%;
+      align-items: unset;
+    }
+
+    p {
+      text-align: justify;
+      padding: 0rem 0.5rem;
+    }
+
+    h2 {
+      text-align: center;
+    }
+  }
 </style>