diff --git a/src/Home.js b/src/Home.js
index 051c54a..6df764c 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,58 +1,25 @@
import velos from './velos.yaml'
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
export default ({}) => (
+ margin: 1rem 0 0.4rem;
+ font-size: 250%;
+ @media (max-width: 800px) {
+ font-size: 180%;
+ }
+ `}
+ >
Un vélo aussi libre qu'un logiciel libre.
En commençant par l'assemblage.
-
- {velos.map(({nom, statut, prix, image, grisé}) => (
+
+ {velos.map(({ nom, statut, prix, image, grisé }) => (
-
))}
-
+
)
+
+const BikeList = styled.ul`
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ justify-content: space-evenly;
+ margin-bottom: 2rem;
+ a {
+ text-decoration: none;
+ color: inherit;
+ }
+ li {
+ margin: 1rem;
+ width: 12rem;
+ height: 24rem;
+ background: white;
+ padding: 1.6rem 1rem;
+ border: 4px solid black;
+ border-radius: 0.3rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+ li img {
+ width: 90%;
+ }
+ button {
+ padding: 0.2rem 0.5rem;
+ border: none;
+ background: black;
+ color: white;
+ font-size: 130%;
+ cursor: pointer;
+ }
+`
diff --git a/src/Specifications.js b/src/Specifications.js
index 6aa4a4e..6c9875a 100644
--- a/src/Specifications.js
+++ b/src/Specifications.js
@@ -1,5 +1,7 @@
import { Link } from 'react-router-dom'
import Composant from './Composant'
+import { Card } from './ui'
+import { Markdown } from './utils'
export default ({ vélo, chosen, notChosen, prixTotal }) => (
@@ -8,7 +10,7 @@ export default ({ vélo, chosen, notChosen, prixTotal }) => (
Prix indicatif: {prixTotal} €
-
+
@@ -17,6 +19,7 @@ export default ({ vélo, chosen, notChosen, prixTotal }) => (
quoi ?
+
Les composants
{chosen.map((item) => (
@@ -35,3 +38,24 @@ export default ({ vélo, chosen, notChosen, prixTotal }) => (
)}
)
+
+const Actu = ({ actu }) => (
+ figure {
+ margin: 0 2rem 0 1rem;
+ font-size: 200%;
+ }
+ `}
+ >
+ 📢
+
+
+
+
+)
diff --git a/src/ui.js b/src/ui.js
index 405b4d2..0e1ed4f 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -1,15 +1,17 @@
-
import styled from 'styled-components'
export const Card = styled.div`
-
-box-shadow: 0 1px 3px rgba(41, 117, 209, 0.12), 0 1px 2px rgba(41, 117, 209, 0.24);
-border: 4px solid var(--lighterColor);
- border-radius: 0.3rem;
+ box-shadow: 0 1px 3px rgba(41, 117, 209, 0.12),
+ 0 1px 2px rgba(41, 117, 209, 0.24);
+ border: 4px solid var(--lighterColor);
+ border-radius: 0.3rem;
padding: 1rem;
:hover {
-box-shadow: 0px 2px 4px -1px rgba(41, 117, 209, 0.2), 0px 4px 5px 0px rgba(41, 117, 209, 0.14), 0px 1px 10px 0px rgba(41, 117, 209, 0.12);
+ box-shadow: 0px 2px 4px -1px rgba(41, 117, 209, 0.2),
+ 0px 4px 5px 0px rgba(41, 117, 209, 0.14),
+ 0px 1px 10px 0px rgba(41, 117, 209, 0.12);
}
+ ${(props) => (props.color ? `border-color: ${props.color}` : '')}
`
diff --git a/src/velos.yaml b/src/velos.yaml
index 7922596..8a66503 100644
--- a/src/velos.yaml
+++ b/src/velos.yaml
@@ -1,6 +1,6 @@
- nom: Gravel
- statut: 🏗️ décembre 2020
- prix: ~1500 €
+ statut: ✅️
+ prix: 1400 €
image: gravel.svg
- nom: Minimaliste
grisé: oui
diff --git "a/v\303\251los/1/specs.yaml" "b/v\303\251los/1/specs.yaml"
index 3dbb3b2..846c55c 100644
--- "a/v\303\251los/1/specs.yaml"
+++ "b/v\303\251los/1/specs.yaml"
@@ -1,5 +1,9 @@
nom: Gravel
version: 0.1
+actu: |
+ Comme vous pouvez le constater, les 3 modèles de cadre sélectionnés sont en rupture de stock, contrairement aux autres pièces !
+
+ Heureusement, c'est le sujet de velolib.re pour 2021 : étudier la construction du cadre pour ne plus dépendre des fabricants et donc des problèmes d'approvisionnement de cette pièce centrale.
description: |
Le vélo libre 1 est un gravel : polyvalent, à l'aise sur 🌳 chemins ou en forêt grâce à ses gros pneus, confortable en 🏙️ ville, et respectable pour prendre de la vitesse sur 🚵 route.
note: |