98 lines
3.6 KiB
HTML
98 lines
3.6 KiB
HTML
---
|
|
---
|
|
<!DOCTYPE html>
|
|
<html>
|
|
{% include head.html %}
|
|
<body itemscope itemtype="http://schema.org/Article">
|
|
{% include header.html %}
|
|
<main class="content" role="main">
|
|
<article class="post">
|
|
{% if page.image %}
|
|
<div class="article-image">
|
|
<div class="post-image-image" style="background-image: url({% if page.image %}{{ page.image }}{% endif %})">
|
|
Article Image
|
|
</div>
|
|
<div class="post-meta">
|
|
<h1 class="post-title">{{ page.title }}</h1>
|
|
<div class="cf post-meta-text">
|
|
<div class="author-image" style="background-image: url({{ site.author_image }})">Blog Logo</div>
|
|
<h4 class="author-name" itemprop="author" itemscope itemtype="http://schema.org/Person">{{ site.author }}</h4>
|
|
</div>
|
|
<div style="text-align:center">
|
|
<a href="#topofpage" class="topofpage"><i class="fa fa-angle-down"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
$(document).ready(function(){
|
|
|
|
var $window = $(window),
|
|
$image = $('.post-image-image');
|
|
$window.on('scroll', function() {
|
|
var top = $window.scrollTop();
|
|
|
|
if (top < 0 || top > 1500) { return; }
|
|
$image
|
|
.css('transform', 'translate3d(0px, '+top/3+'px, 0px)')
|
|
.css('opacity', 1-Math.max(top/700, 0));
|
|
});
|
|
$window.trigger('scroll');
|
|
|
|
var height = $('.article-image').height();
|
|
$('.post-content').css('padding-top', height + 'px');
|
|
|
|
$(function() {
|
|
$('a[href*=#]:not([href=#])').click(function() {
|
|
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
|
|
var target = $(this.hash);
|
|
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
|
|
if (target.length) {
|
|
$('html,body').animate({
|
|
scrollTop: target.offset().top
|
|
}, 500);
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
}(jQuery));
|
|
</script>
|
|
{% else %}
|
|
<div class="noarticleimage">
|
|
<div class="post-meta">
|
|
<h1 class="post-title">{{ page.title }}</h1>
|
|
<div class="cf post-meta-text">
|
|
<div class="author-image" style="background-image: url({{ page.author_image }})">Blog Logo</div>
|
|
<h4 class="author-name" itemprop="author" itemscope itemtype="http://schema.org/Person">{{ page.author }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
{% endif %}
|
|
<section class="post-content">
|
|
<a name="topofpage"></a>
|
|
{{content}}
|
|
</section>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
<div class="bottom-closer">
|
|
<div class="background-closer-image" {%if site.cover %} style="background-image: url({{ site.cover }})"{% endif %}>
|
|
Image
|
|
</div>
|
|
<div class="inner">
|
|
<h1 class="blog-title">{{ site.title }}</h1>
|
|
<h2 class="blog-description">{{ site.description }}</h2>
|
|
<a href="/" class="btn">Back to Overview</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|