fix layout, update colors

src/View/chatPage.tsx

@@ -11,7 +11,11 @@ export function ChatPage(chatViewModel: ChatViewModel) {
       <header>
         <span subscribe:innerText={chatViewModel.primaryChannel}></span>
       </header>
-      <div></div>
+      <div>
+        <div class="ribbon"></div>
+        <div class="toolbar"></div>
+        <div class="main"></div>
+      </div>
     </article>
   );
 }

src/View/homePage.css

@@ -9,9 +9,7 @@
   overflow: hidden;
   overflow-x: scroll;
 
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-bottom: 0px;
+  padding: 0px;
 }
 
 #home-page > div > div {
@@ -21,6 +19,7 @@
 
   gap: var(--gap-between-tiles);
   padding: var(--content-padding);
+  padding-top: calc(var(--header-height) + var(--content-margin));
 
   width: 100%;
   min-width: 100%;

src/base.css

@@ -1,16 +1,18 @@
-#home-page {
-  --background-transparent: hsla(0, 0%, 100%, 40%);
-  --surface: hsla(0, 0%, 100%, 40%);
-  --surface-hover: hsla(0, 0%, 91%, 40%);
-  --surface-active: hsla(0, 0%, 78%, 40%);
-}
-
-@media (prefers-color-scheme: dark) {
+@media (display-mode: browser) {
   #home-page {
-    --background-transparent: hsla(0, 0%, 5%, 30%);
-    --surface: hsla(0, 0%, 5%, 30%);
-    --surface-hover: hsla(0, 0%, 20%, 30%);
-    --surface-active: hsla(0, 0%, 44%, 30%);
+    --background-transparent: hsla(0, 0%, 100%, 40%);
+    --surface: hsla(0, 0%, 100%, 40%);
+    --surface-hover: hsla(0, 0%, 91%, 40%);
+    --surface-active: hsla(0, 0%, 78%, 40%);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    #home-page {
+      --background-transparent: hsla(0, 0%, 5%, 30%);
+      --surface: hsla(0, 0%, 5%, 30%);
+      --surface-hover: hsla(0, 0%, 20%, 30%);
+      --surface-active: hsla(0, 0%, 44%, 30%);
+    }
   }
 }
 
@@ -22,13 +24,17 @@
   right: -120px;
   bottom: -120px;
 
-  z-index: -1;
+  z-index: 1;
   pointer-events: none;
 
   filter: blur(60px);
   opacity: 0.2;
 }
 
+main {
+  z-index: 2;
+}
+
 #background::after,
 #background::before {
   content: "";
@@ -43,13 +49,26 @@
   #background {
     background-image: linear-gradient(
       120deg,
-      hsla(210, 100%, 50%, 50%),
-      hsla(210, 100%, 50%, 35%),
-      transparent 40%
+      hsla(210, 100%, 50%, 60%),
+      hsla(210, 100%, 50%, 55%),
+      transparent 60%
     );
   }
 }
 
+@media (display-mode: standalone) {
+  @media (prefers-color-scheme: dark) {
+    #background {
+      background-image: linear-gradient(
+        120deg,
+        hsla(210, 100%, 50%, 80%),
+        hsla(210, 100%, 50%, 75%),
+        transparent 60%
+      );
+    }
+  }
+}
+
 @media (prefers-color-scheme: light) {
   #background {
     background-image: linear-gradient(