diff --git a/source/containers/Home.css b/source/containers/Home.css index 359a503c9..02845487e 100644 --- a/source/containers/Home.css +++ b/source/containers/Home.css @@ -31,34 +31,70 @@ } #description p { - font-size: 140%; - width: 50%; + font-size: 130%; + width: 40em; margin: 0 auto; -} - -#description #about { - font-size: 100%; - text-align: right; - font-size: -} - - -#search { - width: 400px; - margin: 4em auto; -} - -#search input { font-weight: 300; +} + +#description .insist { + color: #333350; + font-weight: 400 +} + +#aboutLink { + font-style: italic; + color: inherit; + opacity: .45; + font-size: 80%; + float: right; +} + +#roads { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + margin-top: 4%; +} +#roads > section { + width: 45%; + padding: 1%; + min-width: 20em; +} +#roads > section:last-child { + border-left: 1px solid #eee; +} +#roads h1 { + margin: 0 auto; + display: block; + font-size: 200%; + font-weight: 600; + color: #333350; text-align: center; - font-size: 120%; - width: 100%; - border: none; - border-bottom: 1px solid #333350 + margin-bottom: 6%; + display: flex; + align-items: center; + justify-content: center; +} + +#roads h1 i { + margin-right: 1em; + font-size: 160%; +} + +#exploration input { + border: 1px solid #333350; + border-radius: 3.8px; + padding: .8em 2em; + font-size: 110%; + box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1); + margin: 4em auto; + display: block; + width: 40%; } #search-results ul { - width: 30%; + width: 65%; margin: 0 auto; margin-bottom: 5em; list-style: none; @@ -74,5 +110,42 @@ font-weight: 500; text-decoration: none; border-bottom: 1px solid #333350; - padding: 0 1em 0 .2em; + padding: 0 .3em 0 .2em; +} + +#simulation ul { + list-style: none; + width: 65%; + margin: 4em auto; +} +#simulation li { + font-size: 120%; + margin-bottom: 8%; + display: flex; + justify-content: space-between; + align-items: center; +} + +#simulation .simulateur { + font-size: 110%; + border-bottom: 1px solid #aaa +} + +#simulation button { + background: #4A89DC; + color: white; + padding: .6em 1.2em; + font-size: 100%; + margin: 0 1em; + width: 12em; + border: none; + box-shadow: 0px 9px 14px 0px rgba(0, 0, 0, 0.1) +} +#simulation button.disabled { + border: 1px solid #4A89DC; + background: white; + color: #4A89DC; + opacity: .6; + cursor: default; + box-shadow: none; } diff --git a/source/containers/Home.js b/source/containers/Home.js index 319390660..a28877402 100644 --- a/source/containers/Home.js +++ b/source/containers/Home.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React, {Component} from 'react' import './Home.css' import {searchRules} from '../engine/rules.js' import {Link} from 'react-router' @@ -6,51 +6,69 @@ import '../components/Rule.css' export default class Home extends Component { state = { - userSearch: '' - } + userSearch: '', + }; render() { - return ( -
- Les règles des taxes et cotisations sur le travail lisibles par un humain et interprétables par un programme. -
-
- En savoir plus
- Démo CDD
-
+ Les règles des taxes et cotisations sur le travail{' '} + lisibles + {' '}par un humain et{' '} + interprétables + {' '}par un programme.{' '} + En savoir plus +
+