blog/2025
1
Fork 0
Code Issues Activity

Ajouter des antipixels au footer global

Browse Source 
Closes #11
This commit is contained in:
Richard Dern
2026-04-05 15:07:57 +02:00
parent 67717fdb7b
commit a9125a45ea
3 changed files with 73 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
themes/2026/assets/css/footer.css
View File

@@ -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;

4
themes/2026/assets/css/responsive.css
View File

@@ -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;
}

13
themes/2026/layouts/_partials/footer.html
View File

@@ -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 :