Add the Policy page for the details of a policy score

front/src/css/dashboard.css

@@ -1,53 +1,9 @@
-.resultsMenu {
-  margin-top: 2em;
-}
-.resultsMenu .menuItem {
-  display: inline-block;
-  margin: 1em;
-  width: 8em;
-  height: 7em;
-  color: #fff;
-  border: 3px solid #fff;
-  border-radius: 0.5em;
-  cursor: pointer;
-  text-decoration: none;
-}
-.resultsMenu .back {
-  color: #5e2846;
-  border-color: #5e2846;
-}
-.resultsMenu .menuItem div {
-  padding-top: 0.5em;
-  font-size: 3em;
-}
-.resultsMenu .active,
-.resultsMenu .menuItem.active:hover {
-  color: #ffa319;
-  border-color: #ffa319;
-}
-.resultsMenu .menuItem:hover {
-  color: #ffa319;
-}
-.resultsMenu span {
-  position: relative;
-  top: 0.5em;
-}
 .testedUrl {
   color: inherit;
 }
 h4 {
   margin-bottom: 0.5em;
 }
-.summary,
-.metrics,
-.execution {
-  margin-top: 2em;
-  padding: 1em;
-  background: #fff;
-  color: #000;
-  border-radius: 0.5em;
-  text-align: left;
-}
 .notations {
   display: table;
   width: 80%;
@@ -100,34 +56,6 @@ h4 {
   margin: 0 auto;
   border-radius: 0.5em;
 }
-.notations .A {
-  /* green */
-  background: #0C4;
-}
-.notations .B {
-  /* green */
-  background: #CD0;
-}
-.notations .C {
-  /* yellow */
-  background: #FD2;
-}
-.notations .D {
-  /* orange */
-  background: #FA2;
-}
-.notations .E {
-  /* red */
-  background: #F60;
-}
-.notations .F {
-  /* red */
-  background: #F22;
-}
-.notations .NA {
-  /* Non applicable */
-  background: #CCC;
-}
 .notations .criteria .table {
   width: 100%;
 }

front/src/css/main.css

@@ -32,9 +32,89 @@ h1 span {
   width: 1em;
   color: #ffa319;
 }
+.resultsMenu {
+  margin-top: 2em;
+}
+.resultsMenu .menuItem {
+  display: inline-block;
+  margin: 1em;
+  width: 8em;
+  height: 7em;
+  color: #fff;
+  border: 3px solid #fff;
+  border-radius: 0.5em;
+  cursor: pointer;
+  text-decoration: none;
+}
+.resultsMenu .back {
+  color: #413;
+  border-color: #413;
+}
+.resultsMenu .menuItem div {
+  padding-top: 0.5em;
+  font-size: 3em;
+}
+.resultsMenu .active,
+.resultsMenu .menuItem.active:hover {
+  color: #ffa319;
+  border-color: #ffa319;
+}
+.resultsMenu .menuItem:hover {
+  color: #ffa319;
+}
+.resultsMenu span {
+  position: relative;
+  top: 0.5em;
+}
+/* Grade colors */
+.A {
+  /* green */
+  background: #0C4;
+}
+.B {
+  /* green */
+  background: #CD0;
+}
+.C {
+  /* yellow */
+  background: #FD2;
+}
+.D {
+  /* orange */
+  background: #FA2;
+}
+.E {
+  /* red */
+  background: #F60;
+}
+.F {
+  /* red */
+  background: #F22;
+}
+.NA {
+  /* Non applicable */
+  background: #CCC;
+}
+.board {
+  margin-top: 2em;
+  padding: 1em;
+  background: #fff;
+  color: #000;
+  border-radius: 0.5em;
+  text-align: left;
+}
+.backToDashboard {
+  text-align: center;
+}
+.backToDashboard a {
+  font-size: 0.9em;
+  display: block;
+  margin-top: 4em;
+  color: black;
+}
 .footer {
   padding: 3em;
-  color: #000;
+  color: #413;
 }
 .footer a {
   color: inherit;

front/src/css/rule.css

@@ -0,0 +1,58 @@
+.rule.board {
+  text-align: center;
+}
+.rule h2 span {
+  font-size: 1.5em;
+}
+.rule .scoreDisplay {
+  display: table;
+  border-spacing: 1em;
+  margin: 0 auto;
+}
+.rule .scoreDisplay > div {
+  display: table-cell;
+  vertical-align: middle;
+  font-weight: bold;
+  font-size: 1.5em;
+}
+.rule .scoreDisplay > div.score {
+  font-size: 2.5em;
+  height: 2em;
+  width: 2em;
+  border-radius: 0.5em;
+}
+.rule h3 {
+  margin-top: 2.5em;
+}
+.rule .icon-warning {
+  font-size: 2em;
+  color: #FF1919;
+}
+.rule .message {
+  width: 80%;
+  margin: 0 auto;
+}
+.rule .message p {
+  margin: 0.5em;
+}
+.rule ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+.rule li:before {
+  content: '\25e6';
+  margin-right: 0.3em;
+  font-size: 1.2em;
+  position: relative;
+  top: 0.1em;
+}
+.rule .offenders li {
+  font-size: 0.8em;
+}
+.rule .notFound {
+  font-size: 1em;
+}
+.rule .notFound h2 {
+  font-size: 3em;
+  margin-bottom: 1em;
+}