siteweb/baz_april
7
1
Fork 0
Code Pull Requests Releases Wiki Activity

nettoyage css + avance design + menus

Browse Source
This commit is contained in:
chankalan 2020-02-18 23:50:44 +01:00
parent 70678c8416
commit e41dcaf30f
16 changed files with 353 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
body.html
View File

@ -10,8 +10,8 @@
<div class="page--container">
<INCLURE{fond=header/#ENV{type-page},env} />
<INCLURE{fond=inclure/nav-secteurs,env} />
<INCLURE{fond=inclure/boussole} />
</div>
<INCLURE{fond=inclure/boussole} />
</header>
<div class="page__content page--container">
@ -21,14 +21,21 @@
<INCLURE{fond=extra/#ENV{type-page},env} />
</aside>
</main><!--.main-->
[(#COMPOSITION|=={dossier}|et{#ENV{type-page}|=={article}}|non)
<aside class="contentAside">
<INCLURE{fond=aside/#ENV{type-page},env} />
</aside><!--.aside-->
</aside><!--.aside-->]
</div>
<footer class="page__footer">
<div class="page--container">
<div class="menus_footer">
#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}
</div>
<INCLURE{fond=footer/#ENV{type-page},env} />
</div>
</footer>

3
content/rubrique-dossier.html Normal file
View File

@ -0,0 +1,3 @@
<BOUCLE_content(RUBRIQUES){id_rubrique}>
<INCLURE{fond=content/rubrique,id_rubrique,type-page=rubrique} />
</BOUCLE_content>

6
content/rubrique-dossier.xml Normal file
View File

@ -0,0 +1,6 @@
<composition>
<nom>Rubrique Dossier</nom>
<description>Pour les gros dossiers de l'APRIL</description>
<icon>images/rubrique-dossier.png</icon>
<branche type="article" composition="dossier" />
</composition>

4
inclure/boussole.html
View File

@ -1,5 +1,7 @@
<div class="header__boussole">
<div class="page--container">
inclure un menu
<nav class="nav">
<a href="#">inclure un menu</a>
</nav>
</div>
</div>

3
inclure/nav-secteurs.html
View File

@ -1,10 +1,9 @@
<B_nav>
<nav class="nav" aria-label="Menu principal">
<ul class="nav-list">
<li class="nav-item[ (#SI_PAGE{sommaire})on]"><a href="#URL_SITE_SPIP/"><:zcore:accueil:></a></li>
<BOUCLE_nav(RUBRIQUES) {racine} {par num titre, titre}>
<li class="nav-item[ (#EXPOSE)][ (#COMPTEUR_BOUCLE|=={1}|oui)first][ (#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|oui)last]"><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>#TITRE</a></li>
</BOUCLE_nav>
</ul>
</nav>
</B_nav>
</B_nav>

3
paquet.xml
View File

@ -1,7 +1,7 @@
<paquet
prefix="baz_april"
categorie="squelette"
version="0.1.0"
version="0.1.1"
schema="0.0.1"
etat="dev"
compatibilite="[3.2.7;3.3.*]"
@ -33,6 +33,7 @@
<necessite nom="feuillederoute" compatibilite="[1.2.0;[" />
<necessite nom="tri_par_rubrique" compatibilite="[1.4.2;[" />
<necessite nom="basicone" compatibilite="[0.1.3;[" />
<necessite nom="menus" compatibilite="[1.7.25;[" />
<utilise nom="compositions" compatibilite="[3.5.9;[" />
<utilise nom="photoswipe" compatibilite="[0.3.4;[" />

24
readme.md
View File

@ -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

2
scss/_baz-compositions.scss
View File

@ -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; }
}

15
scss/_baz-layout.scss
View File

@ -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;
}
}

6
scss/_baz-modeles.scss
View File

@ -1,8 +1,8 @@
/* habillage des modeles */
/* <icone> */
.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;
}

94
scss/_baz-nav.scss
View File

@ -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;
}

271
scss/_baz-theme.scss
View File

@ -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; }
}
}

2
scss/_baz-utils.scss
View File

@ -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; }
}

1
scss/_baz-variables-perso.scss Normal file
View File

@ -0,0 +1 @@
/* des variables perso pour chacun */

17
scss/_baz-variables.scss
View File

@ -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%);
// ------------------------------

1
scss/baz.scss
View File

@ -2,6 +2,7 @@
@import 'scss/baz-mixins';
@import 'scss/baz-variables';
@import 'scss/baz-variables-perso';
@import 'scss/helpers';
@import 'scss/baz-utils';