First prototype of responsive design(width up to 480px)

plonetheme/pfbweb/static/css/pfbweb.css

@@ -3241,3 +3241,130 @@ body.largeText #content-core h2,
 body.largeText #content-core p {
        font-size: 12pt;
 }
+
+.slice-text p {
+    font-size: 8pt !important;
+    margin-bottom: 0 !important;
+}
+
+@media screen and (max-width: 480px) {
+    body  {
+        background: transparent;
+    }
+
+    #global {
+        background: transparent;
+        margin: 0;
+        width: auto;
+        left: 0;
+    }
+
+    #header {
+        margin: 2px 5px;
+        width: 100%;
+        position: relative;
+        float: none;
+        height: auto;
+    }
+
+    #logo {
+        border: 0px;
+        float: left;
+    }
+
+    #menu {
+        float: left;
+        height: auto;
+        margin: 5px 2px;
+        border: 0;
+        clear: both;
+    }
+
+    #menu li {
+        line-height: 1em;
+        padding: 1px 15px 1px 0px;
+    }
+
+    #menu li a {
+        text-transform: lowercase !important;
+    }
+
+    #content {
+        margin: 2px 5px;
+        width: 100%;
+        float: left;
+    }
+
+    #lcol {
+        position: relative;
+        margin: 1px 5px;
+        width: 170px;
+        word-wrap: break-word;
+        float: left;
+    }
+
+    #arrow, #accolade, #rcol, #lcol {
+        display: none;
+    }
+
+    .sectiontitle {
+        position: absolute;
+        left: 120px;
+        top: 0;
+        font-size: 30pt;
+        line-height: 40pt;
+    }
+
+    .nav {
+        display: none;
+    }
+
+    #agenda-legend {
+        margin-left: 240px;
+    }
+
+    #footer #portal-siteactions {
+        margin-top: 30px;
+    }
+
+    .ploneCalendar td, .ploneCalendar th {
+        font-size: 8pt;
+        height: 30px !important;
+        width: 30px !important;
+        padding: 0;
+    }
+
+    #agenda-legend {
+        display: none !important;
+    }
+
+    #content #events-ul-list li div.event-data {
+        padding-top: 0;
+    }
+
+    #content #events-ul-list li div.event-data p.details {
+        width: 80px;
+    }
+
+    #content #events-ul-list li p.date {
+        width: 100%;
+        border: 0 !important;
+    }
+
+    #content #events-ul-list h3 {
+        margin-left: 80px;
+    }
+
+    #viewlet-below-content {
+        display: none;
+    }
+
+    #tabellio-agenda {
+        position: relative;
+    }
+
+    .formControls {
+        width: 100%;
+    }
+
+}