From e333c92caf3c5dc275ea78982a218c2dfb8807ff Mon Sep 17 00:00:00 2001 From: L3D Date: Sun, 16 Jan 2022 19:15:13 +0100 Subject: [PATCH] Add layout for large screens --- assets/scss/_events.scss | 20 +++++++++++++++++++- assets/scss/_footer.scss | 6 ++++++ assets/scss/_header.scss | 23 +++++++++++++++++++++-- assets/scss/_page.scss | 24 ++++++++++++++++++++++++ assets/scss/_start.scss | 34 ++++++++++++++++++++++++++-------- assets/scss/_variables.scss | 10 +++++++++- 6 files changed, 105 insertions(+), 12 deletions(-) diff --git a/assets/scss/_events.scss b/assets/scss/_events.scss index 363c538..9d6d26f 100644 --- a/assets/scss/_events.scss +++ b/assets/scss/_events.scss @@ -45,6 +45,24 @@ div.events { } } +@media (min-width: $large_view) { + div.events { + max-width: $large_min_width; + p { + font-size: $font_size_default_large; + } + .headline a { + font-size: $font_size_h2_large; + } + code { + font-size: $font_size_code_large; + } + img:hover { + box-shadow: 8px 8px 6px 5px silver; + } + } +} + @media (max-width: $mobile_view) { div.events { p { @@ -56,7 +74,7 @@ div.events { box-shadow: 0px 0px 4px 4px rgba(128,128,128,0.6); } code { - font-size: $font_size_code_mobile; + 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 57be65c..cd46629 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -13,6 +13,12 @@ footer { } } +@media (min-width: $large_view) { + footer { + font-size: $font_size_default_large; + } +} + @media (max-width: $mobile_view) { footer { font-size: $font_size_default_mobile; diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 1b8b6f0..870e210 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -3,13 +3,13 @@ header { background: $background_accent_1; padding: 20px 30px; box-shadow: 5px 5px 5px 10px $background_accent_1; - h1 a, h1 a:hover, h1 a:link { + h1 a, h1 a:hover, h1 a:link, h1 a:visited { font-family: $headline_font, sans-serif; color: $font_accent_1; margin: 0; font-weight: bold; - text-decoration: none; font-size: $font_size_h1; + text-decoration: none; } nav ul { font-size: $font_size_default; @@ -18,9 +18,14 @@ header { padding: 0; a, a:link, a:visited { color: $font_accent_2; + text-decoration: none; + background: $shadow_accent_1; + padding: 6px 18px; + border-radius: 5px; } a:hover, a:active { color: $font_accent_3; + box-shadow: 0px 0px 1px 1px $shadow_accent_1; } li { display: inline; @@ -30,6 +35,20 @@ header { } } +@media (min-width: $large_view) { + header { + max-width: $large_min_width; + margin: auto; + box-shadow: 0px -10000px 0px 10000px $background_accent_1; + h1 a, h1 a:hover, h1 a:link { + font-size: $font_size_h1_large; + } + nav ul { + font-size: $font_size_default_large; + } + } +} + @media (max-width: $mobile_view) { header { h1 a, h1 a:hover, h1 a:link { diff --git a/assets/scss/_page.scss b/assets/scss/_page.scss index b233292..967cb28 100644 --- a/assets/scss/_page.scss +++ b/assets/scss/_page.scss @@ -27,6 +27,24 @@ div.page { } } +@media (min-width: $large_view) { + div.events { + max-width: $large_min_width; + p { + font-size: $font_size_default_large; + } + code { + font-size: $font_size_code_large; + } + h1 { + font-size: $font_size_h1_large; + } + h2 { + font-size: $font_size_h2_large; + } + } +} + @media (max-width: $mobile_view) { div.page { p, a{ @@ -39,6 +57,12 @@ div.page { max-height: 5dh; max-width: 90%; } + h1 { + font-size: $font_size_h1_mobile; + } + h2 { + font-size: $font_size_h2_mobile; + } } } diff --git a/assets/scss/_start.scss b/assets/scss/_start.scss index b681d02..595267a 100644 --- a/assets/scss/_start.scss +++ b/assets/scss/_start.scss @@ -6,6 +6,9 @@ div.start { .left { flex: 45%; text-align: center; + background: rgba(128,128,128,0.15); + padding: 12px; + box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1); } .right { flex: 55%; @@ -15,7 +18,7 @@ div.start { max-width: 100%; } - p, a{ + p, a { color: $font_default; font-size: $font_size_default; } @@ -32,16 +35,31 @@ div.start { } } -.left { - background: rgba(128,128,128,0.15); - padding: 12px; - box-shadow: 0px 0px 2px 8px rgba(128,128,128,0.1); +@media (min-width: $large_view) { + div.start { + margin: auto; + max-width: $large_min_width; + .right, .left { + flex: 50%; + } + p, a { + font-size: $font_size_default_large; + } + code { + font-size: $font_size_code_large; + } + + h2 { + font-size: $font_size_h2_large; + text-shadow: 0px 0px 4px black; + } + } } @media (max-width: $mobile_view) { div.start { display: initial; - p, a{ + p, a { font-size: $font_size_default_mobile; } code { @@ -61,8 +79,8 @@ div.start { @media (max-width: $tiny_view) { div.start { - p, a{ - font-size: $font_size_default_tiny; + p, a { + font-size: $font_size_default_tiny; } } } diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 7d142e0..de8265b 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -4,20 +4,25 @@ $background_accent_2: black; $font_accent_1: red; $font_accent_2: maroon; $font_accent_3: orangered; -$font_accent_4: rgb(247, 196, 24 ); +$font_accent_4: rgb(247, 196, 24); $font_default: white; +$shadow_accent_1: rgba(255, 190, 14, 0.5); $font_size_default: 1.5em; +$font_size_default_large: 2.2em; $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_large: 2.6em; $font_size_code_mobile: 1.3em; $font_size_h1: 3em; +$font_size_h1_large: 5em; $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_large: 3.2em; $font_size_h2_mobile: 1.3em; $font_size_h2_tiny: 1em; $font_size_h2_pico: 0.75em; @@ -25,6 +30,9 @@ $font_size_h2_pico: 0.75em; $headline_font: 'Mochiy Pop One'; $main_font: 'Lato'; +$large_min_width: 1800px; + +$large_view: 1700px; $mobile_view: 900px; $tiny_view: 450px; $pico_view: 320px;