Merge pull request 'New Style' (#20) from feature/reworked-style into main

Reviewed-on: #20
Reviewed-by: Jakob Scheid

src/index.html

@@ -27,22 +27,26 @@ limitations under the License.
         <nav class="global-nav">
             <ul>
                 <li class="nav-item">
-                    Seekra
+                    <a href="#">Seekra</a>
                 </li>
             </ul>
         </nav>
 
-        <header>
+        <div class="content-background">
-            <h1>Seekra</h1>
+            <header class="global-header">
-            <p>
+                <h1>Seekra</h1>
-                Built to search.
+                <p class="slogan">
-            </p>
+                    Built to search.
-        </header>
+                </p>
+            </header>
 
-        <form>
+            <form id="search-form">
-            <input type="search" name="search" placeholder="Search..." required />
+                <div class="search-wrapper">
-            <button type="submit">Search</button>
+                    <input type="search" name="search" placeholder="Search..." required />
-        </form>
+                    <button type="submit" class="search-button">Search</button>
+                </div>
+            </form>
+        </div>
         <footer>
             <p>&copy; 2026 Seekra.</p>
         </footer>

src/static/css/main.css

@@ -1,28 +1,77 @@
 body {
     margin: 0;
+    background-color: #ffffff;
+    font-size: 16px;
+}
+.content-background  {
+    background: 
+        radial-gradient(ellipse at 40% 60%, rgba(255,255,255,0.55) 0%, transparent 75%),
+        linear-gradient(160deg, #c8d8f0, #7aa0d8, #5077C7, #dce8f8);
+    height: 300px;
+    display: flex;
+    flex-direction: column;
 }
 
-header {
+.global-header {
     text-align: center;
 }
 
-header h1 {
+.global-header h1 {
+    display: inline-block;
     margin-bottom: 0;
+    background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.slogan{
+    margin-top: 0;
+    font-size: small;
 }
 
 form {
     display: flex;
     justify-content: center;
-    margin-top: 20px;
+    margin-top: 60px;
     width: 100%;
 }
 
-form button{
+.search-wrapper {
-    margin-left: 10px;
+    --submit-button-padding-y: 8px;
+    --submit-button-content-height: 18px;
+    --padding: 4px;
+    display: flex;
+    align-items: center;
+    width: 80%;
+    border: 1.5px solid #ccc;
+    border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
+    padding: var(--padding);
+    padding-left: calc(var(--submit-button-content-height) + var(--padding));
 }
 
-form input{
+.search-wrapper input {
-    width: 80%;
+    border: none;
+    outline: none;
+    width: 100%;
+    font-size: 1rem;
+    background: transparent;
+}
+
+.search-button {
+    font-size: 1rem;
+    height: calc(var(--submit-button-content-height) + 2 * var(--submit-button-padding-y));
+    border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y));
+    border: none;
+    padding: var(--submit-button-padding-y) 20px;
+    background: #4562BE;
+    color: white;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.search-button:hover {
+    background: #374FA5;
 }
 
 footer{

src/static/css/nav/navbar/navbar.css

@@ -2,7 +2,6 @@
     display: flex;
     justify-content: center;
     padding: 10px 0;
-    border-bottom: 1px solid #000000;
 }
 
 .global-nav ul {