From 216b40c3e9dc51b2e3157c0ac10212a6237e5980 Mon Sep 17 00:00:00 2001
From: Papin Nikolai <nikolai@weirdcat.ru>
Date: Mon, 5 Aug 2024 12:05:40 +0300
Subject: [PATCH] Remade header via grid instead of flexbox to make a proper
 searchbox centering

---
 frontend/src/lib/components/header.svelte    | 31 +++++++++++++-------
 frontend/src/lib/components/searchbar.svelte |  2 --
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/header.svelte b/frontend/src/lib/components/header.svelte
index 00bc71d..a53ed85 100644
--- a/frontend/src/lib/components/header.svelte
+++ b/frontend/src/lib/components/header.svelte
@@ -12,26 +12,30 @@
 
 <header class="header prevent-select" data-sveltekit-preload-data="hover">
 
-    <Icon class="header__menu-button" image={MenuIcon} size="64px"/>
+    <div class="container">
+        <Icon class="header__menu-button" image={MenuIcon} size="64px"/>
 
-    <img class="header__logo" alt="WeirdCat.su" src={Logo}>
+        <img class="header__logo" alt="WeirdCat.su" src={Logo}>
 
-    <a class="header__link"  href="/">Home</a>
-    <a class="header__link" href="/blog">Blog</a>
-    <a class="header__link" href="/services">Services</a>
+        <a class="header__link"  href="/">Home</a>
+        <a class="header__link" href="/blog">Blog</a>
+        <a class="header__link" href="/services">Services</a>
+    </div>
 
-    <Spacer type="horizontal"/>
     <Searchbar id="searchbar"/>
 
-    <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
-    <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
+    <div class="container">
+        <Spacer type="left"/>
+        <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
+        <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
+    </div>
 
 </header>
 
 <style>
     .header {
-        display: flex;
-        justify-content: space-evenly;
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
         align-items: center;
 
         gap: 20px;
@@ -58,4 +62,11 @@
         color: var(--col_text_hint);
     }
 
+    .container {
+        display: flex;
+        align-items: inherit;
+        padding: inherit;
+        gap: inherit;
+    }
+
 </style>
\ No newline at end of file
diff --git a/frontend/src/lib/components/searchbar.svelte b/frontend/src/lib/components/searchbar.svelte
index 5f5ba7e..7e2c8cb 100644
--- a/frontend/src/lib/components/searchbar.svelte
+++ b/frontend/src/lib/components/searchbar.svelte
@@ -11,7 +11,6 @@
 <style>
     .searchbar {
 
-        position: absolute;
         display: flex;
         align-items: center;
 
@@ -21,7 +20,6 @@
 
         height: 36px;
         padding: 10px;
-        margin-inline: auto auto;
     }
 
     .searchbar__input {