<template>
  <Header />
  <main>
    <NuxtPage />
  </main>
</template>

<script>
export default {
  setup() {
    const global = ref([]);
    
    const { data, error } = useFetch('/api/items/global', {
      server: true,
      onResponse({ request, response, options }) {
        global.value = response._data.data;
      },
    });
    
    provide('globalData', global);

    useSeoMeta({
      ogImage: '/card.jpg',
      ogImageAlt: global.value.contact_image_titre,
      twitterImage: '/card.jpg',
    });

    useHead({
      htmlAttrs: {
        lang: 'fr'
      },
      link: [
        {
          rel: 'icon',
          type: 'image/png',
          href: 'favicon.png'
        }
      ]
    });
  }
}
</script>

<style lang="scss">
  @font-face {
      font-family: 'Latitude';
      src: url('assets/fonts/latitude-webfont.woff2') format('woff2'),
           url('assets/fonts/latitude-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }

  * {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Latitude', serif;
    font-size: 1.1rem;
    font-weight: normal;
    text-decoration: none;
    color: #0e312f;
  }

  body {
    padding: 1rem;
    header {
      z-index: 1;
    }
    main {
      z-index: 0;
    }
  }

  .page-enter-active,
  .page-leave-active {
    transition: all 0.2s;
  }
  .page-enter-from,
  .page-leave-to {
    opacity: 0;
  }
</style>