rework accessibility on mobile/small screens

static/css/styles.css

@@ -108,6 +108,72 @@
 
 @media screen and (max-width: 1023px) 
 {
+  html.has-navbar-fixed-top,
+  body.has-navbar-fixed-top{
+    padding-top: 6.5rem;
+  }
+  .navbar, .navbar-brand
+  {
+    min-height: 6.5rem;
+    font-size: 2em;
+  }
+
+  .navbar-item img
+  {
+    max-height: 3.5rem;
+  }
+
+  .navbar-burger{
+    height: 6.5rem;
+    width: 12rem;
+  }
+
+  .navbar-burger span{
+    height: 3px;
+    left: calc(50% - 16px);
+    width: 32px;
+  }
+
+  .navbar-burger span:nth-child(1){
+    top: calc(50% - 12px);
+  }
+
+  .navbar-burger span:nth-child(2){
+    top: calc(50% - 1px);
+  }
+
+  .navbar-burger span:nth-child(3){
+    top: calc(50% + 10px);
+  }
+
+  .navbar-burger:hover{
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .navbar-dropdown{
+    font-size: 1.5rem;
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+    padding-left: 48px;
+  }
+  
+  .navbar-end .navbar-item{
+    width: 40%;
+    height: 3.5rem;
+    display: inline-block;
+    text-align: center;
+    padding:0;
+    margin:0;
+  }
+  .navbar-end .navbar-item img{
+    width:3.5rem;
+  }
+
+  .logo
+  {
+    margin-right: 20px;
+  }
+
   #main
   {
     margin-left: 5%;

templates/meta/master.html

@@ -93,7 +93,9 @@
           </div>
         </div>
         <div class="navbar-end">
-          <a href="mailto:contact{{ mail_key }}@katzei.fr" class="navbar-item mail" title="Nous contacter par mail">✉</a>
+          <a href="mailto:contact{{ mail_key }}@katzei.fr" class="navbar-item mail" title="Nous contacter par mail">
+            ✉
+          </a>
           <a href="https://mamot.fr/@katzei" class="navbar-item logo" title="Nous contacter sur mastodon">
             <img class="mastodon" src="/img/logo_mastodon.svg">
           </a>