Suite de l’épisode 2.
Au programme, le responsive et les finitions de la page d’accueil.

Les images

Si votre CSS n’avait qu’un seul sélecteur indispensable pour devenir responsive et s’afficher sur mobile, ce serait celui‐ci.

img{
  display:block;
  max-width:100%;
  height:auto;
}

Ces quelques lignes vont empêcher les images d’être plus grandes que la fenêtre et maintenir leurs proportions. Le max-width:100% correspond aussi au conteneur de l’image. Cette recette s’applique aussi pour contraindre l’image à sa cellule de grille.

Les cellules

En regardant notre code (de l’épisode 2), une seule cellule s’étend sur 2 colonnes (span 2), celle avec la classe l.

.l{
  grid-column-end: span 2; /* ! ici */
  grid-row-end:span 2;
}

Pour contrer ceci, nous allons l’appliquer seulement à partir de 872px

@media (min-width:872px){
  .l{
    grid-column-end: span 2;
    grid-row-end:span 2;
  }  
}

et introduire une nouvelle règle par défaut pour la restreindre à 1 colonne.

.l{
  grid-column-end: span 1;
  grid-row-end:span 1;
}
 
@media (min-width:872px){
  .l{
    grid-column-end: span 2;
    grid-row-end:span 2;
  }  
}

Et voilà.

Finitions

Finitions du header :

/* décoration un peu complexe pour marquer la page en cours */
.current{
  position: relative;
  color:#000;
}
.current::after{
  content:' ';
  display: block;
  width:50%;
  height:6px;
  border-top:1px solid #EA5046;
  border-bottom:1px solid #EA5046;
  bottom:-12px;
  transform: translate(50%,0) rotate(-15deg);
  opacity: 1;
  position: absolute;
}
 
/* couleur des liens */
nav{
  color:#EA5046;
}
/* suppression du soulignement */
nav a{
  text-decoration: none;
}
/* icône burger */ 
nav.mobile{
  display:block;
  font-size: 24px;
  line-height: 1;
}
nav.mobile a{
  padding:7px 14px;
  height:48px;
  background:#EA5046;
  color:#fff;
  display: block;
}
 
/* masque ou montre selon l’écran */
@media (min-width:896px){
  nav.mobile{
    display:none;
  }
}
nav.no-mobile{
  display:none;
}
@media (min-width:896px){
  nav.no-mobile{
    display:block;
  }
}

Finitions du footer :

.footer{
  background: #fff;
  display:grid;
  grid-gap: 24px;
  gap:24px;
  grid-template-columns: 1fr;
  justify-content: center;
  padding:0 24px;
}
 
.footer a{
  display:block;
  padding:12px 0;
  border-bottom:1px solid #eee;
}
.footer .current{
  color:#000;
  font-weight: 700;
}
 
.footer .current::after{
  display: none;
}
 
@media (min-width:640px){
  .footer{
      grid-template-columns: repeat(auto-fill, 400px);
    }
}
 
@media (min-width:896px){
  .footer{
    display:none;
  }
}

Codepen intermédiaire.

Version avec des liens…

Petite arnaque de départ dans les épisodes précédents, les images ne sont pas dans des liens. Cela permet d’avoir un code plus lisible, sans pour autant supprimer les problèmes.

En mixant avec un précédent article et en modifiant le HTML/CSS, la grille reste en place et aucun élément n’interfère.

Codepen final

La fin de cet épisode est assez rapide et demande une certaine pratique. Il s’agit de « démonstration » à étudier.