diff --git a/GNUmakefile b/GNUmakefile index 0f39b22..7b80d65 100644 --- a/GNUmakefile +++ b/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 !" diff --git a/LISMOI b/LISMOI index 97300e0..fd48e27 100644 --- a/LISMOI +++ b/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 ]]--# diff --git a/TACHES b/TACHES index 83f4d50..ac7c190 100644 --- a/TACHES +++ b/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 diff --git a/composants/entete.html b/composants/entete.html index 3891280..4b6cf0e 100644 --- a/composants/entete.html +++ b/composants/entete.html @@ -5,6 +5,7 @@ @@ACCUEIL_PORTEAIL@@ +
diff --git a/configrc.exemple b/configrc.exemple index cd2238f..bac7e4e 100644 --- a/configrc.exemple +++ b/configrc.exemple @@ -1,8 +1,9 @@ ## CONFIGURATION DESTINATION = porteail INDEX = $(DESTINATION)/index.xhtml -CSS_SANS_MENU = bicolore_sans_menu.css -CSS_AVEC_MENU = bicolore_avec_menu.css +CSS_SANS_MENU = sans_menu.css +CSS_AVEC_MENU = avec_menu.css +CSS_COULEUR = noir.css CSS_NOM = defaut.css TITRE = Titre par défaut ACCUEIL = Accueil - $(TITRE) diff --git a/style/bicolore_avec_menu.css b/style/avec_menu.css similarity index 85% rename from style/bicolore_avec_menu.css rename to style/avec_menu.css index 7eb00f5..7837f77 100644 --- a/style/bicolore_avec_menu.css +++ b/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 { diff --git a/style/bleu.css b/style/bleu.css new file mode 100644 index 0000000..3d6d160 --- /dev/null +++ b/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; +} diff --git a/style/bleu_avec_menu.css b/style/bleu_avec_menu.css deleted file mode 100644 index 262499e..0000000 --- a/style/bleu_avec_menu.css +++ /dev/null @@ -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; -} diff --git a/style/bleu_sans_menu.css b/style/bleu_sans_menu.css deleted file mode 100644 index 5edceab..0000000 --- a/style/bleu_sans_menu.css +++ /dev/null @@ -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; -} diff --git a/style/noir.css b/style/noir.css new file mode 100644 index 0000000..769b064 --- /dev/null +++ b/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; +} diff --git a/style/bicolore_sans_menu.css b/style/sans_menu.css similarity index 85% rename from style/bicolore_sans_menu.css rename to style/sans_menu.css index e94dfe4..a4ef963 100644 --- a/style/bicolore_sans_menu.css +++ b/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 {