From d92837df07fdf3bf8c927fd523036b3d2a0b1412 Mon Sep 17 00:00:00 2001
From: Louise de Beaufort <github@ltch.fr>
Date: Sun, 14 Apr 2019 16:56:40 +0200
Subject: 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.
---
 assets/scss/hallo/_base.scss   | 11 +++++++----
 assets/scss/hallo/_layout.scss |  8 ++++++--
 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" -}}
-- 
cgit v1.2.3