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

Edits on UP IECEP Family part

Browse Source
This commit is contained in:
Kent Joseph T. Palima
2026-04-30 14:36:32 +08:00
parent 2a27959de3
commit bdc6c57b0d
2 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Family/Family.astro
+18 -3
View File
@@ -8,6 +8,7 @@ import family3 from '../../assets/images/family/family_3.png';
<h2>UP IECEP Family</h2>
<div class="members-panel">
<!-- Mobile Popup 1 (Retains arrow) -->
<div class="image-panel">
<img src={family1.src} alt="" />
<div class="image-panel-popup">
@@ -18,9 +19,13 @@ import family3 from '../../assets/images/family/family_3.png';
</div>
</div>
<!-- Desktop Panel 1: Executive Committee -->
<div class="text-panel">
<a href="/executive-committee" class="cover" style="color: inherit; text-decoration: none;">
<h3>Executive Committee &rarr;</h3>
<div class="title-group">
<h3>Executive Committee</h3>
<span class="action-hint">View roster</span>
</div>
</a>
<a href="/executive-committee" class="under" style="color: inherit; text-decoration: none;">
<h3>Executive Committee</h3>
@@ -28,6 +33,7 @@ import family3 from '../../assets/images/family/family_3.png';
</a>
</div>
<!-- Mobile Popup 2 (Retains arrow) -->
<div class="image-panel">
<img src={family2.src} alt="" />
<div class="image-panel-popup">
@@ -38,9 +44,13 @@ import family3 from '../../assets/images/family/family_3.png';
</div>
</div>
<!-- Desktop Panel 2: Current Members -->
<div class="text-panel">
<a href="/current-members" class="cover" style="color: inherit; text-decoration: none;">
<h3>Current Members &rarr;</h3>
<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>
@@ -48,6 +58,7 @@ import family3 from '../../assets/images/family/family_3.png';
</a>
</div>
<!-- Mobile Popup 3 (Retains arrow) -->
<div class="image-panel">
<img src={family3.src} alt="" />
<div class="image-panel-popup">
@@ -58,9 +69,13 @@ import family3 from '../../assets/images/family/family_3.png';
</div>
</div>
<!-- Desktop Panel 3: Notable Members -->
<div class="text-panel">
<a href="#" class="cover" style="color: inherit; text-decoration: none;">
<h3>Notable Members &rarr;</h3>
<div class="title-group">
<h3>Notable Members</h3>
<span class="action-hint">View profiles</span>
</div>
</a>
<a href="#" class="under" style="color: inherit; text-decoration: none;">
<h3>Notable Members</h3>
src/components/Family/family.scss
+31 -3
View File
@@ -29,9 +29,9 @@
position: relative;
img {
width: 100%;
height: 100%;
height: 100%;
object-fit: cover;
display: block;
display: block;
}
.image-panel-popup {
@@ -73,8 +73,15 @@
z-index: 2;
cursor: pointer;
transition: all 0.3s ease-in-out;
.title-group {
width: 100%;
text-align: center;
}
h3 {
width: calc(3 / 4 * 100%);
margin: 0 auto; /* Added to keep it centered inside title-group */
text-align: center;
color: $text-light;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
@@ -83,6 +90,21 @@
letter-spacing: 0.0525rem;
}
.action-hint {
display: block;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1rem;
margin-top: 0.5rem;
opacity: 0.9;
color: $text-light;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding-bottom: 2px;
margin-inline: auto;
width: max-content;
}
&:hover {
opacity: 0;
}
@@ -130,6 +152,9 @@
h3 {
font-size: 1.75rem;
}
.action-hint {
font-size: 0.75rem; /* Slightly smaller hint on tablets */
}
}
.under {
width: 90%;
@@ -153,6 +178,9 @@
h3 {
font-size: 1rem;
}
.action-hint {
font-size: 0.6rem;
}
}
.under {
width: 90%;
@@ -245,4 +273,4 @@
}
}
}
}
}