Début 2018, il n’était plus possible de ne pas être responsive et la nécessité d’utiliser un Framework CSS s’est imposée.
J’ai passé un petit moment à regarder à droite et à gauche jusqu’à décider que mon premier critère était la pérennité.
Sur ce critère, Bootstrap est le premier choix.
Lorsque l’on compare les Framework, des mots comme léger ou lourd, modulaire, complexe sont souvent utilisés pour qualifier tel ou tel. Les réalités qu’ils sont sensé recouvrer ne sont pas simple à quantifier. Il est bien évident qu’un Framework minimaliste donnera lieu à du code réduit et sera donc léger ; et que s’il est sophistiqué il sera probablement aussi complexe.
Il serait possible de mesurer les temps de chargement, mais pour finir, le Framework joue très peu au regard des dizaines d’images que comportent les pages de ce site ; et au final, c’est un peu sans importance si une page ne s’affiche pas instantanément.
On en reste donc au critère de pérennité et à l’usage, cette décision s’est révélée heureuse ; s’il y avait à dire pourquoi, il faudrait dire que :
pour cet usage, il n’y a ni bugs ni limitations,
la documentation est bien faite,
le produit évolue régulièrement et dans le bon sens ,
Naturellement, les montées de version nécessitent quelques efforts et il est juste a regretter l’absence d’une documentation qui accompagne ces évolutions (ajout de -bs- dans les noms de classes par exemple).
Pour ce qui est du sens, il faut noter la sortie de jQuery, l’introduction des icones, l’utilisation de modules externes quand il font autorité, Popper par exemple.les composants et utilitaires disponibles couvrent les besoins de ce site.
Il est d’usage d’évoquer la nécessité de tout revoir pour obtenir un design unique, se libérer des poncifs de style et corriger toute un série de problèmes que l’on est seul à connaître.
C’est l’approche inverse qui a été retenue qui consiste à suivre Bootstrap sur les polices (font-family) et leur mise en forme (font-weight, line-height). Pour la taille des caractères (font-size), c’est encore plus simple, c’est ce qui permet l’implémentation du responsive qu’il n’est bien évidemment pas question de refaire.
Cela dit, voici au final les attributs modifiés :
abbr {
text-decoration: none !important;
}
h3 {
border-top: thin solid var(--couleur_trait) ;
}
h3, h4, h5 {
color: var(--couleur_texte);
margin-top: 3rem;
}
abbr[title] {
text-decoration-color: darkgrey; /* noir par défaut ce qui est un peu trop */
}
.emoji {
font-size: smaller;
}
Par défaut Bootstrap s’aligne sur le standard Web lien hypertexte, ce que tout le monde comprend mais qui n’est pas très esthétique.
Il n’est désormais plus nécessaire d’être aussi explicite et comme beaucoup d’autres sites désormais, la mise en forme a été atténuée, sans soulignement et avec un bleu un peu moins agressif.
C’est cette même couleur qui sera utilisée pour la navigation dans le site et pour les citations, notes et références.
Ce qui donne lieu à la modification suivante dans le standard Bootstrap :
a {
color: SteelBlue; <!-- nom de couleur pour faciliter ensuite la relecture du code -->
text-decoration: none;
}
Chaque page est organisée en quatre sections aux classes explicites :
<section class="navigation">… menus, breadcrumb et tabs… </section>
<section class="documents">… textes et images …</section>
<section class="large">… frises et cartes …</section>
<section class="lateraux">…</section>
<footer class="footer">
<address style="margin-bottom: 0;">
Les documents numérisés ne peuvent pas être utilisés à des fins commerciales sans autorisation à obtenir
auprès de <a href="mailto:langautier@free.fr?Subject=Contact%20Archives%20Langautier">Langautier@free.fr</a >
</address>
</footer>
section.documents {
min-height: 30vw; /* hauteur minimum pour avoir le bandeau noir en base de page */
padding: 0.2rem; /* pour ne pas coller au bord de l’écran quand il n’y a pas les latéraux */
}
section.lateraux {
display: none; /* pas de bouton latéraux par défaut ce qui est bien pour les téléphones */
}
.photo-gallerie {
margin-top: 3rem;
margin-bottom: 3rem;
}
@media (min-width: 576px) {
section.lateraux {
display: block;
position: fixed;
right: 0;
left: 0;
bottom: 11%;
}
section.documents {
padding: 0 2.1rem;
}
}
@media (min-width: 1200px) {
.blog, photo-gallerie {
width: 1140px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1400px) {
.photo-gallerie {
width: 1350px;
}
}
Les premiers logo étaient fournis sous la forme de fichiers images produits avec ImageMagick.
En avril 2020, c’était devenu tout aussi simple de le faire en HTML / CCS :
<span class="logo-archives">Archives</span><br/> <span class="logo-langautier">Langautier</span>.logo-archives { font-family:Rock Salt; font-size:0.85rem; padding-left:0.55rem; } .logo-langautier { font-family:Lato; font-size:1.7rem; color:var(--couleur_texte); /* ce qui permet de faire varier la couleur du L */ }
Et comme rien n’est jamais définitif, en 2023 il est devenu nécessaire d’optimiser les icones et il a bien fallu faire l’équivalent pour le logo du site. Alors, retour à ImageMagick avec la génération d'un logo pour chacune des familles.
' Les fichiers tff des polices doivent être dans le répertoire où s'exécute la procédure
magick -size 850x180 xc:white ^
-font ShantellSans-SemiBold.ttf -fill navy -pointsize 150 -strokewidth 0 -annotate +0+140 "Langautier" ^
-font ShantellSans-LightItalic.ttf -fill black -pointsize 90 -strokewidth 4 -annotate +25+70 "Archives" ^
logo-home.png
magick logo-home.png -resize 140x "C:/Users/hdelangautier/Documents/Site Langautier/../../logo-Home.png"
Et au passage, nouveau favicon en quatre dimensions :
magick -size 160x160 xc:transparent ^
-font ShantellSans-SemiBold.ttf -fill navy -pointsize 170 -strokewidth 25 -annotate +0+150 "L" ^
-font ShantellSans-LightItalic.ttf -fill black -pointsize 90 -strokewidth 15 -annotate +25+100 "Arc" ^
favicon.png
magick favicon.png -define icon:auto-resize=64,48,32,16 "C:/Users/hdelangautier/Documents/Site Langautier/favicon.ico"