responsive for landscape #830

assets/css/app.scss

@@ -172,7 +172,7 @@ section[role="main-content"]{
       @include teasersfilet(8em, 0.5em);
       }
     // responsive
-    @media only screen and (max-width: $small-bp) {
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
       header{
         h1{
           font-size: 5em;
@@ -530,7 +530,7 @@ section[role="main-content"]{
         time{
           font-weight: 600;
         }
-        @media only screen and (max-width: $small-bp) {
+        @media only screen and (max-width: $small-bp), (orientation: portrait) {
           background-color: #fff;
           padding: 1em;
           box-shadow: 0 0 10px $gris;
@@ -826,7 +826,7 @@ section[role="main-content"]{
       }
     }
     // responsive
-    @media only screen and (max-width: $small-bp) {
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
       position: relative;
       >nav{
         $top: 45px;
@@ -976,7 +976,7 @@ footer[role="tools"]{
     z-index: 9;
     background-color: $gris;
     padding:1.2em $side-padding;
-    @media only screen and (max-width: $small-bp) {
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
       padding:1.2em $side-padding/2;
     }
     max-height: $list-item-h * 3;
@@ -1026,7 +1026,7 @@ footer[role="tools"]{
     }
 
     // responsive
-    @media only screen and (max-width: $small-bp) {
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
       position: relative;
       >header{
         padding:0 0 1em 0;
@@ -1053,7 +1053,7 @@ footer[role="tools"]{
   #footer-bottom{
     z-index: 10;
     padding:0 $side-padding;
-    @media only screen and (max-width: $small-bp) {
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
       padding:0 $side-padding/2;
     }
     background-color: $bleuroi;
@@ -1168,7 +1168,7 @@ footer[role="tools"]{
       }
 
       // responsive
-      @media only screen and (max-width: $small-bp) {
+      @media only screen and (max-width: $small-bp), (orientation: portrait) {
         form{
           fieldset{
             &.search{

assets/css/base/_grid-flex.scss

@@ -6,7 +6,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: stretch;
-  @media only screen and (max-width: $small-bp) {
+  @media only screen and (max-width: $small-bp), (orientation: portrait) {
     flex-wrap:wrap;
   }
 }
@@ -20,7 +20,7 @@
 
 // small
 .small-row {
-  @media only screen and (max-width: $small-bp) {
+  @media only screen and (max-width: $small-bp), (orientation: portrait) {
     @include row;
   }
 }
@@ -68,7 +68,7 @@
 
   // small
   .small-col-#{$c} {
-    @media only screen and (max-width: $small-bp) {
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
       @include col($c);
     }
   }

assets/css/base/_layout.scss

@@ -31,7 +31,7 @@ body{
     flex: 0 0 auto;
     @extend %layout-element;
     padding:1em $side-padding 1em $side-padding;
-    @media only screen and (max-width: $small-bp) {
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
       padding:1em $side-padding/2 0 $side-padding/2;
     }
   }
@@ -52,7 +52,7 @@ body{
       >*{
         @include fade-transition;
       }
-      @media only screen and (max-width: $small-bp) {
+      @media only screen and (max-width: $small-bp), (orientation: portrait) {
         overflow-y: auto;
         padding:0 $side-padding/2 0 $side-padding/2;
       }
@@ -79,7 +79,13 @@ body{
         -webkit-overflow-scrolling: touch;
       }
     }
-    @media only screen and (max-width: $small-bp) {
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
+      .main-content-layout{
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    @media (orientation: portrait) {
       .main-content-layout{
         display: flex;
         flex-direction: column;