Icon component; header component nearly finished

frontend/src/lib/components/announcement.svelte

@@ -8,14 +8,20 @@
     import { slide } from 'svelte/transition';
     export let message;
     export let color = 'red';
+    export let link;
     let noderef;
 
     let visible = true;
 </script>
 
 {#if visible}
-    <div transition:slide bind:this={noderef} class="announcement" style="background-color: {color};">
-        <span>{message}</span>
+    <div transition:slide bind:this={noderef} class="announcement prevent-select" style="background-color: {color};">
+        {#if link}
+            <a href={link}>{message}</a>
+        {:else}
+            {message}
+        {/if}
+        
         <input class="close-button" type="button" value="" on:click={() => visible = false}>
     </div>
 {/if}
@@ -25,6 +31,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        gap: 5px;
         height: 36px;
         font-size: 18px;
         color: white;
@@ -38,7 +45,12 @@
         mask-image: url('$lib/images/icons/ui/cross.svg');
         mask-repeat: no-repeat;
         mask-size: contain;
-        height: 20px;
-        width: 20px;
+        height: 25px;
+        width: 25px;
+    }
+
+    a, a:visited, a:hover, a:active {
+        text-decoration: none; 
+        color: inherit;
     }
 </style>

frontend/src/lib/components/header.svelte

@@ -0,0 +1,58 @@
+<script>
+	import Searchbar from "./searchbar.svelte";
+    import Logo from "$lib/images/gif/maxwell-cat.gif";
+	import Icon from "./icon.svelte";
+
+    import MenuIcon from "$lib/images/icons/ui/menu.svg";
+    import LanguageIcon from "$lib/images/icons/ui/language.svg";
+    import DarkmodeIcon from "$lib/images/icons/ui/darkmode.svg";
+	import Spacer from "./service/spacer.svelte";
+    
+</script>
+
+<header class="header prevent-select" data-sveltekit-preload-data="hover">
+
+    <Icon class="header__menu-button" image={MenuIcon} size="64px"/>
+
+    <img class="header__logo" alt="WeirdCat.su" src={Logo}>
+
+    <a class="header__link"  href="/">Home</a>
+    <a class="header__link" href="/blog">Blog</a>
+    <a class="header__link" href="/services">Services</a>
+
+    <Searchbar/>
+
+    <Spacer type="left"/>
+
+    <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
+    <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
+
+</header>
+
+<style>
+    .header {
+        display: flex;
+        align-items: center;
+
+        gap: 20px;
+        padding: 5px 20px 5px 20px;
+
+        background-color: var(--col_panel);
+        box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.3);
+    }
+
+    .header__logo {
+        height: 64px;
+        width: 64px;
+
+    }
+
+    .header__link {
+        font-size: 28px;
+        text-decoration: none; 
+        color: var(--col_text_panel);
+
+    }
+
+
+</style>

frontend/src/lib/components/icon.svelte

@@ -0,0 +1,22 @@
+<script>
+    export let image = "";
+    export let onclick = () => {};
+    export let color = "var(--col_text_panel)";
+    export let size = "25px";
+</script>
+
+<input class="icon" type="button" value="" style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" on:click={onclick}>
+
+<style>
+    .icon {
+        cursor: pointer;
+        background-color: var(--color);
+        object-fit: contain;
+        -webkit-mask-image: var(--image);
+        mask-image: var(--image);
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        height: var(--size);
+        width: var(--size);
+    }
+</style>

frontend/src/lib/components/service/spacer.svelte

@@ -0,0 +1,31 @@
+<script>
+    export let type = "left"; 
+
+    let rule = "";
+
+    if (type == "left") {
+        rule = "margin-left: auto";
+    }
+    if (type == "right") {
+        rule = "margin-right: auto";
+    }
+    if (type == "top") {
+        rule = "margin-top: auto";
+    }
+    if (type == "bottom") {
+        rule = "margin-bottom: auto";
+    }
+    if (type == "vertical") {
+        rule = "margin-top: auto; margin-bottom: auto";
+    }
+    if (type == "horizontal") {
+        rule = "margin-left: auto; margin-right: auto";
+    }
+
+    if (rule == "") {
+        console.error("Invalid spacer type: " + type);
+    }
+
+</script>
+
+<div class="spacer" style="{rule}"/>

frontend/src/lib/css/colors.css

@@ -28,4 +28,9 @@
 body {
     background-color: var(--col_background_1);
     color: var(--col_text);
+}
+
+::selection {
+    color: var(--col_text_panel);
+    background: var(--col_text_selection);
 }

frontend/src/lib/css/service.css

@@ -0,0 +1,15 @@
+.prevent-select, .prevent-select > * {
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+.maintain-left {
+  margin-right: auto;
+}
+
+.maintain-right {
+  margin-left: auto;
+}
+
+

frontend/src/routes/+layout.svelte

@@ -3,13 +3,17 @@
 
     import '$lib/css/normalize.css';
     import '$lib/css/font_imports.css';
-    import '$lib/css/fonts.css';
+    import '$lib/css/service.css'
     import '$lib/css/colors.css';
     import '$lib/css/anims.css';
 
+    import '$lib/css/fonts.css';
+
     import Announcement from '$lib/components/announcement.svelte';
+    import Header from '$lib/components/header.svelte';
     
 </script>
 
-<Announcement message="This is an announcement" color="var(--col_accent)"/>
+<Announcement message="This site is yet in development" color="var(--col_accent)"/>
+<Header/>
 <slot></slot>