From 11d6e14bfd3bad191bcc4fb2ff9057a931f956db Mon Sep 17 00:00:00 2001 From: Emiel Hollander Date: Tue, 20 Nov 2018 20:55:43 +0100 Subject: Improve responsive layout --- assets/scss/hallo/_base.scss | 6 +- assets/scss/hallo/_layout.scss | 17 ++++++ assets/scss/hallo/_variables.scss | 7 ++- ...o.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content | 2 +- ...o.scss_5ad6f408b0e3e473c748aac88af0ea18.content | 68 ---------------------- ...allo.scss_5ad6f408b0e3e473c748aac88af0ea18.json | 1 - 6 files changed, 24 insertions(+), 77 deletions(-) delete mode 100644 resources/_gen/assets/scss/scss/hallo.scss_5ad6f408b0e3e473c748aac88af0ea18.content delete mode 100644 resources/_gen/assets/scss/scss/hallo.scss_5ad6f408b0e3e473c748aac88af0ea18.json diff --git a/assets/scss/hallo/_base.scss b/assets/scss/hallo/_base.scss index 6dea8c5..2b775fa 100644 --- a/assets/scss/hallo/_base.scss +++ b/assets/scss/hallo/_base.scss @@ -9,10 +9,6 @@ html { font-family: $sans-serif; font-size: 16px; overflow-y: auto; - - @media (min-width: 600px) { - font-size: 18px; - } } body { @@ -43,4 +39,4 @@ img.portrait { margin: 2em 3em; width: 300px; height: 300px; -} \ No newline at end of file +} diff --git a/assets/scss/hallo/_layout.scss b/assets/scss/hallo/_layout.scss index cb28c1c..8164857 100644 --- a/assets/scss/hallo/_layout.scss +++ b/assets/scss/hallo/_layout.scss @@ -31,10 +31,27 @@ main { } } } + + @media screen and (max-width: $break-large) { + display: block; + margin-top: 0; + + .column.left { + text-align: center; + } + + .column.right h1 { + margin-top: 0; + } + } } footer { display: flex; margin-top: 3rem; font-size: 0.75rem; + + @media screen and (max-width: $break-large) { + display: block; + } } diff --git a/assets/scss/hallo/_variables.scss b/assets/scss/hallo/_variables.scss index e7d88c9..e540bd3 100644 --- a/assets/scss/hallo/_variables.scss +++ b/assets/scss/hallo/_variables.scss @@ -1,5 +1,5 @@ // Colours -$background-1: #6fcdbd; // #48e5c2; +$background-1: #6fcdbd; $background-2: #81c6ff; $default-light: #fff; $default-dark: #333; @@ -7,8 +7,11 @@ $default-dark: #333; // Fonts $sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; +// Responsive breaks +$break-large: 980px; + @mixin transition($args...) { -webkit-transition: $args; -moz-transition: $args; transition: $args; -} \ No newline at end of file +} diff --git a/resources/_gen/assets/scss/scss/hallo.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content b/resources/_gen/assets/scss/scss/hallo.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content index aab9c38..07238d3 100644 --- a/resources/_gen/assets/scss/scss/hallo.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content +++ b/resources/_gen/assets/scss/scss/hallo.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content @@ -1 +1 @@ -html,body{color:#fff;margin:1rem;padding:0}html{font-family:Montserrat,"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;overflow-y:auto}@media (min-width: 600px){html{font-size:18px}}body{background-color:#6fcdbd}a{-webkit-transition:color 0.2s ease-out;-moz-transition:color 0.2s ease-out;transition:color 0.2s ease-out;color:#fff}a:hover{color:#333}h1{font-size:9rem}h2{font-size:3rem;font-weight:normal}img.portrait{border-radius:50%;border:10px solid #fff;margin:2em 3em;width:300px;height:300px}.column{flex:1}main{display:flex;margin-top:20vh}main .column.left{text-align:end}main .column.right h1{margin-left:-10px;margin-bottom:0.4em}main .column.right h2{margin-left:-4px;margin-top:0}main .column.right .links{margin-top:2.5rem;font-size:1.5rem}main .column.right .links a{margin-right:0.5rem;text-decoration:none}footer{display:flex;margin-top:3rem;font-size:0.75rem} +html,body{color:#fff;margin:1rem;padding:0}html{font-family:Montserrat,"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;overflow-y:auto}body{background-color:#6fcdbd}a{-webkit-transition:color 0.2s ease-out;-moz-transition:color 0.2s ease-out;transition:color 0.2s ease-out;color:#fff}a:hover{color:#333}h1{font-size:9rem}h2{font-size:3rem;font-weight:normal}img.portrait{border-radius:50%;border:10px solid #fff;margin:2em 3em;width:300px;height:300px}.column{flex:1}main{display:flex;margin-top:20vh}main .column.left{text-align:end}main .column.right h1{margin-left:-10px;margin-bottom:0.4em}main .column.right h2{margin-left:-4px;margin-top:0}main .column.right .links{margin-top:2.5rem;font-size:1.5rem}main .column.right .links a{margin-right:0.5rem;text-decoration:none}@media screen and (max-width: 980px){main{display:block;margin-top:0}main .column.left{text-align:center}main .column.right h1{margin-top:0}}footer{display:flex;margin-top:3rem;font-size:0.75rem}@media screen and (max-width: 980px){footer{display:block}} diff --git a/resources/_gen/assets/scss/scss/hallo.scss_5ad6f408b0e3e473c748aac88af0ea18.content b/resources/_gen/assets/scss/scss/hallo.scss_5ad6f408b0e3e473c748aac88af0ea18.content deleted file mode 100644 index 350a7df..0000000 --- a/resources/_gen/assets/scss/scss/hallo.scss_5ad6f408b0e3e473c748aac88af0ea18.content +++ /dev/null @@ -1,68 +0,0 @@ -html, -body { - color: #fff; - margin: 1rem; - padding: 0; } - -html { - font-family: Montserrat, "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; - font-size: 16px; - overflow-y: auto; } - @media (min-width: 600px) { - html { - font-size: 18px; } } - -body { - background-color: #6fcdbd; } - -a { - -webkit-transition: color 0.2s ease-out; - -moz-transition: color 0.2s ease-out; - transition: color 0.2s ease-out; - color: #fff; } - a:hover { - color: #333; } - -h1 { - font-size: 9rem; } - -h2 { - font-size: 3rem; - font-weight: normal; } - -img.portrait { - border-radius: 50%; - border: 10px solid #fff; - margin: 2em 3em; - width: 300px; - height: 300px; } - -.column { - flex: 1; } - -main { - display: flex; - margin-top: 20vh; } - main .column.left { - text-align: end; } - main .column.right h1 { - margin-left: -10px; - /* Correction for margin of leftmost character. */ - margin-bottom: 0.4em; } - main .column.right h2 { - margin-left: -4px; - /* Correction for margin of leftmost character. */ - margin-top: 0; } - main .column.right .links { - margin-top: 2.5rem; - font-size: 1.5rem; } - main .column.right .links a { - margin-right: 0.5rem; - text-decoration: none; } - -footer { - display: flex; - margin-top: 3rem; - font-size: 0.75rem; } - -/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/hallo.scss_5ad6f408b0e3e473c748aac88af0ea18.json b/resources/_gen/assets/scss/scss/hallo.scss_5ad6f408b0e3e473c748aac88af0ea18.json deleted file mode 100644 index 28c014b..0000000 --- a/resources/_gen/assets/scss/scss/hallo.scss_5ad6f408b0e3e473c748aac88af0ea18.json +++ /dev/null @@ -1 +0,0 @@ -{"Target":"css/style.css","MediaType":"text/css","Data":{}} \ No newline at end of file -- cgit v1.2.3