implement posts style, to be completed

change font
add secondary navigation to homepage
This commit is contained in:
Lorenzo Dellacà
2020-08-15 12:40:28 +02:00
parent 121708786d
commit a1f0fcaf99
8 changed files with 407 additions and 545 deletions

View File

@@ -7,48 +7,53 @@
<main>
<h2>Most recent posts</h2>
<div class="mind-feed_main">
<nav class="navbar-secondary unselectable">
{{navigation type="secondary"}}
</nav>
<div class="mind-content_main">
<div class="mind-feed_main">
<!-- Looping through every post -->
{{#foreach posts}}
<article class="{{post_class}}">
<a class="post-card_main" href="{{url}}">
<header class="post-card_header">
<img class="post-card_feature-image" src="{{feature_image}}" />
<h3>{{title}}</h3>
</header>
<section class="post-excerpt">
<p>{{excerpt words="26"}}</p>
</section>
<footer class="post-card_footer">
{{primary_author.name}}
{{#if primary_author.profile_image}}<img class="post-card_profile-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
</footer>
</a>
</article>
{{/foreach}}
<!-- Looping through every post -->
{{#foreach posts}}
<article class="{{post_class}}">
<a class="post-card_main" href="{{url}}">
<header class="post-card_header">
<img class="post-card_feature-image" src="{{img_url feature_image size="s"}}" />
<p class="post-card_meta"><span class="post-card_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
<h3>{{title}}</h3>
</header>
<section class="post-card_excerpt">
<p>{{excerpt words="26"}}</p>
</section>
<footer class="post-card_footer">
{{primary_author.name}}
{{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
</footer>
</a>
</article>
{{/foreach}}
</div>
</div>
</main>
<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->
<script>
if(window.screen.width > 800)
{
document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' +
'<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' +
'<script>' +
'VANTA.NET({'+
'el: "#vantajs",'+
'color: 0x3fd5ff,'+
'backgroundColor: 0x190f2b,'+
'mouseControls: true,'+
'touchControls: true,'+
'minHeight: 200.00,'+
'minWidth: 200.00,'+
'scale: 1.00,'+
'scaleMobile: 1.00'+
'})'+
'<\/script>');
}
</script>
<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->
<script>
if(window.screen.width > 800)
{
document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' +
'<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' +
'<script>' +
'VANTA.NET({'+
'el: "#vantajs",'+
'color: 0x3fd5ff,'+
'backgroundColor: 0x190f2b,'+
'mouseControls: true,'+
'touchControls: true,'+
'minHeight: 200.00,'+
'minWidth: 200.00,'+
'scale: 1.00,'+
'scaleMobile: 1.00'+
'})'+
'<\/script>');
}
</script>