From c9b1c18f14192323171b99ef3ee458e59cb2d273 Mon Sep 17 00:00:00 2001 From: "Kent Joseph T. Palima" Date: Wed, 29 Apr 2026 23:53:22 +0800 Subject: [PATCH] Added current members page (placeholders muna) --- src/components/Family/Family.astro | 22 ++--- src/pages/current-members.astro | 100 +++++++++++++++++++++++ src/styles/current-members.scss | 125 +++++++++++++++++++++++++++++ 3 files changed, 238 insertions(+), 9 deletions(-) create mode 100644 src/pages/current-members.astro create mode 100644 src/styles/current-members.scss diff --git a/src/components/Family/Family.astro b/src/components/Family/Family.astro index 61efa2b..3a3d576 100644 --- a/src/components/Family/Family.astro +++ b/src/components/Family/Family.astro @@ -11,8 +11,10 @@ import family3 from '../../assets/images/family/family_3.png';
-

Current Members →

-

A short list of all the current active members of UP IECEP

+ +

Current Members →

+

A short list of all the current active members of UP IECEP

+
@@ -37,13 +39,15 @@ import family3 from '../../assets/images/family/family_3.png';
-
-

Current Members

-
-
-

Current Members

- A short list of all the current active members of UP IECEP -
+ +
+

Current Members

+
+
+

Current Members

+ A short list of all the current active members of UP IECEP +
+
diff --git a/src/pages/current-members.astro b/src/pages/current-members.astro new file mode 100644 index 0000000..8086327 --- /dev/null +++ b/src/pages/current-members.astro @@ -0,0 +1,100 @@ +--- +import Layout from '../layouts/Layout.astro'; +import '../styles/current-members.scss'; // Make sure to create this SCSS file next! +--- + + +
+

Current Members

+ +
+

President

+

[Name of President]

+
+ +
+ +
+
+

Secretariat

+ [Name of VP] +
+
    +
  • Member Name
    • +
  • Member Name
    • +
  • Member Name
    • +
+
+ +
+
+

Academic Affairs

+ [Name of VP] +
+
    +
  • Member Name
    • +
  • Member Name
    • +
  • Member Name
    • +
+
+ +
+
+

Finance

+ [Name of VP] +
+
    +
  • Member Name
    • +
  • Member Name
    • +
  • Member Name
    • +
+
+ +
+
+

Externals

+ [Name of VP] +
+
    +
  • Member Name
    • +
  • Member Name
    • +
+
+ +
+
+

Internals

+ [Name of VP] +
+
    +
  • Member Name
    • +
  • Member Name
    • +
+
+ +
+
+

Publicity

+ [Name of VP] +
+
    +
  • Member Name
    • +
  • Member Name
    • +
  • Member Name
    • +
+
+ +
+
+

Logistics

+ [Name of VP] +
+
    +
  • Member Name
    • +
  • Member Name
    • +
+
+ +
+
+ diff --git a/src/styles/current-members.scss b/src/styles/current-members.scss new file mode 100644 index 0000000..f0e0464 --- /dev/null +++ b/src/styles/current-members.scss @@ -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); + } + } +}