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

Lots of changes

Browse Source 
- 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:
Lorenzo Dellacà
2020-08-17 22:45:09 +02:00
parent e9c2f9ea41
commit da155c7d7e
14 changed files with 361 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
assets/css/home-style.css
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%; }
}

39
assets/css/page-style.css
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 */

101
assets/css/post-card-style.css Normal file
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;
}

105
assets/css/screen.css
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

4
assets/js/arrow-fade.js
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"});
}
})
})