68 lines
1.4 KiB
Svelte
68 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { page } from "$app/stores";
|
|
</script>
|
|
|
|
<div id="header-bar">
|
|
<div id="logo-box">
|
|
<a href="/">
|
|
<img class="logo-img" src="/logo/logo-colour.svg" alt="FJLA Logo" width="50" height="50">
|
|
<!--<img class="logo-img" id="logo-black" src="/logo/logo-black.svg" alt="FJLA Logo" width="50" height="50">
|
|
--> </a>
|
|
</div>
|
|
{#if $page.data.session}
|
|
<a class="account-link" href="/logout">Sign out</a>
|
|
{/if}
|
|
</div>
|
|
<div id="spacer"></div>
|
|
|
|
<style>
|
|
#header-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: darkslategrey;
|
|
height: 60px;
|
|
}
|
|
|
|
#logo-box {
|
|
padding: 5px;
|
|
height: 50px;
|
|
}
|
|
|
|
.logo-img {
|
|
position: absolute;
|
|
left: 5px;
|
|
}
|
|
|
|
.account-link {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 0px;
|
|
height: 60px;
|
|
width: 140px;
|
|
color: white;
|
|
background-color: darkslategrey;
|
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
font-weight: 900;
|
|
font-size: larger;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
border-radius: 0px;
|
|
|
|
/* Flexbox styles for centering */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
.account-link:hover {
|
|
background-color: rgb(54, 90, 90);
|
|
}
|
|
|
|
#spacer {
|
|
height: 90px;
|
|
}
|
|
|
|
</style> |