michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-26 19:15:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(style): text_color_light = true only working in Safari

Browse source 
The .home-section.dark` selector blocks were not being applied by Chrome
and Firefox due to them not supporting CSS Selectors Level 4.

Selectors Level 4 allows the :not() pseudo-class to accept multiple
selectors. See https://stackoverflow.com/a/35993791

However, currently, it is only supported by Safari:
https://caniuse.com/#feat=css-not-sel-list
This commit is contained in:
George Cushen 2019-04-10 19:26:37 +01:00
commit 01114416aa
1 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
layouts/partials/css/academic.css
View file

@ -492,16 +492,24 @@ a[data-fancybox] img {
.home-section.dark h1,
.home-section.dark h2,
.home-section.dark h3,
.home-section.dark a:not(.btn):not(.alert a) {
.home-section.dark a:not(.btn) {
color: rgb(248, 248, 242);
}
/* Underline links in dark sections to separate them from text */
.home-section.dark a:not(.btn):not(.hero-cta-alt):not(.alert a) {
.home-section.dark a:not(.btn):not(.hero-cta-alt) {
text-decoration: underline;
}
/* Revert Alert Box Link style (.home-section.dark style above should not be applied to it) */
.home-section.dark .alert a {
color: inherit !important;
text-decoration: inherit !important;
}
/* Big underline style for links in dark sections */
/* Disabled as it's an experimental style that requires CSS NOT Selector Level 4 (only in Safari) */
/*
.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a) {
text-decoration: none;
position: relative;
@ -514,7 +522,7 @@ a[data-fancybox] img {
right: 0;
position: absolute;
top: 100%;
}
}*/
/* Create the parallax scrolling effect */
.parallax {
@ -598,7 +606,7 @@ a[data-fancybox] img {
.wg-hero.dark .hero-title,
.wg-hero.dark .hero-lead,
.wg-hero.dark .hero-cta-alt,
.wg-hero.dark .hero-note {
.wg-hero.dark .hero-note > * {
color: #fff;
/*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/ /* Uncomment to standout on complicated backgrounds. */
}