use: bulma v1 (#69)

* trying: pass the bulma breaking changes

* fix: bulma 1.0

* fix: some ui bullshits happened after bulma v1

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}