Small redesign

public/style.css

@@ -1,14 +1,67 @@
+:root {
+  --bg-darker: #082032;
+  --bg-main: #2C394B;
+  --bg-lighter: #334756;
+  --text-clr: #ececec;
+  --accent-clr: #FF4C29;
+}
+
 * {
   font-family: sans-serif;
+  font-weight: 100;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--bg-main);
+  color: var(--text-clr);
+  text-align: center;
 }
 
 a {
   text-decoration: none;
-  color: black;
+  color: var(--accent-clr);
+}
+
+.hero {
+  width: 100%;
+  text-align: center;
+  padding: 64px;
+  box-sizing: border-box;
+  background: url(/assets/banner.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.hero > * {
+  margin: 20px auto;
+}
+
+.hero > h1 {
+  font-weight: 800;
+  font-size: 42px;
+}
+
+.hero > p {
+  max-width: 400px;
+}
+
+.controls {
+  margin: 32px auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.controls > * {
+  margin: 0 4px;
 }
 
 table {
-  margin: 64px 0;
+  min-width: 500px;
+  margin: 32px auto;
   border-spacing: 0;
 }
 
@@ -22,6 +75,7 @@ td {
 
 th {
   padding: 8px 16px;
+  background: var(--bg-lighter);
 }
 
 .name {
@@ -29,5 +83,14 @@ th {
 }
 
 .timestamp {
-  font-size: small;
+  font-size: 14px;
+  padding-bottom: 16px;
+  position: sticky;
+  top: 100%;
+}
+
+@media screen and (max-width: 500px) {
+  table {
+    min-width: 100%;
+  }
 }