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:
GitHub
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/react": "^11.2.2",
|
||||
"@testing-library/user-event": "^12.5.0",
|
||||
"bulma": "^0.9.4",
|
||||
"bulma": "^1.0.0",
|
||||
"powerglitch": "^2.3.2",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-intl": "^5.10.9",
|
||||
"react-scripts": "^5.0.1",
|
||||
"sass": "^1.30.0",
|
||||
"sass": "^1.71.1",
|
||||
"web-vitals": "^0.2.4"
|
||||
}
|
||||
},
|
||||
@ -5513,9 +5513,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/bulma": {
|
||||
"version": "0.9.4",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
|
||||
"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.0.tgz",
|
||||
"integrity": "sha512-7n49v/gdHXaHcU9fVobqGXO2OguiCoMh6CLbeX7jq00XrZ5vOSE4LNS0S/0Q6rlBbckY6kk6W7LwqxS0nu4bug==",
|
||||
"dependencies": {
|
||||
"sass": "^1.71.1"
|
||||
}
|
||||
},
|
||||
"node_modules/bytes": {
|
||||
"version": "3.0.0",
|
||||
@ -14716,9 +14719,9 @@
|
||||
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.58.3",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
|
||||
"integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
|
||||
"version": "1.75.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
|
||||
"integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
@ -14728,7 +14731,7 @@
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-loader": {
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
"@testing-library/jest-dom": "^5.11.6",
|
||||
"@testing-library/react": "^11.2.2",
|
||||
"@testing-library/user-event": "^12.5.0",
|
||||
"bulma": "^0.9.4",
|
||||
"bulma": "^1.0.0",
|
||||
"powerglitch": "^2.3.2",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-intl": "^5.10.9",
|
||||
"react-scripts": "^5.0.1",
|
||||
"sass": "^1.30.0",
|
||||
"sass": "^1.71.1",
|
||||
"web-vitals": "^0.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@ -1 +1 @@
|
||||
@import "main.scss";
|
||||
@use "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 {
|
||||
|
||||
@ -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>
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@import "../../_sass/main.scss";
|
||||
|
||||
#photoProfil {
|
||||
overflow: clip;
|
||||
border: 1px solid #3c3c3c;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user