melon-archive
/
summer-ui
Archived
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Change header style
ci/woodpecker/push/build Pipeline failed Details

This commit is contained in:
Melon 2022-10-31 22:14:12 +00:00
parent bc1dd3ca4a
commit 0694d31f77
Signed by: melon
GPG Key ID: 6C9D970C50D26A25
1 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/App.svelte
View File

@ -24,17 +24,19 @@
<div id="app-router">
<Router primary={false}>
<header>
<a href="/" use:link>
<h1>{import.meta.env.VITE_TITLE}</h1>
</a>
<div class="central-header">
<a href="/" use:link>
<h1>{import.meta.env.VITE_TITLE}</h1>
</a>
<nav>
{#if isLoggedIn}
<a href="/logout" on:click|preventDefault={logoutAction}>Logout</a>
{:else}
<a href="/login" use:link>Login</a>
{/if}
</nav>
<nav>
{#if isLoggedIn}
<a href="/logout" on:click|preventDefault={logoutAction}>Logout</a>
{:else}
<a href="/login" use:link>Login</a>
{/if}
</nav>
</div>
</header>
<main>
@ -68,30 +70,50 @@
<style lang="scss">
#app-router {
max-width: 1000px;
margin: auto;
margin: 50px auto 0 auto;
> header {
padding: 0 32px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
min-height: 80px;
max-height: 80px;
height: 50px;
min-height: 50px;
max-height: 50px;
background-color: var(--primary-main);
border-radius: 0 0 var(--large-curve) var(--large-curve);
a {
color: #eeeeee;
> .central-header {
padding: 0 32px;
height: 50px;
min-height: 50px;
max-height: 50px;
align-items: center;
justify-content: space-between;
display: flex;
width: 1000px;
max-width: 1000px;
margin: auto;
&:hover {
color: #ffffff;
a {
color: #eeeeee;
&:hover {
color: #ffffff;
}
> h1 {
font-size: 26px;
line-height: 50px;
}
}
}
> nav > :global(a) {
padding: 8px;
> nav > :global(a) {
padding: 8px;
}
}
}