weirdcat/personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remade header via grid instead of flexbox to make a proper searchbox centering

Browse Source
This commit is contained in:
Николай
2024-08-05 12:05:40 +03:00
parent dda1407381
commit 216b40c3e9
2 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/lib/components/header.svelte
View File

@@ -12,26 +12,30 @@
<header class="header prevent-select" data-sveltekit-preload-data="hover"> <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="/">Home</a>
<a class="header__link" href="/blog">Blog</a> <a class="header__link" href="/blog">Blog</a>
<a class="header__link" href="/services">Services</a> <a class="header__link" href="/services">Services</a>
</div>
<Spacer type="horizontal"/>
<Searchbar id="searchbar"/> <Searchbar id="searchbar"/>
<Icon class="header__language-button" image={LanguageIcon} size="40px"/> <div class="container">
<Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/> <Spacer type="left"/>
<Icon class="header__language-button" image={LanguageIcon} size="40px"/>
<Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
</div>
</header> </header>
<style> <style>
.header { .header {
display: flex; display: grid;
justify-content: space-evenly; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
@@ -58,4 +62,11 @@
color: var(--col_text_hint); color: var(--col_text_hint);
} }
.container {
display: flex;
align-items: inherit;
padding: inherit;
gap: inherit;
}
</style> </style>

2
frontend/src/lib/components/searchbar.svelte
View File

@@ -11,7 +11,6 @@
<style> <style>
.searchbar { .searchbar {
position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -21,7 +20,6 @@
height: 36px; height: 36px;
padding: 10px; padding: 10px;
margin-inline: auto auto;
} }
.searchbar__input { .searchbar__input {