From eb30a309a9dca3d3355d5f5db06c7ab712b87506 Mon Sep 17 00:00:00 2001
From: Reina128 <114252439+Reina128@users.noreply.github.com>
Date: Tue, 1 Oct 2024 19:54:03 -0700
Subject: [PATCH] Added some styling

---
 layouts/_default/leadershipPage.html | 50 ++++++++++++++++------------
 static/css/styles.css                | 21 ++++++++++++
 2 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/layouts/_default/leadershipPage.html b/layouts/_default/leadershipPage.html
index 3bacbff..9a5fb29 100644
--- a/layouts/_default/leadershipPage.html
+++ b/layouts/_default/leadershipPage.html
@@ -1,55 +1,54 @@
 {{define "main"}}
 
-
 <article class="pb-24 relative"> 
     <div class="relative flex flex-col justify-between bg-black-200">
-        <div class="flex mb-8 mt-24"> 
-            <section class="mt-14">
+        <div class="flex mb-8 mt-24" style="width: 100%; flex-wrap: wrap;">
+            <section class="mt-14 w-full"> 
                 <div class="flex w-full gap-6 items-center mb-6">
                     <span class="block text-h2 font-bold font-display shadow leading-none" style="padding-top:20px;">Leadership</span>
                 </div>
-                <p>Check out our current officers and team leads!</p>
-                <div class="grid grid-cols-2 md:grid-cols-3 gap-6 justify-between w-full content-around" style="padding-top:15px;">
+                <p style="padding-bottom:10px;">Check out our current officers and team leads!</p>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 justify-between w-full content-around">
                     <div>
-                        <img src="/images/leadership/President.png" alt="President" class="w-full h-48 object-cover">
-                        <p style="color:#F97316">President: Emiliano Ramierez</p>
+                        <img src="/images/leadership/President.png" alt="President" class="w-full h-60 object-cover image-shadow" style="width: 120%;">
+                        <p style="color:#F97316; padding-top:15px;">President: Emiliano Ramierez</p>
                         <p></p>
                     </div>
                     <div>
-                        <img src="/images/leadership/VP.png" alt="Vice President" class="w-full h-48 object-cover">
-                        <p style="color:#F97316">Vice President: Maxfield </p>
+                        <img src="/images/leadership/VP.png" alt="Vice President" class="w-full h-60 object-cover image-shadow">
+                        <p style="color:#F97316; padding-top:15px;">Vice President: Maxfield </p>
                         <p></p>
                     </div>
                     <div>
-                        <img src="/images/leadership/Treasurer.png" alt="Treasurer" class="w-full h-48 object-cover">
-                        <p style="color:#F97316">Treasurer: Osian </p>
+                        <img src="/images/leadership/Treasurer.png" alt="Treasurer" class="w-full h-60 object-cover image-shadow">
+                        <p style="color:#F97316; padding-top:15px;">Treasurer: Osian </p>
                         <p></p>
                     </div>
                     <div>
-                        <img src="/images/leadership/BOB.png" alt="Board of Business" class="w-full h-48 object-cover">
-                        <p style="color:#F97316">Board of Business: Grace Sopko </p>
+                        <img src="/images/leadership/BOB.png" alt="Board of Business" class="w-full h-60 object-cover image-shadow">
+                        <p style="color:#F97316; padding-top:15px;">Board of Business: Grace Sopko </p>
                         <p></p>
                     </div>
                     <div class="w-full"></div>
                     <div class="w-full"></div>
                     <div>
-                        <img src="/images/leadership/Rover.png" alt="Rover lead" class="w-full h-48 object-cover">
-                        <p style="color:#F97316">Rover lead: Olivia  </p>
+                        <img src="/images/leadership/Rover.png" alt="Rover lead" class="w-full h-60 object-cover image-shadow">
+                        <p style="color:#F97316; padding-top:15px;">Rover lead: Olivia  </p>
                         <p></p>
                     </div>
                     <div>
-                        <img src="/images/leadership/Combat.png" alt="Combat lead" class="w-full h-48 object-cover">
-                        <p style="color:#F97316">Combat lead: Charlie </p>
+                        <img src="/images/leadership/Combat.png" alt="Combat lead" class="w-full h-60 object-cover image-shadow">
+                        <p style="color:#F97316; padding-top:15px;">Combat lead: Charlie </p>
                         <p></p>
                     </div>
                     <div>
-                        <img src="/images/leadership/Drone.png" alt="Combat lead" class="w-full h-48 object-cover">
-                        <p style="color:#F97316">Drone lead: Felix Klein</p>
+                        <img src="/images/leadership/Drone.png" alt="Combat lead" class="w-full h-60 object-cover image-shadow">
+                        <p style="color:#F97316; padding-top:15px;">Drone lead: Felix Klein</p>
                         <p> </p>
                     </div>
                     <div>
-                        <img src="/images/leadership/VexU.png" alt="Vex U lead" class="w-full h-48 object-cover">
-                        <p style="color:#F97316">VexU lead: Paul Smith</p>
+                        <img src="/images/leadership/VexU.png" alt="Vex U lead" class="w-full h-60 object-cover image-shadow">
+                        <p style="color:#F97316; padding-top:15px;">VexU lead: Paul Smith</p>
                         <p></p>
                     </div>
                 </div>
@@ -59,4 +58,11 @@
     </div>
 </article>
 
-{{ end }}
\ No newline at end of file
+<style>
+    .image-shadow {
+        box-shadow: 0 4px 10px rgba(255, 255, 255, 0.5); 
+        border-radius: 8px; 
+    }
+</style>
+
+{{ end }}
diff --git a/static/css/styles.css b/static/css/styles.css
index 225e115..b3bca2f 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1073,6 +1073,9 @@ video {
 .h-6 {
   height: 1.5rem;
 }
+.h-60 {
+  height: 15rem;
+}
 .h-7 {
   height: 1.75rem;
 }
@@ -1223,6 +1226,9 @@ video {
 .flex-col {
   flex-direction: column;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .content-around {
   align-content: space-around;
 }
@@ -1607,6 +1613,10 @@ video {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1851,6 +1861,10 @@ video {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -1884,3 +1898,10 @@ video {
     font-size: 72px;
   }
 }
+
+@media (min-width: 1024px) {
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}