panthera-jekyll 1.0.3 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ac455459dc6d9801a6ffbff78c69b80ba2f60d21437d2b29c5a2e1fb120620a8
-  data.tar.gz: 56bec00b4d03ba3dcf7d7b3e87755110c86565dcf4aba37521f66dc17b304c53
+  metadata.gz: 97dff38fb777f88d514d40bb480844699b89fbea648eb18138dceeccd92d6fd8
+  data.tar.gz: 8729ed86c622920e7805920c2d85f78c94598c1ff0197f3d37e153046ac47a09
 SHA512:
-  metadata.gz: 6e02692a85736720bf6572880e657bbdf67c0e222058944bb72814d9882b1129786c11b58fb93da14e65322fd2b8780b37b596329a943804c9177fd90a6a9477
-  data.tar.gz: be9b84d7a74051045736255a805c82700cfec22562475316bd2a541f168865238eb8d3129856f9633790bc434179f30bffa61b2b37c33f865f6581ed3c2bc07c
+  metadata.gz: 012d47efcef47ea5205f4aceffa965e9f09d710b41d2a20868504d9d3c95d153bdf075bf9980af9ba755b88655989b27b5f0e398660afe2783e2972bbf084d7b
+  data.tar.gz: '06655518c4c5c050ef8b5c755286fe9fc8f4e8fab6f682026929dd2fcaf01862e3189bfea0a40fb8c80d75568ef0489ff5e68ac581927a4ac6e373ce84ecc2f2'

data/README.md

@@ -2,9 +2,14 @@
 
 [![Gem Version](https://badge.fury.io/rb/panthera-jekyll.svg)](https://badge.fury.io/rb/panthera-jekyll)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v1.4%20adopted-ff69b4.svg)](code-of-conduct.md)
+<!-- [![Jekyll Themes Shield](https://img.shields.io/badge/featured%20on-JT-red.svg)](https://jekyll-themes.com) -->
 
 *panthera-jekyll is a Jekyll theme for GitHub Pages and Jekyll sites. You can [preview the theme to see what it looks like](https://demothemes.github.io/panthera-jekyll), or even [use it today](#usage).*
 
+<div style="text-align: center;">
+  <img src="/screenshot.png" alt="panthera-jekyll" style="width: 100%; max-width: 750px;" />
+</div>
+
 ## Installation
 
 ### Building a Jekyll Site
@@ -49,6 +54,26 @@ subtitle: [A brief subtitle or job title]
 description: [A short description of your site's purpose]
 ```
 
+To configure the left side set the following variables as shown below:
+
+```yml
+left_side:
+  background_image: [Absolute or relative image url]
+  background_color: [CSS background color, e.g. "#F00". We strongly recommend quoting this value. Don't worry about the transparency of the background, we've taken care of that.]
+  close_button_color: [CSS background color, e.g. "#F00". We strongly recommend quoting this value.]
+  text_color: [CSS background color, e.g. "#F00". We strongly recommend quoting this value.]
+```
+
+#### Example
+
+```yml
+left_side:
+  background_image: "./assets/images/left-background.jpg"
+  background_color: "#F00"
+  close_button_color: "#F00"
+  text_color: "#F00"
+```
+
 To configure side menu, set the following variables:
 
 ```yml
@@ -93,16 +118,24 @@ social_icons:
     icon: fab fa-github-square
 ```
 
-panthera-jekyll currently supports the following icons:
+To configure footer, set the following variables:
 
-* [FontAwesome](https://fontawesome.com) (version 5.9.0)
+```yml
+footer:
+  copyright_text: [The copyright text. Value should be quoted]
+```
 
-Additionally, you may choose to set the following optional variables:
+#### Example
 
 ```yml
-google_analytics: [Your Google Analytics tracking ID]
+footer:
+  copyright_text: "&copy; Christian Ezeani"
 ```
 
+panthera-jekyll currently supports the following icons:
+
+* [FontAwesome](https://fontawesome.com) (version 5.9.0)
+
 ### Stylesheet
 
 If you'd like to add your own custom styles:
@@ -122,9 +155,70 @@ If you'd like to add your own custom styles:
 
 *Note: If you'd like to change the theme's Sass variables, you must set new values before the `@import` line in your stylesheet.*
 
+## Blog Posts
+
+### Creating Posts
+
+To create a post, add a file to your `_posts` directory with the following format:
+
+```
+YEAR-MONTH-DAY-title.MARKUP
+```
+
+Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. For example, the following are examples of valid post filenames:
+
+```
+2020-07-10-new-years-eve-is-awesome.md
+```
+
+```md
+---
+layout: post
+title: First Demo Post
+date: 2020-07-10 13:32:20 +0300
+description: Post description (optional)
+image: image.jpg (optional)
+tags: [Holidays, Hawaii]
+---
+
+Post content here
+```
+
+### Displaying an index of posts
+
+1. Create a page, e.g. `posts.md`, with the following content:
+
+```md
+---
+layout: post
+---
+
+# PAGE TITLE HERE
+
+{% include all-posts.html %}
+```
+
+2. Add a link to the left pane in your `_config.yml`
+
+```yml
+menu:
+  ...
+  - text: Blog Posts
+    link: /posts
+    icon: ""
+```
+
+...and you're good
+
+More post features are coming soon. To get updates on new features, hit the `Watch` button at the top of this page to get notifications.
+
+If you love this project, kindly hit the `Star` button at the top of this page.
+
+Follow me on [Github](//github.com/christianezeani) to see more of my projects.
+
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/chrisitanezeani/panthera-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on GitHub at https://github.com/chrisitanezeani/panthera-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://contributor-covenant.org) code of conduct.
 
 ## License
 

data/_includes/all-posts.html

@@ -0,0 +1,29 @@
+
+<section class="pan-post-list">
+  {% for post in site.posts %}
+  <div class="pan-post-list__item">
+    <div class="pan-post-list--left">
+      <div class="pan-post-list--image">
+        {% if post.image %}
+        <a href="{{ post.url | prepend: site.baseurl }}" style="background-image: url({{ '/' | prepend: site.baseurl | append: post.image }});"></a>
+        {% else %}
+        <a href="{{ post.url | prepend: site.baseurl }}"></a>
+        {% endif %}
+      </div>
+    </div>
+    <div class="pan-post-list--right">
+      <div class="pan-post-list--content">
+        <h2><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h2>
+        <p class="info">
+          <span>{{ post.date | date: '%Y, %b %d' }}</span>
+          &nbsp;&nbsp; - &nbsp;&nbsp;
+          <span>{% capture words %}{{ post.content | number_of_words }}{% endcapture %}{% unless words contains "-" %}{{ words | plus: 250 | divided_by: 250 | append: " minute read" }}{% endunless %}</span>
+        </p>
+        <p class="desc">{{ post.content | strip_html | truncatewords: 20 }}</p>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</section>
+
+{% include pagination.html %}

data/_includes/footer.html

@@ -1,5 +1,10 @@
 <section class="pan-layout-footer">
   <div class="pan-layout-footer-right">
-    <div>Theme developed by <a target="_blank" href="https://github.com/christianezeani">Christian Ezeani</a>.</div>
+    <div>
+      {% if site.footer %}
+      <span class="pan-layout-footer__copyright">{{ site.footer.copyright_text }}</span>
+      {% endif %}
+      <span>Theme developed by <a target="_blank" href="https://github.com/christianezeani">Christian Ezeani</a>.</span>
+    </div>
   </div>
 </section>

data/_includes/left.html

@@ -1,10 +1,33 @@
-<section class="pan-layout-left">
+<section
+  class="pan-layout-left"
+  {% if site.left_side %}
+  style="
+  {% if site.left_side.background_image %}
+  background-image: url({{ site.left_side.background_image }});
+  {% endif %}
+  {% if site.left_side.text_color %}
+  color: {{ site.left_side.text_color }};
+  {% endif %}
+  "
+  {% endif %}
+>
+  <section
+    class="pan-layout-left__overlay"
+    {% if site.left_side %}
+    style="{% if site.left_side.background_color %}background-color: {{ site.left_side.background_color }} !important;{% endif %}"
+    {% endif %}
+  ></section>
+
   <div class="pan-layout-left__top">
     <div class="pan-layout-left__avatar">
       {% if site.github.owner_gravatar_url %}
-      <img src="{{ site.avatar | default: site.github.owner_gravatar_url }}" alt="{{ site.title | default: site.github.owner_name }}">
+      <a href="{{ site.url }}">
+        <img src="{{ site.avatar | default: site.github.owner_gravatar_url }}" alt="{{ site.title | default: site.github.owner_name }}">
+      </a>
       {% else %}
-      <img src="https://secure.gravatar.com/avatar/?d=mm&r=g&s=150" alt="">
+      <a href="{{ site.url }}">
+        <img src="https://secure.gravatar.com/avatar/?d=mm&r=g&s=150" alt="">
+      </a>
       {% endif %}
     </div>
     
@@ -38,7 +61,7 @@
       <span>GET IN TOUCH</span>
     </div>
     <div class="pan-layout-left__social">
-      {% if site.social %}
+      {% if site.social_icons %}
       <ul>
         {% for social in site.social_icons %}
         {% if social.icon %}
@@ -50,7 +73,12 @@
     </div>
   </div>
 
-  <div class="pan-layout-left__close">
+  <div
+    class="pan-layout-left__close"
+    {% if site.left_side %}
+    style="{% if site.left_side.close_button_color %}color: {{ site.left_side.close_button_color }} !important;{% endif %}"
+    {% endif %}
+  >
     <i class="fa fa-fw fa-times"></i>
   </div>
 </section>

data/_layouts/default.html

@@ -41,16 +41,6 @@
   <script type="text/javascript" src="{{ '/assets/libs/jquery-3.4.1.min.js' | relative_url }}"></script>
   <script type="text/javascript" src="{{ '/assets/libs/jquery-migrate-3.0.1.min.js' | relative_url }}"></script>
   <script type="text/javascript" src="{{ '/assets/js/panthera-jekyll.js?v=' | append: site.github.build_revision | relative_url }}"></script>
-  
-  {% if site.google_analytics %}
-  <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-    ga('create', '{{ site.google_analytics }}', 'auto');
-    ga('send', 'pageview');
-  </script>
-  {% endif %}
+ 
 </body>
 </html>

data/_layouts/post.html

@@ -2,4 +2,23 @@
 layout: default
 ---
 
-{{ content }}
+<section class="post-view">
+  <div class="post-view__image">
+    {% if page.image %}
+    <img src="{{ '/' | prepend: site.baseurl | append: post.image }}" alt="{{ page.title }}">
+    {% else %}
+    <img src="{{ '/assets/images/post.jpg' | prepend: site.baseurl }}" alt="{{ page.title }}">
+    {% endif %}
+  </div>
+
+  <div class="post-view__header">
+    <h1>{{ page.title }}</h1>
+    <div class="post-view__info">
+      <span><strong>Date:</strong> {{ page.date | date: '%Y, %b %d' }}</span>
+    </div>
+  </div>
+  
+  <div class="post-view__body">
+    {{ content }}
+  </div>
+</section>

data/_sass/includes/all-posts.scss

@@ -0,0 +1,99 @@
+.pan-post-list {
+  --display: block;
+
+  --left-width: auto;
+  --left-height: 150px;
+
+  --right-width: auto;
+  --right-height: auto;
+  --right-padding: 0px 20px;
+
+  --border-radius: 5px;
+
+  --content-top: 0px;
+  --content-transform: none;
+  --content-height: auto;
+  --content-margin: -30px auto 0px auto;
+  --content-shadow: -2px 4px 8px rgba(0, 0, 0, .2);
+  
+  @media (min-width: pan-device(md)) {
+    --display: flex;
+
+    --left-width: 300px;
+    --left-height: auto;
+
+    --right-width: auto;
+    --right-padding: 20px 0px;
+
+    --content-top: 50%;
+    --content-transform: translateY(-50%);
+    --content-margin: 0px 0px 0px -30px;
+    --content-height: 140px;
+  }
+
+  &__item {
+    display: var(--display) !important;
+    flex-direction: row;
+    margin-bottom: 20px;
+
+    &:hover {
+      --content-shadow: -3px 5px 12px rgba(0, 0, 0, .4);
+    }
+  }
+
+  &--left {
+    width: var(--left-width) !important;
+    height: var(--left-height) !important;
+  }
+
+  &--right {
+    flex: 1;
+    padding: var(--right-padding) !important;
+    width: var(--right-width) !important;
+  }
+
+  &--image {
+    overflow: hidden;
+    border: 1px solid #DDD;
+    border-radius: var(--border-radius) !important;
+    width: 100% !important;
+    height: 100% !important;
+
+    > a {
+      display: block;
+      min-width: 100%;
+      min-height: 100%;
+      background-image: url(../images/post.jpg);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  }
+
+  &--content {
+    position: relative;
+    top: var(--content-top) !important;
+    transform: var(--content-transform) !important;
+    background-color: #FFF;
+    border-radius: var(--border-radius) !important;
+    box-shadow: var(--content-shadow) !important;
+    margin: var(--content-margin) !important;
+    height: var(--content-height) !important;
+    transition: all 0.5s ease-in-out 0s;
+    padding: 20px;
+  }
+
+  h2 {
+    margin: 0px 0px 5px 0px;
+  }
+
+  .info {
+    font-size: 12px;
+    margin: 0px 0px 10px 0px;
+  }
+
+  .desc {
+    font-size: 15px;
+    margin: 0px;
+  }
+}

data/_sass/includes/footer.scss

@@ -17,4 +17,18 @@
     padding: 0px 20px;
   }
 
+  &__copyright {
+    display: inline-block;
+    border-right: 1px solid #CCC;
+    padding-right: 10px;
+    margin-right: 10px;
+  }
+
+  @media (min-width: pan-device(md)) {
+    &__copyright {
+      float: left;
+      border-right: none;
+    }
+  }
+
 }

data/_sass/includes/left.scss

@@ -13,23 +13,25 @@
   color: #FFF;
   z-index: 100500;
 
-  &:before {
+  &__overlay {
     display: block;
     position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
-    content: "";
     background-color: var(--pan-layout-left-background-color);
+    opacity: .7;
   }
 
   > * {
     position: absolute;
     left: 0px;
     right: 0px;
+    z-index: 2;
   }
 
+
   h1,h2,h3,h4,h5,h6 {
     margin: 0px;
   }
@@ -90,7 +92,7 @@
         margin: 0px;
 
         a {
-          color: #FFF;
+          color: inherit !important;
         }
       }
     }
@@ -103,17 +105,23 @@
     right: 0px;
     height: 200px;
 
-    img {
+    a {
       display: block;
-      margin: 0px auto;
-      width: 150px;
-      height: 150px;
-      border-radius: 50%;
-
       position: relative;
       top: 50%;
       transform: translateY(-50%);
+      width: 150px;
+      height: 150px;
+      margin: 0px auto;
+
+      > img {
+        display: block;
+        width: 100% !important;
+        height: 100% !important;
+        border-radius: 50%;
+      }
     }
+
   }
 
   &__info {
@@ -159,7 +167,7 @@
       > a {
         display: block;
         padding: 15px 15px 15px 30px;
-        color: #FFF !important;
+        color: inherit !important;
         text-decoration: none !important;
       }
     }
@@ -168,6 +176,7 @@
   &__close {
     left: unset;
     top: 0px;
+    right: 10px;
     padding: 10px 15px;
     color: #FFF;
     cursor: pointer;

data/_sass/includes/post-view.scss

@@ -0,0 +1,37 @@
+.post-view {
+  
+  &__image {
+    display: block;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    overflow: hidden;
+
+    > img {
+      display: block;
+      width: 100%;
+    }
+  }
+  
+  &__header {
+    text-align: center;
+    border-bottom: 1px solid #F0F0F0;
+    margin-bottom: 20px;
+
+    h1 {
+      border-bottom: none;
+      padding-bottom: 0px;
+      margin-bottom: 5px;
+    }
+  }
+  
+  &__info {
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #333;
+  }
+
+  &__body {
+    // 
+  }
+
+}

data/_sass/panthera-jekyll.scss

@@ -9,4 +9,7 @@
 @import './includes/right.scss';
 @import './includes/header.scss';
 @import './includes/footer.scss';
-@import './includes/content.scss';
+@import './includes/content.scss';
+@import './includes/all-posts.scss';
+@import './includes/pagination.scss';
+@import './includes/post-view.scss';

data/_sass/root/root.scss

@@ -4,7 +4,7 @@
 
   --pan-layout-left-width: 100vw;
   --pan-layout-left-left: calc(var(--pan-layout-left-width) * -1);
-  --pan-layout-left-background-color: rgba(0, 122, 204, .7);
+  --pan-layout-left-background-color: rgb(0, 122, 204);
   --pan-layout-left-background-image: url(../images/left-background.jpg);
   --pan-layout-left-top-height: 300px;
   --pan-layout-left-bottom-height: 70px;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: panthera-jekyll
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.3.0
 platform: ruby
 authors:
 - Christian Ezeani
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-10 00:00:00.000000000 Z
+date: 2020-07-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -75,16 +75,21 @@ extra_rdoc_files: []
 files:
 - LICENSE.txt
 - README.md
+- _includes/all-posts.html
 - _includes/footer.html
 - _includes/header.html
 - _includes/left.html
+- _includes/pagination.html
 - _layouts/default.html
 - _layouts/page.html
 - _layouts/post.html
+- _sass/includes/all-posts.scss
 - _sass/includes/content.scss
 - _sass/includes/footer.scss
 - _sass/includes/header.scss
 - _sass/includes/left.scss
+- _sass/includes/pagination.scss
+- _sass/includes/post-view.scss
 - _sass/includes/right.scss
 - _sass/main.scss
 - _sass/panthera-jekyll.scss
@@ -94,6 +99,7 @@ files:
 - _sass/root/variables.scss
 - assets/css/style.scss
 - assets/images/left-background.jpg
+- assets/images/post.jpg
 - assets/js/panthera-jekyll.js
 - assets/libs/fontawesome-5.9.0/css/all.css
 - assets/libs/fontawesome-5.9.0/css/all.min.css
@@ -379,8 +385,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.6.2
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: A quick and simple responsive developer portfolio theme for jekyll sites