diff options
| author | Emiel Hollander <EmielH@users.noreply.github.com> | 2018-11-20 22:55:43 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-11-20 22:55:43 +0300 |
| commit | 11d6e14bfd3bad191bcc4fb2ff9057a931f956db (patch) | |
| tree | 13a6f6da59866beb65f10a7a97eaff19254b2313 /assets | |
| parent | 62302f125bbd18ad2f18f99b5fca867fd26ba3a9 (diff) | |
Improve responsive layout
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/scss/hallo/_base.scss | 6 | ||||
| -rw-r--r-- | assets/scss/hallo/_layout.scss | 17 | ||||
| -rw-r--r-- | assets/scss/hallo/_variables.scss | 7 |
3 files changed, 23 insertions, 7 deletions
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 +} |