jumbo-jekyll-theme 3.3.8 → 3.3.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a40b6b6a6f280b959f5de05c97d0e91d60dc09791d5a1d1473635c8fcc32d915
-  data.tar.gz: cd9572a992976a4f37c783eccd01eadb8770a356f64042b7b1ca9ea5f4323f36
+  metadata.gz: 0f9d02cab84c65a7989dd4ba3ea6ec14ec9f282c536c34e8748a6d64f771a2a8
+  data.tar.gz: 2427cda43211ce56e948d958a988137565d2fdb84b1a0599bf539e1fd03638a5
 SHA512:
-  metadata.gz: 3300abbd47697f27ef0d6401704350cbe3df196d7785383af501f6bd56d1925a9b6edb52ea775959b3434da999ed86e3ab15c74e40b3d431d43d1c62f68b8df7
-  data.tar.gz: 646163f3e88edb61c2090f0cbdcce57225c689bcdfe35a75d79c28b42655d68c5a2a5226ff0e4991846753be4953966cbabad3c484ff2e15ad8530ddf35318b6
+  metadata.gz: 704f165325ddad4c26a594c4e5e8fbddffdd7d799fc65b67583b35c17c55263a753030f2f4a52e42a82317a97d348943bfdc8b3341b01e1bd6ab51f38dd00157
+  data.tar.gz: ddbfb05d6d0388191fba9eca214b1bbe5d9d376b9756abbdbc1e7df585961798cc247447cb05fef78bb81e7490ef64f5c50ce3a16d5a4aa61e1eaad8db3600de

data/README.md

@@ -18,6 +18,97 @@ Some of the features this theme offers:
 * Generated breadcrumb
 * Easy navigation / footer management using YAML Data files.
 
+## Available Layouts
+
+Below are a table showing the available layouts for you to use:
+| Layout | Description | 
+| ------ | ----------- |
+| jumbotron | This layout adds either a carousel header, background-image header or a breadcrumb header. Content using this layout should be added to Boostrap 3 rows. This 
+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. |
+
+
+### Jumbotron Layout
+
+If you are using a layout that contains `jumbotron` then you can choose to display an image carousel header, standard background image header or a simple breadcrumb.
+
+**Jumbotron Settings**
+With the jumbotron layouts you can add a title, sub title and buttons to your header through changing your pages' front matter. 
+
+The jumbotron `title` can be modified by changing the title value in the page front matter:
+
+```yaml
+---
+title: Your Page Title (and jumbotron title)
+...
+---
+```
+
+The jumbotron `sub title`/`description` can be modified by changing the description value in the page front matter:
+
+```yaml
+---
+...
+description: >-
+    Your Page description (and jumbotron description/sub title)
+...
+---
+```
+
+The jumbotron `buttons` can be added with the following front matter:
+
+```yaml
+---
+...
+jumbotron:
+    ...
+    buttons:
+        - title: Learn More
+          url: /about/
+          icon: fa fa-github
+          ...
+...
+---
+```
+The above should hopefully be fairly self explanatory other than the icon value which should be the icon class for a Font Awesome 4.7 Icon. For all available icons [click here](https://fontawesome.com/v4.7.0/icons/). 
+
+
+**Displaying an image carousel**
+
+If you would like to display an image carousel for your page then add the following front matter to your page:
+
+```yaml
+---
+...
+jumbotron:
+    ...
+    carousel-images:
+        - /assets/images/content/background-image1.jpg
+        - /assets/images/content/background-image2.png
+        - /assets/images/content/background-image3.jpg
+    ...
+...
+---
+```
+Add as many images here as you would like. Even though these images are loaded lazily, try and make sure the images have been optimized as large images will increase the page load time. Also try to ensure the resolution of these images are fairly high.
+
+
+**Displaying an background image based jumbotron**
+
+```yaml
+---
+...
+jumbotron:
+    ...
+    background-image: /assets/images/content/background-image1.jpg
+    ...
+...
+---
+```
+Here you can add image to be used an the background image of the jumbotron. Try and make sure the image has been compressed/optimized as large images will increase the page load time. Also try to ensure the resolution of these images are fairly high.
+
+
+
 # The Docs
 The documentation for this theme is currently available through the Collaborate space. I will be adding to readthedocs/github in due course.
 

data/_includes/nav.html

@@ -1,6 +1,7 @@
 {% if site.data.nav.universal-nav %}
     {% include universal-nav.html %}
 {% endif %}
+{% assign page_base = page.url | split: "/" %}
 <nav class="
 {% if layout.nav-light %}
         nav-light 
@@ -42,11 +43,11 @@ navbar-inverse navbar-static" id="main-navigation">
                     {% if section.options %}
                         <li class="main dropdown menu
                             {% for menu-item in section.options %}
-                                 {% if page.url == menu-item.url %}
+                                 {% if menu-item.url contains page_base[1] %}
                                     active
                                  {% endif %}
                             {% endfor %} ">
-                          <a {% if section.url %}href="{{section.url}}"{% endif %} class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                          <a {% if section.url %}href="{{section.url}}"{% endif %} class="main-anchor dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                               {{section.title}} <span class="caret"></span>
                           </a>
                           <ul class="dropdown-menu menu">
@@ -80,12 +81,9 @@ navbar-inverse navbar-static" id="main-navigation">
                           </ul>
                         </li>
                     {% else %}
-                        <li {% if section.url == page.permalink %}
-                                class="main active"
-                            {% else %}
-                                class="main"
-                            {% endif %}
-                            ><a href="{{section.url}}" title="{{section.title}}">{{section.title}}</a></li>
+                        <li class="main {% if section.url contains page_base[1] %}active{% endif %}">
+                            <a class="main-anchor" href="{{section.url}}" title="{{section.title}}">{{section.title}}</a>
+                        </li>
                     {% endif %}
                 {% endfor %}
                 

data/_layouts/default.html

@@ -9,7 +9,7 @@ js-package: main
             {% include gtm-noscript.html %}
         {% endif %}
         <div id="wrapper" class="{% if layout.home == true and site.data.settings.home.jumbotron.enabled %}home{% else %}main{% endif %}">
-            {% include_cached nav.html %}
+            {% include nav.html %}
             <div class="container-fluid">
                 {{content}}
                 {% if site.data.footer.include %}

data/_sass/app/overrides.scss

@@ -11,6 +11,8 @@ $sub-footer-bg-color: #ccc;
 $footer-border-color: #272727; 
 // Navbar
 $navbar-text-color: #fff !default;
+$navbar-hover-text-color: #fff !default;
+$navbar-hover-background-color: $brand-primary !default;
 $navbar-height: 66px;
 $navbar-inverse-bg: #000;
 $navbar-inverse-color: #fff;

data/_sass/core/nav.scss

@@ -959,4 +959,18 @@ transform: rotate(0);
 .navbar-collapse::-webkit-scrollbar-thumb {
   background-color: $brand-primary;
   outline: 1px solid lighten($navbar-inverse-bg, 90%);
+}
+// Highlight nav menu options
+li.main.active a.main-anchor {
+    background-color: $navbar-hover-background-color;
+}
+li.dropdown.menu.active.open > a {
+    color: $navbar-hover-text-color;
+}
+#main-navigation li.main:hover a.main-anchor {
+    background-color: $navbar-hover-background-color;
+    color: $navbar-hover-text-color !important; 
+}
+#main-navigation li.main:hover a.main-anchor  {
+    transition: background-color 300ms linear;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jumbo-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 3.3.8
+  version: 3.3.9
 platform: ruby
 authors:
 - Kyle Kirkby
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-01-11 00:00:00.000000000 Z
+date: 2019-01-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll