You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

App.vue 1.2 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <img id="banner-media" src="/images/header-banalites.jpg"/>
  3. <header>
  4. <CPMMenu :items="contents.sections"/>
  5. </header>
  6. <main>
  7. <section v-for="section in contents.sections.filter((s) => s.content)" v-html="section.content">
  8. </section>
  9. </main>
  10. </template>
  11. <script setup>
  12. const {data : contents } = await useFetch('/api/contents');
  13. </script>
  14. <style lang="scss">
  15. * {
  16. margin : 0;
  17. padding: 0;
  18. font-family: Verdana, Geneva, Tahoma, sans-serif;
  19. }
  20. #banner-media {
  21. width: 100vw;
  22. }
  23. main {
  24. width : 80vw;
  25. margin: auto;
  26. section {
  27. margin-top: 50px;
  28. font-size: 1.2rem;
  29. line-height: 175%;
  30. h1 {
  31. font-size : 1.5rem;
  32. }
  33. h2 {
  34. font-size : 1.3rem;
  35. }
  36. ul {
  37. margin-left: 50px;
  38. margin-top: 25px;
  39. list-style-type: square;
  40. }
  41. sup { vertical-align: top; position: relative; top: -0.5em; }
  42. figure {
  43. margin-bottom : 25px;
  44. img {
  45. width : 100%;
  46. }
  47. figcaption {
  48. text-align: center;
  49. color: white;
  50. background-color: black;
  51. }
  52. }
  53. }
  54. }
  55. </style>