Passer au contenu principal

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

image.pngimage.png

Nouvelle page d’accueil

image.png

En bref :

·         Retirer toute perte d’espace inutile sous le bandeau afin d’accéder directement au contenu éditorial ;

o    Retrait du dessin de Plume qui était plus rattaché à la collection « sorcières » ;

o    Mettre le menu dans le bandeau

o    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

image.png

Nouvelle page d'une Collection

image.png

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

image.png

Nouvelle page avec des boites

image.png


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

image.png 

Nouvelle page d’un contenu éditorial avec du texte

image.png

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

image.png

Nouvelle page des Collections 

image.png


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);
}
Retour en haut