gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update a lot of change since a while

Browse Source
This commit is contained in:
Julie
2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/components/section/PageSectionInner.vue Normal file
View File

@@ -0,0 +1,99 @@
<!-- Pour gérer tous les types de main dans les différents templates de page
Des templates peuvent avoir toutes la même marge de page et d'autres, par ex, être full page -->
<template>
<div class="page-section--inner" :class="[`page-section--inner--${size}`,`page-section--inner--padb--${padb}`,`page-section--inner--padt--${padt}`]">
<slot />
</div>
</template>
<script setup>
defineProps({
size: { type: String, default: 'default' }, // default / wide / narrow
padb : { type: String, default: '' },
padt : { type: String, default: '' }
})
</script>
<style lang="scss">
.page-section--inner {
// ne dépasse jamais l’écran
width: 100%;
// centre le bloc horizontalement, crée des marges externes fluides, fonctionne dans toutes les largeurs d’écran
margin-inline: auto;
// respiration sur les côtés avec marges minimale ( surtout utile pour mobiles)
// limite de largeur quand on veut une largeur plus petit (pour les articles par exemple)
&--narrow {
max-width: var(--container-narrow);
}
// limite de largeur (par défaut)
&--default {
/* mobile / small screens */
@media (max-width: 700px) {
padding-inline: var(--page-padding-mobile);
}
@media (min-width: 0px) {
max-width: 100%;
}
@media (min-width: 600px) {
max-width: 580px;
}
@media (min-width: 700px) {
max-width: 660px;
}
@media (min-width: 800px) {
max-width: 780px;
}
@media (min-width: 900px) {
max-width: 860px;
}
@media (min-width: 1000px) {
max-width: 950px;
}
@media (min-width: 1100px) {
max-width: 1020px;
}
@media (min-width: 1200px) {
max-width: 1100px;
}
@media (min-width: 1300px) {
max-width: 1200px;
}
@media (min-width: 1400px) {
max-width: 1300px;
}
@media (min-width: 1500px) {
max-width: 1400px;
}
}
// limite de largeur un peu plus grande que par défaut
&--wide {
max-width: var(--container-wide);
}
// Padding
&--padt--xs {
padding-top: 30px;
}
&--padt--sm {
padding-top: 45px;
}
&--padb--xs {
padding-bottom: 17px;
}
&--padb--sm {
padding-bottom: 30px;
}
}
</style>