fix layout, update colors

dist/index.css

@@ -1,16 +1,18 @@
 /* src/base.css */
-#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%);
+    }
   }
 }
 #background {
@@ -19,11 +21,14 @@
   left: -120px;
   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: "";
@@ -36,9 +41,21 @@
     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) {
@@ -98,9 +115,7 @@
   scroll-behavior: smooth;
   overflow: hidden;
   overflow-x: scroll;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-bottom: 0px;
+  padding: 0px;
 }
 #home-page > div > div {
   display: flex;
@@ -108,6 +123,7 @@
   justify-content: start;
   gap: var(--gap-between-tiles);
   padding: var(--content-padding);
+  padding-top: calc(var(--header-height) + var(--content-margin));
   width: 100%;
   min-width: 100%;
   height: 100%;

dist/index.js

@@ -584,7 +584,7 @@
 
   // src/View/chatPage.tsx
   function ChatPage(chatViewModel) {
-    return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("header", null, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", null));
+    return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("header", null, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "ribbon" }), /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "main" })));
   }
 
   // src/View/chatPageWrapper.tsx

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(