Added Executive Committee page

2026-04-30 11:47:27 +08:00
parent 9cc60a1ace
commit 0b0862bf23
12 changed files with 147 additions and 5 deletions
@@ -0,0 +1,102 @@
+@import './variables.scss';
+
+.execomm-section {
+  padding-block: 8rem;
+  padding-inline: 2.81rem;
+  width: 100%;
+  max-width: 1800px;
+  margin: 0 auto;
+  min-height: 100vh;
+
+  /* Matches the exact size and weight of Current Active Members */
+  h1 {
+    text-align: center;
+    color: $primary;
+    font-size: 3rem; 
+    font-weight: 900;
+    margin-bottom: 3rem;
+  }
+
+  .banner-container {
+    width: 100%;
+    margin-bottom: 4rem;
+    border-radius: 1.5rem;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+
+    img {
+      width: 100%;
+      height: auto;
+      max-height: 500px; /* Prevents the banner from getting absurdly tall on massive screens */
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  .photo-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+    
+    .photo-card {
+      width: 100%;
+      border-radius: 1rem;
+      overflow: hidden;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+
+      /* Adds a subtle hover effect to make the photos feel interactive */
+      &:hover {
+        transform: translateY(-5px);
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 3 / 4; /* Standard portrait ratio. Adjust if your photos are squares! */
+        object-fit: cover;
+        display: block;
+      }
+    }
+  }
+}
+
+/* --- Responsive Adjustments --- */
+
+@media screen and (max-width: 1024px) {
+  .execomm-section {
+    .photo-grid {
+      /* Drop to 2 columns on tablets so the photos don't get too skinny */
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1.5rem;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .execomm-section {
+    padding-top: 7rem; /* Safely clears the fixed mobile navigation bar */
+    padding-bottom: 4rem;
+    padding-inline: 1rem;
+
+    h1 {
+      font-size: 2rem; /* Scales down exactly like Current Members */
+      margin-bottom: 2rem;
+    }
+
+    .banner-container {
+      margin-bottom: 2rem;
+      border-radius: 1rem;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .execomm-section {
+    .photo-grid {
+      /* Drop to 1 column on phones to keep the embedded text readable */
+      grid-template-columns: repeat(1, 1fr);
+      gap: 1.5rem;
+    }
+  }
+}