linaro-jekyll-theme 4.1.5 → 4.3.2

data/_sass/core/navbar.scss

@@ -1,28 +1,82 @@
 #wrapper {
+  @include media-breakpoint-up($nav_expand_point) {
+    .navbar.hover_animated .nav-item > .dropdown-menu {
+      display: block;
+      opacity: 0;
+      visibility: hidden;
+      transition: 0.3s;
+      margin-top: 0;
+    }
+    .navbar.hover_animated .nav-item:hover .nav-link {
+      color: #fff;
+    }
+    .navbar.hover_animated .dropdown-menu.fade-down {
+      top: 80%;
+      transform: rotateX(-75deg);
+      transform-origin: 0% 0%;
+    }
+    .navbar.hover_animated .dropdown-menu.fade-up {
+      top: 180%;
+    }
+    .navbar.hover_animated .nav-item:hover > .dropdown-menu {
+      transition: 0.3s;
+      opacity: 1;
+      visibility: visible;
+      top: 100%;
+      transform: rotateX(0deg);
+    }
+  }
+
   #universal_nav {
+    z-index: 2;
+    position: static;
     padding-top: $universal_navbar_height_padding;
     padding-bottom: $universal_navbar_height_padding;
     background-color: $universal_navbar_bg_color;
     color: $universal_navbar_text_color;
     .nav-item {
-        &.active {
-            background-color: $secondary;
-        }
+      &.nav-item-icon {
         a.nav-link {
+          padding: 5px 12px;
+        }
+        &:hover {
+          span {
             color: $universal_navbar_text_color;
+          }
         }
-    }
-    .navbar-toggler {
-        .icon-bar {
-            background-color: $universal_navbar_text_color;
+        span {
+          color: #fff;
+        }
+      }
+      &:hover {
+        a.nav-link {
+          color: $universal_navbar_active_text_hover_color;
         }
+      }
+      &.active {
+        background-color: $universal_navbar_active_bg_color;
+        a.nav-link {
+          color: $universal_navbar_active_text_color;
+        }
+      }
+      a.nav-link {
+        color: $universal_navbar_text_color;
+        padding: 5px 20px;
+      }
+    }
+    .navbar-toggler,
+    .dropdown_hamburger {
+      .icon-bar {
+        background-color: $universal_navbar_text_color;
+      }
     }
     .dropdown-menu {
-        z-index: 9999999;
+      z-index: 9999999;
     }
   }
   #main-navigation {
     padding-top: $navbar_height_padding;
+    z-index: 999;
     padding-bottom: $navbar_height_padding;
     background-color: $navbar_bg_color !important;
     color: $navbar_text_color;
@@ -33,43 +87,42 @@
       }
     }
     .nav-item {
-        &.active {
-            a::before {
-                display: block;
-                opacity: 1;
-                width: 100% !important;
-                left: 0 !important;
-            }
-        }
-        a.nav-link {
-            color: $navbar_text_color;
-        }
-    }
-    .navbar-toggler {
-        .icon-bar {
-            background-color: $navbar_text_color;
+      &.active {
+        a::before {
+          display: block;
+          opacity: 1;
+          width: 100% !important;
+          left: 0 !important;
         }
+      }
+      a.nav-link {
+        color: $navbar_text_color;
+      }
     }
-    .navbar-toggler {
+    .navbar-toggler,
+    .dropdown_hamburger {
       .icon-bar {
         background-color: $navbar_text_color;
       }
     }
     .search {
-        .dropdown-menu.show {
-            right: 0 !important;
-            min-width: 300px;
-            left: auto;
-        }
+      .dropdown-menu.show {
+        right: 0 !important;
+        min-width: 300px;
+        left: auto;
+      }
+      button.btn.btn-outline-primary.border-0 {
+        display: block;
+        border-radius: 0px;
+      }
     }
   }
   // Multi-level dropdowns
   .navbar {
     li {
-        @include media-breakpoint-down(sm) {
-            text-align: center;
-        }
-
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
     }
     .nav-item {
       @include media-breakpoint-down(sm) {
@@ -91,7 +144,7 @@
           height: 3px;
           left: 50%;
           position: absolute;
-          background:$primary;
+          background: $primary;
           transition: width 0.3s ease 0s, left 0.3s ease 0s;
           width: 0;
         }
@@ -119,39 +172,39 @@
       }
     }
     .dropdown-menu {
-        background-color: #f9f9f9;
-        padding-top:0px;
-        padding-bottom:0px;
-        border-radius:0px;
-        @include media-breakpoint-down(sm) {
-            padding: 10px;
-            padding-top:10px;
-            padding-bottom: 10px;
-        }
+      background-color: #f9f9f9;
+      padding-top: 0px;
+      padding-bottom: 0px;
+      border-radius: 0px;
+      @include media-breakpoint-down(sm) {
+        padding: 10px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
       a {
         cursor: pointer;
-         color: #000;
-        padding: .5rem 1.5rem;
-        width:100%;
+        color: #000;
+        padding: 0.5rem 1.5rem;
+        width: 100%;
         display: inline-block;
       }
       li {
         &:hover {
-            background-color: $primary;
+          background-color: $primary;
+          color: #fff;
+          & > a {
             color: #fff;
-            &> a {
-                color: #fff;
-                text-decoration: none;
-            }
+            text-decoration: none;
+          }
         }
       }
     }
 
     .dropdown-item {
-        padding: 0;
-        @include media-breakpoint-down(sm) {
-            text-align: center;
-        }
+      padding: 0;
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
       &.active {
         color: inherit;
         text-decoration: none;
@@ -165,9 +218,9 @@
       &:hover {
         background-color: $primary;
         color: #fff;
-        &> a {
-            color: #fff;
-            text-decoration: none;
+        & > a {
+          color: #fff;
+          text-decoration: none;
         }
       }
     }
@@ -238,4 +291,64 @@
       }
     }
   }
+  .dropdown_hamburger {
+    button {
+      background: none;
+      border: none;
+      /* remove the blue outline when active or focused */
+      &:active,
+      &:focus {
+        outline: 0;
+      }
+    }
+
+    .icon-bar {
+      display: block;
+      width: 22px;
+      height: 2px;
+      border-radius: 1px;
+      margin: 4px 0 4px 0;
+      transition: transform opacity filter transform-origin 0.2s;
+    }
+    .icon-bar {
+      /* .navbar closed top .icon-bar no rotation - straight */
+      &:nth-of-type(1) {
+        transform: rotate(0);
+      }
+
+      /* .navbar open middle .icon-bar visible */
+      &:nth-of-type(2) {
+        opacity: 1;
+        filter: alpha(opacity=100);
+      }
+
+      /* .navbar open bottom .icon-bar no rotation - straight */
+      &:nth-of-type(3) {
+        transform: rotate(0);
+      }
+    }
+    /* styles for when .navbar is closed */
+    &.show {
+      /* basic styles for each icon bar */
+      .icon-bar {
+        /* .navbar open top .icon-bar rotated down 45° */
+        &:nth-of-type(1) {
+          transform: rotate(45deg);
+          transform-origin: 10% 10%;
+        }
+
+        /* .navbar open middle .icon-bar invisible */
+        &:nth-of-type(2) {
+          opacity: 0;
+          filter: alpha(opacity=0);
+        }
+
+        /* .navbar open bottom .icon-bar rotated up 45° */
+        &:nth-of-type(3) {
+          transform: rotate(-45deg);
+          transform-origin: 10% 90%;
+        }
+      }
+    }
+  }
 }

data/_sass/core/sticky_tab_bar.scss

@@ -0,0 +1,35 @@
+#wrapper {
+  #tabbed-nav-bar {
+    z-index: 9999999;
+    position: inherit;
+    &.fixed-top {
+      z-index: 999999;
+      position: fixed;
+    }
+    nav.navbar {
+      min-height: $tabbed_nav_height !important;
+      background-color: $tabbed_nav_bg !important;
+      span.icon-bar {
+        background-color: $tabbed_nav_text_colour;
+      }
+      a#sub-navigation-header {
+        color: $tabbed_nav_text_colour;
+      }
+      .nav-item {
+        a.nav-link {
+          display: block;
+          color: $tabbed_nav_text_colour;
+          &.active {
+            background-color: $tabbed_nav_active_bg_colour !important;
+            color: $tabbed_nav_active_colour !important;
+          }
+        }
+      }
+      .nav-item.dropdown.show {
+        a.nav-link.dropdown-toggle {
+          color: $tabbed_nav_active_colour !important;
+        }
+      }
+    }
+  }
+}

data/_sass/core/theme.scss

@@ -1,56 +1,88 @@
 #wrapper {
-    overflow-x:hidden;
-    .btn{
-        &.btn-primary {
-            color: #fff;
+  #main_content {
+    ul {
+      list-style: none;
+      li {
+        &::before {
+          content: "\2022";
+          color: $primary;
+          font-weight: bold;
+          display: inline-block;
+          width: 1em;
+          margin-left: -1em;
         }
-        &.btn-secondary {
-            color: #fff;
+        ul > li {
+          &::before {
+            content: "\2022";
+            color: transparent;
+            font-weight: bold;
+            display: block;
+            width: 0.5em;
+            left: -0.5em;
+            height: 0.5em;
+            border: 1px solid $primary;
+            border-radius: 100%;
+            position: relative;
+            top: 0.5em;
+          }
         }
+      }
     }
-    .dotted {
-        border: 6px dotted $primary;
-        border-radius: 10px;
+  }
+  .btn {
+    &.btn-primary {
+      color: #fff;
     }
-    .blog-content {
-        @include media-breakpoint-up(xl){
-            font-size: 1.4rem;
-        }
+    &.btn-secondary {
+      color: #fff;
     }
-    blockquote {
-        width:100%;
-        font-family:Open Sans;
-        font-style:italic;
-        color: #555555;
-        padding:1.2em 30px 1.2em 75px;
-        border-left:8px solid $primary ;
-        line-height:1.6;
-        position: relative;
-        background:#EDEDED;
-        &::before{
-            font-family:Arial;
-            content: "\201C";
-            color:$primary;
-            font-size:6em;
-            position: absolute;
-            left: 10px;
-            top:-10px;
-        }
+  }
+  .dotted {
+    border: 6px dotted $primary;
+    border-radius: 10px;
+  }
+  .blog-content {
+    @include media-breakpoint-up(xl) {
+      font-size: 1.4rem;
     }
-    .card {
-        &.background_image {
-            img {
-                filter: brightness(0.6);
-                height: 100%;
-            }
-        }
-        .card-img-top {
-            height: 150px;
-            width: 100%;
-            object-fit: cover;
-        }
+  }
+  blockquote {
+    width: 100%;
+    font-family: "Lato";
+    font-display: swap;
+    font-style: italic;
+    color: #555555;
+    padding: 1.2em 30px 1.2em 75px;
+    border-left: 8px solid $primary;
+    line-height: 1.6;
+    position: relative;
+    background: #ededed;
+    &::before {
+      font-family: "Lato";
+      font-display: swap;
+      content: "\201C";
+      color: $primary;
+      font-size: 6em;
+      position: absolute;
+      left: 10px;
+      top: -10px;
+    }
+  }
+  .card {
+    &.background_image {
+      img {
+        filter: brightness(0.6);
+        height: 100%;
+      }
     }
-    .darken {
-        filter: brightness(0.5);
+    .card-img-top {
+      height: 150px;
+      width: 100%;
+      object-fit: cover;
+      font-family: "object-fit: cover;";
     }
+  }
+  .darken {
+    filter: brightness(0.5);
+  }
 }