DevFW-CICD/website-and-documentation
23
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Improve text visibility on homepage sections

Browse source 
- Fix white text visibility in primary/magenta sections with text-shadow
- Prevent white background on hover in lead sections
- Ensure text stays white in dark feature card sections on hover
- Add proper hover states for dark sections with readable text
This commit is contained in:
Stephan Lo 2025-11-07 14:56:32 +01:00
parent 91a8630507
commit 14d7d9d588
1 changed files with 64 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

64
assets/scss/_variables_project.scss
View file

@ -406,6 +406,34 @@ table {
} }
} }
// Lead blocks with primary color background
.td-block--primary,
section[class*="bg-primary"],
section[class*="color-primary"] {
background-color: var(--color-primary) !important;
* {
color: #FFFFFF !important;
}
h1, h2, h3, h4, h5, h6, p, a, .lead {
color: #FFFFFF !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
// Prevent white background on hover
&:hover,
*:hover {
background-color: transparent !important;
color: #FFFFFF !important;
}
a:hover {
color: #FFFFFF !important;
text-decoration: underline;
}
}
.td-box { .td-box {
background-color: var(--color-card); background-color: var(--color-card);
border: 1px solid var(--nav-border-color); border: 1px solid var(--nav-border-color);
@ -458,3 +486,39 @@ table {
} }
} }
// Feature blocks on homepage (blocks/feature)
.td-box--dark,
.td-box--colored,
section[class*="bg-dark"] .td-box,
section[class*="color-dark"] .td-box {
.h2, .h3, .h4, .h5, h2, h3, h4, h5, p, a {
color: #FFFFFF !important;
}
&:hover {
background-color: rgba(0, 0, 0, 0.8) !important;
.h2, .h3, .h4, .h5, h2, h3, h4, h5, p, a {
color: #FFFFFF !important;
}
}
}
// Ensure text stays visible in dark sections
section[class*="bg-dark"],
section[class*="color-dark"] {
* {
color: #FFFFFF !important;
}
.td-box, .card {
&:hover {
background-color: rgba(0, 0, 0, 0.8) !important;
* {
color: #FFFFFF !important;
}
}
}
}