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