implement sidebar related-posts style
implement remark42 commenting system
This commit is contained in:
parent
a1f0fcaf99
commit
3b4b716667
@ -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 {
|
||||
|
||||
@ -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%; }
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
22
assets/js/remark42-comments.js
Normal file
22
assets/js/remark42-comments.js
Normal 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']);
|
||||
@ -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>
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
{{#foreach posts}}
|
||||
<article class="{{post_class}}">
|
||||
<a class="post-card_main" href="{{url}}">
|
||||
<img class="post-card_feature-image" src="{{img_url feature_image size="s"}}" />
|
||||
<header class="post-card_header">
|
||||
<img class="post-card_feature-image" src="{{img_url feature_image size="s"}}" />
|
||||
<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>
|
||||
@ -55,5 +55,5 @@
|
||||
'scaleMobile: 1.00'+
|
||||
'})'+
|
||||
'<\/script>');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
16
partials/posts-sidebar-loop.hbs
Normal file
16
partials/posts-sidebar-loop.hbs
Normal 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}}
|
||||
56
post.hbs
56
post.hbs
@ -1,38 +1,30 @@
|
||||
{{!< default}}
|
||||
{{#post}}
|
||||
<div class="mind-page-title unselectable">
|
||||
<div class="mind-page-title unselectable">
|
||||
{{#post}}
|
||||
<h1>{{title}}</h1>
|
||||
<i class="arrow-down"></i>
|
||||
</div>
|
||||
{{/post}}
|
||||
<i class="arrow-down"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="mind-content_main">
|
||||
<div class="mind-post_main">
|
||||
<div class="mind-post_sidebar"></div>
|
||||
<div class="mind-post_content">
|
||||
<div class="mind-post_header">
|
||||
<img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
|
||||
</div>
|
||||
{{content}}
|
||||
</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}}
|
||||
<main>
|
||||
<div class="mind-content_main">
|
||||
<div class="mind-post_main">
|
||||
<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>
|
||||
{{/post}}
|
||||
<aside class="mind-post_sidebar unselectable">
|
||||
<div class="mind-post_sidebar-content">
|
||||
{{> "posts-sidebar-loop"}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
{{/post}}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user