<template>
  <img id="banner-media" src="/images/header-banalites.jpg"/>
  <header>
     <CPMMenu :items="contents.sections"/>
  </header>

  <main>
    <section v-for="section in contents.sections.filter((s) => s.content)" v-html="section.content">
    </section>
  </main>

</template>


<script setup>

    const {data : contents } = await useFetch('/api/contents');

</script>


<style lang="scss">

  * {
    margin : 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

  #banner-media {
    width: 100vw;
  }

  main {
    width : 80vw;
    margin: auto;

    section {
      margin-top: 50px;
      font-size: 1.2rem;
      line-height: 175%;

      h1 {
        font-size : 1.5rem;
      }

      h2 {
        font-size : 1.3rem;
      }

      ul {
        margin-left: 50px;
        margin-top: 25px;
        list-style-type: square;
      }

      sup { vertical-align: top; position: relative; top: -0.5em; }

      figure {
        margin-bottom : 25px;
        img {
          width : 100%;
        }
        figcaption {
          text-align: center;
          color: white;
          background-color: black;
        }
      }
    }
  }
</style>
