Browse Source

nettoyage css + avance design + menus

master
chankalan 2 years ago
parent
commit
e41dcaf30f
  1. 13
      body.html
  2. 3
      content/rubrique-dossier.html
  3. 6
      content/rubrique-dossier.xml
  4. 4
      inclure/boussole.html
  5. 3
      inclure/nav-secteurs.html
  6. 3
      paquet.xml
  7. 24
      readme.md
  8. 2
      scss/_baz-compositions.scss
  9. 15
      scss/_baz-layout.scss
  10. 6
      scss/_baz-modeles.scss
  11. 94
      scss/_baz-nav.scss
  12. 271
      scss/_baz-theme.scss
  13. 2
      scss/_baz-utils.scss
  14. 1
      scss/_baz-variables-perso.scss
  15. 17
      scss/_baz-variables.scss
  16. 1
      scss/baz.scss

13
body.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1
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';

Loading…
Cancel
Save