[AJ] Plusieurs feuilles de styles dans l'entête. Ce qui permet de

choisir une feuille de style pour la couleur.

GNUmakefile

@@ -113,6 +113,12 @@ $(DESTINATION)/$(CSS_NOM): $(dependances_css)
 	$(if $(MENU), @$(PROG_CP) style/$(CSS_AVEC_MENU) $(DESTINATION)/$(CSS_NOM), @$(PROG_CP) style/$(CSS_SANS_MENU) $(DESTINATION)/$(CSS_NOM))
 	@$(PROG_ECHO) -e "  …terminée."
 
+# création du fichier CSS de couleur
+$(DESTINATION)/$(CSS_COULEUR): style/$(CSS_COULEUR)
+	@$(PROG_ECHO) -e "Création du fichier CSS pour les couleurs…"
+	@$(PROG_CP) style/$(CSS_COULEUR) $(DESTINATION)/$(CSS_COULEUR)
+	@$(PROG_ECHO) -e "  …terminée."
+
 # création du fichier $(contenu)
 $(contenu): $(script_contenu) $(SOURCE) $(image_defaut)
 	@$(PROG_SED) -i "s/DEBUG=1/DEBUG=0/g" $(script_contenu)
@@ -132,7 +138,7 @@ $(contenu): $(script_contenu) $(SOURCE) $(image_defaut)
 
 # création de la page d'index
 index: $(INDEX)
-$(INDEX): $(DOSSIER_HTML) $(DESTINATION)/$(CSS_NOM) $(dependances_index) $(contenu)
+$(INDEX): $(DOSSIER_HTML) $(DESTINATION)/$(CSS_NOM) $(dependances_index) $(contenu) $(DESTINATION)/$(CSS_COULEUR)
 	@$(PROG_ECHO) -e "Création de la page de garde…"
 # entete
 	@$(PROG_ECHO) -e "\t…insertion de l'entête"
@@ -143,6 +149,7 @@ $(INDEX): $(DOSSIER_HTML) $(DESTINATION)/$(CSS_NOM) $(dependances_index) $(conte
 		-e "s/@@TITRE_PORTEAIL@@/$(TITRE)/g"       \
 		-e "s/@@ACCUEIL_PORTEAIL@@/$(ACCUEIL)/g"   \
 		-e "s#@@CSS_DEFAUT@@#./$(CSS_NOM)#g"       \
+		-e "s#@@CSS_COULEUR@@#./$(CSS_COULEUR)#g"  \
 		-e "s/^\(.*\)@@.*@@\(.*\)$$/\1\2/g"        \
 		$(INDEX)
 	@$(PROG_ECHO) -e "\t  …contenu modifié avec succès !"

LISMOI

@@ -293,11 +293,15 @@ INDEX : adresse, à partir du répertoire dans lequel est contenu le fichier
 indication sur le nom que vous voulez donner au fichier
 
 CSS_SANS_MENU : nom de la feuille de style à utiliser quand la page est générée
-sans menu. À noter que le fichier doit se trouver dans le dossier 'composants'
+sans menu. À noter que le fichier doit se trouver dans le dossier 'style'.
 
 CSS_AVEC_MENU : nom de la feuille de style à utiliser quand la page est générée
 avec un menu. À noter que le fichier doit se trouver dans le dossier 
-'composants'.
+'style'.
+
+CSS_COULEUR : nom de la seconde feuille de style à utiliser pour ajouter des 
+couleurs à votre page. À noter que le fichier doit se trouver dans le dossier
+'style'.
 
 CSS_NOM : nom de la feuille de style dans le résultat final
 
@@ -386,7 +390,8 @@ Le dossier 'style' est prévu pour contenir l'ensemble des feuilles de style
 disponible pour l'apparence de notre page PorteAil.
 
 Déposez donc ici vos feuille de style et changez la variable 'CSS_AVEC_MENU'
-et 'CSS_SANS_MENU' du fichier 'configrc' (Cf. Chapitre 'configrc').
+,'CSS_SANS_MENU' et 'CSS_COULEUR' du fichier 'configrc' (Cf. Chapitre 
+'configrc').
 
 #--[[ Le dossier img ]]--#
 

TACHES

@@ -8,17 +8,13 @@ DESTDIR
 - Valider la page à l'aide de TIDY (doit être facultatif)
 - Trouver une méthode plus fine pour trouver le nombre de catégories par fichier (autre qu'un grep par exemple)
 - Vérifier la présence des /, [ et ] dans les variables avant qu'elles soient mises dans un SED. Ceci à l'aide de ${var//a/b} pour modifier les chaînes A par B dans VAR.
-- permettre l'ajout de plusieurs CSS dans HEAD
 - faire une page "print.css"
   - mettre en noir et blanc
   - ajouter le nom des liens en fin de chaque lien
-- créer plusieurs feuilles de style (couleurs, positionnement des éléments, etc.)
-- ne copier QUE les images utilisées
 - Tenter d'utiliser la description de l'élément pour faire une fenêtre qui s'affiche quand on passe sur le cadre de l'élément (tout en CSS si possible !)
 - Que donne une ligne vide dans le fichier de catégorie ? => à tester comme cas possible
 
 >>> Pour la v0.1.2 : 
-- imaginer un système d'héritage des feuilles de style pour ne modifier que les couleurs de la page, en dehors de la structure ?
 - faire un export en XHTML si possible (ajouter l'extension au fichier de destination choisi)
 - HTML 5 avec header et footer
 - Simplifier le code HTML et CSS
@@ -28,6 +24,7 @@ DESTDIR
 - Meilleur affichage dans les navigateurs textes
 - Changer les DIV en une liste d'éléments puis mettre display: inline-block; pour l'affichage. Si liste, alors mettre des point-virgules à la fin de chaque ligne (et les cacher en css)
 - Réorganiser les variables du GNUmakefile pour rendre plus simple le choix des variables par l'utilisateur. Afin qu'il n'ai JAMAIS à mettre d'autre variables dans le contenu. Par exemple jamais écrire cela : $(DOSSIER)/fichier.html !!!!
+- Simplifier le fichier Makefile au niveau des variables pour réduire leur nombre
 - commenter le code CSS
 - favicon.ico ?
 
@@ -109,3 +106,7 @@ des éléments
 - vérifier l'existence de l'image avant de l'ajouter
 - si pas d'image ou image inexistante, mettre une image générique
 - Doc : donner l'astuce pour ordonner les catégories dans le fichier : mettre 00-nom_fichier.txt, puis 01-autre_categorie.txt, etc.
+- imaginer un système d'héritage des feuilles de style pour ne modifier que les couleurs de la page, en dehors de la structure. => fait avec une double inclusion de feuille de style dans la page HTML
+- permettre l'ajout de plusieurs CSS dans HEAD
+- créer plusieurs feuilles de style (couleurs, positionnement des éléments, etc.)
+- ne copier QUE les images utilisées

composants/entete.html

@@ -5,6 +5,7 @@
   <title>@@ACCUEIL_PORTEAIL@@</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" href="@@CSS_DEFAUT@@" type="text/css" media="all" title="Défaut" />
+  <link rel="stylesheet" href="@@CSS_COULEUR@@" type="text/css" media="all" title="Défaut" />
 </head>
 <body>
   <div id="chapeau">

configrc.exemple

@@ -1,8 +1,9 @@
 ## CONFIGURATION
 DESTINATION = porteail
 INDEX = $(DESTINATION)/index.xhtml
-CSS_SANS_MENU = bicolore_sans_menu.css
+CSS_SANS_MENU = sans_menu.css
-CSS_AVEC_MENU = bicolore_avec_menu.css
+CSS_AVEC_MENU = avec_menu.css
+CSS_COULEUR = noir.css
 CSS_NOM = defaut.css
 TITRE = Titre par défaut
 ACCUEIL = Accueil - $(TITRE)

style/avec_menu.css

@@ -4,22 +4,16 @@ width: 100%;
 min-width: 300px;
 margin: 0;
 padding: 0;
-background-color: #ffffff;
-color: #000000;
 }
 
 a:link {
-color: #6276a4;
 text-decoration: underline;
 }
 
 a:visited {
-color: #6276a4;
 }
 
 a:hover {
-background-color: #6276a4;
-color: #ffffff;
 }
 
 p {
@@ -30,7 +24,6 @@ h2 {
 width: 94%;
 padding-left: 2%;
 margin-left: 1%;
-color: #000000;
 border-bottom: solid;
 border-left: solid;
 -moz-border-radius: 10px;
@@ -42,7 +35,6 @@ h3 {
 width: 92%;
 padding-left: 3%;
 margin-left: 1%;
-color: #000000;
 border-bottom: solid;
 border-left: solid;
 -moz-border-radius: 12px;
@@ -58,8 +50,6 @@ height: 50px;
 width: 78%;
 top: 0;
 left: 1%;
-background-color: #000000;
-color: #ffffff;
 text-align: center;
 font-size: 120%;
 line-height: 15%;
@@ -106,8 +96,6 @@ text-decoration: none;
 }
 
 div#corps a.cadre:hover {
-background-color: #000000;
-color: #ffffff;
 }
 
 div#corps a.cadre div.element {
@@ -132,8 +120,6 @@ height: auto;
 width: 20%;
 top: 90px;
 right: 0;
-background-color: #000000;
-color: #ffffff;
 -moz-border-radius-topleft: 25px;
 border-top-left-radius: 25px;
 -webkit-border-radius-topleft: 25px;
@@ -145,28 +131,22 @@ overflow: hidden;
 
 div#cartable h3 {
 width: 90%;
-color: #ffffff;
 text-align: center;
 border-bottom: solid;
 border-left: solid;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -webkit-border-radius: 12px;
-border-color: #ffffff;
 }
 
 div#cartable a:link {
-color: #aaaabb;
 text-decoration: underline;
 }
 
 div#cartable a:visited {
-color: #aaaabb;
 }
 
 div#cartable a:hover {
-background-color: #aaaabb;
-color: #223355;
 }
 
 div#soulier {
@@ -175,7 +155,6 @@ top: 5px;
 right: 5px;
 height: 20px;
 width: 98%;
-color: #000000;
 }
 
 div#soulier p {

style/bleu.css

@@ -0,0 +1,62 @@
+html, body {
+background-color: #e9ecf4;
+color: #223355;
+}
+
+a:link {
+color: #6276a4;
+}
+
+a:visited {
+color: #6276a4;
+}
+
+a:hover {
+background-color: #6276a4;
+color: #ffffff;
+}
+
+h2 {
+color: #555577;
+}
+
+h3 {
+color: #555577;
+}
+
+div#chapeau {
+background-color: #223355;
+color: #ffffff;
+}
+
+div#corps a.cadre:hover {
+background-color: #223355;
+color: #ffffff;
+}
+
+div#cartable {
+background-color: #223355;
+color: #ffffff;
+}
+
+div#cartable h3 {
+color: #ffffff;
+border-color: #ffffff;
+}
+
+div#cartable a:link {
+color: #aaaabb;
+}
+
+div#cartable a:visited {
+color: #aaaabb;
+}
+
+div#cartable a:hover {
+background-color: #aaaabb;
+color: #223355;
+}
+
+div#soulier {
+color: #000000;
+}

style/bleu_avec_menu.css

@@ -1,186 +0,0 @@
-html, body {
-height: 100%;
-width: 100%;
-min-width: 300px;
-margin: 0;
-padding: 0;
-background-color: #e9ecf4;
-color: #223355;
-}
-
-a:link {
-color: #6276a4;
-text-decoration: underline;
-}
-
-a:visited {
-color: #6276a4;
-}
-
-a:hover {
-background-color: #6276a4;
-color: #ffffff;
-}
-
-p {
-padding: 5px;
-}
-
-h2 {
-width: 94%;
-padding-left: 2%;
-margin-left: 1%;
-color: #555577;
-border-bottom: solid;
-border-left: solid;
--moz-border-radius: 10px;
-border-radius: 10px;
--webkit-border-radius: 10px;
-}
-
-h3 {
-width: 92%;
-padding-left: 3%;
-margin-left: 1%;
-color: #555577;
-border-bottom: solid;
-border-left: solid;
--moz-border-radius: 12px;
-border-radius: 12px;
--webkit-border-radius: 12px;
-}
-
-div#chapeau {
-position: relative;
-margin: 0;
-padding: 0;
-height: 50px;
-width: 78%;
-top: 0;
-left: 1%;
-background-color: #223355;
-color: #ffffff;
-text-align: center;
-font-size: 120%;
-line-height: 15%;
--moz-border-radius-bottomright: 25px;
-border-bottom-left-radius: 25px;
--webkit-border-radius-bottomright: 25px;
--moz-border-radius-bottomleft: 25px;
-border-bottom-right-radius: 25px;
--webkit-border-radius-bottomleft: 25px;
-}
-
-div#chapeau h1 {
-margin: 0;
-padding: 0;
-height: 50px;
-line-height: 50px;
-}
-
-div#corps {
-position: relative;
-width: 78%;
-left: 2%;
-}
-
-div#corps div.ensemble_element {
-min-height: 10em;
-}
-
-div#corps a.cadre {
-height: 9em;
-width: 11em;
-margin: 0 5px 10px 5px;
-float: left;
-border: thin solid #000000;
--moz-border-radius: 15px;
-border-radius: 15px;
--webkit-border-radius: 15px;
--moz-box-shadow: 1px 1px 8px #000000;
-box-shadow: 1px 1px 8px #000000;
--webkit-box-shadow: 1px 1px 8px #000000;
-overflow: hidden;
-text-align: center;
-text-decoration: none;
-}
-
-div#corps a.cadre:hover {
-background-color: #223355;
-color: #ffffff;
-}
-
-div#corps a.cadre div.element {
-height: 9em;
-margin-top: 1em;
-}
-
-div#corps a.cadre div.element img {
-margin-top: 2em;
-margin-right: auto;
-margin-left: auto;
-border: 0;
-}
-
-div#corps div.espace {
-clear: both;
-}
-
-div#cartable {
-position: absolute;
-height: auto;
-width: 20%;
-top: 90px;
-right: 0;
-background-color: #223355;
-color: #ffffff;
--moz-border-radius-topleft: 25px;
-border-top-left-radius: 25px;
--webkit-border-radius-topleft: 25px;
--moz-border-radius-bottomleft: 25px;
-border-bottom-left-radius: 25px;
--webkit-border-radius-bottomleft: 25px;
-overflow: hidden;
-}
-
-div#cartable h3 {
-width: 90%;
-color: #ffffff;
-text-align: center;
-border-bottom: solid;
-border-left: solid;
--moz-border-radius: 12px;
-border-radius: 12px;
--webkit-border-radius: 12px;
-border-color: #ffffff;
-}
-
-div#cartable a:link {
-color: #aaaabb;
-text-decoration: underline;
-}
-
-div#cartable a:visited {
-color: #aaaabb;
-}
-
-div#cartable a:hover {
-background-color: #aaaabb;
-color: #223355;
-}
-
-div#soulier {
-position: relative;
-top: 5px;
-right: 5px;
-height: 20px;
-width: 98%;
-color: #000000;
-}
-
-div#soulier p {
-margin: 0;
-padding: 0;
-font-size: 10px;
-text-align: center;
-}

style/bleu_sans_menu.css

@@ -1,186 +0,0 @@
-html, body {
-height: 100%;
-width: 80%;
-min-width: 300px;
-margin: 0 10%;
-padding: 0;
-background-color: #e9ecf4;
-color: #223355;
-}
-
-a:link {
-color: #6276a4;
-text-decoration: underline;
-}
-
-a:visited {
-color: #6276a4;
-}
-
-a:hover {
-background-color: #6276a4;
-color: #ffffff;
-}
-
-p {
-padding: 5px;
-}
-
-h2 {
-width: 94%;
-padding-left: 2%;
-margin-left: 1%;
-color: #555577;
-border-bottom: solid;
-border-left: solid;
--moz-border-radius: 10px;
-border-radius: 10px;
--webkit-border-radius: 10px;
-}
-
-h3 {
-width: 92%;
-padding-left: 3%;
-margin-left: 1%;
-color: #555577;
-border-bottom: solid;
-border-left: solid;
--moz-border-radius: 12px;
-border-radius: 12px;
--webkit-border-radius: 12px;
-}
-
-div#chapeau {
-position: relative;
-margin: 0 auto;
-padding: 0;
-height: 50px;
-width: 78%;
-top: 0;
-left: 1%;
-background-color: #223355;
-color: #ffffff;
-text-align: center;
-font-size: 120%;
-line-height: 15%;
--moz-border-radius-bottomright: 25px;
-border-bottom-left-radius: 25px;
--webkit-border-radius-bottomright: 25px;
--moz-border-radius-bottomleft: 25px;
-border-bottom-right-radius: 25px;
--webkit-border-radius-bottomleft: 25px;
-}
-
-div#chapeau h1 {
-margin: 0;
-padding: 0;
-height: 50px;
-line-height: 50px;
-}
-
-div#corps {
-position: relative;
-width: 98%;
-left: 2%;
-}
-
-div#corps div.ensemble_element {
-min-height: 10em;
-}
-
-div#corps a.cadre {
-height: 9em;
-width: 11em;
-margin: 0 5px 10px 5px;
-float: left;
-border: thin solid #000000;
--moz-border-radius: 15px;
-border-radius: 15px;
--webkit-border-radius: 15px;
--moz-box-shadow: 1px 1px 8px #000000;
-box-shadow: 1px 1px 8px #000000;
--webkit-box-shadow: 1px 1px 8px #000000;
-overflow: hidden;
-text-align: center;
-text-decoration: none;
-}
-
-div#corps a.cadre:hover {
-background-color: #223355;
-color: #ffffff;
-}
-
-div#corps a.cadre div.element {
-height: 9em;
-margin-top: 1em;
-}
-
-div#corps a.cadre div.element img {
-margin-top: 2em;
-margin-right: auto;
-margin-left: auto;
-border: 0;
-}
-
-div#corps div.espace {
-clear: both;
-}
-
-div#cartable {
-position: absolute;
-height: auto;
-width: 20%;
-top: 90px;
-right: 0;
-background-color: #000000;
-color: #ffffff;
--moz-border-radius-topleft: 25px;
-border-top-left-radius: 25px;
--webkit-border-radius-topleft: 25px;
--moz-border-radius-bottomleft: 25px;
-border-bottom-left-radius: 25px;
--webkit-border-radius-bottomleft: 25px;
-overflow: hidden;
-}
-
-div#cartable h3 {
-width: 90%;
-color: #ffffff;
-text-align: center;
-border-bottom: solid;
-border-left: solid;
--moz-border-radius: 12px;
-border-radius: 12px;
--webkit-border-radius: 12px;
-border-color: #ffffff;
-}
-
-div#cartable a:link {
-color: #aaaabb;
-text-decoration: underline;
-}
-
-div#cartable a:visited {
-color: #aaaabb;
-}
-
-div#cartable a:hover {
-background-color: #aaaabb;
-color: #223355;
-}
-
-div#soulier {
-position: relative;
-top: 5px;
-right: 5px;
-height: 20px;
-width: 98%;
-color: #000000;
-}
-
-div#soulier p {
-margin: 0;
-padding: 0;
-font-size: 10px;
-text-align: center;
-}

style/noir.css

@@ -0,0 +1,62 @@
+html, body {
+background-color: #ffffff;
+color: #000000;
+}
+
+a:link {
+color: #6276a4;
+}
+
+a:visited {
+color: #6276a4;
+}
+
+a:hover {
+background-color: #6276a4;
+color: #ffffff;
+}
+
+h2 {
+color: #000000;
+}
+
+h3 {
+color: #000000;
+}
+
+div#chapeau {
+background-color: #000000;
+color: #ffffff;
+}
+
+div#corps a.cadre:hover {
+background-color: #000000;
+color: #ffffff;
+}
+
+div#cartable {
+background-color: #000000;
+color: #ffffff;
+}
+
+div#cartable h3 {
+color: #ffffff;
+border-color: #ffffff;
+}
+
+div#cartable a:link {
+color: #aaaabb;
+}
+
+div#cartable a:visited {
+color: #aaaabb;
+}
+
+div#cartable a:hover {
+background-color: #aaaabb;
+color: #223355;
+}
+
+div#soulier {
+color: #000000;
+}

style/sans_menu.css

@@ -4,22 +4,16 @@ width: 80%;
 min-width: 300px;
 margin: 0 10%;
 padding: 0;
-background-color: #ffffff;
-color: #000000;
 }
 
 a:link {
-color: #6276a4;
 text-decoration: underline;
 }
 
 a:visited {
-color: #6276a4;
 }
 
 a:hover {
-background-color: #6276a4;
-color: #ffffff;
 }
 
 p {
@@ -30,7 +24,6 @@ h2 {
 width: 94%;
 padding-left: 2%;
 margin-left: 1%;
-color: #000000;
 border-bottom: solid;
 border-left: solid;
 -moz-border-radius: 10px;
@@ -42,7 +35,6 @@ h3 {
 width: 92%;
 padding-left: 3%;
 margin-left: 1%;
-color: #000000;
 border-bottom: solid;
 border-left: solid;
 -moz-border-radius: 12px;
@@ -58,8 +50,6 @@ height: 50px;
 width: 78%;
 top: 0;
 left: 1%;
-background-color: #000000;
-color: #ffffff;
 text-align: center;
 font-size: 120%;
 line-height: 15%;
@@ -106,8 +96,6 @@ text-decoration: none;
 }
 
 div#corps a.cadre:hover {
-background-color: #000000;
-color: #ffffff;
 }
 
 div#corps a.cadre div.element {
@@ -132,8 +120,6 @@ height: auto;
 width: 20%;
 top: 90px;
 right: 0;
-background-color: #000000;
-color: #ffffff;
 -moz-border-radius-topleft: 25px;
 border-top-left-radius: 25px;
 -webkit-border-radius-topleft: 25px;
@@ -145,28 +131,22 @@ overflow: hidden;
 
 div#cartable h3 {
 width: 90%;
-color: #ffffff;
 text-align: center;
 border-bottom: solid;
 border-left: solid;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -webkit-border-radius: 12px;
-border-color: #ffffff;
 }
 
 div#cartable a:link {
-color: #aaaabb;
 text-decoration: underline;
 }
 
 div#cartable a:visited {
-color: #aaaabb;
 }
 
 div#cartable a:hover {
-background-color: #aaaabb;
-color: #223355;
 }
 
 div#soulier {
@@ -175,7 +155,6 @@ top: 5px;
 right: 5px;
 height: 20px;
 width: 98%;
-color: #000000;
 }
 
 div#soulier p {