Further componentisation and advancements to homepage

2023-06-15 21:32:14 +01:00
parent a73ab31b51
commit f45499b829
9 changed files with 75 additions and 20 deletions
--- a/src/lib/navigation/header.svelte
+++ b/src/lib/navigation/header.svelte
@@ -0,0 +1,48 @@
+<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);
+    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>