Merge pull request #44 from UR-dandyhacks/feature/prizes-section

Fix some minor finickies while we are at it!
UR-dandyhacks · Oct 19, 2023 · 636723f · 636723f
2 parents 1177fff + e8105ff
commit 636723f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -61,7 +61,7 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
       </div>
     </div>
     <div class="flex flex-row items-center justify-center gap-[77px] relative">
-      <img class="hidden hover-scale lg:self-start lg:block" src="img/sticker2.png" />
+      <img class="hidden hover-scale xl:self-start xl:block" src="img/sticker2.png" />
       <div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
         <h2 class="text-2xl lg:text-5xl">
           <div id="about" class="absolute -top-20"></div>
@@ -98,7 +98,7 @@ <h2 class="text-5xl">
           track will have different prizes, so pick and choose your track
           depending on which prize you want to win!
         </p>
-        <div class="flex flex-col p-12 lg:flex-row gap-12">
+        <div class="flex flex-row flex-wrap justify-center pt-5 pb-12 lg:pt-1 gap-12">
           <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
             <img class="w-40 mx-auto my-9" src="img/tracks/entertainment.svg" alt="A window with a video player" />
             <h3 class="mb-4 text-2xl text-center font-display">Entertainment</h3>

diff --git a/styles.css b/styles.css
@@ -2171,6 +2171,11 @@ h1, h2, h3, h4, h5, h6 {
   padding-right: 2.25rem;
 }
 
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .py-24 {
   padding-top: 6rem;
   padding-bottom: 6rem;
@@ -2198,6 +2203,14 @@ h1, h2, h3, h4, h5, h6 {
   padding-top: 8rem;
 }
 
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -3138,6 +3151,10 @@ canvas {
     padding-bottom: 1.25rem;
   }
 
+  .lg\:pt-1 {
+    padding-top: 0.25rem;
+  }
+
   .lg\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -3172,6 +3189,20 @@ canvas {
   }
 }
 
+@media (min-width: 1280px) {
+  .xl\:relative {
+    position: relative;
+  }
+
+  .xl\:block {
+    display: block;
+  }
+
+  .xl\:self-start {
+    align-self: flex-start;
+  }
+}
+
 @media (min-width: 768px) {
   @media not all and (min-width: 1024px) {
     @media (orientation: portrait) {