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.

2 files changed, 13 insertions, 6 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;
     }
 }