Produits Entr'ouvert » Intégrations graphiques Publik

Je pousserais ces différentes propositions sur la branche

Il y a des séparateurs entre les boutons de navigation. Je n'arrive pas à afficher le dernier séparateur. Ils sont tous affichés pas des ::before, en bonne logique le dernier devrait s'afficher avec un :last-child::after mais ça ne fonctionne pas, ce dernier séparateur est superposé au précédent.

Les séparateurs ajoutés via ::before sont positionnés en "absolute", donc par rapport à des coordoonées "top" et "left". Si tu donnes les même coordoonées à :last-child::after en effet, il se superposera à l'élément :before.

Je te propose 1. De ne pas utiliser le positionnement absolute, pour supprimer l'encoche qui apparaît au survol d'un lien de la nav. 2. De limiter l'affichage des séparateurs en desktop-only

@@ -22,19 +22,17 @@ div#nav {
        text-align: center;
        padding-top: 1px;
     border-bottom: 4px solid #dbdbdb;
-    li {
-        position: relative;
-    }
-    li::before, li:last-child::after {
-        content: '';
-        width: 1px;
-        height: 24px;
-        position: absolute;
-        top: 50%;
-        left: 0px;
-        margin-top: -12px;
-        background: #e4e4e4;

+    // Item separator, desktop only
+    @media (min-width: $nav-mobile-limit + 1) {
+        li::before, li:last-child::after {
+            content: '';
+            width: 1px;
+            height: 24px;
+            background: #e4e4e4;
+            display: inline-block;
+            vertical-align: middle;
+        }
     }

Il y a un espace entre la barre de navigation et sa bordure basse qui ne devrait pas être là mais je ne sais pas comment l'enlever.

La gestion de cet espace est géré par la feuille de style du navigateur: le navigateur applique un margin top et bottom par défaut sur les ul. Ça peut donc passer à trappe de ton debugger.
C'est pas génial comme ça, j'en parle ici https://dev.entrouvert.org/issues/38184#note-6

Dans ton cas il faut donc supprimer la marge bottom

+       #nav > ul {
+            margin-bottom: 0;

La navigation n'est pas si ressemblante car il manque les bordures de couleur en haut des boutons, je n'ai pas d'idées pour faire quelque chose d'approchant.

Tu peux simplement ajouter un border-top aux liens.

+            #nav ul > li > a {
+                border-top: 2px solid $nav-active-color;
+            }

L'ombre qui entoure le corps de la page sur le site institutionnel (box-shadow: 0px 0px 10px 0px #656565;). J'ai pas mal cherché et je pense que ce n'est pas possible de le faire, j'ai mis une bordure à la place.

C'est possible, mais c'est du CSS niveau ++

+#page {
+    &::before {
+        $page-margin: 20px;
+        content: "";
+        width: $width + ($page-margin * 2);
+        height: 100vh;
+        margin: auto;
+        position: fixed;
+        top: 0;
+        left: calc(50% - (#{$width} / 2) - #{$page-margin});
+        z-index: -1;
+        box-shadow: 0px 0px 10px 0px #656565;
+    }
+}

J'ai poussé quelques améliorations typographiques sur la branch.
Notamment importer la font Roboto.
Je te laisse regarder.