Adaptations to small screens

diff --git a/panikweb_templates/static/css/style.less b/panikweb_templates/static/css/style.less
index 0b7bfdd7578f18b91d4270b9d1a5603ed4a7504d..67a492320eb9961e3a2a5f1b29770bca299cb36b 100644 (file)
--- a/panikweb_templates/static/css/style.less
+++ b/panikweb_templates/static/css/style.less
@@ -45,6 +45,15 @@ body {
     /*padding: 0px 10px;*/
     clear: both;
 }
+@media screen and (max-width: 300px) {
+       body {font-size: 9px;}
+}
+@media screen and (min-width:300px) and (max-width: 400px) {
+       body {font-size: 10px;}
+}
+@media screen and (min-width:400px) and (max-width: 800px) {
+       body {font-size: 11px;}
+}
 article{font-size: @m;}
 /* Mixins & USEFUL CLASSES */
 .squash(@x, @y: 1) {
@@ -344,12 +353,12 @@ nav.menu li{
     }
 .emission-detail .logo{max-width:50%;}
 @media screen and (max-width: 300px) {
-       .emission-metas {
+       .emission-detail .metas {
                float: none;
                width: auto;
                margin: 0;
        }
-       .emission .logo{max-width:100%;}
+       .emission-detail .logo{max-width:100%;}
 }
 .emission-detail .schedule{
        font-family: RE03;
@@ -526,6 +535,10 @@ ul.tagsArchives li {
  .episode-detail .controls{
        float: right;
 }
+
+@media screen and (max-width: 300px) {
+       .episode-detail .logo{display:none;}
+}
 .episode-detail .date {
        font-family: Reglo;
        text-transform: uppercase;
@@ -555,7 +568,6 @@ ul.tagsArchives li {
 }
 
 .episode-detail .content {
-       padding-right: 100px;
        padding-left: 60px;
 }