Merge branch 'main' of https://git.open.us.org/RNM/DAV

app.vue

@@ -1,16 +1,35 @@
 <template>
   <div class="content-wrapper">
-    <ContentRenderer :value="doc" /> <!-- Render the markdown content -->
+    <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>
-  </div>
 </template>
 
 <script setup>
-// Fetch the 'markdown.md' content file asynchronously
+// 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>

assets/main.css

@@ -1,6 +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;
@@ -8,15 +11,12 @@
   font-size: 2.5em;
   margin: 20px 0;
   text-transform: uppercase;}
-    .content-wrapper h2 {
+.content-wrapper h2 {
   font-size: 1em;  
-       
       }
 .content-wrapper h2 a {
   text-decoration: none; /* Supprime le soulignement */
-          
   cursor: default; 
-                     
                 } 
 .content-wrapper h2 span {
   color: #474405;
@@ -24,19 +24,19 @@
 .content-wrapper h4 {
   text-align: center; /* Centre horizontalement le texte dans <h4> */
     }
- .content-wrapper h4 a {
+.content-wrapper h4 a {
   text-decoration: none; /* Supprime le soulignement */
   color: #8B5E3C; 
   cursor: default;
      
   }
 
-  .content-wrapper h5 {
+.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 ;
@@ -44,12 +44,28 @@
   font-size: 0.98em;
   color:#8B5E3C;
 }
+/* assets/main.css */
+
 video {
-  border: 2px solid #474405;
-  border-radius: 8px;
-  max-width: 100%;  /* Responsive width */
-  display: block;   /* Center the video */
-  margin: 20px auto;}
+border: 2px solid #474405;
+border-radius: 8px;
+max-width: 100%;  /* Responsive width */
+display: block;   /* Center the video */
+margin: 20px auto;
+}
+/* assets/main.css */
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

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>