#2092 phone burger menu, text tei fix

assets/css/app.scss

@@ -55,6 +55,7 @@ header[role="banner"]{
     font-size: 1em;
   }
   nav#header-menu{
+    span.burger-btn{ display:none; }
     grid-column: 2;
     text-align: right;
     >ul>li{
@@ -101,9 +102,48 @@ header[role="banner"]{
       flex-direction: column;
     }
     nav#header-menu{
-      text-align: left;
+      position: absolute;
+      top:0;
+      right:0;
+      span.burger-btn{ 
+        display:block; 
+        color: $bleuroi;
+        margin:1em 1em 0;
+        cursor: pointer;
+      }
+      >ul{
+        padding:1em 0 1em 1em;
+        background-color: #fff;
+        // height:150px;
+        box-shadow: -3px 3px 5px $grisclair;
+
+        transform: translateX(120%);
+        transition: transform 0.3s ease-in-out;
+
+        >li{
+          display: block;
+          margin-bottom: 0.5em;
+          >ul{
+            position: relative;
+            top:unset;
+            padding: 0;
+            >li{
+              box-sizing: border-box;
+              a{
+                padding-top: 0.2em;
+              }
+              
+            }
+          }
+        }
+      }
+      &.opened{
+        >ul{
+          transform: translateX(0);
+        }
+      }
     }
-   }
+  }
 }
 section[role="main-content"]{
   #home{
@@ -884,6 +924,20 @@ section[role="main-content"]{
               }
               margin-bottom: $base-line;
             }
+            @media only screen and (max-width: $iphone-bp), (orientation: portrait) {
+              padding-top: $base-line * 0.5;
+              h1{
+                font-size: 2em;
+                .initial{
+                  display: inline-block;
+                  text-transform: uppercase;
+                  font-size: 1.3em;
+                  line-height: $base-line*2;
+                  margin: $base-line/2 0;
+                }
+                margin-bottom: $base-line;
+              } 
+            }
           }
           span.metamark.tailpiece,
           span.metamark.simpleLine{

src/components/nav/HeaderMenu.vue

@@ -1,6 +1,11 @@
 <template>
-  <nav id="header-menu">
+  <nav id="header-menu" ref="header_menu">
     <!-- <span v-if="!corpusLoaded" class="loading">Chargement ...</span> -->
+    <span
+      class="mdi mdi-menu burger-btn"
+      @click.prevent="onClickBTN"
+      @keyup.enter="onClickBTN"
+    />
     <ul>
       <li>
         <span v-if="!corpusLoaded" class="loading">Chargement ...</span>
@@ -22,11 +27,11 @@
       </li>
       <li><router-link to="/bibliography">Bibliographie</router-link></li>
       <li><router-link to="/schema">Schema</router-link></li>
-      <li>
+      <!-- <li>
         <a href="#" class="mdi mdi-login-variant" title="connexion">
           <span class="visualy-hidden">connexion</span>
         </a>
-      </li>
+      </li> -->
     </ul>
   </nav>
 </template>
@@ -49,12 +54,16 @@ export default {
     $route (n, o) {
       // console.log('route changed')
       this.indexOpened = false
+      this.$refs.header_menu.classList.remove('opened')
     }
   },
   methods: {
     onClickIndex (e) {
       console.log('onClickIndex')
       this.indexOpened = !this.indexOpened
+    },
+    onClickBTN () {
+      this.$refs.header_menu.classList.toggle('opened')
     }
   }
 }