Improve page layout, add navbar

1 files changed, 86 insertions, 0 deletions

diff --git a/static/app.css b/static/app.css
index a52ea8d..0148d24 100644
--- a/static/app.css
+++ b/static/app.css
@@ -1,3 +1,53 @@
+header {
+    padding: 0rem 2rem 0rem 2rem;
+    
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+}
+
+header > h1 {
+    padding: 0.5rem;
+}
+
+header > nav {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 2em;
+}
+
+a {
+    margin: 0.5em;
+    color: inherit;
+    position: relative;
+    display: inline-block;
+    text-decoration: none;
+}
+
+a::after {
+    content: "";
+    background: white;
+    height: 1px;
+    position: absolute;
+    bottom: 0;
+    transition: .16s all 0.025s;
+}
+
+a::after {
+    left: 100%;
+    right: 0;
+}
+
+a:hover ~ a::after {
+    left: 0;
+    right: 100%;
+}
+
+a:hover::after {
+    left: 0;
+    right: 0;
+}
+
 .pane {
     margin: auto;
     padding: 4px 10px;
@@ -11,6 +61,42 @@
     box-shadow: 0px 0px 15px 2px #410f5e;
 }
 
+.topline {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+}
+
+.topline > p {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 2em;
+}
+
+.card {
+    border-top: 1px solid #fff;
+
+    padding-top: 0.5rem;
+    padding-bottom: 0.75rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+
+    margin: 0.25rem;
+    margin-bottom: 1rem;
+
+    border-radius: 20px;
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+.card:hover {
+    box-shadow: 0px 0px 15px 2px #ecb77d;
+}
+
+.card .header {
+    text-align: center;
+}
+
 #bg-image {
     position: fixed;