<script setup lang="ts">
defineProps<{
    light?: boolean;
    small?: boolean;
}>();
</script>

<template>
    <span :class="['masthead', small && 'masthead-sm', light && 'masthead-light', !light && 'masthead-dark']">
        Dredge<span class="masthead-accent">News</span>
    </span>
</template>

<style scoped lang="sass">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap')

.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>
