mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update demo page to look better on mobile

Browse Source
This commit is contained in:
Vyrtsev Mikhail
2019-07-29 13:47:35 -05:00
committed by Umputun
parent 1aaad59afb
commit 998e6a9a27
1 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.ejs
+29 -5
View File
@@ -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>