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.

- +
) + +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: |