jekyll-theme-minimal-ryan 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34577329505a0cb942e351e6a4c1e874eb89a16afa32c1cc0b6952c59468cca1
-  data.tar.gz: ee1e6263415e5fcdaaf543f298e10a326e9a959b527af36f033c9fb09f16fdaf
+  metadata.gz: ecbeb258fa390117a70682a774f2419c37e541082f3eb3865d116a50b7de4cfc
+  data.tar.gz: 71014bd57ef7ec26b2aee44f2a706d202141af1259d755b7d6f0c7d5da38e23f
 SHA512:
-  metadata.gz: 55ddcec692b77804cfc1595e8576ce4d459d4acae972005ade5535f1bf4f6fc94c6b13611015efe06ce38cd59472cb2fa2f6d83839d8808257325e09f3e55df9
-  data.tar.gz: ffaa409cd64c5280b889ed7006b89e926e1f122ce8e4151bb58f680dc1d16dbdde45dea6abc1c8913674e3b59d84df9bb2d3559cec39d153131d983fdf83d715
+  metadata.gz: 7236aa82b9fc2c46bea89c2d5fb796287bfb1d52ed48b3d022ec194af050a7960f8f73d8f5b4127836ce872ce130bc787f9dbd156f333ea6444a426baea17fdd
+  data.tar.gz: 4e9bc457da1c8422b9aa30d9604562ea6ae3d468abd11f317b55e795bb74aa904e285133b6794d344a6dd17c04f5f3dfcaf7955bba72e01de114f2b900271889

data/CHANGELOG.md

@@ -1,4 +1,4 @@
-## 0.2.0 (2022-12-27)
+## 0.2.1 (2022-12-28)
 
 ### Feat
 
@@ -7,6 +7,13 @@
 
 ### Fix
 
+- add Gemfile.lock to version_files
+- mobile view for blog home posts
+- mobile view for home page
 - images not appearing in posts correctly
 - lists not expanding entire width
 - regex not removing all html tags
+
+### Refactor
+
+- convert media queries to mixins

data/_layouts/home.html

@@ -3,10 +3,10 @@ layout: default
 ---
 
 <div id="home-page">
-    <div id="left-column">
+    <div id="first-column">
         <img src="{{ site.data.theme.home.image.src }}">
     </div>
-    <div id="right-column">
+    <div id="second-column">
         <div id="content-box">
             <h1 id="home-title">{{ site.data.theme.title }}</h1>
             {{ content }}

data/_sass/minimal-ryan/_theme.scss

@@ -23,4 +23,33 @@ $biggest-font-size: 20px;
 }
 
 /* Layout */
-$header-height: 80px;
+$screen-width-extra-small: 320px;
+$screen-width-small: 600px;
+$screen-width-medium: 900px;
+$screen-width-large: 1200px;
+
+@mixin extra-small-screen {
+    @media only screen and (min-width: #{$screen-width-extra-small}) {
+        @content;
+    }
+}
+
+@mixin small-screen {
+    @media only screen and (min-width: #{$screen-width-small}) {
+        @content;
+    }
+}
+
+@mixin medium-screen {
+    @media only screen and (min-width: #{$screen-width-medium}) {
+        @content;
+    }
+}
+
+@mixin large-screen {
+    @media only screen and (min-width: #{$screen-width-large}) {
+        @content;
+    }
+}
+
+$header-height: 80px;

data/_sass/minimal-ryan/custom.scss

@@ -1,20 +1,20 @@
 .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;
     }
 }
 
@@ -30,50 +30,85 @@
 }
 
 #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;
-            }
-        }
-
-    }
 
-    #left-column {
-        display: flex;
-        justify-content: center;
-
-        width: calc(100% - #{$right-column-size});
-        overflow: hidden;
+                @include extra-small-screen {
+                    padding: 0 2%;
+                }
 
-        img {
-            object-fit: fill;
+                @include small-screen {
+                    padding: 0;
+                }
+            }
         }
+
     }
 }
 
@@ -98,6 +133,7 @@
 
         .post-content {
             flex: 7;
+            width: 100%;
 
             .post-title {
                 font-size: $big-font-size;
@@ -130,7 +166,7 @@
         width: 100%;
         line-height: 1.4em;
 
-        @media only screen and (min-width: 1200px) {
+        @include large-screen {
             width: 65%;
         }
     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-minimal-ryan
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - ryanshepps
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-27 00:00:00.000000000 Z
+date: 2022-12-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll