add some basic responsiveness to default theme

portail_citoyen/static/portail_citoyen/css/style.css

@@ -39,6 +39,8 @@ a {
 body {
   overflow-x: hidden;
   background: white;
+  max-width: 1000px;
+  margin: 0 auto;
 }
 
 div#page {
@@ -49,18 +51,14 @@ div#header {
   background-color: #ffffff;
   width: 100%;
   margin: 0 0 0 0;
-  position: absolute;
+  position: relative;
   top: 0px;
-  margin-left: -500px;
   z-index: 0;
 
 }
 
 div#top {
-  height: 456px;
-  width: 1500px;
   margin: 0 auto 0 auto;
-  margin-left: 50%;
 }
 
 div#top h1 {
@@ -85,8 +83,8 @@ div#top a img {
 div#main-content-wrapper {
   position: relative;
   z-index: 100;
-  width: 1000px;
-  margin: 200px auto 0px auto;
+  max-width: 1000px;
+  margin: 0px auto 0px auto;
 }
 
 div#main-content {
@@ -98,7 +96,7 @@ div#footer {
   clear: both;
   background: white;
   padding: 0px;
-  width: 1000px;
+  width: 90%;
   margin: 10px auto 0 auto;
   position: relative;
 }
@@ -367,7 +365,7 @@ div.login-actions {
 
 
 .region-header {
-  width: 1000px;
+  width: 100%;
   position: absolute;
   top: 0px;
 }
@@ -992,3 +990,52 @@ p.fullname {
     display: inline;
     margin-right: 1.5em;
 }
+
+@media screen and (max-width: 760px) {
+  body.narrow-page div.right {
+     clear: none;
+     width: 100%;
+  }
+  #left, #right {
+     clear: none;
+     width: 100%;
+  }
+}
+
+@media screen and (max-width: 490px) {
+  #single-title {
+    cursor: pointer;
+  }
+  #nav {
+    width: 100%;
+  }
+  #nav ul {
+    column-count: 2;
+    -webkit-column-count: 2;
+  }
+  #nav ul li {
+    margin-top: 0;
+  }
+  #real-content {
+    padding: 0;
+  }
+  #toplinks {
+    top: 0;
+    left: 0;
+    width: 98%;
+  }
+
+}
+
+@media screen and (max-width: 400px) {
+  div#top h1 {
+    padding-left: 1ex;
+    margin-left: 0;
+  }
+  div#welcome {
+     display: none;
+  }
+  h2#welcome-title {
+    margin: 0;
+  }
+}

portail_citoyen/templates/base.html

@@ -76,5 +76,24 @@
       jQuery('#messages').delay(3000*(1+{{ messages|length }})).fadeOut('slow');
     </script>
     {% endif %}
+    <script>
+      jQuery(window).resize(function() {
+        if (jQuery(window).width() < 490) {
+           if (! jQuery('#nav').hasClass('small')) {
+             jQuery('#nav').addClass('small');
+             jQuery('#nav').hide();
+             jQuery('#single-title').click(function() {
+               jQuery('#nav').slideToggle();
+             });
+           }
+        } else {
+           if (jQuery('#nav').hasClass('small')) {
+             jQuery('#nav').removeClass('small');
+             jQuery('#nav').show();
+             jQuery('#single-title').unbind('click');
+           }
+        }
+      }).trigger('resize');
+    </script>
   </body>
 </html>