UI changes

htdocs/css/general.css

@@ -1,6 +1,6 @@
 :root {
-    --h1-font-size: 20px;
-    --h2-font-size: 18px;
+    --h1-font-size: 18px;
+    --h2-font-size: 17px;
     --h3-font-size: 16px;
     --default-font-size: 14px;
     --h1-color: #64aa82;
@@ -10,13 +10,48 @@
     --default-header-color: #abbacd;
     --default-amount-color: #a5b3c0;
     --default-padding: 0 0 8px 0;
+    --link-color: #436055;
+}
+
+@font-face {
+    font-family: "Digital Sans EF Medium";
+    src: url('../fonts/Digital Sans EF Medium.ttf') format("truetype");
+}
+
+@font-face {
+    font-family: "DroidSans";
+    src: url('../fonts/DroidSans.ttf') format("truetype");
+}
+
+.digital {
+    font-family: "DroidSans", sans-serif;
+}
+
+a {
+    font-size: 13px;
+}
+a:link {
+    color: var(--link-color);
+}
+a:visited {
+    color: var(--link-color);
+}
+a:hover {
+    color: var(--link-color);
+}
+a:active {
+    color: var(--link-color);
+}
+
+html * {
+    font-family: "DroidSans", sans-serif;
 }
 
 body {
     width: auto;
     height: 100%;
     background: url('../images/background.jpg') no-repeat;
-    background-size: cover;
+    background-size: 100% 100%;
     margin: 0;
     padding: 0;
     color: var(--default-font-color);
@@ -46,11 +81,11 @@ div.fill {
     display: flex;
     flex-direction: column;
     min-height: 76vh;
-    max-height: 76vh;       /* body takes whole viewport's height */
+    max-height: 76vh;
 }
 
 .fill-content {
-    flex: 1;                 /* this will make the container take the free space */
+    flex: 1;
 }
 
 .padded {
@@ -89,7 +124,7 @@ h3 {
 
 p {
     padding: var(--default-padding);
-    font-size: var(--h2-font-size);
+    font-size: var(--default-font-size);
     color: var(--default-font-color);
     margin: 0;
 }
@@ -129,6 +164,7 @@ tr {
 }
 
 td, th {
+    font-size: var(--default-font-size);
     padding: 0 10px 2px 0;
     margin: 0;
 }