pages/src/lib/header.svelte

<div class="header-container">
    <div class="header-content">
        <a class="favicon" href="/">
            <img class="favicon-image" src="/favicon.webp" alt="Favicon">
        </a>
        <div class="links wide-font">
            <span>»</span>
            <a href="/projects">Projects</a>
            <span> // </span>
            <a href="/about">About</a>
            <span>«</span>
        </div>
    </div>
</div>

<style>
    .header-container {
        margin: 0 0 ;
        padding: 0;
    }

    .header-content {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        max-width: var(--page-width);
        margin: 0 auto;
        padding: 0 24px;
    }

    .favicon {
        margin: 8px 0;
        background: url("/favicon.webp");
    }

    .favicon-image {
        width: initial;
        max-height: 32px;
    }

    .links {
        margin-left: auto;
        margin-right: 0;

        padding: 12px 24px;
        background-color: var(--color-background-highlight-hover);
        clip-path: polygon(
            12px 0%,
            100% 0%,
            calc(100% - 12px) 100%,
            0% 100%,
            12px 0%
        );
    }

    a, span {
        font-family: var(--font-title);
        font-size: 1rem;
        font-weight: 800;
        color: var(--color-text);
    }

    a {
        text-decoration: none;
        transition: 0.2s ease-in-out color;
    }
    
    a:link {
        color: var(--color-text);
    }
    /* visited link */
    a:visited {
        color: var(--color-text);
    }
    /* mouse over link */
    a:hover {
        color: var(--color-text-dark);
    }
</style>