CobaltLogo.svelte

<script>
    import IconCobalt from '$components/icons/Cobalt.svelte';
</script>

<div id="cobalt-logo">
    <img
        src="logos/hydralogo.png"
        height="75"
        alt="Team Hydra Logo"
        aria-hidden="true"
    />
</div>

<style>
    #cobalt-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: calc(var(--padding) * 2);

        /* accommodate space for scaling animation */
        padding-bottom: calc(var(--padding) * 2 - var(--sidebar-inner-padding));
    }

    @media screen and (max-width: 535px) {
        #cobalt-logo {
            display: none;
        }
    }
</style>