mobile version adjestments

app.vue

@@ -1,16 +1,37 @@
 <template>
   <div class="content-wrapper">
-    <ContentRenderer :value="doc" /> <!-- Render the markdown content -->
+    <ContentRenderer :value="doc" />
+  
+  </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
+// Charger le fichier Markdown
 const { data: doc } = await useAsyncData('markdownDoc', () =>
   queryContent('markdown').findOne()
 )
 </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,5 +1,9 @@
 .content-wrapper {
   background-color:#F5F5F5;
+  display: flex;
+gap: 20px;
+align-items: flex-start;
+ 
  
 }
 .content-wrapper h1 {
@@ -24,19 +28,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 +48,39 @@
   font-size: 0.98em;
   color:#8B5E3C;
 }
+/* assets/main.css */
 video {
-  border: 2px solid #474405;
+border: 2px solid #474405;
-  border-radius: 8px;
+border-radius: 8px;
-  max-width: 100%;  /* Responsive width */
+max-width: 100%;  /* Responsive width */
-  display: block;   /* Center the video */
+display: block;   /* Center the video */
-  margin: 20px auto;}
+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 */
+}
+}
+
+
+
+
+
+
+
+
+