dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

use native CSS vars from exposer

This commit is contained in:
Sven Kraus 2020-07-29 13:31:29 +02:00
parent 15815efe05
commit 3535536444
2 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/theme/template/exposer.scss
View File

@ -21,6 +21,7 @@
--heading4-size: #{$heading4Size}; --heading4-size: #{$heading4Size};
--code-font: #{$codeFont}; --code-font: #{$codeFont};
--link-color: #{$linkColor}; --link-color: #{$linkColor};
--link-color-dark: #{darken($linkColor , 15% )};
--link-color-hover: #{$linkColorHover}; --link-color-hover: #{$linkColorHover};
--selection-background-color: #{$selectionBackgroundColor}; --selection-background-color: #{$selectionBackgroundColor};
--selection-color: #{$selectionColor}; --selection-color: #{$selectionColor};

72
css/theme/template/theme.scss
View File

@ -8,25 +8,25 @@
.reveal-viewport { .reveal-viewport {
@include bodyBackground(); @include bodyBackground();
background-color: $backgroundColor; background-color: var(--background-color);
} }
.reveal { .reveal {
font-family: $mainFont; font-family: var(--main-font);
font-size: $mainFontSize; font-size: var(--main-font-size);
font-weight: normal; font-weight: normal;
color: $mainColor; color: var(--main-color);
} }
.reveal ::selection { .reveal ::selection {
color: $selectionColor; color: var(--selection-color);
background: $selectionBackgroundColor; background: var(--selection-background-color);
text-shadow: none; text-shadow: none;
} }
.reveal ::-moz-selection { .reveal ::-moz-selection {
color: $selectionColor; color: var(--selection-color);
background: $selectionBackgroundColor; background: var(--selection-background-color);
text-shadow: none; text-shadow: none;
} }
@ -46,27 +46,27 @@
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: $headingMargin; margin: var(--heading-margin);
color: $headingColor; color: var(--heading-color);
font-family: $headingFont; font-family: var(--heading-font);
font-weight: $headingFontWeight; font-weight: var(--heading-font-weight);
line-height: $headingLineHeight; line-height: var(--heading-line-height);
letter-spacing: $headingLetterSpacing; letter-spacing: var(--heading-letter-spacing);
text-transform: $headingTextTransform; text-transform: var(--heading-text-transform);
text-shadow: $headingTextShadow; text-shadow: var(--heading-text-shadow);
word-wrap: break-word; word-wrap: break-word;
} }
.reveal h1 {font-size: $heading1Size; } .reveal h1 {font-size: var(--heading1-size); }
.reveal h2 {font-size: $heading2Size; } .reveal h2 {font-size: var(--heading2-size); }
.reveal h3 {font-size: $heading3Size; } .reveal h3 {font-size: var(--heading3-size); }
.reveal h4 {font-size: $heading4Size; } .reveal h4 {font-size: var(--heading4-size); }
.reveal h1 { .reveal h1 {
text-shadow: $heading1TextShadow; text-shadow: var(--heading1-text-shadow);
} }
@ -75,7 +75,7 @@
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: $blockMargin 0; margin: var(--block-margin) 0;
line-height: 1.3; line-height: 1.3;
} }
@ -140,7 +140,7 @@
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: $blockMargin auto; margin: var(--block-margin) auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
@ -160,11 +160,11 @@
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
margin: $blockMargin auto; margin: var(--block-margin) auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: $codeFont; font-family: var(--code-font);
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
@ -173,7 +173,7 @@
} }
.reveal code { .reveal code {
font-family: $codeFont; font-family: var(--code-font);
text-transform: none; text-transform: none;
} }
@ -238,7 +238,7 @@
} }
.reveal img { .reveal img {
margin: $blockMargin 0; margin: var(--block-margin) 0;
} }
@ -247,19 +247,21 @@
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: $linkColor; color: var(--link-color);
text-decoration: none; text-decoration: none;
transition: color .15s ease; transition: color .15s ease;
} }
.reveal a:hover { .reveal a:hover {
color: $linkColorHover; color: var(--link-color-hover);
text-shadow: none; text-shadow: none;
border: none; border: none;
} }
.reveal .roll span:after { .reveal .roll span:after {
color: #fff; color: #fff;
background: darken( $linkColor, 15% ); // background: darken( var(--link-color), 15% );
background: var(--link-color-dark);
} }
@ -268,7 +270,7 @@
*********************************************/ *********************************************/
.reveal .r-frame { .reveal .r-frame {
border: 4px solid $mainColor; border: 4px solid var(--main-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
} }
@ -277,7 +279,7 @@
} }
.reveal a:hover .r-frame { .reveal a:hover .r-frame {
border-color: $linkColor; border-color: var(--link-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
} }
@ -287,7 +289,7 @@
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
color: $linkColor; color: var(--link-color);
} }
@ -297,7 +299,7 @@
.reveal .progress { .reveal .progress {
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
color: $linkColor; color: var(--link-color);
} }
/********************************************* /*********************************************
@ -305,6 +307,6 @@
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: $backgroundColor; background-color: var(--background-color);
} }
} }