<template>

    <div>
        <NuxtPage />
    </div>

</template>

<script setup>

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

    const route = useRoute();
    const pageTitle = route.meta.pageTitleChunk ? `Paul Nicoué | ${route.meta.pageTitleChunk}` : 'Paul Nicoué';
    const pageUrl = `https://paulnicoue.com${route.path}`;

    useHead({
        title: pageTitle,
        meta: [
            /* Basic metadata */
            {charset: 'utf-8'},
            {name: 'viewport', content: 'width=device-width'},
            /* Name */
            {id: 'schema_name', itemprop: 'name', content: 'Paul Nicoué'},
            /* Description */
            {name: 'description', content: 'Intégrateur et développeur web.'},
            {id: 'schema_description', itemprop: 'description', content: 'Intégrateur et développeur web.'},
            /* Author */
            {name: 'author', content: 'Paul Nicoué'},
            /* Image */
            {id: 'schema_image', itemprop: 'image', content: '#'},
            /* Open Graph */
            {property: 'og:title', content: pageTitle},
            {property: 'og:description', content: 'Intégrateur et développeur web.'},
            {property: 'og:image', content: '#'},
            {property: 'og:image:width', content: '1200'},
            {property: 'og:image:height', content: '675'},
            {property: 'og:url', content: pageUrl},
            {property: 'og:type', content: 'website'},
            /* Twitter Card */
            {name: 'twitter:card', content: 'summary_large_image'},
            {name: 'twitter:title', content: 'Paul Nicoué'},
            {name: 'twitter:description', content: 'Intégrateur et développeur web.'},
            {name: 'twitter:image', content: '#'}
        ],
        link: [
            /* Canonical URL */
            {rel: 'canonical', href: pageUrl},
            /* Favicon */
            {rel: 'icon', sizes: 'any', href: '#'},
            {rel: 'icon', type: 'image/svg+xml', href: '#'},
            {rel: 'apple-touch-icon', href: '#'},
            {rel: 'manifest', href: '#'}
        ],
        style: [
            /* Schema */
            {itemscope: true, itemtype: 'https://schema.org/WebSite', itemref: 'schema_name schema_description schema_image'}
        ],
        script: [
            /* Matomo tracking code */
            {children: `
                var _paq = window._paq = window._paq || [];
                _paq.push(["disableCookies"]);
                _paq.push(['trackPageView']);
                _paq.push(['enableLinkTracking']);
                (function() {
                    var u="https://matomo.paulnicoue.com/";
                    _paq.push(['setTrackerUrl', u+'matomo.php']);
                    _paq.push(['setSiteId', '4']);
                    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
                    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
                })();
            `}
        ]
    })
    
</script>

<style lang="scss">

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

    @use 'minireset.css';

    // ----------------------------------------------------------------------------
    // VARIABLES
    // ----------------------------------------------------------------------------

    :root {

        // Fonts

        --text-font-family: 'Nunito', Verdana, sans-serif;
        --title-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
        --regular-font-weight: 400;
        --medium-font-weight: 500;
        --semi-bold-font-weight: 600;
        --bold-font-weight: 700;
        --text-font-size: 1rem;
        --text-line-height: calc(var(--text-font-size) * 1.2);
        --caption-font-size: 0.9rem;
        --caption-line-height: calc(var(--caption-font-size) * 1.2);
        --footnote-font-size: 0.8rem;
        --footnote-line-height: calc(var(--footnote-font-size) * 1.2);
        --h1-font-size: 1.6rem;
        --h1-line-height: calc(var(--h1-font-size) * 1.2);
        --h2-font-size: 1.4rem;
        --h2-line-height: calc(var(--h2-font-size) * 1.2);
        --h3-font-size: 1.2rem;
        --h3-line-height: calc(var(--h3-font-size) * 1.2);

        // Dimensions

        --icon-size: 2.5rem;

        // Colors

        --eerie-black: #212121;
        --emerald: #72C080;
        --granny-smith-apple: #A3F3B0;
        --middle-green: #428F53;

    }

    // Media queries

    $tablet-media-query: 48rem;
    $desktop-media-query: 62rem;

    @media screen and (min-width: $tablet-media-query) {

        :root {

        }
    }

    // ----------------------------------------------------------------------------
    // GENERALITIES
    // ----------------------------------------------------------------------------

    // Fonts and colors

    body {
        font-family: var(--text-font-family);
        font-size: var(--text-font-size);
        line-height: var(--text-line-height);
        color: white;
        background-color: var(--eerie-black);
    }

    h1 {
        font-family: var(--title-font-family);
        font-size: var(--h1-font-size);
        line-height: var(--h1-line-height);
    }

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

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

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

    em {
        font-style: italic;
    }

    // Link style

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

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

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

</style>
