From da155c7d7efec5f14a9e9ad0e1cf665a2cdba3a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= Date: Mon, 17 Aug 2020 22:45:09 +0200 Subject: [PATCH] Lots of changes - add tags.hbs - add home.hbs, copy of index.hbs - change

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 --- assets/css/home-style.css | 121 --------------------------------- assets/css/page-style.css | 39 ++--------- assets/css/post-card-style.css | 101 +++++++++++++++++++++++++++ assets/css/screen.css | 105 ++++++++++++++++++++++++---- assets/css/tag-style.css | 0 assets/js/arrow-fade.js | 4 +- default.hbs | 14 +++- home.hbs | 44 ++++++++++++ index.hbs | 18 +---- package.json | 5 +- page.hbs | 32 ++++++--- partials/post-card-big.hbs | 17 +++++ post.hbs | 8 ++- tag.hbs | 52 ++++++++++++++ 14 files changed, 361 insertions(+), 199 deletions(-) create mode 100644 assets/css/post-card-style.css create mode 100644 assets/css/tag-style.css create mode 100644 home.hbs mode change 100755 => 100644 page.hbs create mode 100644 partials/post-card-big.hbs create mode 100644 tag.hbs diff --git a/assets/css/home-style.css b/assets/css/home-style.css index 037bc9f..9595ca5 100755 --- a/assets/css/home-style.css +++ b/assets/css/home-style.css @@ -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%; } -} diff --git a/assets/css/page-style.css b/assets/css/page-style.css index fb43033..cc08bee 100755 --- a/assets/css/page-style.css +++ b/assets/css/page-style.css @@ -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 */ diff --git a/assets/css/post-card-style.css b/assets/css/post-card-style.css new file mode 100644 index 0000000..9725c76 --- /dev/null +++ b/assets/css/post-card-style.css @@ -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; +} diff --git a/assets/css/screen.css b/assets/css/screen.css index b464b08..8b21bd5 100755 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -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 */ diff --git a/assets/css/tag-style.css b/assets/css/tag-style.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/js/arrow-fade.js b/assets/js/arrow-fade.js index c3efeea..198529c 100755 --- a/assets/js/arrow-fade.js +++ b/assets/js/arrow-fade.js @@ -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"}); } }) }) diff --git a/default.hbs b/default.hbs index 31d9872..8d65e76 100755 --- a/default.hbs +++ b/default.hbs @@ -23,19 +23,31 @@ {{#is "post, page"}} - {{meta_title}} – {{@site.title}} {{/is}} + {{#is "post"}} + + {{/is}} + + {{# is "tag"}} + + {{/is}} + + {{#is "index"}} {{@site.title}} {{/is}} + + {{#is "index, tag"}} + + {{/is}} {{ghost_head}} diff --git a/home.hbs b/home.hbs new file mode 100644 index 0000000..30eadf6 --- /dev/null +++ b/home.hbs @@ -0,0 +1,44 @@ +{{!< default}} + +
+

{{@site.title}}

+ +
+ + +
+ +
+
+ + + {{#foreach posts}} + {{> "post-card-big"}} + {{/foreach}} +
+
+
+ + + diff --git a/index.hbs b/index.hbs index 1a9b60d..dea8ebc 100755 --- a/index.hbs +++ b/index.hbs @@ -2,7 +2,7 @@

{{@site.title}}

- +
@@ -15,21 +15,7 @@ {{#foreach posts}} - {{/foreach}} diff --git a/package.json b/package.json index b6cfd77..a70439e 100755 --- a/package.json +++ b/package.json @@ -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 } } } diff --git a/page.hbs b/page.hbs old mode 100755 new mode 100644 index bba4133..444a508 --- a/page.hbs +++ b/page.hbs @@ -1,12 +1,24 @@ {{!< default}} -{{#post}} -
-

{{title}}

- -
- -
-
+
+ {{#post}} +
+

{{title}}

-
-{{/post}} + {{/post}} + + + +
+
+
+ {{#post}} +
+
+ +
+ {{content}} +
+ {{/post}} +
+
+
diff --git a/partials/post-card-big.hbs b/partials/post-card-big.hbs new file mode 100644 index 0000000..7f55557 --- /dev/null +++ b/partials/post-card-big.hbs @@ -0,0 +1,17 @@ + diff --git a/post.hbs b/post.hbs index c342bed..7923285 100755 --- a/post.hbs +++ b/post.hbs @@ -1,9 +1,13 @@ {{!< default}}
{{#post}} + +

{{title}}

+

{{primary_tag.name}} •

+
{{/post}} - +
@@ -14,7 +18,7 @@ {{#post}}
- +
{{content}}
diff --git a/tag.hbs b/tag.hbs new file mode 100644 index 0000000..9046dcf --- /dev/null +++ b/tag.hbs @@ -0,0 +1,52 @@ +{{!< default}} + +
+ {{#tag}} + +
+

{{name}}

+

+ {{#if description}} + {{description}} + {{else}} + {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}} + {{/if}} +

+
+ {{/tag}} + +
+ +
+
+
+ + + {{#foreach posts}} + {{> "post-card-big"}} + {{/foreach}} +
+
+
+ + +