Ajouter des antipixels au footer global

Closes #11

themes/2026/assets/css/footer.css

@@ -76,7 +76,62 @@ body > footer > section > p a:is(:hover, :focus-visible) {
     text-decoration: underline;
 }
 
-body > footer > nav > ul {
+body > footer > nav > ul.footer-antipixels {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.35rem;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 0;
+    justify-self: center;
+}
+
+body > footer > nav > ul.footer-antipixels > li {
+    display: flex;
+    margin-top: 0;
+}
+
+body > footer > nav > ul.footer-antipixels a.footer-antipixel {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 5.1rem;
+    min-height: 1.15rem;
+    padding: 0.1rem 0.42rem;
+    border: 1px solid #07090d;
+    background: #d8dde5;
+    color: #07090d;
+    text-decoration: none;
+    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Liberation Mono", monospace;
+    font-size: 0.58rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    line-height: 1;
+    text-transform: uppercase;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
+}
+
+body > footer > nav > ul.footer-antipixels a.footer-antipixel.footer-antipixel-html {
+    background: #f4be72;
+}
+
+body > footer > nav > ul.footer-antipixels a.footer-antipixel.footer-antipixel-css {
+    background: #89bee8;
+}
+
+body > footer > nav > ul.footer-antipixels a.footer-antipixel.footer-antipixel-rss {
+    background: #f3a35f;
+}
+
+body > footer > nav > ul.footer-antipixels a.footer-antipixel:is(:hover, :focus-visible) {
+    background: #ffffff;
+    color: #07090d;
+    text-decoration: none;
+}
+
+body > footer > nav > ul:not(.footer-antipixels) {
     list-style: none;
     display: grid;
     grid-template-columns: 1fr;
@@ -86,7 +141,7 @@ body > footer > nav > ul {
     padding: 0;
 }
 
-body > footer > nav > ul > li {
+body > footer > nav > ul:not(.footer-antipixels) > li {
     display: grid;
     grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
     align-items: first baseline;
@@ -102,7 +157,7 @@ body > footer > nav h2 {
     line-height: 1.25;
 }
 
-body > footer > nav > ul > li > div {
+body > footer > nav > ul:not(.footer-antipixels) > li > div {
     grid-column: 2;
     display: flex;
     flex-direction: column;

themes/2026/assets/css/responsive.css

@@ -409,7 +409,7 @@
         max-width: 100%;
     }
 
-    body > footer > nav > ul > li {
+    body > footer > nav > ul:not(.footer-antipixels) > li {
         grid-template-columns: 1fr;
         align-items: start;
     }
@@ -420,7 +420,7 @@
         text-align: left;
     }
 
-    body > footer > nav > ul > li > div {
+    body > footer > nav > ul:not(.footer-antipixels) > li > div {
         grid-column: 1;
     }
 

themes/2026/layouts/_partials/footer.html

@@ -1,6 +1,12 @@
 {{- $site := .Site -}}
 {{- $logoPath := $site.Params.logo | default "logo-large.png" -}}
 {{- $logo := resources.GetMatch $logoPath -}}
+{{- $htmlValidationURL := printf "https://validator.w3.org/nu/?doc=%s" (.Permalink | urlquery) -}}
+{{- $cssValidationURL := printf "https://jigsaw.w3.org/css-validator/validator?uri=%s&profile=css3svg&usermedium=all&warning=0&lang=fr" (.Permalink | urlquery) -}}
+{{- $rssValidationURL := "" -}}
+{{- with $site.Home.OutputFormats.Get "RSS" -}}
+  {{- $rssValidationURL = printf "https://validator.w3.org/feed/check.cgi?url=%s" (.Permalink | urlquery) -}}
+{{- end -}}
 <footer>
   <section aria-label="Informations du site">
     {{- with $logo -}}
@@ -48,6 +54,13 @@
       </li>
       {{- end -}}
     </ul>
+    <ul class="footer-antipixels" aria-label="Validité des standards du site">
+      <li><a class="footer-antipixel footer-antipixel-html" href="{{ $htmlValidationURL }}" title="Valider cette page HTML5" target="_blank" rel="noreferrer noopener">HTML5 OK</a></li>
+      <li><a class="footer-antipixel footer-antipixel-css" href="{{ $cssValidationURL }}" title="Valider le CSS utilisé par cette page" target="_blank" rel="noreferrer noopener">CSS3 OK</a></li>
+      {{- if ne $rssValidationURL "" -}}
+      <li><a class="footer-antipixel footer-antipixel-rss" href="{{ $rssValidationURL }}" title="Valider le flux RSS principal" target="_blank" rel="noreferrer noopener">RSS OK</a></li>
+      {{- end -}}
+    </ul>
     {{- with .GitInfo -}}
     <p>
       Dernière modification de cette page :