display hamburger icon on small screens. Enlarge columns on medium screens.

index.html

@@ -18,12 +18,19 @@
   <header>
     <nav>
       <div class="nav-wrapper cyan darken-2">
-        <a id="title-center" href="#" class="brand-logo center hide-on-med-and-down" style="display: block;"><img width="60" height="60" style="vertical-align:middle;" src="./img/v-cercle.svg"/>
+        <a id="title-center" href="#" class="brand-logo center hide-on-med-and-down" style="display: block;">
+          <img width="60" height="60" style="vertical-align:middle;" src="./img/v-cercle.svg"/>
           <span style="vertical-align:middle; display:inline;">ViĞnette</span>
         </a>
         <div class="brand-logo left">
-          <a href="#" data-target="nav-mobile" class="sidenav-trigger">
-            <img width="60" height="60" style="vertical-align:middle;" src="./img/v-cercle.svg" alt="Menu"/>ViĞnette
+          <a href="#" data-target="nav-mobile" class="sidenav-trigger valign-wrapper">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+              <line x1="4" y1="6" x2="20" y2="6" />
+              <line x1="4" y1="12" x2="20" y2="12" />
+              <line x1="4" y1="18" x2="20" y2="18" />
+            </svg>
+            <p>&nbsp;ViĞnette</p>
           </a>
         </div>
         <ul class="right hide-on-med-and-down">
@@ -53,7 +60,7 @@
   </header>
   <div class="container">
     <div class="row">
-      <div class="col xl6 l6 m6 s12">
+      <div class="col xl6 l6 m10 s12">
         <h3>Créez une affichette pour vos ĞMarchés !</h3>
         <p>Sur les marchés, retrouver la clef publique d'une personne pour lui faire un virement
         prend souvent du temps et peut aboutir à des erreurs. Pour éviter ces tracas, une ViĞnette
@@ -66,7 +73,7 @@
           <li style="list-style-type: initial;">Une image de votre choix.</li>
         </ul>
       </div>
-      <div class="col xl6 l6 m6 s12">
+      <div class="col xl6 l6 m10 s12">
         <h5>Générez votre ViĞnette !</h5>
         <form id="formulaire" onsubmit="createVignette(event)" name="formulaire">
           <fieldset class="z-depth-2">

licence.html

@@ -16,8 +16,14 @@
           <span style="vertical-align:middle; display:inline;">ViĞnette</span>
         </a>
         <div class="brand-logo left">
-          <a href="#" data-target="nav-mobile" class="sidenav-trigger">
-            <img width="60" height="60" style="vertical-align:middle;" src="./img/v-cercle.svg" alt="Menu"/>ViĞnette
+          <a href="#" data-target="nav-mobile" class="sidenav-trigger valign-wrapper">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+              <line x1="4" y1="6" x2="20" y2="6" />
+              <line x1="4" y1="12" x2="20" y2="12" />
+              <line x1="4" y1="18" x2="20" y2="18" />
+            </svg>
+            <p>&nbsp;ViĞnette</p>
           </a>
         </div>
         <ul class="right hide-on-med-and-down">

questions.html

@@ -16,8 +16,14 @@
           <span style="vertical-align:middle; display:inline;">ViĞnette</span>
         </a>
         <div class="brand-logo left">
-          <a href="#" data-target="nav-mobile" class="sidenav-trigger">
-            <img width="60" height="60" style="vertical-align:middle;" src="./img/v-cercle.svg" alt="Menu"/>ViĞnette
+          <a href="#" data-target="nav-mobile" class="sidenav-trigger valign-wrapper">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+              <line x1="4" y1="6" x2="20" y2="6" />
+              <line x1="4" y1="12" x2="20" y2="12" />
+              <line x1="4" y1="18" x2="20" y2="18" />
+            </svg>
+            <p>&nbsp;ViĞnette</p>
           </a>
         </div>
         <ul class="right hide-on-med-and-down">