File "layout.css"
Full path: /home/argothem/www/organecyberpresse/prive/themes/spip/layout.css
File size: 9.53 KB
MIME-type: text/plain
Charset: utf-8
/**
* ======
* Layout
* ======
*
* Organisation :
*
* 1. Layout général de la page
* 1.1. Disposition par défaut
* 1.x. Autres dispositions : pleine largeur, etc.
* 2. Utilitaires
* 3. Grenier / à ranger
*
* Breakpoints : 780px / 960px / 1200px
*
* Markup :
*
* body
* #bando_haut
* #bando_xxx (x4)
* .largeur
* #page
* .largeur
* #haut
* #conteneur[.<disposition>]
* #navigation
* #extra
* #contenu
* #pied
* .largeur
*/
/**
* ============
* 0. Variables
* ============
*/
:root {
/* Gouttière horizontale */
--spip-layout-gap: 10px; /* clamp(10px, 2vw, 25px); */
/* Largeur max de la page, */
--spip-layout-page-width: 1480px;
/* Largeur des colonnes */
--spip-layout-column-width: 25%;
/* Largeur limitée afin que les textes fassent environ 70 caractères max par ligne */
--spip-layout-text-width: 75ch;
/* Largeur limitée de certains formulaires */
--spip-layout-form-width: 50em;
/* Largeur réellement disponible, en tenant compte des gouttières */
--spip-vw: calc(var(--spip-layout-page-width) - (var(--spip-layout-gap) * 2));
}
@media (min-width: 720px) {
:root {
--spip-layout-gap: 20px;
}
}
@media (min-width: 1200px) {
:root {
--spip-layout-gap: 25px;
--spip-layout-column-width: 20%; /* 3 colonnes donc plus petit */
}
}
/**
* ============================
* 1. Layout général de la page
* ============================
*/
html, body {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
}
.largeur {
box-sizing: border-box;
width: 100%;
max-width: var(--spip-layout-page-width);
margin-inline: auto;
padding-inline: var(--spip-layout-gap);
}
#haut {
margin-block-start: var(--spip-spacing-y);
}
/* Coller le footer en bas */
body {
display: flex;
flex-flow: column;
}
#page {
overflow: initial !important; /* Sinon aucun élément en position sticky ne fonctionne */
flex-grow: 1;
display: flex;
flex-flow: column;
justify-content: flex-start;
}
#page>:last-child {
margin-top: auto;
}
/**
* 1.1. Contenu central : disposition par défaut
* =============================================
*/
/**
* Mobiles : 1 seule colonne
*/
#conteneur {
display: flex;
flex-flow: column;
}
#contenu {
order: 2;
overflow-x: scroll; /* Tableaux qui dépassent : ne pas faire scroller toute la page */
min-width: 0; /* Fix grid avec tableaux qui dépassent */
}
#navigation {
order: 1;
overflow-wrap: break-word;
}
#extra {
order: 3;
overflow-wrap: break-word;
}
/* Safeguard pour placer des éléments en sticky dans les 3 blocs principaux : .ajaxbloc doit prendre toute la hauteur du parent */
#contenu > .ajaxbloc:only-child,
#navigation > .ajaxbloc:only-child,
#extra > .ajaxbloc:only-child {
height: 100%;
}
/**
* Écrans moyens : 2 colonnes
*/
@media (min-width: 720px) {
#conteneur {
display: grid;
column-gap: var(--spip-layout-gap); /* pas de gap sur les rows pour l'instant, car les éléments à l'intérieur ont déjà des marges basses en général */
grid-template-rows: auto 1fr;
grid-template-columns:
var(--spip-layout-column-width) /* navigation & extra */
1fr; /* contenu */
grid-template-areas:
"navigation contenu"
"extra contenu";
}
#contenu {
grid-area: contenu;
overflow-x: initial;
}
#navigation {
grid-area: navigation;
}
#extra {
grid-area: extra;
}
}
/**
* Écrans larges : 3 colonnes
*/
@media (min-width: 1200px) {
#conteneur {
grid-template-columns:
var(--spip-layout-column-width) /* navigation */
1fr /* contenu */
var(--spip-layout-column-width); /* extra */
grid-template-areas:
"navigation contenu extra"
"navigation contenu extra";
}
}
/**
* 1.2. Disposition : pleine-largeur
* ===================================
* Pas de contenus complémentaires #nav ni #extra
* Nb : pleine_largeur conservé un temps pour rétro-compat
*/
#conteneur:is(.layout-full-width, .layout-pleine-largeur, .layout-pleine_largeur) {
grid-template-areas: "contenu";
grid-template-columns: 1fr;
}
#conteneur:is(.layout-full-width, .layout-pleine-largeur, .layout-pleine_largeur) #navigation,
#conteneur:is(.layout-full-width, .layout-pleine-largeur, .layout-pleine_largeur) #extra {
display: none;
}
/* Limiter la largeur de certains éléments */
#conteneur:is(.layout-full-width, .layout-pleine-largeur, .layout-pleine_largeur) .formulaire_spip {
max-width: var(--spip-layout-form-width);
margin-inline: auto;
}
/**
* 1.3. Disposition : complements-gauche
* =======================================
* Contenus complémentaires #nav et #extra à gauche
*/
@media (min-width: 1200px) {
#conteneur.layout-aside-inline-start,
#conteneur.layout-complements-gauche {
grid-template-areas:
"navigation contenu"
"extra contenu";
grid-template-columns: var(--spip-layout-column-width) 1fr;
}
}
/**
* 1.4. Disposition : complements-droite
* =======================================
* Contenus complémentaires #nav et #extra à droite
*/
@media (min-width: 1200px) {
#conteneur.layout-aside-inline-end,
#conteneur.layout-complements-droite {
grid-template-areas:
"contenu navigation"
"contenu extra";
grid-template-columns: 1fr var(--spip-layout-column-width);
}
}
/**
* 1.5. Disposition : complements-bas
* ====================================
* Contenus complémentaires #nav et #extra sous le contenu principal
*/
@media (min-width: 1200px) {
#conteneur.layout-aside-block-end,
#conteneur.layout-complements-bas {
grid-template-areas:
"contenu contenu"
"navigation extra";
grid-template-columns: 1fr 1fr;
}
}
/**
* 1.6. Disposition : complements-bas-inverse
* ============================================
* Contenus complémentaires #nav et #extra sous le contenu principal
*/
@media (min-width: 1200px) {
#conteneur.layout-aside-block-end-reverse,
#conteneur.layout-complements-bas-inverse {
grid-template-areas:
"contenu contenu"
"extra navigation";
grid-template-columns: 1fr 1fr;
}
}
/**
* 1.7. Disposition : fluide
* ===========================
* Idem disposition de base, sauf que le contenu principal prend tout l'espace disponible.
* Un peu touchy pour détecter si les blocs sont vides ou pas :
* en général ils contiennent un .ajaxbloc, mais il peut y avoir des exceptions.
* Il faut donc prendre en compte ces 2 cas à chaque fois.
*/
@media (min-width: 1200px) {
/* extra est vide */
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)),
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)) {
grid-template-areas: "navigation contenu";
grid-template-columns: var(--spip-layout-column-width) 1fr;
}
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)) #extra,
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)) #extra {
display: none;
}
/* navigation est vide */
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#navigation > *)),
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#navigation > .ajaxbloc > *)) {
grid-template-areas: "contenu extra";
grid-template-columns: 1fr var(--spip-layout-column-width);
}
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#navigation > *)) #navigation,
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#navigation > .ajaxbloc > *)) #navigation {
display: none;
}
/* extra et navigation sont vides */
/* comme en pleine largeur, limiter la largeur de certains éléments */
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)):not(:has(#navigation > *)),
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)):not(:has(#navigation > *)),
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)):not(:has(#navigation > .ajaxbloc > *)),
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)):not(:has(#navigation > .ajaxbloc > *)) {
grid-template-areas: "contenu";
grid-template-columns: 1fr;
}
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)):not(:has(#navigation > *)) .formulaire_spip,
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)):not(:has(#navigation > *)) .formulaire_spip,
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)):not(:has(#navigation > .ajaxbloc > *)) .formulaire_spip,
:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)):not(:has(#navigation > .ajaxbloc > *)) .formulaire_spip {
max-width: var(--spip-layout-form-width);
margin-inline: auto;
}
}
/**
* ==============
* 2. Utilitaires
* ==============
* Classes utilitaires applicables à n'importe quel élément
*/
.centered {
margin: 0 auto;
text-align: center; /* Vraiment nécessaire ? */
}
/**
* =====================
* 3. Grenier + à ranger
* =====================
*/
/* ??? */
.table_page {
max-width: var(--spip-layout-page-width);
/* min-width: 960px; */ /* pour > 720px */
margin-inline: auto;
margin-block-start: 1em;
clear: both;
text-align: start;
}
/* Messages alertes old school, ex. : crash de la bdd */
.wrap-messages-alertes {
padding: 5px 10px;
background-color: var(--spip-color-gray-lighter);
}
@media (min-width: 960px) {
.wrap-messages-alertes {
padding: 5px 20px;
}
}
.messages-alertes {
max-width: var(--spip-layout-page-width);
/* min-width: 960px; */ /* pour > 720px */
margin-inline: auto;
text-align: end;
clear: both;
}