#2092 responsive

assets/css/app.scss

@@ -98,12 +98,14 @@ header[role="banner"]{
 section[role="main-content"]{
   #home{
     header{
+      margin:15vh 0 0;
       text-align: center;
+      padding: 1em 0;
       h1{
         color: $bleuroi;
         font-size: 8em;
         font-weight: 300;
-        margin:15vh 0 0;
+        margin: 0;
       }
       h2{
         color: $or;
@@ -420,12 +422,6 @@ section[role="main-content"]{
     }
   }
 
-  #corpus{
-  }
-
-  .index{
-  }
-
   .index-item{
     header{
       h1{
@@ -631,6 +627,7 @@ section[role="main-content"]{
   #edition{
     >header{
       position: relative;
+      span.header-title{ display:none; }
       h1{
         @include title1blue;
       }
@@ -674,7 +671,59 @@ section[role="main-content"]{
           }
         }
       }
+      
     }
+    // responsive
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
+      >header{
+        $top: 45px;
+        z-index: 110;
+        position: absolute;
+        top:$top;
+        left:0;
+        background-color: #fff;
+        width:percentage(5/$default_sum);
+        box-sizing: border-box;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        height:calc(100% - #{$top});
+
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+
+        span.header-title{
+          display: block;
+          position: absolute;
+          top:4.5em; right:-1em;
+          transform: rotateZ(-90deg);
+          transform-origin: center;
+          @include fontsans;
+          font-size: 0.600em;
+          cursor: pointer;
+          color: $bleuroi;
+          svg{
+            vertical-align: bottom;
+            transform-origin: center;
+            transform: scale(0.8) rotate(0);
+            transition: transform 0.3s ease-in-out;
+            path{
+              fill: $bleuroi;
+            }
+          }
+        }
+
+        &.opened{
+          box-shadow: 3px 3px 5px $grisclair;
+          transform: translateX(0);
+          span.header-title{
+            svg{
+              transform: scale(0.7) rotate(180deg);
+            }
+          }
+        }
+      }
+    }
+
 
     $pagenum_w:1em;
     >section{
@@ -724,6 +773,7 @@ section[role="main-content"]{
               cursor: pointer;
             }
           }
+          // todo what about touch is hover will work ?
           &:hover .popup{
             display: block;
             opacity: 1;
@@ -1337,6 +1387,7 @@ section[role="main-content"]{
         margin-bottom: $base-line * 0.4;
       }
       nav.toc{
+        span.sommaire-title{ display:none; }
         li{
           a{
             font-size: 1em;
@@ -1344,6 +1395,60 @@ section[role="main-content"]{
             font-weight: 300;
           }
         }
+        // responsive
+        @media only screen and (max-width: $small-bp), (orientation: portrait) {
+          $top: 80px;
+          z-index: 110;
+          position: absolute;
+          top:$top;
+          left:0;
+          background-color: #fff;
+          width:percentage(7/$default_sum);
+          box-sizing: border-box;
+          padding-top: 1em;
+          padding-bottom: 1em;
+          height:calc(100% - #{$top});
+          overflow-y: auto;
+
+          transform: translateX(-100%);
+          transition: transform 0.3s ease-in-out;
+
+          >div.wrapper{
+            padding-right: 2em;
+            height: 100%;
+            overflow-y: auto;
+          }
+          span.sommaire-title{
+            display: block;
+            position: absolute;
+            top:4.5em; right:-2em;
+            transform: rotateZ(-90deg);
+            transform-origin: center;
+            @include fontsans;
+            font-size: 0.600em;
+            cursor: pointer;
+            color: $bleuroi;
+            svg{
+              vertical-align: bottom;
+              transform-origin: center;
+              transform: scale(0.8) rotate(0);
+              transition: transform 0.3s ease-in-out;
+              path{
+                fill: $bleuroi;
+              }
+            }
+          }
+
+          &.opened{
+            box-shadow: 3px 3px 5px $grisclair;
+            transform: translateX(0);
+            span.sommaire-title{
+              svg{
+                transform: scale(0.7) rotate(180deg);
+              }
+            }
+          }
+        }
       }
     }
     >section{
@@ -1483,6 +1588,9 @@ footer[role="tools"]{
 
       div.results-details{
         line-height: $base-line * 0.5;
+        >*{
+          display: block;
+        }
         .search-keys{
           font-size: 0.756em;
           font-weight: 500;
@@ -1537,6 +1645,14 @@ footer[role="tools"]{
           display: inline-block;
           margin-right: 1em;
         }
+        div.results-details{
+          >*{
+            display: inline-block;
+            &:not(:last-child){
+              padding-right: 1em;
+            }
+          }
+        }
         #sorting{
           width:10em;
         }
@@ -1558,6 +1674,7 @@ footer[role="tools"]{
     padding:0 $side-padding;
     @media only screen and (max-width: $small-bp), (orientation: portrait) {
       padding:0 $side-padding/2;
+      flex-wrap: nowrap;
     }
     background-color: $bleuroi;
     &>*{
@@ -1580,6 +1697,9 @@ footer[role="tools"]{
             width: calc(100% + $side-padding);
             margin-left:-$side-padding;
             padding:0.3em 0.5em 0.3em $side-padding;
+            @media only screen and (max-width: $small-bp), (orientation: portrait) {
+              padding: 0.3em 0em 0.3em 2em;
+            }
           }
           &.history .wrapper{
             background-color: $or;

assets/css/base/_layout.scss

@@ -93,6 +93,7 @@ body{
       .main-content-layout{
         display: flex;
         flex-direction: column;
+        flex-wrap: nowrap;
       }
     }
   }