RNM/DAV
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile version adjestments

Browse Source
This commit is contained in:
hatemhellal
2024-12-05 19:08:52 +01:00
parent 3b32a5314e
commit 6820913df4
2 changed files with 100 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app.vue
View File

@@ -1,16 +1,37 @@
<template> <template>
<div class="content-wrapper"> <div class="content-wrapper">
<ContentRenderer :value="doc" /> <!-- Render the markdown content --> <ContentRenderer :value="doc" />
<video controls width="640">
</div>
<video controls width="640">
<source src="/videos/video.mp4" type="video/mp4" /> <source src="/videos/video.mp4" type="video/mp4" />
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
</div>
</template> </template>
<script setup> <script setup>
// Fetch the 'markdown.md' content file asynchronously // Charger le fichier Markdown
const { data: doc } = await useAsyncData('markdownDoc', () => const { data: doc } = await useAsyncData('markdownDoc', () =>
queryContent('markdown').findOne() queryContent('markdown').findOne()
) )
</script> </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>

111
assets/main.css
View File

@@ -1,55 +1,86 @@
.content-wrapper { .content-wrapper {
background-color:#F5F5F5; background-color:#F5F5F5;
display: flex;
gap: 20px;
align-items: flex-start;
} }
.content-wrapper h1 { .content-wrapper h1 {
text-align: center; text-align: center;
color: #6A994E; color: #6A994E;
font-size: 2.5em; font-size: 2.5em;
margin: 20px 0; margin: 20px 0;
text-transform: uppercase;} text-transform: uppercase;}
.content-wrapper h2 { .content-wrapper h2 {
font-size: 1em; 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 { .content-wrapper h2 a {
text-decoration: none; /* Supprime le soulignement */ text-decoration: none; /* Supprime le soulignement */
color: #8B5E3C;
cursor: default;
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; .content-wrapper h5 {
margin: 10px 10px ; color: #8B5E3C; /* Vert pour souligner les sous-sections */
text-align: justify; font-size: 1em;
font-size: 0.98em; margin-top: 20px;
color:#8B5E3C; 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 { 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 */
}
}