mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-08-17 05:24:30 +03:30
mahdiarghyani
13031465e3
- Refine blog typography with optimized font sizes and line heights for better readability - Adjust heading margins and sizes (h1-h4) for improved visual hierarchy - Implement custom bullet styling with primary color indicators for lists - Add highlighted key phrases styling with left border accent for emphasized content - Create new BlogShare component for social sharing functionality - Add Callout and PullQuote content components for enhanced blog formatting - Introduce resume-button.css for improved button styling - Update blog post template with slug-based routing support - Add new blog post "Career Change: From Huawei to Frontend" in English and Persian - Enhance portfolio components (Hero, Skills, AIStack, etc.) with refined styling - Improve RTL language support with better spacing and alignment for Persian content - Add blog hero image asset (big-career-change.webp) - Update i18n translations for new blog content and UI improvements - Optimize code block and inline code styling with CSS variables for consistency - Refine blockquote styling with better contrast and spacing
83 lines
2.3 KiB
CSS
83 lines
2.3 KiB
CSS
/* Resume Button with Dynamic Gradient */
|
|
.resume-gradient-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.875rem 1.75rem;
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
border-radius: 9999px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
|
|
/* Dynamic gradient using theme colors */
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--ui-color-primary-600) 0%,
|
|
var(--ui-color-primary-500) 50%,
|
|
color-mix(in srgb, var(--ui-color-primary-500) 80%, #ec4899 20%) 100%
|
|
);
|
|
|
|
/* Glow effect */
|
|
box-shadow:
|
|
0 0 30px color-mix(in srgb, var(--ui-color-primary-500) 40%, transparent),
|
|
0 10px 25px color-mix(in srgb, var(--ui-color-primary-600) 30%, transparent),
|
|
0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.resume-gradient-button:hover {
|
|
transform: scale(1.05);
|
|
box-shadow:
|
|
0 0 40px color-mix(in srgb, var(--ui-color-primary-500) 60%, transparent),
|
|
0 0 60px color-mix(in srgb, var(--ui-color-primary-400) 40%, transparent),
|
|
0 15px 35px color-mix(in srgb, var(--ui-color-primary-600) 40%, transparent),
|
|
0 6px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Shine effect on hover */
|
|
.resume-gradient-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.3),
|
|
transparent
|
|
);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.resume-gradient-button:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Dark mode adjustments */
|
|
.dark .resume-gradient-button {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--ui-color-primary-500) 0%,
|
|
var(--ui-color-primary-600) 50%,
|
|
color-mix(in srgb, var(--ui-color-primary-600) 80%, #ec4899 20%) 100%
|
|
);
|
|
|
|
box-shadow:
|
|
0 0 35px color-mix(in srgb, var(--ui-color-primary-400) 50%, transparent),
|
|
0 10px 30px color-mix(in srgb, var(--ui-color-primary-500) 40%, transparent),
|
|
0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.dark .resume-gradient-button:hover {
|
|
box-shadow:
|
|
0 0 50px color-mix(in srgb, var(--ui-color-primary-400) 70%, transparent),
|
|
0 0 80px color-mix(in srgb, var(--ui-color-primary-300) 50%, transparent),
|
|
0 15px 40px color-mix(in srgb, var(--ui-color-primary-500) 50%, transparent),
|
|
0 6px 20px rgba(0, 0, 0, 0.4);
|
|
}
|