add: user profiles and junk

app/public/style.css

@@ -1,12 +1,18 @@
+@import url("https://repodelivery.tetratto.com/tetratto-aux/lexend.css");
+
 :root {
     color-scheme: light dark;
-
-    --color-super-lowered: oklch(87.1% 0.006 286.286);
-    --color-lowered: oklch(96.7% 0.001 286.375);
-    --color-surface: oklch(92.9% 0.013 255.508);
-    --color-raised: oklch(98.4% 0.003 247.858);
-    --color-super-raised: oklch(96.8% 0.007 247.896);
-    --color-text: hsl(0, 0%, 5%);
+    --hue: 16;
+    --sat: 6%;
+    --lit: 0%;
+    --color-surface: hsl(var(--hue), var(--sat), calc(90% - var(--lit)));
+    --color-lowered: hsl(var(--hue), var(--sat), calc(86% - var(--lit)));
+    --color-raised: hsl(var(--hue), var(--sat), calc(96% - var(--lit)));
+    --color-super-lowered: hsl(var(--hue), var(--sat), calc(82% - var(--lit)));
+    --color-super-raised: hsl(var(--hue), var(--sat), calc(99% - var(--lit)));
+    --color-text: hsl(0, 0%, 9%);
+    --color-text-raised: var(--color-text);
+    --color-text-lowered: var(--color-text);
 
     --color-link: #2949b2;
     --color-shadow: rgba(0, 0, 0, 0.08);
@@ -30,7 +36,7 @@
     --pad-3: 0.5rem;
     --pad-4: 1rem;
 
-    --radius: 0.2rem;
+    --radius: 6px;
     --nav-height: 36px;
 }
 
@@ -43,12 +49,15 @@
 
 .dark,
 .dark * {
-    --color-super-lowered: var(--color-super-raised);
-    --color-lowered: var(--color-raised);
-    --color-surface: oklch(21% 0.006 285.885);
-    --color-raised: oklch(27.4% 0.006 286.033);
-    --color-super-raised: oklch(37% 0.013 285.805);
-    --color-text: hsl(0, 0%, 95%);
+    --hue: 266;
+    --sat: 14%;
+    --lit: 12%;
+    --color-surface: hsl(var(--hue), var(--sat), calc(0% + var(--lit)));
+    --color-lowered: hsl(var(--hue), var(--sat), calc(6% + var(--lit)));
+    --color-raised: hsl(var(--hue), var(--sat), calc(2% + var(--lit)));
+    --color-super-lowered: hsl(var(--hue), var(--sat), calc(12% + var(--lit)));
+    --color-super-raised: hsl(var(--hue), var(--sat), calc(4% + var(--lit)));
+    --color-text: hsl(0, 0%, 91%);
 
     --color-link: #93c5fd;
     --color-red: hsl(0, 94%, 82%);
@@ -66,6 +75,7 @@ body {
     line-height: 1.5;
     letter-spacing: 0.15px;
     font-family:
+        "Lexend",
         "Inter",
         "Poppins",
         "Roboto",
@@ -212,6 +222,10 @@ video {
     background: var(--color-surface);
 }
 
+.card .card {
+    border-radius: var(--radius);
+}
+
 /* button */
 .button {
     --h: 36px;
@@ -235,6 +249,10 @@ video {
     overflow: hidden;
 }
 
+.button:not(nav *, .tab, .dropdown .inner *, .square) {
+    border-radius: var(--radius);
+}
+
 .button:disabled {
     opacity: 50%;
     cursor: not-allowed;
@@ -303,6 +321,15 @@ video {
     background: var(--color-primary-lowered) !important;
 }
 
+.button.big {
+    --h: 48px;
+    width: 100%;
+}
+
+.button.icon_only {
+    width: var(--h);
+}
+
 /* dropdown */
 .dropdown {
     position: relative;
@@ -380,6 +407,8 @@ select {
     line-height: var(--h);
     border-left: solid 0px transparent;
     width: 100%;
+    resize: vertical;
+    border-radius: var(--radius);
 }
 
 input:not([type="checkbox"]):focus {
@@ -570,6 +599,10 @@ h6 {
     width: -moz-max-content;
     position: relative;
     max-width: 100%;
+
+    & * {
+        font-size: inherit;
+    }
 }
 
 h1 {
@@ -714,6 +747,7 @@ dialog {
     margin: auto;
     padding: var(--pad-4);
     border: 0;
+    border-radius: var(--radius);
 }
 
 dialog .inner {
@@ -765,9 +799,15 @@ menu.col {
     padding: var(--pad-2) var(--pad-3);
     background: var(--color-surface);
     color: var(--color-text);
+    border-radius: var(--radius);
 }
 
 .message.mine .body {
     background: var(--color-primary);
     color: var(--color-text-primary);
+    border-bottom-right-radius: 0;
+}
+
+.message:not(.mine) .body {
+    border-bottom-left-radius: 0;
 }