diff --git a/frontend/src/lib/components/footer.svelte b/frontend/src/lib/components/footer.svelte index 61faca0..c003b2c 100644 --- a/frontend/src/lib/components/footer.svelte +++ b/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: ""; - background-color: var(--col_text_footer); - position: absolute; - bottom: 0; - left: 28%; - height: 2px; - width: 45%; - margin: inherit auto; - } + left: 28%; + margin: inherit auto; + } } @media screen and (max-width: 543px) { @@ -228,5 +224,4 @@ margin: inherit 20px; } } - \ No newline at end of file diff --git a/frontend/src/lib/components/header.svelte b/frontend/src/lib/components/header.svelte index ad85413..278019b 100644 --- a/frontend/src/lib/components/header.svelte +++ b/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";
-
+
@@ -24,8 +24,8 @@ -
- +
+
@@ -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; } } - \ No newline at end of file