add settings routes

data/static/css/style.css

@@ -85,7 +85,7 @@ body {
   margin: var(--big-padding) var(--wrapper-side-margin);
 }
 
-button, .linkbutton, input[type="submit"] {
+button, .linkbutton, input[type="submit"], input[type="file"]::file-selector-button {
   --main-color: var(--button-color-primary);
   --font-color: var(--font-color-main);
   --border-color: hsl(from var(--main-color) h calc(s * 1.3) 25);
@@ -189,7 +189,6 @@ button, .linkbutton, input[type="submit"] {
   }
 }
 
-
 .babycode-editor {
   width: 100%;
   min-height: 150px;
@@ -466,19 +465,6 @@ footer {
   gap: var(--base-padding);
 }
 
-.settings-grid {
-  display: grid;
-  gap: var(--base-padding);
-  --grid-item-base-width: 600px;
-  --grid-item-max-width: calc((100% - var(--grid-item-base-width)) / 2);
-  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-base-width), var(--grid-item-max-width)), 1fr));
-
-  &> * {
-    height: fit-content;
-    width: 100%;
-  }
-}
-
 .thread-actions {
   display: flex;
   flex-wrap: wrap;
@@ -524,6 +510,10 @@ footer {
   padding: var(--base-padding);
 }
 
+.usercard-username {
+  word-wrap: anywhere;
+}
+
 .avatar-container {
   position: relative;
   display: flex;
@@ -676,6 +666,18 @@ details.separated {
   margin: 0.5em 0;
 }
 
+.avatar-form {
+  display: flex;
+  gap: var(--huge-padding);
+}
+
+.avatar-form-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+}
+
 /* babycode tags */
 .inline-code {
   background-color: var(--code-bg-color);
@@ -863,10 +865,6 @@ a.mention {
     margin-right: 0;
   }
 
-  .settings-grid {
-    --grid-item-base-width: 400px;
-  }
-
   .mobile-fill-flex {
     width: 100%;
   }
@@ -908,4 +906,22 @@ a.mention {
     max-width: min(75vw, 400px);
     max-height: 50vh;
   }
+
+  .avatar-form {
+    flex-direction: column;
+    .avatar {
+      align-self: center;
+    }
+  }
+  .avatar-form-controls {
+    flex-direction: row;
+    gap: var(--base-padding);
+    flex-wrap: wrap;
+  }
+
+  .avatar-form-size-label {
+    order: 999;
+    width: 100%;
+    text-align: center;
+  }
 }