From 3b4b716667fd1e288582415dfc0ffd1a871cd22e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= Date: Sun, 16 Aug 2020 12:25:09 +0200 Subject: [PATCH] implement sidebar related-posts style implement remark42 commenting system --- assets/css/home-style.css | 12 +++++-- assets/css/page-style.css | 30 ++++++++++++++---- assets/css/screen.css | 10 ++++-- assets/js/remark42-comments.js | 22 +++++++++++++ default.hbs | 2 +- index.hbs | 4 +-- partials/posts-sidebar-loop.hbs | 16 ++++++++++ post.hbs | 56 ++++++++++++++------------------- 8 files changed, 106 insertions(+), 46 deletions(-) create mode 100644 assets/js/remark42-comments.js create mode 100644 partials/posts-sidebar-loop.hbs diff --git a/assets/css/home-style.css b/assets/css/home-style.css index 7d34201..1a3f2c6 100755 --- a/assets/css/home-style.css +++ b/assets/css/home-style.css @@ -66,6 +66,8 @@ h1 { } .post-card_main { + font-family: 'Montserrat', sans-serif; + font-weight: 400; display: flex; flex-direction: column; height: 100%; @@ -79,7 +81,6 @@ h1 { border-radius: 5px; box-shadow: 0 1px 1px black, 0 2px 4px black; transition: 0.5s; - padding: 20px; font-size: 18px; } @@ -101,8 +102,15 @@ h1 { 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 { @@ -110,7 +118,6 @@ a.post-card_main { } .post-card_meta { - font-family: 'Roboto', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 14px; @@ -132,6 +139,7 @@ footer.post-card_footer { height: 100%; margin-top: 20px; justify-content: flex-end; + padding: 0 20px 20px; } article { diff --git a/assets/css/page-style.css b/assets/css/page-style.css index e787d24..97e4e36 100755 --- a/assets/css/page-style.css +++ b/assets/css/page-style.css @@ -74,10 +74,6 @@ pre { text-align: left; } -.mind-post_content h2 { - font-size: 31px; -} - .mind-post_content blockquote { color: rgb(180, 180, 180); font-style: italic; @@ -120,9 +116,16 @@ pre { } .mind-post_sidebar { - padding: 50px 20px 0; + padding: 0 20px; background-color: rgb(30, 30, 30); box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0); + height: 100%; +} + +.mind-post_sidebar-content { + padding: 90px 0 10px; + position: sticky; + top: 0; } .post-card-sidebar_main { @@ -130,7 +133,6 @@ pre { display: flex; flex-direction: column; margin: 20px 0; - padding: 5px; /* Style */ background-color: rgb(40, 40, 40); @@ -164,6 +166,22 @@ pre { } +.post-card-sidebar_meta { + font-weight: 700; + text-transform: uppercase; + font-size: 12px; + color: rgb(180, 180, 180); +} + +.post-card-sidebar_header { + margin: 0 5px 0; + padding: 0 5px 10px; +} + +.post-card-sidebar_tag { + color: #3fd5ff; +} + /* ARROW BOUNCE */ @keyframes bounce { 0% { top: 88%; } diff --git a/assets/css/screen.css b/assets/css/screen.css index 1bfba9d..1fe9b61 100755 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -28,17 +28,21 @@ h1, h2, h3, h4, h5, h6 { h2 { margin: 38px 0 0; - font-size: 40px; + font-size: 35px; } h3 { margin: 0; - font-size: 33px; + font-size: 28px; } h4 { margin: 0; - padding: 20px 0 0; + font-size: 24px; +} + +h5 { + margin: 0; font-size: 20px; } diff --git a/assets/js/remark42-comments.js b/assets/js/remark42-comments.js new file mode 100644 index 0000000..65da6e3 --- /dev/null +++ b/assets/js/remark42-comments.js @@ -0,0 +1,22 @@ +var remark_config = { + host: "https://comments.mind-overflow.net", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com" + site_id: 'mindoverflow', + components: ['embed'], // optional param; which components to load. default to ["embed"] + // to load all components define components as ['embed', 'last-comments', 'counter'] + // available component are: + // - 'embed': basic comments widget + // - 'last-comments': last comments widget, see `Last Comments` section below + // - 'counter': counter widget, see `Counter` section below + max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used + theme: 'dark', // optional param; if it isn't defined default value ('light') will be used + locale: 'en' // set up locale and language, if it isn't defined default value ('en') will be used +}; + +(function(c) { + for(var i = 0; i < c.length; i++){ + var d = document, s = d.createElement('script'); + s.src = remark_config.host + '/web/' +c[i] +'.js'; + s.defer = true; + (d.head || d.body).appendChild(s); + } +})(remark_config.components || ['embed']); diff --git a/default.hbs b/default.hbs index 03e898d..6d76243 100755 --- a/default.hbs +++ b/default.hbs @@ -23,6 +23,7 @@ {{#is "post, page"}} + {{meta_title}} – {{@site.title}} @@ -62,7 +63,6 @@ {{{body}}} {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} -