linaro-jekyll-theme 4.1.2 → 4.2.0

data/_includes/flow/flow_inner.html

@@ -2,7 +2,7 @@
     {% if section.format == "title" %}
         {% include flow/title.html object=section %}
     {% elsif section.format == "members" %}
-        {% include flow/members-section.html object=section %}
+        {% include flow/members.html object=section %}
     {% elsif section.format == "youtube" %}
         <div class="col col-12 youtube_embed">
             {% include youtube.html url=section.url title=section.title poster_image=section.poster_image %}

data/_includes/flow/members.html

@@ -0,0 +1,26 @@
+{% if include.object.members_content.source %}
+    {% assign members = site.data[include.object.members_content.source] %}
+{% else %}
+    {% assign members = include.object.members_content.items %}
+{% endif %}
+<div class="col col-12 members_section {% if include.object.style %}{{include.object.style}}{% endif %}">
+    <div class="row d-flex justify-content-center align-items-center">
+        {% for member in members %}
+                {% if member.image.path contains "http" %}
+                <div class="col col-6 col-sm-{{include.object.members_content.item_width}}">
+                    {% if member.url %}<a href="{{member.url}}">{% endif %}
+                    <img class="lazyload img-responsive" alt="{{member.image.alt}}"
+                    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+                    data-src="{{member.image.path}}"/>
+                    {% if member.url %}</a>{% endif %}
+                </div>
+                {% else %}
+                    <div class="col col-6 col-sm-{{include.object.members_content.item_width}}">
+                        {% if member.url %}<a href="{{member.url}}">{% endif %}
+                        {% picture members_image {{member.image.path}} --alt {{member.image.alt}} %}
+                        {% if member.url %}</a>{% endif %}
+                    </div>
+                {% endif %}
+        {% endfor %}
+    </div>
+</div>

data/_includes/footer/footer.html

@@ -16,9 +16,9 @@
                     </div>
                     {% if site.data.footer.footer_brand %}
                     <div class="col col-12  text-white text-center m-t-10">
-                        <a href="{{site.url}}/">
-                            <img src="{{site.data.footer.footer_brand.logo}}" class="footer-logo mx-auto"
-                                alt="{{site.name}} Logo" />
+                        <a href="{{site.data.footer.footer_brand.url}}/">
+                            <img src="{{site.data.footer.footer_brand.path}}" class="footer-logo mx-auto"
+                                alt="{{site.data.footer.footer_brand.alt}}" />
                         </a>
                     </div>
                     {% endif %}

data/_includes/nav/nav.html

@@ -6,9 +6,16 @@
 {% if current_page_url == "/" %}
     {% assign current_page_url  = "do-no-set"%}
 {% endif %}
-<nav class="navbar navbar-expand-md navbar-light bg-light" id="main-navigation">
+{% assign nav_expand_point = site.nav_expand_breakpoint %}
+<nav class="navbar navbar-expand-{{nav_expand_point}} navbar-light bg-light {% if site.hover_nav_dropdowns %}hover_animated{% endif %}" id="main-navigation">
     <div class="container">
-        {% include nav/brand.html %}
+        {% if site.data.nav.brand.custom_include %}
+            {% include {{site.data.nav.brand.custom_include}} %}
+        {% else %}
+            <a class="navbar-brand" href="/">
+                <img src="{{site.data.nav.brand.path}}" alt="{{site.data.nav.brand.alt}}" height="60" class="d-inline-block align-top">
+            </a>
+        {% endif %}
         <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-collapse"
             aria-controls="navbar-collapse " aria-expanded="false" aria-label="Toggle navigation">
             <span class="icon-bar"></span>
@@ -47,15 +54,15 @@
                             {% endif %}
                         {% endfor %}
 
-                        <li  class="nav-item dropdown {{active}}">
+                        <li  class="nav-item dropdown text-center text-{{nav_expand_point}}-left {{active}}">
                             <a class="nav-link dropdown-toggle" href="#" id="dropdown-{{forloop.index}}" role="button" data-toggle="dropdown"
                                 aria-haspopup="true" aria-expanded="false">
                                 {{section.title}}
                             </a>
-                            <ul class="dropdown-menu" aria-labelledby="dropdown-{{forloop.index}}">
+                            <ul class="dropdown-menu {% if site.nav_dropdowns_animation_class %}{{site.nav_dropdowns_animation_class}}{% endif %}" aria-labelledby="dropdown-{{forloop.index}}">
                                 {% for menu_option in section.options %}
                                     {% if menu_option.options %}
-                                    <li class="dropdown-item dropdown {% if section.left %} pull-left {% endif %}">
+                                    <li class="dropdown-item dropdown text-center text-{{nav_expand_point}}-left {% if section.left %} pull-left {% endif %}">
                                         <a href="#" id="dropdown1-{{forloop.index}}" data-toggle="dropdown" aria-haspopup="true"
                                             aria-expanded="false" class="dropdown-toggle">
                                             {{menu_option.text}}
@@ -63,7 +70,7 @@
                                         <ul class="dropdown-menu" aria-labelledby="dropdown1-{{forloop.index}}">
                                         {% for sub-option in menu_option.options %}
                                             {% if sub-option.options %}
-                                                <li class="dropdown-item dropdown">
+                                                <li class="dropdown-item dropdown text-center text-{{nav_expand_point}}-left">
                                                     <a href="#" class="dropdown-toggle" id="dropdown1-1-{{forloop.index}}"
                                                     data-toggle="dropdown" aria-haspopup="true"
                                                     aria-expanded="false">
@@ -71,23 +78,23 @@
                                                     </a>
                                                     <ul class="dropdown-menu" aria-labelledby="dropdown1-1-{{forloop.index}}">
                                                         {% for sub-sub-option in sub-option.options %}
-                                                            <li >
+                                                            <li class="text-center text-{{nav_expand_point}}-left">
                                                                 <a href="{{sub-sub-option.url}}">{{sub-sub-option.text}}</a>
                                                             </li>
                                                         {% endfor %}
                                                     </ul>
                                                 </li>
                                             {% else %}
-                                                <li><a href="{{sub-option.url}}">{{sub-option.text}}</a></li>
+                                                <li class="text-center text-{{nav_expand_point}}-left"><a href="{{sub-option.url}}">{{sub-option.text}}</a></li>
                                             {% endif %}
                                         {% endfor %}
                                         </ul>
                                         </li>
                                     {% else %}
-                                        <li>
+                                        <li class="text-center text-{{nav_expand_point}}-left">
                                             <a href="{{menu_option.url}}">
                                             {{menu_option.text}}
-                                            {% if menu_option.external %}<i class="glyphicon glyphicon-new-window pull-right"></i>{% endif %}
+                                            {% if menu_option.external %}<i class="icon-link-ext-alt float-right"></i>{% endif %}
                                             </a>
                                         </li>
                                     {% endif %}
@@ -106,20 +113,23 @@
                                     {% endif %}
                                 {% endfor %}
                             {% endif %}
-                        <li class="nav-item {{active}}">
-                            <a class="nav-link" href="{{section.url}}">{{section.title}} {% if active == "active" %}<span class="sr-only">(current)</span>{% endif %}</a>
+                        <li class="nav-item text-center text-{{nav_expand_point}}-left {{active}}">
+                            <a class="nav-link" href="{{section.url}}">
+                                {{section.title}} 
+                                {% if section.external %}<i class="icon-link-ext-alt float-right"></i>{% endif %}
+                                {% if active == "active" %}<span class="sr-only">(current)</span>{% endif %}</a>
                         </li>
                     {% endif %}
                 {% endfor %}
                 {% if site.data.nav.search.enabled %}
-                <li class="nav-item dropdown search">
+                <li class="nav-item dropdown text-center text-{{nav_expand_point}}-left search">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" aria-label="Search dropdown" data-toggle="dropdown"
                         aria-haspopup="true" aria-expanded="false">
                         <i class="icon-search"></i>
                     </a>
                     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                         <form class="form-inline flex-nowrap" action="/search/" method="GET" target="_self" id="search_form">
-                            <input class="form-control border-0" name="q" type="search" placeholder="Search..." aria-label="Search">
+                            <input class="form-control border-0 flex-grow-1" name="q" type="search" placeholder="Search..." aria-label="Search">
                             <button class="btn btn-outline-primary border-0" type="submit">Search</button>
                             <input type="hidden" name="fields.label" value="{{ site.search_label }}">
                         </form>

data/_includes/nav/universal_nav.html

@@ -1,5 +1,6 @@
+{% assign nav_expand_point = site.nav_expand_breakpoint %}
 <!-- Universal NavBar-->
-<nav class="navbar navbar-expand-md navbar-dark" id="universal_nav">
+<nav class="navbar navbar-expand-{{nav_expand_point}} navbar-dark {% if site.hover_nav_dropdowns %}hover_animated{% endif %}" id="universal_nav">
     <div class="container">
         <button class="navbar-toggler collapsed ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -18,7 +19,7 @@
                                 aria-haspopup="true" aria-expanded="false">
                                 {{item.title}}
                             </a>
-                            <div class="dropdown-menu" aria-labelledby="universalNavbarDropdown">
+                            <div class="dropdown-menu {% if site.nav_dropdowns_animation_class %}{{site.nav_dropdowns_animation_class}}{% endif %}" aria-labelledby="universalNavbarDropdown">
                                 {% for project-site in item.options %}
                                     <a class="dropdown-item {% if project-site.active %}active{% endif%}" href="{{project-site.url}}">{{project-site.title}}</a>
                                 {% endfor %}

data/_layouts/documentation.html

@@ -0,0 +1,19 @@
+---
+layout: base
+---
+{% include components/breadcrumb.html %}
+{% if page.sticky_tab_bar %} 
+    {% include components/sticky_tab_bar.html object=page %}
+{% endif %}
+<div class="container-fluid main_content" id="content_wrapper">
+  <div class="row" id="doc_content">
+    <div class="container">
+        <div class="row">
+          {% if page.toc %}
+            <div class="col col-12 col-lg-3" id="table-of-contents">{{ content | toc_only }}</div>
+          {% endif %}
+            <div class="col col-12 {% if page.toc %}col-lg-9{% endif %}"id="markdown-content">{{ content | inject_anchors }}</div>
+        </div>
+    </div>
+  </div>
+</div>

data/_layouts/flow.html

@@ -6,6 +6,9 @@ layout: base
 {% elsif page.breadcrumb %}
     {% include components/breadcrumb.html %}
 {% endif %}
+{% if page.sticky_tab_bar %}
+    {% include components/sticky_tab_bar.html object=page %}
+{% endif %}
 <div class="container-fluid main_content" id="flow_wrapper">
     {% if page.flow %}
         {% for each in page.flow %}

data/_layouts/post.html

@@ -2,14 +2,26 @@
 layout: base
 css_package: blog
 ---
-<div itemscope="" itemtype="http://schema.org/BlogPosting">
+<div itemscope="" itemtype="http://schema.org/BlogPosting" >
+    <meta itemprop="mainEntityOfPage" content="{{page.url | absolute_url}}"/>
+    <div itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
+        <meta itemprop="name" content="{{site.schema.name}}" />
+        <meta itemprop="url" content="{{site.schema.url}}" />
+        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
+            <meta itemprop="url" content="{{site.schema.logo}}">
+          </div>
+    </div>
 <div class="container-fluid" >
     {% if page.strap_image %}
     <div class="row" id="image_header">
         {% assign image_path = page.strap_image %}
         {% capture image_alt %}{{page.title}} background image{% endcapture %}
         {% picture header_image {{image_path}} --alt {{image_alt}} %}
+        <meta itemprop="image" content="{{image_path | absolute_url}}" />
     </div>
+    {% else %}
+        {% assign image_path = page.image %}
+        <meta itemprop="image" content="{{image_path | absolute_url}}" />
     {% endif %}
     <div class="row">
         <div class="container">
@@ -18,7 +30,7 @@ css_package: blog
     </div>
     <div class="row bg-light">
         <div class="container">
-            <div class="row" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
+            <div class="row">
                 <div class="col col-12 col-sm-2">
                     {% assign author = site.authors | where: "username", page.author | first %}
                     {% assign author-url = author.url %}
@@ -29,8 +41,9 @@ css_package: blog
                     {% else %}
                         {% assign author_image = site.avatar_placeholder %}
                     {% endif %}
-                    <div class="d-block d-md-inline-block mx-auto my-2 m-md-2 text-md-left text-center">
-                        <a href="{{author-url}}" itemprop="url" rel="author">
+                    <div class="d-block d-md-inline-block mx-auto my-2 m-md-2 text-md-left text-center" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
+                        <meta itemprop="name" content="{{author_name}}" />
+                        <a href="{{author-url}}" itemprop="url" content="{{author-url | absolute_url}}">
                             {% picture author_thumbnail {{author_image}} --alt {{author_image_alt}} %}
                         </a>
                     </div>
@@ -39,12 +52,12 @@ css_package: blog
                     <div class="row">
                         <div class="col col-12">
                             <div class="blockquote d-block d-md-inline-block mx-2 text-md-left text-center">
-                                <strong itemprop="name" rel="author">{{author_name}}</strong>
+                                <strong>{{author_name}}</strong>
                             </div>
                             <span class="divider d-none d-md-inline-block">|</span>
                             <div class="post_info text-center text-md-left d-block d-md-inline-block">
-                                <div class="author_name d-inline-block mx-2">
-                                    <time datetime="{{page.date}}" itemprop="datePublished">{{page.date |  date: "%A, %B %-d, %Y"}}</time>
+                                <div class="d-inline-block mx-2">
+                                    <time datetime="{{page.date}}" itemprop="datePublished dateModified" rel="BlogPosting">{{page.date |  date: "%A, %B %-d, %Y"}}</time>
                                 </div>
                                 <span class="divider">|</span>
                                 <div class="read_time d-inline-block mx-2">
@@ -56,7 +69,7 @@ css_package: blog
                         <div class="col col-12">
                             <div class="post_tags text-center text-md-left my-2 my-sm-1">
                                 {% assign post_tags = page.tags | sort %}
-                                {% for tag in post_tags limit: site.tag_limit %}
+                                {% for tag in post_tags %}
                                     <a class="btn bg-light text-dark btn-sm my-1" href="/{{page.category | downcase }}/tags/?tag={{tag}}">
                                         {{tag}}
                                     </a>

data/_sass/app/overrides.scss

@@ -4,7 +4,7 @@ $secondary: #575757;
 $theme-colors: (
   "primary": $primary,
   "secondary": $secondary,
-  "danger": #ff4136
+  "danger": #ff4136,
 );
 // Universal Navbar
 $universal_navbar_height_padding: 0px;
@@ -14,19 +14,26 @@ $universal_navbar_bg_color: $primary;
 $navbar_height_padding: 5px;
 $navbar_text_color: #575757;
 $navbar_bg_color: #fff;
+// Breakpoint at which navbars are expanded
+// Also set in the _data/nav.yml file - both are needed
+$nav_expand_point: "lg";
 // Jumbotron
 $jumbotron_bg_color: lightgray;
 $jumbotron_height: 350px;
 // Typography
 @font-face {
   font-display: fallback;
-  font-family: 'Lato';
-  src: url('/assets/fonts/lato/Lato-regular.eot'); /* IE9 Compat Modes */
-  src: url('/assets/fonts/lato/Lato-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/assets/fonts/lato/Lato-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/assets/fonts/lato/Lato-regular.woff') format('woff'), /* Pretty Modern Browsers */
-       url('/assets/fonts/lato/Lato-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
-       url('/assets/fonts/lato/Lato-regular.svg') format('svg'); /* Legacy iOS */
+  font-family: "Lato";
+  src: url("/assets/fonts/lato/Lato-regular.eot"); /* IE9 Compat Modes */
+  src: url("/assets/fonts/lato/Lato-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */ url("/assets/fonts/lato/Lato-regular.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("/assets/fonts/lato/Lato-regular.woff")
+      format("woff"),
+    /* Pretty Modern Browsers */ url("/assets/fonts/lato/Lato-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */ url("/assets/fonts/lato/Lato-regular.svg")
+      format("svg"); /* Legacy iOS */
 }
 // Fonts
 $font-family-base: "Lato";
@@ -41,3 +48,9 @@ $cookie_consent_bg: #000;
 $cookie_consent_text_color: #fff;
 // Breadcrumb
 $breadcrumb_bg_color: #e9ecef;
+// Sticky Tab Bar
+$tabbed_nav_height: 80px;
+$tabbed_nav_bg: #fff;
+$tabbed_nav_text_colour: #000;
+$tabbed_nav_active_bg_colour: $secondary;
+$tabbed_nav_active_colour: #fff;

data/_sass/core.scss

@@ -1,6 +1,8 @@
 // Core Jumbo Jekyll Theme Sass includes.
 @import "core/normalize";
 @import "core/navbar";
+@import "core/sticky_tab_bar";
+@import "core/documentation";
 @import "core/theme";
 @import "core/breadcrumb";
 @import "core/jumbotron";

data/_sass/core/breadcrumb.scss

@@ -1,18 +1,40 @@
 #wrapper {
-    #breadcrumb {
-        background-color: $breadcrumb_bg_color;
-        h1 {
-            margin-top:0px;
-            margin-bottom:0px;
-            padding-top:10px;
-        }
+  #breadcrumb {
+    background-color: $breadcrumb_bg_color;
+    &.breadcrumb_bg {
+      position: relative;
+      img.breadcrumb_image {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        filter: brightness(0.8);
+        z-index: 0;
+      }
+      .container {
+        z-index: 1;
+        position: relative;
         ol {
-            background-color: $breadcrumb_bg_color;
-            padding-left:0px;
-            li:not(:first-child)::before {
-                content: "\00bb\00a0";
-                padding-left:5px;
-            }
+          background-color: transparent;
+          color: white;
+        }
+        h1 {
+          color: white;
         }
+      }
+    }
+    h1 {
+      margin-top: 0px;
+      margin-bottom: 0px;
+      padding-top: 10px;
+    }
+    ol {
+      background-color: $breadcrumb_bg_color;
+      padding-left: 0px;
+      li:not(:first-child)::before {
+        content: "\00bb\00a0";
+        padding-left: 5px;
+      }
     }
+  }
 }

data/_sass/core/carousel-header.scss

@@ -1,91 +1,83 @@
 // Full Width Slider
 .carousel-fade .carousel-inner .item {
-    opacity: 0;
-    transition-property: opacity;
+  opacity: 0;
+  transition-property: opacity;
 }
 .carousel-fade .carousel-inner .active {
-    opacity: 1;
+  opacity: 1;
 }
 .carousel-fade .carousel-inner .active.left,
 .carousel-fade .carousel-inner .active.right {
-    left: 0;
-    opacity: 0;
-    z-index: 1;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
 }
 .carousel-fade .carousel-inner .next.left,
 .carousel-fade .carousel-inner .prev.right {
-    opacity: 1;
+  opacity: 1;
 }
 .carousel-fade .carousel-control {
-    z-index: 2;
+  z-index: 2;
 }
-@media all and (transform-3d),
-(-webkit-transform-3d) {
-    .carousel-fade .carousel-inner > .item.next,
-    .carousel-fade .carousel-inner > .item.active.right {
-        opacity: 0;
-    }
-    .carousel-fade .carousel-inner > .item.prev,
-    .carousel-fade .carousel-inner > .item.active.left {
-        opacity: 0;
-    }
-    .carousel-fade .carousel-inner > .item.next.left,
-    .carousel-fade .carousel-inner > .item.prev.right,
-    .carousel-fade .carousel-inner > .item.active {
-        opacity: 1;
-    }
+@media all and (transform-3d), (-webkit-transform-3d) {
+  .carousel-fade .carousel-inner > .item.next,
+  .carousel-fade .carousel-inner > .item.active.right {
+    opacity: 0;
+  }
+  .carousel-fade .carousel-inner > .item.prev,
+  .carousel-fade .carousel-inner > .item.active.left {
+    opacity: 0;
+  }
+  .carousel-fade .carousel-inner > .item.next.left,
+  .carousel-fade .carousel-inner > .item.prev.right,
+  .carousel-fade .carousel-inner > .item.active {
+    opacity: 1;
+  }
 }
 .item:nth-child(1) {
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 }
 .item:nth-child(2) {
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 }
 .item:nth-child(3) {
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 }
 .carousel .item {
-    position: fixed;
-    z-index: 99999;
-    width: 100%;
-    height: $jumbotron_height + 100px;
-    // margin-top: $navbar-height;
+  position: fixed;
+  z-index: 99999;
+  width: 100%;
+  height: $jumbotron_height + 100px;
+  // margin-top: $navbar-height;
 }
 .carousel.slide.carousel-fade {
-    position: absolute;
-    top: 0px;
-    z-index: 0;
-    overflow: hidden;
-}
-nav#universal-nav {
-    z-index: 2;
-    position: static;
-}
-nav#main-navigation {
-    z-index: 999999;
+  position: absolute;
+  top: 0px;
+  z-index: 0;
+  overflow: hidden;
 }
 #content-container {
-    background-color: $body-bg;
-    position: relative;
+  background-color: $body-bg;
+  position: relative;
 }
 div#jumbotron {
-    text-align: center;
-    height: $jumbotron_height;
-    z-index: 0;
-    position: relative;
-    background: none;
+  text-align: center;
+  height: $jumbotron_height;
+  z-index: 0;
+  position: relative;
+  background: none;
 }
 @include media-breakpoint-down(sm) {
-    #jumbotron {
-        font-size: 32px;
-    }
+  #jumbotron {
+    font-size: 32px;
+  }
 }