New image carousel, new asset loading

site/themes/citra-bs-theme/layouts/_default/baseof.html

@@ -24,12 +24,14 @@
     {{ end }}
 
     <title>{{- if .IsHome }}Homepage{{- else }}{{ .Title }}{{- end }} | {{ .Site.Title }} | Nintendo 3DS Emulator</title>
-    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Ubuntu|Dosis" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
     <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/style.css"/>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
+              integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+
+    <!--<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
+    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>-->
 
     {{ if eq (getenv "HUGO_ENV") "PRD" }}
       <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
@@ -114,8 +116,8 @@
 		    </div>
 		</div>
 
-    {{ block "scripts" . }}{{ end }}
     <script src="{{ .Site.BaseURL }}/js/script.js"></script>
+    {{ block "scripts" . }}{{ end }}
   </body>
 
   </html>

site/themes/citra-bs-theme/layouts/index.html

@@ -14,6 +14,13 @@
 
 {{ define "scripts" }}
 <script type="text/javascript">
-    $('#carousel').carousel({ interval: 4000 });
+    $('#carousel-inner').slick({
+        autoplay: true,
+        autoplaySpeed: 4000,
+        lazyLoaded: true,
+        prevArrow: "#slider-prev",
+        nextArrow: "#slider-next",
+        lazyLoad: "progressive"
+    });
 </script>
 {{ end }}

site/themes/citra-bs-theme/layouts/partials/jumbotron.html

@@ -7,23 +7,29 @@
   <div id="carousel" class="carousel slide" data-ride="carousel">
 
       <!-- Wrapper for slides -->
-      <div class="carousel-inner">
+      <div id="carousel-inner" class="carousel-inner">
       {{ $jumbotronFiles := readDir "/static/images/jumbotron/" }}
       {{ range $index, $element := $jumbotronFiles }}
           {{ $fileTitle := (index (split .Name "-") 1) }}
           {{ $fileTitle := (index (split $fileTitle ".") 0) }}
-          <div class="item {{if eq $index 0}}active{{end}}">
+          <div>
-            <img class="article-image img-responsive center-block" src="/images/jumbotron{{ $element.Name | relURL }}" alt="...">
+              <img class="article-image img-responsive center-block"
+                 {{if eq $index 0}}
+                    src="/images/jumbotron{{ $element.Name | relURL }}"
+                 {{else}}
+                    data-lazy="/images/jumbotron{{ $element.Name | relURL }}"
+                 {{end}}
+                 alt="{{ $fileTitle }}">
             <div class="carousel-caption">{{ $fileTitle }}</div>
           </div>
       {{ end }}
       </div>
 
       <!-- Controls -->
-      <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
+      <a class="left carousel-control" href="#carousel" role="button" id="slider-prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
       </a>
-      <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
+      <a class="right carousel-control" href="#carousel" role="button" id="slider-next">
         <span class="glyphicon glyphicon-chevron-right"></span>
       </a>
 

src/scss/citra-theme.scss

@@ -75,7 +75,7 @@ a:hover {
   padding-right: 56px;
   padding-left: 25px;
   width: 84px;
-  background: url('../images/name.png') no-repeat 50% 50%;
+  background: url('../images/contentlogo.svg') no-repeat 50% 50%;
   background-size: 64px;
 }
 .navbar-default {
@@ -127,33 +127,37 @@ a:hover {
   box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   z-index: 2;
+  background: #000;
 }
+
 .carousel-inner .item {
   overflow: hidden;
 }
+
 .carousel-inner .item .article-image {
   width: 100%;
   height: 100%;
 }
+
 .carousel-caption {
   text-align: left;
-  padding-bottom: 0px;
+  padding: 0 10px 0;
-  height: 25px;
+
-  font-size: 12px;
+  font-size: 14px;
+
   left: 15px;
-  top: -12px;
+  bottom: 460px;
-}
+
-.carousel-name {
+  position: relative;
-  position: absolute;
+
-  top: 375px;
+  z-index: 1010; // 10 more then slick
-  left: 50%;
+
-  margin-left: -62px;
+  background: rgba(0, 0, 0, 0.5);
-  z-index: 99;
+  display: inline-block;
-  width: 125px;
+
-  height: 50px;
+  max-width: 300px;
-  background: url('../images/name.png') no-repeat;
-  background-size: 100% auto;
 }
+
 .carousel-content {
   position: absolute;
   top: 440px;
@@ -170,7 +174,7 @@ a:hover {
   width: 100%;
   height: 215px;
   z-index: 3;
-  background-image: url('../images/logo.png');
+  background-image: url('../images/logo.svg');
   background-size: 215px 215px;
   background-repeat: no-repeat;
   background-position: center;

src/scss/style.scss

@@ -10,5 +10,6 @@ $headings-font-family:    "Dosis";
 $headings-color:          #888;
 
 @import "./node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss";
+@import "vendor/slick.scss";
 @import "citra-theme.scss";
 @import "citra-theme-media.scss";

src/scss/vendor/slick.scss

@@ -0,0 +1,98 @@
+/* Slider */
+
+.slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+.slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.dragging {
+        cursor: pointer;
+        cursor: hand;
+    }
+}
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: block;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+}
+.slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+        float: right;
+    }
+    img {
+        display: block;
+    }
+    &.slick-loading img {
+        display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized & {
+        display: block;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+
+    .slick-vertical & {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}