diff --git a/assets/scss/_events.scss b/assets/scss/_events.scss index d1bd613..363c538 100644 --- a/assets/scss/_events.scss +++ b/assets/scss/_events.scss @@ -63,3 +63,22 @@ div.events { } } } + +@media (max-width: $tiny_view) { + div.events { + p { + font-size: $font_size_default_tiny; + } + .headline a { + font-size: $font_size_h2_tiny; + } + } +} + +@media (max-width: $pico_view) { + div.events { + .headline a { + font-size: $font_size_h2_pico; + } + } +} diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss index bd5a5f0..57be65c 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -24,5 +24,10 @@ footer { color: white; } } - +} + +@media (max-width: $tiny_view) { + footer { + font-size: $font_size_default_pico; + } } diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index b30cddd..1b8b6f0 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -40,3 +40,22 @@ header { } } } + +@media (max-width: $tiny_view) { + header { + h1 a, h1 a:hover, h1 a:link { + font-size: $font_size_h1_tiny; + } + nav ul { + font-size: $font_size_default_tiny; + } + } +} + +@media (max-width: $pico_view) { + header { + h1 a, h1 a:hover, h1 a:link { + font-size: $font_size_h1_pico; + } + } +} diff --git a/assets/scss/_start.scss b/assets/scss/_start.scss index 2fce2d5..b681d02 100644 --- a/assets/scss/_start.scss +++ b/assets/scss/_start.scss @@ -58,3 +58,11 @@ div.start { } } } + +@media (max-width: $tiny_view) { + div.start { + p, a{ + font-size: $font_size_default_tiny; + } + } +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 07ae056..7d142e0 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -9,14 +9,22 @@ $font_default: white; $font_size_default: 1.5em; $font_size_default_mobile: 1.1em; +$font_size_default_tiny: 1em; +$font_size_default_pico: 0.8em; $font_size_code: 1.7em; $font_size_code_mobile: 1.3em; $font_size_h1: 3em; $font_size_h1_mobile: 1.5em; +$font_size_h1_tiny: 1em; +$font_size_h1_pico: 0.7em; $font_size_h2: 2.3em; $font_size_h2_mobile: 1.3em; +$font_size_h2_tiny: 1em; +$font_size_h2_pico: 0.75em; $headline_font: 'Mochiy Pop One'; $main_font: 'Lato'; $mobile_view: 900px; +$tiny_view: 450px; +$pico_view: 320px;