favicon

help/index.html

@@ -9,6 +9,7 @@
 
 	<meta name="description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.">
 	<link rel="stylesheet" href="/style.css" type="text/css" media="screen">
+	<link rel="shortcut icon" href="/favicon.png">
 	<meta property="og:url" content="https://dbhq.github.io/">
 	<meta property="og:title" content="PolitiScales, DBHQ Edition">
 	<meta property="og:locale" content="en_US">
@@ -28,7 +29,10 @@
 		<div id="mainFrame">
 
 			<h2>Who are we?</h2>
-			<p class="simpleText">PolitiScale is a political test using 8 ideological values to help you know approximately where you belong to in the political field, or simply to share your profile with your friends. this internet website is an initiative of “Radicalisé·e·s sur Internet” which is freely inspired by <a href="https://8values.github.io/">8values</a>.</p>
+
+			<p class="simpleText">
+				PolitiScale is a political test using 8 ideological values to help you know approximately where you belong to in the political field, or simply to share your profile with your friends. this internet website is an initiative of “Radicalisé·e·s sur Internet” which is freely inspired by <a href="https://8values.github.io/">8values</a>.
+			</p>
 
 			<h3>Constructivism vs. Essentialism</h3>
 			<div class="description">

index.html

@@ -9,6 +9,7 @@
 
 	<meta name="description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.">
 	<link rel="stylesheet" href="/style.css" type="text/css" media="screen">
+	<link rel="shortcut icon" href="/favicon.png">
 	<meta property="og:url" content="https://dbhq.github.io/">
 	<meta property="og:title" content="PolitiScales, DBHQ Edition">
 	<meta property="og:locale" content="en_US">
@@ -28,18 +29,18 @@
 		<div id="mainFrame">
 
 			<h2>Instructions</h2>
-			<p class="simpleText ltr">Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.</p>
+			<p class="simpleText">Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.</p>
 			<br/>
 
-			<p class="simpleText ltr">
+			<p class="simpleText">
 				<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
 				The questions assume that your are a citizen of a multi-party political system and a market economy.
 			</p>
-			<p class="simpleText ltr">
+			<p class="simpleText">
 				<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
 				You can always avoid answering a question. But if you do not understand the meaning of one of them, try to invert its meaning for a better understanding of what is implied.
 			</p>
-			<p class="simpleText ltr">
+			<p class="simpleText">
 				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
 				This test tries to represent the wider set of ideas as possible and contains some phrases that can be shocking, notably concerning racism and homosexuality.
 			</p>

quiz/index.html

@@ -9,6 +9,7 @@
 
 	<meta name="description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.">
 	<link rel="stylesheet" href="/style.css" type="text/css" media="screen">
+	<link rel="shortcut icon" href="/favicon.png">
 	<meta property="og:url" content="https://dbhq.github.io/">
 	<meta property="og:title" content="PolitiScales, DBHQ Edition">
 	<meta property="og:locale" content="en_US">

results/index.html

@@ -9,6 +9,7 @@
 
 	<meta name="description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.">
 	<link rel="stylesheet" href="/style.css" type="text/css" media="screen">
+	<link rel="shortcut icon" href="/favicon.png">
 	<meta property="og:url" content="https://dbhq.github.io/">
 	<meta property="og:title" content="PolitiScales, DBHQ Edition">
 	<meta property="og:locale" content="en_US">
@@ -29,7 +30,9 @@
 
 			<h2>Results</h2>
 
-			<p class="simpleText">The result of your PolitiScale is decomposed in 8 axes. Each axis indicates your positioning compared with two opposed ideologies. Some particular characteristics, displayed at the end of the page can also complete your result. For further information on the different axis <a href="/help">Look at the help page</a>.</p>
+			<p class="simpleText">
+				The result of your PolitiScale is decomposed in 8 axes. Each axis indicates your positioning compared with two opposed ideologies. Some particular characteristics, displayed at the end of the page can also complete your result. For further information on the different axis <a href="/help">Look at the help page</a>.
+			</p>
 
 			<div class="generatedResultsDecorations">
 				<canvas id="generatedResults" width="800" height="1200"></canvas>
@@ -343,7 +346,7 @@
 					<div class="descImg"><img src="/images/complotism.png" alt=""></div>
 					<div class="descTextMono">
 						<p>
-							<h4>Conspiratorial</h4>
+							<h4>Conspiracist</h4>
 							The biggest problems of our society are the work of a small group of people. It is then essential to find them, inform the people of their objective and neutralize them.
 						</p>
 					</div>

style.css

@@ -55,16 +55,20 @@ a {
   text-decoration: underline;
 }
 
-h2 {
+h2,
+h3,
+h4 {
   max-width: 640px;
   margin: 0 auto;
+  font-weight: 600;
 }
 
 h3 {
-  max-width: 640px;
-  margin: 0 auto;
   font-size: calc(16px + 1vmin);
-  font-weight: 500;
+}
+
+h4 {
+  margin: 0 auto 0.5em;
 }
 
 .simpleText {
@@ -124,9 +128,6 @@ h3 {
 .descTextMono {
   align-self: center;
 }
-.descTextMono h4 {
-  margin: 0 0 0.5em;
-}
 .descTextMono p {
   margin: 0;
 }
@@ -243,7 +244,7 @@ h3 {
   color: #500076;
 }
 .button svg {
-  fill: #fff;
+  fill: white;
   vertical-align: text-bottom;
 }
 .button:hover svg {