_sass/minimal-ryan/custom.scss in jekyll-theme-minimal-ryan-0.2.0 vs _sass/minimal-ryan/custom.scss in jekyll-theme-minimal-ryan-0.2.1

@@ -1,22 +1,22 @@
 .content-container {
     margin: auto;
 
-    @media only screen and (min-width: 320px) {
-        width: 320px;
+    @include extra-small-screen {
+        width: $screen-width-extra-small;
     }
 
-    @media only screen and (min-width: 600px) {
-        width: 600px;
+    @include small-screen {
+        width: $screen-width-small;
     }
 
-    @media only screen and (min-width: 900px) {
-        width: 900px;
+    @include medium-screen {
+        width: $screen-width-medium;
     }
 
-    @media only screen and (min-width: 1200px) {
-        width: 1200px;
+    @include large-screen {
+        width: $screen-width-large;
     }
 }
 
 .flexbox-column {
     display: flex;
@@ -28,55 +28,90 @@
     font-weight: bold;
     white-space: nowrap;
 }
 
 #home-page {
-    height: calc(100vh - #{$header-height});
+    $large-screen-second-column-width: 45%;
+    $mobile-column-height: calc(90vh - #{$header-height});
+
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
 
-    $right-column-size: 45%;
+    @include large-screen {
+        flex-direction: row;
+        height: calc(100vh - #{$header-height});
+    }
 
-    #right-column {
-        width: $right-column-size;
-        background-color: $primary-color;
+    #first-column {
+        display: flex;
+        justify-content: center;
+        overflow: hidden;
+        height: $mobile-column-height;
 
+        @include large-screen {
+            width: calc(100% - #{$large-screen-second-column-width});
+            height: 100%;
+        }
+
+        img {
+            object-fit: fill;
+        }
+    }
+
+    #second-column {
+        background-color: $primary-color;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        width: 100%;
+        height: $mobile-column-height;
 
+        @include large-screen {
+            width: $large-screen-second-column-width;
+            height: 100%;
+        }
+
         #content-box {
-            text-align: right;
+            text-align: center;
 
-            @media only screen and (min-width: 1200px) {
+            @include large-screen {
+                text-align: right;
                 padding-right: 18%;
             }
 
             #home-title {
-                font-size: 128px;
+                font-size: 16vw;
+
+                @include small-screen {
+                    font-size: 12vw;
+                }
+
+                @include medium-screen {
+                    font-size: 10vw;
+                }
+
+                @include large-screen {
+                    font-size: 8vw;
+                }
             }
 
             p {
                 font-size: $biggest-font-size;
+
+                @include extra-small-screen {
+                    padding: 0 2%;
+                }
+
+                @include small-screen {
+                    padding: 0;
+                }
             }
         }
 
     }
-
-    #left-column {
-        display: flex;
-        justify-content: center;
-
-        width: calc(100% - #{$right-column-size});
-        overflow: hidden;
-
-        img {
-            object-fit: fill;
-        }
-    }
 }
 
 #blog-page {
     min-height: calc(100vh - #{$header-height});
 
@@ -96,10 +131,11 @@
             }
         }
 
         .post-content {
             flex: 7;
+            width: 100%;
 
             .post-title {
                 font-size: $big-font-size;
                 font-weight: bold;
                 padding-bottom: 16px;
@@ -128,10 +164,10 @@
     & > * {
         padding: 8px 0;
         width: 100%;
         line-height: 1.4em;
 
-        @media only screen and (min-width: 1200px) {
+        @include large-screen {
             width: 65%;
         }
     }
 
     #post-title-img {