Add overview page

client/css/app.css

@@ -149,12 +149,14 @@ h1 {
 h2 {
   color: var(--color5);
   font-weight: bold;
+  font-size: 120%;
   margin-top: 1em;
   margin-bottom: 0.5em;
 }
 
 h3 {
   color: var(--color5);
+  font-size: 110%;
   margin-top: 1em;
   margin-bottom: 0.5em;
 }
@@ -226,3 +228,63 @@ button {
     }
   }
 }
+
+.page-overview {
+  & > h1 {
+    text-align: center;
+  }
+}
+
+.overview-chart-group {
+  display: flex;
+  justify-content: center;
+
+  & h2 {
+    text-align: center;
+  }
+}
+
+.pie-chart {
+  margin: 20px;
+  text-align: center;
+
+  & > svg {
+    & > path {
+      stroke: var(--color1);
+      stroke-width: 1px;
+    }
+
+    & > a {
+      transition: opacity var(--fade);
+      opacity: 0;
+
+      & > text {
+        font-weight: bold;
+        opacity: 0.4;
+      }
+
+      & > path {
+        stroke: var(--color4);
+      }
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  & > .legend {
+    text-align: left;
+    margin: 15px;
+
+    & > .legend-line {
+      & > .color {
+        height: 12px;
+        width: 12px;
+        margin-right: 5px;
+        border: 1px solid var(--color1);
+        display: inline-block;
+      }
+    }
+  }
+}