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

fix(skills): make tools grid truly flexible and responsive across all screens

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 14:00:59 +03:30
parent 9f14e9a4f4
commit caa7ced772
1 changed files with 36 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/SkillsSection.module.css
View File

@@ -95,8 +95,9 @@
.toolsGrid { .toolsGrid {
display: grid; display: grid;
grid-template-columns: repeat(8, 1fr); grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 1.5rem; gap: 1rem;
width: 100%;
} }
.toolTile { .toolTile {
@@ -104,12 +105,16 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 8.25rem; width: 100%;
height: 8.5rem; min-width: 0;
height: auto;
aspect-ratio: 1 / 1;
min-height: 6.5rem;
background-color: transparent; background-color: transparent;
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 1rem 0.5rem; padding: 0.75rem 0.375rem;
box-sizing: border-box;
transition: transition:
opacity var(--motion-duration-default) ease, opacity var(--motion-duration-default) ease,
filter var(--motion-duration-default) ease, filter var(--motion-duration-default) ease,
@@ -125,12 +130,12 @@
} }
.toolIconContainer { .toolIconContainer {
width: 4rem; width: clamp(2.25rem, 42%, 3.5rem);
height: 4rem; height: clamp(2.25rem, 42%, 3.5rem);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 0.75rem; margin-bottom: 0.5rem;
} }
.toolIcon { .toolIcon {
@@ -140,11 +145,15 @@
} }
.toolLabel { .toolLabel {
font-size: var(--font-size-body-small); font-size: clamp(0.71875rem, 1vw, 0.8125rem);
line-height: var(--line-height-body-small); line-height: 1.25;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
text-align: center; text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.filterTabsRow { .filterTabsRow {
@@ -168,15 +177,11 @@
@media (max-width: 1180px) { @media (max-width: 1180px) {
.toolsGrid { .toolsGrid {
grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--space-4); gap: 0.875rem;
}
.toolTile {
width: 100%;
} }
} }
@media (max-width: 900px) { @media (max-width: 850px) {
.skillsSection { .skillsSection {
padding-top: var(--space-8); padding-top: var(--space-8);
padding-bottom: var(--space-9); padding-bottom: var(--space-9);
@@ -193,6 +198,7 @@
.toolsGrid { .toolsGrid {
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
} }
.filterTabsRow { .filterTabsRow {
@@ -200,7 +206,7 @@
} }
} }
@media (max-width: 560px) { @media (max-width: 600px) {
.mainCard { .mainCard {
padding: var(--space-5); padding: var(--space-5);
} }
@@ -211,18 +217,8 @@
} }
.toolsGrid { .toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3); gap: 0.625rem;
}
.toolTile {
height: 7.75rem;
padding: var(--space-3) var(--space-2);
}
.toolIconContainer {
width: 3.25rem;
height: 3.25rem;
} }
.filterTabsRow { .filterTabsRow {
@@ -236,6 +232,17 @@
} }
} }
@media (max-width: 400px) {
.mainCard {
padding: var(--space-4);
}
.toolsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
}
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
.badgePill:hover { .badgePill:hover {
border-color: var(--accent-default); border-color: var(--accent-default);