linaro-jekyll-theme 1.1 → 4.1.0

data/_sass/bootstrap/utilities/_text.scss

@@ -0,0 +1,58 @@
+// stylelint-disable declaration-no-important
+
+//
+// Text
+//
+
+.text-monospace { font-family: $font-family-monospace; }
+
+// Alignment
+
+.text-justify  { text-align: justify !important; }
+.text-nowrap   { white-space: nowrap !important; }
+.text-truncate { @include text-truncate; }
+
+// Responsive alignment
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .text#{$infix}-left   { text-align: left !important; }
+    .text#{$infix}-right  { text-align: right !important; }
+    .text#{$infix}-center { text-align: center !important; }
+  }
+}
+
+// Transformation
+
+.text-lowercase  { text-transform: lowercase !important; }
+.text-uppercase  { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
+
+// Weight and italics
+
+.font-weight-light  { font-weight: $font-weight-light !important; }
+.font-weight-normal { font-weight: $font-weight-normal !important; }
+.font-weight-bold   { font-weight: $font-weight-bold !important; }
+.font-italic        { font-style: italic !important; }
+
+// Contextual colors
+
+.text-white { color: $white !important; }
+
+@each $color, $value in $theme-colors {
+  @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+.text-body { color: $body-color !important; }
+.text-muted { color: $text-muted !important; }
+
+.text-black-50 { color: rgba($black, .5) !important; }
+.text-white-50 { color: rgba($white, .5) !important; }
+
+// Misc
+
+.text-hide {
+  @include text-hide($ignore-warning: true);
+}

data/_sass/bootstrap/utilities/_visibility.scss

@@ -0,0 +1,11 @@
+//
+// Visibility utilities
+//
+
+.visible {
+  @include invisible(visible);
+}
+
+.invisible {
+  @include invisible(hidden);
+}

data/_sass/core.scss

@@ -0,0 +1,15 @@
+// Core Jumbo Jekyll Theme Sass includes.
+@import "core/normalize";
+@import "core/navbar";
+@import "core/theme";
+@import "core/breadcrumb";
+@import "core/jumbotron";
+@import "core/syntax";
+@import "core/footer";
+@import "core/flow";
+@import "core/blog";
+@import "core/error";
+@import "core/cookies";
+@import "core/fontello";
+@import "core/featherlight";
+@import "core/carousel-styles";

data/_sass/core/blog.scss

@@ -1,338 +1,264 @@
-div#pagination_panel > ul > li.active > a{
-    color: $navbar-inverse-bg;
-}
-.full-page-image {
-    color: $gray-base;
-    height:500px;
-    width: 100%;
-    object-fit: cover;
-    display: block;
-}
-.blog-row {
-    margin-top: 30px;
-    margin-left: 15px;
-    margin-right: 15px;
-}
-
-
-
-
-#main-container small.blog-author.text-center > a > em {
-    color:white;
-    transition: all 500ms linear;
-}
-#main-container small.blog-author.text-center > a:hover > em {
-    color:#a681b8;
-}
-
-img.blog-author-image {
-    transition: all 100ms linear;
-}
-
-a:hover > img.blog-author-image {
-    border-color: #d4d4d4;
-}
-
-
-
-
-//Make post images responsive by default
-.post-content img {
-    width: 100%;
-    height: auto;
-}
+#wrapper {
+  .latest-featured-post {
+    picture {
+      height: 100% !important;
+      display: block;
+      overflow: hidden;
+      .post_index_header_image {
+        max-width: 100%;
+        width: 100%;
+        max-height: 400px;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
 
-//Img Thumbnail size
-img.img-thumbnail {
+  #image_header {
+    height: 200px;
+    overflow: hidden;
+    object-fit: cover;
+    .header_background_image.lazyloaded {
+      object-fit: cover;
+      object-position: 50% 50% !important;
+      height: 200px;
+      width: 100vw;
+      display: block;
+      position: relative;
+    }
+  }
+  .blog-content {
+    .blog_content_image {
+      margin: 20px 0px;
+      &.small-inline {
+        @include media-breakpoint-up(md) {
+          width: 200px;
+          display: block;
+          float: left;
+          margin: 0px 20px;
+        }
+      }
+      &.medium-inline {
+        @include media-breakpoint-up(md) {
+          width: 300px;
+          display: block;
+          float: left;
+          margin: 0px 20px;
+        }
+      }
+      &.large-inline {
+        @include media-breakpoint-up(md) {
+          width: 400px;
+          display: block;
+          float: left;
+          margin: 0px 20px;
+        }
+      }
+      &.right {
+        @include media-breakpoint-up(md) {
+          float: right !important;
+        }
+      }
+    }
+  }
+  #post_search {
+    #results-container {
+      position: absolute;
+      z-index: 9999;
+      background-color: white;
+      width: 100%;
+      border: 1px solid #eee;
+      height: 300px;
+      overflow: scroll;
+    }
+    .close_search {
+      display: none;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      font-size: 26px;
+      color: #000;
+      line-height: 80px;
+      padding-right: 10px;
+      &:hover {
+        text-decoration: none;
+        color: $primary;
+      }
+    }
+    .search_result_img {
+      width: 100px;
+    }
+  }
+  .highlighter-rouge {
+    div.highlight {
+      position: relative;
+      pre.highlight {
+        padding: 15px;
+        position: relative;
+      }
+      .copyBtn {
+        position: absolute;
+        bottom: 0px;
+        z-index: 9999;
+        height: 40px;
+        right: 0px;
+        border-left: 1px solid white;
+        border-top: 1px solid white;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+        border-bottom-left-radius: 0px;
+        width: 40px;
+        &:hover,
+        &:focus {
+          background-color: $primary;
+        }
+      }
+    }
+  }
+  .suggested_post_thumb {
     width: 100px;
-}
-.blog-panel{
-    margin-top:30px;
-}
-.blog-panel .panel-primary .panel-heading{
-    margin-left: 5px;
-}
-.img-blog{
-    height:600px;
-}
-.blog-featured-img-container{
-    position: relative;
-}
-.blog-full-page-image-info{
-    color: #FFF;
-    height: 500px;
-    margin-left: auto;
-    margin-right: auto;
-    z-index: 1;
-    text-align: center;
-    margin-top: -21px;
-    line-height:50px;
-    position: relative;
-    top: 10vh;
-    vertical-align:middle;
-}
-.blog-title {
-    width: 50%;
-    margin-right: auto;
-    margin-left: auto;
-    font-size: 56px;
-}
-.panel-primary {
-    border: 1px solid $brand-primary;
-}
-.panel-heading {
-    background-color: $brand-primary;
-    color: #fff;
-}
-
-.blog-author-image{
-    height: 83px;
-    width: 83px;
-    border-radius:83px;
-    border: 4px solid white;
-    background-size: cover;
-}
-
-.full-page-image-text{
-    top:300px;
-    position:relative;
-    margin-left: auto;
-    margin-right: auto;
-    z-index: 1;
-    line-height:50px;
-    vertical-align:middle;
-}
-
-.no-padding {
-   padding: 0 !important;
-   margin: 0 !important;
-}
-.blog-icons{
-    border: 1px solid $gray-light;
-    border-radius: 45px;
-    width: 34px;
-    padding: 5px;
-    float: left;
-    display: block;
-    margin: 5px;
-    opacity: .8;
-    color: $gray-light;
-    -webkit-transition: all 1s ease;
-    transition: all 1s ease;
-}
-
-.blog-icons:hover{
-    color: $brand-primary;
-    border: 1px solid $brand-primary;
-    background-color: black;
-    opacity: 1;
-    transition: all 1s ease;
-}
-.blog-icons:active, .blog-icons:focus{
-    border: 1px solid $gray-light;
-    border-radius: 45px;
-    width: 45px;
-    margin: 4px;
-    opacity: .8;
-    color: $gray-light;
-}
-
-
-.blog-read-more-btn{
-    background-color: white;
-    border: 2px solid $gray-base;
-    border-radius: 0px;
-    font-weight: normal;
-    color: $gray-base;
-    transition: all 1s ease;
-    padding: 6px;
-}
-.blog-read-more-btn:hover{
-    background-color: $brand-primary;
-    color: white;
-    transition: all 1s ease;
-}
-.blog-read-more-btn:active, .blog-read-more-btn:focus{
-    background-color: $brand-primary;
-    color: white;
-    transition: all 1s ease;
-}
-a.featured_blog_post_text {
-    font-size: 13px;
-    line-height: 18px;
-    color: $gray-base;
-    transition: all 1s ease;
-}
-a.featured_blog_post_text:hover{
-    font-size: 13px;
-    line-height: 18px;
-    color: $brand-primary;
-    transition: all 1s ease;
-}
-
-.blog_post{
-  border-bottom: 1px solid $gray-lighter;
-  padding-bottom: 13px;
-}
-
-.featured_blog_post {
-  height: auto;
-  margin: 5px;
-  border-bottom: 1px solid $gray-lighter;
-  padding: 12px;
-}
-
-.blog-well {
-    background: $gray-darker;
-}
-.btn-blog{
-    border: 2px solid $gray-lighter;
-    color: $gray-base;
-    padding: 6px;
-}
-.btn-blog:hover{
-    color: $brand-primary;
-}
-
-.blog-img {
-    margin-top:25px;
-}
-
-#blog-background-image{
-    background-size: cover;
-    height:800px;
-}
-
-.post-content ol, .post-content ul {
-    line-height: 1.6em;
-    font-size: 16px;
-}
-.post_tag {
-    background-color: $gray-lighter;
-    margin: 2px;
-    color: #464646;
-}
-
-//Pagination centered style
-.pagination-centered { text-align: center;}
-
-
-
-
-
-
-// Tag Cloud Style 
-div.tag_cloud {
-    margin-bottom: 20px;
-    margin-top: 20px;
-}
-
-div.previous_post{
-    display:none;
-}
-div.next_post{
-    display:none;
-}
-a.previous_post_anchor {
-    position: fixed;
-    top: 50%;
-    right:0;
-}
-a.next_post_anchor {
-    position: fixed;
-    top: 50%;
-    left:0;
-}
-
-//Small Inline Blog Images
-img.small-inline {
-    width: 100px !important;
-    height: auto !important;
-    display: inline-block;
-    float: left;
-    margin-right: 30px;
-    margin-top: 5px;
-    margin-bottom: 30px;
-}
-
-// Medium Inline Blog Images
-img.medium-inline {
-    width: 200px !important;
-    height: auto !important;
-    display: inline-block;
-    float: left;
-    margin-right: 30px;
-    margin-top: 5px;
-    margin-bottom: 30px;
-}
-
-//Large Inline Blog Images
-img.large-inline {
-    width: 300px !important;
-    height: auto !important;
-    display: inline-block;
-    float: left;
-    margin-right: 30px;
-    margin-top: 5px;
-    margin-bottom: 30px;
-}
-
-img.medium-inline.right {
-    float: right;
-}
-
-img.small-inline.right {
-    float: right;
-}
-
-img.large-inline.right {
-    float: right;
-}
-
-// Previous and Next Post Style
-@media(min-width:992px){
-    
-    div.previous_post{
-        display:block;
-        width: 0; 
-        height: 0; 
-        border-top: 20px solid transparent;
-        border-bottom: 20px solid transparent;
-        border-left: 20px solid #eee;
+    border: 1px solid lightgray;
+    padding: 0;
+    @include media-breakpoint-down(xs) {
+      width: 100%;
     }
-    div.next_post{
-        display:block;
-        width: 0; 
-        height: 0; 
-        border-top: 20px solid transparent;
-        border-bottom: 20px solid transparent;
-        border-right: 20px solid #eee;
+  }
+  .media-body {
+    h5 {
+      font-size: 1.7rem;
     }
-}
-
-//Responsive CSS for Blog
-@media(max-width:767px){
-
-    .blog-title{
-        width:95%;
-        font-size: 34px;
+    & > a {
+      color: #313131;
+      &:hover {
+        text-decoration: none;
+      }
     }
-    .blog-author-image {
-    height: 100px;
+  }
+  .suggested_post_date {
+    display: block;
+  }
+  a {
+    transition: all 500ms ease-in-out;
+    &:hover {
+      color: $primary;
+    }
+  }
+  .rounded-circle {
     width: 100px;
+    height: 100px;
+    transition: all 100ms ease-out;
+    object-fit: cover;
+    &:hover {
+      transform: rotate(-5deg);
+      -webkit-box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.75);
+      -moz-box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.75);
+      box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.75);
+    }
+    &.small {
+      height: 50px;
+      width: 50px;
+      margin-right: 10px;
     }
-    .blog_post{
-        padding:20px;
+  }
+  .featured_post {
+    .row {
+      border-radius: 20px;
+      overflow: hidden;
+      -webkit-box-shadow: 0px 0px 20px 5px #f0f0f0;
+      -moz-box-shadow: 0px 0px 20px 5px #e5e5e5;
+      box-shadow: 0px 0px 20px 5px #ebebeb;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0px;
+      .latest-featured-post-content {
+        .card {
+          border-radius: 20px;
+          border-top-right-radius: 0px;
+          border-bottom-right-radius: 0px;
+          @include media-breakpoint-down(sm) {
+            border-bottom-right-radius: 20px;
+            border-top-right-radius: 0px;
+            border-top-left-radius: 0px;
+          }
+        }
+      }
     }
-    em.post_date {
-        font-size: 13px;
+  }
+  .blog_image_header {
+    overflow: hidden;
+    position: relative;
+    img {
+      height: 150px;
+      width: 100%;
+      object-fit: cover;
     }
-    p.post_excerpt {
-        font-size: 11px;
+    &:after {
+      content: "";
+      display: none;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      top: 0px;
+      opacity: 0.4;
+      background-color: $primary;
+      z-index: 0;
     }
-
-    h3.post_title {
-        font-size: 17px;
+    &:before {
+      content: "Read";
+      display: none;
+      width: 100%;
+      color: white;
+      position: absolute;
+      z-index: 0;
+      text-align: center;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 1;
     }
-
-}
+  }
+  .blog-post-item-col {
+    a {
+      color: black;
+      &:hover {
+        text-decoration: none;
+        color: black;
+      }
+    }
+    .rounded-circle:hover {
+      transform: none;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      -moz-box-shadow: none;
+    }
+    .card {
+      a.wrapper_link {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+      border-radius: 20px;
+      overflow: hidden;
+      -webkit-box-shadow: 0px 0px 20px 5px #f0f0f0;
+      -moz-box-shadow: 0px 0px 20px 5px #e5e5e5;
+      box-shadow: 0px 0px 20px 5px #ebebeb;
+      transition: all 200ms ease;
+      a {
+        position: relative;
+        z-index: 2;
+      }
+      &:hover {
+        transform: translateY(-5px);
+        -webkit-box-shadow: 0px 0px 20px 5px #b3b3b3;
+        -moz-box-shadow: 0px 0px 20px 5px #b3b3b3;
+        box-shadow: 0px 0px 20px 5px#b3b3b3;
+        .blog_image_header {
+          &:before,
+          &:after {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}