Fix #94: Simple responsive design (#102)topic/moonmoon-upstream

* Fix #94: Simple responsive design
* Remove non needed css proprety

2 files changed, 84 insertions, 53 deletions

diff --git a/custom/style/default.css b/custom/style/default.css
index de813ac..12268ef 100644
--- a/custom/style/default.css
+++ b/custom/style/default.css
@@ -1,128 +1,158 @@
-html{
+@viewport {
+    width: device-width;
+    initial-scale: 1.0;
+}
+
+html {
     font-family: "Lucida Grande", "Segoe UI", sans-serif;
     color: #111;
     background: #EEE;
     font-size: 62.5%;
 }
 
-body{
+body {
     margin: 0;
     padding: 0;
     font-size: 1.3em;
     line-height: 1.5em;
 }
 
-a{
+a {
     color: #669;
 }
 
-a:visited{
+a:visited {
     color: #444;
 }
 
-a:hover{
+a:hover {
     color: #000;
 }
 
-a img{
+a img {
     border: none;
 }
 
-pre, code{
+pre, code {
     max-height: 100%;
     width: 100%;
     font-size: 1.2em;
     overflow: auto;
 }
 
-h1, h2{
+h1, h2 {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-h2{
+h2 {
     margin: 0;
 }
 
 #page {
-    width: 890px;
-    margin: 0 auto;
+    margin: 0 5em;
 }
 
 /* Header
 *******************************************************************************/
+
 #top {
     color: #FFF;
     padding: 10px 30px;
 }
-    h1 a,
-    h1 a:visited {
-        color: #665;
-        text-decoration: none;
-    }
-    h1 a:hover {
-        color: #444;
-    }
+
+h1 a, h1 a:visited {
+    color: #665;
+    text-decoration: none;
+}
+
+h1 a:hover {
+    color: #444;
+}
 
 /* Content
 *******************************************************************************/
+
 #content {
-    width: 590px;
+    width: 75%;
     float: left;
 }
 
+#content img {
+    max-width: 100%;
+    height: auto;
+}
+
 /* Sidebar
 *******************************************************************************/
+
 #sidebar {
-    width: 300px;
+    width: 18%;
     float: left;
 }
-    #sidebar div {
-        padding: 1em 30px;
-    }
-    #sidebar h2 {
-        color: #665;
-    }
-    #sidebar ul {
-        list-style: none;
-        padding: 0;
-        margin: 1em 0;
-    }
-    
+
+#sidebar div {
+    padding: 1em 30px;
+}
+
+#sidebar h2 {
+    color: #665;
+}
+
+#sidebar ul {
+    list-style: none;
+    padding: 0;
+    margin: 1em 0;
+}
+
 /* Article
 *******************************************************************************/
-.article{
+
+.article {
     margin-bottom: 2em;
     padding: 30px;
     background: #FFF;
     border: 1px solid #DDD;
+    overflow: hidden;
 }
 
-    .article-title,
-    .article-title a{
-        color: #111;
-        text-decoration: none;
-    }
+.article-title, .article-title a {
+    color: #111;
+    text-decoration: none;
+}
 
-    .article-info{
-        margin: 0 0 1em 0;
-        color: #999;
-    }
-    
-    .article-content {
-        font-family: Georgia, serif;
-    }
+.article-info {
+    margin: 0 0 1em 0;
+    color: #999;
+}
 
-    .article img{
-        max-width: 440px;
-    }
+.article-content {
+    font-family: Georgia, serif;
+}
 
-    .article .collapsed{
-        display: none;
-    }
+.article img {
+    max-width: 440px;
+}
+
+.article .collapsed {
+    display: none;
+}
 
 /* Footer
 *******************************************************************************/
+
 #footer {
     clear: both;
     padding: 0 30px;
+}
+
+@media screen and (max-width: 1023px) {
+    #page {
+        margin: 0px;
+        display: flex;
+        flex-direction: column;
+    }
+    #content, #sidebar {
+        float: none;
+        width: 100%;
+    }
 }
\ No newline at end of file
diff --git a/custom/views/default/index.tpl.php b/custom/views/default/index.tpl.php
index 45303d5..c33ffa5 100755..100644
--- a/custom/views/default/index.tpl.php
+++ b/custom/views/default/index.tpl.php
@@ -10,6 +10,7 @@ header('Content-type: text/html; charset=UTF-8');
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta http-equiv="Content-Script-Type" content="text/javascript" />
     <meta http-equiv="Content-Style-Type" content="text/css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title><?php echo $PlanetConfig->getName(); ?></title>
     <?php include(__DIR__.'/head.tpl.php'); ?>