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">
<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>