jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

all themes now have contrasting text colors based on slide bg

Browse source
This commit is contained in:
Hakim El Hattab 2020-06-05 10:02:49 +02:00
parent ac79c7cd8b
commit 166af89353
18 changed files with 70 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
css/theme/source/beige.scss
View file

@ -32,6 +32,8 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------

7
css/theme/source/black.scss
View file

@ -37,11 +37,8 @@ $heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
section.has-light-background {
&, h1, h2, h3, h4, h5, h6 {
color: #222;
}
}
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------

9
css/theme/source/blood.scss
View file

@ -46,6 +46,9 @@ $linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: $blood;
$selectionColor: #fff;
// Change text colors against dark slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "../template/theme";
@ -58,6 +61,12 @@ $selectionColor: #fff;
text-shadow: 1px 1px $coal;
}
section.has-light-background {
p, h1, h2, h3, h4 {
text-shadow: none;
}
}
.reveal h1,
.reveal h2,
.reveal h3,

2
css/theme/source/league.scss
View file

@ -27,6 +27,8 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
}
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------

3
css/theme/source/moon.scss
View file

@ -50,7 +50,8 @@ $linkColor: $blue;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: $magenta;
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "../template/theme";

3
css/theme/source/night.scss
View file

@ -28,6 +28,9 @@ $headingLetterSpacing: -0.03em;
$headingTextTransform: none;
$selectionBackgroundColor: #e7ad52;
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "../template/theme";

3
css/theme/source/serif.scss
View file

@ -29,6 +29,9 @@ $selectionBackgroundColor: #26351C;
line-height: 1.3em;
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------
@import "../template/theme";

7
css/theme/source/simple.scss
View file

@ -31,11 +31,8 @@ $linkColor: #00008B;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
section.has-dark-background {
&, h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------

3
css/theme/source/sky.scss
View file

@ -39,6 +39,9 @@ $selectionBackgroundColor: #134674;
@include radial-gradient( #add9e4, #f7fbfc );
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------

7
css/theme/source/white.scss
View file

@ -37,11 +37,8 @@ $heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
section.has-dark-background {
&, h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------

16
css/theme/template/mixins.scss
View file

@ -26,4 +26,20 @@
background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
}
@mixin light-bg-text-color( $color ) {
section.has-light-background {
&, h1, h2, h3, h4, h5, h6 {
color: $color;
}
}
}
@mixin dark-bg-text-color( $color ) {
section.has-dark-background {
&, h1, h2, h3, h4, h5, h6 {
color: $color;
}
}
}