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

Initial commit

Browse Source
This commit is contained in:
Kent Joseph Palima
2026-04-29 01:21:58 +08:00
commit fe108ffb47
61 changed files with 6297 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Family/family.scss
+246
View File
@@ -0,0 +1,246 @@
.family-section {
padding-block: 8rem;
padding-inline: 2.81rem;
display: grid;
grid-template-columns: repeat(1, 1fr);
min-height: fit-content;
scroll-margin-top: 3rem;
h2 {
text-align: center;
color: $primary;
font-size: 4.4374rem;
font-weight: 900;
letter-spacing: 0.08875rem;
margin-bottom: 2.44rem;
}
.members-panel {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
grid-auto-flow: row;
.image-panel {
width: 100%;
height: auto;
aspect-ratio: 25.375 / 18.125;
overflow: hidden;
position: relative;
img {
width: 100%;
object-fit: cover;
}
.image-panel-popup {
display: none;
}
}
.text-panel {
display: grid;
width: 100%;
height: auto;
aspect-ratio: 25.375 / 18.125;
position: relative;
&:nth-of-type(2) {
.cover,
.under {
background-color: $background-accent;
}
}
&:nth-of-type(4),
&:nth-of-type(6) {
.cover,
.under {
background-color: $secondary;
}
}
.cover {
display: block;
position: absolute;
width: 100%;
height: auto;
aspect-ratio: 25.375 / 18.125;
display: grid;
grid-template-columns: 1fr;
place-items: center;
z-index: 2;
cursor: pointer;
transition: all 0.3s ease-in-out;
h3 {
width: calc(3 / 4 * 100%);
text-align: center;
color: $text-light;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
font-size: 2.625rem;
font-weight: 900;
letter-spacing: 0.0525rem;
}
&:hover {
opacity: 0;
}
}
.under {
width: 85%;
place-self: center;
height: auto;
aspect-ratio: inherit;
display: grid;
grid-template-columns: 1fr;
place-items: center;
align-content: center;
padding: 1rem;
h3 {
text-align: center;
color: $text-light;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
font-size: 2.625rem;
font-weight: 900;
letter-spacing: 0.0525rem;
margin-bottom: 1rem;
}
strong {
text-align: center;
font-size: 1.25rem;
font-weight: 900;
letter-spacing: 0.03rem;
}
}
}
}
}
@media screen and (max-width: 1024px) {
.family-section {
padding-block: 3rem;
.members-panel {
.text-panel {
.cover {
h3 {
font-size: 1.75rem;
}
}
.under {
width: 90%;
h3 {
font-size: 1.75rem;
}
strong {
font-size: 1rem;
}
}
}
}
}
}
@media screen and (max-width: 768px) {
.family-section {
.members-panel {
.text-panel {
.cover {
h3 {
font-size: 1rem;
}
}
.under {
width: 90%;
padding: 0.25rem;
h3 {
font-size: 1rem;
}
strong {
font-size: 0.5rem;
font-weight: 600;
letter-spacing: normal;
}
}
}
}
}
}
@media screen and (max-width: 480px) {
.family-section {
padding-block: 2rem;
padding-inline: 0;
h2 {
font-size: 3rem;
padding-inline: 2rem;
margin-bottom: 0;
}
.members-panel {
grid-template-columns: repeat(1, 1fr);
padding: 2rem;
row-gap: 2rem;
.text-panel {
display: none;
}
.image-panel {
border-radius: 3rem;
.image-panel-popup {
display: grid;
grid-template-columns: 1fr;
place-items: start center;
top: 75%;
left: 0;
width: 100%;
height: auto;
aspect-ratio: 25.375 / 18.125;
padding: 1rem;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
color: $text-light;
transition: all 0.2s ease-in-out;
h3 {
font-weight: 400;
text-decoration: underline;
text-underline-offset: 3px;
}
p {
width: calc(3 / 4 * 100%);
font-size: 1.25rem;
text-align: center;
}
&:hover {
top: 0;
background-color: rgba(0, 0, 0, 0.6);
place-items: center;
align-content: center;
row-gap: 2rem;
h3 {
font-weight: 700;
font-size: 1.25rem;
}
}
}
&:nth-of-type(1) {
order: 1;
}
&:nth-of-type(3) {
order: 2;
}
}
}
}
}