implement sidebar related-posts style

implement remark42 commenting system
This commit is contained in:
Bea 2020-08-16 12:25:09 +02:00
parent a1f0fcaf99
commit 3b4b716667
8 changed files with 106 additions and 46 deletions

View File

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

View File

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

View File

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

View File

@ -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']);

View File

@ -23,6 +23,7 @@
{{#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>
@ -62,7 +63,6 @@
{{{body}}}
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
<footer class="mind-site-footer_main unselectable">
<div>
<p>Copyright © 2019-20 ― Lorenzo Dellacà</p>

View File

@ -17,8 +17,8 @@
{{#foreach posts}}
<article class="{{post_class}}">
<a class="post-card_main" href="{{url}}">
<header class="post-card_header">
<img class="post-card_feature-image" src="{{img_url feature_image size="s"}}" />
<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>

View File

@ -0,0 +1,16 @@
{{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags" as |related|}}
<h4>Similar posts</h4>
{{#foreach related}}
<article class="{{post_class}}">
<a class="post-card-sidebar_main" href="{{url}}">
<img class="post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}" />
<header class="post-card-sidebar_header">
<p class="post-card-sidebar_meta"><span class="post-card-sidebar_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
<h5>{{title}}</h5>
</header>
</a>
</article>
{{/foreach}}
{{else}}
<h4>No related posts</h4>
{{/get}}

View File

@ -1,38 +1,30 @@
{{!< default}}
{{#post}}
<div class="mind-page-title unselectable">
<div class="mind-page-title unselectable">
{{#post}}
<h1>{{title}}</h1>
{{/post}}
<i class="arrow-down"></i>
</div>
</div>
<main>
<main>
<div class="mind-content_main">
<div class="mind-post_main">
<div class="mind-post_sidebar"></div>
<aside class="mind-post_sidebar unselectable">
</aside>
{{#post}}
<div class="mind-post_content">
<div class="mind-post_header">
<img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
</div>
{{content}}
<div id="remark42"></div>
</div>
<div class="mind-post_sidebar">
{{#get "posts" limit="5"}}
<h3>You may also like</h3>
{{#foreach posts}}
<article class="{{post_class}}">
<a class="post-card-sidebar_main" href="{{url}}">
<header>
<img class="post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}" />
<h4>{{title}}</h4>
</header>
</a>
</article>
{{/foreach}}
{{else}}
<h2>No similar posts.</h2>
{{/get}}
{{/post}}
<aside class="mind-post_sidebar unselectable">
<div class="mind-post_sidebar-content">
{{> "posts-sidebar-loop"}}
</div>
</aside>
</div>
</div>
</div>
</main>
{{/post}}
</main>