tunnel: intiation de la com officielle

major_edits: mail dans liens + graff overlay + simple click dans panneau 
'à propos'

v1-com-officielle/src/infoComponents/InfoMenu.vue

@@ -8,11 +8,39 @@
     <div id="infoMenuContainer" class="uiStyle">
       <div id="welcomeTextContainer">
         <p id="welcomeText">
-          Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+          À tou&#xF47D0;s les queers, tou&#xF47D0;s les nerds,
+          <br>
+          et  tou&#xF47D0;s les personnes entres les deux,
           <br>
           <br>
-          Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
-        </p>
+          Vous êtes convi&#xF1920;s à la 2ème édition
+          <br>
+          de <strong>Drags and Nerds !</strong>
+          <br>
+          Au programme, drags shows & performances nerds,
+          <br>
+          musique électronique, vjing, live-coding, synthés vidéos, etc.
+          <br>
+          <br>
+          Nous voulons également<br>centrer notre soirée
+          autour de l'inclusivité.<br>Pour ce faire,
+          le port du<br><strong>masque FFP2 sera<br>obligatoire à l'intérieur</strong>,
+          <br>
+          afin de protéger les plus vulnérables d'entres nous.
+          <br>
+          Les masques seront distribués gratuitement à l'entrée !
+          <br>
+          <br>
+          Également,<br>
+          afin de créer du lien entre nos commus,
+          plusieurs assos seront présentes, afin de partager et d'échanger nos valeurs et nos savoir-faires
+          <br>
+          <br>
+          Enfin,<br>
+          (pour les courageu&#xF57B0;s qui ont lu jusque là ^^),
+          notre collectif est très ouvert à s'agrandir et à se compléter, alors n'hésite pas à nous contacter,
+          si tu as envie de participer !
+          </p>
         <button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
       </div>
       <div id="btnColumn">
@@ -101,7 +129,7 @@
   #infoMenuContainer{
     width:100%;
     position:relative;
-    height:40%;
+    height:55%;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -133,7 +161,7 @@
 
   #welcomeTextContainer{
     width:77%;
-    height:100%;
+    height:90%;
     background-color: transparent;
     position: relative;
     padding: 16.1px;
@@ -144,14 +172,23 @@
   }
 
   #welcomeText{
-    overflow-y: scroll;
-    height: 73%;
+    pointer-events: all;
+    height: 100%;
     font-size: 16.1px;
     font-family: 'velvelyne';
     color: var(--main-color);
     font-weight: bold;
     padding-right: 16.1px;
     margin-top: -7.77px;
+    overflow-y: scroll;
+    line-height: 1.1em
+  }
+
+  #welcomeText strong{
+    font-family: 'lineal';
+    font-weight: normal;
+    font-size: 22.2px;
+    animation: blink 7.77s infinite;
   }
 
   #welcomeTextContainer .textBtnStyle{
@@ -176,7 +213,7 @@
   /*================ PC LARGE*/
   @media(min-width:1300px){
     #welcomeText{
-      height:71%;
+      height:80%;
     }
 
     #btnColumn .iconBtnStyle{
@@ -184,6 +221,9 @@
       margin-left: -13.12%;
       margin-top: 13.12%;
     }
+    #welcomeText strong{
+      font-size: 22.2px;
+    }
 
   }
 </style>
@@ -191,6 +231,7 @@
 <script>
   export default {
     name : 'InfoMenu',
+    emits: ['closeInfo'],
     data(){
       return{
         isActive: [],
@@ -198,12 +239,17 @@
       }
     },
     methods:{
-      openPannel(name){
+      delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+      },
+      async openPannel(name){
         console.log(name);
         if(!this.isActive.includes(name)){
           this.isActive.push(name);
         }
         this.isFocused = name;
+        this.delay(33);
+        this.$emit('closeInfo');
       },
       focusPannel(name){
         if(this.isActive.includes(name)){