diff --git a/assets/scss/_events.scss b/assets/scss/_events.scss index 1934ee4..d1bd613 100644 --- a/assets/scss/_events.scss +++ b/assets/scss/_events.scss @@ -2,7 +2,7 @@ div.events { margin: 0 auto; padding: 20px 30px; background: transparent; - p{ + p { color: $font_default; font-size: $font_size_default; } @@ -44,3 +44,22 @@ div.events { box-shadow: 5px 5px 4px 3px grey; } } + +@media (max-width: $mobile_view) { + div.events { + p { + font-size: $font_size_default_mobile; + } + img { + max-width: 98%; + margin: 1%; + box-shadow: 0px 0px 4px 4px rgba(128,128,128,0.6); + } + code { + font-size: $font_size_code_mobile; + } + .headline a { + font-size: $font_size_h2_mobile; + } + } +} diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss index b6ddc07..bd5a5f0 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -5,10 +5,24 @@ footer { font-size: $font_size_default; color: $font_default; text-align: center; - a { + a, a:link, a:visited { color: $font_accent_4; } a:hover { color: $font_accent_3; } } + +@media (max-width: $mobile_view) { + footer { + font-size: $font_size_default_mobile; + color: silver; + a, a:link, a:visited { + color: grey; + } + a:hover { + color: white; + } + } + +} diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 39ca4da..b30cddd 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -29,10 +29,14 @@ header { } } } -@media (max-width: $media_horizontal_breakpoint) { + +@media (max-width: $mobile_view) { header { h1 a, h1 a:hover, h1 a:link { font-size: $font_size_h1_mobile; } + nav ul { + font-size: $font_size_default_mobile; + } } } diff --git a/assets/scss/_start.scss b/assets/scss/_start.scss index 9cf8b5c..2fce2d5 100644 --- a/assets/scss/_start.scss +++ b/assets/scss/_start.scss @@ -24,6 +24,7 @@ div.start { color: $font_accent_4; font-size: $font_size_code; } + h2 { color: $font_accent_3; font-size: $font_size_h2; @@ -37,12 +38,23 @@ div.start { box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1); } -@media (max-width: $media_horizontal_breakpoint) { +@media (max-width: $mobile_view) { div.start { display: initial; + p, a{ + font-size: $font_size_default_mobile; + } + code { + font-size: $font_size_code_mobile; + } .left, .right { text-align: center; margin-top: 40px; } + img { + max-height: 5dh; + max-width: 90%; + + } } } diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 6ce8c9b..07ae056 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -8,12 +8,15 @@ $font_accent_4: rgb(247, 196, 24 ); $font_default: white; $font_size_default: 1.5em; +$font_size_default_mobile: 1.1em; $font_size_code: 1.7em; +$font_size_code_mobile: 1.3em; $font_size_h1: 3em; $font_size_h1_mobile: 1.5em; $font_size_h2: 2.3em; +$font_size_h2_mobile: 1.3em; $headline_font: 'Mochiy Pop One'; $main_font: 'Lato'; -$media_horizontal_breakpoint: 900px; +$mobile_view: 900px;