Make centered content design with adoption for mobile devices.
authorOleksandr Gavenko <gavenkoa@gmail.com>
Wed, 05 Aug 2015 23:55:34 +0300
changeset 1729 22ffd80639c0
parent 1728 3ddb79eb60f9
child 1730 fc588b9ae857
Make centered content design with adoption for mobile devices. Highlight TOC.
rst.css
--- a/rst.css	Wed Aug 05 23:53:16 2015 +0300
+++ b/rst.css	Wed Aug 05 23:55:34 2015 +0300
@@ -1,5 +1,29 @@
 body, frameset { background-color: ivory; }
-body { padding: 0 10% 0 10%; }
+body {
+    max-width: 800px;
+    margin: 0 auto;
+}
+@media (max-width: 820px) {
+    body { margin: 0 10px 0 10px; }
+}
+
+p.topic-title.first { display: none; }
+p.topic-title.first + ul {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 5px 0;
+    background: cornsilk;
+    border: 1px solid red;
+    border-radius: 10px;
+}
+p.topic-title.first + ul > li {
+    list-style: none;
+}
+p.topic-title.first + ul > li > a { display: none; }
+p.topic-title.first + ul li li {
+    padding-right: 10px;
+}
+
 a { text-decoration:none; }
 a:link { color: brown; }
 a:visited { color: IndianRed; }