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

Modified order of blocks in Family part in mobile and desktop (final)

Browse Source
This commit is contained in:
Kent Joseph T. Palima
2026-05-03 12:32:18 +08:00
parent 93f09a83f4
commit c444e4fea7
5 changed files with 51 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/family/family_1.png → src/assets/images/family/current_mems.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 415 KiB

After

Width:  |  Height:  |  Size: 415 KiB

src/assets/images/family/family_3.png → src/assets/images/family/execomm.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 875 KiB

After

Width:  |  Height:  |  Size: 875 KiB

src/assets/images/family/family_2.png → src/assets/images/family/notable_mems.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

src/components/Family/Family.astro
+43 -45
View File
@@ -1,25 +1,14 @@
---
import family1 from '../../assets/images/family/family_1.png';
import family2 from '../../assets/images/family/family_2.png';
import family3 from '../../assets/images/family/family_3.png';
import current_mems from '../../assets/images/family/current_mems.png';
import notable_mems from '../../assets/images/family/notable_mems.png';
import execomm from '../../assets/images/family/execomm.png';
---
<section class="family-section" id="people">
<h2>UP IECEP Family</h2>
<div class="members-panel">
<!-- Mobile Popup 1 (Retains arrow) -->
<div class="image-panel">
<img src={family3.src} alt="" />
<div class="image-panel-popup">
<a href="/executive-committee" style="color: inherit; text-decoration: none;">
<h3>Executive Committee &rarr;</h3>
</a>
<p>A bit information about the current heads of each committee</p>
</div>
</div>
<!-- Desktop Panel 1: Executive Committee -->
<!-- PANEL: Executive Committee Text -->
<div class="text-panel">
<a href="/executive-committee" class="cover" style="color: inherit; text-decoration: none;">
<div class="title-group">
@@ -33,36 +22,9 @@ import family3 from '../../assets/images/family/family_3.png';
</a>
</div>
<!-- Mobile Popup 2 (Retains arrow) -->
<!-- PANEL: Current Members Image -->
<div class="image-panel">
<img src={family2.src} alt="" />
<div class="image-panel-popup">
<a href="#people" style="color: inherit; text-decoration: none;">
<h3>Notable Members &rarr;</h3>
</a>
<p>
Some of UP IECEP's most well respected and accomplished individuals
</p>
</div>
</div>
<!-- Desktop Panel 2: Current Members -->
<div class="text-panel">
<a href="/current-members" class="cover" style="color: inherit; text-decoration: none;">
<div class="title-group">
<h3>Current Members</h3>
<span class="action-hint">View list</span>
</div>
</a>
<a href="/current-members" class="under" style="color: inherit; text-decoration: none;">
<h3>Current Members</h3>
<strong>A short list of all the current members of UP IECEP</strong>
</a>
</div>
<!-- Mobile Popup 3 (Retains arrow) -->
<div class="image-panel">
<img src={family1.src} alt="" />
<img src={current_mems.src} alt="" />
<div class="image-panel-popup">
<a href="/current-members" style="color: inherit; text-decoration: none;">
<h3>Current Members &rarr;</h3>
@@ -71,7 +33,7 @@ import family3 from '../../assets/images/family/family_3.png';
</div>
</div>
<!-- Desktop Panel 3: Notable Members -->
<!-- PANEL: Notable Members Text -->
<div class="text-panel">
<a href="#people" class="cover" style="color: inherit; text-decoration: none;">
<div class="title-group">
@@ -85,5 +47,41 @@ import family3 from '../../assets/images/family/family_3.png';
</a>
</div>
<!-- PANEL: Executive Committee Image -->
<div class="image-panel">
<img src={execomm.src} alt="" />
<div class="image-panel-popup">
<a href="/executive-committee" style="color: inherit; text-decoration: none;">
<h3>Executive Committee &rarr;</h3>
</a>
<p>A bit information about the current heads of each committee</p>
</div>
</div>
<!-- PANEL: Current Members Text -->
<div class="text-panel">
<a href="/current-members" class="cover" style="color: inherit; text-decoration: none;">
<div class="title-group">
<h3>Current Members</h3>
<span class="action-hint">View list</span>
</div>
</a>
<a href="/current-members" class="under" style="color: inherit; text-decoration: none;">
<h3>Current Members</h3>
<strong>A short list of all the current members of UP IECEP</strong>
</a>
</div>
<!-- PANEL: Notable Members Image -->
<div class="image-panel">
<img src={notable_mems.src} alt="" />
<div class="image-panel-popup">
<a href="#people" style="color: inherit; text-decoration: none;">
<h3>Notable Members &rarr;</h3>
</a>
<p>Some of UP IECEP's most well respected and accomplished individuals</p>
</div>
</div>
</div>
</section>
src/components/Family/family.scss
+6 -15
View File
@@ -48,15 +48,9 @@
aspect-ratio: 25.375 / 18.125;
position: relative;
&:nth-of-type(2) {
.cover,
.under {
background-color: $secondary;
}
}
&:nth-of-type(4),
&:nth-of-type(6) {
&:nth-of-type(1),
&:nth-of-type(3),
&:nth-of-type(5) {
.cover,
.under {
background-color: $secondary;
@@ -266,12 +260,9 @@
}
}
&:nth-of-type(1) {
order: 1;
}
&:nth-of-type(3) {
order: 2;
}
&:nth-of-type(1) { order: 2; }
&:nth-of-type(3) { order: 3; }
&:nth-of-type(5) { order: 1; }
}
}
}