Lots of changes
- add tags.hbs - add home.hbs, copy of index.hbs - change <h1> global font size make some animations faster - make post title & footer background black instead of animated gradient - make "services" link in navbar white instead of animated gradient - move some css classes to screen.css to allow tags.hbs accessing them - fix policy popup being covered (issue #001) - fix policy popup style - fig kg-bookmark thumbnail image - add PT Serif font - add category and posted date under post title - move big post cards to post-card-big.hbs, so both index, home and tags can access it - mode post post cards style to new post-card-style.css file - update page.hbs, now rendering correctly and including content - add "l" size to package.json, to allow more high-res images
This commit is contained in:
parent
e9c2f9ea41
commit
da155c7d7e
|
|
@ -57,124 +57,3 @@ h1 {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mind-feed_main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 30px;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.post-card_main {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Style */
|
||||
background-color: rgb(50, 50, 50);
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 1px black, 0 2px 4px black;
|
||||
transition: 0.5s;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.post-card_main:hover {
|
||||
box-shadow: 1px 3px 15px 2px black;
|
||||
|
||||
/* TODO: decide:
|
||||
1. move up
|
||||
transform:translate3d(0,-5px,0);
|
||||
|
||||
2. scale up
|
||||
transform: scale(1.04);
|
||||
|
||||
3. scale down
|
||||
transform: scale(0.96);
|
||||
|
||||
ATM: move up
|
||||
*/
|
||||
transform:translate3d(0,-5px,0);
|
||||
}
|
||||
|
||||
.post-card_header {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
padding: 20px 30px 0;
|
||||
}
|
||||
|
||||
.post-card_excerpt {
|
||||
text-align: justify;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
a.post-card_main {
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
.post-card_meta {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
margin: 10px 5px 0;
|
||||
color: rgb(180, 180, 180);
|
||||
}
|
||||
|
||||
.post-card_tag {
|
||||
color: #3fd5ff;
|
||||
}
|
||||
|
||||
a.post-card_main:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer.post-card_footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
justify-content: flex-end;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
article {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.post-card_author-image {
|
||||
border-radius: 100%;
|
||||
margin-left: 10px;
|
||||
max-width: 30px;
|
||||
}
|
||||
|
||||
.post-card_feature-image {
|
||||
|
||||
/*
|
||||
The following 3 statements are used
|
||||
to make all images have the same size.
|
||||
|
||||
This has the downside of being relatively more difficult to scale,
|
||||
so if you want to go back to normal viewing (full image)
|
||||
only leave:
|
||||
width: 100%;
|
||||
*/
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 217px;
|
||||
max-height: 100%;
|
||||
|
||||
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* ARROW BOUNCE */
|
||||
@keyframes bounce {
|
||||
0% { top: 94%; }
|
||||
50% { top: 92%; }
|
||||
100% { top: 94%; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,6 @@
|
|||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
h1 {
|
||||
font-size: 90px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
.mind-page-title {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
|
||||
}
|
||||
|
||||
.mind-page-title h1 {
|
||||
/* Leave space for the floating arrow */
|
||||
margin-bottom: 4%;
|
||||
}
|
||||
|
||||
.mind-post_main {
|
||||
max-width: 1260px;
|
||||
|
|
@ -194,6 +169,7 @@ img.mind-post_feature-image {
|
|||
}
|
||||
|
||||
.post-card-sidebar_meta {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
|
|
@ -205,13 +181,10 @@ img.mind-post_feature-image {
|
|||
padding: 0 5px 10px;
|
||||
}
|
||||
|
||||
.post-card-sidebar_tag {
|
||||
color: #3fd5ff;
|
||||
}
|
||||
/* MEDIA QUERIES FOR RESPONSIVE DESIGN */
|
||||
@media screen and (max-width: 1300px) {
|
||||
.mind-post_main {
|
||||
|
||||
/* ARROW BOUNCE */
|
||||
@keyframes bounce {
|
||||
0% { top: 88%; }
|
||||
50% { top: 85%; }
|
||||
100% { top: 88%; }
|
||||
}
|
||||
}
|
||||
/* END MEDIA QUERIES */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
|
||||
.post-card_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Style */
|
||||
background-color: rgb(50, 50, 50);
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 1px black, 0 2px 4px black;
|
||||
transition: 0.5s;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.post-card_main:hover {
|
||||
box-shadow: 1px 3px 15px 2px black;
|
||||
|
||||
/* TODO: decide:
|
||||
1. move up
|
||||
transform:translate3d(0,-5px,0);
|
||||
|
||||
2. scale up
|
||||
transform: scale(1.04);
|
||||
|
||||
3. scale down
|
||||
transform: scale(0.96);
|
||||
|
||||
ATM: move up
|
||||
*/
|
||||
transform:translate3d(0,-5px,0);
|
||||
}
|
||||
|
||||
.post-card_header {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
padding: 20px 30px 0;
|
||||
}
|
||||
|
||||
.post-card_excerpt {
|
||||
text-align: justify;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
a.post-card_main {
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
.post-card_meta {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
margin: 10px 5px 0;
|
||||
color: rgb(180, 180, 180);
|
||||
}
|
||||
|
||||
a.post-card_main:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer.post-card_footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
justify-content: flex-end;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
article {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.post-card_author-image {
|
||||
border-radius: 100%;
|
||||
margin-left: 10px;
|
||||
max-width: 30px;
|
||||
}
|
||||
|
||||
.post-card_feature-image {
|
||||
|
||||
/*
|
||||
The following 3 statements are used
|
||||
to make all images have the same size.
|
||||
|
||||
This has the downside of being relatively more difficult to scale,
|
||||
so if you want to go back to normal viewing (full image)
|
||||
only leave:
|
||||
width: 100%;
|
||||
*/
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 217px;
|
||||
max-height: 100%;
|
||||
|
||||
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -27,6 +27,10 @@ h1, h2, h3, h4, h5, h6 {
|
|||
color: rgb(230, 230, 230);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
|
@ -73,7 +77,7 @@ text-decoration: none;
|
|||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
transition: 1s;
|
||||
transition: .5s;
|
||||
}
|
||||
/* This class is applied by a JS script, so that users with JS disabled
|
||||
can still see the navbar, but it won't move while they're scrolling.
|
||||
|
|
@ -104,7 +108,7 @@ is applied by the script on scroll.
|
|||
margin-left: -30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: 1s;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
|
|
@ -127,7 +131,9 @@ is applied by the script on scroll.
|
|||
}
|
||||
|
||||
.navbar li.nav-services {
|
||||
/* TODO: choose if background should be colorful or white */
|
||||
background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
|
||||
/*background: white;*/
|
||||
background-size: 800px, 800px;
|
||||
color: aquamarine;
|
||||
text-fill-color: transparent;
|
||||
|
|
@ -141,6 +147,44 @@ is applied by the script on scroll.
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.mind-feed_main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 30px;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.mind-page-title {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
|
||||
}
|
||||
|
||||
.mind-page-title div {
|
||||
/* Leave space for the floating arrow */
|
||||
margin: 0;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.mind-page-title p {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: rgb(200, 200, 200);
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
.post-card-sidebar_tag, .mind-page-title a, .post-card_tag {
|
||||
color: #3fd5ff;
|
||||
}
|
||||
|
||||
/* Begin Main Content */
|
||||
main {
|
||||
display: block;
|
||||
|
|
@ -156,20 +200,22 @@ footer.mind-site-footer_main {
|
|||
grid-template-columns: 1fr 1fr;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mind-site-footer_main p {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
/* .mind-page-title is only used by pages (homepage has a different title style), however other pages have the footer too. */
|
||||
/* TODO: choose if background should be colorful or black */
|
||||
.mind-page-title, footer.mind-site-footer_main {
|
||||
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
||||
/*background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);*/
|
||||
background: rgb(10, 10, 10);
|
||||
background-size: 1000%, 100%;
|
||||
animation: gradient 7s linear infinite;
|
||||
animation-direction: alternate-reverse;
|
||||
|
|
@ -183,7 +229,7 @@ nav.mind-site-footer_nav {
|
|||
/* End footer */
|
||||
|
||||
/* Begin policy popup */
|
||||
/* todo: this makes the page a little bit higher & larger, adding bars. fix it */
|
||||
/* TODO: this makes the page a little bit higher & larger, also adding scrollbars. fix it */
|
||||
|
||||
.mind-policy-popup {
|
||||
display: none; /*Hidden, we want to show it via JavaScript */
|
||||
|
|
@ -220,7 +266,6 @@ nav.mind-site-footer_nav {
|
|||
font-weight: 200;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -237,7 +282,6 @@ nav.mind-site-footer_nav {
|
|||
color: white;
|
||||
padding: 15px 30px;
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
@ -247,7 +291,7 @@ nav.mind-site-footer_nav {
|
|||
|
||||
/* End policy popup */
|
||||
|
||||
.arrow-down {
|
||||
.mind-all-title_arrow-down {
|
||||
border: solid white;
|
||||
opacity: 0.4;
|
||||
border-width: 0 2px 2px 0;
|
||||
|
|
@ -256,10 +300,35 @@ nav.mind-site-footer_nav {
|
|||
margin-left: -6px;
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
animation: bounce 1.5s infinite;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
div.mind-policy-popup {
|
||||
z-index: 100;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.mind-all-title_arrow-down-big {
|
||||
animation: arrow-bounce-big 1.5s infinite;
|
||||
}
|
||||
|
||||
.mind-all-title_arrow-down-mid {
|
||||
animation: arrow-bounce-mid 1.5s infinite;
|
||||
}
|
||||
|
||||
/* ARROW BOUNCE */
|
||||
@keyframes arrow-bounce-mid {
|
||||
0% { top: 89%; }
|
||||
50% { top: 87%; }
|
||||
100% { top: 89%; }
|
||||
}
|
||||
|
||||
/* ARROW BOUNCE */
|
||||
@keyframes arrow-bounce-big {
|
||||
0% { top: 94%; }
|
||||
50% { top: 92%; }
|
||||
100% { top: 94%; }
|
||||
}
|
||||
/* Begin Ghost mandatory CSS */
|
||||
|
||||
/* Begin images
|
||||
|
|
@ -356,7 +425,7 @@ nav.mind-site-footer_nav {
|
|||
}
|
||||
|
||||
.kg-bookmark-description {
|
||||
margin-top: 12px;
|
||||
margin: 12px 0;
|
||||
max-height: 48px;
|
||||
font-size: 14px;
|
||||
|
||||
|
|
@ -400,15 +469,17 @@ nav.mind-site-footer_nav {
|
|||
}
|
||||
|
||||
.kg-bookmark-thumbnail {
|
||||
box-sizing: border-box;
|
||||
font-size: 0;
|
||||
max-height: 100%;
|
||||
min-width: 33%;
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
.kg-bookmark-thumbnail img {
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 5px 5px 0;
|
||||
object-fit: cover;
|
||||
height: 157px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -537,5 +608,13 @@ img {
|
|||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Serif';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* End fonts */
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ $(document).ready(function(){
|
|||
if($(this).scrollTop() >
|
||||
//$(window).height()*0.3){
|
||||
100) {
|
||||
$(".arrow-down").css({"opacity" : "0"});
|
||||
$(".mind-all-title_arrow-down").css({"opacity" : "0"});
|
||||
} else {
|
||||
$(".arrow-down").css({"opacity" : "0.4"});
|
||||
$(".mind-all-title_arrow-down").css({"opacity" : "0.4"});
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
14
default.hbs
14
default.hbs
|
|
@ -23,19 +23,31 @@
|
|||
{{#is "post, page"}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
|
||||
<script src="{{asset "js/remark42-comments.js"}}"></script>
|
||||
|
||||
<title>{{meta_title}} – {{@site.title}}</title>
|
||||
|
||||
{{/is}}
|
||||
{{#is "post"}}
|
||||
<script src="{{asset "js/remark42-comments.js"}}"></script>
|
||||
{{/is}}
|
||||
<!-- End Posts & Pages only code -->
|
||||
|
||||
<!-- Begin Tags only code -->
|
||||
{{# is "tag"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/tag-style.css"}}" />
|
||||
{{/is}}
|
||||
<!-- End Tags only code -->
|
||||
|
||||
<!-- Begin Index only code -->
|
||||
{{#is "index"}}
|
||||
<title>{{@site.title}}</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" />
|
||||
{{/is}}
|
||||
|
||||
{{#is "index, tag"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post-card-style.css"}}" />
|
||||
{{/is}}
|
||||
<!-- End Index only code -->
|
||||
|
||||
{{ghost_head}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
{{!< default}}
|
||||
|
||||
<div class="mind-site-title unselectable" id="vantajs">
|
||||
<h1>{{@site.title}}</h1>
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-big"></i>
|
||||
</div>
|
||||
|
||||
|
||||
<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}}
|
||||
{{> "post-card-big"}}
|
||||
{{/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>
|
||||
18
index.hbs
18
index.hbs
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<div class="mind-site-title unselectable" id="vantajs">
|
||||
<h1>{{@site.title}}</h1>
|
||||
<i class="arrow-down"></i>
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-big"></i>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -15,21 +15,7 @@
|
|||
|
||||
<!-- Looping through every post -->
|
||||
{{#foreach posts}}
|
||||
<article class="{{post_class}}">
|
||||
<a class="post-card_main" href="{{url}}">
|
||||
<img class="post-card_feature-image" src="{{img_url feature_image size="m"}}" />
|
||||
<header class="post-card_header">
|
||||
<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="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}}
|
||||
</footer>
|
||||
</a>
|
||||
{{> "post-card-big"}}
|
||||
</article>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "mindtheme",
|
||||
"description": "Mind Overflow's official website style",
|
||||
"version": "0.0.4",
|
||||
"version": "0.0.5",
|
||||
"engines": {
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
|
|
@ -24,6 +24,9 @@
|
|||
},
|
||||
"m": {
|
||||
"width": 600
|
||||
},
|
||||
"l": {
|
||||
"width": 1200
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,24 @@
|
|||
{{!< default}}
|
||||
{{#post}}
|
||||
<div class="mind-page-title unselectable">
|
||||
<h1>{{title}}</h1>
|
||||
<i class="arrow-down"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="mind-content_main">
|
||||
<div class="mind-page-title unselectable">
|
||||
{{#post}}
|
||||
<div>
|
||||
<h1>{{title}}</h1>
|
||||
</div>
|
||||
</main>
|
||||
{{/post}}
|
||||
{{/post}}
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="mind-content_main">
|
||||
<div class="mind-page_main">
|
||||
{{#post}}
|
||||
<div class="mind-post_content">
|
||||
<div class="mind-post_content-header">
|
||||
<img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}"/>
|
||||
</div>
|
||||
{{content}}
|
||||
</div>
|
||||
{{/post}}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<article class="{{post_class}}">
|
||||
<a class="post-card_main" href="{{url}}">
|
||||
<img class="post-card_feature-image" src="{{img_url feature_image size="m"}}" />
|
||||
<header class="post-card_header">
|
||||
<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="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}}
|
||||
</footer>
|
||||
</a>
|
||||
</article>
|
||||
8
post.hbs
8
post.hbs
|
|
@ -1,9 +1,13 @@
|
|||
{{!< default}}
|
||||
<div class="mind-page-title unselectable">
|
||||
{{#post}}
|
||||
|
||||
<div>
|
||||
<h1>{{title}}</h1>
|
||||
<p><a href="{{primary_tag.url}}">{{primary_tag.name}}</a> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
|
||||
</div>
|
||||
{{/post}}
|
||||
<i class="arrow-down"></i>
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
|
|
@ -14,7 +18,7 @@
|
|||
{{#post}}
|
||||
<div class="mind-post_content">
|
||||
<div class="mind-post_content-header">
|
||||
<img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
|
||||
<img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}"/>
|
||||
</div>
|
||||
{{content}}
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
{{!< default}}
|
||||
|
||||
<div class="mind-page-title unselectable">
|
||||
{{#tag}}
|
||||
|
||||
<div>
|
||||
<h1>{{name}}</h1>
|
||||
<p>
|
||||
{{#if description}}
|
||||
{{description}}
|
||||
{{else}}
|
||||
{{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||
{{/if}}
|
||||
</p>
|
||||
</div>
|
||||
{{/tag}}
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="mind-content_main">
|
||||
<div class="mind-feed_main">
|
||||
|
||||
<!-- Looping through every post -->
|
||||
{{#foreach posts}}
|
||||
{{> "post-card-big"}}
|
||||
{{/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>
|
||||
Loading…
Reference in New Issue