owlboard-svelte/src/lib/navigation/header.svelte

48 lines
902 B
Svelte

<script>
export let title = 'title'
</script>
<div class="headerBar">
<a href="/">
<picture>
<source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
<img src="/images/logo/wide_logo_200.png" alt="OwlBoard Logo">
</picture>
</a>
<header>{title}</header>
</div>
<div class="headerBlock">
<!-- This exists to prevent the headerBar overlapping anything below it -->
</div>
<style>
.headerBar {
background: var(--overlay-color-solid);
position: fixed;
top: 0; left: 0;
width: 100%;
margin: 0;
padding: 0;
height: 50px;
}
img {
position: absolute;
height: 40px;
left: 8px;
top: 5px;
}
header {
font-family: urwgothic, sans-serif;
font-weight: 600;
margin-top: 6px;
margin-left: 20px;
font-size: 20pt;
}
.headerBlock {
height: 50px;
margin: 0;
padding: 0;
}
</style>