implement user accounts and login

1 files changed, 79 insertions, 13 deletions

diff --git a/static/style.css b/static/style.css
index 0809f63..07960ab 100644
--- a/static/style.css
+++ b/static/style.css
@@ -14,19 +14,13 @@ body {
 header {
   background: #3b005e;
   color: white;
-  padding: 16px;
+  padding: 8px;
   margin-bottom: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100vw;
   box-sizing: border-box;
-
-  nav {
-    width: min(800px, 100vw);
-    display: grid;
-    grid-template-columns: 1fr max-content 1fr;
-  }
 }
 
 #siteTitle {
@@ -34,11 +28,28 @@ header {
 }
 
 nav {
+  width: min(800px, 100vw);
+  height: 32px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr max-content 1fr;
+  align-items: center;
+
+  > * {
+    margin: 0 8px;
+  }
+
+  > :last-child {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    align-items: center;
+    justify-self: end;
+    gap: 8px;
+  }
+
   ul {
     list-style: none;
     display: inline;
-    margin: 0;
-    margin-left: 8px;
     padding: 0;
     > li {
       display: inline;
@@ -51,6 +62,10 @@ nav {
       }
     }
   }
+  img.avatar {
+    width: 32px;
+    aspect-ratio: 1;
+  }
 }
 
 main {
@@ -111,8 +126,7 @@ article.note {
   grid-template-columns: max-content 1fr;
   gap: 16px;
 
-  picture.avatar,
-  picture.avatar > * {
+  img.avatar {
     width: 64px;
     aspect-ratio: 1;
   }
@@ -205,6 +219,59 @@ a.icon {
   font-size: 24px;
 }
 
+form {
+  border: 1px solid #3334;
+  background: #9892;
+  border-radius: 8px;
+  margin: 16px;
+  padding: 16px;
+  display: grid;
+  grid-auto-flow: row;
+  gap: 16px;
+  max-width: max-content;
+
+  label:has(+ input) {
+    display: block;
+    font-size: 10pt;
+    color: #555;
+  }
+  input:not([type="checkbox"]) {
+    display: block;
+    border: 1px solid #3334;
+    border-radius: 8px;
+    margin: 8px 0;
+    padding: 8px;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: #fff;
+    width: 24em;
+  }
+  button {
+    background: #3b005e;
+    color: #fff;
+    font-family: inherit;
+    font-size: inherit;
+    border-radius: 8px;
+    border: none;
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+    cursor: pointer;
+    &:disabled {
+      opacity: 80%;
+      cursor: default;
+    }
+  }
+  .error {
+    background: #f004;
+    border: 1px solid #f007;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 0;
+  }
+}
+
 .fullProfile {
   border-radius: 8px;
   margin: 16px;
@@ -217,8 +284,7 @@ a.icon {
     grid-template-columns: max-content 1fr max-content;
     gap: 16px;
 
-    picture.avatar,
-    picture.avatar > * {
+    img.avatar {
       width: 96px;
       aspect-ratio: 1;
     }