🎨 Style des objectifs

source/components/GenericSimulation.css

@@ -12,7 +12,7 @@
 	flex-wrap: wrap;
 	justify-content: center;
 	align-items: center;
-	margin-top: 1em;
+	margin: 1em 0;
 }
 #GenericSimulation header > h1 {
 	margin: 0.6em 1em 0;
@@ -29,3 +29,7 @@
 		margin-left: 10%;
 	}
 }
+
+#GenericSimulation .step-question h1 {
+	margin-top: 1rem;
+}

source/components/Targets.css

@@ -1,13 +1,13 @@
 #targets {
 	width: 100%;
-	margin: 5% auto;
+	margin: 10% auto;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 #targets > .content {
 	border-radius: 6px;
-	border: 3px solid var(--colour);
+	background: var(--colour);
 	padding: 1em;
 	min-width: 16em;
 	display: flex;
@@ -17,16 +17,16 @@
 #targets > .icon {
 	margin: 0 0.6em;
 	font-size: 200%;
+	color: var(--colour);
 }
 #targets .value {
-	font-weight: 600;
+	font-size: 180%;
 }
 #targets .unit {
-	font-weight: normal;
-	color: #666;
 }
 
 #targets .explanation {
-	font-size: 140%;
+	font-size: 150%;
 	text-decoration: none;
+	line-height: 0;
 }

source/components/Targets.js

@@ -19,7 +19,9 @@ export default class Targets extends React.Component {
 		return (
 			<div id="targets">
 				<span className="icon">→</span>
-				<span className="content">
+				<span
+					className="content"
+					style={{ color: this.props.colours.textColour }}>
 					{/*<span className="title">{title}</span>
 					{' : '} */}
 					<span className="figure">