La séparation simulation / comprendre est plus évidente

source/components/CDD.css

@@ -8,7 +8,6 @@
 
 #sim #introduction {
 	margin-left: 1.2em;
-	margin-top: 2em;
 	font-size: 110%;
 	padding-top: 0;
 	width: 60%;
@@ -121,26 +120,27 @@
 	font-size: 300%;
 }
 
-#results li:hover .explore {
+#results li:hover .understand {
 	display: inline;
 }
 
-#results li .explore {
+#results li .understand {
 	display: none;
 }
 
-#results .explore button {
+#results .understand button {
 	background: #4A89DC;
 	color: white;
 	font-weight: 600;
 	border: none;
+  padding: .3em .8em;
 }
-#results .explore i {
+#results .understand i {
 	display: inline-block;
 	font-size: 190%;
 	line-height: .2em;
 	opacity: .8
 }
-#results .explore:hover i {
+#results .understand:hover i {
 	opacity: 1
 }

source/components/IntroCDD.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import colours from './themeColours'
+import PageType from './PageType'
 
 export default () =>
 	<div>
+		<PageType type="simulation"/>
 		<h1>Simulateur CDD</h1>
 		<section id="introduction">
 			<p>

source/components/PageType.js

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default ({type}) => <span id="page-type">
+	<i className={"fa fa-" + (type == 'simulation' ? 'calculator' : 'cogs')} aria-hidden="true"></i>
+	<span>{type}</span>
+</span>

source/components/Results.js

@@ -25,9 +25,9 @@ export default class Results extends Component {
 										:computedValue + '€'
 								}
 								</p>
-								<Link to={"/regle/" + name} className="explore">
+								<Link to={"/regle/" + name} className="understand">
 									<button>
-										Explorer <i className="fa fa-cogs" aria-hidden="true"></i>
+										Comprendre <i className="fa fa-cogs" aria-hidden="true"></i>
 									</button>
 								</Link>
 							</li>

source/components/Rule.css

@@ -21,6 +21,7 @@
 }
 
 #rule h1 {
+	margin-bottom: 1%;
 	color: #4B4B66;
 	display: flex;
 	align-items: center;
@@ -45,7 +46,7 @@
 }
 
 #meta-paragraph {
-	background: #4B4B661A;
+	background: rgba(51, 51, 80, 0.03);
 	margin: 0 3em;
 	padding: 1em;
 }

source/components/Rule.js

@@ -3,7 +3,7 @@ import {findRuleByName} from '../engine/rules.js'
 import './Rule.css'
 import JSONTree from 'react-json-tree'
 import R from 'ramda'
-
+import PageType from './PageType'
 
 export default class Rule extends Component {
 	render() {
@@ -14,6 +14,7 @@ export default class Rule extends Component {
 
 		return (
 			<div id="rule">
+				<PageType type="comprendre"/>
 				<h1>
 					<span className="rule-type">{rule.type}</span>
 					<span className="rule-name">{name}</span>

source/containers/Layout.css

@@ -7,13 +7,14 @@ body {
 }
 
 #site-logo {
+	width: 60px;
 	position: fixed;
-	left: 3em;
-	top: 3em;
+  left: 1%;
+  top: 4.5%;
 }
 
 h1 {
-	padding: 1em 3.5em 0;
+	margin: 6% 3% 0;
 	font-size: 250%;
 	font-weight: 400;
 }
@@ -30,3 +31,24 @@ h1 {
 	text-align: center;
 	z-index: 1000000;
 }
+
+#page-type {
+	display: inline-block;
+	position: fixed;
+	right: 3%;
+	top: 9%;
+	opacity: .4;
+	color: #333350;
+  opacity: 0.8;
+}
+
+#page-type span {
+	text-transform: uppercase;
+	font-size: 100%;
+	font-weight: bold;
+}
+
+#page-type i {
+	display: block;
+	font-size: 700%;
+}

source/containers/Layout.js

@@ -13,7 +13,7 @@ export default class Layout extends Component {
 				{
 					this.props.location.pathname != '/' &&
 					<Link to="/">
-						<img id="site-logo" src={require('../images/logo.png')} style={{width: '100px'}} />
+						<img id="site-logo" src={require('../images/logo.png')} />
 					</Link>
 				}
 			</div>