header & footer polish

frontend/src/lib/components/footer.svelte

@@ -63,19 +63,25 @@
 
     .social-row {
         padding: 20px;
+
         background-color: var(--col_panel);
     }
 
     .footer__social-notice-box {
         grid-area: social-notice;
+
         height: 100%;
-        background-color: var(--col_panel);
         margin: 0;
         padding: inherit 40px;
+
         line-height: 30px;
+
+        background-color: var(--col_panel);
     }
 
     .footer__social-notice-text {
+        display: inline-block;
+        vertical-align: middle;
 
         margin: 0 auto;
         padding: inherit 40px;
@@ -84,22 +90,18 @@
         font-family: 'Source_Sans_3' sans-serif;
         font-weight: bold;
         font-size: 20px;
-        display: inline-block;
-        vertical-align: middle;
         line-height:1fr;
 
         color: var(--col_text_panel);
     }
 
     .footer__social-links {
-
         display: flex;
         justify-content: right;
+        grid-area: social-links;
 
         gap: 20px;
-        grid-area: social-links;
         width: auto;
-
     }
 
     .footer-column {
@@ -107,6 +109,7 @@
         display: flex;
         flex-direction: column;
         justify-self: center;
+
         gap: 20px;
         padding: 30px 20px;
 
@@ -120,7 +123,6 @@
         margin-top: 0;
         margin-bottom: 0;
         padding: 0;
-
     }
 
     .footer__column1 {
@@ -136,44 +138,42 @@
     }
 
     .footer-column-title {
-
         position: relative;
         padding-bottom: 20px;
 
         font-family: "Source_Sans_3" sans-serif;
         font-weight: bold;
         text-transform: uppercase;
-
     }
 
     .footer-column-title::after {
         content: "";
-        background-color: var(--col_text_footer);
+        
         position: absolute;
         bottom: 0;
         left: 0;
         height: 2px;
         width: 45%;
+
+        background-color: var(--col_text_footer);
     }
 
     .footer__copyright {
         grid-area: copyright;
+
         margin: auto 0 0 0;
         padding: 10px;
         height: fit-content;
 
-
         font-family: "Montserrat" sans-serif;
         font-size: 24px;
-        color: var(--col_text_copyright);
-
         text-align: center;
 
+        color: var(--col_text_copyright);
         background-color: var(--col_footer_copyright);
     }
 
     @media screen and (max-width: 800px) {
-
         .footer {
             grid-template-areas: "social-notice social-notice social-links"
                              "column1 column1 column1"
@@ -186,9 +186,11 @@
         {
             justify-content: center;
             justify-items: center;
+
             padding: 20px;
             max-width: 60%;
             width: 100%;
+
             text-align: center;
         }
 
@@ -197,15 +199,9 @@
         }
 
         .footer-column-title::after {
-        content: "";
+            left: 28%;
-        background-color: var(--col_text_footer);
+            margin: inherit auto;
-        position: absolute;
+        }
-        bottom: 0;
-        left: 28%;
-        height: 2px;
-        width: 45%;
-        margin: inherit auto;
-    }
     }
 
     @media screen and (max-width: 543px) {
@@ -228,5 +224,4 @@
             margin: inherit 20px;
         }
     }
-
 </style>

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">
+    <div class="container header-right">
-        <Spacer type="left"/>
+        
         <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 {
+    .header-right {
-        display: flex;
+        justify-self: right;
-        align-items: inherit;
-        padding: inherit;
-        gap: inherit;
     }
 
     @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>