recherche - surtitre - rezo - footer

squelettes/content/article.html

@@ -4,7 +4,7 @@
 
 	<header class="cartouche">
 	
-		[<p class="#EDIT{surtitre} surtitre">(#SURTITRE)</p>]
+		[<p class="#EDIT{surtitre} surtitre">#(#SURTITRE)</p>]
 		<h1><span class="#EDIT{titre} article__titre">#TITRE</span>[
 			<small class="#EDIT{soustitre} soustitre">(#SOUSTITRE)</small>
 		]</h1>

squelettes/footer/dist.html

@@ -0,0 +1,20 @@
+
+<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>
+
+<B_pied><div class="article">
+<BOUCLE_pied(ARTICLES){page=pied}>
+	[<div class="#EDIT{chapo} article__chapo">(#CHAPO|image_reduire{350})</div>]
+	[<div class="#EDIT{texte} article__texte">(#TEXTE|image_reduire{350})</div>]
+</BOUCLE_pied>
+</div></B_pied>
+
+<div class="colophon">
+	<span class="april"><img src="#CHEMIN{images/logo_april_b.png}" alt="logo APRIL" /></span>
+	#INCLURE{fond=inclure/menu, env, identifiant=pied}
+</div

squelettes/header/dist.html

@@ -8,8 +8,8 @@
 <div class="header_menu">
 	<INCLURE{fond=inclure/nav-secteurs, env} />
 	<div class="liens">
-		<a href="#URL_PAGE{backend}" class="btn"><i class="fas fa-rss left"></i>S'abonner au podcast</a>
 		#FORMULAIRE_ABOMAILMAN_MINI_UNE_LISTE{1}
+		<a href="#URL_PAGE{backend}" class="btn"><i class="fas fa-rss left"></i>S'abonner au podcast</a>
 		<INCLURE{fond=inclure/rezo} />
 	</div>
 </div>

squelettes/scss/base/_typo.scss

@@ -69,7 +69,8 @@ h2, .h2,
 h3, .h3,
 h4, .h4,
 h5, .h5,
-h6, .h6 {
+h6, .h6,
+.surtitre {
     font-family:    $typo-titre;
 	font-weight:	700;
     line-height:    1.2;

squelettes/scss/styles/_perso.scss

@@ -19,9 +19,11 @@
 		flex-grow: 2;
 		padding:0 $spacer;
 		.liens {
+			text-align:right;
 			margin-top:0.7rem;
 			.btn {
-				margin-top:1.5rem;
+				float:right;
+				margin-top:1.55rem;
 				.fas:before {
 					font-size:1rem;
 				}
@@ -36,9 +38,9 @@
 			
 			.sociaux {
 				float:right;
+				display:inline-block;
 				font-size:0.8rem;
-				margin-top:1.7rem;
-				margin-right:1.5rem;
+				margin:1.5rem 1.5rem 0 0;
 				.socicon {
 					background:none !important;
 					color:$blancTransparent;
@@ -51,7 +53,8 @@
 				width:230px;
 				float:right;
 				position:relative;
-				margin:0;
+				margin:0 0 0 $spacer;
+				text-align:left;
 				.reponse_formulaire {
 					position: absolute;
 					top: 100%;
@@ -93,47 +96,10 @@
 .page_header_container {
     align-items: flex-start;
 }
-
-// abonnement newsletter
-.formulaire_spip .abonnement {
-	position:relative;
-	&:after {
-		@include triangle(right, #5b758e, 0.5rem, 0.8);
-		position:absolute;
-		right:0.5rem;
-		bottom:0.5rem;
-		z-index:1;
-	}
-	label {
-		color:$blancTransparent;
-		font-size:0.8rem;
-	}
-	input.text {
-		padding-right:30px;
-		background:#f4f4f4;
-		&:hover, &:focus, &:active {
-			background:white;
-		}
-		&::placeholder {
-			font-size:0.8rem;
-		}
-	}
-	input[type="submit"] {
-		position: absolute;
-		right:0;
-		bottom:0;
-		background:none;
-		width:40px;
-		padding:0;
-		height:33px;
-		overflow:hidden;
-		text-indent:40px;
-		z-index:2;
-	}
-	
+.arbo {
+	@include visuallyhidden;
 }
 
-
 .texte_accueil {
 	background-color:white;
 }
@@ -157,8 +123,35 @@
 	background-color:white;
 }
 
+.surtitre {
+	width:150px;
+	margin:-1rem 0 0 -1rem;
+	padding:0.5rem;
+	font-weight:700;
+	font-size:2.4rem;
+	text-align:center;
+	color:$couleurSecondaire;
+	background:$couleurBackgroundTexte;
+}
 
 
 .sociaux .socicon {
     display: inline-block;
 }
+.page_footer {
+	.article {
+		@include media($bp-small-up) {
+			@include flex;
+			justify-content:space-between;
+			> * {
+				width: calc(50% - 1rem);
+			}
+		}
+		.article__texte, .article__chapo {
+			margin-bottom:2rem;
+		}
+	}
+	.formulaire_spip.formulaire_recherche {
+		max-width:100%;
+	}
+}

squelettes/scss/utils/_variables-perso.scss

@@ -5,7 +5,9 @@ $couleurPrincipale:			#005184;
 $couleurPrincipaleOn:		#00c4f5;
 $couleurSecondaire:			#f7651a;
 /* $couleurPrincipaleDowner: 	lighten($couleurPrincipale, 60%); */
-$blancTransparent:			rgba(white,0.7);
+/* $blancTransparent:			rgba(white,0.7); */
+
+$couleurBackgroundTexte:	#ffe9e0;
 
 
 $container-width:           1100px;