WebDev/mind-overflow-website-ghost-theme
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

implement posts style, to be completed

Browse Source 
change font
add secondary navigation to homepage
This commit is contained in:
Bea 2020-08-15 12:40:28 +02:00
parent 121708786d
commit a1f0fcaf99
8 changed files with 407 additions and 545 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
assets/css/home-style.css
View File

@ -9,7 +9,7 @@ h1 {
.mind-site-title { .mind-site-title {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0%; margin: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -22,13 +22,47 @@ h1 {
.mind-site-title h1 { .mind-site-title h1 {
margin-top: 100px; margin-top: 100px;
position: absolute; padding: 0;
}
.navbar-secondary {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: center;
text-decoration: none;
overflow: hidden;
padding: 0;
background-color: rgb(50, 50, 50);
}
.navbar-secondary li {
display: inline-block;
text-align: center;
font-size: 25px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
margin: 0;
padding: 0 10px;
}
.navbar-secondary a {
color: white;
margin: 0;
padding: 0;
text-decoration: none;
display: flex;
align-items: center;
} }
.mind-feed_main { .mind-feed_main {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px; grid-gap: 30px;
padding: 50px 0;
} }
.post-card_main { .post-card_main {
@ -36,9 +70,8 @@ h1 {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 20px;
box-sizing: border-box; box-sizing: border-box;
/* Style */ /* Style */
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
border: 1px solid; border: 1px solid;
@ -46,6 +79,8 @@ h1 {
border-radius: 5px; border-radius: 5px;
box-shadow: 0 1px 1px black, 0 2px 4px black; box-shadow: 0 1px 1px black, 0 2px 4px black;
transition: 0.5s; transition: 0.5s;
padding: 20px;
font-size: 18px;
} }
.post-card_main:hover { .post-card_main:hover {
@ -61,13 +96,30 @@ h1 {
3. scale down 3. scale down
transform: scale(0.96); transform: scale(0.96);
ATM: scale up ATM: move up
*/ */
transform:translate3d(0,-5px,0); transform:translate3d(0,-5px,0);
} }
.post-card_excerpt {
text-align: justify;
}
a.post-card_main { a.post-card_main {
color: white; color: rgb(200, 200, 200);
}
.post-card_meta {
font-family: 'Roboto', sans-serif;
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 { a.post-card_main:hover {
@ -86,74 +138,35 @@ article {
box-sizing: border-box; box-sizing: border-box;
} }
.post-card_profile-image { .post-card_author-image {
border-radius: 20%; border-radius: 20%;
margin-left: 10px; margin-left: 10px;
max-width: 30px; max-width: 30px;
} }
.post-card_feature-image { .post-card_feature-image {
border-radius: 5px;
/*
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%; width: 100%;
*/
object-fit: cover;
width: 100%;
height: 217px;
max-height: 100%;
border-radius: 5px;
} }
/* ANIMATED GRADIENT BACKGROUND */ /* ARROW BOUNCE */
@keyframes gradient { @keyframes bounce {
0% {background-position: 0%} 0% { top: 94%; }
100% {background-position: 100%} 50% { top: 92%; }
} 100% { top: 94%; }
/*MOBILE*/
@media (min-width: 0px) and (max-width: 200px) {
h1 {
font-size: 20px;
}
}
@media (min-width: 200px) and (max-width: 300px) {
h1 {
font-size: 39px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
h1 {
font-size: 52px;
}
}
@media (min-width: 400px) and (max-width: 500px) {
h1 {
font-size: 64px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
h1 {
font-size: 64px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
h1 {
font-size: 76px;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
h1 {
font-size: 80px;
}
}
/* 4K+ MONITORS*/
@media (min-width: 2100px) {
h1 {
font-size: 180px;
}
} }

251
assets/css/page-style.css
View File

@ -1,12 +1,8 @@
@charset "utf-8"; @charset "utf-8";
/* CSS Document */ /* CSS Document */
html, body {
background-color: black;
}
h1 { h1 {
font-size: 120px; font-size: 90px;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
padding-left: 5%; padding-left: 5%;
@ -14,130 +10,163 @@ h1 {
bottom: 10%; bottom: 10%;
} }
.mind-fullscreen-title { .mind-page-title {
height: 100%; height: 400px;
width: 100%; width: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: 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-fullscreen-title h1 { .mind-page-title h1 {
/* Leave space for the floating arrow */
margin-bottom: 4%;
}
.mind-post_main {
max-width: 1260px;
width: 1260px;
display: grid;
grid-template-columns: 1fr 4fr 1fr;
margin: auto;
}
.mind-post_header {
margin-top: 50px;
}
img.mind-post_feature-image {
width: 100%;
border-radius: 5px;
}
pre {
overflow-x: scroll;
border: 1px solid black;
border-radius: 5px;
background-color: rgb(20, 20, 20);
font-size: 14px;
color: white;
padding: 10px;
margin: 0 20px 2em;
}
.mind-post_content {
overflow: hidden; /* to hide, eg. overflowing code */
display: flex;
max-width: 100%;
flex-direction: column;
padding: 0 60px;
text-align: justify;
background-color: rgb(40, 40, 40);
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
position: relative;
z-index: 2;
font-size: 19px;
color: rgb(200, 200, 200);
}
.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
text-align: left;
}
.mind-post_content h2 {
font-size: 31px;
}
.mind-post_content blockquote {
color: rgb(180, 180, 180);
font-style: italic;
margin-left: 0;
padding-left: 40px;
border-left: 2px solid paleturquoise;
}
.mind-post_content li {
margin: 0 0 1em;
}
.mind-post_content a {
position: relative;
}
.mind-post_content a {
position: relative;
}
.mind-post_content a:before {
content: "";
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 10%; height: 1px;
bottom: 0;
left: 0;
background-color: paleturquoise;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
} }
/* ANIMATED GRADIENT BACKGROUND */ .mind-post_content a:hover:before {
@keyframes gradient { visibility: visible;
0% {background-position: 0%} -webkit-transform: scaleX(1);
100% {background-position: 100%} transform: scaleX(1);
} }
/*MOBILE*/ .mind-post_sidebar {
@media (min-width: 0px) and (max-width: 200px) { padding: 50px 20px 0;
background-color: rgb(30, 30, 30);
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
}
h1 { .post-card-sidebar_main {
font-size: 20px; /* Layout */
} display: flex;
h2 { flex-direction: column;
font-size: 15px; margin: 20px 0;
padding-top: 20px;
}
li {
padding: 5px; padding: 5px;
}
/* Style */
background-color: rgb(40, 40, 40);
border-radius: 5px;
box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0);
transition: 0.5s;
} }
@media (min-width: 200px) and (max-width: 300px) { .post-card-sidebar_feature-image {
h1 { /*
font-size: 39px; The following 3 statements are used
} to make all images have the same size.
h2 {
font-size: 18px; This has the downside of being relatively more difficult to scale,
padding-top: 25px; so if you want to go back to normal viewing (full image)
} only leave:
h3 { width: 100%;
font-size: 16px; */
padding-top: 25px; object-fit: cover;
} width: 100%;
li { height: 100px;
padding: 6px; max-height: 100%;
}
border-radius: 5px;
} }
@media (min-width: 300px) and (max-width: 400px) { .post-card-sidebar_main:hover {
transform:translate3d(0,-5px,0);
h1 {
font-size: 52px;
}
h2 {
font-size: 21px;
padding-top: 28px;
}
h3 {
font-size: 19px;
padding-top: 28px;
}
li {
padding: 8px;
}
} }
@media (min-width: 400px) and (max-width: 500px) { /* ARROW BOUNCE */
@keyframes bounce {
h1 { 0% { top: 88%; }
font-size: 64px; 50% { top: 85%; }
} 100% { top: 88%; }
h2 {
font-size: 25px;
padding-top: 31px;
}
h3 {
font-size: 22px;
padding-top: 31px;
}
li {
padding: 10px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
h1 {
font-size: 80px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 25px;
}
li {
padding: 13px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
h1 {
font-size: 95px;
}
h2 {
font-size: 35px;
}
h3 {
font-size: 30px;
}
}
/* 4K+ MONITORS*/
@media (min-width: 2100px) {
h1 {
font-size: 150px;
}
h2 {
font-size: 45px;
padding: 40px;
}
li {
padding: 20px;
}
} }

373
assets/css/screen.css
View File

@ -20,40 +20,26 @@ a {
color: paleturquoise; color: paleturquoise;
} }
a:hover { h1, h2, h3, h4, h5, h6 {
text-decoration: underline;
}
h1 {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 800; font-weight: 800;
color: white; color: rgb(230, 230, 230);
} }
h2 { h2 {
font-family: 'Montserrat', sans-serif; margin: 38px 0 0;
font-weight: 800; font-size: 40px;
color: white;
margin: 38px 0 38px;
font-size: 60px;
} }
h3 { h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: white;
margin: 0; margin: 0;
padding: 30px 0 0;
font-size: 33px; font-size: 33px;
} }
h4 { h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
color: white;
margin: 0; margin: 0;
padding: 20px; padding: 20px 0 0;
font-size: 25px; font-size: 20px;
} }
.nav { .nav {
@ -139,26 +125,39 @@ is applied by the script on scroll.
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.mind-content_main {
width: 1260px;
margin: auto;
}
/* Begin Main Content */ /* Begin Main Content */
main { main {
margin: auto;
width: 1260px;
max-width: 100%;
box-sizing: border-box;
text-align: justify;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
padding-top: 30px; width: 100%;
padding-bottom: 30px; max-width: 100%;
} }
/* End Main Content */ /* End Main Content */
/* Begin footer */ /* Begin footer */
/* .mind-fullscreen-title is only used by pages (no homepage), however other pages have the footer too. */ footer.mind-site-footer_main {
.mind-fullscreen-title, footer.mind-site-footer_main {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
position: relative;
z-index: 3;
}
.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. */
.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-size: 1000%, 100%; background-size: 1000%, 100%;
animation: gradient 7s linear infinite; animation: gradient 7s linear infinite;
@ -179,7 +178,7 @@ nav.mind-site-footer_nav {
display: none; /*Hidden, we want to show it via JavaScript */ display: none; /*Hidden, we want to show it via JavaScript */
/* Theming */ /* Theming */
background: #151515; background: rgb(30, 30, 30);
color: white; color: white;
border-radius: 3px; border-radius: 3px;
padding: 10px; padding: 10px;
@ -209,7 +208,7 @@ nav.mind-site-footer_nav {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 200; font-weight: 200;
color: white; color: white;
font-size: 13px; font-size: 16px;
padding: 0 20px; padding: 0 20px;
} }
@ -237,7 +236,6 @@ nav.mind-site-footer_nav {
/* End policy popup */ /* End policy popup */
.arrow-down { .arrow-down {
border: solid white; border: solid white;
opacity: 0.4; opacity: 0.4;
@ -251,12 +249,6 @@ nav.mind-site-footer_nav {
transition: 1s; transition: 1s;
} }
/* ARROW BOUNCE */
@keyframes bounce {
0% { top: 94%; }
50% { top: 92%; }
100% { top: 94%; }
}
/* Begin Ghost mandatory CSS */ /* Begin Ghost mandatory CSS */
.kg-width-wide { .kg-width-wide {
@ -317,6 +309,10 @@ nav.mind-site-footer_nav {
.kg-bookmark-thumbnail { .kg-bookmark-thumbnail {
} }
.kg-image {
max-width: 100%;
}
/* End Ghost mandatory CSS */ /* End Ghost mandatory CSS */
/* Generic class to make things unselectable */ /* Generic class to make things unselectable */
@ -336,6 +332,12 @@ img {
-o-user-select: none; -o-user-select: none;
} }
/* ANIMATED GRADIENT BACKGROUND */
@keyframes gradient {
0% {background-position: 0%}
100% {background-position: 100%}
}
/* COLORED TEXT SELECTION */ /* COLORED TEXT SELECTION */
::selection { ::selection {
color: #2d0670; color: #2d0670;
@ -347,261 +349,6 @@ img {
background: rgba(255, 255, 255, 0.995); background: rgba(255, 255, 255, 0.995);
} }
/* Begin media queries for elements size */
@media (min-width: 0px) and (max-width:200px) {
h4 {
font-size: 8px;
}
.mind-policy-popup {
/* centered */
left: 5px;
width: 100px;
bottom: 50px;
}
.mind-policy-popup h4 {
padding: 15px 15px;
}
.mind-policy-popup p {
font-size: 7px;
padding: 0 15px;
margin: 0;
}
.mind-policy-popup button {
font-size:7px;
margin: 10px;
padding: 5px 8px;
}
.navbar a {
font-size: 10px;
}
main {
font-size: 10px;
}
}
@media (min-width: 200px) and (max-width: 300px) {
h4 {
font-size: 10px;
}
.mind-policy-popup {
/* centered */
left: 50%;
margin-left: -100px; /* this has to be half the width */
width: 200px;
bottom: 50px;
}
.mind-policy-popup h4 {
padding: 15px 15px;
}
.mind-policy-popup p {
font-size: 8px;
padding: 0 15px;
margin: 0;
}
.mind-policy-popup button {
font-size: 8px;
margin: 10px;
padding: 10px 15px;
}
.navbar a {
font-size: 11px;
}
main {
font-size: 13px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
h4 {
font-size: 13px;
}
.mind-policy-popup {
/* centered */
left: 50%;
margin-left: -140px; /* this has to be half the width */
width: 280px;
}
.mind-policy-popup h4 {
padding: 15px 15px;
}
.mind-policy-popup p {
font-size: 8px;
padding: 0 15px;
margin: 0;
}
.mind-policy-popup button {
font-size: 8px;
margin: 10px;
padding: 10px 15px;
}
.navbar a {
font-size: 16px;
}
main {
font-size: 16px;
}
}
@media (min-width: 400px) and (max-width: 500px) {
h4 {
font-size: 15px;
}
.mind-policy-popup {
/* centered */
left: 50%;
margin-left: -175px; /* this has to be half the width */
width: 350px;
}
.mind-policy-popup h4 {
padding: 15px 15px;
}
.mind-policy-popup p {
font-size:10px;
padding: 0 15px;
margin: 0;
}
.mind-policy-popup button {
font-size: 10px;
margin: 10px;
padding: 10px 15px;
}
.navbar a {
font-size: 21px;
}
main {
font-size: 18px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
h4 {
font-size: 18px;
}
.mind-policy-popup {
width: 400px;
}
.mind-policy-popup h4 {
padding: 15px 15px;
}
.mind-policy-popup p {
font-size: 11px;
padding: 0 15px;
margin: 0;
}
.mind-policy-popup button {
font-size: 11px;
margin: 10px;
}
.navbar a {
font-size: 26px;
}
main {
font-size: 20px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
h4 {
font-size: 21px;
}
.mind-policy-popup {
width: 500px;
}
.mind-policy-popup h4 {
padding: 15px 15px;
}
.mind-policy-popup p {
font-size: 11px;
padding: 0 15px;
margin: 0;
}
.mind-policy-popup button {
font-size: 11px;
margin: 10px;
}
.navbar a {
font-size: 29px;
}
main {
font-size: 23px;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
h4 {
font-size: 23px;
}
.mind-policy-popup h4 {
padding: 15px 15px;
}
.mind-policy-popup p {
font-size: 13px;
padding: 0 15px;
margin: 0;
}
.mind-policy-popup button {
margin: 10px;
}
}
/* 4K MONITORS */
@media (min-width: 2100px) {
.mind-policy-popup p {
font-size: 15px;
}
.mind-policy-popup button {
font-size: 15px;
}
main {
font-size: 25px;
}
}
/* End media queries */
/* Begin fonts */ /* Begin fonts */
@font-face { @font-face {
font-family: 'Oswald'; font-family: 'Oswald';
@ -626,6 +373,16 @@ img {
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
} }
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.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;
}
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
@ -634,4 +391,32 @@ img {
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2'); src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.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; 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: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.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;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.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;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
font-display: swap;
src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.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 */ /* End fonts */

6
default.hbs
View File

@ -54,7 +54,7 @@
<h4>This website uses cookies.</h4> <h4>This website uses cookies.</h4>
<p>We use cookies to ensure you the best experience. <p>We use cookies to ensure you the best experience.
<br> <br>
By visiting our website, you agree with our <a href="/pages/policy.html" target="_blank">Privacy Policy</a>. By visiting our website, you agree with our <a href="/policy" target="_blank">Privacy Policy</a>.
</p> </p>
<button onclick="agreePolicyPopup()">Ok, understood</button> <button onclick="agreePolicyPopup()">Ok, understood</button>
</div> </div>
@ -65,10 +65,10 @@
<footer class="mind-site-footer_main unselectable"> <footer class="mind-site-footer_main unselectable">
<div> <div>
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4> <p>Copyright © 2019-20 ― Lorenzo Dellacà</p>
</div> </div>
<nav class="mind-site-footer_nav"> <nav class="mind-site-footer_nav">
<a href="/">Privacy Policy</a> <a href="/policy/">Privacy Policy</a>
</nav> </nav>
</footer> </footer>

13
index.hbs
View File

@ -7,7 +7,10 @@
<main> <main>
<h2>Most recent posts</h2> <nav class="navbar-secondary unselectable">
{{navigation type="secondary"}}
</nav>
<div class="mind-content_main">
<div class="mind-feed_main"> <div class="mind-feed_main">
<!-- Looping through every post --> <!-- Looping through every post -->
@ -15,20 +18,22 @@
<article class="{{post_class}}"> <article class="{{post_class}}">
<a class="post-card_main" href="{{url}}"> <a class="post-card_main" href="{{url}}">
<header class="post-card_header"> <header class="post-card_header">
<img class="post-card_feature-image" src="{{feature_image}}" /> <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> <h3>{{title}}</h3>
</header> </header>
<section class="post-excerpt"> <section class="post-card_excerpt">
<p>{{excerpt words="26"}}</p> <p>{{excerpt words="26"}}</p>
</section> </section>
<footer class="post-card_footer"> <footer class="post-card_footer">
{{primary_author.name}} {{primary_author.name}}
{{#if primary_author.profile_image}}<img class="post-card_profile-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}} {{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
</footer> </footer>
</a> </a>
</article> </article>
{{/foreach}} {{/foreach}}
</div> </div>
</div>
</main> </main>
<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile --> <!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->

6
package.json
View File

@ -12,6 +12,10 @@
}, },
"config": { "config": {
"posts_per_page": 10, "posts_per_page": 10,
"image_sizes": {} "image_sizes": {
"s": {
"width": 300
}
}
} }
} }

5
page.hbs
View File

@ -1,11 +1,12 @@
{{!< default}} {{!< default}}
{{#post}} {{#post}}
<div class="mind-fullscreen-title unselectable"> <div class="mind-page-title unselectable">
<h1>{{title}}</h1> <h1>{{title}}</h1>
<i class="arrow-down"></i> <i class="arrow-down"></i>
</div> </div>
<main> <main>
{{content}} <div class="mind-content_main">
</div>
</main> </main>
{{/post}} {{/post}}

29
post.hbs
View File

@ -1,13 +1,38 @@
{{!< default}} {{!< default}}
{{#post}} {{#post}}
<div class="mind-fullscreen-title unselectable"> <div class="mind-page-title unselectable">
<h1>{{title}}</h1> <h1>{{title}}</h1>
<i class="arrow-down"></i> <i class="arrow-down"></i>
</div> </div>
<main> <main>
<div class="mind-content"> <div class="mind-content_main">
<div class="mind-post_main">
<div class="mind-post_sidebar"></div>
<div class="mind-post_content">
<div class="mind-post_header">
<img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
</div>
{{content}} {{content}}
</div> </div>
<div class="mind-post_sidebar">
{{#get "posts" limit="5"}}
<h3>You may also like</h3>
{{#foreach posts}}
<article class="{{post_class}}">
<a class="post-card-sidebar_main" href="{{url}}">
<header>
<img class="post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}" />
<h4>{{title}}</h4>
</header>
</a>
</article>
{{/foreach}}
{{else}}
<h2>No similar posts.</h2>
{{/get}}
</div>
</div>
</div>
</main> </main>
{{/post}} {{/post}}