From 359e6108c9e1cfb0da081322d9d46bf48db29913 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= Date: Wed, 12 Aug 2020 18:55:35 +0200 Subject: [PATCH] WIP: blog implementation on homepage --- assets/css/home-style.css | 59 +++++---------- assets/css/page-style.css | 90 +--------------------- assets/css/screen.css | 152 +++++++++++++++++++++++++++++++++----- default.hbs | 35 ++++----- index.hbs | 46 +++++++++--- page.hbs | 8 +- post.hbs | 8 +- static-page.hbs | 16 ---- 8 files changed, 215 insertions(+), 199 deletions(-) delete mode 100644 static-page.hbs diff --git a/assets/css/home-style.css b/assets/css/home-style.css index 38fa568..eef6511 100644 --- a/assets/css/home-style.css +++ b/assets/css/home-style.css @@ -1,15 +1,12 @@ @charset "utf-8"; /* CSS Document */ -html, body { - -moz-user-select: none; - -webkis-user-select: none; - -ms-user-select: none; - user-select: none; - -o-user-select: none; +h1 { + font-size: 90px; + margin-top: 20px; } -.main { +.mind-site-title { height: 100%; width: 100%; margin: 0%; @@ -23,14 +20,21 @@ html, body { animation-direction: alternate-reverse; } -h1 { - font-size: 90px; - margin-top: 20px; +.mind-site-title h1 { + position: absolute; } -.navbar { - margin-top: auto; - padding-bottom: 20px; +.mind-articles-container { + width: 100%; + text-align: center; +} + +article { + display: inline-block; + width: 500px; + margin: 2%; + vertical-align: top; + text-align: left; } /* ANIMATED GRADIENT BACKGROUND */ @@ -45,10 +49,6 @@ h1 { h1 { font-size: 20px; } - .navbar a { - font-size: 10px; - padding: 4px; - } } @media (min-width: 200px) and (max-width: 300px) { @@ -56,10 +56,6 @@ h1 { h1 { font-size: 39px; } - .navbar a { - font-size: 11px; - padding: 8px; - } } @media (min-width: 300px) and (max-width: 400px) { @@ -67,10 +63,6 @@ h1 { h1 { font-size: 52px; } - .navbar a { - font-size: 16px; - padding: 8px; - } } @media (min-width: 400px) and (max-width: 500px) { @@ -78,38 +70,24 @@ h1 { h1 { font-size: 64px; } - .navbar a { - font-size: 21px; - padding: 8px; - } } @media (min-width: 500px) and (max-width: 600px) { h1 { font-size: 64px; } - .navbar a { - font-size: 26px; - padding: 8px; - } } @media (min-width: 600px) and (max-width: 700px) { h1 { font-size: 76px; } - .navbar a { - font-size: 27px; - } } @media (min-width: 700px) and (max-width: 1000px) { h1 { font-size: 80px; } - .navbar a { - font-size: 29px; - } } /* 4K+ MONITORS*/ @@ -118,7 +96,4 @@ h1 { h1 { font-size: 180px; } - .navbar a { - font-size: 40px; - } } diff --git a/assets/css/page-style.css b/assets/css/page-style.css index 371ec79..8e25cbd 100644 --- a/assets/css/page-style.css +++ b/assets/css/page-style.css @@ -5,10 +5,6 @@ html, body { background-color: black; } -.navbar { - padding-top: 20px; -} - h1 { font-size: 120px; margin: 0; @@ -18,55 +14,16 @@ h1 { bottom: 10%; } -.arrow-down { - border: solid white; - opacity: 0.4; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 6px; - margin-left: -6px; - position: absolute; - transform: rotate(45deg); - animation: bounce 1.5s infinite; - transition: 1s; -} - -/* ARROW BOUNCE */ -@keyframes bounce { - 0% { top: 94%; } - 50% { top: 92%; } - 100% { top: 94%; } -} - -.mind-fullscreen-title, footer { - background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667); - background-size: 1000%, 100%; - animation: gradient 7s linear infinite; - animation-direction: alternate-reverse; - color: white; - - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} .mind-fullscreen-title { height: 100%; + width: 100%; text-align: center; } -.mind-content { - font-family: 'Montserrat', sans-serif; - font-weight: 200; - background-color: #151515; - font-size: 25px; - color: white; +.mind-fullscreen-title h1 { + position: absolute; width: 100%; - text-align: left; - box-sizing: border-box; - padding-top: 20px; - padding-left: 10%; - padding-right: 10%; - padding-bottom: 20px; + bottom: 10%; } /* COLORED TEXT SELECTION */ @@ -97,12 +54,6 @@ h1 { font-size: 15px; padding-top: 20px; } - .mind-content { - font-size: 10px; - } - .navbar a { - font-size: 10px; - } li { padding: 5px; } @@ -121,12 +72,6 @@ h1 { font-size: 16px; padding-top: 25px; } - .mind-content { - font-size: 13px; - } - .navbar a { - font-size: 11px; - } li { padding: 6px; } @@ -145,12 +90,6 @@ h1 { font-size: 19px; padding-top: 28px; } - .mind-content { - font-size: 16px; - } - .navbar a { - font-size: 16px; - } li { padding: 8px; } @@ -169,12 +108,6 @@ h1 { font-size: 22px; padding-top: 31px; } - .mind-content { - font-size: 18px; - } - .navbar a { - font-size: 21px; - } li { padding: 10px; } @@ -190,12 +123,6 @@ h1 { h3 { font-size: 25px; } - .mind-content { - font-size: 20px; - } - .navbar a { - font-size: 26px; - } li { padding: 13px; } @@ -211,12 +138,6 @@ h1 { h3 { font-size: 30px; } - .mind-content { - font-size: 23px; - } - .navbar a { - font-size: 29px; - } } /* 4K+ MONITORS*/ @media (min-width: 2100px) { @@ -228,9 +149,6 @@ h1 { font-size: 45px; padding: 40px; } - .mind-content { - font-size: 25px; - } li { padding: 20px; } diff --git a/assets/css/screen.css b/assets/css/screen.css index a8201fe..0dee6ef 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -2,8 +2,8 @@ /* CSS Document */ html, body { - font-family: 'Montserrat', sans-serif; - font-weight: 800; + font-family: 'Raleway', sans-serif; + font-weight: 300; margin: 0; padding: 0; height: 100%; @@ -13,9 +13,7 @@ html, body { h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; - width: 100%; color: white; - position: absolute; } h2 { @@ -24,7 +22,7 @@ h2 { color: white; margin: 0; padding: 38px 0 0; - font-size: 40px; + font-size: 60px; } h3 { @@ -45,17 +43,16 @@ h4 { font-size: 25px; } - -a { - text-decoration: none; - color: paleturquoise; -} - .nav { padding: 0; } .navbar { + position: fixed; + width: 100%; + top: 0; + z-index: 100; + display: flex; align-items: center; justify-content: center; @@ -63,13 +60,7 @@ a { text-transform: uppercase; text-decoration: none; overflow: hidden; - - /* Disable text selection */ - -moz-user-select: none; - -webkis-user-select: none; - -ms-user-select: none; - user-select: none; - -o-user-select: none; + padding: 0; } .navbar li { @@ -97,6 +88,41 @@ a { -webkit-text-fill-color: transparent; } +/* Begin Content */ +.mind-content { + font-family: 'Raleway', sans-serif; + font-weight: 300; + background-color: #151515; + font-size: 22px; + line-height: 1.6; + color: white; + width: 100%; + text-align: left; + text-align: justify; + box-sizing: border-box; + padding-top: 20px; + padding-left: 20%; + padding-right: 20%; + padding-bottom: 20px; +} + +.mind-content a { + text-decoration: none; + color: paleturquoise; +} +/* End Content */ + +/* Begin footer */ +/* .mind-fullscreen-title is only used by pages (no homepage), however other pages have the footer too. */ +.mind-fullscreen-title, footer { + background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667); + background-size: 1000%, 100%; + animation: gradient 7s linear infinite; + animation-direction: alternate-reverse; + color: white; +} +/* End footer */ + /* Begin policy popup */ /* todo: this makes the page a little bit higher & larger, adding bars. fix it */ @@ -162,6 +188,26 @@ a { /* End policy popup */ + +.arrow-down { + border: solid white; + opacity: 0.4; + border-width: 0 2px 2px 0; + display: inline-block; + padding: 6px; + margin-left: -6px; + position: absolute; + transform: rotate(45deg); + animation: bounce 1.5s infinite; + transition: 1s; +} + +/* ARROW BOUNCE */ +@keyframes bounce { + 0% { top: 94%; } + 50% { top: 92%; } + 100% { top: 94%; } +} /* Begin Ghost mandatory CSS */ .kg-width-wide { @@ -224,6 +270,15 @@ a { } /* End Ghost mandatory CSS */ +/* Generic class to make things unselectable */ +.unselectable { + -moz-user-select: none; + -webkis-user-select: none; + -ms-user-select: none; + user-select: none; + -o-user-select: none; +} + /* Begin media queries for elements size */ @media (min-width: 0px) and (max-width:200px) { @@ -253,6 +308,14 @@ a { margin: 10px; padding: 5px 8px; } + + .navbar a { + font-size: 10px; + } + + .mind-content { + font-size: 10px; + } } @media (min-width: 200px) and (max-width: 300px) { @@ -284,6 +347,14 @@ a { margin: 10px; padding: 10px 15px; } + + .navbar a { + font-size: 11px; + } + + .mind-content { + font-size: 13px; + } } @media (min-width: 300px) and (max-width: 400px) { @@ -313,6 +384,14 @@ a { margin: 10px; padding: 10px 15px; } + + .navbar a { + font-size: 16px; + } + + .mind-content { + font-size: 16px; + } } @media (min-width: 400px) and (max-width: 500px) { @@ -342,6 +421,14 @@ a { margin: 10px; padding: 10px 15px; } + + .navbar a { + font-size: 21px; + } + + .mind-content { + font-size: 18px; + } } @media (min-width: 500px) and (max-width: 600px) { @@ -367,6 +454,14 @@ a { font-size: 11px; margin: 10px; } + + .navbar a { + font-size: 26px; + } + + .mind-content { + font-size: 20px; + } } @media (min-width: 600px) and (max-width: 700px) { @@ -392,6 +487,14 @@ a { font-size: 11px; margin: 10px; } + + .navbar a { + font-size: 29px; + } + + .mind-content { + font-size: 23px; + } } @media (min-width: 700px) and (max-width: 1000px) { @@ -423,6 +526,10 @@ a { .mind-policy-popup button { font-size: 15px; } + + .mind-content { + font-size: 25px; + } } /* End media queries */ @@ -450,4 +557,13 @@ a { font-weight: 200; src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2'); } + +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVuEorCIPrE.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/default.hbs b/default.hbs index cd920d0..666a4c3 100644 --- a/default.hbs +++ b/default.hbs @@ -7,27 +7,30 @@ - + + - {{#is "post, page"}} - + + {{#is "post, page"}} - {{@site.title}} - {{meta_title}} + - - - - {{/is}} + {{@site.title}} - {{meta_title}} - {{#is "index"}} - {{meta_title}} + {{/is}} + - - {{/is}} + + {{#is "index"}} + {{meta_title}} + + + {{/is}} + {{ghost_head}} @@ -48,11 +51,9 @@ {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} - {{#is "post, page"}} - - {{/is}} + {{!-- --}} {{ghost_foot}} diff --git a/index.hbs b/index.hbs index 5b3ebfa..7cff761 100644 --- a/index.hbs +++ b/index.hbs @@ -1,18 +1,40 @@ {{!< default}} -
-

{{@site.title}}

+
+ {{navigation}} +
-
- {{navigation}} -
-
+
+

{{@site.title}}

+ +
+ + +
+
+

Last posts

+ +
+ + {{#foreach posts}} +
+
+

{{title}}

+
+
+

{{excerpt words="26"}} ...

+
+
+ {{#if primary_author.profile_image}}Author image{{/if}} + {{primary_author}} + {{tags prefix=" on "}} + +
+
+ {{/foreach}} +
+
+
- {{#post}} -
- {{content}} -
- {{/post}} -