jekyll-theme-minimal-ryan 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34577329505a0cb942e351e6a4c1e874eb89a16afa32c1cc0b6952c59468cca1
-  data.tar.gz: ee1e6263415e5fcdaaf543f298e10a326e9a959b527af36f033c9fb09f16fdaf
+  metadata.gz: befcbda98d70c573b6a04c0bff94df3f5d78c7c9303c5439db23af0918a14ca6
+  data.tar.gz: 8d0bfc7ff877d72ec1b3dea874cf3b436523baa5b249d9178b12a990a2be88da
 SHA512:
-  metadata.gz: 55ddcec692b77804cfc1595e8576ce4d459d4acae972005ade5535f1bf4f6fc94c6b13611015efe06ce38cd59472cb2fa2f6d83839d8808257325e09f3e55df9
-  data.tar.gz: ffaa409cd64c5280b889ed7006b89e926e1f122ce8e4151bb58f680dc1d16dbdde45dea6abc1c8913674e3b59d84df9bb2d3559cec39d153131d983fdf83d715
+  metadata.gz: b58bc8058130375bb6d2c7743998774e1b4a2efddb03508a66019f5b836d7ddd972a5b002bd979362fe2c15b7418bb22841f431f7ab037e383d099274e8d5393
+  data.tar.gz: c82a0b8beca3af2f48407f82e2c1e864fda6746692c8d7701dd6ba86ea352e4f8e57768ad80dc160b3cedaa3c2b141b9e60949d2803b1e4018654737ca9f9fd6

data/CHANGELOG.md

@@ -1,12 +1,21 @@
-## 0.2.0 (2022-12-27)
+## 0.3.0 (2023-01-03)
 
 ### Feat
 
+- add capability to add more pages to header
 - 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
+
+- add example image to cheat sheet post
+- convert media queries to mixins

data/README.md

@@ -16,15 +16,33 @@ theme: minimal-ryan
 
 And then execute:
 
-    $ bundle
-
-Or install it yourself as:
+```
+bundle
+```
 
-    $ gem install jekyll-theme-minimal-ryan
+This will install all dependencies.
 
 ## Usage
 
-All customizable options can be configured in [_data/theme.yml](_data/theme.yml).
+To test the theme locally, run
+
+```
+bundle exec jekyll serve
+```
+
+which will serve your site at [http://localhost:4000](http://localhost:4000).
+
+### Customization
+
+All customizable options can be configured in [_data/theme.yml](_data/theme.yml). Simply create your own data file and override the settings in [_data/theme.yml](_data/theme.yml).
+
+### Adding a Blog Home
+
+The theme provides you with a blog home that can display all the posts in the _posts folder. Simple create a file at the root directory and give it the `blog` layout in the front matter.
+
+### Customizing the Header
+
+Whenever you create a new page (with any layout) at the root directory, the theme will add an entry to the header. If you want the name of the entry to be different from the file, add a title to the front matter of the page. This title will show up on the header instead.
 
 ## Contributing
 

data/_includes/header.html

@@ -1,11 +1,22 @@
 <header class="content-container">
     {%- assign page_paths = site.pages | map: "path" -%}
-    {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
 
     <a id="site-title" href="/">{{ site.data.theme.title }}</a>
 
     <nav>
         <a href="/">Home</a>
-        <a href="/blog">Blog</a>    
+        {%- for path in page_paths -%}
+            {%- assign page = site.pages | where: "path", path | first -%}
+            {%- if page.dir == "/" and page.url != "/" -%}
+                <a href="{{ page.url }}">
+                    {%- if page.title -%}
+                        {{ page.title | escape }}
+                    {%- else -%}
+                        {%- assign page_title = page.name | split: "." -%}
+                        {{ page_title[0] | capitalize }}
+                    {%- endif -%}
+                </a>
+            {%- endif -%}
+        {%- endfor -%}
     </nav>
 </header>

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.3.0
 platform: ruby
 authors:
 - ryanshepps
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-12-27 00:00:00.000000000 Z
+date: 2023-01-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -38,7 +38,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 1.1.0
-description:
+description: 
 email:
 - ryansheppardd@gmail.com
 executables: []
@@ -78,7 +78,7 @@ licenses:
 - MIT
 metadata:
   plugin_type: theme
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -94,7 +94,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.3.26
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Minimalistic blogging theme for Jekyll
 test_files: []