des changements pour la version mobile

app.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content-wrapper">
-    <ContentRenderer :value="doc" />
+    <ContentRenderer :value="doc" v-if="!isMobile" /> <!-- Render the markdown content for laptop -->
-  
+    <ContentRenderer :value="mobileDoc" v-if="isMobile" /> <!-- Render the markdown content for mobile -->
   </div>
   <video controls width="640">
       <source src="/videos/video.mp4" type="video/mp4" />
@@ -10,28 +10,26 @@
 </template>
 
 <script setup>
-// Charger le fichier Markdown
+// Import Vue's reactive and ref from 'vue'
+import { ref, onMounted } from 'vue'
+
+// Determine if the device is mobile
+const isMobile = ref(false)
+
+// Fetch the markdown content files asynchronously
 const { data: doc } = await useAsyncData('markdownDoc', () =>
-  queryContent('markdown').findOne()
+  queryContent('markdown_laptop').findOne()
 )
+const { data: mobileDoc } = await useAsyncData('mobileMarkdownDoc', () =>
+  queryContent('markdown_mobile').findOne()
+)
+
+// Add event listener to update isMobile based on window resize when the component is mounted
+onMounted(() => {
+  isMobile.value = window.innerWidth <= 768
+
+  window.addEventListener('resize', () => {
+    isMobile.value = window.innerWidth <= 768
+  })
+})
 </script>
-<style scoped>
-.content-wrapper {
-  column-count: 2;  /* Divise le contenu en 2 colonnes */
-  column-gap: 20px; /* Espacement entre les colonnes */
-}
-
-/* Ajuster les titres pour occuper toute la largeur */
-.content-wrapper h1, 
-.content-wrapper h2 {
-  break-inside: avoid; /* Évite les coupures de titres entre colonnes */
-  width: 100%;         /* Étend les titres sur toute la largeur */
-  margin-top: 10px;
-}
-
-/* Ajuste les paragraphes pour éviter les coupures */
-.content-wrapper p {
-  break-inside: avoid; /* Évite les coupures dans les paragraphes */
-  margin: 0 0 10px 0;  /* Ajoute un espacement entre les paragraphes */
-}
-</style>

assets/main.css

@@ -1,10 +1,9 @@
+.background{
+  background-color:#F5F5F5;}
 .content-wrapper {
-  background-color:#F5F5F5;
   display: flex;
   gap: 20px;
   align-items: flex-start;  
- 
- 
 }
 .content-wrapper h1 {
   text-align: center;
@@ -14,13 +13,10 @@ align-items: flex-start;
   text-transform: uppercase;}
 .content-wrapper h2 {
   font-size: 1em;  
-     
       }
 .content-wrapper h2 a {
   text-decoration: none; /* Supprime le soulignement */
-        
   cursor: default; 
-                   
                 } 
 .content-wrapper h2 span {
   color: #474405;
@@ -49,6 +45,7 @@ align-items: flex-start;
   color:#8B5E3C;
 }
 /* assets/main.css */
+
 video {
 border: 2px solid #474405;
 border-radius: 8px;
@@ -59,19 +56,7 @@ margin: 20px auto;
 /* assets/main.css */
 
 
-/* Assure l'affichage en deux colonnes sur grand écran */
+
-.content {
-display: grid;
-grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
-gap: 20px;
-}
-
-/* Sur mobile : affichage en une seule colonne */
-@media (max-width: 768px) {
-.content {
-  grid-template-columns: 1fr; /* Une seule colonne */
-}
-}
 
 
 

content/markdown_laptop.md

@@ -1,3 +1,4 @@
+
 <h1>DÉCLARATION DES DROITS DE L'ÂME ET DU VIVANT</h1>
 
 <h5>Nous, Humains, Libres et avant tout Vivant, meneurs de notre propre représentativité considérant que le gouvernement "contrôle mental" ou le mépris des droits de l'Âme et du Vivant sont les causes majeurs des malheurs et de la corruption terrestre, constituons et ratifions solennellement les droits naturels, inaliénables et sacrés de l'Âme et du Vivant (DAV), afin que cette déclaration portée à la connaissance de toutes et chacun, rappelle les droits et les devoirs ; afin que les choix législatif et les actes qui en découlent déployés et appliqués par des superviseurs temporaires, élus selon le code d'éthique et de déontologie des Libres soient respectés ; afin que les textes de lois écrits et ratifiés par les Vivants, fondées sur les droits naturels inaliénables et imprescriptibles garantissent le maintien de la constitution des Vivants et assurent le bien-être de toute forme de vie du micro et du macrocosme.</h5>