implement sidebar related-posts style

implement remark42 commenting system

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 {

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

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

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