more maintainable SCSS code

This commit is contained in:
Lucien Cartier-Tilet 2020-05-02 19:23:37 +02:00
parent b012489340
commit 0ad05ea1c4
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA

View File

@ -15,6 +15,10 @@
src: url("../fonts/HelveticaNeue.ttf"); src: url("../fonts/HelveticaNeue.ttf");
} }
/* Variables *****************************************************************/
$switch-title-size: "only screen and (max-width: 600px)";
// Themes ///////////////////////////////////////////////////////////////////// // Themes /////////////////////////////////////////////////////////////////////
$dark: rgba( 52, 73, 94, 1); $dark: rgba( 52, 73, 94, 1);
@ -283,6 +287,9 @@ header {
.title { .title {
font-size: 5em; font-size: 5em;
margin: 0; margin: 0;
@media #{$switch-title-size} {
font-size: 3em;
}
} }
.subtitle { .subtitle {
@ -431,7 +438,7 @@ h1, h2, h3, h4, h5, h6 {
h2 { h2 {
font-size: 2.5em; font-size: 2.5em;
@media only screen and (max-width: 600px) { @media #{$switch-title-size} {
font-size: 1.75em; font-size: 1.75em;
} }
} }
@ -439,7 +446,7 @@ h2 {
h3 { h3 {
font-size: 2em; font-size: 2em;
@media only screen and (max-width: 600px) { @media #{$switch-title-size} {
font-size: 1.5em; font-size: 1.5em;
} }
} }
@ -447,7 +454,7 @@ h3 {
h4 { h4 {
font-size: 1.5em; font-size: 1.5em;
@media only screen and (max-width: 600px) { @media #{$switch-title-size} {
font-size: 1.3em; font-size: 1.3em;
} }
} }
@ -455,7 +462,7 @@ h4 {
h5 { h5 {
font-size: 1.25em; font-size: 1.25em;
@media only screen and (max-width: 600px) { @media #{$switch-title-size} {
font-size: 1.2em; font-size: 1.2em;
} }
} }