Added some styling

OSURoboticsClub · Oct 2, 2024 · eb30a30 · eb30a30
1 parent f349b5b
commit eb30a30
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 22 deletions.
diff --git 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 }}
+<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
@@ -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));
+ }
+}