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:
Bea 2020-08-17 22:45:09 +02:00
parent e9c2f9ea41
commit da155c7d7e
14 changed files with 361 additions and 199 deletions

View File

@ -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%; }
}

View File

@ -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 */

View 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;
}

View File

@ -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 */

0
assets/css/tag-style.css Normal file
View File

View File

@ -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"});
}
})
})

View File

@ -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}}

44
home.hbs Normal file
View 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>

View File

@ -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>

View File

@ -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
}
}
}

18
page.hbs Executable file → Normal file
View File

@ -1,12 +1,24 @@
{{!< default}}
{{#post}}
<div class="mind-page-title unselectable">
{{#post}}
<div>
<h1>{{title}}</h1>
<i class="arrow-down"></i>
</div>
{{/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>
{{/post}}

View 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>

View File

@ -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>

52
tag.hbs Normal file
View 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>