cineclub-site/front/pages/a-propos.vue

<template>
  <main>
    <section class="section">
      <h1 class="title is-2">À propos du ciné-club</h1>
      <div class="columns">
        <div class="column is-one-third">
          <img src="~/assets/img/projo.jpg" alt="projecteur 35mm" />
          <img src="~/assets/img/public.jpg" alt="public de la salle Dussane" />
        </div>
        <div class="column is-two-thirds pl-5">
          <div class="content">
            <p>Le ciné-club de l’ÉNS, c’est tout simplement :</p>
            <ul>
              <li>
                des séances ouvertes à tout le monde, que vous soyez ou non
                élève de l’école. On vous aime pareil&nbsp;!
              </li>
              <li>
                des projections en 35mm dans une belle salle : l’illustre salle
                Dussane, au 45 rue d’Ulm. La pellicule, c’est la vie. Même quand
                ça se bloque et crame un peu (on plaisante)
              </li>
              <li>
                des invité·e·s qui viennent présenter les films, des rencontres
                avec les cinéastes. Moment VIP&nbsp;!
              </li>
              <li>
                des partenariats avec des associations, des débats réguliers
                avec des disputes et de l’amour
              </li>
              <li>des films choisis avec goût (le nôtre)</li>
            </ul>
            <p>
              Alors venez nous voir, et (re)découvrez des films
              merveilleux&nbsp; !
            </p>
          </div>
          <FindUs />
        </div>
      </div>
    </section>
    <section class="section">
      <h2 class="title">Partenaires</h2>
      <ul class="is-flex is-flex-wrap-wrap is-align-items-center partners">
        <li>
          <a href="https://www.themoviedb.org">
            <img
              src="~/assets/img/logos/tmdb.svg"
              alt="logo de The Movie Database"
            />
          </a>
        </li>
        <li><a class="cof" href="https://cof.ens.fr/">COF</a></li>
        <li>
          <a href="https://www.ens.psl.eu/">
            <img
              id="partner-ens"
              src="~/assets/img/logos/ens.svg"
              alt="logo de l'École Normale Supérieure"
            />
          </a>
        </li>
        <li>
          <a href="https://www.psl.eu/">
            <img src="~/assets/img/logos/psl.png" alt="logo de PSL" />
          </a>
        </li>
        <li class="is-flex">
          <a
            href="https://www.crous-paris.fr/2022/12/22/cvec-a-vos-projets-envoyez-vos-idees-pour-la-vie-de-campus/"
          >
            <img src="~/assets/img/logos/crous.png" class="mr-4" alt="Crous de Paris" />
            <img src="~/assets/img/logos/cvec.png" alt="Financé par lA CVEC" />
          </a>
        </li>
      </ul>
      <p class="is-size-7">
        Ce site utilise l'API TMDB mais n'est ni approuvé ni certifié par TMDB
      </p>
    </section>
  </main>
</template>

<script setup lang="ts">
useHead({ title: "À propos" })
</script>

<style scoped lang="sass">
.content ul
  list-style-type: "— "

.partners
  list-style: none
  margin-top: -1.5rem

  > *
    margin-top: 1.5rem

  > :not(:first-child)
    margin-left: 3rem

  .cof
    font-size: 5rem

  img
    height: 4rem

  img#partner-ens
    max-height: 8rem
</style>