<script setup lang="ts">
import { Link } from '@inertiajs/vue3';

defineProps<{
    light?: boolean;
    small?: boolean;
}>();
</script>

<template>
    <Link style="text-decoration: none;" :href="route('home')">
        <span
            :class="[
                'masthead',
                small && 'masthead-sm',
                light && 'masthead-light',
                !light && 'masthead-dark',
            ]"
        >
            Dredge<span class="masthead-accent">News</span>
        </span>
    </Link>
</template>

<style scoped lang="sass">
.masthead
    font-family: 'Playfair Display', serif
    font-weight: 700
    font-size: 22px
    letter-spacing: -0.5px

.masthead-sm
    font-size: 16px

.masthead-light
    color: #FFFFFF

.masthead-dark
    color: #111111

.masthead-accent
    color: #C0392B
</style>
