nettoyage css + avance design + menus

body.html

@@ -10,8 +10,8 @@
 		<div class="page--container">
 			<INCLURE{fond=header/#ENV{type-page},env} />
 			<INCLURE{fond=inclure/nav-secteurs,env} />
-			<INCLURE{fond=inclure/boussole} />
 		</div>
+		<INCLURE{fond=inclure/boussole} />
 	</header>
 	
 	<div class="page__content page--container">
@@ -21,14 +21,21 @@
 				<INCLURE{fond=extra/#ENV{type-page},env} />
 			</aside>
 		</main><!--.main-->
-		
+		[(#COMPOSITION|=={dossier}|et{#ENV{type-page}|=={article}}|non)
 		<aside class="contentAside">
 			<INCLURE{fond=aside/#ENV{type-page},env} />
-		</aside><!--.aside-->
+		</aside><!--.aside-->]
 	</div>
 	
 	<footer class="page__footer">
 		<div class="page--container">
+			<div class="menus_footer">
+				#INCLURE{fond=inclure/menu, env, identifiant=pied1}
+				#INCLURE{fond=inclure/menu, env, identifiant=pied2}
+				#INCLURE{fond=inclure/menu, env, identifiant=pied3}
+				#INCLURE{fond=inclure/menu, env, identifiant=pied4}
+				#INCLURE{fond=inclure/menu, env, identifiant=pied5}
+			</div>
 			<INCLURE{fond=footer/#ENV{type-page},env} />
 		</div>
 	</footer>

content/rubrique-dossier.html

@@ -0,0 +1,3 @@
+<BOUCLE_content(RUBRIQUES){id_rubrique}>
+<INCLURE{fond=content/rubrique,id_rubrique,type-page=rubrique} />
+</BOUCLE_content>

content/rubrique-dossier.xml

@@ -0,0 +1,6 @@
+<composition>
+	<nom>Rubrique Dossier</nom>
+	<description>Pour les gros dossiers de l'APRIL</description>
+	<icon>images/rubrique-dossier.png</icon>
+	<branche type="article" composition="dossier" />
+</composition>

inclure/boussole.html

@@ -1,5 +1,7 @@
 <div class="header__boussole">
 	<div class="page--container">
-		inclure un menu
+		<nav class="nav">
+			<a href="#">inclure un menu</a>
+		</nav>
 	</div>
 </div>

inclure/nav-secteurs.html

@@ -1,7 +1,6 @@
 <B_nav>
 <nav class="nav" aria-label="Menu principal">
 	<ul class="nav-list">
-		 <li class="nav-item[ (#SI_PAGE{sommaire})on]"><a href="#URL_SITE_SPIP/"><:zcore:accueil:></a></li>
 		 <BOUCLE_nav(RUBRIQUES) {racine} {par num titre, titre}>
 		 <li class="nav-item[ (#EXPOSE)][ (#COMPTEUR_BOUCLE|=={1}|oui)first][ (#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|oui)last]"><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>#TITRE</a></li>
 		 </BOUCLE_nav>

paquet.xml

@@ -1,7 +1,7 @@
 <paquet
 	prefix="baz_april"
 	categorie="squelette"
-	version="0.1.0"
+	version="0.1.1"
 	schema="0.0.1"
 	etat="dev"
 	compatibilite="[3.2.7;3.3.*]"
@@ -33,6 +33,7 @@
 	<necessite nom="feuillederoute" compatibilite="[1.2.0;[" />
 	<necessite nom="tri_par_rubrique" compatibilite="[1.4.2;[" />
 	<necessite nom="basicone" compatibilite="[0.1.3;[" />
+	<necessite nom="menus" compatibilite="[1.7.25;[" />
 	
 	<utilise nom="compositions" compatibilite="[3.5.9;[" />
 	<utilise nom="photoswipe" compatibilite="[0.3.4;[" />

readme.md

@@ -1,27 +1,43 @@
+Base de squelettes pour les sites de l'APRIL
 
-
+Nécessite :
 
 git clone https://git.spip.net/spip-contrib-extensions/z-core.git
+
 git clone https://git.spip.net/spip-contrib-extensions/facteur.git
+
 git clone https://git.spip.net/spip-contrib-extensions/saisies.git
+
 git clone https://git.spip.net/spip-contrib-extensions/nospam.git
+
 git clone https://git.spip.net/spip-contrib-extensions/scssphp.git
+
 git clone https://git.spip.net/spip-contrib-extensions/noizetier.git
+
 git clone https://git.spip.net/spip-contrib-extensions/n-core.git
+
 git clone https://git.spip.net/spip-contrib-extensions/cache.git
+
 git clone https://git.spip.net/spip-contrib-extensions/crayons.git
+
 git clone https://git.spip.net/spip-contrib-extensions/porte_plume_partout.git
+
 git clone https://git.spip.net/spip-contrib-extensions/basicone.git
+
 git clone https://git.spip.net/spip-contrib-extensions/mailcrypt.git
+
 git clone https://git.spip.net/spip-contrib-extensions/feuillederoute.git
+
 git clone https://git.spip.net/spip-contrib-extensions/compositions.git
+
 git clone https://git.spip.net/spip-contrib-extensions/pages.git
+
 git clone https://git.spip.net/spip-contrib-extensions/bellespuces.git
 
 git clone https://github.com/mistergraphx/porte_plume_intertitres.git
+
 git clone https://github.com/nd-/tri_par_rubrique.git
 
-
-
-
 git clone https://git.spip.net/spip-contrib-extensions/role_documents.git
+
+git clone https://git.spip.net/spip-contrib-extensions/menus.git

scss/_baz-compositions.scss

@@ -5,7 +5,7 @@
 		&.annees { font-size:0.8em; line-height:1.8; font-style:italic; color:$grayLight; clear:left;
 			&:after {  font-size:0.85em; font-style:normal; }
 		}
-		&.archive { cursor:pointer; color:$linkColor; }
+		&.archive { cursor:pointer; color:$couleurLien; }
 		&.mois_archives { width:0; overflow:hidden; margin:0; height:0;
 			&.ouvert { width:auto; height:auto; overflow:visible; display:inline; }
 		}

scss/_baz-layout.scss

@@ -5,15 +5,15 @@ html, body {
 	margin:     0;
 	padding:    0;
 	height:     100%;
-	background: $backgroundColor;
+	background: $couleurBackground;
 }
 
 .page--container {
 	margin:  0 auto;
 	padding: 0 1em;
 	width:   100%;
-	@include media($bp-largeplus-up) {
+	@include media($bp-large-up) {
-		width:   $screen-largeplus;
+		width:   $screen-large;
 		padding: 0;
 	}
 }
@@ -45,12 +45,17 @@ html, body {
 	.contentMain {
 		// deux tiers
 		width:        60%;
-		margin-right: $spacer;
+		margin-right: $spacer*2;
+		.composition_dossier & {
+			width:100%;
+			margin:0;
+		}
 	}
 
 	.contentAside {
 		// un tiers
 		width:       40%;
-		margin-left: $spacer;
+		margin-left: $spacer*2;
 	}
 }
+

scss/_baz-modeles.scss

@@ -1,8 +1,8 @@
 /* habillage des modeles */
 /* <icone> */
 .iconemodele {
-	color: $colorPrincipale; font-family:'Fontawesome',sans-serif;
+	color: $couleurPrincipale; font-family:'Fontawesome',sans-serif;
-	a & { background-color:$backgroundColor; }
+	a & { background-color:$couleurBackground; }
 }
 .iconemodele.bloc {
 	&.largeur { width: (50% - 3em); max-width:100%; }
@@ -23,7 +23,7 @@
 	&:after { display:block; clear:both; content:''; }
 	.icon { font-size:60px; float:left; margin-right:($spacer/2);
 		&:before {
-			color: $colorPrincipale;
+			color: $couleurPrincipale;
 			position: relative;
 			top: 0.1em;
 		}

scss/_baz-nav.scss

@@ -3,48 +3,102 @@
 // ------------------------------------------ 
 
 // Habillage general des menus de nav 
-.menu { clear: both; margin-bottom: 1.5em; text-align: left; 
+.menu { 
+	clear: both; 
+	margin-bottom: 1.5em; 
+	text-align: left; 
 	p {}
-	ul { margin-bottom: 1.5em; }
+	ul { 
+		margin-bottom: 1.5em;
+	}
 	ul li {}
-	ul li ul { margin-left: 1.5em; list-style: circle; }
+	ul li ul { 
+		margin-left: 1.5em; 
+		list-style: circle;
+	}
 }
 
 .nav { 
-	ul { margin:0; padding:0; }
+	ul {
-	li {display:inline;line-height:1.2;}
+		margin:0; 
-	a, a:visited { display: inline-block; padding:0.5em; margin:0 0 0.4em; text-decoration: none; line-height:1.4; border:0;
+		padding:0;
+	}
+	li {
+		display:inline;
+		line-height:1.2;
+	}
+	a, a:visited {
+		display: inline-block; 
+		padding:0.3em 0 0.2em; 
+		margin:0 0.5em 0.4em; 
+		text-decoration: none; 
+		line-height:1.4; 
+		border-bottom:3px solid white;
+		.header__boussole & {
+			font-size:0.8rem;
+			font-weight:400;
+			padding:0.6em 1em;
+			margin:0;
+			color:white;
+			border:0;
+		}
 		.on &,
 		&.on,
 		&:focus,
 		&:hover,
-		&:active { background:$colorPrincipale; color:$white; }
+		&:active { 
+			border-color:$couleurSecondaire;
+			.header__boussole & {
+				background:$couleurSecondaire;
+			}
+		}
 	}
 	
 	.pagination { margin:0 0 1rem; }
 }
 
 /* header = nav-principale */
-.page__header {
+.page__header > .page--container {
-	.nav { font-size:0.9rem;
+	 .nav {
-		> ul { text-align:right; }
+		font-size:0.9rem;
-		a { font-weight:700; }
+		> ul { 
+			text-align:right;
+		}
+		a { 
+			font-weight:700;
+		}
 	}
 }
 
 // aside
 // ------------------------------------ 
 .contentAside {
-	.nav { padding:0;
+	.nav { 
-		li {display:block; }
+		padding:0;
-		a { width:100%; }
+		li {
-		& .blog {
+			display:block;
-			a { line-height:1; padding:1em; font-weight:700;
-				p { font-weight:400; margin:0; 
-					&.date { font-size:90%; margin:0 0 0.3em; }
-					&.introduction { font-size:0.8em; margin-top:0.5em; }
 		}
-/* 				&:hover, &:focus, &:active, &.on { background:darken($grayLighter,10); color:$colorPrincipaleDowner; } */
+		a { 
+			width:100%;
+		}
+		& .blog {
+			a { 
+				line-height:1; 
+				padding:1em; 
+				font-weight:700;
+				p { 
+					font-weight:400; 
+					margin:0; 
+					&.date { 
+						font-size:90%; 
+						margin:0 0 0.3em;
+					}
+					&.introduction { 
+						font-size:0.8em;
+						margin-top:0.5em;
+					}
+				}
+/* 				&:hover, &:focus, &:active, &.on { background:darken($grayLighter,10); color:$couleurPrincipaleDowner; } */
 			}
 		}
 	}
@@ -57,6 +111,6 @@
 	top:0; 
 	left:0; 
 	right:0;
-	background-color:$gray;
+	background-color:$couleurPrincipale;
 	color:white;
 }

scss/_baz-theme.scss

@@ -2,8 +2,8 @@
 //   theme-baz.scss
 //   2020 - collectif APRIL
 
-
+// Elements principaux
-
+// ------------------------------------------ 
 
 
 .page__header {
@@ -18,7 +18,7 @@
 
 .page__footer { 
 	color:white;
-	background-color:$gray;
+	background-color:$couleurPrincipale;
 	p {
 		font-size:0.9rem;
 	}
@@ -31,25 +31,40 @@
 
 
 
+.page_article.composition_dossier {
+	.contentMain {
+		background-color:$couleurBackgroundTexte;
+	}
+}
 
 
 
-// Elements principaux
-// ------------------------------------------ 
-
 // Hyperliens
 // ---------------------------------------------- 
-a { text-decoration:none; border-bottom:1px dotted; } 
+a { 
-a, a:visited { color: $textColor; }
+	text-decoration:none; border-bottom:1px dotted;
+} 
+a, a:visited { 
+	color: $couleurLien;
+}
 a:focus, 
 a:hover, 
-a:active, a.on { background-color:$colorPrincipale; color:white; }
+a:active, a.on { 
-a:not([href]) { cursor:text; }
+	border-color:$couleurSecondaire; 
+}
+a:not([href]) {
+	cursor:text;
+}
 // plugin liens sociaux, pas pareil que les autres liens externes
-.sociaux a.external:after { display:none; }
+.sociaux a.external:after {
+	display:none; 
+}
 
 
-.accesrapide { margin:0; padding:0; }
+.accesrapide { 
+	margin:0; 
+	padding:0; 
+}
 
 
 
@@ -60,67 +75,148 @@ a:not([href]) { cursor:text; }
 // ------------------------------------------ 
 
 // fil d'ariane 
-.arbo { clear: none; font-size: .7em; }
+.arbo { 
-.arbo * { font-weight: normal; }
+	clear: none; 
-.arbo, .arbo a,
+	font-size: .7em; 
-.arbo a:visited { color: lighten($textColor, 30%); }
-.arbo a:hover { background: $gray; color: white; }  
 	
-.cartouche { margin-bottom: 1.5em; 
+}
+.arbo * { 
+	font-weight: normal; 
+}
+.arbo, .arbo a,
+.arbo a:visited { 
+	color: lighten($couleurTexte, 30%); 
+}
+.arbo a:hover { 
+	background: $gray; 
+	color: white;
+}  
+
+.cartouche { 
+	margin-bottom: 1.5em; 
 	h1 { margin-bottom: 0; font-weight:700;
-		.soustitre { display:block; }
+		.soustitre { 
+			display:block; 
+		}
 	}
 	p { margin-bottom: 0; }
-	.surtitre{}
+	.surtitre {
-	.soustitre {}
+		
+	}
+	.soustitre {
+		
+	}
+}
+abbr.published { 
+	border: 0; 
 }
-abbr.published { border: 0; }
 @media print {
-	abbr[title].published:after { content: ""; }
+	abbr[title].published:after { 
-	abbr[title].dtreviewed:after { content: ""; }
+		content: "";
+	}
+	abbr[title].dtreviewed:after { 
+		content: "";
+	}
+}
+.publication, .info-publi { 
+	margin: 1.5em 0 0; 
+	font-size: .9em; 
+	font-style: italic; 
+}
+html[dir="rtl"] .info-publi { 
+	font-style: normal; 
 }
-.publication, .info-publi { margin: 1.5em 0 0; font-size: .9em; font-style: italic; }
-html[dir="rtl"] .info-publi { font-style: normal; }
 .traductions { font-size: .9em; }
-.traductions a[hreflang]:after { content: ''; }
+.traductions a[hreflang]:after { 
+	content: ''; 
+}
 
 
 
-.chapo { font-size:120%; }
+.chapo { 
+	font-size:120%;
+}
 .texte {  }
-.hyperlien { display: block; padding: 1.5em 50px; background: $grayLighter; font-weight: bold; }
+.hyperlien { 
-.ps, .notes { margin: 6em 0 1.5em; clear:both; }
+	display: block; 
-.notes { clear: both; font-size: .9em; }
+	padding: 1.5em 50px; 
+	background: $grayLighter; 
+	font-weight: bold; 
+}
+.ps, .notes { 
+	margin: 6em 0 1.5em; 
+	clear:both; 
+}
+.notes { 
+	clear: both; 
+	font-size: .9em;
+}
 
 
 h1,.h1,
-h2,.h2 { line-height: 1.2; font-weight:700; }
+h2,.h2 { 
-h2, .h2 { margin-top:1em; }
+	line-height: 1.2;
+	font-weight:700; 
+}
+h2, .h2 { 
+	margin-top:1em; 
+}
 
 .liste.articles:not(.periode) { 
-	li { border-top:1px solid $grayLight; padding:2em 0 0; margin:2em 0;
+	li { 
-		.h3-like { font-size:1.2em; }
+		border-top:1px solid $grayLight; 
-		.introduction p { margin:0; }
+		padding:2em 0 0; 
-		&:last-of-type { /*border-bottom:1px solid $grayLight;*/ padding-bottom:2em; }
+		margin:2em 0;
+		.h3-like { 
+			font-size:1.2em;
+		}
+		.introduction p { 
+			margin:0;
+		}
+		&:last-of-type { 
+			padding-bottom:2em; 
+		}
 	}
 }
-.liste { margin:2em 0;
+.liste {
-	&.syndic ul.liste-items { padding:0 0.5em 0 2em; }
+	margin:2em 0;
+	&.syndic ul.liste-items { 
+		padding:0 0.5em 0 2em;
+	}
 	li.short { margin:1em 0 1.5em;
-		.publication { margin:0; }
+		.publication { 
+			margin:0; 
+		}
+	}
+	.item { 
+		clear:both; 
+		margin:2em 0 3em;
 	}
-	.item { clear:both; margin:2em 0 3em; }
 }
 
-.spip_logo { max-width:100%; }
+.spip_logo { 
+	max-width:100%;
+}
 
-.spip_document { max-width:100%; height:auto; }
+.spip_document { 
-iframe { max-width:100%; }
+	max-width:100%; 
+	height:auto;
+}
+iframe { 
+	max-width:100%; 
+}
 
-.credits { clear: both; display:block; text-align: left; font-size:0.6em; }
+.credits { 
+	clear: both;
+	display:block;
+	text-align: left; 
+	font-size:0.6em;
+}
 
 // Listes et tableaux 
-dl.spip dt { background: url(img/def.png) no-repeat 25px .5em; }
+dl.spip dt { 
+	background: url(img/def.png) no-repeat 25px .5em; 
+}
 dl.spip dd {}
 
 /*table.spip {margin:1em 0;}
@@ -136,7 +232,9 @@ table.spip tfoot { border-top: 1px solid; }*/
 
 // Formulaires : variantes et cas particuliers
 // ----------------------------------------------- 
-.formulaire_spip { margin-bottom: 1.5em; }
+.formulaire_spip { 
+	margin-bottom: 1.5em;
+}
 
 fieldset {
 	width: 100%; margin: 0;
@@ -145,8 +243,12 @@ fieldset {
 	-moz-box-sizing: border-box;
 }
 
-label { display: block; }
+label { 
-.erreur_message { display: block; }
+	display: block;
+}
+.erreur_message { 
+	display: block;
+}
 input.text,textarea {
 	width: 100%;
 	-ms-box-sizing: border-box;
@@ -154,30 +256,71 @@ input.text,textarea {
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.content input.text { width: 50%; }
+.content input.text {
-textarea { width: 100%; }
+	width: 50%;
-button:hover, button:active, button:focus { background-color: $colorPrincipale; color:$colorPrincipaleDowner; outline:none !important; }
+}
+textarea { 
+	width: 100%;
+}
+button:hover, button:active, button:focus { 
+	background-color: $couleurPrincipale; 
+	color:$couleurPrincipaleDowner; 
+	outline:none !important; 
+}
 
 
 // formulaire recherche un peu a part
-.recherche { margin-bottom:$spacer; max-width:350px; /* placer dans un conteneur mini 350px */
+.recherche { 
+	margin-bottom:$spacer; 
+	max-width:350px; /* placer dans un conteneur mini 350px */
 	.flex { 
-		.input-group-prepend { width:80%;
+		.input-group-prepend { 
-			input { border-radius:0; border:1px solid #ccc; border-right:0; }
+			width:80%;
+			input { 
+				border-radius:0; 
+				border:1px solid #ccc; 
+				border-right:0;
 			}
-		.input-group-append { width:20%;
-			button { border-radius:0; border:1px solid #ccc; height:100%; }
 		}
-		input, button { width:100%; line-height:1.8; }
+		.input-group-append { 
-		input { padding:0.2rem 0.4rem; }
+			width:20%;
-		button { padding:0; margin:0; }
+			button {
+				border-radius:0;
+				border:1px solid #ccc;
+				height:100%;
+			}
+		}
+		input, button {
+			width:100%; 
+			line-height:1.8;
+		}
+		input {
+			padding:0.2rem 0.4rem;
+		}
+		button { 
+			padding:0; 
+			margin:0;
+		}
 	}
 }
 
 // Choix des mots-clefs 
-ul.choix_mots { display: block; margin: 0; padding: 0; list-style: none; 
+ul.choix_mots { 
-	li { clear: none; float: left; display: block; width: 30%; padding: 1%; }
+	display: block; 
-	li label { display: inline; font-weight: normal; }
+	margin: 0; 
+	padding: 0; 
+	list-style: none; 
+	li {
+		clear: none; 
+		float: left; 
+		display: block; 
+		width: 30%; 
+		padding: 1%;
+	}
+	li label {
+		display: inline;
+		font-weight: normal;
+	}
 }
 
 .formulaire_spip .bugajaxie { display: none; } //IE/Win
@@ -196,8 +339,8 @@ ul.choix_mots { display: block; margin: 0; padding: 0; list-style: none;
 }
 // page auteur cf js/script.js 
 .formulaire_ecrire_auteur { margin-top:3em; padding-top:1em; border-top:1px solid $grayLighter;
-	legend { cursor:pointer; color:$linkColor;
+	legend { cursor:pointer; color:$couleurLien;
-		&:hover { background-color:$colorPrincipale; color:$colorPrincipaleDowner; }
+		&:hover { background-color:$couleurPrincipale; color:$couleurPrincipaleDowner; }
 	}
 }
 

scss/_baz-utils.scss

@@ -3,7 +3,7 @@
 .btn, .btn:visited, button { padding:0.6em 1em 0.5em; margin:0.2rem; display:inline-block; 
 	background-color:$grayLighter; color:$grayDarker; 
 	border:0; @include border-radius(0);
-	&:hover { color:$white; background-color:$linkColor; }
+	&:hover { color:$white; background-color:$couleurLien; }
 }
 
 

scss/_baz-variables-perso.scss

@@ -0,0 +1 @@
+/* des variables perso pour chacun */

scss/_baz-variables.scss

@@ -32,17 +32,20 @@ $purple:                #7a43b6;
 
 
 // couleur du theme
-$colorPrincipale:	#00365b;
+$couleurPrincipale:	#00365b;
-$colorSecondaire:	lignten($colorPrincipale,50%);
+$couleurSecondaire:	#f7651a;
+
+$couleurBackground:        $white;
+$couleurTexte:             $grayDark;
+
+$couleurBackgroundTexte:	#f5faff;
 
-$backgroundColor:        $white;
-$textColor:             $grayDark;
 
 // Links
 // -------------------------
-$linkColor:             $colorPrincipale;
+$couleurLien:             $couleurPrincipale;
-$linkColorHover:        darken($linkColor, 30%);
+$couleurLienHover:        $couleurSecondaire;
-$colorPrincipaleDowner:	lighten($linkColor, 60%);
+$couleurPrincipaleDowner: lighten($couleurLien, 60%);
 
 
 // ------------------------------ 

scss/baz.scss

@@ -2,6 +2,7 @@
 
 @import 'scss/baz-mixins';
 @import 'scss/baz-variables';
+@import 'scss/baz-variables-perso';
 @import 'scss/helpers';
 @import 'scss/baz-utils';