From 0f680b19d40dd8e8ea4bbc0ef65761e04f55055d Mon Sep 17 00:00:00 2001 From: mama Date: Thu, 4 May 2017 15:13:04 +0200 Subject: [PATCH] =?UTF-8?q?:art:=20meilleur=20alignement=20et=20responsivi?= =?UTF-8?q?t=C3=A9=20de=20l'acceuil?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + source/components/HomeEmbauche.css | 89 +++++----- source/components/HomeEmbauche.js | 24 +-- source/components/markdown.css | 272 +++++++++++++++++++++++++++++ 4 files changed, 333 insertions(+), 53 deletions(-) create mode 100644 source/components/markdown.css diff --git a/index.html b/index.html index 9c62a762a..f6fe7594e 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + Simulateur d'embauche diff --git a/source/components/HomeEmbauche.css b/source/components/HomeEmbauche.css index 5b740fc14..0227c59ee 100644 --- a/source/components/HomeEmbauche.css +++ b/source/components/HomeEmbauche.css @@ -80,24 +80,29 @@ nav li:first-child { #showcase { color: white; - width: 70%; - display:block; + width: 80%; + display: flex; + justify-content: space-around; + align-items: center; margin: auto; } +#showcaseMain { + display: inline-block; +} + #image-wrap { display: inline-block; - width: 65%; + width: 55%; padding: 0 1em; - background: white; border-radius: .4em; - opacity: 0.75; + opacity: 0.6; box-shadow: 0px 0px 20px rgba(0,0,0,0.15); transition: opacity .5s; - filter: grayscale(0.7) + filter: grayscale(0) } #image-wrap:hover { @@ -107,34 +112,23 @@ nav li:first-child { #showcase h1 { color: #333; display: inline-block; - width: 25%; - font-size: 250%; + width: 8em; + font-size: 210%; font-weight: 400; - line-height: 1.6em; + line-height: 1.5em; vertical-align: top; - text-align: left; - float: right; -} - -@media (max-width: 1366px) { - #showcase h1 { - line-height: 1.2 - } + text-align: center; } @media (max-width: 1280px) { #showcase h1 { - font-size: 215%; + font-size: 180%; margin: .5em 0; } } #main-actions { - display: flex; - align-items: center; - justify-content: space-around; margin: 5em 0; - width: 70%; line-height: 3em; max-width: 50em; } @@ -142,33 +136,36 @@ nav li:first-child { #main-actions a { background: #4A89DC; color: white; - display: inline-block; + display: block; font-size: 100%; padding: .1em 1.5em; - margin-top: .6em; border: 1px solid white; text-decoration: none; font-weight: 600; transition: .3s; + text-align: center; + filter: brightness(95%); } -#main-actions > span { +#main-actions > div { position: relative; + margin: 3em 0; } -#main-actions > span > span { +#main-actions > div > span { + font-size: 90%; border: 1px solid #4A89DC; color: #4A89DC; line-height: normal; position: absolute; - top: -1.2em; + left: -7em; padding: 0 .6em; border-radius: .1em; - left: 50%; - transform: translateX(-50%) + top: 50%; + transform: translateY(-50%) } #main-actions a:hover { - filter: grayscale(.3); + filter: brightness(100%); } @media (max-width: 1024px) { @@ -179,16 +176,22 @@ nav li:first-child { padding-top: 8em; } #showcase { - width: 80%; + width: 90%; + } + #showcaseMain { + width: 30%; + } + #main-actions { + font-size: 80%; } #showcase h1 { - font-size: 210%; + font-size: 160%; float: none; width: 100%; text-align: center; } #image-wrap { - width: 95%; + width: 50%; } } @@ -224,13 +227,14 @@ nav li:first-child { #showcase { width: 90%; } - + #showcaseMain { + width: 100%; + } #showcase h1 { - font-size: 180%; + font-size: 150%; } #image-wrap { - width: 100%; - padding: 0; + display: none; } } @@ -260,11 +264,12 @@ nav li:first-child { #image-wrap #play-button { position: absolute; - color: black; - font-size: 3em; - left: 3%; - bottom: 0%; - opacity: 0.1; + color: #000; + font-size: 600%; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + opacity: 1; /* border: 1px solid black; border-radius: 50%; diff --git a/source/components/HomeEmbauche.js b/source/components/HomeEmbauche.js index 388924253..37e54d76d 100644 --- a/source/components/HomeEmbauche.js +++ b/source/components/HomeEmbauche.js @@ -22,21 +22,23 @@ export default class HomeEmbauche extends Component {
-

Estimer le prix
d'une embauche en France

+
+

Estimer le {' '} prix
d'une {' '} embauche en {' '} France

+ +
Vue animée du simulateur ▶ Image du simulateur
-
@@ -78,7 +80,7 @@ export default class HomeEmbauche extends Component {

Intégrez le calcul des prélèvements sociaux très simplement dans votre application

- Lire la documentation → + Lire la documentation →
diff --git a/source/components/markdown.css b/source/components/markdown.css new file mode 100644 index 000000000..77d029b06 --- /dev/null +++ b/source/components/markdown.css @@ -0,0 +1,272 @@ +/* + Thanks https://github.com/GitbookIO/markdown-css +*/ + +body { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 16px; + margin: 0 + + background: -webkit-linear-gradient(top,#F8F8F8 10%,#E0E0EA 80%); + background: -moz-linear-gradient(top,#F8F8F8 10%,#E0E0EA 80%); + background: -o-linear-gradient(top,#F8F8F8 10%,#E0E0EA 80%); + background: -ms-linear-gradient(top,#F8F8F8 10%,#E0E0EA 80%); + background: linear-gradient(to bottom,#F8F8F8 10%,#E0E0EA 80%); +} + +.md { + min-width: 200px; + max-width: 790px; + margin: 0 auto; + padding: 30px; + } + +.md { + display: block; + word-wrap: break-word; + overflow: hidden; + color: rgba(0,0,0,0.8); + line-height: 1.7; + text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + /* Printing */ + /* Typography */ + /* Spacing */ + /* Links */ + /* Images */ + /* Horizontal lines */ + /* Headings */ + /* Code blocks */ + /* Tables */ + /* Lists */ + /* Blockquote */ + /* Description Lists */ +} +.md * { + box-sizing: border-box; + -webkit-box-sizing: border-box; + font-size: inherit; +} +.md > *:first-child { + margin-top: 0 !important; +} +.md > *:last-child { + margin-bottom: 0 !important; +} +.md pre, +.md code, +.md blockquote, +.md tr, +.md img, +.md table, +.md figure { + page-break-inside: avoid; +} +.md p, +.md h2, +.md h3, +.md h4, +.md h5 { + orphans: 3; + widows: 3; +} +.md h1, +.md h2, +.md h3, +.md h4, +.md h5 { + page-break-after: avoid; +} +.md strong, +.md b { + font-weight: bold; +} +.md em { + font-style: italic; +} +.md p, +.md blockquote, +.md ul, +.md ol, +.md dl, +.md table { + margin-top: 0; + margin-bottom: 0.85em; +} +.md a { + color: #4183c4; + text-decoration: none; + background: transparent; +} +.md a:hover, +.md a:focus, +.md a:active { + outline: 0; + text-decoration: underline; +} +.md img { + border: 0; + max-width: 100%; +} +.md hr { + height: 4px; + padding: 0; + margin: 1.7em 0; + overflow: hidden; + background-color: #e7e7e7; + border: none; +} +.md hr:before, +.md hr:after { + display: table; + content: " "; +} +.md hr:after { + clear: both; +} +.md h1, +.md h2, +.md h3, +.md h4, +.md h5, +.md h6 { + margin-top: 1.275em; + margin-bottom: 0.85em; + font-weight: 400; + color: #3C4963; +} +.md h1 { + font-size: 2em; +} +.md h2 { + font-size: 1.75em; +} +.md h3 { + font-size: 1.5em; +} +.md h4 { + font-size: 1.25em; +} +.md h5 { + font-size: 1em; +} +.md h6 { + font-size: 1em; + color: #777; +} +.md code, +.md pre { + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + direction: ltr; + margin: 0px; + padding: 0px; + border: none; + color: inherit; +} +.md pre { + overflow: auto; + word-wrap: normal; + margin: 0px; + padding: 0.85em 1em; + margin-bottom: 1.275em; + background: #f7f7f7; +} +.md pre > code { + display: inline; + max-width: initial; + padding: 0; + margin: 0; + overflow: initial; + line-height: inherit; + font-size: 0.85em; + white-space: pre; + background: transparent; +} +.md pre > code:before, +.md pre > code:after { + content: normal; +} +.md code { + padding: 0.2em; + margin: 0; + font-size: 0.85em; + background-color: #f7f7f7; + border: 1px solid RGBA(60, 73, 99, 0.6); +} +.md code:before, +.md code:after { + letter-spacing: -0.2em; + content: "\00a0"; +} +.md table { + display: table; + width: 100%; + border-collapse: collapse; + border-spacing: 0; + overflow: auto; +} +.md table td, +.md table th { + padding: 6px 13px; + border: 1px solid #ddd; +} +.md table tr { + background-color: #fff; + border-top: 1px solid #ccc; +} +.md table tr:nth-child(2n) { + background-color: #f8f8f8; +} +.md table th { + font-weight: bold; +} +.md ul, +.md ol { + padding: 0; + margin: 0; + margin-bottom: 0.85em; + padding-left: 2em; +} +.md ul ol, +.md ol ol, +.md ul ul, +.md ol ul { + margin-top: 0; + margin-bottom: 0; +} +.md ol ol { + list-style-type: lower-roman; +} +.md blockquote { + margin: 0; + margin-bottom: 0.85em; + padding: 0 15px; + color: #858585; + border-left: 4px solid RGBA(60, 73, 99, 0.6); +} +.md blockquote:first-child { + margin-top: 0; +} +.md blockquote:last-child { + margin-bottom: 0; +} +.md dl { + padding: 0; +} +.md dl dt { + padding: 0; + margin-top: 0.85em; + font-style: italic; + font-weight: bold; +} +.md dl dd { + padding: 0 0.85em; + margin-bottom: 0.85em; +} +.md dd { + margin-left: 0; +} +ma