New image carousel, new asset loading
This commit is contained in:
James
parent
2b6e798156
commit
7e7d7c5a8d
|
|
@ -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=Dosis" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Ubuntu|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/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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}}">
|
||||
<img class="article-image img-responsive center-block" src="/images/jumbotron{{ $element.Name | relURL }}" alt="...">
|
||||
<div>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
height: 25px;
|
||||
font-size: 12px;
|
||||
padding: 0 10px 0;
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
left: 15px;
|
||||
top: -12px;
|
||||
}
|
||||
.carousel-name {
|
||||
position: absolute;
|
||||
top: 375px;
|
||||
left: 50%;
|
||||
margin-left: -62px;
|
||||
z-index: 99;
|
||||
width: 125px;
|
||||
height: 50px;
|
||||
background: url('../images/name.png') no-repeat;
|
||||
background-size: 100% auto;
|
||||
bottom: 460px;
|
||||
|
||||
position: relative;
|
||||
|
||||
z-index: 1010; // 10 more then slick
|
||||
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: inline-block;
|
||||
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Reference in New Issue