Improve styles - WIP

fe/src/App.css

@@ -4,6 +4,17 @@
   --color-dark: #000B25;
   --color-bg: #101010;
   --color-accent: #00A4DC;
+  --jf-gradient-color-primary-dark: #003c50;
+  --jf-gradient-color-secondary-dark: #3e2247;
+}
+
+.mobile-keyboard-mock {
+  background-color: gray;
+  width: 100vw;
+  height: 300px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 
 body {
@@ -11,7 +22,28 @@ body {
   color: white;
 }
 
+.app-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  width: calc(100vw - 30px);
+  margin: 0 auto;
+  display: flex;
+}
+
+main {
+  flex-grow: 1;
+  background: linear-gradient(220deg, var(--jf-gradient-color-secondary-dark), var(--jf-gradient-color-primary-dark));
+}
+
 h1 {
+  font-size: 1.8em;
+  line-height: 1.1;
+  margin: 0;
+  padding: 8px 0;
   background: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));
   color: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));
   -webkit-background-clip: text;
@@ -20,15 +52,14 @@ h1 {
 
 #root {
   max-width: 1920px;
-  padding: 0 15px 10px;
   text-align: center;
 }
 
 .logo {
   will-change: filter;
   transition: filter 300ms;
-  transform: translateY(7px);
-  margin-right: 5px;
+  transform: translateY(4px);
+  margin-right: 2px;
 }
 
 h1:hover {
@@ -61,6 +92,14 @@ h1:hover {
   color: #888;
 }
 
-.app-container {
+.search-bar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  max-width: calc(50% + 15px);
 
+  input {
+    font-size: 17px;
+  }
 }

fe/src/App.tsx

@@ -17,15 +17,23 @@ function App() {
 
   return (
     <div onClick={handleBackgroundClick} className="app-container">
-      <h1>
-        <img src={jellyfin} className="logo" alt="Jellyfin logo" height="50px" width="50px" />
-        Wishlist
-      </h1>
-      <Search
-        setSearchResults={setSearchResults}
-        searchString={searchString}
-        setSearchString={setSearchString}
-      />
+      <header>
+        <h1>
+          <img src={jellyfin} className="logo" alt="Jellyfin logo" height="28px" width="28px" />
+          Wishlist
+        </h1>
+        <Search
+          setSearchResults={setSearchResults}
+          searchString={searchString}
+          setSearchString={setSearchString}
+        />
+      </header>
+      <main>
+        <div>
+          content
+        </div>
+      </main>
+      <div className="mobile-keyboard-mock" />
     </div>
   )
 }

fe/src/index.css

@@ -24,17 +24,10 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
   min-width: 320px;
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-  margin: 10px 0 15px;
-}
-
 button {
   border-radius: 8px;
   border: 1px solid transparent;