From 4bac8f4d2c4d081d61c70ea09978fc28a5ee9946 Mon Sep 17 00:00:00 2001
From: Vyrtsev Mikhail <reeywhaar@gmail.com>
Date: Wed, 14 Nov 2018 18:28:44 +0300
Subject: [PATCH] comments page in style of https://remark42.com/demo/

---
 web/comments.ejs | 125 ++++++++++++++++++++++++++++-------------------
 1 file changed, 76 insertions(+), 49 deletions(-)
diff --git a/web/comments.ejs b/web/comments.ejs
index 1b1ced18..23ed1488 100644
--- a/web/comments.ejs
+++ b/web/comments.ejs
@@ -1,58 +1,85 @@
 <!DOCTYPE html>
-<html lang="ru">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>remark42</title>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Remark42 demo</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 20px;
+        text-align: center;
+        font: 18px/24px Helvetica, Arial, sans-serif;
+        color: #333;
+      }
 
-  <style>
-    body {
-      padding: 0;
-      margin: 0;
-    }
+      article {
+        display: block;
+        text-align: left;
+        max-width: 640px;
+        margin: 0 auto;
+      }
 
-    .container {
-      max-width: 800px;
-      margin: 40px;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-	<div id="title"></div>
-    <div id="remark42"></div>
-  </div>
+      h1 {
+        font-size: 50px;
+        margin-left: -0.05em;
+      }
 
-  <script>
-    var query = (function () {
-      if (window.location.search.length === 0) return {};
-      return window.location.search.substr(1).split("&").map(function (item) {
-        return item.split("=");
-      }).reduce(function (carry, item) {
-        carry[item[0]] = decodeURIComponent(item[1]);
-        return carry;
-      }, {});
-    })()
+      ul {
+        color: rgb(23, 67, 78);
+      }
 
-    if (query.site_id && query.url) {
-	  var titleElement = document.getElementById("title");
-	  titleElement.innerHTML = '<h1>Comments for <a href="'+query.url+'">'+query.url+'</a></h1>'
+      a {
+        color: rgb(79, 187, 214);
+        text-decoration: none;
+      }
 
-      var remark_config = {
-        site_id: query.site_id,
-        url: query.url,
-      };
+      a:hover {
+        color: rgb(94, 167, 177);
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body>
+    <article>
+      <h1><a href="/">Remark42</a></h1>
+      <p id="title"></p>
+      <div id="remark42"></div>
+    </article>
 
-      (function () {
-        var d = document, s = d.createElement('script');
-        s.src = '/web/embed.js';
-        s.type = 'text/javascript';
-        (d.head || d.body).appendChild(s);
+    <script>
+      var query = (function() {
+        if (window.location.search.length === 0) return {};
+        return window.location.search
+          .substr(1)
+          .split('&')
+          .map(function(item) {
+            return item.split('=');
+          })
+          .reduce(function(carry, item) {
+            carry[item[0]] = decodeURIComponent(item[1]);
+            return carry;
+          }, {});
       })();
-    }
-  </script>
-  <noscript>
-    Please enable JavaScript to view the comments powered by Remark.
-  </noscript>
-</body>
+
+      if (query.site_id && query.url) {
+        var titleElement = document.getElementById('title');
+        titleElement.innerHTML = 'Comments for <a href="' + query.url + '">' + query.url + '</a>';
+
+        var remark_config = {
+          site_id: query.site_id,
+          url: query.url,
+        };
+
+        (function() {
+          var d = document,
+            s = d.createElement('script');
+          s.src = '/web/embed.js';
+          s.type = 'text/javascript';
+          (d.head || d.body).appendChild(s);
+        })();
+      }
+    </script>
+    <noscript> Please enable JavaScript to view the comments powered by Remark. </noscript>
+  </body>
 </html>
