découapge du CSS

static/css/home.css

@@ -1,161 +1,11 @@
-/*PARAMETRES GENERAUX*/
+/*GESTION DE LA GRILLE DE LA PAGE PRINCIPALE */
-:root{
+main {
-	--big_margin:100px;
-	--med_margin:50px;
-	--small_margin:10px;
-	--day-background: #fdfff9;
-	--day-highlight-color: white;
-	--day-highlight-bg: darkgreen;
-	--night-highlight-color: #ebebed;
-	--night-highlight-bg: #565a4d;
-	--night-background: #242526;/*#3c3c39;*/
-	--txt-night: #ebebed;/*#c7c4d4;*/
-	color-scheme: light dark;
-	/*
-	--menu: pink;
-	--jardin: darkseagreen;
-	--infras: gold;
-	--rennes: orange;
-	--orsay: chartreuse;
-	--txt_infras: bisque;
-	--outils: coral;
-	--liste_outils: aliceblue;
-	--txt_outils: aquamarine;
-	--valeurs: grey;
-	--ronce: cornflowerblue;
-	--liste_valeurs: brown;
-	--connaissance: chocolate;
-	--txt_connaissance: crimson;
-	--calendrier: darkkhaki;
-	--footer: deeppink;
-	--lightgrey: lightgrey;*/
-
-}
-
-html, body, main{
-	margin:0;
-	padding: 0;
-	font-size: 13px;
-}
-
-body{
-	font-family: monospace;
-	color: black;
-}
-
-pre{
-	padding: 0;
-	margin: 0;
-	font-size: 1rem;
-}
-
-p{
-	font-size: 1rem;
-}
-
-a{
-	color: darkgreen;
-}
-
-h1:after, h2:after{
-	content:'\A___________________________________\A"""""""""""""""""""""""""""""""""""';
-}
-
-h2, h1{
-	font-size: 1rem;
-	font-weight: normal;
-	margin: 0px;
-	padding: 0px;
-	text-align: left;
-}
-
-h2, h1{
-	text-transform: uppercase;
-	white-space:pre;
-	overflow: hidden;
-}
-
-img{
-	width: 100%;
-}
-
-#txt_infras, #txt_outils, #txt_connaissance{
-	line-height: 1.3rem;
-	text-align: justify;
-	text-justify: inter-character;
-	hyphens: auto;
-	word-spacing: -2px;
-	-ms-hyphens: auto;
-	-webkit-hyphens: auto;
-	-moz-hyphens: auto;
-	margin-top: 0;
-}
-
-.noscroll{
-	overflow: hidden;
-}
-
-pre.center{
-	font-size: 1rem;
-	display: flex;
-	justify-content: center;
-}
-
-pre.hide {
-	display: none;
-}
-
-div#calendrier > pre.center{
-	justify-content: right;
-}
-
-#calendrier #mois_actuel{
-	margin-bottom: 1rem;
-}
-
-#mois_actuel, #mois_suivant{
-	text-align: center;
-}
-
-.highlight{
-	color: var(--day-highlight-color);
-	background-color: var(--day-highlight-bg);
-}
-
-#txt_connaissance li{
-	margin-bottom: 1rem;
-}
-
-#txt_connaissance p{
-	margin-top: 0px;
-}
-
-pre.center > a{
-	font-size: 1rem;
-	display: contents;
-	text-decoration: 1px black solid;
-}
-
-/*GESTION DE LA GRILLE DU DOCUMENT*/
-div#container{
-	background-color: var(--day-background);
-	display: grid;
-	grid-template-columns: [main-col-start] repeat(12, calc(100% / 12) [main-col-sep]);
-	grid-template-rows: 
-	[main-row-debut] auto [main-row-fin] 
-	var(--big_margin)
-	[footer-start] auto [footer-end] 
-	;
-}
-
-/*GESTION DE LA GRILLE DU MAIN*/
-main.home {
 	grid-area: main-row-debut / main-col-start / main-row-fin / main-col-sep 12;
 
 	display: grid;
 	grid-template-columns: [col-start] repeat(12, calc(100% / 12) [col-sep]);
 	grid-template-rows: 
-	[row-start] var(--med_margin) [h1-start] auto [h1-end] auto [jardin-end] 
+	[row-start] auto [jardin-end] 
 	repeat(3, 
 	var(--big_margin) 
 	[title-start] auto [title-end] 
@@ -170,62 +20,6 @@ main.home {
 	;
 }
 
-/*POSITIONNEMENT SUR LA GRILLE PRINCIPALE*/
-nav#menu{
-	background-color: var(--day-background);
-	display: flex;
-	justify-content: flex-end;
-	flex-direction: column;
-	position: fixed;
-	bottom: 1rem;
-	right: 1rem;
-}
-
-.icone > pre{
-	padding-top: 1rem;
-	color: black;
-}
-
-.icone{
-	position : relative;
-	display: inline-block;
-	text-decoration: none;
-}
-
-.icone .img_top{
-	display: none;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 99;
-	background-color: var(--day-background);
-	color: darkgreen;
-}
-
-.icone:hover .img_top{
-	display: inline;
-}
-
-.icone a{
-	text-decoration: none;
-	color:black;
-}
-
-nav#menu > a{
-	display: block;
-	color: black;
-	text-decoration: none;
-}
-
-nav#menu > a:hover{
-	color: darkgreen;
-	text-decoration: none;
-}
-
-h1#deuxfleurs{
-	grid-area: h1-start / col-sep 1 / h1-end / col-sep 12;
-}
-
 div#jardin{
 	background-color: var(--jardin);
 	grid-area: row-start / col-start / jardin-end / col-sep 12;
@@ -336,16 +130,6 @@ div#calendrier{
 	overflow: hidden;
 }
 
-footer{
-	background-color: var(--footer);
-	grid-area: footer-start / main-col-start / footer-end / main-col-sep 12;
-}
-
-#liens{
-	text-align: center;
-	margin-bottom: var(--med_margin)
-}
-
 /*GESTION DE LA GRILLE LISTE DE NOS VALEURS*/
 
 section#liste_valeurs{
@@ -447,39 +231,10 @@ div#blog {
 }
 
 
-nav ul{
-	list-style: none;
-	padding: 0px;
-	margin: 0px;
-}
-
-
-
-
-
-
 /*GESTION DES MEDIA QUERIES*/
 
 /*Tablettes et petits ordinateurs*/
 @media (max-width: 1500px) and (min-width: 801px){
-
-	h2, h1{
-		font-size: 1rem;
-		font-weight: normal;
-		margin: 0px;
-		padding: 0px;
-	}
-
-	h2, h1{
-		text-transform: uppercase;
-		white-space:pre;
-		overflow: hidden;
-	}
-
-	h1#deuxfleurs{
-		grid-area: h1-start / col-sep 1 / h1-end / col-sep 12;
-	}
-
 	h2#infras{
 		grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12;
 	}
@@ -617,40 +372,6 @@ nav ul{
 
 /*Smartphones*/
 @media (max-width: 800px){
-
-	:root{
-		--big_margin:50px;
-		--med_margin:25px;
-		--small_margin:5px;
-	}
-
-	h1:before, h1:after{
-		content: '';
-	} 
-
-	h2:before{
-		content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* ';
-	}
-
-	h2:after{
-		content: ' *\A______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""';
-	}
-
-	h2, h1{
-		font-size: 1rem;
-		text-align: center;
-	}
-
-	h2, h1{
-		text-transform: uppercase;
-		white-space: pre;
-		overflow: hidden;
-	}
-
-	h1#deuxfleurs{
-		grid-area: h1-start / col-start / h1-end / col-sep 12;
-	}
-
 	h2#infras{
 		grid-area: title-start 1 / col-start / title-end 1 / col-sep 12;
 	}
@@ -815,28 +536,41 @@ nav ul{
 
 }
 
-@media (prefers-color-scheme: dark) {
+/* En vrac */
-	div#container, nav#menu, body{
+div#calendrier > pre.center{
-		background-color: var(--night-background);
+	justify-content: right;
-	}
+}
-	p, pre, ul, li, a, a:hover, h1, h2, footer{
+
-		color: var(--txt-night);
+#calendrier #mois_actuel{
-	}
+	margin-bottom: 1rem;
-	.highlight{
+}
-		color: var(--night-highlight-color);
+
-		background-color: var(--night-highlight-bg);
+#mois_actuel, #mois_suivant{
-	}
+	text-align: center;
-	.icone > pre{
+}
-		color: var(--txt-night);
+
-	}
+.highlight{
-	.icone .img_top{
+	color: var(--day-highlight-color);
-		background-color: var(--night-background);
+	background-color: var(--day-highlight-bg);
-		color: var(--txt-night);
+}
-	}
+
-	.icone a{
+#txt_connaissance li{
-		color: var(--txt-night);
+	margin-bottom: 1rem;
-	}
+}
-	div#ronce, #coop, #autonomie, #solidarite, #liberte, nav#menu, div#rennes, div#orsay{
+
-		border-color: var(--txt-night);
+#txt_connaissance p{
-	}
+	margin-top: 0px;
+}
+
+
+#txt_infras, #txt_outils, #txt_connaissance{
+	line-height: 1.3rem;
+	text-align: justify;
+	text-justify: inter-character;
+	hyphens: auto;
+	word-spacing: -2px;
+	-ms-hyphens: auto;
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	margin-top: 0;
 }

static/css/layout.css

@@ -0,0 +1,263 @@
+/*PARAMETRES GENERAUX*/
+:root{
+	--big_margin:100px;
+	--med_margin:50px;
+	--small_margin:10px;
+	--day-background: #fdfff9;
+	--day-highlight-color: white;
+	--day-highlight-bg: darkgreen;
+	--night-highlight-color: #ebebed;
+	--night-highlight-bg: #565a4d;
+	--night-background: #242526;/*#3c3c39;*/
+	--txt-night: #ebebed;/*#c7c4d4;*/
+	color-scheme: light dark;
+	/*
+	--menu: pink;
+	--jardin: darkseagreen;
+	--infras: gold;
+	--rennes: orange;
+	--orsay: chartreuse;
+	--txt_infras: bisque;
+	--outils: coral;
+	--liste_outils: aliceblue;
+	--txt_outils: aquamarine;
+	--valeurs: grey;
+	--ronce: cornflowerblue;
+	--liste_valeurs: brown;
+	--connaissance: chocolate;
+	--txt_connaissance: crimson;
+	--calendrier: darkkhaki;
+	--footer: deeppink;
+	--lightgrey: lightgrey;*/
+
+}
+
+/* PAR DEFAUT */
+html, body, main{
+	margin:0;
+	padding: 0;
+	font-size: 13px;
+}
+
+body{
+	font-family: monospace;
+	color: black;
+	background-color: var(--day-background);
+}
+
+pre{
+	padding: 0;
+	margin: 0;
+	font-size: 1rem;
+}
+
+p{
+	font-size: 1rem;
+}
+
+a{
+	color: darkgreen;
+}
+
+
+nav ul{
+	list-style: none;
+	padding: 0px;
+	margin: 0px;
+}
+
+h1:after, h2:after{
+	content:'\A___________________________________\A"""""""""""""""""""""""""""""""""""';
+}
+
+h2, h1{
+	font-size: 1rem;
+	font-weight: normal;
+	margin: 0px;
+	padding: 0px;
+	text-align: left;
+}
+
+h2, h1{
+	text-transform: uppercase;
+	white-space:pre;
+	overflow: hidden;
+}
+
+img{
+	width: 100%;
+}
+
+.noscroll{
+	overflow: hidden;
+}
+
+/*GESTION DE LA GRILLE DU DOCUMENT*/
+div#container{
+	display: grid;
+	grid-template-columns: [main-col-start] repeat(12, calc(100% / 12) [main-col-sep]);
+	grid-template-rows: 
+	[main-row-debut] var(--med_margin) [header-start] auto [header-end] var(--big_margin) [core-start] auto [main-row-fin] 
+	var(--big_margin)
+	[footer-start] auto [footer-end] 
+	;
+}
+
+/* EN-TETE */
+header {
+	grid-area: header-start / main-col-sep 1 / header-end / main-col-sep 12;
+}
+
+/* PIED DE PAGE */
+footer {
+	background-color: var(--footer);
+	grid-area: footer-start / main-col-start / footer-end / main-col-sep 12;
+}
+
+#liens{
+	text-align: center;
+	margin-bottom: var(--med_margin)
+}
+
+/* MENU */
+nav#menu{
+	background-color: var(--day-background);
+	display: flex;
+	justify-content: flex-end;
+	flex-direction: column;
+	position: fixed;
+	bottom: 1rem;
+	right: 1rem;
+}
+
+.icone > pre{
+	padding-top: 1rem;
+	color: black;
+}
+
+.icone{
+	position : relative;
+	display: inline-block;
+	text-decoration: none;
+}
+
+.icone .img_top{
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 99;
+	background-color: var(--day-background);
+	color: darkgreen;
+}
+
+.icone:hover .img_top{
+	display: inline;
+}
+
+.icone a{
+	text-decoration: none;
+	color:black;
+}
+
+nav#menu > a{
+	display: block;
+	color: black;
+	text-decoration: none;
+}
+
+nav#menu > a:hover{
+	color: darkgreen;
+	text-decoration: none;
+}
+
+/* ILLUSTRATIONS ASCII (Y COMPRIS FOOTER) */
+pre.center{
+	font-size: 1rem;
+	display: flex;
+	justify-content: center;
+}
+
+pre.hide {
+	display: none;
+}
+pre.center > a{
+	font-size: 1rem;
+	display: contents;
+	text-decoration: 1px black solid;
+}
+
+/* RESPONSIVE */
+/* Tablettes */
+@media (max-width: 1500px) and (min-width: 801px) {
+	h2, h1{
+		font-size: 1rem;
+		font-weight: normal;
+		margin: 0px;
+		padding: 0px;
+		text-transform: uppercase;
+		white-space:pre;
+		overflow: hidden;
+	}
+}
+
+/* Smartphones */
+@media (max-width: 800px) {
+	:root{
+		--big_margin:50px;
+		--med_margin:25px;
+		--small_margin:5px;
+	}
+
+	h1:before, h1:after{
+		content: '';
+	} 
+
+	h2:before{
+		content: '______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""\A* ';
+	}
+
+	h2:after{
+		content: ' *\A______________________________________________________________________\A""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""';
+	}
+
+	h2, h1{
+		font-size: 1rem;
+		text-align: center;
+	}
+
+	h2, h1{
+		text-transform: uppercase;
+		white-space: pre;
+		overflow: hidden;
+	}
+
+}
+
+/* THEME SOMBRE */
+@media (prefers-color-scheme: dark) {
+	div#container, nav#menu, body{
+		background-color: var(--night-background);
+	}
+	p, pre, ul, li, a, a:hover, h1, h2, footer{
+		color: var(--txt-night);
+	}
+	.highlight{
+		color: var(--night-highlight-color);
+		background-color: var(--night-highlight-bg);
+	}
+	.icone > pre{
+		color: var(--txt-night);
+	}
+	.icone .img_top{
+		background-color: var(--night-background);
+		color: var(--txt-night);
+	}
+	.icone a{
+		color: var(--txt-night);
+	}
+	div#ronce, #coop, #autonomie, #solidarite, #liberte, nav#menu, div#rennes, div#orsay{
+		border-color: var(--txt-night);
+	}
+}
+

static/css/page-generic.css

@@ -0,0 +1,20 @@
+/*GESTION DE LA GRILLE D'UNE PAGE DE TEXTE LEGAL/INFO/BORRING */
+main {
+	grid-area: core-start / main-col-sep 3 / main-row-fin / main-col-sep 9;
+}
+
+/* Tablettes */
+@media (max-width: 1500px) and (min-width: 801px) {
+	main {
+		grid-area: core-start / main-col-sep 1 / main-row-fin / main-col-sep 11;
+	}
+}
+
+/* Smartphones */
+@media (max-width: 800px) {
+	main {
+		grid-area: core-start / main-col-start / main-row-fin / main-col-sep 12;
+	}
+}
+
+

static/index.html

@@ -38,7 +38,8 @@
   <title>Deuxfleurs : fabriquons un internet convivial</title>
 
   <!-- liens vers style css et favicon-->
-  <link rel="stylesheet" type="text/css" href="style-bon.css">
+  <link rel="stylesheet" type="text/css" href="css/layout.css">
+  <link rel="stylesheet" type="text/css" href="css/home.css">
   <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 </head>
 
@@ -98,10 +99,14 @@
   </nav>
 
   <div id="container">
-    <main class="home" aria-label="contenu de la page web">
+
-      <h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1>
+    <header>
-      <div id="jardin">
+        <h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1>
-        <div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées">
+    </header>
+
+    <main aria-label="contenu de la page web">
+        <div id="jardin">
+          <div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées">
         <!-- séquences de l'animation qui est lancée grâce à l'avant avant dernière ligne -->
           <pre class="center">
                                          '\ ; /'    
@@ -484,7 +489,6 @@
         </div>
         <p>Fabriquons un internet convivial ⤵</p>
       </div>
-      <h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1>
       <h2 id="infras">Avec nos propres infrastructures</h2>
       <div id="rennes" role="img" aria-label="illustration de trois serveurs informatiques rangés dans la bibliothèque d'un salon">
       <!--diode qui clignote ?-->
@@ -1593,7 +1597,7 @@ _ `  ^ ¨  ·  _ -  "             ` *     -     ; - _
                                                                                                                                                                  </pre>
       </div>
       <div id="liens">
-        <a href="./CGU.html">CGU</a><span role="separator"> · </span><a href="./Gestion%20des%20risques.html">Gestion des risques</a><span role="separator"> · </span><a href="./Mentions%20légales.html">Mentions légales</a><span role="separator"> · </span><a href="./Sources.html">Sources</a>
+        <a href="./cgu.html">CGU</a><span role="separator"> · </span><a href="./risques.html">Gestion des risques</a><span role="separator"> · </span><a href="./mentions.html">Mentions légales</a><span role="separator"> · </span><a href="./sources.html">Sources</a>
       </div>
     </footer>
   </div>