👤 Adding the header

This will be our first task at hand! It's a pretty simple component and it makes sense to start things off with it.

The markup

We'll take advantage of the header tag for improved semantics:

/views/layouts/base.twig

<header class="c-header">
    <button>Menu</button>
    <a href="https://locomotive.ca/" rel="noopener noreferrer" target="_blank">
        Shop <span aria-hidden="true">↗</span>
    </a>
</header>

The styles

And a simple display: flex; will do the trick

/assets/styles/components/_header.scss

.c-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--grid-margin);
    display: flex;
    justify-content: space-between;
}

The mobile version is pretty much the same, so no need to worry about RWD for now.