64 lines
2.4 KiB
Handlebars
64 lines
2.4 KiB
Handlebars
|
<style>
|
||
|
|
/* Bright theme for screens larger than 768px */
|
||
|
|
@media (max-width: 769px) {
|
||
|
|
body {
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
.blog-header {
|
||
|
|
background-color: #000000;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="{{asset "js/content_index.js"}}"></script>
|
||
|
|
|
||
|
|
{{!< default}}
|
||
|
|
|
||
|
|
<!-- Blog Header -->
|
||
|
|
<header class="blog-header {{#if @site.cover_image}} has-cover{{/if}}">
|
||
|
|
<div class="inner">
|
||
|
|
<!-- Back to Content Index Button -->
|
||
|
|
<a href="/" class="back-button">
|
||
|
|
<img src="{{asset "images/arrow_back_kazalo.svg"}}" alt="Back Button" />
|
||
|
|
</a>
|
||
|
|
<div class="box index-box">
|
||
|
|
<img src="{{asset "images/kazalo.svg"}}" alt="Kazalo" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div id="index" class="container">
|
||
|
|
<main class="content" role="main">
|
||
|
|
<div class="index-content">
|
||
|
|
{{#get "posts" limit="all" order="published_at asc" filter="tag:-prenos"}}
|
||
|
|
{{#foreach posts}}
|
||
|
|
<div class="post-summary" id="{{id}}">
|
||
|
|
<div class="image-overlay-container">
|
||
|
|
{{#if feature_image}}
|
||
|
|
<figure class="post-figure">
|
||
|
|
{{#if feature_image_caption}}
|
||
|
|
<hr>
|
||
|
|
<figcaption class="post-feature-image-caption">{{feature_image_caption}}</figcaption>
|
||
|
|
{{/if}}
|
||
|
|
<img src="{{feature_image}}" alt="{{title}}" class="post-feature-image">
|
||
|
|
</figure>
|
||
|
|
{{/if}}
|
||
|
|
<div class="overlay-text">
|
||
|
|
<h2 class="post-title">
|
||
|
|
<!-- Store the index as a data attribute -->
|
||
|
|
<a href="{{url}}" class="post-link" data-index="{{@index}}">{{title}}</a>
|
||
|
|
</h2>
|
||
|
|
<!-- Subheader list to be populated dynamically -->
|
||
|
|
<ul class="post-subheaders" data-url="{{url}}"><span class="bullet"></span></ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{/foreach}}
|
||
|
|
{{/get}}
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>
|