jumbo-jekyll-theme-test 1.0.0

data/_sass/core.scss

@@ -0,0 +1,12 @@
+// Core Jumbo Jekyll Theme Sass includes.
+@import "core/fonts";
+@import "core/nav";
+@import "core/theme";
+@import "core/cookieconsent";
+@import "core/footer";
+@import "core/social-media-icons";
+@import "core/breadcrumb";
+@import "core/tables";
+@import "core/forms";
+@import "core/owl.carousel.min";
+@import "core/owl.theme.default.min";

data/_sass/core/404.scss

@@ -0,0 +1,189 @@
+svg#Linaro-Sprinkle {background-color: #fff;height: 350px;width: auto;}
+
+svg#Linaro-Sprinkle > path.purple{
+  transform: translateY(0);
+  animation: popup 10s linear infinite;
+}
+svg#Linaro-Sprinkle > path.red{
+  transform: translateY(0);
+  animation: popup-small 9s linear infinite;
+}
+svg#Linaro-Sprinkle > path.green-big{
+  transform: translateY(0);
+  animation: popup 10s linear infinite;
+}
+svg#Linaro-Sprinkle > path.green{
+  transform: translateY(0);
+  animation: popup 7s linear infinite;
+}
+svg#Linaro-Sprinkle > path.purple-big{
+  transform: translateY(0);
+  animation: popup-small 8s linear infinite;
+}
+svg#Linaro-Sprinkle > path.pink{
+  transform: translateY(0);
+  animation: popup-small 11s linear infinite;
+}
+
+
+
+svg#Linaro-Sprinkle > path {
+  opacity: .4;
+}
+svg#Linaro-Sprinkle:hover > path {
+  animation: to-start .3s ease;
+  transform: translateY(0);
+  opacity: .7;
+}
+
+@keyframes to-start {
+
+     0% {
+      transform: translateY(40px);
+      opacity:.4;
+    }
+    10% {
+      transform: translateY(35px);
+      opacity:.425;
+    }
+    20% {
+      transform: translateY(30px);
+      opacity:.45;
+    }
+    30% {
+      transform: translateY(25px);
+      opacity:.475;
+    }
+    40% {
+      transform: translateY(20px);
+      opacity:.5;
+    }
+    50% {
+      transform: translateY(15px);
+      opacity:.55;
+    }
+    60% {
+      transform: translateY(10px);
+      opacity:.6;
+    }
+    70% {
+      transform: translateY(5px);
+      opacity:.625;
+    }
+    80% {
+      transform: translateY(0px);
+      opacity:.65;
+    }
+    90% {
+      transform: translateY(0px);
+      opacity:.675;
+    }
+    100% {
+      transform: translateY(0);
+      opacity:.7;
+    }
+}
+
+@keyframes popup {
+    0% {
+      transform: translateY(0);
+    }
+    10% {
+      transform: translateY(20px);
+    }
+    20% {
+      transform: translateY(40px);
+    }
+    30% {
+      transform: translateY(60px);
+    }
+    35% {
+      transform: translateY(80px);
+    }
+    40% {
+      transform: translateY(100px);
+    }
+    45% {
+      transform: translateY(120px);
+    }
+    50% {
+      transform: translateY(140px);
+    }
+    55% {
+      transform: translateY(120px);
+    }
+    60% {
+      transform: translateY(100px);
+    }
+    65% {
+      transform: translateY(80px);
+    }
+    70% {
+      transform: translateY(60px);
+    }
+    80% {
+      transform: translateY(40px);
+    }
+    90% {
+      transform: translateY(20px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+}
+
+@keyframes popup-small {
+    0% {
+      transform: translateY(0);
+    }
+    10% {
+      transform: translateY(20px);
+    }
+    20% {
+      transform: translateY(40px);
+    }
+    30% {
+      transform: translateY(60px);
+    }
+    40% {
+      transform: translateY(70px);
+    }
+    50% {
+      transform: translateY(75px);
+    }
+    60% {
+      transform: translateY(70px);
+    }
+    70% {
+      transform: translateY(60px);
+    }
+    80% {
+      transform: translateY(40px);
+    }
+    90% {
+      transform: translateY(20px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+}
+
+svg#Linaro-Sprinkle .cls-1,svg#Linaro-Sprinkle .cls-6
+{
+    fill:#9c3 ;
+}
+svg#Linaro-Sprinkle .cls-2,svg#Linaro-Sprinkle .cls-3
+{
+    fill:#c03;
+}
+svg#Linaro-Sprinkle .cls-3{
+    opacity:0.6;
+}
+svg#Linaro-Sprinkle .cls-4,svg#Linaro-Sprinkle .cls-5
+{
+    fill:#909;
+}
+svg#Linaro-Sprinkle .cls-5,svg#Linaro-Sprinkle .cls-6
+{
+    opacity:0.7;
+}

data/_sass/core/animations.scss

@@ -0,0 +1,125 @@
+
+// fade-in animation - fades in on page load.
+@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@-webkit-keyframes rotate {
+	from
+	{
+    	-webkit-transform: rotate(0deg);
+  	}
+  	to
+	{
+    	-webkit-transform: rotate(360deg);
+  	}
+}
+@-moz-keyframes rotate {
+	from
+	{
+    	-webkit-transform: rotate(0deg);
+  	}
+  	to
+	{
+    	-webkit-transform: rotate(360deg);
+  	}
+}
+@keyframes rotate {
+	from
+	{
+    	-webkit-transform: rotate(0deg);
+  	}
+  	to
+	{
+    	-webkit-transform: rotate(360deg);
+  	}
+}
+
+.fade-in-one{
+	opacity:0;  /* make things invisible upon start */
+	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+	-moz-animation:fadeIn ease-in 1;
+	animation:fadeIn ease-in 1;
+
+	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+	-moz-animation-fill-mode:forwards;
+	animation-fill-mode:forwards;
+
+	-webkit-animation-duration:0.5s;
+	-moz-animation-duration:0.5s;
+	animation-duration:0.5s;
+
+    -webkit-animation-delay: 1s;
+    -moz-animation-delay: 1s;
+    animation-delay: 1s;
+}
+.fade-in-two{
+	opacity:0;  /* make things invisible upon start */
+	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+	-moz-animation:fadeIn ease-in 1;
+	animation:fadeIn ease-in 1;
+
+	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+	-moz-animation-fill-mode:forwards;
+	animation-fill-mode:forwards;
+
+	-webkit-animation-duration:0.5s;
+	-moz-animation-duration:0.5s;
+	animation-duration:0.5s;
+
+    -webkit-animation-delay: 1.5s;
+    -moz-animation-delay: 1.5s;
+    animation-delay: 1.5s;
+}
+.fade-in-three{
+	opacity:0;  /* make things invisible upon start */
+	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+	-moz-animation:fadeIn ease-in 1;
+	animation:fadeIn ease-in 1;
+
+	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+	-moz-animation-fill-mode:forwards;
+	animation-fill-mode:forwards;
+
+	-webkit-animation-duration:0.5s;
+	-moz-animation-duration:0.5s;
+	animation-duration:0.5s;
+
+    -webkit-animation-delay: 2s;
+    -moz-animation-delay: 2s;
+    animation-delay: 2s;
+}
+.fade-in-four{
+	opacity:0;  /* make things invisible upon start */
+	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+	-moz-animation:fadeIn ease-in 1;
+	animation:fadeIn ease-in 1;
+
+	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+	-moz-animation-fill-mode:forwards;
+	animation-fill-mode:forwards;
+
+	-webkit-animation-duration:0.5s;
+	-moz-animation-duration:0.5s;
+	animation-duration:0.5s;
+
+    -webkit-animation-delay: 2.5s;
+    -moz-animation-delay: 2.5s;
+    animation-delay: 2.5s;
+}
+
+
+.rotate-img
+{
+    -webkit-animation-name:             rotate;
+	-moz-animation-name:				rotate;
+	animation-name:						rotate;
+    -webkit-animation-duration:         30s;
+    -moz-animation-duration:         	30s;
+    animation-duration:         		30s;
+    -webkit-animation-iteration-count:  infinite;
+    -moz-animation-iteration-count:  	infinite;
+    animation-iteration-count: 			infinite;
+    -webkit-animation-timing-function: 	linear;
+    -moz-animation-timing-function: 	linear;
+    animation-timing-function: 			linear;
+}

data/_sass/core/blog.scss

@@ -0,0 +1,441 @@
+
+/* Pagination Style */
+div#pagination_panel > ul > li.active > a{
+    color: $navbar-inverse-bg;
+}
+
+/* Make sure the comments sections is beneath content. */
+section#comments-section {
+    clear: both;
+}
+#content-container p.post_excerpt {
+    font-size: 15px;
+    margin-top: 10px;
+}
+
+/* Make sure div extends with content */
+article.post-content {
+    overflow: auto;
+}
+
+.row.blog_post picture {
+    top: -20px;
+    position: relative;
+}
+#content-container .blog_post h3 {
+    margin-top: 0px;
+}
+#content-container .row.blog_post picture {
+    top:0px;
+}
+
+#content-container .blog_post img.img-responsive.center-block {
+    padding:0px;
+}
+
+/* Blog Side Bar Panel Title */
+#wrapper h3.panel-title {
+    color: $blog-panel-title-colour;
+}
+
+/* Post Info - post.html layout */
+.post-info {
+    margin-bottom: 20px;
+}
+
+/* Blog Author Image */
+img.blog-author-image {
+    transition: all 100ms linear;
+}
+
+/* Change the author image border on hover */
+a:hover > img.blog-author-image {
+    border-color: #d4d4d4;
+}
+
+/* Blog Author Text */
+#wrapper small.blog-author.text-center > a > em {
+    color:white;
+    transition: all 500ms linear;
+}
+#wrapper small.blog-author.text-center > a:hover > em {
+    color:#a681b8;
+}
+/* Blog Post Images - Responsive by default */
+article.post-content img {
+    width: 100%;
+    height: auto;
+}
+
+/* Blog Image thumbnail size */
+img.img-thumbnail {
+    width: 100px;
+}
+
+/* Blog Side Panel Styles*/
+.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: $featured-image-text-color;
+    margin-left: auto;
+    margin-bottom: 82px;
+    margin-right: auto;
+    z-index: 1;
+    height: 300px;
+    text-align: center;
+    line-height: 50px;
+    position: relative;
+    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;
+    background-repeat: no-repeat;
+}
+.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;
+    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: 10px;
+  padding-top: 10px;
+}
+
+.featured_blog_post {
+  height: auto;
+  margin: -1px;
+  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;
+}
+/* Article Post Content Style */
+article.post-content {
+    overflow: auto;
+}
+article.post-content > .col-md-8 {
+    padding: 0;
+}
+article.post-content > .col-md-4 {
+    padding: 15px;
+}
+// Tag Cloud Style 
+div.tag_cloud {
+    margin-bottom: 20px;
+    margin-top: 20px;
+}
+div#featured-jumbotron.blog {
+    margin-top: 0;
+}
+div.previous_post{
+    display:none;
+}
+div.next_post{
+    display:none;
+}
+a.previous_post_anchor {
+    position: fixed;
+    top: 50%;
+    right:0;
+    z-index: 99999;
+}
+a.next_post_anchor {
+    position: fixed;
+    top: 50%;
+    left:0;
+    z-index: 99999;
+}
+//Small Inline Blog Images
+#wrapper img.small-inline {
+    width: 100px;
+    height: auto;
+    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:$screen-sm-min){
+    
+    
+    article{
+        padding-right: 20px;
+    }
+    
+    div.previous_post{
+        display:block;
+        width: 0; 
+        height: 0; 
+        border-top: 20px solid transparent;
+        border-bottom: 20px solid transparent;
+        border-left: 20px solid #eee;
+    }
+    div.next_post{
+        display:block;
+        width: 0; 
+        height: 0; 
+        border-top: 20px solid transparent;
+        border-bottom: 20px solid transparent;
+        border-right: 20px solid #eee;
+    }
+}
+//Responsive CSS for Blog
+@media(max-width:$screen-sm-min){
+    .blog-full-page-image-info {
+        height: 360px;
+    }
+
+    .blog-title{
+        width:95%;
+        font-size: 34px;
+    }
+    .blog-author-image {
+    height: 100px;
+    width: 100px;
+    }
+    em.post_date {
+        font-size: 13px;
+    }
+    p.post_excerpt {
+        font-size: 11px;
+    }
+
+    h3.post_title {
+        font-size: 17px;
+    }
+    
+    h1#featured-image-blog-title {
+        font-size: 26px;
+    }
+
+
+
+}
+
+
+@media (max-width: $screen-xs-min) {
+    
+    
+    article.post-content > .col-md-4 {
+        padding: 0px;
+    }
+    
+}
+
+@media(max-width: $screen-md-min - 1){
+    /* Blog Sidebar */
+    .col-md-3.blog-sidebar {
+        margin-top: 15px;
+        padding-right: 0px;
+        padding-left: 0px;
+    }
+    
+    .featured_blog_post img.img-responsive {
+        padding-right: 10px;
+    }
+}
+
+// Blog Side Panel Styles
+.featured_post_post > .row {
+    padding: 5px;
+    border-bottom: 1px solid #eee;
+}
+.featured_post_post > .row > div > img{
+    margin-top:10px;
+    margin-left:10px;
+    
+    transition: all 200ms linear;
+}
+
+.featured_blog_post > .row {
+    padding: 5px;
+    border-bottom: 1px solid #eee;
+    
+    transition: all 200ms linear;
+}
+.featured_blog_post > .row > div > img{
+    margin-top:10px;
+    margin-left:10px;
+}
+
+.blog-row .panel, .blog-post-content .panel  {
+    border: 0 !important;
+}
+
+.blog-row .panel-body,  .panel-body {
+    border:1px solid #eee;
+    padding-bottom:0;
+    padding-top: 0;
+}
+
+.blog-row .col-md-9.col-sm-9.col-xs-9 , .blog-post-content .col-md-9.col-sm-9.col-xs-9 {
+    padding-left:20px;
+    padding-top:10px;
+}
+
+//Hover Style
+.featured_blog_post>.row:hover {
+    background-color: #fdfdfd;
+}
+
+.featured_blog_post  small em {
+    color:black;
+}
+
+