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;
|
display: flex;
|
||||||
align-items: center;
|
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";
|
@charset "utf-8";
|
||||||
/* CSS Document */
|
/* 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 {
|
.mind-post_main {
|
||||||
max-width: 1260px;
|
max-width: 1260px;
|
||||||
@ -194,6 +169,7 @@ img.mind-post_feature-image {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.post-card-sidebar_meta {
|
.post-card-sidebar_meta {
|
||||||
|
font-family: 'Roboto';
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@ -205,13 +181,10 @@ img.mind-post_feature-image {
|
|||||||
padding: 0 5px 10px;
|
padding: 0 5px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card-sidebar_tag {
|
/* MEDIA QUERIES FOR RESPONSIVE DESIGN */
|
||||||
color: #3fd5ff;
|
@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 */
|
||||||
|
|||||||
101
assets/css/post-card-style.css
Normal file
101
assets/css/post-card-style.css
Normal file
@ -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);
|
color: rgb(230, 230, 230);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
}
|
}
|
||||||
@ -73,7 +77,7 @@ text-decoration: none;
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
transition: 1s;
|
transition: .5s;
|
||||||
}
|
}
|
||||||
/* This class is applied by a JS script, so that users with JS disabled
|
/* 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.
|
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;
|
margin-left: -30px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
transition: 1s;
|
transition: .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar li {
|
.navbar li {
|
||||||
@ -127,7 +131,9 @@ is applied by the script on scroll.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar li.nav-services {
|
.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: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
|
||||||
|
/*background: white;*/
|
||||||
background-size: 800px, 800px;
|
background-size: 800px, 800px;
|
||||||
color: aquamarine;
|
color: aquamarine;
|
||||||
text-fill-color: transparent;
|
text-fill-color: transparent;
|
||||||
@ -141,6 +147,44 @@ is applied by the script on scroll.
|
|||||||
margin: auto;
|
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 */
|
/* Begin Main Content */
|
||||||
main {
|
main {
|
||||||
display: block;
|
display: block;
|
||||||
@ -156,20 +200,22 @@ footer.mind-site-footer_main {
|
|||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-site-footer_main p {
|
.mind-site-footer_main p {
|
||||||
font-family: 'Montserrat', sans-serif;
|
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: white;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
font-size: 25px;
|
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 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 {
|
.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%;
|
background-size: 1000%, 100%;
|
||||||
animation: gradient 7s linear infinite;
|
animation: gradient 7s linear infinite;
|
||||||
animation-direction: alternate-reverse;
|
animation-direction: alternate-reverse;
|
||||||
@ -183,7 +229,7 @@ nav.mind-site-footer_nav {
|
|||||||
/* End footer */
|
/* End footer */
|
||||||
|
|
||||||
/* Begin policy popup */
|
/* 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 {
|
.mind-policy-popup {
|
||||||
display: none; /*Hidden, we want to show it via JavaScript */
|
display: none; /*Hidden, we want to show it via JavaScript */
|
||||||
@ -220,7 +266,6 @@ nav.mind-site-footer_nav {
|
|||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 0 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -237,7 +282,6 @@ nav.mind-site-footer_nav {
|
|||||||
color: white;
|
color: white;
|
||||||
padding: 15px 30px;
|
padding: 15px 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 20px;
|
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -247,7 +291,7 @@ nav.mind-site-footer_nav {
|
|||||||
|
|
||||||
/* End policy popup */
|
/* End policy popup */
|
||||||
|
|
||||||
.arrow-down {
|
.mind-all-title_arrow-down {
|
||||||
border: solid white;
|
border: solid white;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
border-width: 0 2px 2px 0;
|
border-width: 0 2px 2px 0;
|
||||||
@ -256,10 +300,35 @@ nav.mind-site-footer_nav {
|
|||||||
margin-left: -6px;
|
margin-left: -6px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
animation: bounce 1.5s infinite;
|
|
||||||
transition: 1s;
|
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 Ghost mandatory CSS */
|
||||||
|
|
||||||
/* Begin images
|
/* Begin images
|
||||||
@ -356,7 +425,7 @@ nav.mind-site-footer_nav {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-description {
|
.kg-bookmark-description {
|
||||||
margin-top: 12px;
|
margin: 12px 0;
|
||||||
max-height: 48px;
|
max-height: 48px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
@ -400,15 +469,17 @@ nav.mind-site-footer_nav {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-thumbnail {
|
.kg-bookmark-thumbnail {
|
||||||
|
box-sizing: border-box;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
min-width: 33%;
|
max-width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-bookmark-thumbnail img {
|
.kg-bookmark-thumbnail img {
|
||||||
|
box-sizing: border-box;
|
||||||
border-radius: 0 5px 5px 0;
|
border-radius: 0 5px 5px 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
height: 157px;
|
height: 100%;
|
||||||
width: 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;
|
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 */
|
/* End fonts */
|
||||||
|
|||||||
0
assets/css/tag-style.css
Normal file
0
assets/css/tag-style.css
Normal file
@ -4,9 +4,9 @@ $(document).ready(function(){
|
|||||||
if($(this).scrollTop() >
|
if($(this).scrollTop() >
|
||||||
//$(window).height()*0.3){
|
//$(window).height()*0.3){
|
||||||
100) {
|
100) {
|
||||||
$(".arrow-down").css({"opacity" : "0"});
|
$(".mind-all-title_arrow-down").css({"opacity" : "0"});
|
||||||
} else {
|
} 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"}}
|
{{#is "post, page"}}
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
|
<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>
|
<title>{{meta_title}} – {{@site.title}}</title>
|
||||||
|
|
||||||
{{/is}}
|
{{/is}}
|
||||||
|
{{#is "post"}}
|
||||||
|
<script src="{{asset "js/remark42-comments.js"}}"></script>
|
||||||
|
{{/is}}
|
||||||
<!-- End Posts & Pages only code -->
|
<!-- 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 -->
|
<!-- Begin Index only code -->
|
||||||
{{#is "index"}}
|
{{#is "index"}}
|
||||||
<title>{{@site.title}}</title>
|
<title>{{@site.title}}</title>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" />
|
<link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" />
|
||||||
{{/is}}
|
{{/is}}
|
||||||
|
|
||||||
|
{{#is "index, tag"}}
|
||||||
|
<link rel="stylesheet" type="text/css" href="{{asset "css/post-card-style.css"}}" />
|
||||||
|
{{/is}}
|
||||||
<!-- End Index only code -->
|
<!-- End Index only code -->
|
||||||
|
|
||||||
{{ghost_head}}
|
{{ghost_head}}
|
||||||
|
|||||||
44
home.hbs
Normal file
44
home.hbs
Normal file
@ -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">
|
<div class="mind-site-title unselectable" id="vantajs">
|
||||||
<h1>{{@site.title}}</h1>
|
<h1>{{@site.title}}</h1>
|
||||||
<i class="arrow-down"></i>
|
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-big"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -15,21 +15,7 @@
|
|||||||
|
|
||||||
<!-- Looping through every post -->
|
<!-- Looping through every post -->
|
||||||
{{#foreach posts}}
|
{{#foreach posts}}
|
||||||
<article class="{{post_class}}">
|
{{> "post-card-big"}}
|
||||||
<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>
|
</article>
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "mindtheme",
|
"name": "mindtheme",
|
||||||
"description": "Mind Overflow's official website style",
|
"description": "Mind Overflow's official website style",
|
||||||
"version": "0.0.4",
|
"version": "0.0.5",
|
||||||
"engines": {
|
"engines": {
|
||||||
"ghost-api": "v3"
|
"ghost-api": "v3"
|
||||||
},
|
},
|
||||||
@ -24,6 +24,9 @@
|
|||||||
},
|
},
|
||||||
"m": {
|
"m": {
|
||||||
"width": 600
|
"width": 600
|
||||||
|
},
|
||||||
|
"l": {
|
||||||
|
"width": 1200
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
24
page.hbs
Executable file → Normal file
24
page.hbs
Executable file → Normal file
@ -1,12 +1,24 @@
|
|||||||
{{!< default}}
|
{{!< default}}
|
||||||
{{#post}}
|
<div class="mind-page-title unselectable">
|
||||||
<div class="mind-page-title unselectable">
|
{{#post}}
|
||||||
|
<div>
|
||||||
<h1>{{title}}</h1>
|
<h1>{{title}}</h1>
|
||||||
<i class="arrow-down"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
{{/post}}
|
||||||
|
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="mind-content_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>
|
</div>
|
||||||
</main>
|
{{content}}
|
||||||
{{/post}}
|
</div>
|
||||||
|
{{/post}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|||||||
17
partials/post-card-big.hbs
Normal file
17
partials/post-card-big.hbs
Normal file
@ -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}}
|
{{!< default}}
|
||||||
<div class="mind-page-title unselectable">
|
<div class="mind-page-title unselectable">
|
||||||
{{#post}}
|
{{#post}}
|
||||||
|
|
||||||
|
<div>
|
||||||
<h1>{{title}}</h1>
|
<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}}
|
{{/post}}
|
||||||
<i class="arrow-down"></i>
|
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
@ -14,7 +18,7 @@
|
|||||||
{{#post}}
|
{{#post}}
|
||||||
<div class="mind-post_content">
|
<div class="mind-post_content">
|
||||||
<div class="mind-post_content-header">
|
<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>
|
</div>
|
||||||
{{content}}
|
{{content}}
|
||||||
<hr>
|
<hr>
|
||||||
|
|||||||
52
tag.hbs
Normal file
52
tag.hbs
Normal file
@ -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
Block a user