Création de la page "L'association"

content/association.html

@@ -0,0 +1,11 @@
+<BOUCLE_menu_association(ARTICLES){grigri=association}{0,1}>
+	[(#ID_ARTICLE|setenv{id_article})]
+</BOUCLE_menu_association>
+
+<section id="association" class="section-top section-bottom">
+	<div class="container">
+		<h1>L'Association</h1>
+			<INCLURE{fond=inclure/association_contenu,env,ajax}>
+		</div>
+	</div>
+</section>

content/sommaire.html

@@ -5,13 +5,15 @@
 				<div id="images-presentation" class="col-md">
 					[(#LOGO_SITE_SPIP|image_reduire{510,0})]
 					<BOUCLE_image_pres(DOCUMENTS){id_article}{0,1}>
-						<div class="image-encadree">
+						<div class="image-encadree text-light">
 							[(#FICHIER|image_recadre{380:362,-,focus}|image_reduire{380,362})]
-						</div>					
+							#DESCRIPTIF
+						</div>
+						
 					</BOUCLE_image_pres>
 				</div>
-				<div id="texte-presentation" class="col-md #EDIT{texte}">
+				<div id="texte-presentation" class="col-md">
-					<div class="contenu text-dark">
+					<div class="contenu text-dark #EDIT{texte}">
 						#TEXTE
 					</div>
 				</div>

css/_sq_balint.scss

@@ -9,6 +9,12 @@
 	cursor: pointer;
 }
 
+// pour empêcher l'opacité à 0.5 pendant le chargement AJAX :
+.loading > * {
+    opacity: 1 !important;
+}
+
+
 
 /* polices */
 * { font-family: 'Open Sans', sans-serif; }
@@ -23,6 +29,18 @@ a, a:hover {
 	color: $couleur-liens;
 }
 
+/* body */
+body{
+	background: $bg-body;
+}
+
+.section-top{
+	padding-top: 10rem;
+}
+
+.section-bottom{
+	padding-bottom: 3rem;
+}
 
 
 /**********************************************************************/
@@ -128,7 +146,7 @@ a, a:hover {
 }
 
 #agenda{
-	background:rgba(255, 255, 255, 0.92);
+	background: $fond-transparent;
 	border-radius: 0.2rem;
 	display: flex;
 	flex-direction: column;
@@ -303,7 +321,7 @@ a, a:hover {
 
 #footer-infos{
 	background: $fond-footer;
-	padding: 2rem 0;
+	padding: 3rem 0;
 	a{
 		color: $page-active;
 	}
@@ -355,6 +373,37 @@ a, a:hover {
 	}
 }
 
+/**********************************************************************/
+/************************ PAGE ASSOCIATION ****************************/
+/**********************************************************************/
+
+#menu-association{
+	background: $bg-diapo-texte;
+	background-size: cover;
+	margin: 1rem 0;
+	border-radius: 0.2rem;
+	padding: 0;
+	.active a{
+		color: $couleur-liens;
+	}
+	li{
+		padding: 0.5rem;
+		a{
+			color: $light;
+		}
+		&:not(:last-of-type){
+			border-bottom: solid 1px $light;
+		}
+	}
+}
+
+.asso-image{
+	margin: 1.5rem 0;
+	img{
+		width: 100%;
+		height: auto;
+	}
+}
 
 /**********************************************************************/
 /**************** TOUS LES FORMULAIRES DE CONNEXION *******************/

css/_variables.scss

@@ -5,9 +5,11 @@ $couleur-liens : #dc7544;
 $page-active: #ffe9aa;
 $fond-footer: #464ba3;
 $titres-footer: #64d4af;
+$fond-transparent: rgba(255, 255, 255, 0.92);
+$fond-rouge: #882625;
 
 
-
+$bg-body: url('../images/bg-web.jpg');
 $bg-presentation: url('../images/bg-rouge-fonce-3.jpg');
 $bg-texte-presentation: url('../images/bg-encadre-blanc3.jpg');
 $bg-mis-en-avant: url('../images/delaunay_brut.jpg');

css/mon_site.css

@@ -11832,6 +11832,10 @@ fieldset.reponse_formulaire {
   cursor: pointer;
 }
 
+.loading > * {
+  opacity: 1 !important;
+}
+
 /* polices */
 * {
   font-family: 'Open Sans', sans-serif;
@@ -11854,6 +11858,19 @@ a, a:hover {
   color: #dc7544;
 }
 
+/* body */
+body {
+  background: url("../images/bg-web.jpg");
+}
+
+.section-top {
+  padding-top: 10rem;
+}
+
+.section-bottom {
+  padding-bottom: 3rem;
+}
+
 /**********************************************************************/
 /*************************    HEADER     ******************************/
 /**********************************************************************/
@@ -12168,7 +12185,7 @@ a, a:hover {
 /**********************************************************************/
 #footer-infos {
   background: #464ba3;
-  padding: 2rem 0;
+  padding: 3rem 0;
 }
 
 #footer-infos a {
@@ -12248,6 +12265,42 @@ a, a:hover {
   }
 }
 
+/**********************************************************************/
+/************************ PAGE ASSOCIATION ****************************/
+/**********************************************************************/
+#menu-association {
+  background: rgba(0, 13, 158, 0.65);
+  background-size: cover;
+  margin: 1rem 0;
+  border-radius: 0.2rem;
+  padding: 0;
+}
+
+#menu-association .active a {
+  color: #dc7544;
+}
+
+#menu-association li {
+  padding: 0.5rem;
+}
+
+#menu-association li a {
+  color: #f8f9fa;
+}
+
+#menu-association li:not(:last-of-type) {
+  border-bottom: solid 1px #f8f9fa;
+}
+
+.asso-image {
+  margin: 1.5rem 0;
+}
+
+.asso-image img {
+  width: 100%;
+  height: auto;
+}
+
 /**********************************************************************/
 /**************** TOUS LES FORMULAIRES DE CONNEXION *******************/
 /**********************************************************************/

inclure/association_contenu.html

@@ -0,0 +1,32 @@
+<div class="row">
+	
+	<aside class="col-lg-4 asso-colonne">
+		<INCLURE{fond=inclure/menu-association,env}>
+
+		[(#REM) On affiche les images à gauche sur grand écran]
+		<BOUCLE_images(DOCUMENTS){credits=association}{tout}>
+		<div class="asso-image text-center d-none d-lg-block">
+			[(#FICHIER|image_recadre{380:362,-,focus}|image_reduire{380,362})]
+			#DESCRIPTIF
+		</div>	
+		</BOUCLE_images>
+	</aside>
+
+	<div class="col-lg-8 asso-contenu">
+		<BOUCLE_contenu(ARTICLES){id_article=#ENV{id_article}}>
+			<h2>#TITRE</h2>
+			#TEXTE
+		</BOUCLE_contenu>
+
+		[(#REM) On affiche les images à la fin sur petits écrans]
+		<div class="row">
+			<BOUCLE_images2(DOCUMENTS){credits=association}{tout}>
+			<div class="asso-image text-center d-lg-none col-sm-6">
+				[(#FICHIER|image_recadre{380:362,-,focus}|image_reduire{380,362})]
+				#DESCRIPTIF
+			</div>	
+			</BOUCLE_images2>
+		</div>
+	</div>
+
+</div>

inclure/menu-association.html

@@ -0,0 +1,14 @@
+<nav id="menu-association" class="navbar navbar-expand-lg">
+	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#liste-deroulante-association" aria-controls="liste-deroulante-association" aria-expanded="false" aria-label="Toggle navigation">
+		<i class="fa fa-bars" aria-hidden="true"></i>
+	</button>
+	<div class="collapse navbar-collapse" id="liste-deroulante-association">
+		<ul class="navbar-nav ml-auto flex-column">
+		<BOUCLE_menu_association(ARTICLES){grigri=association}>
+			<li class="nav-item [(#ENV{id_article}|=={#ID_ARTICLE}|oui) active]">
+				<a class="nav-link ajax" href="[(#URL_PAGE{association}|parametre_url{id_article,#ID_ARTICLE})]">#TITRE</a>
+			</li>
+		</BOUCLE_menu_association>
+		</ul>
+	</div>
+</nav>