kntdgrtnnly/upiecep-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added current members page (placeholders muna)

Browse Source
This commit is contained in:
Kent Joseph T. Palima
2026-04-29 23:53:22 +08:00
parent 42f6eb218f
commit c9b1c18f14
3 changed files with 238 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Family/Family.astro
+13 -9
View File
@@ -11,8 +11,10 @@ import family3 from '../../assets/images/family/family_3.png';
<div class="image-panel">
<img src={family1.src} alt="" />
<div class="image-panel-popup">
<h3>Current Members &rarr;</h3>
<p>A short list of all the current active members of UP IECEP</p>
<a href="/current-members" style="color: inherit; text-decoration: none;">
<h3>Current Members &rarr;</h3>
<p>A short list of all the current active members of UP IECEP</p>
</a>
</div>
</div>
@@ -37,13 +39,15 @@ import family3 from '../../assets/images/family/family_3.png';
</div>
<div class="text-panel">
<div class="cover">
<h3>Current Members</h3>
</div>
<div class="under">
<h3>Current Members</h3>
<strong>A short list of all the current active members of UP IECEP</strong>
</div>
<a href="/current-members" class="text-panel" style="text-decoration: none;">
<div class="cover">
<h3>Current Members</h3>
</div>
<div class="under">
<h3>Current Members</h3>
<strong>A short list of all the current active members of UP IECEP</strong>
</div>
</a>
</div>
<div class="image-panel">
src/pages/current-members.astro
+100
View File
@@ -0,0 +1,100 @@
---
import Layout from '../layouts/Layout.astro';
import '../styles/current-members.scss'; // Make sure to create this SCSS file next!
---
<Layout title="Current Members | UP IECEP">
<section class="current-members-section">
<h1>Current Members</h1>
<div class="executive-top">
<h2>President</h2>
<h3>[Name of President]</h3>
</div>
<div class="committees-grid">
<div class="committee-column">
<div class="committee-head">
<h4>Secretariat</h4>
<strong>[Name of VP]</strong>
</div>
<ul class="member-list">
<li>Member Name</li>
<li>Member Name</li>
<li>Member Name</li>
</ul>
</div>
<div class="committee-column">
<div class="committee-head">
<h4>Academic Affairs</h4>
<strong>[Name of VP]</strong>
</div>
<ul class="member-list">
<li>Member Name</li>
<li>Member Name</li>
<li>Member Name</li>
</ul>
</div>
<div class="committee-column">
<div class="committee-head">
<h4>Finance</h4>
<strong>[Name of VP]</strong>
</div>
<ul class="member-list">
<li>Member Name</li>
<li>Member Name</li>
<li>Member Name</li>
</ul>
</div>
<div class="committee-column">
<div class="committee-head">
<h4>Externals</h4>
<strong>[Name of VP]</strong>
</div>
<ul class="member-list">
<li>Member Name</li>
<li>Member Name</li>
</ul>
</div>
<div class="committee-column">
<div class="committee-head">
<h4>Internals</h4>
<strong>[Name of VP]</strong>
</div>
<ul class="member-list">
<li>Member Name</li>
<li>Member Name</li>
</ul>
</div>
<div class="committee-column">
<div class="committee-head">
<h4>Publicity</h4>
<strong>[Name of VP]</strong>
</div>
<ul class="member-list">
<li>Member Name</li>
<li>Member Name</li>
<li>Member Name</li>
</ul>
</div>
<div class="committee-column">
<div class="committee-head">
<h4>Logistics</h4>
<strong>[Name of VP]</strong>
</div>
<ul class="member-list">
<li>Member Name</li>
<li>Member Name</li>
</ul>
</div>
</div>
</section>
</Layout>
src/styles/current-members.scss
+125
View File
@@ -0,0 +1,125 @@
.current-members-section {
padding-block: 8rem;
padding-inline: 2.81rem;
max-width: 1400px;
margin: 0 auto;
min-height: 100vh;
h1 {
text-align: center;
color: $primary;
font-size: 4.4374rem;
font-weight: 900;
margin-bottom: 4rem;
}
/* Centered President Block */
.executive-top {
text-align: center;
margin-bottom: 5rem;
padding-bottom: 3rem;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
h2 {
font-size: 2rem;
color: $secondary;
margin-bottom: 0.5rem;
}
h3 {
font-size: 2.5rem;
font-weight: 700;
color: $dark;
}
}
/* 7-Column Layout */
.committees-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1.5rem;
align-items: start;
.committee-column {
background-color: $background-accent;
padding: 1.5rem 1rem;
border-radius: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
.committee-head {
text-align: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
h4 {
font-size: 1.25rem;
color: $primary;
margin-bottom: 0.25rem;
}
strong {
font-size: 1.1rem;
color: $dark;
}
}
.member-list {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
li {
font-size: 1rem;
margin-bottom: 0.75rem;
color: #4a4a4a;
}
}
}
}
}
/* --- Responsive Adjustments --- */
/* Laptops & Tablets: Shrink to 4 columns, then 3 */
@media screen and (max-width: 1200px) {
.current-members-section {
.committees-grid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
}
}
@media screen and (max-width: 900px) {
.current-members-section {
.committees-grid {
grid-template-columns: repeat(3, 1fr);
}
}
}
/* Mobile Devices: Shrink to 2 columns, then 1 */
@media screen and (max-width: 768px) {
.current-members-section {
padding-block: 4rem;
padding-inline: 1.5rem;
h1 {
font-size: 3rem;
}
.committees-grid {
grid-template-columns: repeat(2, 1fr);
}
}
}
@media screen and (max-width: 480px) {
.current-members-section {
.committees-grid {
grid-template-columns: repeat(1, 1fr);
}
}
}