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>