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:
Michael Romero
parent
c9e4340676
commit
87adc9d691
16 changed files with 386 additions and 156 deletions
|
|
@ -326,49 +326,139 @@ footer .theme-by {
|
|||
}
|
||||
}
|
||||
|
||||
/* --- Post and page layout --- */
|
||||
/* --- Post and page headers --- */
|
||||
|
||||
header.header-page {
|
||||
margin-bottom: 20px;
|
||||
.intro-header {
|
||||
margin: 80px 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header.header-page .page-heading {
|
||||
.intro-header.big-img {
|
||||
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;
|
||||
}
|
||||
|
||||
header.header-post .post-heading h1 {
|
||||
font-size: 35px;
|
||||
margin-top: 0;
|
||||
.intro-header.big-img .page-heading,
|
||||
.intro-header.big-img .post-heading {
|
||||
padding: 100px 0;
|
||||
color: #FFF;
|
||||
text-shadow: 1px 1px 3px #000;
|
||||
}
|
||||
|
||||
header.header-page .page-heading h1 {
|
||||
.intro-header .page-heading h1 {
|
||||
margin-top: 0;
|
||||
font-size: 50px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header.header-post .post-heading .post-subheading,
|
||||
header.header-page .page-heading .page-subheading {
|
||||
font-size: 24px;
|
||||
.intro-header .post-heading h1 {
|
||||
margin-top: 0;
|
||||
font-size: 35px;
|
||||
}
|
||||
.intro-header .page-heading .page-subheading,
|
||||
.intro-header .post-heading .post-subheading {
|
||||
font-size: 27px;
|
||||
line-height: 1.1;
|
||||
display: block;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
header.header-post .post-heading .post-subheading {
|
||||
.intro-header .post-heading .post-subheading {
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
.intro-header.big-img .img-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
header.header-page .page-heading h1 {
|
||||
font-size: 80px;
|
||||
.header-section.has-img .no-img {
|
||||
margin-top: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -456,4 +546,4 @@ table tr td :first-child {
|
|||
table tr th :last-child,
|
||||
table tr td :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
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,32 +1,111 @@
|
|||
// Dean Attali / Beautiful Jekyll 2015
|
||||
// Dean Attali / Beautiful Jekyll 2016
|
||||
|
||||
// Shorten the navbar after scrolling a little bit down
|
||||
$(window).scroll(function() {
|
||||
if ($(".navbar").offset().top > 50) {
|
||||
$(".navbar").addClass("top-nav-short");
|
||||
} else {
|
||||
$(".navbar").removeClass("top-nav-short");
|
||||
var main = {
|
||||
|
||||
bigImgEl : null,
|
||||
numImgs : null,
|
||||
|
||||
init : function() {
|
||||
// Shorten the navbar after scrolling a little bit down
|
||||
$(window).scroll(function() {
|
||||
if ($(".navbar").offset().top > 50) {
|
||||
$(".navbar").addClass("top-nav-short");
|
||||
} else {
|
||||
$(".navbar").removeClass("top-nav-short");
|
||||
}
|
||||
});
|
||||
|
||||
// On mobile, hide the avatar when expanding the navbar menu
|
||||
$('#main-navbar').on('show.bs.collapse', function () {
|
||||
$(".navbar").addClass("top-nav-expanded");
|
||||
});
|
||||
$('#main-navbar').on('hidden.bs.collapse', function () {
|
||||
$(".navbar").removeClass("top-nav-expanded");
|
||||
});
|
||||
|
||||
// On mobile, when clicking on a multi-level navbar menu, show the child links
|
||||
$('#main-navbar').on("click", ".navlinks-parent", function(e) {
|
||||
var target = e.target;
|
||||
$.each($(".navlinks-parent"), function(key, value) {
|
||||
if (value == target) {
|
||||
$(value).parent().toggleClass("show-children");
|
||||
} else {
|
||||
$(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();
|
||||
}
|
||||
});
|
||||
|
||||
// On mobile, hide the avatar when expanding the navbar menu
|
||||
$('#main-navbar').on('show.bs.collapse', function () {
|
||||
$(".navbar").addClass("top-nav-expanded");
|
||||
});
|
||||
$('#main-navbar').on('hidden.bs.collapse', function () {
|
||||
$(".navbar").removeClass("top-nav-expanded");
|
||||
});
|
||||
|
||||
// On mobile, when clicking on a multi-level navbar menu, show the child links
|
||||
$('#main-navbar').on("click", ".navlinks-parent", function(e) {
|
||||
var target = e.target;
|
||||
$.each($(".navlinks-parent"), function(key, value) {
|
||||
if (value == target) {
|
||||
$(value).parent().toggleClass("show-children");
|
||||
} else {
|
||||
$(value).parent().removeClass("show-children");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
|
||||
document.addEventListener('DOMContentLoaded', main.init);
|
||||
Loading…
Add table
Add a link
Reference in a new issue