paulnicoue/app.vue

<template>

    <div class="app">
        <NuxtPage class="app__main" />
        <AppFooter class="app__footer" />
    </div>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    const pageTitleChunk = useRoute().meta.pageTitleChunk;

    // --------------------------------------------------
    // HEAD
    // --------------------------------------------------

    useAppHead(pageTitleChunk);
    
</script>

<style lang="scss">

    // --------------------------------------------------
    // MODULES
    // --------------------------------------------------

    @use 'minireset.css';
    @use '~/assets/styles/fonts';
    @use '~/assets/styles/variables';
    @use '~/assets/styles/animations';

    // --------------------------------------------------
    // FONTS AND COLORS
    // --------------------------------------------------

    body {
        font-family: var(--text-font-family);
        font-size: var(--text-font-size);
        font-weight: var(--regular-font-weight);
        line-height: var(--line-height);
        color: var(--secondary-color);
        background-color: var(--primary-color);
    }

    h1 {
        font-family: var(--title-font-family);
        font-size: var(--h1-font-size);
        font-weight: var(--medium-font-weight);
    }

    h2 {
        font-family: var(--title-font-family);
        font-size: var(--h2-font-size);
        margin: 0 0 4rem 0;
    }

    h3 {
        font-family: var(--text-font-family);
        font-size: var(--h3-font-size);
        margin: 2rem 0 1rem 0;
    }

    strong {
        font-weight: var(--bold-font-weight);
    }

    em {
        font-style: italic;
    }

    // --------------------------------------------------
    // LINK STYLE
    // --------------------------------------------------

    a {
        color: var(--secondary-color);
        text-decoration: underline var(--accent-color);
        border-radius: 2px;
        transition: color 200ms ease-in-out;

        &:hover,
        &:focus,
        &:active {
            color: var(--accent-color);
        }

        &:focus-visible {
            outline: 1px dashed var(--accent-color);
            outline-offset: 2px;
            animation: expand-outline 200ms ease-in-out;
        }
    }

    // --------------------------------------------------
    // BUTTON STYLE
    // --------------------------------------------------

    button {
        padding: 1rem 1.5rem;
        color: var(--primary-color);
        background-image: var(--button-gradient);
        background-size: 100%;
        background-position: right center;
        border: none;
        border-radius: 30px;
        cursor: pointer;
        font-family: var(--text-font-family);
        font-size: var(--text-font-size);
        font-weight: var(--semi-bold-font-weight);
        line-height: var(--line-height);
        text-align: center;
        transition: background-size 200ms ease-in-out;

        &:hover,
        &:focus,
        &:active {
            background-size: 300%;
        }

        &:focus-visible {
            outline: 1px dashed var(--accent-color);
            outline-offset: 4px;
            animation: expand-outline 200ms ease-in-out;
        }
    }

    // --------------------------------------------------
    // LAYOUT
    // --------------------------------------------------

    .app {
        min-height: 100vh;
        display: grid;
        grid:
            'app-main' 1fr
            'app-footer' auto
            / 1fr;
        place-items: center;
    
        &__main {
            grid-area: app-main;
        }

        &__footer {
            grid-area: app-footer;
        }
    }


</style>