From e41dcaf30f797012387468e439eb717afe71c313 Mon Sep 17 00:00:00 2001 From: chankalan Date: Tue, 18 Feb 2020 23:50:44 +0100 Subject: [PATCH] nettoyage css + avance design + menus --- body.html | 13 +- content/rubrique-dossier.html | 3 + content/rubrique-dossier.xml | 6 + inclure/boussole.html | 4 +- inclure/nav-secteurs.html | 3 +- paquet.xml | 3 +- readme.md | 24 ++- scss/_baz-compositions.scss | 2 +- scss/_baz-layout.scss | 15 +- scss/_baz-modeles.scss | 6 +- scss/_baz-nav.scss | 94 +++++++++--- scss/_baz-theme.scss | 271 +++++++++++++++++++++++++-------- scss/_baz-utils.scss | 2 +- scss/_baz-variables-perso.scss | 1 + scss/_baz-variables.scss | 17 ++- scss/baz.scss | 1 + 16 files changed, 353 insertions(+), 112 deletions(-) create mode 100644 content/rubrique-dossier.html create mode 100644 content/rubrique-dossier.xml create mode 100644 scss/_baz-variables-perso.scss diff --git a/body.html b/body.html index 8cfe867..22c5eda 100755 --- a/body.html +++ b/body.html @@ -10,8 +10,8 @@
-
+
@@ -21,14 +21,21 @@ - + [(#COMPOSITION|=={dossier}|et{#ENV{type-page}|=={article}}|non) + ]
+
+ #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} +
diff --git a/content/rubrique-dossier.html b/content/rubrique-dossier.html new file mode 100644 index 0000000..609160b --- /dev/null +++ b/content/rubrique-dossier.html @@ -0,0 +1,3 @@ + + + diff --git a/content/rubrique-dossier.xml b/content/rubrique-dossier.xml new file mode 100644 index 0000000..3edfb4c --- /dev/null +++ b/content/rubrique-dossier.xml @@ -0,0 +1,6 @@ + + Rubrique Dossier + Pour les gros dossiers de l'APRIL + images/rubrique-dossier.png + + diff --git a/inclure/boussole.html b/inclure/boussole.html index a1c48f9..102450a 100644 --- a/inclure/boussole.html +++ b/inclure/boussole.html @@ -1,5 +1,7 @@
- inclure un menu +
diff --git a/inclure/nav-secteurs.html b/inclure/nav-secteurs.html index e49f928..1f74549 100755 --- a/inclure/nav-secteurs.html +++ b/inclure/nav-secteurs.html @@ -1,10 +1,9 @@ - \ No newline at end of file + diff --git a/paquet.xml b/paquet.xml index b5fbae8..3d3396f 100644 --- a/paquet.xml +++ b/paquet.xml @@ -1,7 +1,7 @@ + diff --git a/readme.md b/readme.md index b3ac288..fd1df89 100644 --- a/readme.md +++ b/readme.md @@ -1,27 +1,43 @@ +Base de squelettes pour les sites de l'APRIL - +Nécessite : git clone https://git.spip.net/spip-contrib-extensions/z-core.git + git clone https://git.spip.net/spip-contrib-extensions/facteur.git + git clone https://git.spip.net/spip-contrib-extensions/saisies.git + git clone https://git.spip.net/spip-contrib-extensions/nospam.git + git clone https://git.spip.net/spip-contrib-extensions/scssphp.git + git clone https://git.spip.net/spip-contrib-extensions/noizetier.git + git clone https://git.spip.net/spip-contrib-extensions/n-core.git + git clone https://git.spip.net/spip-contrib-extensions/cache.git + git clone https://git.spip.net/spip-contrib-extensions/crayons.git + git clone https://git.spip.net/spip-contrib-extensions/porte_plume_partout.git + git clone https://git.spip.net/spip-contrib-extensions/basicone.git + git clone https://git.spip.net/spip-contrib-extensions/mailcrypt.git + git clone https://git.spip.net/spip-contrib-extensions/feuillederoute.git + git clone https://git.spip.net/spip-contrib-extensions/compositions.git + git clone https://git.spip.net/spip-contrib-extensions/pages.git + git clone https://git.spip.net/spip-contrib-extensions/bellespuces.git git clone https://github.com/mistergraphx/porte_plume_intertitres.git + git clone https://github.com/nd-/tri_par_rubrique.git - - - git clone https://git.spip.net/spip-contrib-extensions/role_documents.git + +git clone https://git.spip.net/spip-contrib-extensions/menus.git diff --git a/scss/_baz-compositions.scss b/scss/_baz-compositions.scss index 211fc6f..e7dbe83 100644 --- a/scss/_baz-compositions.scss +++ b/scss/_baz-compositions.scss @@ -5,7 +5,7 @@ &.annees { font-size:0.8em; line-height:1.8; font-style:italic; color:$grayLight; clear:left; &:after { font-size:0.85em; font-style:normal; } } - &.archive { cursor:pointer; color:$linkColor; } + &.archive { cursor:pointer; color:$couleurLien; } &.mois_archives { width:0; overflow:hidden; margin:0; height:0; &.ouvert { width:auto; height:auto; overflow:visible; display:inline; } } diff --git a/scss/_baz-layout.scss b/scss/_baz-layout.scss index 1f4b325..e787e5f 100644 --- a/scss/_baz-layout.scss +++ b/scss/_baz-layout.scss @@ -5,15 +5,15 @@ html, body { margin: 0; padding: 0; height: 100%; - background: $backgroundColor; + background: $couleurBackground; } .page--container { margin: 0 auto; padding: 0 1em; width: 100%; - @include media($bp-largeplus-up) { - width: $screen-largeplus; + @include media($bp-large-up) { + width: $screen-large; padding: 0; } } @@ -45,12 +45,17 @@ html, body { .contentMain { // deux tiers width: 60%; - margin-right: $spacer; + margin-right: $spacer*2; + .composition_dossier & { + width:100%; + margin:0; + } } .contentAside { // un tiers width: 40%; - margin-left: $spacer; + margin-left: $spacer*2; } } + diff --git a/scss/_baz-modeles.scss b/scss/_baz-modeles.scss index 6fc0b73..8fe55f3 100644 --- a/scss/_baz-modeles.scss +++ b/scss/_baz-modeles.scss @@ -1,8 +1,8 @@ /* habillage des modeles */ /* */ .iconemodele { - color: $colorPrincipale; font-family:'Fontawesome',sans-serif; - a & { background-color:$backgroundColor; } + color: $couleurPrincipale; font-family:'Fontawesome',sans-serif; + a & { background-color:$couleurBackground; } } .iconemodele.bloc { &.largeur { width: (50% - 3em); max-width:100%; } @@ -23,7 +23,7 @@ &:after { display:block; clear:both; content:''; } .icon { font-size:60px; float:left; margin-right:($spacer/2); &:before { - color: $colorPrincipale; + color: $couleurPrincipale; position: relative; top: 0.1em; } diff --git a/scss/_baz-nav.scss b/scss/_baz-nav.scss index e24ad13..cb2deb0 100644 --- a/scss/_baz-nav.scss +++ b/scss/_baz-nav.scss @@ -3,48 +3,102 @@ // ------------------------------------------ // Habillage general des menus de nav -.menu { clear: both; margin-bottom: 1.5em; text-align: left; +.menu { + clear: both; + margin-bottom: 1.5em; + text-align: left; p {} - ul { margin-bottom: 1.5em; } + ul { + margin-bottom: 1.5em; + } ul li {} - ul li ul { margin-left: 1.5em; list-style: circle; } + ul li ul { + margin-left: 1.5em; + list-style: circle; + } } .nav { - ul { margin:0; padding:0; } - li {display:inline;line-height:1.2;} - a, a:visited { display: inline-block; padding:0.5em; margin:0 0 0.4em; text-decoration: none; line-height:1.4; border:0; + ul { + margin:0; + padding:0; + } + li { + display:inline; + line-height:1.2; + } + a, a:visited { + display: inline-block; + padding:0.3em 0 0.2em; + margin:0 0.5em 0.4em; + text-decoration: none; + line-height:1.4; + border-bottom:3px solid white; + .header__boussole & { + font-size:0.8rem; + font-weight:400; + padding:0.6em 1em; + margin:0; + color:white; + border:0; + } .on &, &.on, &:focus, &:hover, - &:active { background:$colorPrincipale; color:$white; } + &:active { + border-color:$couleurSecondaire; + .header__boussole & { + background:$couleurSecondaire; + } + } } .pagination { margin:0 0 1rem; } } /* header = nav-principale */ -.page__header { - .nav { font-size:0.9rem; - > ul { text-align:right; } - a { font-weight:700; } +.page__header > .page--container { + .nav { + font-size:0.9rem; + > ul { + text-align:right; + } + a { + font-weight:700; + } } } // aside // ------------------------------------ .contentAside { - .nav { padding:0; - li {display:block; } - a { width:100%; } + .nav { + padding:0; + li { + display:block; + } + a { + width:100%; + } & .blog { - a { line-height:1; padding:1em; font-weight:700; - p { font-weight:400; margin:0; - &.date { font-size:90%; margin:0 0 0.3em; } - &.introduction { font-size:0.8em; margin-top:0.5em; } + a { + line-height:1; + padding:1em; + font-weight:700; + p { + font-weight:400; + margin:0; + &.date { + font-size:90%; + margin:0 0 0.3em; + } + &.introduction { + font-size:0.8em; + margin-top:0.5em; + } } -/* &:hover, &:focus, &:active, &.on { background:darken($grayLighter,10); color:$colorPrincipaleDowner; } */ +/* &:hover, &:focus, &:active, &.on { background:darken($grayLighter,10); color:$couleurPrincipaleDowner; } */ } } } @@ -57,6 +111,6 @@ top:0; left:0; right:0; - background-color:$gray; + background-color:$couleurPrincipale; color:white; } diff --git a/scss/_baz-theme.scss b/scss/_baz-theme.scss index 79bbc28..9f01345 100755 --- a/scss/_baz-theme.scss +++ b/scss/_baz-theme.scss @@ -2,8 +2,8 @@ // theme-baz.scss // 2020 - collectif APRIL - - +// Elements principaux +// ------------------------------------------ .page__header { @@ -18,7 +18,7 @@ .page__footer { color:white; - background-color:$gray; + background-color:$couleurPrincipale; p { font-size:0.9rem; } @@ -31,25 +31,40 @@ +.page_article.composition_dossier { + .contentMain { + background-color:$couleurBackgroundTexte; + } +} -// Elements principaux -// ------------------------------------------ - // Hyperliens // ---------------------------------------------- -a { text-decoration:none; border-bottom:1px dotted; } -a, a:visited { color: $textColor; } +a { + text-decoration:none; border-bottom:1px dotted; +} +a, a:visited { + color: $couleurLien; +} a:focus, a:hover, -a:active, a.on { background-color:$colorPrincipale; color:white; } -a:not([href]) { cursor:text; } +a:active, a.on { + border-color:$couleurSecondaire; +} +a:not([href]) { + cursor:text; +} // plugin liens sociaux, pas pareil que les autres liens externes -.sociaux a.external:after { display:none; } +.sociaux a.external:after { + display:none; +} -.accesrapide { margin:0; padding:0; } +.accesrapide { + margin:0; + padding:0; +} @@ -60,67 +75,148 @@ a:not([href]) { cursor:text; } // ------------------------------------------ // fil d'ariane -.arbo { clear: none; font-size: .7em; } -.arbo * { font-weight: normal; } +.arbo { + clear: none; + font-size: .7em; + +} +.arbo * { + font-weight: normal; +} .arbo, .arbo a, -.arbo a:visited { color: lighten($textColor, 30%); } -.arbo a:hover { background: $gray; color: white; } +.arbo a:visited { + color: lighten($couleurTexte, 30%); +} +.arbo a:hover { + background: $gray; + color: white; +} -.cartouche { margin-bottom: 1.5em; +.cartouche { + margin-bottom: 1.5em; h1 { margin-bottom: 0; font-weight:700; - .soustitre { display:block; } + .soustitre { + display:block; + } } p { margin-bottom: 0; } - .surtitre{} - .soustitre {} + .surtitre { + + } + .soustitre { + + } +} +abbr.published { + border: 0; } -abbr.published { border: 0; } @media print { - abbr[title].published:after { content: ""; } - abbr[title].dtreviewed:after { content: ""; } + abbr[title].published:after { + content: ""; + } + abbr[title].dtreviewed:after { + content: ""; + } +} +.publication, .info-publi { + margin: 1.5em 0 0; + font-size: .9em; + font-style: italic; +} +html[dir="rtl"] .info-publi { + font-style: normal; } -.publication, .info-publi { margin: 1.5em 0 0; font-size: .9em; font-style: italic; } -html[dir="rtl"] .info-publi { font-style: normal; } .traductions { font-size: .9em; } -.traductions a[hreflang]:after { content: ''; } +.traductions a[hreflang]:after { + content: ''; +} -.chapo { font-size:120%; } +.chapo { + font-size:120%; +} .texte { } -.hyperlien { display: block; padding: 1.5em 50px; background: $grayLighter; font-weight: bold; } -.ps, .notes { margin: 6em 0 1.5em; clear:both; } -.notes { clear: both; font-size: .9em; } +.hyperlien { + display: block; + padding: 1.5em 50px; + background: $grayLighter; + font-weight: bold; +} +.ps, .notes { + margin: 6em 0 1.5em; + clear:both; +} +.notes { + clear: both; + font-size: .9em; +} h1,.h1, -h2,.h2 { line-height: 1.2; font-weight:700; } -h2, .h2 { margin-top:1em; } +h2,.h2 { + line-height: 1.2; + font-weight:700; +} +h2, .h2 { + margin-top:1em; +} .liste.articles:not(.periode) { - li { border-top:1px solid $grayLight; padding:2em 0 0; margin:2em 0; - .h3-like { font-size:1.2em; } - .introduction p { margin:0; } - &:last-of-type { /*border-bottom:1px solid $grayLight;*/ padding-bottom:2em; } + li { + border-top:1px solid $grayLight; + padding:2em 0 0; + margin:2em 0; + .h3-like { + font-size:1.2em; + } + .introduction p { + margin:0; + } + &:last-of-type { + padding-bottom:2em; + } } } -.liste { margin:2em 0; - &.syndic ul.liste-items { padding:0 0.5em 0 2em; } +.liste { + margin:2em 0; + &.syndic ul.liste-items { + padding:0 0.5em 0 2em; + } li.short { margin:1em 0 1.5em; - .publication { margin:0; } + .publication { + margin:0; + } + } + .item { + clear:both; + margin:2em 0 3em; } - .item { clear:both; margin:2em 0 3em; } } -.spip_logo { max-width:100%; } +.spip_logo { + max-width:100%; +} -.spip_document { max-width:100%; height:auto; } -iframe { max-width:100%; } +.spip_document { + max-width:100%; + height:auto; +} +iframe { + max-width:100%; +} -.credits { clear: both; display:block; text-align: left; font-size:0.6em; } +.credits { + clear: both; + display:block; + text-align: left; + font-size:0.6em; +} // Listes et tableaux -dl.spip dt { background: url(img/def.png) no-repeat 25px .5em; } +dl.spip dt { + background: url(img/def.png) no-repeat 25px .5em; +} dl.spip dd {} /*table.spip {margin:1em 0;} @@ -136,7 +232,9 @@ table.spip tfoot { border-top: 1px solid; }*/ // Formulaires : variantes et cas particuliers // ----------------------------------------------- -.formulaire_spip { margin-bottom: 1.5em; } +.formulaire_spip { + margin-bottom: 1.5em; +} fieldset { width: 100%; margin: 0; @@ -145,8 +243,12 @@ fieldset { -moz-box-sizing: border-box; } -label { display: block; } -.erreur_message { display: block; } +label { + display: block; +} +.erreur_message { + display: block; +} input.text,textarea { width: 100%; -ms-box-sizing: border-box; @@ -154,30 +256,71 @@ input.text,textarea { -moz-box-sizing: border-box; box-sizing: border-box; } -.content input.text { width: 50%; } -textarea { width: 100%; } -button:hover, button:active, button:focus { background-color: $colorPrincipale; color:$colorPrincipaleDowner; outline:none !important; } +.content input.text { + width: 50%; +} +textarea { + width: 100%; +} +button:hover, button:active, button:focus { + background-color: $couleurPrincipale; + color:$couleurPrincipaleDowner; + outline:none !important; +} // formulaire recherche un peu a part -.recherche { margin-bottom:$spacer; max-width:350px; /* placer dans un conteneur mini 350px */ +.recherche { + margin-bottom:$spacer; + max-width:350px; /* placer dans un conteneur mini 350px */ .flex { - .input-group-prepend { width:80%; - input { border-radius:0; border:1px solid #ccc; border-right:0; } + .input-group-prepend { + width:80%; + input { + border-radius:0; + border:1px solid #ccc; + border-right:0; + } } - .input-group-append { width:20%; - button { border-radius:0; border:1px solid #ccc; height:100%; } + .input-group-append { + width:20%; + button { + border-radius:0; + border:1px solid #ccc; + height:100%; + } + } + input, button { + width:100%; + line-height:1.8; + } + input { + padding:0.2rem 0.4rem; + } + button { + padding:0; + margin:0; } - input, button { width:100%; line-height:1.8; } - input { padding:0.2rem 0.4rem; } - button { padding:0; margin:0; } } } // Choix des mots-clefs -ul.choix_mots { display: block; margin: 0; padding: 0; list-style: none; - li { clear: none; float: left; display: block; width: 30%; padding: 1%; } - li label { display: inline; font-weight: normal; } +ul.choix_mots { + display: block; + margin: 0; + padding: 0; + list-style: none; + li { + clear: none; + float: left; + display: block; + width: 30%; + padding: 1%; + } + li label { + display: inline; + font-weight: normal; + } } .formulaire_spip .bugajaxie { display: none; } //IE/Win @@ -196,8 +339,8 @@ ul.choix_mots { display: block; margin: 0; padding: 0; list-style: none; } // page auteur cf js/script.js .formulaire_ecrire_auteur { margin-top:3em; padding-top:1em; border-top:1px solid $grayLighter; - legend { cursor:pointer; color:$linkColor; - &:hover { background-color:$colorPrincipale; color:$colorPrincipaleDowner; } + legend { cursor:pointer; color:$couleurLien; + &:hover { background-color:$couleurPrincipale; color:$couleurPrincipaleDowner; } } } diff --git a/scss/_baz-utils.scss b/scss/_baz-utils.scss index e7973c6..3bf3633 100644 --- a/scss/_baz-utils.scss +++ b/scss/_baz-utils.scss @@ -3,7 +3,7 @@ .btn, .btn:visited, button { padding:0.6em 1em 0.5em; margin:0.2rem; display:inline-block; background-color:$grayLighter; color:$grayDarker; border:0; @include border-radius(0); - &:hover { color:$white; background-color:$linkColor; } + &:hover { color:$white; background-color:$couleurLien; } } diff --git a/scss/_baz-variables-perso.scss b/scss/_baz-variables-perso.scss new file mode 100644 index 0000000..c9c0ff6 --- /dev/null +++ b/scss/_baz-variables-perso.scss @@ -0,0 +1 @@ +/* des variables perso pour chacun */ diff --git a/scss/_baz-variables.scss b/scss/_baz-variables.scss index 026e8e5..ec13ad3 100755 --- a/scss/_baz-variables.scss +++ b/scss/_baz-variables.scss @@ -32,17 +32,20 @@ $purple: #7a43b6; // couleur du theme -$colorPrincipale: #00365b; -$colorSecondaire: lignten($colorPrincipale,50%); +$couleurPrincipale: #00365b; +$couleurSecondaire: #f7651a; + +$couleurBackground: $white; +$couleurTexte: $grayDark; + +$couleurBackgroundTexte: #f5faff; -$backgroundColor: $white; -$textColor: $grayDark; // Links // ------------------------- -$linkColor: $colorPrincipale; -$linkColorHover: darken($linkColor, 30%); -$colorPrincipaleDowner: lighten($linkColor, 60%); +$couleurLien: $couleurPrincipale; +$couleurLienHover: $couleurSecondaire; +$couleurPrincipaleDowner: lighten($couleurLien, 60%); // ------------------------------ diff --git a/scss/baz.scss b/scss/baz.scss index f1b074b..b82b9de 100755 --- a/scss/baz.scss +++ b/scss/baz.scss @@ -2,6 +2,7 @@ @import 'scss/baz-mixins'; @import 'scss/baz-variables'; +@import 'scss/baz-variables-perso'; @import 'scss/helpers'; @import 'scss/baz-utils';