Skip to content

Commit

Permalink
Added some styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Reina128
Reina128 committed Oct 2, 2024
1 parent f349b5b commit eb30a30
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 22 deletions.
50 changes: 28 additions & 22 deletions layouts/_default/leadershipPage.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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 }}
21 changes: 21 additions & 0 deletions static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1073,6 +1073,9 @@ video {
.h-6 {
height: 1.5rem;
}
.h-60 {
height: 15rem;
}
.h-7 {
height: 1.75rem;
}
Expand Down Expand Up @@ -1223,6 +1226,9 @@ video {
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.content-around {
align-content: space-around;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -1884,3 +1898,10 @@ video {
font-size: 72px;
}
}

@media (min-width: 1024px) {

.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

0 comments on commit eb30a30

Please sign in to comment.