From 998e6a9a275dd287bdc52cacd5b1113cf575e9de Mon Sep 17 00:00:00 2001
From: Vyrtsev Mikhail <reeywhaar@gmail.com>
Date: Mon, 29 Jul 2019 02:53:03 +0300
Subject: [PATCH] update demo page to look better on mobile

---
 frontend/index.ejs | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)
diff --git a/frontend/index.ejs b/frontend/index.ejs
index ad30ee78..8fc69ac4 100644
--- a/frontend/index.ejs
+++ b/frontend/index.ejs
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>remark42 demo page</title>
 
   <style>
@@ -13,7 +13,7 @@
 
     .container {
       max-width: 800px;
-      margin: 40px;
+      padding: 40px;
     }
 
     .document_theme_dark {
@@ -25,14 +25,38 @@
       color: #5e5eff;
     }
 
+		.widgets {
+			display: flex;
+			flex-wrap: nowrap;
+		}
+
     .widget {
       margin-top: 1rem;
     }
 
     .widget__comments-frame {
       border: 1px dashed #aaa;
-      min-width: 35rem;
+      width: 35rem;
+			max-width: 100%;
     }
+
+		.widgets__counter-widget {
+			margin-left: 1em;
+		}
+
+		@media screen and (max-width: 800px) {
+			.container {
+				padding: 1em;
+			}
+
+			.widgets {
+				flex-direction: column
+			}
+
+			.widgets__counter-widget {
+				margin-left: 0;
+			}
+		}
   </style>
 
   <script>
@@ -56,11 +80,11 @@
     <h1>Demo page</h1>
     <p>To install widgets on your website, follow the <a href="https://github.com/umputun/remark#setup-on-your-website">instructions</a>.</p>
     <div class="widgets">
-      <div class="widget widgets__widget ">
+      <div class="widget widgets__widget widgets__comments-widget">
         <a class="widget__link" href="/web/last-comments.html">Last comments widget page</a><br/>
         <iframe class="widget__frame widget__comments-frame" src="/web/last-comments.html" frameborder="0"></iframe>
       </div>
-      <div class="widget widgets__widget">
+      <div class="widget widgets__widget widgets__counter-widget">
         <a class="widget__link" href="/web/counter.html">Counter widget page</a><br/>
         <div class="widget__frame widget__counter-frame">
           Comments count: <span class="remark42__counter"></span>
