Update frontend, is more informational and pretty

1 files changed, 48 insertions, 18 deletions

diff --git a/jimbrella/static/jimbrella.css b/jimbrella/static/jimbrella.css
index 5328f48..f9ef7ae 100644
--- a/jimbrella/static/jimbrella.css
+++ b/jimbrella/static/jimbrella.css
@@ -1,34 +1,64 @@
+body {
+    font-family: sans-serif;
+    text-align: center;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+}
+
 #container {
     position: relative;
+    max-width: 1200px;
 }
 
-/* Desktop */
-@media(min-width: 1081px) {
-    #container {
-        width: 60%;
-        left: 20%;
-    }
+.banner-container {
+    padding: 1em;
 }
 
-/* Mobile compatibility */
-@media (max-width: 1080px) {
-    #container {
-        padding: 1em;
-    }
+.banner {
+    padding: 2em;
+    margin: 1em;
+    display: grid;
 }
 
-body {
-    font-family: sans-serif;
+.tile-container {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 1em;
+}
+
+.tile {
+    padding: 2em;
+    margin: 1em;
+    flex: 1 1 8em;
+}
+
+h2.tile-heading, h2.banner-heading {
+    margin-top: 0;
+    margin-bottom: 2em;
 }
 
-table.overview {
+table {
     border: 2px solid;
-    text-align: center;
 }
 
 td {
     border: 1px solid;
-    padding-top: 1em;
-    padding-bottom: 1em;
-    width: 6em;
+    padding: 1em;
+}
+
+.overdue {
+    background-color: #e99fd3;
+}
+
+.lent {
+    background-color: #9fd3e9;
+}
+
+.available {
+    background-color: #d3e99f;
+}
+
+.big {
+    font-size: 3em;
 }