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

    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