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

feat: adapt portfolio sections for smaller screens

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-05 17:26:06 +08:00
parent f6228f8507
commit 3d12f48f32
9 changed files with 440 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/styles/globals.css
View File

@@ -158,35 +158,18 @@ body {
color: var(--text-primary);
}
.pill-btn-outline:hover {
background: rgba(255, 255, 255, 0.7);
border-color: var(--accent-default);
transform: translateY(-1px);
}
[data-theme="dark"] .pill-btn-outline {
background: rgba(9, 28, 63, 0.6);
border-color: var(--border-default);
color: var(--text-primary);
}
[data-theme="dark"] .pill-btn-outline:hover {
background: rgba(16, 63, 127, 0.8);
border-color: var(--accent-default);
}
.pill-btn-primary {
background-color: var(--action-primary-bg);
color: var(--action-primary-fg);
border-color: transparent;
}
.pill-btn-primary:hover {
background-color: var(--action-primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--shadow-color);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
@@ -204,3 +187,22 @@ a {
color: inherit;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.pill-btn-outline:hover {
border-color: var(--accent-default);
background: rgba(255, 255, 255, 0.7);
transform: translateY(-1px);
}
[data-theme="dark"] .pill-btn-outline:hover {
border-color: var(--accent-default);
background: rgba(16, 63, 127, 0.8);
}
.pill-btn-primary:hover {
background-color: var(--action-primary-hover);
box-shadow: 0 4px 12px var(--shadow-color);
transform: translateY(-1px);
}
}