pfp test

docs/css/main.css

@@ -13,6 +13,58 @@
     font-family: var(--font) !important;
 }
 
+.banner,
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: hidden;
+    margin-top: 0
+}
+
+.banner {
+    justify-content: center;
+    margin-bottom: calc(-1*var(--elem-height))
+}
+
+.banner-background,
+.banner-content {
+    height: var(--elem-height);
+    overflow-y: auto
+}
+
+.banner-background {
+    border-radius: var(--border-radius);
+    background-color: var(--gray);
+    opacity: 30%;
+    object-fit: cover
+}
+
+.banner-content {
+    margin-left: 10px;
+    margin-right: 10px;
+    position: relative;
+    top: calc(-1*var(--elem-height))
+}
+
+.banner,
+.banner-background,
+.content {
+    width: var(--elem-width)
+}
+
+.avatar {
+    display: flex;
+    justify-content: space-between;
+    width: var(--elem-width);
+    align-items: center;
+}
+
+.avatar-img {
+    width: 50px;
+    height: 50px;
+    margin-right: 15px
+}
 
 .form {
     width: calc(var(--elem-width) - 1rem);
@@ -42,15 +94,6 @@
     grid-column: span 2;
 }
 
-@media (max-width: 800px) {
-    .form {
-        grid-template-columns: 1fr;
-    }
-    .form-button, .form-heading, .form-message {
-        grid-column: span 1;
-    }
-}
-
 .form-button {
     font-weight: 700;
     display: inline-block;
@@ -58,10 +101,52 @@
     border-color: var(--primary-light)
 }
 
-body {
+.header {
+    z-index: 5;
+    position: sticky;
+    top: 0;
+    display: flex;
+    background: var(--gray);
+    color: var(--white);
+    padding: 10px;
+    margin-bottom: 10px;
+    align-items: center;
+    width: calc(100vw - 20px)
+}
+
+.header-link,
+.link {
+    font-weight: 700;
+    color: var(--white)
+}
+
+.header-link {
+    text-decoration: none;
+    padding-left: .5em;
+    margin-left: .5em;
+    border-left: solid var(--white) 2px;
+
     display: flex;
     flex-direction: column;
     align-items: center;
-    overflow-x: hidden;
-    margin-top: 0
+    justify-content: center;
+    height: 1.5em;
+}
+
+.header-img {
+    border-left: none;
+    margin-left: 0;
+    padding-left: 0;
+    height: 1.5em;
+    width: 1.5em;
+    object-fit: cover;
+}
+
+@media (max-width: 800px) {
+    .form {
+        grid-template-columns: 1fr;
+    }
+    .form-button, .form-heading, .form-message {
+        grid-column: span 1;
+    }
 }