header & footer polish

frontend/src/lib/components/header.svelte

@@ -5,14 +5,14 @@
     import MenuIcon from "$lib/images/icons/ui/menu.svg";
     import LanguageIcon from "$lib/images/icons/ui/language.svg";
     import DarkmodeIcon from "$lib/images/icons/ui/darkmode.svg";
-	import Spacer from "./service/spacer.svelte";
+	
 	import Searchbar from "./searchbar.svelte";
     
 </script>
 
 <header class="header prevent-select" data-sveltekit-preload-data="hover">
 
-    <div class="container">
+    <div class="container header-left">
         <Icon class="header__menu-button" image={MenuIcon} size="64px"/>
 
         <img class="header__logo" alt="WeirdCat.su" src={Logo}>
@@ -24,8 +24,8 @@
 
     <Searchbar id="searchbar"/>
 
-    <div class="container">
-        <Spacer type="left"/>
+    <div class="container header-right">
+        
         <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
         <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
     </div>
@@ -42,14 +42,27 @@
         padding: 5px 10px;
 
         height: 74px;
+
         background-color: var(--col_panel);
         box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.3);
     }
 
+    .container {
+        display: flex;
+        align-items: inherit;
+        justify-self: right;
+
+        padding: inherit;
+        gap: inherit;
+    }
+
+    .header-left {
+        margin-right: auto;
+    }
+
     .header__logo {
         height: 64px;
         width: 64px;
-
     }
 
     :global(.header__menu-button) {
@@ -66,11 +79,8 @@
         color: var(--col_text_hint);
     }
 
-    .container {
-        display: flex;
-        align-items: inherit;
-        padding: inherit;
-        gap: inherit;
+    .header-right {
+        justify-self: right;
     }
 
     @media only screen and (max-width: 1036px) {
@@ -80,14 +90,12 @@
     }
 
     @media only screen and (max-width: 935px) {
-
         .header {
             grid-template-columns: auto auto 1fr;
         }
     }
 
     @media only screen and (max-width: 730px) {
-
         .header {
             grid-template-columns: auto auto auto;
         }
@@ -110,5 +118,4 @@
             grid-template-columns: 1fr 1fr;
         }
     }
-
 </style>