improve home page layout

src/View/homePage.css

@@ -1,15 +1,27 @@
+#home-page {
+    overflow: auto;
+    padding: var(--content-padding);
+
+    min-width: unset;
+    max-width: 1000px;
+}
+
+#home-page > h1 {
+    font-size: 3rem;
+    font-family: IBM Plex Sans Thin;
+}
+
 #home-page > div {
+    position: relative;
+
     display: flex;
     flex-direction: row;
-
-    gap: var(--large-gap);
-
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-    overflow: hidden;
-    overflow-x: scroll;
+    flex-wrap: wrap;
 
     padding: 0px;
+
+    height: auto;
+    overflow: visible;
 }
 
 #home-page > div > div {
@@ -18,22 +30,9 @@
     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%;
-    overflow-y: auto;
-
-    scroll-snap-align: center;
-}
-
-#home-page #overview-section,
-#home-page #chat-section {
-    padding-bottom: calc(
-        var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
-    );
 }
 
 #home-page #chat-grid {
@@ -47,7 +46,7 @@
 
 @media (min-width: 640px) {
     #home-page > div {
-        overflow-x: hidden;
+	gap: var(--content-padding);
     }
 
     #home-page #overview-section {
@@ -61,19 +60,13 @@
     }
 }
 
-@media (min-width: 1200px) {
-    #home-page #overview-section,
-    #home-page #chat-section {
-        padding-left: 3rem;
-        padding-right: 3rem;
+@media (min-width: 1000px) {
+    #home-page > div {
+	gap: var(--large-gap);
     }
 
-    #home-page #chat-grid {
-        margin-top: 3rem;
-    }
-
-    #home-page #overview-section {
-        width: var(--max-input-width);
-        min-width: var(--max-input-width);
+    #home-page > h1 {
+	padding-top: 3rem;
+	padding-bottom: 1rem;
     }
 }

src/View/homePage.tsx

@@ -18,11 +18,11 @@ export function HomePage(
     fileTransferViewModel: FileTransferViewModel,
     chatListViewModel: ChatListViewModel,
 ) {
+    const greeting = React.createProxyState([settingsViewModel.username], ()=>coreViewModel.translations.homePage.greeting(settingsViewModel.username.value));
+
     // sections
     const overviewSection = (
         <div id="overview-section">
-            <h2>{coreViewModel.translations.homePage.overviewHeadline}</h2>
-
             <label class="tile flex-no">
                 <span class="icon">cell_tower</span>
                 <div>
@@ -116,24 +116,13 @@ export function HomePage(
                 <span subscribe:innerText={coreViewModel.updateText}></span>
                 <span class="icon">update</span>
             </button>
-
-            <div class="mobile-only">
-                <hr></hr>
-
-                <div class="flex-row justify-end">
-                    <button class="ghost width-50" on:click={scrollToChat}>
-                        {coreViewModel.translations.homePage.scrollToChatButton}
-                        <span class="icon">arrow_forward</span>
-                    </button>
-                </div>
-            </div>
+	
+	    <hr class="mobile-only"></hr>
         </div>
     );
 
     const chatSection = (
         <div id="chat-section">
-            <h2>{coreViewModel.translations.homePage.chatsHeadline}</h2>
-
             <div class="flex-row width-input">
                 <input
                     placeholder={
@@ -155,7 +144,9 @@ export function HomePage(
                 >
                     <span class="icon">add</span>
                 </button>
-            </div>
+	    </div>
+
+	    <hr></hr>
 
             <div
                 id="chat-grid"
@@ -163,18 +154,14 @@ export function HomePage(
                     chatListViewModel.chatViewModels,
                     ChatViewModelToChatEntry,
                 ]}
-            ></div>
+	    ></div>
         </div>
     );
 
-    // methods
-    function scrollToChat() {
-        chatSection.scrollIntoView();
-    }
-
     // final
     return (
-        <article id="home-page">
+	<article id="home-page">
+	    <h1 subscribe:innerText={greeting}></h1>
             <div>
                 {overviewSection}
                 {chatSection}

src/base.css

@@ -9,9 +9,8 @@
 /* Gradient */
 #background-wrapper {
     position: fixed;
-    inset: 0px;
+    inset: -80px;
 
-    transform: scale(1.2);
     filter: blur(40px);
 
     z-index: 1;
@@ -144,6 +143,6 @@ body[theme="dark"] #background-wrapper #grass-2 {
 }
 
 body[keystroke-active] [ctkeystroke]::after {
-    opacity: 1;
+    opacity: .7;
     transform: translateY(0px);
 }