365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance light mode styles for buttons and CTAs

Browse Source 
- Added text-shadow to primary buttons for improved visibility in light mode.
- Updated secondary button styles with specific light mode enhancements, including color, border, and background adjustments.
- Introduced light mode fixes for secondary CTAs, ensuring better visibility and user experience.
- Refined styles for CTA buttons to enhance their appearance and interaction in light mode.
This commit is contained in:
becarta
2025-07-12 00:57:10 +02:00
parent 2f65102da4
commit 4fbfcc5855
4 changed files with 49 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/[lang]/aboutme.astro
View File

@@ -288,6 +288,21 @@ const metadata = {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Light mode fixes for secondary CTA button */
html:not(.dark) .cta-secondary-enhanced {
background: rgba(255, 255, 255, 0.95) !important;
color: rgba(15, 23, 42, 1) !important;
border-color: rgba(102, 126, 234, 0.6) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) .cta-secondary-enhanced:hover {
background: rgba(102, 126, 234, 0.1) !important;
color: rgba(15, 23, 42, 1) !important;
border-color: rgba(102, 126, 234, 0.8) !important;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2) !important;
}
/* Section spacing - key fix for touching sections */
.content-section {
margin: 4rem 0;

17
src/pages/[lang]/index.astro
View File

@@ -302,24 +302,31 @@ const metadata = {
text-transform: uppercase;
letter-spacing: 1px;
margin-left: 2rem;
/* Override any conflicting base button styles */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.cta-secondary-explosive:hover {
background: rgba(6, 255, 165, 0.15);
transform: translateY(-2px) scale(1.03);
border-color: rgba(6, 255, 165, 0.6);
color: white;
}
/* Light mode CTA fixes */
/* Light mode CTA fixes - enhanced for better visibility */
html:not(.dark) .cta-secondary-explosive {
background: rgba(255, 255, 255, 0.9) !important;
color: rgba(15, 23, 42, 0.9) !important;
border-color: rgba(6, 255, 165, 0.6) !important;
background: rgba(255, 255, 255, 0.95) !important;
color: rgba(15, 23, 42, 1) !important;
border-color: rgba(6, 255, 165, 0.7) !important;
text-shadow: none !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) .cta-secondary-explosive:hover {
background: rgba(6, 255, 165, 0.1) !important;
background: rgba(6, 255, 165, 0.15) !important;
color: rgba(15, 23, 42, 1) !important;
border-color: rgba(6, 255, 165, 0.8) !important;
box-shadow: 0 6px 20px rgba(6, 255, 165, 0.2) !important;
}
/* Light mode content card fixes */