diff options
author | Louise de Beaufort <github@ltch.fr> | 2019-04-14 17:56:40 +0300 |
---|---|---|
committer | Emiel Hollander <EmielH@users.noreply.github.com> | 2019-04-14 17:56:40 +0300 |
commit | d92837df07fdf3bf8c927fd523036b3d2a0b1412 (patch) | |
tree | 7c06ba45671528c2596e721828c95193ee50f620 | |
parent | f94296cbce8626fc781e1a13e795f5458ce61189 (diff) |
Improve mobile view (#12)
The portrait and main title were misaligned on some mobile screens. They are now being automatically resized based on the viewport width.
-rw-r--r-- | assets/scss/hallo/_base.scss | 11 | ||||
-rw-r--r-- | assets/scss/hallo/_layout.scss | 8 | ||||
-rw-r--r-- | layouts/index.html | 2 |
3 files changed, 14 insertions, 7 deletions
diff --git a/assets/scss/hallo/_base.scss b/assets/scss/hallo/_base.scss index 99e2c92..a8a6e21 100644 --- a/assets/scss/hallo/_base.scss +++ b/assets/scss/hallo/_base.scss @@ -33,8 +33,8 @@ h2 { font-weight: normal; } @media screen and (max-width: $break-large) { - h1 { - font-size: 6rem; + h1 { + font-size: 15vw; } h2 { @@ -43,9 +43,12 @@ h2 { } img.portrait { + box-sizing: border-box; border-radius: 50%; border: 10px solid $color-foreground; margin: 2em 3em; - width: 300px; - height: 300px; + width: 100%; + height: auto; + max-width: 300px; + max-height: 300px; } diff --git a/assets/scss/hallo/_layout.scss b/assets/scss/hallo/_layout.scss index 8164857..898974a 100644 --- a/assets/scss/hallo/_layout.scss +++ b/assets/scss/hallo/_layout.scss @@ -33,7 +33,7 @@ main { } @media screen and (max-width: $break-large) { - display: block; + flex-direction: column; margin-top: 0; .column.left { @@ -43,6 +43,10 @@ main { .column.right h1 { margin-top: 0; } + + img.portrait { + margin: 0; + } } } @@ -52,6 +56,6 @@ footer { font-size: 0.75rem; @media screen and (max-width: $break-large) { - display: block; + flex-direction: column; } } diff --git a/layouts/index.html b/layouts/index.html index 45bae03..3858c27 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -2,7 +2,7 @@ <main> <div class="column left"> - <img src="images/portrait.jpg" width="300" height="300" class="portrait" alt="Portrait" /> + <img src="images/portrait.jpg" class="portrait" alt="Portrait" /> </div> <div class="column right"> {{- with .Param "greeting" -}} |