status-im
/
our-status-site-theme
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improved list, signle post, author and tag

This commit is contained in:
Nistor Cristian 2019-03-15 17:02:33 +02:00
parent b58b558a5a
commit 0fd92eb6f1
15 changed files with 1096 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

502
assets/css/style.css
View File

@ -3,72 +3,113 @@ time {
line-height: 18px;
font-size: 14px;
letter-spacing: -0.186667px;
color: rgba(103, 108, 118, 0.8); }
color: rgba(99, 102, 109, 0.8); }
figcaption {
width: 100%;
padding: 10px 0;
text-transform: uppercase;
padding: 15px 0;
font-size: 12px;
line-height: 18px;
font-weight: 700;
text-align: center; }
text-align: center;
border-bottom: 1px solid #EAECEF; }
.tags a {
margin-right: 20px;
font-family: "IBM Plex Mono", monospace;
font-weight: 600;
line-height: 19px;
font-size: 15px;
letter-spacing: -0.2px;
color: #4360DF;
text-transform: capitalize; }
pre {
overflow-x: auto;
margin: 30px 0;
padding: 20px;
max-width: 100%;
border: 1px solid #000000;
color: #ffffff;
background: #000000;
border-radius: 5px; }
hr {
margin: 50px 0; }
iframe[src*="https://www.youtube.com/"] {
height: calc(883px / 1.77777778) !important;
width: 100% !important; }
blockquote {
line-height: 36px;
font-size: 24px;
color: rgba(60, 64, 73, 0.8);
font-family: "Manrope", sans-serif;
font-weight: 500;
position: relative;
margin-bottom: 30px; }
blockquote:before {
content: '';
width: 26px;
height: 25px;
background-image: url(../img/quotes.svg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: -5px;
left: -15px; }
blockquote p {
line-height: 36px;
font-size: 24px;
color: rgba(60, 64, 73, 0.8);
font-family: "Manrope", sans-serif;
font-weight: 500; }
.tags {
position: relative;
z-index: 5;
color: rgba(99, 102, 109, 0.8); }
.tags a {
margin-right: 20px;
font-family: "IBM Plex Mono", monospace;
font-weight: 600;
line-height: 19px;
font-size: 15px;
letter-spacing: -0.2px;
color: #4360DF;
text-transform: capitalize; }
.tags a:hover {
color: #2D48BE; }
.sub-header {
border-top: 1px solid #EAECEF;
border-bottom: 1px solid #EAECEF;
padding: 0 40px;
font-family: "Manrope", sans-serif; }
.sub-header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
justify-content: center; }
.sub-header nav ul li {
margin: 0 10px;
display: flex; }
.sub-header nav ul li.nav-current a {
color: #4360DF; }
.sub-header nav ul li a {
font-size: 14px;
color: #000000;
padding: 16px 10px;
font-weight: 600; }
.sub-header nav ul li a:hover {
color: #4360DF; }
.stripe {
background: #000000;
display: flex;
padding: 0 40px;
height: 60px;
align-items: center;
font-family: "Manrope", sans-serif;
position: relative;
z-index: 20; }
.stripe a {
color: #ffffff;
font-size: 16px;
font-weight: 500; }
display: flex;
justify-content: space-between;
overflow: auto; }
.sub-header nav {
white-space: nowrap; }
.sub-header nav ul {
list-style-type: none;
margin: 0 0 0 -20px;
padding: 0;
width: 100%;
display: flex; }
.sub-header nav ul li {
margin: 0 10px;
display: flex; }
.sub-header nav ul li.nav-current a {
color: #4360DF; }
.sub-header nav ul li a {
font-size: 14px;
color: #000000;
padding: 16px 10px;
font-weight: 600; }
.sub-header nav ul li a:hover {
color: #4360DF; }
#search-form {
margin-left: auto;
position: relative;
height: 60px; }
height: 60px;
z-index: 9; }
#search-form #search-input {
border: none;
background: transparent;
color: #ffffff;
color: #000000;
font-size: 14px;
line-height: 19px;
padding: 20px 0 20px 40px;
@ -76,24 +117,25 @@ figcaption {
background-image: url("../img/search.svg");
background-position: center left;
background-repeat: no-repeat;
width: 130px; }
width: 130px;
height: 100%; }
#search-form #search-input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.6); }
color: rgba(0, 0, 0, 0.6); }
#search-form #search-input:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.6); }
color: rgba(0, 0, 0, 0.6); }
#search-form #search-input::placeholder {
color: rgba(255, 255, 255, 0.6); }
color: rgba(0, 0, 0, 0.6); }
#search-form.inactive #search-results {
display: none; }
#search-form #search-results {
position: absolute;
top: calc(100% - 10px);
top: calc(100% + 1px);
right: 0;
background: #FFFFFF;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
width: 320px;
border-radius: 4px;
max-height: 50vh;
max-height: 70vh;
overflow: auto; }
#search-form #search-results a {
color: #000000;
@ -101,7 +143,8 @@ figcaption {
line-height: 18px;
font-size: 14px;
padding: 10px;
border-top: 1px solid #EBEBEB; }
border-top: 1px solid #EBEBEB;
font-weight: 500; }
#search-form #search-results a:hover {
color: #4360DF; }
#search-form #search-results a:first-child {
@ -109,119 +152,294 @@ figcaption {
.post-intro {
margin: 90px 0 35px; }
.post-intro .inner {
text-align: center; }
.post-intro .inner .post-meta {
.post-intro .inner .post-meta {
display: flex;
align-items: center; }
.post-intro .inner .post-meta time:before {
content: ' - '; }
.post-intro .inner .post-meta .tags a {
margin: 0 8px 0 0; }
.post-intro .inner h1 {
margin-bottom: 10px; }
.post-intro .inner img {
margin-top: 90px;
max-width: 100%; }
.post-intro .inner .authors {
margin-right: 3px; }
.post-intro .inner .authors li {
margin: 0; }
.post-intro .inner .authors li:last-child a span:after {
display: none; }
.post-intro .inner .authors li a {
font-family: "IBM Plex Mono", monospace;
font-weight: 600;
line-height: 19px;
font-size: 15px;
letter-spacing: -0.2px;
color: #4360DF;
text-transform: capitalize;
display: flex;
margin-right: 3px; }
.post-intro .inner .authors li a span:after {
content: ', '; }
.post-intro .inner .authors li a:hover {
color: #2D48BE; }
.post-content {
margin-bottom: 70px; }
.post-content .editor-content {
position: relative; }
.post-content .editor-content h1, .post-content .editor-content h2, .post-content .editor-content h3, .post-content .editor-content h4 {
margin-top: 100px; }
.post-content .editor-content p {
line-height: 24px;
font-size: 16px;
color: #090909;
margin-bottom: 30px; }
.post-content .editor-content ul, .post-content .editor-content ol {
margin-bottom: 30px;
padding-left: 20px; }
.post-content .editor-content ul li, .post-content .editor-content ol li {
line-height: 24px;
font-size: 16px;
color: #090909;
margin-bottom: 10px; }
.post-content .editor-content .share ul {
margin-bottom: 0; }
.post-content .editor-content a {
color: #4360DF;
font-weight: 500;
text-decoration: underline; }
.post-content .editor-content a:hover {
color: #2D48BE; }
.post-content .editor-content strong, .post-content .editor-content b {
font-weight: 700; }
.post-content .editor-content img {
display: block;
margin: 30px auto;
max-width: 100%;
height: auto; }
.post-content .editor-content .kg-card {
margin: 30px 0 50px; }
.post-content .editor-content .kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%; }
.post-content .editor-content .kg-image {
margin: 0;
max-width: 100%; }
.post-content .editor-content .kg-width-wide {
position: relative;
width: 75vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%)); }
.post-content .editor-content .kg-width-full {
position: relative;
width: 94vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%)); }
.post-content .editor-content .kg-width-full figcaption {
padding-left: 0;
padding-right: 0;
text-align: left; }
.post-content .editor-content .kg-gallery-container {
display: flex;
flex-direction: column;
position: relative;
width: 75vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%)); }
.post-content .editor-content .kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center; }
.post-content .editor-content .kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%; }
.post-content .editor-content .kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0 0; }
.post-content .editor-content .kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em; }
.post-content .editor-content .kg-gallery-card + .kg-image-card.kg-width-wide,
.post-content .editor-content .kg-gallery-card + .kg-gallery-card,
.post-content .editor-content .kg-image-card.kg-width-wide + .kg-gallery-card,
.post-content .editor-content .kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
margin-top: calc( -7vw + 0.75em); }
.share {
position: absolute;
top: 0;
margin-left: -100px; }
.share ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center; }
.share ul a {
width: 40px;
height: 40px;
border: 1px solid #8d8d8d;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center; }
.post-intro .inner h1 {
margin-bottom: 0; }
.post-intro .inner img {
margin-top: 90px;
max-width: 100%; }
.post-content .editor-content h1, .post-content .editor-content h2, .post-content .editor-content h3, .post-content .editor-content h4 {
margin-top: 100px; }
.post-content .editor-content p {
line-height: 24px;
font-size: 16px;
color: #090909;
margin-bottom: 30px; }
.post-content .editor-content a {
color: #4360DF;
font-weight: 500; }
.post-content .editor-content strong, .post-content .editor-content b {
font-weight: 700; }
.loop {
display: flex;
flex-wrap: wrap; }
.loop.loop-first .post {
width: 100%; }
.loop.loop-first .post .post-inner-content {
display: flex;
flex-direction: row; }
.loop.loop-first .post .post-inner-content h2 {
font-size: 28px;
line-height: 38px; }
.loop.loop-first .post .post-inner-content .post-card-image-link {
width: calc(66.66% - 10px); }
.loop.loop-first .post .post-inner-content .inner {
width: calc(33.33% + 10px);
display: flex;
flex-direction: column; }
.loop.loop-first .post .post-inner-content img {
max-height: 1000px; }
.loop .post {
background: #FFFFFF;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
margin: 0 15px 30px;
border-radius: 4px;
overflow: hidden;
width: calc(33.33% - 30px); }
width: calc(33.33% - 30px);
position: relative;
transition: all .3s ease; }
.loop .post .post-inner-content {
height: 100%;
display: flex;
flex-direction: column; }
.loop .post:hover {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
transform: translateY(-5px); }
.loop .post img {
width: 100%; }
width: 100%;
height: 100%;
object-fit: cover;
max-height: 250px; }
.loop .post .authors img {
max-height: 36px; }
.loop .post .inner {
padding: 20px; }
padding: 20px;
display: flex;
flex-direction: column;
flex: 1; }
.loop .post .inner p {
margin-bottom: 50px; }
.loop .post .inner h2 {
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 22px; }
font-size: 20px;
line-height: 32px;
margin-bottom: 10px; }
.loop .post .inner h2 a {
color: #000000; }
.loop .post .inner h2 a:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.loop .post .inner .post-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto; }
.kg-card {
margin: 30px 0; }
.blog-intro {
padding: 90px 0; }
.blog-intro h1 {
margin-bottom: 10px; }
.blog-intro p {
margin-bottom: 0; }
.blog-intro .authors {
align-items: center;
justify-content: center;
margin-bottom: 20px; }
.blog-intro .authors img {
max-width: 100px;
max-height: 100px; }
.kg-embed-card {
.authors {
display: flex;
margin: 0;
padding: 0;
list-style-type: none; }
.authors li {
margin-right: -7px; }
.authors li a {
position: relative;
z-index: 5;
display: block; }
.authors li a img {
max-width: 36px;
max-height: 36px;
padding: 2px;
background: #ffffff;
border-radius: 50%; }
.pagination {
display: flex;
flex-direction: column;
align-items: center;
width: 100%; }
justify-content: center;
margin: 70px 0 100px; }
.pagination .end {
opacity: .3;
pointer-events: none; }
.kg-image {
margin: 0;
max-width: 100%; }
.related-posts {
background: #EAECEF;
padding: 100px 0 70px; }
.related-posts h3 {
margin-left: 15px; }
.kg-width-wide {
position: relative;
width: 75vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%)); }
.home-template:not(.end-posts) .loop-grid .post:nth-last-child(-n+2) {
display: none; }
.kg-width-full {
position: relative;
width: 94vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%)); }
@media screen and (max-width: 1199px) {
.sub-header {
padding: 0 25px 0 20px; }
.sub-header nav ul li {
margin-right: 0; }
.sub-header nav ul li:last-child {
margin-right: 15px; }
.sub-header nav ul li a {
padding: 10px; }
.sub-header #search-form {
display: none; }
.blog-intro {
padding: 60px 0; } }
.kg-width-full figcaption {
padding-left: 0;
padding-right: 0;
text-align: left; }
@media screen and (max-width: 991px) {
.loop.loop-first .post .post-inner-content {
flex-direction: column; }
.loop.loop-first .post .post-inner-content .post-card-image-link {
width: 100%; }
.loop.loop-first .post .post-inner-content .inner {
width: 100%; }
.loop .post {
width: calc(50% - 30px); } }
.kg-gallery-container {
display: flex;
flex-direction: column;
position: relative;
width: 75vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%)); }
.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center; }
.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%; }
.kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0 0; }
.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em; }
.kg-gallery-card + .kg-image-card.kg-width-wide,
.kg-gallery-card + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
margin-top: calc( -7vw + 0.75em); }
@media screen and (max-width: 767px) {
.loop .post {
width: 100%;
margin: 0 0 20px 0; } }

3
assets/img/quotes.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 14.1088V0H10.7059V12.4554H5.02521C4.69748 16.8644 5.57143 20.5018 10.0504 20.1711L10.7059 24.8006C3.60504 26.013 0 21.604 0 14.1088ZM15.2941 14.1088V0H26V12.4554H20.4286C19.9916 16.8644 20.8655 20.5018 25.4538 20.1711L26 24.8006C18.8992 26.013 15.2941 21.604 15.2941 14.1088Z" fill="#63666D" fill-opacity="0.1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 468 B

4
assets/img/search.svg
View File

@ -1,6 +1,6 @@
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4301 16.669C15.8424 15.2188 17.433 11.2769 15.9828 7.86465C14.5326 4.45235 10.5908 2.86175 7.17851 4.31194C3.76621 5.76213 2.17561 9.70396 3.6258 13.1163C5.076 16.5286 9.01782 18.1192 12.4301 16.669Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.5508 15.2368L19.7574 20.4442" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4301 16.669C15.8424 15.2188 17.433 11.2769 15.9828 7.86465C14.5326 4.45235 10.5908 2.86175 7.17851 4.31194C3.76621 5.76213 2.17561 9.70396 3.6258 13.1163C5.076 16.5286 9.01782 18.1192 12.4301 16.669Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.5508 15.2368L19.7574 20.4442" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 589 B

After

Width:  |  Height:  |  Size: 589 B

135
assets/js/main.js
View File

@ -2,8 +2,8 @@ $(document).ready(function ($) {
var config = {
'load-more': true,
'infinite-scroll': false,
'infinite-scroll-step': 1,
'infinite-scroll': true,
'infinite-scroll-step': 9999,
'content-api-host': 'http://localhost:2368',
'content-api-key': '8a13e02a8917186f02014db742',
};
@ -31,19 +31,128 @@ $(document).ready(function ($) {
}
});
$('img').each(function (index, element) {
$(this).attr('src', $(this).attr('src').replace("http://localhost:2368", "https://our.status.im"));
});
function setDemoImages(){
$('img').each(function (index, element) {
$(this).attr('src', $(this).attr('src').replace("http://localhost:2368", "https://our.status.im"));
});
}
setGalleryRation();
setDemoImages();
var msnry;
var elem = document.querySelector('.loop');
msnry = new Masonry(elem, {
itemSelector: '.loop .post',
// columnWidth: 340,
percentPosition: true,
gutter: 0,
transitionDuration: 0
$('[data-toggle="tooltip"]').tooltip();
$(window).on('load', function(event) {
setGalleryRation();
// var elem = document.querySelector('.loop-grid');
// msnry = new Masonry(elem, {
// itemSelector: '.loop-grid .post',
// // columnWidth: 340,
// percentPosition: true,
// gutter: 0,
// transitionDuration: 0
// });
var currentPage = 1;
var pathname = window.location.pathname;
var step = 0;
// remove hash params from pathname
pathname = pathname.replace(/#(.*)$/g, '').replace('/\//g', '/');
// Load more posts on click
if (config['load-more']) {
$('#load-posts').on('click', function(event) {
event.preventDefault();
if (currentPage == maxPages) {
$('#load-posts').addClass('end').text($('#load-posts').attr('data-end'));
$('body').addClass('end-posts');
return;
};
var $this = $(this);
// next page
currentPage++;
if ($('body').hasClass('paged')) {
pathname = '/';
};
// Load more
var nextPage = pathname + 'page/' + currentPage + '/';
$.get(nextPage, function (content) {
step++;
var post = $(content).find('.post');
// post.addClass('invisible');
$('#content .loop-grid').append( post );
setDemoImages();
$('[data-toggle="tooltip"]').tooltip();
// $.each(post, function(index, val) {
// var $this = $(this);
// $('#content .loop-grid').imagesLoaded( function() {
// msnry.appended( $this );
// $this.removeClass('invisible');
// });
// });
});
});
};
// Infinite scroll
if (config['infinite-scroll'] && config['load-more']) {
var checkTimer = 'on';
if ($('#load-posts').length > 0) {
$(window).on('scroll', function(event) {
var timer;
if (isScrolledIntoView('#load-posts') && checkTimer == 'on' && step < config['infinite-scroll-step']) {
$('#load-posts').click();
checkTimer = 'off';
timer = setTimeout(function() {
checkTimer = 'on';
if (step == config['infinite-scroll-step']) {
$('#load-posts').addClass('step');
};
}, 1000);
};
});
};
};
});
// Check if element is into view when scrolling
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(".share").stick_in_parent({
offset_top: 50
});
// Set the right proportion for images inside the gallery
function setGalleryRation(){
$('.kg-gallery-image img').each(function(index, el) {
var container = $(this).closest('.kg-gallery-image');
var width = $(this)[0].naturalWidth;
var height = $(this)[0].naturalHeight;
var ratio = width / height;
container.attr('style', 'flex: ' + ratio + ' 1 0%');
});
}
});

532
assets/scss/style.scss
View File

@ -33,19 +33,71 @@ time{
line-height: 18px;
font-size: 14px;
letter-spacing: -0.186667px;
color: rgba(103, 108, 118, 0.8);
color: rgba($light-grey, .8);
}
figcaption{
width: 100%;
padding: 10px 0;
text-transform: uppercase;
padding: 15px 0;
font-size: 12px;
line-height: 18px;
font-weight: $ibm-plex-sans-bold;
text-align: center;
border-bottom: 1px solid $lighter-grey;
}
pre {
overflow-x: auto;
margin: 30px 0;
padding: 20px;
max-width: 100%;
border: 1px solid $black;
color: $white;
background: $black;
border-radius: 5px;
}
hr{
margin: 50px 0;
}
iframe[src*="https://www.youtube.com/"] {
height: calc(883px / 1.77777778) !important;
width: 100% !important;
}
blockquote{
line-height: 36px;
font-size: 24px;
color: rgba($dark-grey, 0.8);
font-family: $manrope;
font-weight: $manrope-medium;
position: relative;
margin-bottom: 30px;
&:before {
content: '';
width: 26px;
height: 25px;
background-image: url(../img/quotes.svg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: -5px;
left: -15px;
}
p{
line-height: 36px;
font-size: 24px;
color: rgba($dark-grey, 0.8);
font-family: $manrope;
font-weight: $manrope-medium;
}
}
.tags{
position: relative;
z-index: 5;
color: rgba($light-grey, .8);
a{
margin-right: 20px;
font-family: $ibm-plex-mono;
@ -55,21 +107,28 @@ figcaption{
letter-spacing: -0.2px;
color: $purple;
text-transform: capitalize;
&:hover{
color: $dark-purple;
}
}
}
.sub-header{
border-top: 1px solid #EAECEF;
border-top: 1px solid $lighter-grey;
border-bottom: 1px solid $lighter-grey;
padding: 0 40px;
font-family: $manrope;
display: flex;
justify-content: space-between;
overflow: auto;
nav{
white-space: nowrap;
ul{
list-style-type: none;
margin: 0;
margin: 0 0 0 -20px;
padding: 0;
width: 100%;
display: flex;
justify-content: center;
li{
margin: 0 10px;
display: flex;
@ -92,30 +151,15 @@ figcaption{
}
}
.stripe{
background: $black;
display: flex;
padding: 0 40px;
height: 60px;
align-items: center;
font-family: $manrope;
position: relative;
z-index: 20;
a{
color: $white;
font-size: 16px;
font-weight: $manrope-medium;
}
}
#search-form{
margin-left: auto;
position: relative;
height: 60px;
z-index: 9;
#search-input{
border: none;
background: transparent;
color: $white;
color: $black;
font-size: 14px;
line-height: 19px;
padding: 20px 0 20px 40px;
@ -124,14 +168,15 @@ figcaption{
background-position: center left;
background-repeat: no-repeat;
width: 130px;
height: 100%;
&::-webkit-input-placeholder {
color: rgba($white, .6);
color: rgba($black, .6);
}
&:-ms-input-placeholder {
color: rgba($white, .6);
color: rgba($black, .6);
}
&::placeholder {
color: rgba($white, .6);
color: rgba($black, .6);
}
}
&.inactive{
@ -141,13 +186,13 @@ figcaption{
}
#search-results{
position: absolute;
top: calc(100% - 10px);
top: calc(100% + 1px);
right: 0;
background: #FFFFFF;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
width: 320px;
border-radius: 4px;
max-height: 50vh;
max-height: 70vh;
overflow: auto;
a{
color: $black;
@ -156,6 +201,7 @@ figcaption{
font-size: 14px;
padding: 10px;
border-top: 1px solid #EBEBEB;
font-weight: $manrope-medium;
&:hover{
color: $purple;
}
@ -169,24 +215,68 @@ figcaption{
.post-intro{
margin: 90px 0 35px;
.inner{
text-align: center;
.post-meta{
display: flex;
align-items: center;
justify-content: center;
time{
&:before{
content: ' - ';
}
}
.tags{
a{
margin: 0 8px 0 0;
}
}
}
h1{
margin-bottom: 0;
margin-bottom: 10px;
}
img{
margin-top: 90px;
max-width: 100%;
}
.authors{
margin-right: 3px;
li{
margin: 0;
&:last-child{
a{
span{
&:after{
display: none;
}
}
}
}
a{
font-family: $ibm-plex-mono;
font-weight: $ibm-plex-mono-semi-bold;
line-height: 19px;
font-size: 15px;
letter-spacing: -0.2px;
color: $purple;
text-transform: capitalize;
display: flex;
margin-right: 3px;
span{
&:after{
content: ', ';
}
}
&:hover{
color: $dark-purple;
}
}
}
}
}
}
.post-content{
margin-bottom: 70px;
.editor-content{
position: relative;
h1,h2,h3,h4{
margin-top: 100px;
}
@ -196,19 +286,169 @@ figcaption{
color: #090909;
margin-bottom: 30px;
}
ul, ol{
margin-bottom: 30px;
padding-left: 20px;
li{
line-height: 24px;
font-size: 16px;
color: $light-black;
margin-bottom: 10px;
}
}
.share{
ul{
margin-bottom: 0;
}
}
a{
color: $purple;
font-weight: $ibm-plex-sans-medium;
text-decoration: underline;
&:hover{
color: $dark-purple;
}
}
strong, b{
font-weight: $ibm-plex-sans-bold;
}
img{
display: block;
margin: 30px auto;
max-width: 100%;
height: auto;
}
.kg-card{
margin: 30px 0 50px;
}
.kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.kg-image {
margin: 0;
max-width: 100%;
}
.kg-width-wide {
position: relative;
width: 75vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%));
}
.kg-width-full {
position: relative;
width: 94vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%));
}
.kg-width-full figcaption {
padding-left: 0;
padding-right: 0;
text-align: left;
}
.kg-gallery-container {
display: flex;
flex-direction: column;
position: relative;
width: 75vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%));
}
.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%;
}
.kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0 0;
}
.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em;
}
.kg-gallery-card + .kg-image-card.kg-width-wide,
.kg-gallery-card + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
margin-top: calc( -7vw + 0.75em );
}
}
}
.share{
position: absolute;
top: 0;
margin-left: -100px;
ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
a{
width: 40px;
height: 40px;
border: 1px solid #8d8d8d;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.loop{
display: flex;
flex-wrap: wrap;
&.loop-first{
.post{
width: 100%;
.post-inner-content{
display: flex;
flex-direction: row;
h2{
font-size: 28px;
line-height: 38px;
}
.post-card-image-link{
width: calc(66.66% - 10px);
}
.inner{
width: calc(33.33% + 10px);
display: flex;
flex-direction: column;
}
img{
max-height: 1000px;
}
}
}
}
.post{
background: #FFFFFF;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
@ -216,111 +456,185 @@ figcaption{
border-radius: 4px;
overflow: hidden;
width: calc(33.33% - 30px);
// &:first-child{
// width: 100%;
// .post-inner-content{
// display: flex;
// .post-card-image-link{
// width: calc(66.66% - 10px);
// }
// .inner{
// width: calc(33.33% + 10px);
// }
// }
// }
position: relative;
transition: all .3s ease;
.post-inner-content{
height: 100%;
display: flex;
flex-direction: column;
}
&:hover{
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
img{
width: 100%;
height: 100%;
object-fit: cover;
max-height: 250px;
}
.authors{
img{
max-height: 36px;
}
}
.inner{
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
p{
margin-bottom: 50px;
}
h2{
font-family: $manrope;
font-weight: $manrope-semi-bold;
font-size: 16px;
line-height: 22px;
font-size: 20px;
line-height: 32px;
margin-bottom: 10px;
a{
color: $black;
&:before{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
}
.post-meta{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
}
}
}
.kg-card{
margin: 30px 0;
.blog-intro{
padding: 90px 0;
h1{
margin-bottom: 10px;
}
p{
margin-bottom: 0;
}
.authors{
align-items: center;
justify-content: center;
margin-bottom: 20px;
img{
max-width: 100px;
max-height: 100px;
}
}
}
.kg-embed-card {
.authors {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
li{
margin-right: -7px;
a{
position: relative;
z-index: 5;
display: block;
img{
max-width: 36px;
max-height: 36px;
padding: 2px;
background: $white;
border-radius: 50%;
}
}
}
}
.pagination{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.kg-image {
margin: 0;
max-width: 100%;
}
.kg-width-wide {
position: relative;
width: 75vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%));
}
.kg-width-full {
position: relative;
width: 94vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%));
}
.kg-width-full figcaption {
padding-left: 0;
padding-right: 0;
text-align: left;
}
.kg-gallery-container {
display: flex;
flex-direction: column;
position: relative;
width: 75vw;
min-width: 100%;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateX(calc(50vw - 50%));
}
.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
margin: 70px 0 100px;
.end{
opacity: .3;
pointer-events: none;
}
}
.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%;
.related-posts{
background: $lighter-grey;
padding: 100px 0 70px;
h3{
margin-left: 15px;
}
}
.kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0 0;
.home-template:not(.end-posts){
.loop-grid{
.post{
&:nth-last-child(-n+2){
display: none;
}
}
}
}
.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em;
@media screen and (max-width: 1199px) {
.sub-header{
padding: 0 25px 0 20px;
nav{
ul{
li{
margin-right: 0;
&:last-child{
margin-right: 15px;
}
a{
padding: 10px;
}
}
}
}
#search-form{
display: none;
}
}
.blog-intro {
padding: 60px 0;
}
}
.kg-gallery-card + .kg-image-card.kg-width-wide,
.kg-gallery-card + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
margin-top: calc( -7vw + 0.75em );
@media screen and (max-width: 991px) {
.loop{
&.loop-first{
.post{
.post-inner-content{
flex-direction: column;
.post-card-image-link{
width: 100%;
}
.inner{
width: 100%;
}
}
}
}
.post{
width: calc(50% - 30px);
}
}
}
@media screen and (max-width: 767px) {
.loop{
.post{
width: 100%;
margin: 0 0 20px 0;
}
}
}

50
author.hbs
View File

@ -0,0 +1,50 @@
{{!< default}}
{{#author}}
<div class="blog-intro">
<div class="container">
<div class="row">
<div class="col-md-7 col-lg-5 ml-auto mr-auto text-center">
<ul class="authors">
<li>
<a href="{{url}}">
{{#if profile_image}}
<img src="{{img_url profile_image}}" alt="{{name}}" />
{{/if}}
</a>
</li>
</ul>
<h1>{{name}}</h1>
<p class="p-large">{{description}}</p>
</div>
</div>
</div>
</div>
{{/author}}
{{!-- The main content area --}}
<main id="content" role="main">
<div class="container">
<div class="row">
<div class="col-xl-10 col-md-12 ml-auto mr-auto">
{{#is "home"}}
<div class="loop loop-first">
{{#get "posts" include="tags,authors" limit="1"}}
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
{{/get}}
</div>
{{/is}}
<div class="loop loop-grid">
{{#foreach posts}}
{{^if @first}}
{{> "loop"}}
{{/if}}
{{/foreach}}
</div>
{{pagination}}
</div>
</div>
</div>
</main>

4
default.hbs
View File

@ -36,8 +36,10 @@
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="{{> "url"}}/js/main.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
<script type="text/javascript" src="{{asset "js/main.js"}}"></script>
{{!-- Ghost outputs important scripts and data with this tag --}}

32
index.hbs
View File

@ -1,11 +1,11 @@
{{!< default}}
<div class="intro">
<div class="blog-intro">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-7 col-lg-5 ml-auto mr-auto text-center">
<h1>{{@site.title}}</h1>
<p>{{@site.description}}</p>
<p class="p-large">{{@site.description}}</p>
</div>
</div>
</div>
@ -15,15 +15,29 @@
<main id="content" role="main">
<div class="container">
<div class="row">
<div class="col-md-10 ml-auto mr-auto">
<div class="loop">
<div class="col-xl-10 col-md-12 ml-auto mr-auto">
{{#is "home"}}
<div class="loop loop-first">
{{#get "posts" include="tags,authors" limit="1"}}
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
{{/get}}
</div>
{{/is}}
<div class="loop loop-grid">
{{#foreach posts}}
{{> "loop"}}
{{#is "home"}}
{{^if @first}}
{{> "loop"}}
{{/if}}
{{else}}
{{> "loop"}}
{{/is}}
{{/foreach}}
</div>
{{pagination}}
</div>
</div>
</div>
</main>
{{pagination}}
</main>

2
package.json
View File

@ -30,7 +30,7 @@
"gulp-sass": "^4.0.2"
},
"config": {
"posts_per_page": 12,
"posts_per_page": 15,
"image_sizes": {
"xs": {
"width": 80,

19
partials/loop.hbs
View File

@ -6,13 +6,24 @@
</a>
{{/if}}
<div class="inner">
{{#if primary_tag}}
<div class="tags"><a href="{{primary_tag.url}}">{{primary_tag.name}}</a></div>
{{/if}}
<h2 class="post-title"><a href="{{url}}" title="{{title}}">{{title}}</a></h2>
{{!-- <p>{{excerpt}}</p> --}}
<p>{{excerpt words="25"}}</p>
<div class="post-meta">
<ul class="authors">
{{#foreach authors}}
<li>
<a href="{{url}}" data-toggle="tooltip" data-placement="top" title="{{name}}">
{{#if profile_image}}
<img src="{{img_url profile_image}}" alt="{{name}}" />
{{/if}}
</a>
</li>
{{/foreach}}
</ul>
<time datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
{{#if tags}}
<div class="tags">{{tags limit=1}}</div>
{{/if}}
</div>
</div>
</div>

3
partials/pagination.hbs Normal file
View File

@ -0,0 +1,3 @@
<div class="pagination">
<button id="load-posts" class="btn" data-end="{{t "No more posts"}}" data-posts_per_page="{{@config.posts_per_page}}"><span>{{t "Load more posts"}}</span></button>
</div>

1
partials/theme_head.hbs
View File

@ -32,4 +32,5 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,600|IBM+Plex+Sans:400,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{> "url"}}/css/style.css" />
<link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" />

3
partials/theme_subheader.hbs
View File

@ -1,8 +1,5 @@
<div class="sub-header">
{{navigation}}
</div>
<div class="stripe">
<a href="/">Want to contribute to the blog? Contact us</a>
<form action="/" id="search-form">
<input id="search-input" placeholder="Search blog…">
<div id="search-results"></div>

58
post.hbs
View File

@ -9,11 +9,22 @@
<div class="row">
<div class="col-md-8 ml-auto mr-auto">
<div class="inner">
<h1 class="post-title">{{title}}</h1>
<div class="post-meta">
<div class="tags">{{tags limit="1"}}</div>
<ul class="authors">
{{#foreach authors}}
<li>
<a href="{{url}}">
<span>{{name}}</span>
</a>
</li>
{{/foreach}}
</ul>
{{#if primary_tag}}
<div class="tags">on {{tags limit="1"}}</div>
{{/if}}
<time datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
</div>
<h1 class="post-title">{{title}}</h1>
{{#if feature_image}}
<img src="{{img_url feature_image size="l"}}" class="inner-featured-image" alt="{{title}}">
{{/if}}
@ -28,12 +39,26 @@
<div class="col-md-8 ml-auto mr-auto">
<div class="editor-content">
{{content}}
<div class="share">
<ul>
<li>
<a href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}" class="twitter" onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;" data-toggle="tooltip" data-placement="top" title="{{t "Share on Twitter"}}">
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13.232 2.056C13.8854 1.63145 14.3656 0.987398 14.586 0.24C13.987 0.62 13.325 0.89 12.631 1.036C12.0671 0.382464 11.2482 0.00470955 10.385 0C8.685 0 7.307 1.469 7.307 3.282C7.307 3.533 7.334 3.784 7.388 4.029C4.83 3.893 2.562 2.587 1.044 0.601C0.768819 1.10728 0.625742 1.67477 0.628 2.251C0.628 3.389 1.17 4.394 1.996 4.982C1.50422 4.96489 1.02473 4.82386 0.602 4.572V4.613C0.602 6.203 1.664 7.53 3.072 7.831C2.62003 7.96171 2.14316 7.98126 1.682 7.888C2.073 9.192 3.21 10.14 4.557 10.167C3.2938 11.2353 1.64202 11.7279 0 11.526C1.38681 12.4836 3.03169 12.9976 4.717 13C10.377 13 13.473 8 13.473 3.662C13.473 3.52 13.47 3.378 13.464 3.238C14.0725 2.76702 14.5926 2.19176 15 1.539C14.4416 1.80337 13.8449 1.97785 13.232 2.056Z" fill="#090909"></path> </svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}" class="facebook" onclick="window.open(this.href, 'share-facebook', 'width=580,height=296');return false;" data-toggle="tooltip" data-placement="top" title="{{t "Share on Facebook"}}">
<svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.203 8.07013H7.552L7.905 5.43713H5.203V3.74713C5.203 2.98313 5.416 2.46213 6.552 2.46213H8V0.100131C7.29882 0.0310031 6.59457 -0.00237344 5.89 0.000131122C3.8 0.000131122 2.37 1.22513 2.37 3.48613V5.43613H0V8.07013H2.371V14.8571H5.203V8.07013Z" fill="#090909"></path> </svg>
</a>
</li>
<li>
<a href="https://www.reddit.com/submit?url={{url absolute="true"}}" target="_blank" class="reddit" data-toggle="tooltip" data-placement="top" title="{{t "Share on Reddit"}}">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.9998 9.12116C17.9859 8.73593 17.8622 8.363 17.6438 8.04734C17.4253 7.73167 17.1214 7.48674 16.7686 7.34208C16.4158 7.19742 16.0292 7.15921 15.6554 7.23205C15.2817 7.30488 14.9367 7.48566 14.6621 7.75259C13.1249 6.6943 11.3179 6.10963 9.45964 6.06925L10.338 1.79933L13.2297 2.41518C13.2641 2.73882 13.4113 3.03946 13.6448 3.26312C13.8783 3.48679 14.1829 3.61883 14.5038 3.63556C14.8248 3.65228 15.1412 3.55259 15.3961 3.35438C15.651 3.15617 15.8279 2.87241 15.8949 2.55405C15.9619 2.23569 15.9146 1.90357 15.7616 1.61731C15.6086 1.33105 15.3599 1.10939 15.0601 0.992126C14.7603 0.874859 14.429 0.869663 14.1257 0.97747C13.8225 1.08528 13.5671 1.29903 13.4054 1.58035L10.0947 0.909757C10.0406 0.897727 9.98464 0.8967 9.9301 0.906737C9.87556 0.916773 9.82353 0.937672 9.77702 0.968224C9.73052 0.998776 9.69046 1.03837 9.65917 1.08472C9.62789 1.13106 9.606 1.18324 9.59477 1.23821L8.59482 5.98714C6.71367 6.01586 4.88185 6.60098 3.3248 7.67048C3.11649 7.47197 2.86805 7.32171 2.5967 7.23011C2.32535 7.13851 2.03758 7.10777 1.75333 7.14C1.46908 7.17224 1.19515 7.26669 0.950528 7.4168C0.705903 7.56692 0.496431 7.76911 0.33663 8.00936C0.176828 8.24962 0.070518 8.52219 0.0250674 8.80819C-0.0203832 9.0942 -0.00388753 9.38679 0.0734112 9.66569C0.15071 9.9446 0.286963 10.2031 0.472728 10.4234C0.658493 10.6437 0.889327 10.8204 1.14923 10.9414C1.13402 11.1418 1.13402 11.3431 1.14923 11.5435C1.14923 14.6091 4.67609 17.0999 9.02723 17.0999C13.3784 17.0999 16.9052 14.6091 16.9052 11.5435C16.9204 11.3431 16.9204 11.1418 16.9052 10.9414C17.2387 10.7735 17.5184 10.5135 17.7121 10.1914C17.9058 9.86929 18.0055 9.49825 17.9998 9.12116V9.12116ZM4.48691 10.4897C4.48691 10.219 4.56616 9.95445 4.71464 9.72939C4.86312 9.50433 5.07417 9.32892 5.32108 9.22533C5.568 9.12175 5.83969 9.09465 6.10182 9.14745C6.36394 9.20026 6.60472 9.3306 6.7937 9.522C6.98268 9.7134 7.11138 9.95725 7.16352 10.2227C7.21566 10.4882 7.1889 10.7634 7.08662 11.0135C6.98434 11.2635 6.81115 11.4773 6.58893 11.6276C6.36671 11.778 6.10545 11.8583 5.8382 11.8583C5.66074 11.8583 5.48503 11.8229 5.32108 11.7541C5.15714 11.6853 5.00817 11.5845 4.88269 11.4574C4.75721 11.3304 4.65768 11.1795 4.58977 11.0135C4.52186 10.8474 4.48691 10.6694 4.48691 10.4897V10.4897ZM12.3379 14.2533C11.3792 14.985 10.1996 15.3574 9.0002 15.3071C7.80078 15.3574 6.62123 14.985 5.66253 14.2533C5.60507 14.1824 5.5757 14.0924 5.58014 14.0007C5.58459 13.9091 5.62252 13.8224 5.68657 13.7576C5.75061 13.6927 5.83619 13.6543 5.92666 13.6498C6.01712 13.6453 6.106 13.675 6.17602 13.7332C6.98845 14.3368 7.98014 14.641 8.98669 14.5954C9.99448 14.6509 10.9908 14.3564 11.8109 13.7606C11.8826 13.6898 11.9791 13.6508 12.0792 13.6521C12.1287 13.6527 12.1777 13.6632 12.2232 13.683C12.2688 13.7028 12.31 13.7315 12.3446 13.7674C12.3792 13.8034 12.4065 13.8459 12.4249 13.8925C12.4433 13.9391 12.4524 13.989 12.4518 14.0392C12.4512 14.0893 12.4408 14.1389 12.4212 14.1851C12.4017 14.2312 12.3734 14.273 12.3379 14.308V14.2533ZM12.0946 11.913C11.8274 11.913 11.5661 11.8328 11.3439 11.6824C11.1217 11.532 10.9485 11.3183 10.8462 11.0682C10.7439 10.8181 10.7172 10.5429 10.7693 10.2775C10.8215 10.012 10.9502 9.76814 11.1391 9.57674C11.3281 9.38535 11.5689 9.255 11.831 9.2022C12.0931 9.14939 12.3648 9.17649 12.6118 9.28008C12.8587 9.38366 13.0697 9.55907 13.2182 9.78413C13.3667 10.0092 13.4459 10.2738 13.4459 10.5445C13.4533 10.7299 13.4233 10.9149 13.3578 11.0882C13.2924 11.2616 13.1928 11.4196 13.0651 11.5527C12.9375 11.6859 12.7844 11.7913 12.6152 11.8627C12.4461 11.934 12.2644 11.9698 12.0811 11.9678L12.0946 11.913Z" fill="#848484"></path> </svg>
</a>
</li>
</ul>
</div>
</div>
<ul class="share">
<li><a href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}" class="twitter" onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;" data-toggle="tooltip" data-placement="top" title="{{t "Share on Twitter"}}"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}" class="facebook" onclick="window.open(this.href, 'share-facebook', 'width=580,height=296');return false;" data-toggle="tooltip" data-placement="top" title="{{t "Share on Facebook"}}"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://www.reddit.com/submit?url={{url absolute="true"}}" target="_blank" class="reddit" data-toggle="tooltip" data-placement="top" title="{{t "Share on Reddit"}}"><i class="fab fa-reddit-alien"></i></a></li>
</ul>
</div>
</div>
</div>
@ -41,4 +66,23 @@
</article>
</main>
{{#get "posts" limit="3" include="tags,authors" filter="id:-{{id}}+primary_tag:{{primary_tag.slug}}"}}
{{#if posts}}
<div class="related-posts">
<div class="container">
<div class="row">
<div class="col-md-10 ml-auto mr-auto">
<h3>{{t "Related articles"}}</h3>
<div class="loop">
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{/get}}
{{/post}}

40
tag.hbs
View File

@ -1,3 +1,41 @@
{{!< default}}
tag
{{#tag}}
<div class="blog-intro">
<div class="container">
<div class="row">
<div class="col-md-7 col-lg-5 ml-auto mr-auto text-center">
<h1>{{name}}</h1>
<p class="p-large">{{description}}</p>
</div>
</div>
</div>
</div>
{{/tag}}
{{!-- The main content area --}}
<main id="content" role="main">
<div class="container">
<div class="row">
<div class="col-xl-10 col-md-12 ml-auto mr-auto">
{{#is "home"}}
<div class="loop loop-first">
{{#get "posts" include="tags,authors" limit="1"}}
{{#foreach posts}}
{{> "loop"}}
{{/foreach}}
{{/get}}
</div>
{{/is}}
<div class="loop loop-grid">
{{#foreach posts}}
{{^if @first}}
{{> "loop"}}
{{/if}}
{{/foreach}}
</div>
{{pagination}}
</div>
</div>
</div>
</main>