jekyll-theme-minimal-ryan 0.1.2 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d8224352ef583e984238aa2a634b4ff45d7e9490cf6ab0e546890145ccfbed15
-  data.tar.gz: '09233fb1c6acc79761f1805b7e9e8687ef07ea7bdb7d483083002f2d5ee08d64'
+  metadata.gz: ecbeb258fa390117a70682a774f2419c37e541082f3eb3865d116a50b7de4cfc
+  data.tar.gz: 71014bd57ef7ec26b2aee44f2a706d202141af1259d755b7d6f0c7d5da38e23f
 SHA512:
-  metadata.gz: b73c81b8bdeb88dd66489ffdb34ce59309958455adbdc89d5fac04d8704fc4984eade9f27b8b6b8d143cf8f1a839202f64ffb56ae3454cba18eaa00cf0fde776
-  data.tar.gz: 06d6724e37d88dc7a961079f637be85cc39aff11fae9c091edcdcf7ef86bd64422d382666c847d57bf706f25d89dedc96b9c54e64cde5b1327acf35d4f52e9a0
+  metadata.gz: 7236aa82b9fc2c46bea89c2d5fb796287bfb1d52ed48b3d022ec194af050a7960f8f73d8f5b4127836ce872ce130bc787f9dbd156f333ea6444a426baea17fdd
+  data.tar.gz: 4e9bc457da1c8422b9aa30d9604562ea6ae3d468abd11f317b55e795bb74aa904e285133b6794d344a6dd17c04f5f3dfcaf7955bba72e01de114f2b900271889

data/CHANGELOG.md

@@ -0,0 +1,19 @@
+## 0.2.1 (2022-12-28)
+
+### Feat
+
+- add post cheat sheet
+- initialize theme
+
+### 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/blog.html

@@ -13,7 +13,7 @@ layout: default
             <div class="post-content">
                 <p class="post-title">{{ post.title | escape }}</p>
                 <p class="post-blurb">
-                    {{ post.content | escape | regex_replace: '&lt;[^&gt;]*&gt;', '' }}
+                    {{ post.content | escape | regex_replace: '&lt;(?!&gt;).*?&gt;', '' }}
                 </p>
             </div>
         </a>

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/_layouts/post.html

@@ -4,7 +4,7 @@ layout: default
 
 <div id="post-page" class="content-container">
     {%- if page.image -%}
-        <img src="{{ page.image }}" />
+        <img id="post-title-img" src="{{ page.image }}" />
     {%- endif -%}
 
     <h1>{{ page.title }}</h1>

data/_sass/minimal-ryan/_base.scss

@@ -43,6 +43,14 @@ header {
     }
 }
 
+ul, li, ol {
+    list-style-position: inside;
+}
+
+img {
+    object-fit: contain;
+}
+
 footer {
     display: flex;
     justify-content: space-between;

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;
@@ -125,19 +161,23 @@
     flex-direction: column;
     align-items: center;
 
-    * {
+    & > * {
         padding: 8px 0;
         width: 100%;
         line-height: 1.4em;
 
-        @media only screen and (min-width: 1200px) {
+        @include large-screen {
             width: 65%;
         }
     }
 
-    img {
+    #post-title-img {
         height: 300px;
         width: 100%;
         object-fit: cover;
     }
+
+    p img {
+        width: 100%;
+    }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-minimal-ryan
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.1
 platform: ruby
 authors:
 - ryanshepps
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-24 00:00:00.000000000 Z
+date: 2022-12-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -45,6 +45,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.md
 - LICENSE
 - README.md
 - _data/theme.yml