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

44
src/components/RiverJourney.module.css
View File

@@ -20,10 +20,10 @@
.introBlock {
position: absolute;
top: 112px;
top: 7rem;
left: var(--layout-page-gutter);
z-index: 3;
width: min(390px, calc(100% - (2 * var(--layout-page-gutter))));
width: min(24.375rem, calc(100% - (2 * var(--layout-page-gutter))));
padding: var(--space-4);
border-radius: var(--radius-md);
background: var(--overlay-contact);
@@ -50,7 +50,7 @@
}
.underlineBar {
width: 120px;
width: 7.5rem;
height: 3px;
margin-bottom: var(--space-5);
border-radius: var(--radius-pill);
@@ -74,13 +74,13 @@
.stepCard {
position: absolute;
display: flex;
width: 250px;
width: 15.625rem;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
background: var(--overlay-contact);
box-shadow: 0 8px 24px var(--shadow-color);
box-shadow: 0 0.5rem 1.5rem var(--shadow-color);
backdrop-filter: blur(8px);
transition:
border-color var(--motion-duration-fast) ease,
@@ -96,9 +96,9 @@
.stepNumber {
flex: 0 0 auto;
color: var(--accent-default);
font-size: 20px;
font-size: 1.25rem;
font-weight: 800;
line-height: 28px;
line-height: 1.75rem;
}
.stepTitle {
@@ -117,11 +117,11 @@
@media (max-width: 1024px) {
.introBlock {
top: 80px;
top: 5rem;
}
.stepCard {
width: 230px;
width: 14.375rem;
}
.step05 { top: 90px; right: 32px; }
@@ -134,7 +134,7 @@
@media (max-width: 760px) {
.journeySection {
height: auto;
min-height: 1120px;
min-height: 70rem;
padding: var(--layout-section-padding) var(--layout-page-gutter);
}
@@ -151,13 +151,13 @@
padding: var(--space-4);
border: 1px solid var(--border-default);
background: var(--overlay-contact);
box-shadow: 0 8px 24px var(--shadow-color);
box-shadow: 0 0.5rem 1.5rem var(--shadow-color);
backdrop-filter: blur(12px);
}
.heading {
font-size: 28px;
line-height: 38px;
font-size: 1.75rem;
line-height: 2.375rem;
}
.description {
@@ -171,16 +171,16 @@
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: 220px;
padding-left: 20px;
margin-top: 13.75rem;
padding-left: 1.25rem;
}
.stepsList::before {
content: '';
position: absolute;
top: 20px;
bottom: 20px;
left: 5px;
top: 1.25rem;
bottom: 1.25rem;
left: 0.3125rem;
width: 1px;
background: var(--border-strong);
}
@@ -202,10 +202,10 @@
.stepCard::before {
content: '';
position: absolute;
top: 22px;
left: -20px;
width: 9px;
height: 9px;
top: 1.375rem;
left: -1.25rem;
width: 0.5625rem;
height: 0.5625rem;
border: 3px solid var(--bg-page);
border-radius: 50%;
background: var(--accent-default);