use: bulma v1 (#69)

* trying: pass the bulma breaking changes

* fix: bulma 1.0

* fix: some ui bullshits happened after bulma v1

src/_sass/index.scss

@@ -1 +1 @@
-@import "main.scss";
+@use "main.scss";

src/_sass/main.scss

@@ -7,41 +7,29 @@ $deep-koamaru: #152528;
 $myrtle-green: #1d353a;
 $cadet-blue: #25444b;
 $neon-carrot: #142225;
-$white: #ffffff;
 $admink-brand: #f38d68;
 
-/**
-    Variables Bulma
-**/
-$primary: $cadet-blue;
-$primary-invert: #fff;
-$info: $myrtle-green;
-$info-invert: #fff;
-$footer-color: $deep-koamaru;
-$success: $deep-koamaru;
-$link: $neon-carrot;
-$link-hover: "";
+@use "bulma/sass" with (
+  $primary: $cadet-blue,
+  $info: $myrtle-green,
+  $footer-color: $deep-koamaru,
+  $success: $deep-koamaru,
+  $link: $neon-carrot
+);
 
 html {
-  background-color: $primary;
+  background-color: $myrtle-green;
 }
 
 body {
   overflow-x: hidden;
 }
 
-@import "../../node_modules/bulma/bulma";
-
 #idCard {
   .hero-body {
     padding-bottom: 2rem;
     padding-top: 2rem;
   }
-
-  // permet de re-aligner les tags avec les subtitles
-  .tags {
-    margin-top: -1.25rem;
-  }
 }
 
 // retire les barres de scroll des panneaux experience/education
@@ -50,7 +38,7 @@ body {
 }
 
 footer {
-  background-color: $footer-color !important;
+  background-color: $deep-koamaru !important;
   color: #fff;
 }
 
@@ -89,12 +77,12 @@ section#contact .button {
 
 //
 footer small {
-  color: $white;
+  color: #fff;
 }
 
 // Photo de Profil
 #photoProfil {
-  background-color: $primary;
+  background-color: $myrtle-green;
 }
 
 .tile.is-vertical {

src/components/ExperienceCard/ExperienceCard.js

@@ -32,14 +32,14 @@ export default class ExperienceCard extends Component {
                             return <span key={index} className="tag">{name}</span>;
                         })}
                     </div>
+                    <div className='description content'>
+                        <div dangerouslySetInnerHTML={{ __html: data.description }} />
+                    </div>
+                    {data.commentaire ? <div className="comment">
+                        {data.commentaire}
+                    </div> : ''}
                 </div>
             </div>
-            <div className='content'>
-                <div dangerouslySetInnerHTML={{ __html: data.description }} /> 
-            </div>
-            {data.commentaire ? <div className="comment">
-                {data.commentaire}
-            </div> : ''}
 
         </div>
     }

src/components/ExperienceCard/ExperienceCard.scss

@@ -1,4 +1,15 @@
-.comment{
-    font-style: italic;
-    margin-top: -25px;
-}
+.comment {
+  font-style: italic;
+  margin-top: -25px;
+}
+
+// permet de re-aligner les tags avec les subtitles
+.tags,
+.description,
+.comment {
+  margin-top: -1.25rem;
+}
+
+.card-content {
+  margin-top: 1rem;
+}

src/components/MainCard/MainCard.js

@@ -52,7 +52,7 @@ class MainCard extends Component {
             <div className="hero-body">
                 <div className="container">
                     <div className="columns">
-                        <div className="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
+                        <div className="column is-1 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
                         <div id="photosAndButtons" className="column is-3-widescreen is-4-tablet is-success">
                             <div className="card">
                                 <div className="card-image">

src/components/MainCard/MainCard.scss

@@ -1,5 +1,3 @@
-@import "../../_sass/main.scss";
-
 #photoProfil {
   overflow: clip;
   border: 1px solid #3c3c3c;

src/components/ProjectCard/ProjectCard.js

@@ -9,8 +9,8 @@ export default class ProjectCard extends Component {
         const data = this.props.data;
         return <div className="tile is-vertical is-4">
             <div className="tile">
-                <div className="tile is-parent">
-                    <article className="tile is-child notification is-info">
+                <div className="cell">
+                    <article className="box notification is-info">
                         <p className="title">
                             <a href={data.url} rel="noopener noreferrer" target="_blank">{data.title}</a>
                         </p>

src/components/ProjectsCard/ProjectsCard.js

@@ -12,7 +12,7 @@ class ProjectsCard extends Component {
     return <section id="projets" className="hero is-success">
       <div className="hero-body">
         <div className="container">
-          <div className="tile is-ancestor">
+          <div className="grid">
             {projectCardsMessage.projects.map(function (projects, index) {
               return <ProjectCard key={index}
                 data={projects}