des changements pour la version mobile avec un seul markdown

app.vue

@@ -1,35 +1,3 @@
 <template>
-  <div class="content-wrapper">
+  <NuxtPage />
-    <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" />
-      Your browser does not support the video tag.
-    </video>
 </template>
-
-<script setup>
-// 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_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>

assets/main.css

@@ -1,51 +1,62 @@
-.background{
+.right, 
-  background-color:#F5F5F5;}
+ .left
-.content-wrapper {
+ {
-  display: flex;
+  width: 50%;
-  gap: 20px;
-  align-items: flex-start;  
 }
-.content-wrapper h1 {
+.left 
+  {
+  float: left;
+  box-sizing: border-box;
+  padding-right: 1rem;
+  clear: both;
+}
+.right 
+{
+  float: right;
+  clear: right;
+  margin-bottom: 1rem;
+}
+.center
+ {   clear: both; /* Clears the floating of the above columns */
+  width: 100%; /* Ensures it spans the full width */
+  text-align: center; /* Centers the content inside the div */
+  margin-top: 1rem; /* Optional: Adds some space above the center div */
+}
+@media print, screen and (max-width: 580px) {
+.left,.right {
+  width: 100%;
+  float: none;
+  clear: none;
+  }
+}
+
+h2 a {
+  font-size: 0.8em; 
+  color: #474405;
+  text-decoration: none; /* Retire le lien visuel */
+  pointer-events: none;  /* Désactive l'interaction du lien */
+}
+
+
+h4 a {
+  color: #8B5E3C;
+  text-decoration: none; /* Retire le lien visuel */
+  pointer-events: none;  /* Désactive l'interaction du lien */
+}
+
+h1 {
   text-align: center;
   color: #6A994E;
   font-size: 2.5em;
   margin: 20px 0;
   text-transform: uppercase;}
-.content-wrapper h2 {
+p{
-  font-size: 1em;  
-      }
-.content-wrapper h2 a {
-  text-decoration: none; /* Supprime le soulignement */
-  cursor: default; 
-                } 
-.content-wrapper h2 span {
-  color: #474405;
-            }   
-.content-wrapper h4 {
-  text-align: center; /* Centre horizontalement le texte dans <h4> */
-    }
-.content-wrapper h4 a {
-  text-decoration: none; /* Supprime le soulignement */
-  color: #8B5E3C; 
-  cursor: default;
-     
-  }
-
-.content-wrapper h5 {
-  color: #8B5E3C; /* Vert pour souligner les sous-sections */
-  font-size: 1em;
-  margin-top: 20px;
-  margin: 10px 10px;
-}
-.content-wrapper p{
   font-weight: normal;
   margin: 10px 10px ;
   text-align: justify;
   font-size: 0.98em;
   color:#8B5E3C;
 }
-/* assets/main.css */
-
 video {
   border: 2px solid #474405;
   border-radius: 8px;
@@ -53,20 +64,5 @@ max-width: 100%;  /* Responsive width */
   display: block;   /* Center the video */
   margin: 20px auto;
   }
-/* assets/main.css */
+.background{
-
+  background-color:#F5F5F5;}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="background">
+  <main>
+    <ContentDoc />
+  </main>
+  <video controls width="640">
+      <source src="/videos/video.mp4" type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  </div>
+</template>