From 05b76dff32d130606d25ffcfbcdc9ed2a9ea5494 Mon Sep 17 00:00:00 2001
From: Renan Declercq <renan.declercq.etu@univ-lille.fr>
Date: Sun, 29 Jan 2023 21:36:38 +0100
Subject: [PATCH] fix : position competences transversales
---
src/components/container/Skills/Skills.jsx | 3 +-
src/components/container/Skills/Skills.scss | 39 +++++++--------------
2 files changed, 13 insertions(+), 29 deletions(-)
diff --git a/src/components/container/Skills/Skills.jsx b/src/components/container/Skills/Skills.jsx
index b2ef47e..7f595e2 100644
--- a/src/components/container/Skills/Skills.jsx
+++ b/src/components/container/Skills/Skills.jsx
@@ -3,7 +3,6 @@ import "./Skills.scss";
import { icons } from '../../../Data';
import { langages } from '../../../Data';
import { transversales } from '../../../Data';
-import { finishes } from '../../../Data';
import { motion } from 'framer-motion';
const Skills = () => {
const [active, setActive] = useState(1)
@@ -54,7 +53,7 @@ const Skills = () => {
<div className="transversale" key={transversale.id}>
<div className="position">
<div className='transversales_icon icon'>{transversale.icon}</div>
- <h3>{transversale.transversale}</h3>
+ <div>{transversale.transversale}</div>
</div>
</div>
)
diff --git a/src/components/container/Skills/Skills.scss b/src/components/container/Skills/Skills.scss
index e2777e9..f7b6d7a 100644
--- a/src/components/container/Skills/Skills.scss
+++ b/src/components/container/Skills/Skills.scss
@@ -63,56 +63,41 @@
margin-right: auto;
justify-content: center;
color: #fff;
+ text-align: center;
+ text-transform: uppercase;
+
@media screen and(max-width: 800px) {
grid-template-columns: repeat(2,1fr);
- gap: 1rem;
+ gap: 0.2rem;
}
@media screen and(max-width: 450px) {
- grid-template-columns: repeat(1,1fr);
- gap: 1rem;
+ grid-template-columns: repeat(2,1fr);
+ gap: 0.2rem;
}
.transversale {
display: flex;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
- margin: auto;
margin-bottom: 3rem;
.position {
- width: 300px;
- padding-left: 2.5rem;
- h3 {
+ width: 150px;
+ div {
font-size: 1.1rem;
- text-align: center;
+ align-self: center;
text-transform: uppercase;
@media screen and(max-width: 405px){
- font-size: 0.85rem;
+ font-size: 0.65rem;
}
}
svg {
width: 100px;
height: 100px;
color: #fff;
- margin-left: 50%;
- transform: translateX(-50%);
+ text-align: center;
}
}
}
-}
-
-.finishes_container {
- display: flex;
- justify-content: center;
- margin-top: 5rem;
- text-align: center;
- flex-wrap: wrap;
- gap: 2rem;
- color: #fff;
-
- .number {
- color: #14a2ba;
- font-size: 1.7rem;
- }
}
\ No newline at end of file
--
GitLab