use: bulma v1 (#69)
* trying: pass the bulma breaking changes * fix: bulma 1.0 * fix: some ui bullshits happened after bulma v1
This commit is contained in:
parent
c6a239608f
commit
54cadc072f
21
package-lock.json
generated
21
package-lock.json
generated
@ -11,13 +11,13 @@
|
|||||||
"@testing-library/jest-dom": "^5.11.6",
|
"@testing-library/jest-dom": "^5.11.6",
|
||||||
"@testing-library/react": "^11.2.2",
|
"@testing-library/react": "^11.2.2",
|
||||||
"@testing-library/user-event": "^12.5.0",
|
"@testing-library/user-event": "^12.5.0",
|
||||||
"bulma": "^0.9.4",
|
"bulma": "^1.0.0",
|
||||||
"powerglitch": "^2.3.2",
|
"powerglitch": "^2.3.2",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
"react-intl": "^5.10.9",
|
"react-intl": "^5.10.9",
|
||||||
"react-scripts": "^5.0.1",
|
"react-scripts": "^5.0.1",
|
||||||
"sass": "^1.30.0",
|
"sass": "^1.71.1",
|
||||||
"web-vitals": "^0.2.4"
|
"web-vitals": "^0.2.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -5513,9 +5513,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/bulma": {
|
"node_modules/bulma": {
|
||||||
"version": "0.9.4",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
|
"resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.0.tgz",
|
||||||
"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
|
"integrity": "sha512-7n49v/gdHXaHcU9fVobqGXO2OguiCoMh6CLbeX7jq00XrZ5vOSE4LNS0S/0Q6rlBbckY6kk6W7LwqxS0nu4bug==",
|
||||||
|
"dependencies": {
|
||||||
|
"sass": "^1.71.1"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"node_modules/bytes": {
|
"node_modules/bytes": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
@ -14716,9 +14719,9 @@
|
|||||||
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
|
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
|
||||||
},
|
},
|
||||||
"node_modules/sass": {
|
"node_modules/sass": {
|
||||||
"version": "1.58.3",
|
"version": "1.75.0",
|
||||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
|
"resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
|
||||||
"integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
|
"integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chokidar": ">=3.0.0 <4.0.0",
|
"chokidar": ">=3.0.0 <4.0.0",
|
||||||
"immutable": "^4.0.0",
|
"immutable": "^4.0.0",
|
||||||
@ -14728,7 +14731,7 @@
|
|||||||
"sass": "sass.js"
|
"sass": "sass.js"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12.0.0"
|
"node": ">=14.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/sass-loader": {
|
"node_modules/sass-loader": {
|
||||||
|
@ -6,13 +6,13 @@
|
|||||||
"@testing-library/jest-dom": "^5.11.6",
|
"@testing-library/jest-dom": "^5.11.6",
|
||||||
"@testing-library/react": "^11.2.2",
|
"@testing-library/react": "^11.2.2",
|
||||||
"@testing-library/user-event": "^12.5.0",
|
"@testing-library/user-event": "^12.5.0",
|
||||||
"bulma": "^0.9.4",
|
"bulma": "^1.0.0",
|
||||||
"powerglitch": "^2.3.2",
|
"powerglitch": "^2.3.2",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
"react-intl": "^5.10.9",
|
"react-intl": "^5.10.9",
|
||||||
"react-scripts": "^5.0.1",
|
"react-scripts": "^5.0.1",
|
||||||
"sass": "^1.30.0",
|
"sass": "^1.71.1",
|
||||||
"web-vitals": "^0.2.4"
|
"web-vitals": "^0.2.4"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
@ -1 +1 @@
|
|||||||
@import "main.scss";
|
@use "main.scss";
|
||||||
|
@ -7,41 +7,29 @@ $deep-koamaru: #152528;
|
|||||||
$myrtle-green: #1d353a;
|
$myrtle-green: #1d353a;
|
||||||
$cadet-blue: #25444b;
|
$cadet-blue: #25444b;
|
||||||
$neon-carrot: #142225;
|
$neon-carrot: #142225;
|
||||||
$white: #ffffff;
|
|
||||||
$admink-brand: #f38d68;
|
$admink-brand: #f38d68;
|
||||||
|
|
||||||
/**
|
@use "bulma/sass" with (
|
||||||
Variables Bulma
|
$primary: $cadet-blue,
|
||||||
**/
|
$info: $myrtle-green,
|
||||||
$primary: $cadet-blue;
|
$footer-color: $deep-koamaru,
|
||||||
$primary-invert: #fff;
|
$success: $deep-koamaru,
|
||||||
$info: $myrtle-green;
|
$link: $neon-carrot
|
||||||
$info-invert: #fff;
|
);
|
||||||
$footer-color: $deep-koamaru;
|
|
||||||
$success: $deep-koamaru;
|
|
||||||
$link: $neon-carrot;
|
|
||||||
$link-hover: "";
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: $primary;
|
background-color: $myrtle-green;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "../../node_modules/bulma/bulma";
|
|
||||||
|
|
||||||
#idCard {
|
#idCard {
|
||||||
.hero-body {
|
.hero-body {
|
||||||
padding-bottom: 2rem;
|
padding-bottom: 2rem;
|
||||||
padding-top: 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
|
// retire les barres de scroll des panneaux experience/education
|
||||||
@ -50,7 +38,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: $footer-color !important;
|
background-color: $deep-koamaru !important;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -89,12 +77,12 @@ section#contact .button {
|
|||||||
|
|
||||||
//
|
//
|
||||||
footer small {
|
footer small {
|
||||||
color: $white;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Photo de Profil
|
// Photo de Profil
|
||||||
#photoProfil {
|
#photoProfil {
|
||||||
background-color: $primary;
|
background-color: $myrtle-green;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile.is-vertical {
|
.tile.is-vertical {
|
||||||
|
@ -32,14 +32,14 @@ export default class ExperienceCard extends Component {
|
|||||||
return <span key={index} className="tag">{name}</span>;
|
return <span key={index} className="tag">{name}</span>;
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
<div className='description content'>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: data.description }} />
|
||||||
|
</div>
|
||||||
|
{data.commentaire ? <div className="comment">
|
||||||
|
{data.commentaire}
|
||||||
|
</div> : ''}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='content'>
|
|
||||||
<div dangerouslySetInnerHTML={{ __html: data.description }} />
|
|
||||||
</div>
|
|
||||||
{data.commentaire ? <div className="comment">
|
|
||||||
{data.commentaire}
|
|
||||||
</div> : ''}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,15 @@
|
|||||||
.comment{
|
.comment {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin-top: -25px;
|
margin-top: -25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// permet de re-aligner les tags avec les subtitles
|
||||||
|
.tags,
|
||||||
|
.description,
|
||||||
|
.comment {
|
||||||
|
margin-top: -1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
@ -52,7 +52,7 @@ class MainCard extends Component {
|
|||||||
<div className="hero-body">
|
<div className="hero-body">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="columns">
|
<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 id="photosAndButtons" className="column is-3-widescreen is-4-tablet is-success">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-image">
|
<div className="card-image">
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
@import "../../_sass/main.scss";
|
|
||||||
|
|
||||||
#photoProfil {
|
#photoProfil {
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
border: 1px solid #3c3c3c;
|
border: 1px solid #3c3c3c;
|
||||||
|
@ -9,8 +9,8 @@ export default class ProjectCard extends Component {
|
|||||||
const data = this.props.data;
|
const data = this.props.data;
|
||||||
return <div className="tile is-vertical is-4">
|
return <div className="tile is-vertical is-4">
|
||||||
<div className="tile">
|
<div className="tile">
|
||||||
<div className="tile is-parent">
|
<div className="cell">
|
||||||
<article className="tile is-child notification is-info">
|
<article className="box notification is-info">
|
||||||
<p className="title">
|
<p className="title">
|
||||||
<a href={data.url} rel="noopener noreferrer" target="_blank">{data.title}</a>
|
<a href={data.url} rel="noopener noreferrer" target="_blank">{data.title}</a>
|
||||||
</p>
|
</p>
|
||||||
|
@ -12,7 +12,7 @@ class ProjectsCard extends Component {
|
|||||||
return <section id="projets" className="hero is-success">
|
return <section id="projets" className="hero is-success">
|
||||||
<div className="hero-body">
|
<div className="hero-body">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="tile is-ancestor">
|
<div className="grid">
|
||||||
{projectCardsMessage.projects.map(function (projects, index) {
|
{projectCardsMessage.projects.map(function (projects, index) {
|
||||||
return <ProjectCard key={index}
|
return <ProjectCard key={index}
|
||||||
data={projects}
|
data={projects}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user