Support for big title images and bugfixes
Add support for big title images
(e6cb0a4f54
).
Several bugfixes including pygment_highlights.css dependency, Index page
alignment/containers, and Index page site title. Also renamed
description to subtitle, in line with the original theme.
This commit is contained in:
parent
c9e4340676
commit
87adc9d691
@ -1,5 +1,6 @@
|
|||||||
+++
|
+++
|
||||||
title = ""
|
title = ""
|
||||||
description = ""
|
subtitle = ""
|
||||||
date = "2014-07-11T10:54:24+02:00"
|
date = "2014-07-11T10:54:24+02:00"
|
||||||
|
bigimg = ""
|
||||||
+++
|
+++
|
||||||
|
@ -8,6 +8,7 @@ pygmentsUseClasses = true
|
|||||||
|
|
||||||
[Params]
|
[Params]
|
||||||
logo = "img/avatar-icon.png"
|
logo = "img/avatar-icon.png"
|
||||||
|
subtitle = "Build a beautiful and simple website in minutes"
|
||||||
|
|
||||||
[Author]
|
[Author]
|
||||||
name = "Some Person"
|
name = "Some Person"
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Soccer
|
title: Soccer
|
||||||
description: Best sport ever!
|
subtitle: Best sport ever!
|
||||||
date: 2015-01-19
|
date: 2015-01-19
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: To be
|
title: To be
|
||||||
description: ... or not to be?
|
subtitle: ... or not to be?
|
||||||
date: 2015-02-13
|
date: 2015-02-13
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Test markdown
|
title: Test markdown
|
||||||
description: Each post also has a subtitle
|
subtitle: Each post also has a subtitle
|
||||||
date: 2015-02-20
|
date: 2015-02-20
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Flake it till you make it
|
title: Flake it till you make it
|
||||||
description: Excerpt from Soulshaping by Jeff Brown
|
subtitle: Excerpt from Soulshaping by Jeff Brown
|
||||||
date: 2015-02-26
|
date: 2015-02-26
|
||||||
|
bigimg: /img/path.jpg
|
||||||
---
|
---
|
||||||
|
|
||||||
Under what circumstances should we step off a path? When is it essential that we finish what we start? If I bought a bag of peanuts and had an allergic reaction, no one would fault me if I threw it out. If I ended a relationship with a woman who hit me, no one would say that I had a commitment problem. But if I walk away from a seemingly secure route because my soul has other ideas, I am a flake?
|
Under what circumstances should we step off a path? When is it essential that we finish what we start? If I bought a bag of peanuts and had an allergic reaction, no one would fault me if I threw it out. If I ended a relationship with a woman who hit me, no one would say that I had a commitment problem. But if I walk away from a seemingly secure route because my soul has other ideas, I am a flake?
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Code Sample
|
title: Code Sample
|
||||||
description: Using Pygments
|
subtitle: Using Pygments
|
||||||
date: 2016-03-08
|
date: 2016-03-08
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -7,8 +7,28 @@
|
|||||||
|
|
||||||
{{ partial "nav.html" . }}
|
{{ partial "nav.html" . }}
|
||||||
|
|
||||||
<div role="main" class="container main-content">
|
<header class="header-section ">
|
||||||
|
<div class="intro-header no-img">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1>{{.Site.Title}}</h1>
|
||||||
|
{{if .Site.Params.subtitle}}
|
||||||
|
<hr class="small">
|
||||||
|
<span class="page-subheading">{{.Site.Params.subtitle}}</span>
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div role="main" class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||||
<div class="posts-list">
|
<div class="posts-list">
|
||||||
{{ $pag := .Paginate (where .Data.Pages "Type" "post") }}
|
{{ $pag := .Paginate (where .Data.Pages "Type" "post") }}
|
||||||
{{ range $pag.Pages }}
|
{{ range $pag.Pages }}
|
||||||
@ -16,9 +36,9 @@
|
|||||||
<a href="{{ .Permalink }}">
|
<a href="{{ .Permalink }}">
|
||||||
<h2 class="post-title">{{ .Title }}</h2>
|
<h2 class="post-title">{{ .Title }}</h2>
|
||||||
|
|
||||||
{{ if .Description }}
|
{{ if .Params.subtitle }}
|
||||||
<h3 class="post-subtitle">
|
<h3 class="post-subtitle">
|
||||||
{{ .Description }}
|
{{ .Params.subtitle }}
|
||||||
</h3>
|
</h3>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</a>
|
</a>
|
||||||
@ -50,7 +70,8 @@
|
|||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css" />
|
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css" />
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
|
||||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/rouge.css" />
|
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/pygment_highlights.css" />
|
||||||
|
|
||||||
<!-- Facebook OpenGraph tags -->
|
<!-- Facebook OpenGraph tags -->
|
||||||
<meta property="og:title" content="{{ .Title }}" />
|
<meta property="og:title" content="{{ .Title }}" />
|
||||||
|
64
layouts/partials/header.html
Normal file
64
layouts/partials/header.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<!-- TODO this file has become a mess, refactor it -->
|
||||||
|
|
||||||
|
{{ if or .Params.bigimg .Title }}
|
||||||
|
|
||||||
|
{{ if .Params.bigimg }}
|
||||||
|
<div id="header-big-imgs" data-num-img=1 data-img-src-1="{{.Params.bigimg}}"></div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<header class="header-section {{ if .Params.bigimg }}has-img{{ end }}">
|
||||||
|
{{ if .Params.bigimg }}
|
||||||
|
<div class="big-img intro-header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||||
|
<div class="{{ .Type }}-heading">
|
||||||
|
<h1>{{ if .Title }}{{ .Title }}{{ else }}<br/>{{ end }}</h1>
|
||||||
|
{{ if .Params.subtitle }}
|
||||||
|
{{ if eq .Type "page" }}
|
||||||
|
<hr class="small">
|
||||||
|
<span class="{{ .Type }}-subheading">{{ .Params.subtitle }}</span>
|
||||||
|
{{ else }}
|
||||||
|
<h2 class="{{ .Type }}-subheading">{{ .Params.subtitle }}</h2>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if eq .Type "post" }}
|
||||||
|
<span class="post-meta">Posted on {{ .Date.Format "January 2, 2006" }}</span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class='img-desc'></span>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
<div class="intro-header no-img">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||||
|
<div class="{{ .Type }}-heading">
|
||||||
|
<h1>{{ if .Title }}{{ .Title }}{{ else }}<br/>{{ end }}</h1>
|
||||||
|
{{ if .Params.subtitle }}
|
||||||
|
{{ if eq .Type "page" }}
|
||||||
|
<hr class="small">
|
||||||
|
<span class="{{ .Type }}-subheading">{{ .Params.subtitle }}</span>
|
||||||
|
{{ else }}
|
||||||
|
<h2 class="{{ .Type }}-subheading">{{ .Params.subtitle }}</h2>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if eq .Type "post" }}
|
||||||
|
<span class="post-meta">Posted on {{ .Date.Format "January 2, 2006" }}</span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
{{ else }}
|
||||||
|
<div class="intro-header"></div>
|
||||||
|
{{ end }}
|
@ -1,20 +1,7 @@
|
|||||||
{{ if .Title }}
|
{{ partial "header.html" . }}
|
||||||
<header class="header-page">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
|
||||||
<div class="page-heading">
|
|
||||||
<h1>{{ .Title }}</h1>
|
|
||||||
{{ if .Description }}
|
|
||||||
<hr class="small">
|
|
||||||
<span class="page-subheading">{{ .Description }}</span>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="container" role="main">
|
||||||
|
<div class="row">
|
||||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
{{ if .Site.DisqusShortname }}
|
{{ if .Site.DisqusShortname }}
|
||||||
@ -23,4 +10,5 @@
|
|||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,27 +1,12 @@
|
|||||||
<header class="header-post">
|
{{ partial "header.html" . }}
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
|
||||||
<div class="post-heading">
|
|
||||||
<h1>{{ .Title }}</h1>
|
|
||||||
{{ if .Description }}
|
|
||||||
<h2 class="post-subheading">{{ .Description }}</h2>
|
|
||||||
{{ end }}
|
|
||||||
<span class="post-meta">Posted on {{ .Date.Format "January 2, 2006" }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<article>
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
||||||
|
<article role="main" class="blog-post">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
</article>
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
|
||||||
<ul class="pager blog-pager">
|
<ul class="pager blog-pager">
|
||||||
{{ if .PrevInSection }}
|
{{ if .PrevInSection }}
|
||||||
<li class="previous">
|
<li class="previous">
|
||||||
@ -34,13 +19,13 @@
|
|||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{ if .Site.DisqusShortname }}
|
{{ if .Site.DisqusShortname }}
|
||||||
<div class="row disqus-comments">
|
<div class="disqus-comments">
|
||||||
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
|
||||||
{{ template "_internal/disqus.html" . }}
|
{{ template "_internal/disqus.html" . }}
|
||||||
</div>
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
|
||||||
|
@ -326,49 +326,139 @@ footer .theme-by {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Post and page layout --- */
|
/* --- Post and page headers --- */
|
||||||
|
|
||||||
header.header-page {
|
.intro-header {
|
||||||
margin-bottom: 20px;
|
margin: 80px 0 20px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.intro-header.big-img {
|
||||||
header.header-page .page-heading {
|
background: no-repeat center center;
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
margin-top: 51px; /* The small navbar is 50px tall + 1px border */
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .big-img-transition {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
background: no-repeat center center;
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
-webkit-transition: opacity 1s linear;
|
||||||
|
-moz-transition: opacity 1s linear;
|
||||||
|
transition: opacity 1s linear;
|
||||||
|
}
|
||||||
|
.intro-header .page-heading {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.intro-header.big-img .page-heading,
|
||||||
header.header-post .post-heading h1 {
|
.intro-header.big-img .post-heading {
|
||||||
font-size: 35px;
|
padding: 100px 0;
|
||||||
margin-top: 0;
|
color: #FFF;
|
||||||
|
text-shadow: 1px 1px 3px #000;
|
||||||
}
|
}
|
||||||
|
.intro-header .page-heading h1 {
|
||||||
header.header-page .page-heading h1 {
|
margin-top: 0;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
margin-top: 0;
|
|
||||||
}
|
}
|
||||||
|
.intro-header .post-heading h1 {
|
||||||
header.header-post .post-heading .post-subheading,
|
margin-top: 0;
|
||||||
header.header-page .page-heading .page-subheading {
|
font-size: 35px;
|
||||||
font-size: 24px;
|
}
|
||||||
|
.intro-header .page-heading .page-subheading,
|
||||||
|
.intro-header .post-heading .post-subheading {
|
||||||
|
font-size: 27px;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
display: block;
|
display: block;
|
||||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
margin: 10px 0 0;
|
margin: 10px 0 0;
|
||||||
}
|
}
|
||||||
|
.intro-header .post-heading .post-subheading {
|
||||||
header.header-post .post-heading .post-subheading {
|
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
.intro-header.big-img .page-heading .page-subheading,
|
||||||
|
.intro-header.big-img .post-heading .post-subheading {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .page-heading hr {
|
||||||
|
box-shadow: 1px 1px 3px #000;
|
||||||
|
-webkit-box-shadow: 1px 1px 3px #000;
|
||||||
|
-moz-box-shadow: 1px 1px 3px #000;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .post-heading .post-meta {
|
||||||
|
color: #EEE;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .img-desc {
|
||||||
|
background: rgba(30, 30, 30, 0.6);
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #EEE;
|
||||||
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
header.header-post .post-heading h1 {
|
.intro-header {
|
||||||
|
margin-top: 130px;
|
||||||
|
}
|
||||||
|
.intro-header.big-img {
|
||||||
|
margin-top: 91px; /* Full navbar is small navbar + 20px padding on each side when expanded */
|
||||||
|
}
|
||||||
|
.intro-header.big-img .page-heading,
|
||||||
|
.intro-header.big-img .post-heading {
|
||||||
|
padding: 150px 0;
|
||||||
|
}
|
||||||
|
.intro-header .page-heading h1 {
|
||||||
|
font-size: 80px;
|
||||||
|
}
|
||||||
|
.intro-header .post-heading h1 {
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
}
|
}
|
||||||
|
.intro-header.big-img .img-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 768px) {
|
.header-section.has-img .no-img {
|
||||||
header.header-page .page-heading h1 {
|
margin-top: 0;
|
||||||
font-size: 80px;
|
background: #FCFCFC;
|
||||||
|
margin: 0 0 40px;
|
||||||
|
padding: 20px 0;
|
||||||
|
box-shadow: 0 0 5px #AAA;
|
||||||
|
}
|
||||||
|
/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
|
||||||
|
.header-section.has-img .intro-header.no-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 365px) {
|
||||||
|
.header-section.has-img .intro-header.no-img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.intro-header.big-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .page-heading,
|
||||||
|
.intro-header.big-img .post-heading {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.header-section.has-img .big-img {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 325px) {
|
||||||
|
.intro-header.big-img {
|
||||||
|
height: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
BIN
static/img/path.jpg
Normal file
BIN
static/img/path.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 262 KiB |
@ -1,24 +1,30 @@
|
|||||||
// Dean Attali / Beautiful Jekyll 2015
|
// Dean Attali / Beautiful Jekyll 2016
|
||||||
|
|
||||||
// Shorten the navbar after scrolling a little bit down
|
var main = {
|
||||||
$(window).scroll(function() {
|
|
||||||
|
bigImgEl : null,
|
||||||
|
numImgs : null,
|
||||||
|
|
||||||
|
init : function() {
|
||||||
|
// Shorten the navbar after scrolling a little bit down
|
||||||
|
$(window).scroll(function() {
|
||||||
if ($(".navbar").offset().top > 50) {
|
if ($(".navbar").offset().top > 50) {
|
||||||
$(".navbar").addClass("top-nav-short");
|
$(".navbar").addClass("top-nav-short");
|
||||||
} else {
|
} else {
|
||||||
$(".navbar").removeClass("top-nav-short");
|
$(".navbar").removeClass("top-nav-short");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// On mobile, hide the avatar when expanding the navbar menu
|
// On mobile, hide the avatar when expanding the navbar menu
|
||||||
$('#main-navbar').on('show.bs.collapse', function () {
|
$('#main-navbar').on('show.bs.collapse', function () {
|
||||||
$(".navbar").addClass("top-nav-expanded");
|
$(".navbar").addClass("top-nav-expanded");
|
||||||
});
|
});
|
||||||
$('#main-navbar').on('hidden.bs.collapse', function () {
|
$('#main-navbar').on('hidden.bs.collapse', function () {
|
||||||
$(".navbar").removeClass("top-nav-expanded");
|
$(".navbar").removeClass("top-nav-expanded");
|
||||||
});
|
});
|
||||||
|
|
||||||
// On mobile, when clicking on a multi-level navbar menu, show the child links
|
// On mobile, when clicking on a multi-level navbar menu, show the child links
|
||||||
$('#main-navbar').on("click", ".navlinks-parent", function(e) {
|
$('#main-navbar').on("click", ".navlinks-parent", function(e) {
|
||||||
var target = e.target;
|
var target = e.target;
|
||||||
$.each($(".navlinks-parent"), function(key, value) {
|
$.each($(".navlinks-parent"), function(key, value) {
|
||||||
if (value == target) {
|
if (value == target) {
|
||||||
@ -27,6 +33,79 @@ $('#main-navbar').on("click", ".navlinks-parent", function(e) {
|
|||||||
$(value).parent().removeClass("show-children");
|
$(value).parent().removeClass("show-children");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// show the big header image
|
||||||
|
main.initImgs();
|
||||||
|
},
|
||||||
|
|
||||||
|
initImgs : function() {
|
||||||
|
// If the page was large images to randomly select from, choose an image
|
||||||
|
if ($("#header-big-imgs").length > 0) {
|
||||||
|
main.bigImgEl = $("#header-big-imgs");
|
||||||
|
main.numImgs = main.bigImgEl.attr("data-num-img");
|
||||||
|
|
||||||
|
// 2fc73a3a967e97599c9763d05e564189
|
||||||
|
// set an initial image
|
||||||
|
var imgInfo = main.getImgInfo();
|
||||||
|
var src = imgInfo.src;
|
||||||
|
var desc = imgInfo.desc;
|
||||||
|
main.setImg(src, desc);
|
||||||
|
|
||||||
|
// For better UX, prefetch the next image so that it will already be loaded when we want to show it
|
||||||
|
var getNextImg = function() {
|
||||||
|
var imgInfo = main.getImgInfo();
|
||||||
|
var src = imgInfo.src;
|
||||||
|
var desc = imgInfo.desc;
|
||||||
|
|
||||||
|
var prefetchImg = new Image();
|
||||||
|
prefetchImg.src = src;
|
||||||
|
// if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
var img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
|
||||||
|
$(".intro-header.big-img").prepend(img);
|
||||||
|
setTimeout(function(){ img.css("opacity", "1"); }, 50);
|
||||||
|
|
||||||
|
// after the animation of fading in the new image is done, prefetch the next one
|
||||||
|
//img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
|
||||||
|
setTimeout(function() {
|
||||||
|
main.setImg(src, desc);
|
||||||
|
img.remove();
|
||||||
|
getNextImg();
|
||||||
|
}, 1000);
|
||||||
|
//});
|
||||||
|
}, 6000);
|
||||||
|
};
|
||||||
|
|
||||||
|
// If there are multiple images, cycle through them
|
||||||
|
if (main.numImgs > 1) {
|
||||||
|
getNextImg();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getImgInfo : function() {
|
||||||
|
var randNum = Math.floor((Math.random() * main.numImgs) + 1);
|
||||||
|
var src = main.bigImgEl.attr("data-img-src-" + randNum);
|
||||||
|
var desc = main.bigImgEl.attr("data-img-desc-" + randNum);
|
||||||
|
|
||||||
|
return {
|
||||||
|
src : src,
|
||||||
|
desc : desc
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setImg : function(src, desc) {
|
||||||
|
$(".intro-header.big-img").css("background-image", 'url(' + src + ')');
|
||||||
|
if (typeof desc !== typeof undefined && desc !== false) {
|
||||||
|
$(".img-desc").text(desc).show();
|
||||||
|
} else {
|
||||||
|
$(".img-desc").hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 2fc73a3a967e97599c9763d05e564189
|
// 2fc73a3a967e97599c9763d05e564189
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', main.init);
|
Loading…
Reference in New Issue
Block a user