Perséide FemEnRev : Nouvelle charte graphique

Modification de la CSS

Pour chaque page type vous trouverez le visuel actuel, et dessous, le nouveau visuel proposé.

Page d’accueil

Nouvelle page d’accueil

En bref :

•          Retirer toute perte d’espace inutile sous le bandeau afin d’accéder directement au contenu éditorial ;
• Retrait du dessin de Plume qui était plus rattaché à la collection « sorcières » ;
• Mettre le menu dans le bandeau
• Mettre le moteur de recherche dans le bandeau, sous le menu à droite.
• Plus de sobriété ; Charter le site sur le modèle V1 des Perséides (cf. ARCPA) ;
• Utiliser les trois colonnes pour moderniser ;
• Eclaircir l’ensemble : passer du fond bleu marine à l’eau de rose ( !) pour Les Collections, et violet-fushia pour le bandeau ;
• Mettre la couleur directement sur le titre de niveau 3, et non plus seulement dans une balise autour d’un petit groupe de mots (cf. Bienvenu sur « femEnRev ») ;

TODO dans main.css :

.aui h2 {
 font-size: 3em;
font-weight: normal;
color: #a131b7;
margin-bottom: 0.9em;
}
.aui h3 {
  font-size: 24.5px;
  font-weight: normal;
  margin-bottom: 0.7em;
}
body.femenrev .perseePrimary {
  color: #a131b7;
  font-weight: normal;
}
 .aui h3 {
  font-size: 1.9em;
  font-weight: normal;
}
 @media screen and (min-width: 1068px)

body.femenrev div.collection-title h6.collection-label {
  font-size: 1.2em;
  font-family: "Bebas Kai",ifao-n-copte,new-gardiner,"Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing: .06em;
  color: #a131b7;
  text-align: center;
  width: 275px;
  font-weight: normal;
}

 body.femenrev div.collection-title-carousel h3 {
  background-color: #f7eff6;
  padding-left: .5em;
  color: #ecf4e6;
}

 body.femenrev #content p {
  font-family: Roboto,Arial,sans-serif;
  color: black;
  font-weight: normal;
  width: 95%;
  line-height: 1.6em;
  font-size: 1em;
  display: block;
  justify-content: normal;
}

.aui p {
  margin: 0 0 10px;
}

Page d’une collection

Nouvelle page d'une Collection

Figure 2 : Faire remonter la lecture de la collection sous le bandeau, sans autre chemin que « retour à la liste des collections » : pas de fil d’ariane (obsolète)

Page d’un contenu éditorial avec des boites

Nouvelle page avec des boites

TODO :

Supprimer les nœuds inutiles au-dessus des boites pour ne garder que :

<p><a hre=’url’>Retour au Corpus</a></p>

Page d’un contenu éditorial avec du texte

Nouvelle page d’un contenu éditorial avec du texte

TODO :

TODO dans main.css et aui.css :

.aui h3 {
  font-size: 1.9em;
  font-weight: normal;
}
.aui h1, .aui h2, .aui h3 {
  line-height: 1.6em;
  font-weight: normal;
  margin-bottom: 0.7em;
}
body.femenrev #content p {
  font-family: Roboto,Arial,sans-serif;
  color: black;
  font-weight: normal;
  width: 95%;
  line-height: 1.6em;
  font-size: 1em;
  display: block;
  justify-content: normal;
}

Page des collections

Nouvelle page des Collections 

Figure 3 : Les images de couverture on un bord blanc avec une ombre portée, effet devant derrière, pour plus de matérialité sur les revues.

TODO dans main.css :

 

body.femenrev #collectionList .collection .collection-cover {
  display: inline-block;
  border: 8px solid whitesmoke;
  margin-bottom: 1em;
  position: relative;
  width: 200px;
  height: 283px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}