amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: convert project sizing to scalable rem units with responsive root font scaling

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 13:58:17 +03:30
parent c7ef6dff3e
commit 9f14e9a4f4
12 changed files with 342 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/FooterSection.module.css
View File

@@ -1,8 +1,8 @@
.footerSection {
position: relative;
width: 100%;
max-width: 1440px;
height: 480px;
max-width: var(--layout-frame);
height: 30rem;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -16,7 +16,7 @@
top: 0;
left: 0;
width: 100%;
height: 480px;
height: 30rem;
z-index: 1;
}
@@ -32,14 +32,14 @@
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 84px;
margin-top: 5.25rem;
}
.ctaTitle {
font-size: var(--font-size-display-footer);
line-height: var(--line-height-display-footer);
color: var(--text-primary);
margin-bottom: 12px;
margin-bottom: 0.75rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
@@ -49,20 +49,20 @@
color: var(--text-secondary);
font-weight: 500;
letter-spacing: var(--letter-spacing-eyebrow);
margin-bottom: 24px;
margin-bottom: 1.5rem;
}
.socialRow {
display: flex;
align-items: center;
gap: 48px;
gap: 3rem;
}
.socialItem {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
gap: 0.75rem;
color: var(--text-primary);
text-decoration: none;
transition:
@@ -80,8 +80,8 @@
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
width: 3rem;
height: 3rem;
}
.socialIcon svg {
@@ -105,7 +105,7 @@
@media (max-width: 900px) {
.footerSection {
height: auto;
min-height: 480px;
min-height: 30rem;
padding: var(--space-10) var(--layout-page-gutter) var(--space-9);
}
@@ -127,17 +127,17 @@
@media (max-width: 560px) {
.footerSection {
min-height: 560px;
min-height: 35rem;
padding-top: var(--space-9);
}
.ctaTitle {
font-size: 36px;
line-height: 46px;
font-size: 2.25rem;
line-height: 2.875rem;
}
.ctaSubtitle {
max-width: 300px;
max-width: 18.75rem;
margin-bottom: var(--space-7);
font-size: var(--font-size-body-default);
line-height: var(--line-height-body-default);