jumbo-jekyll-theme 4.9.0 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2cdc6c9e432c4259886237d94f3e808b5c1651be85a194cc7d947a81cf4b59a
-  data.tar.gz: dcae7bb8af5bb77e9bdcba85d9d8ea26496cb273c161c44d26be94277fe05269
+  metadata.gz: 35c248543ea3b769881fe716af0b0e31312eebe6661fd01f3e457d26e849daca
+  data.tar.gz: bbad2d1a4f29a740a76ab1beed391bb9758d07aa6029caf3b641ba7553fcb9ad
 SHA512:
-  metadata.gz: cd9f8b346d7b9fb6701c1773f0efa3fffb562b047f5f037c39ed1449923cc6878c696a6323e2de89578b3a8b08846751f05bbc8b3499a7d50c80a12dfd5f37ad
-  data.tar.gz: 7bae6f2e092d8dcc096d2394de752ed6cc51e4ca0cf065ef1bf4c9f63edbf4c052188d94408c10536921b104bc8c038253490db7a860d101745ccdc45158ba98
+  metadata.gz: 5d159ef6954e62295acaa7514179e91a43cace85934e263068503f847fd69a917c42136285197875eb4978dbeda8e864f6d88936e90555eac27f4b5247ac4e80
+  data.tar.gz: 29201848e55eb2462de941cbdb21d803969eac8da961553c6c22b479d9c22e61bd36e916d100c801ffccad716d580ba47e254b5a5dda725250cfcb710c148f40

data/README.md

@@ -42,7 +42,8 @@ A few of the main features that this theme offers:
 * Jekyll Assets - providiing minified Javascript/CSS packages.
 * Jekyll-responsive-image plugin for generating resized images upon site build.
 * Jekyll-data to override the settings added in this theme.
-* Jekyll-last-modified-at plugin integration - shows the users the date that the current page/post was last updated.
+* Flow Layout - specific sections of a page in front matter based on predefined row styles
+
 
 ### Available Layouts
 
@@ -55,6 +56,7 @@ Below are a table showing the available layouts for you to use:
 layout is useful when addng custom pages. |
 | jumbotron-container (Most Common) | This is the exact same as the above but instead provides a Bootstrap 3 content container than can be used to add content to. |
 | default | This is the default layout to use which is the jumbotron-container layout |
+| flow | This layout utlises the flow.html Jekyll include which takes the `flow` frontmatter section and renders bootstrap 3 styled rows with predefined styles available. Perfect for creating a neat looking page without knowing any HTML. |
 
 ### Available Includes
 
@@ -97,6 +99,8 @@ Below are a table showing the available includes for you to use:
 | thumbnail_image | Adds a responsive thumbnail image using the jekyll-repsonsive-image plugin. |
 | universal-nav | Adds a universal navbar. We used this feature to link between our main static sites. |
 | youtube | Adds a lazy loaded youtube video. |
+| flow | Contains the logic for include content specified in the flow frontmatter section of a page that uses the flow layout. Basically just contains a bunch of `if` statements that include the relevant `jekyll _includes` |
+
 
 ### Jumbotron Layout
 
@@ -212,6 +216,17 @@ jumbotron:
 
 __Note__: The /assets/js/app/main.js theme file must be included since this instantiates the owl carousel if it exists.
 
+
+### Flow Layout
+
+This is the latest layout to be added to the theme. This allows you to use a predefined list of styled rows on a page in any combination that you like (see below for full list of rows).
+
+| Row Style | Description |
+|-----------|-------------|
+| members-section | Outputs your typical members row featuring row(s) of member logos. Useful for showing sponsors or customers of your project.|
+| members-section | Outputs your typical members row featuring row(s) of member logos. Useful for showing sponsors or customers of your project.|
+
+
 # Adding Content
 ## Adding Pages
 

data/_data/nav.yml

@@ -12,7 +12,8 @@ brand:
     url: /
 # Navigation pages
 pages:
-    
+    - title: Flow
+      url: /flow/
     - title: Jekyll
       active_paths:
         - /new/

data/_includes/core/blocks.html

@@ -0,0 +1,21 @@
+<div class="col-xs-12">
+    <div class="row equal">
+    {% for block in include.object.content %}
+        <div class="col-xs-12 col-sm-{{include.object.item_width}} block {% if include.object.style %}{{include.object.style}}{% endif %}">
+            {% if block.url %}<a href="{{block.url}}">{% endif%}
+            <div class="block-inner" {% if block.background_image %}style="background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url({{block.background_image}});"{% endif %}>
+                {% if block.title %}
+                    {% include core/title.html object=block.title %}
+                {% endif %}
+                {% if block.text %}
+                    {% include core/text.html object=block.text %}
+                {% endif %}
+                {% if block.buttons %}
+                    {% include core/buttons.html object=block.buttons %}
+                {% endif %}
+            </div>
+            {% if block.url %}</a>{% endif%}
+        </div>
+    {% endfor %}
+    </div>
+</div>

data/_includes/core/button.html

@@ -0,0 +1,6 @@
+<a href="{{include.object.url}}" class="btn {% if include.object.class %}{{include.object.class}}{% else %}btn-primary{% endif %}">
+    {{include.object.title}}
+    {% if include.object.icon %}
+        <i class="{{include.object.icon}}" aria-hidden="true"></i>
+    {% endif %}
+</a> 

data/_includes/core/buttons.html

@@ -0,0 +1,5 @@
+<div class="col-xs-12 buttons no-padding {% if include.centered %}text-center{% endif %}">
+    {% for button in include.object %}
+        {% include core/button.html object=button %}
+    {% endfor %}
+</div>

data/_includes/core/content_row.html

@@ -0,0 +1,7 @@
+<div class="row {% if include.object.style %}{{include.object.style}}{% endif %}
+{% if include.object.background_image %}background_image_row{% endif %}" 
+{% if include.object.background_image %}style="background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url({{include.object.background_image}});"{% endif %}>
+    <div class="container">
+        {% include flow_inner.html object=include.object.items %}
+    </div>
+</div>

data/_includes/core/feature_block.html

@@ -0,0 +1,39 @@
+<div class="col-xs-12 feature_block">
+    <div class="row">
+        <div class="col-xs-12 col-sm-7 block__image {% if include.object.side_content.position == "right" %}col-sm-push-5{% endif %}">
+            {% if include.object.side_content.type == "image" %}
+                {% assign image_path = include.object.side_content.content | remove_first: '/' %}
+                {% assign full_path = include.object.side_content.content %}
+                {% responsive_image_block %}
+                template: _includes/thumbnail_image.html
+                path: {{ image_path }}
+                fullpath: {{ full_path }}
+                {% if member.alt %}
+                title: {{ member.alt | slugify: "ascii"}}
+                alt: {{ member.alt | slugify: "ascii"}}
+                {% endif %}
+                {% endresponsive_image_block %}
+            {% else %}
+                <h2>TODO</h2>
+            {% endif %}
+        </div>
+        <div class="col-xs-12 col-sm-5 block__text {% if include.object.side_content.position == "right" %}col-sm-pull-7{% endif %}">
+            {% if include.object.title %}
+                <h2>{{include.object.title}}</h2>
+            {% endif %}
+            {% if include.object.highlight-text %}
+                <div class="font-weight-bold">
+                    {{include.object.highlight-text | markdownify }}
+                </div>
+            {% endif %}
+            {% if include.object.text == "page_content" %}
+                {{page.content | markdownify }}
+            {% else %}
+                {{include.object.text | markdownify}}
+            {% endif %}
+            {% if include.object.buttons %}
+                {% include core/buttons.html object=include.object.buttons %}
+            {% endif %}
+        </div>
+    </div>
+</div>

data/_includes/core/full_width_row.html

@@ -0,0 +1,5 @@
+<div class="row {% if include.object.style %}{{include.object.style}}{% endif %}
+{% if include.object.background_image %}background_image_row{% endif %}" 
+{% if include.object.background_image %}style="background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url({{include.object.background_image}});"{% endif %}>
+    {% include flow_inner.html object=include.object.items %}
+</div>

data/_includes/core/members-section.html

@@ -0,0 +1,32 @@
+{% if include.object.data_source %}
+    {% assign members = site.data[include.object.data_source] %}
+{% else %}
+    {% assign members = include.object.content %}
+{% endif %}
+<div class="members_section {% if include.object.style %}{{include.object.style}}{% endif %}">
+{% for member in members %}
+    {% if member.url %}<a href="{{member.url}}">{% endif %}
+    {% if member.image.path contains "http" %}
+    <div class="col-xs-6 col-sm-{{include.object.item_width}}">
+        <img class="lazyload img-responsive" alt="{{member.image.alt}}" 
+        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
+        data-src="{{member.image.path}}"/>
+    </div>
+    {% else %}
+    {% assign image_path = member.image.path | remove_first: '/' %}
+    {% assign full_path = member.image.path %}
+    <div class="col-xs-6 col-sm-{{include.object.item_width}}">
+        {% responsive_image_block %}
+        template: _includes/thumbnail_image.html
+        path: {{ image_path }}
+        fullpath: {{ full_path }}
+        {% if member.alt %}
+        title: {{ member.alt | slugify: "ascii"}}
+        alt: {{ member.alt | slugify: "ascii"}}
+        {% endif %}
+        {% endresponsive_image_block %}
+    </div>
+    {% endif %}
+    {% if member.url %}</a>{% endif %}
+{% endfor %}
+</div>

data/_includes/core/slider.html

@@ -0,0 +1,10 @@
+<div class="owl-carousel owl-theme" data-size="{{include.object.items | size }}" 
+{% if include.object.sm_items %}
+data-sm-number="{{include.object.sm_items}}"
+{% endif %}>
+    {% for item in include.object.items %}
+        <div class="item">
+            
+        </div>
+    {% endfor %}
+</div>

data/_includes/core/text.html

@@ -0,0 +1,3 @@
+<div class="col-xs-12 text_block">
+    {{include.object.content | markdownify }}
+</div>

data/_includes/core/title.html

@@ -0,0 +1,3 @@
+<div class="col-xs-12 title text-center">
+    <{{include.object.size}}>{{include.object.content}}</{{include.object.size}}>
+</div>

data/_includes/custom_include.html

@@ -0,0 +1,13 @@
+
+<form action="" method="POST" role="form">
+    <legend>Form title</legend>
+
+    <div class="form-group">
+        <label for="">label</label>
+        <input type="text" class="form-control" id="" placeholder="Input field">
+    </div>
+
+    
+
+    <button type="submit" class="btn btn-primary">Submit</button>
+</form>

data/_includes/flow.html

@@ -1,19 +1,13 @@
-<div class="container-fluid content" id="main_container">
-{% for section in include.flow %}
+{% for section in include.object %}
     {% if section.type == "main-content" %}
         <div class="row" id="main_content">
             <div class="container">
                 {{content}}
             </div>
         </div>
-    {% elsif section.type == "slider" %}
-        {% include slider.html object=section %}
-    {% elsif section.type == "latest-posts" %}
-        {% include latest_posts.html limit=section.number_of_posts %}
-    {% elsif section.type == "feature-block" %}
-        {% include feature-block.html object=section %}
-    {% elsif section.type == "cards" %}
-        {% include cards.html object=section %}
+    {% elsif section.type == "content_row" %}
+        {% include core/content_row.html object=section %}
+    {% elsif section.type == "full_width_row" %}
+        {% include core/full_width_row.html object=section %}
     {% endif %}
-{% endfor %}
-</div>
+{% endfor %}

data/_includes/flow_inner.html

@@ -0,0 +1,19 @@
+{% for item in include.object %}
+    {% if item.format == "title" %}
+        {% include core/title.html object=item %}
+    {% elsif item.format == "members" %}
+        {% include core/members-section.html object=item %}
+    {% elsif item.format == "block" %}
+        {% include core/blocks.html object=item %}
+    {% elsif item.format == "buttons" %}
+        {% include core/buttons.html object=item.content centered=item.centered %}
+    {% elsif item.format == "text" %}
+        {% include core/text.html object=item %}
+    {% elsif item.format == "custom" %}
+        {% include {{item.include_name}} object=item %}
+    {% elsif item.format == "slider" %}
+        {% include core/slider.html object=item %}
+    {% elsif item.format == "feature_block" %}
+        {% include core/feature_block.html object=item.content %}
+    {% endif %}
+{% endfor %}

data/_layouts/flow.html

@@ -0,0 +1,22 @@
+---
+layout: base
+---
+{% if page.jumbotron.carousel-images %}
+    {% include carousel-header.html images=page.jumbotron.carousel-images %}
+    {% include jumbotron.html %}
+{% elsif page.jumbotron %}
+    {% include jumbotron.html %}
+{% else %}
+    {% include breadcrumb.html %}
+{% endif %}
+{% if page.flow %}
+<div id="flow_wrapper">
+    {% include flow.html object=page.flow %}
+</div>
+{% else %}
+    <div class="row" id="content-container">
+        <div class="container">
+            {{content}}
+        </div>
+    </div>
+{% endif %}

data/_sass/app/overrides.scss

@@ -61,4 +61,6 @@ $post-tag-border: #8b8b8b !default;
 $post-tag-hover-bg: #1f1f1f !default;
 $post-tag-hover-color: #fff !default;
 // Triangle Divider
-$triangle-divider-bg-color: #fff !default;
+$triangle-divider-bg-color: #fff !default;
+// Flow sections
+$flow_row_padding: 40px !default;

data/_sass/core.scss

@@ -16,3 +16,4 @@
 @import "core/carousel-styles";
 @import "core/owl.carousel.min";
 @import "core/owl.theme.default.min";
+@import "core/flow";

data/_sass/core/flow.scss

@@ -0,0 +1,102 @@
+// Styles for flow sections
+// Members section
+#flow_wrapper {
+    .row {
+        padding-top: $flow_row_padding;
+        padding-bottom: $flow_row_padding;
+        background-color: $body-bg;
+        @media (min-width: $screen-sm-min) {
+            &.equal {
+                display: flex;
+                flex-wrap: wrap;
+            }
+        }
+        &.background_image_row {
+            background-size: cover !important;
+            background-repeat: no-repeat !important;
+            background-position: center center !important;
+            &.fixed {
+                background-attachment: fixed !important;
+            }
+            .title{
+                h1, h2, h3, h4, h5, h6 {
+                    color: #fff;
+                }                
+            }  
+        }
+        &.block_row {
+            .block {
+                @media(max-width: $screen-sm-min) {          
+                    &:not(:first-child) {
+                        margin-top: $flow_row_padding;
+                    }
+                }
+                .block-inner {
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    overflow:auto;
+                    background-size: cover !important;
+                    background-repeat: no-repeat !important;
+                    background-position: center center !important;
+                    border-radius: 5px;
+                    -webkit-box-shadow: 0px 0px 22px -4px rgba(0,0,0,0.75);
+                    -moz-box-shadow: 0px 0px 22px -4px rgba(0,0,0,0.75);
+                    box-shadow: 0px 0px 22px -4px rgba(0,0,0,0.75);
+                    transition: all 200ms ease-in-out;
+                    .title {
+                        h1, h2, h3, h4, h5, h6 {
+                            color: #fff;
+                        }  
+                    }
+                    p {
+                        color: #fff;
+                    }
+                    .buttons {
+                        padding-top: 10px;
+                        padding-bottom: 10px;
+                    }
+                    &:hover {
+                        transform: translateY(-5px);
+                        -webkit-box-shadow: 0px 0px 35px -4px rgba(0,0,0,0.85);
+                        -moz-box-shadow: 0px 0px 35px -4px rgba(0,0,0,0.85);
+                        box-shadow: 0px 0px 35px -4px rgba(0,0,0,0.85);
+                    }
+                }
+            }
+            
+        }
+    }
+    .members_section {
+        &.grayscale {
+            img {
+                filter: grayscale(1);
+                &:hover {
+                    filter: grayscale(0);
+                }
+            }
+        }
+        &.zoom {
+            img {
+                &:hover {
+                    transform: scale(1.1);
+                }
+            }
+        }
+        img {
+            height: 100px;
+            margin-bottom: 20px;
+            margin-top: 20px;
+            object-fit: contain;
+            padding:10px;
+            margin: auto;
+            transition: all 200ms ease;
+        }
+    }
+    .title {
+        margin-bottom: 20px;
+    }
+    .buttons{
+        padding-top: $flow_row_padding;
+    }
+}

data/assets/js/package-home.js

@@ -11,4 +11,4 @@
 //= require app/search
 //= require app/sticky-tab-bar
 //= require app/custom
-//= require app/home
+//= require app/home

data/assets/js/package-search.js

@@ -0,0 +1,8 @@
+//= require vendor/jquery
+//= require vendor/bootstrap
+//= require vendor/cookieconsent
+//= require vendor/lazysizes
+
+//= require app/main
+//= require app/search
+//= require app/custom

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jumbo-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 4.9.0
+  version: 5.2.0
 platform: ruby
 authors:
 - Kyle Kirkby
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-19 00:00:00.000000000 Z
+date: 2019-06-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -363,6 +363,7 @@ files:
 - README.md
 - _config.yml
 - _data/footer.yml
+- _data/members-section-example.yml
 - _data/nav.yml
 - _data/settings.yml
 - _data/sidebar-nav.yml
@@ -372,11 +373,23 @@ files:
 - _includes/blog-filler-element.html
 - _includes/breadcrumb.html
 - _includes/carousel-header.html
+- _includes/core/blocks.html
+- _includes/core/button.html
+- _includes/core/buttons.html
 - _includes/core/call-to-action-banner.html
+- _includes/core/content_row.html
+- _includes/core/feature_block.html
+- _includes/core/full_width_row.html
+- _includes/core/members-section.html
+- _includes/core/slider.html
+- _includes/core/text.html
+- _includes/core/title.html
 - _includes/css.html
+- _includes/custom_include.html
 - _includes/display-blog-posts.html
 - _includes/disqus-comments.html
 - _includes/flow.html
+- _includes/flow_inner.html
 - _includes/footer.html
 - _includes/github-edit.html
 - _includes/google-analytics.html
@@ -412,6 +425,7 @@ files:
 - _layouts/container.html
 - _layouts/default.html
 - _layouts/error.html
+- _layouts/flow.html
 - _layouts/jumbotron-container.html
 - _layouts/jumbotron.html
 - _layouts/post-index.html
@@ -513,6 +527,7 @@ files:
 - _sass/core/fa.scss
 - _sass/core/featherlight.scss
 - _sass/core/flipclock.scss
+- _sass/core/flow.scss
 - _sass/core/fly.scss
 - _sass/core/font-awesome.min.scss
 - _sass/core/fonts.scss
@@ -586,6 +601,7 @@ files:
 - assets/js/package-extended.js
 - assets/js/package-home.js
 - assets/js/package-main.js
+- assets/js/package-search.js
 - assets/js/vendor/bootstrap-multiselect.js
 - assets/js/vendor/bootstrap.js
 - assets/js/vendor/clipboard.min.js