Produits Entr'ouvert » Intégrations graphiques Publik

À la lecture du code :

html {
    font-size: 10px;
}

body {
    font-size: 1.7rem;
    line-height: 18px;
    font-weight: 300;
}

Je déconseille fortement. On voit souvent cette idée de basculer la font-size à 10px (ou .625em) sur html pour faciliter ensuite l'utilisation de em car ensuite 1.7em -> 17px.
Mais c'est une mauvaise idée d'un point de vue accessibilité, car cela supprime la possibilité à l'usager de choisir la taille de la font via les préférences du navigateur.
La bonne pratique est de laisser font-size 100% sur le body.

Si tu souhaites donner un équivalent em/px, tu peux utiliser sass pour cela

$base-font: 16; // parce que par défaut les navigateurs sont basés en 16px.

h1 {
    font-size: 43em / $base-font; // équivalent 43px
}

Tu auras ainsi un équivalent 43px pour ton titre.
Et si l'usager a une mauvaise vue et qu'il paramètre son browser sur 18px pour le texte courant, ben il aura une augmentation homothétique du titre à 48px, comme un zoom… et tu respectes son choix.

Ensuite `line-height: 18px;` sur le body ?? Je ne comprends pas et j'ai vraiment peur des effets de bords.
line-height s'utilise si possible sans unité.

div#toplinks a

Le code est très proche des boutons, autant éviter tout ce code et faire héritage du style des boutons directement (note pour moi : et pourquoi pas ajouter un style "bouton" pour les liens de connexion dans le core)

div#toplinks a {
  @extend %button;
}

:after => ::after utiliser un double point pour les pseudo-elements

#footer-wrapper {
    height: 400px;
}

Ça me parait vraiment étonnant de fixer un height au footer, que se passe-t-il si le contenu overflow ?

Je passe à la phase test.

2e salve.

toplinks

pense à masquer le slash séparateur entre "connexion" et "Inscription"

div#toplinks {
    .sep {
        display: none;
    }
}

Option Image de la page

C'est une option que tu oublies toujours de tester, pense à te créer une page en local avec l'option activée sur une page de test. Là elle ne fonctionne pas puisque la nav est sticky, il faut la desactiver.

Cellule texte

Cette cellule a un fonctionement historique un peu bancal: elle n'a pas de champ titre (#42968).
On y applique donc le style du %title (et option foldable) au h2:first-child de la cellule (_cell.scss l.143). Voilà pourquoi la cellule n'a pas de padding et que l'espace entre le texte et le contour de la cellule est géré via margins sur les éléments textes enfants (_misc.scss l.34).

Donc je te déconseille de mettre

div.cell.text-cell {
padding: 0.1rem 2rem;
}

(Idem : avoir une cellule texte avec un h2 en premier enfant pour tester)

Formulaire

Pense à utiliser un style pour le :focus des champs de formulaire. Y'a tout ce qu'il faut côté variables scss.

Je confirme pour le height du footer, le contenu overflow très facilement en mobile. min-height est ton ami.

$font-family: Oswald; -> $font-family: Oswald, sans-serif;

Sinon le site s'affiche en serif en attendant le chargement de Oswald qui est une sans-serif.

`$button-border-radius: 0px;`
0px -> 0, inutile de mettre une unité pour 0.

Et attention au titre de la plateforme, il faudra remplacer 'saint-lo.fr' par un titre qui identitfiez bien qu'on est sur la GRU de saint-lo.

Automatic expiration