Server : Apache System : Linux webd348.cluster026.gra.hosting.ovh.net 5.15.148-ovh-vps-grsec-zfs-classid #1 SMP Thu Feb 8 09:41:04 UTC 2024 x86_64 User : hednacluml ( 122243) PHP Version : 8.3.9 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl Directory : /home/hednacluml/histoire/prive/themes/spip/ |
/**
* ======
* Layout
* ======
*
* Organisation :
*
* 1. Layout général de la page
* 2. Contenus textes limités en largeur
* 3. Divers
* 4. Grenier
*
* Breakpoints : 780px / 1200px
*
* Markup :
*
* body
* |--#bando_haut
* | |--#bando_xxx (x4)
* | |--.largeur
* |--#page
* | |--.largeur
* | | |--#haut
* | | |--#chemin
* | |--#conteneur(.pleine_largeur)
* | |--#navigation
* | |--#extra
* | |--#contenu
* |--#pied
* |--.largeur
*/
/**
* ============
* 0. Variables
* ============
*/
/* Variable utilitaire pour donner la largeur disponible, tient compte des gouttières de .largeur
Utile pour les éléments positionnés en absolute par ex. */
:root {
--spip-vw: 100vw - calc(10px * 2);
}
@media (min-width: 960px) {
:root {
--spip-vw: 100vw - calc(20px * 2);
}
}
@media (min-width: 1440px) {
:root {
--spip-vw: 1440px - calc(20px * 2);
}
}
/**
* ============================
* 1. Layout général de la page
* ============================
*/
/*
* Par defaut les vieux navigateurs qui ne supportent rien : direct en 3 colonnes et basta.
* on met des min-width et des max-width
*/
.largeur,
.table_page,
.messages-alertes {
max-width: 1440px;
min-width: 960px;
}
.largeur {
margin: auto;
text-align: left;
padding: 0 10px;
}
#haut {
margin-top: 10px;
}
#page {
overflow: initial !important; /* Sinon aucun élément en position sticky ne fonctionne */
text-align: center;
}
/* Navigateurs napthaline : par defaut */
#conteneur {
text-align: center;
}
#contenu {
text-align: left;
display: inline-block;
width: 61%;
margin-left: auto;
margin-right: auto;
min-height: 50vh;
}
#navigation {
overflow-wrap: break-word;
text-align: left;
width: 18%;
float: left;
}
#extra {
overflow-wrap: break-word;
text-align: left;
width: 18%;
float: right;
}
/* Les pages qui demandent à être en pleine largeur (sans #nav ni #extra) */
.pleine_largeur #contenu {
width: 100%;
}
.pleine_largeur #navigation,
.pleine_largeur #extra {
display: none;
}
/**
* Écrans moyens : on passe en 2 colonnes.
* Fallback vieux navigateurs : direct en 3 colonnes et basta.
*/
@media (min-width: 720px) {
.largeur,
.table_page,
.messages-alertes {
min-width: 0;
}
/* Navigateurs récents */
@supports (display: grid) {
/* Les pages "normales" */
#conteneur:not(.pleine_largeur) {
text-align: left;
display: grid;
grid-column-gap: 2%;
/*grid-template-columns:
min-content
minmax(auto, calc(100% - (8em + 8vw)));*/
grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
grid-template-columns:
25% /* navigation & extra */
73%; /* contenu */
grid-template-areas:
"navigation contenu "
"extra contenu ";
justify-content: center;
}
#contenu {
grid-area: contenu;
width: initial;
margin: 0;
}
#navigation {
grid-area: navigation;
width: initial;
margin-right: 0;
}
#extra {
grid-area: extra;
width: initial;
}
}
/**
* Fix ajax + sticky
* On veut pouvoir placer des éléments en sticky dans les 3 blocs principaux.
* En principe tout leur contenu est inclus en ajax, le .ajaxbloc doit prendre toute la hauteur du parent.
* Mais attention aux exceptions de markup : le faire uniquement lorsqu'il n'y a qu'un seul .ajabloc
*/
#contenu > .ajaxbloc:only-child,
#navigation > .ajaxbloc:only-child,
#extra > .ajaxbloc:only-child {
height: 100%;
}
}
@media (min-width: 960px) {
.largeur {
padding: 0 20px;
}
@supports (display: grid) {
#conteneur:not(.pleine_largeur) {
grid-template-columns:
25% /* navigation & extra */
73%; /* contenu */
}
}
}
/**
* Sur écrans larges : 3 colonnes.
*/
@media (min-width: 1200px) {
@supports (display: grid) {
#conteneur:not(.pleine_largeur) {
grid-column-gap: 3%;
grid-template-columns:
20% /* navigation */
56% /* contenu */
18%; /* extra */
grid-template-areas:
"navigation contenu extra"
"navigation contenu extra";
}
}
}
/* petit ecrans : flex pour reordonner */
@media (max-width: 719.999px) {
.largeur,
.table_page,
.messages-alertes {
min-width: 0;
}
#page {
margin: auto;
}
#haut {
text-align: center;
margin-top: 10px;
}
#contenu {
float:none;
width: 100%;
}
#navigation {
float:none;
width: auto;
max-width: 100%;
}
#extra {
float:none;
width: auto;
max-width: 100%;
}
#pied {}
@supports (display: flex) {
#conteneur {
display: flex;
flex-direction: column;
}
#navigation {
order:1;
}
#contenu {
order:2;
}
#extra {
order:3;
}
}
}
/**
* Pages qui restent en 2 colonnes en écran large
* TODO : faire des classes génériques
*/
@media (min-width: 1200px) {
@supports (display: grid) {
.job_queue #conteneur:not(.pleine_largeur) {
grid-template-areas:
"navigation contenu"
"extra contenu";
grid-template-columns: 25% 72%;
}
}
}
/**
* =====================================
* 2. Contenus textes limités en largeur
* =====================================
* On essaie d'obtenir environ 60 charactères max par ligne.
*/
.pleine_largeur .formulaire_spip {
max-width: 60em;
margin-left: auto;
margin-right: auto;
}
/**
* =========
* 3. Divers
* =========
*/
.centered {
margin: 0 auto;
text-align: center;
}
.wrap-messages-alertes {
padding: 5px 10px;
background: #eee;
}
@media (min-width: 960px) {
.wrap-messages-alertes {
padding: 5px 20px;
}
}
div.messages-alertes {
text-align: right;
clear: both;
margin-right: auto;
margin-left: auto;
}
/**
* ==========
* 4. Grenier
* ==========
*/
.table_page {
margin: auto;
text-align: left;
clear: both;
margin-right: auto;
margin-left: auto;
margin-top: 0.5em;
}
div.table_page {
margin-top: 1em;
}