hscc

Soure code of <https://hugo.soucy.cc>.
git clone git://soucy.cc/hscc.git
Log | Files | Refs

commit bd4750d40f9cc2ce8448f16aefb5a8b4d79d3ca2
parent 96f52c1af4823daa2e239d8745529027cb0059d8
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sat,  1 May 2021 15:49:18 -0400

Refactor the theme a little bit

Diffstat:
Mconfig.lua | 3+--
Mcontent/abonnement.md | 4++--
Acontent/index.html | 33+++++++++++++++++++++++++++++++++
Dcontent/index.md | 1-
Msrc/css/css.sh | 1+
Msrc/css/global/base.css | 8+++++++-
Msrc/css/global/tokens/grid.css | 17+++++++++--------
Msrc/css/modules/footer-banner.css | 37+++++++++++++++----------------------
Msrc/css/modules/go-to.css | 36+++++-------------------------------
Asrc/css/modules/header-banner.css | 26++++++++++++++++++++++++++
Asrc/css/modules/logo.css | 8++++++++
Msrc/css/modules/nav.css | 83++++++++++++++++++++++---------------------------------------------------------
Mtemplates/footer.html | 51++++++++++++++++++---------------------------------
Mtemplates/index.html | 34+---------------------------------
Mtemplates/layout.html | 26++++++++++++++------------
Mtemplates/navigation.html | 102+++++++++++++++++++++++++++++++++++++++++++------------------------------------
16 files changed, 219 insertions(+), 251 deletions(-)

diff --git a/config.lua b/config.lua @@ -34,8 +34,7 @@ return { "https://stackoverflow.com/users/6556626/hs0ucy", "https://www.openstreetmap.org/user/hs0ucy", "https://forumsdulibre.quebec/u/hs0ucy", - "xmpp:hs0ucy@soucy.cc", - "sms:+15819966481", + "https://freepo.st/freepost.cgi/user/public/hs0ucy", }, }, diff --git a/content/abonnement.md b/content/abonnement.md @@ -1,6 +1,6 @@ -Abonnement à hugo.soucy.cc -========================== +S'abonner à hugo.soucy.cc +========================= Pour suivre les mises à jours de ce site Web, vous pouvez vous abonner aux flux de syndication. Des fils **Atom** sont créés automatiquement diff --git a/content/index.html b/content/index.html @@ -0,0 +1,33 @@ +<div prefix="foaf: http://xmlns.com/foaf/0.1/ dc: http://purl.org/dc/terms/"> + <div + class="h-card hcard vcard" + id="hs" + resource="#hs" + typeof="Person" + vocab="http://schema.org/"> + <link property="sameAs" href="https://mastodon.sdf.org/@hs0ucy#"/> + <link property="sameAs" href="https://github.com/hs0ucy/#"/> + + <h1> + Bonjour ! Je m'appelle <strong class="p-name" property="name">Hugo Soucy</strong> + </h1> + + <img + alt="Hugo Soucy à l'été 2018" + class="hs0ucy-photo u-photo" + height="205" + property="image" + src="https://hugo.soucy.cc/hs0ucy-2018--240px.png" + width="240" /> + + <div class="p-note"> + <p> + <a class="u-url u-uid" href="https://hugo.soucy.cc/#hs" rel="me">Je</a> suis un <a href="https://hugo.soucy.cc/file/curriculum-vitae.html#cv" property="sameAs"><span class="p-job-title" property="jobTitle">développeur front-end</span></a> (ou <abbr title="Programmeur en Robustesse Esthétique">PRE</abbr>). Ici, se trouve mon port d'attache en ligne, où je me manifeste généralement sous le pseudo <strong class="p-nickname" property="foaf:nick">hs0ucy</strong>. <a href="https://keyoxide.org/hkp/hugo@soucy.cc" property="sameAs" rel="external">Je suis</a> surtout présent sur <span typeof="foaf:OnlineAccount" property="foaf:account"><a href="https://bandcamp.com/hs0ucy" property="foaf:accountProfilePage" rel="external nofollow me"><span property="dc:title">Bandcamp</span></a></span>, Freenode, <span typeof="foaf:OnlineAccount" property="foaf:account"><a href="https://mastodon.sdf.org/@hs0ucy" property="foaf:accountProfilePage" rel="external nofollow me"><span property="dc:title">Mastodon</span></a></span>, <a href="/xmpp.html">XMPP</a>; j'ai quelques commits sur <a href="https://soucy.cc/git/" rel="external">Git</a>&hellip;<a href="https://gitlab.com/hs0ucy/" rel="external">Git</a>&hellip;<span typeof="foaf:OnlineAccount" property="foaf:account"><a href="https://github.com/hs0ucy" property="foaf:accountProfilePage" rel="external nofollow me"><span property="dc:title">GitHub</span></a></span>. Hors ligne, on peut me croiser dans les rues de <span typeof="http://schema.org/PostalAddress" property="address"><strong class="p-locality" property="addressLocality">Lévis</strong></span> ou Québec. Sinon, vous pouvez communiquer avec moi par courriel à l'adresse <a href="mailto:hugo@soucy.cc" property="email" rel="me"> <span class="u-email">hugo@soucy.cc</span></a>. + </p> + + <p> + <a href="https://hugo.soucy.cc/2021">Dans ma soupe</a> je vois les <strong property="foaf:interest" resource="http://dbpedia.org/resource/FLOSS" title="FLOSS">logiciels libres et open-source</strong>, comme <strong property="foaf:interest" resource="http://dbpedia.org/resource/Emacs">Emacs</strong>, <strong property="foaf:interest" resource="http://dbpedia.org/page/Dwm">dwm</strong>, <strong property="foaf:interest" resource="http://dbpedia.org/resource/OpenBSD">OpenBSD</strong> 🐡, <strong property="foaf:interest" resource="http://dbpedia.org/resource/Manjaro_Linux">Manjaro</strong>, <strong property="foaf:interest" resource="http://dbpedia.org/page/Syncthing">Syncthing</strong>, etc; les <strong property="foaf:interest" resource="http://dbpedia.org/resource/Shell_script">shell scripts</strong>, le <strong property="foaf:interest" resource="http://dbpedia.org/page/Lua_(programming_language)">Lua</strong> script, le <strong property="foaf:interest" resource="http://dbpedia.org/resource/JavaScript">JavaScript</strong>; les <strong property="foaf:interest" resource="http://dbpedia.org/page/Web_standards">standards du Web</strong> et tout ce qui touche à l'indépendance numérique des utilisateurs. J'aime la <strong property="foaf:interest" resource="http://dbpedia.org/resource/Politics">politique</strong> sans les politiciens, la <strong property="foaf:interest" resource="http://dbpedia.org/resource/Reading_(process)">lecture</strong>, le <strong property="foaf:interest" resource="http://dbpedia.org/resource/Bicycle">vélo</strong>, le <strong property="foaf:interest" resource="http://dbpedia.org/page/Coffee">café</strong> ☕, la <strong property="foaf:interest" resource="http://dbpedia.org/page/Pizza">pizza</strong> 🍕 et les <strong property="foaf:interest" resource="http://dbpedia.org/resource/Sandwich">sandwichs</strong> 🥪. Wannabe <strong property="foaf:interest" resource="http://dbpedia.org/resource/Local_food">locavore</strong> et <em property="foaf:interest" resource="https://dbpedia.org/page/Canning">appertisan</em> (canneux) 🥫. + </p> + </div> + </div> +</div> diff --git a/content/index.md b/content/index.md @@ -1 +0,0 @@ -<!-- It's in the template --> diff --git a/src/css/css.sh b/src/css/css.sh @@ -20,6 +20,7 @@ atoms/buttons/button.css modules/layout.css modules/go-to.css modules/nav.css +modules/header-banner.css modules/footer-banner.css modules/hcard.css modules/hentry.css diff --git a/src/css/global/base.css b/src/css/global/base.css @@ -12,7 +12,13 @@ @media screen and (min-width: 48rem) { :root { - font-size: calc(var(--base-font-size) + 6px); + font-size: calc(var(--base-font-size) + 4px); + } +} + +@media screen and (min-width: 120rem) { + :root { + font-size: calc(var(--base-font-size) + 12px); } } diff --git a/src/css/global/tokens/grid.css b/src/css/global/tokens/grid.css @@ -1,12 +1,13 @@ /* @tokens grid */ :root { - --grid-max-width: 1024px; + --grid-xs: 20rem;/*320px/16px*/ + --grid-xsm: 22.5rem;/*360px/16px*/ + --grid-sm: 30rem;/*480px/16px*/ + --grid-md: 48rem;/*768px/16*/ + --grid-lg: 64rem;/*1024px/16*/ + --grid-xl: 80rem;/*1280px/16px*/ + --grid-xxl: 90rem;/*1440px/16px*/ + --grid-xxl: 120rem;/*1920px/16px*/ - --grid-xs: 320px; - --grid-xsm: 360px; - --grid-sm: 480px; - --grid-md: 768px; - --grid-lg: 1024px; - --grid-xl: 1280px; - --grid-xxl: 1440px; + --grid-max-width: var(--grid-md); } diff --git a/src/css/modules/footer-banner.css b/src/css/modules/footer-banner.css @@ -2,37 +2,30 @@ .footer-banner { background: var(--base-darkest); color: var(--base-brightest); + font-size: 1rem; margin-top: 0; } -.footer-banner a { - background: linear-gradient(180deg,transparent 70%, var(--base-link-fg) 0); - color: var(--base-brightest); - display: block; -} - -.footer-banner a:focus, -.footer-banner a:hover { - background: linear-gradient(180deg,transparent 0%, var(--base-link-fg) 0); +@media screen and (min-width: 48rem) { + .footer-banner { + font-size: 0.85rem; + line-height: 1.75; + } } -.footer-banner__wrapper { +.footer-banner > div { padding-bottom: 2rem; padding-top: 2rem; } -.footer-banner__list { - align-items: center; - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - list-style-type: none; - margin: calc(1rem / 2 * -1); - overflow: hidden; - padding: 0; +.footer-banner a { + background: linear-gradient(180deg,transparent 70%, var(--base-link-fg) 0); + color: var(--base-brightest); + display: inline-block; + font-weight: 400; } -.footer-banner__item { - display: block; - margin: calc(1rem / 2); +.footer-banner a:focus, +.footer-banner a:hover { + background: linear-gradient(180deg,transparent 0%, var(--base-link-fg) 0); } diff --git a/src/css/modules/go-to.css b/src/css/modules/go-to.css @@ -1,46 +1,20 @@ /* @module go-to */ - -.go-to-nav, -.go-to-content { - display: block; - margin-bottom: 0; - margin-top: 0; - order: -2; -} - .go-to-nav { align-items: center; background: var(--base-darkest); color: var(--base-brightest); display: flex; + font-weight: 700; justify-content: flex-start; padding-right: 2rem; text-transform: capitalize; } -.go-to-nav::before { - background: var(--base-darkest); - border-right: 1px solid var(--base-br-light); - color: var(--base-br-light); - content: '://hscc'; - display: inline-block; - font-weight: 700; - margin-right: 2rem; - padding: 0.5rem 2rem 0.5rem 2rem; - text-transform: lowercase; +.go-to-nav:focus, +.go-to-nav:hover { + color: var(--base-fg); } -@media screen and (min-width: 48rem) { - .go-to-nav::before { - content: '://hugo.soucy.cc'; - } -} - -@media screen and (min-width: 64rem) { - .go-to-nav::before { - display: none; - } -} .go-to-nav > svg { display: none; @@ -48,7 +22,7 @@ padding: 0; } -@media screen and (min-width: 20rem) and (max-width: 63.9375rem) { +@media screen and (min-width: 20rem) { .go-to-nav > svg { display: block; } diff --git a/src/css/modules/header-banner.css b/src/css/modules/header-banner.css @@ -0,0 +1,26 @@ +/* @module header banner */ +.header-banner { + background: var(--base-darkest); + color: var(--base-brightest); + margin-top: 0; +} +.header-banner a { + color: var(--base-brightest); + padding: 1rem; +} +.header-banner [rel="index"] { + background: none; + color: var(--base-aqua); + font-size: 1.5rem; + font-weight: 700; + line-height: 1; + margin-right: 0.25rem; +} + +.header-banner > div { + align-items: center; + display: flex; + justify-content: space-between; + padding-bottom: 0; + padding-top: 0; +} diff --git a/src/css/modules/logo.css b/src/css/modules/logo.css @@ -0,0 +1,8 @@ +/* @module logo */ +.logo { + align-self: flex-start; + color: var(--base-fg); + margin-right: 2rem; + padding: 0; + text-decoration: none; +} diff --git a/src/css/modules/nav.css b/src/css/modules/nav.css @@ -5,11 +5,14 @@ margin-bottom: 0; } -@media screen and (min-width: 64rem) { - .nav { - display: flex; - margin-top: 0; - order: -1; +.nav > div { + padding: 0; +} + +@media screen and (min-width: 48rem) { + .nav > div { + padding-bottom: 0; + padding-top: 0.25rem;; } } @@ -20,75 +23,41 @@ } .nav__list { - list-style-type: none; - margin-bottom: 0; - margin-top: 0; + margin: 0; padding: 0; } -@media screen and (min-width: 64rem) { +@media screen and (min-width: 48rem) { .nav__list { - align-items: stretch; - display: flex; - flex: 1 100%; - padding: 0 0 0 2rem; - } - - .nav__list::before { - align-self: center; - background: var(--base-darkest); - color: var(--base-br-light); - content: '://hugo.soucy.cc'; - display: inline-block; - font-weight: 700; - padding-right: 2rem; - text-transform: lowercase; + columns: 2 auto; + list-style-type: none; } } .nav__item { + background: transparent; border: solid var(--base-br-light); - border-width: 1px 0 0; -} - -.nav__item:last-child { - border-bottom: 1px solid var(--base-br-light); -} - -@media screen and (min-width: 64rem) { - .nav__item { - align-items: center; - border-width: 0 0 0 1px; - display: flex; - justify-content: center; - } - - .nav__item:last-child { - border-bottom: 0; - border-right: 1px solid var(--base-br-light); - } + border-width: 0 0 1px; } .nav__link { background: inherit; color: var(--base-brightest); display: block; + font-weight: 700; line-height: 1; - padding: 0.75rem 2rem; + padding: 1rem 2rem; text-decoration: none; } -@media screen and (min-width: 64rem) and (max-width: 79.9375rem) { - .nav__link { - padding-left: 1.5rem; - padding-right: 1.5rem; - } -} +/* .nav__link { */ +/* padding: 1rem; */ +/* } */ -.nav__link[aria-current] { - background: var(--base-link-bg); - color: var(--base-fg); -} +/* .nav__link[aria-current] { */ +/* background: var(--base-link-bg); */ +/* color: var(--base-fg); */ +/* } */ .nav__link:focus, .nav__link:hover { @@ -104,9 +73,3 @@ .nav__link > svg { display: none; } - -@media screen and (min-width: 64rem) { - .nav__link > svg { - display: inline-block; - } -} diff --git a/templates/footer.html b/templates/footer.html @@ -1,36 +1,21 @@ <footer class="footer-banner"> - <div class="footer-banner__wrapper"> - <ul class="footer-banner__list"> - <li class="footer-banner__item"> - <a - href="https://webring.xxiivv.com/#random" - hreflang="en"> - <span class="visuallyhidden">Webring</span> - <img - alt="" - height="20px" - src="https://webring.xxiivv.com/icon.white.svg" - width="20px" /> - </a> - </li> - <li class="footer-banner__item"> - <a href="/xfn.html">Liens</a> - </li> - <li class="footer-banner__item"> - <a href="/biscuits.html">Site sans biscuit</a> - </li> - <li class="footer-banner__item"> - <a href="https://1mb.club/" rel="external">qui ne drainera pas votre batterie</a> - </li> - <li class="footer-banner__item"> - <a - href="https://creativecommons.org/licenses/by-sa/2.5/ca/deed.fr" - rel="external license" - title="Licence Creative Commons: Partage dans les mêmes conditions 2.5 Canada. Lien externe">CC BY-SA 2.5 CA</a> - </li> - <li class="footer-banner__item"> - @&nbsp;<time><%= os.date('%Y') -%></time> - </li> - </ul> + <div> + <a + href="https://webring.xxiivv.com/#random" + hreflang="en"> + <span class="visuallyhidden">Webring</span> + <img + alt="" + height="20px" + src="https://webring.xxiivv.com/icon.white.svg" + width="20px" /> + </a> | + <a href="/biscuits.html">Site sans biscuit</a> + <a href="https://1mb.club/" rel="external">qui ne drainera pas votre batterie</a>. | + <a + href="https://creativecommons.org/licenses/by-sa/2.5/ca/deed.fr" + rel="external license" + title="Licence Creative Commons: Partage dans les mêmes conditions 2.5 Canada. Lien externe">CC BY-SA 2.5 CA</a> + <br/>@&nbsp;<time><%= os.date('%Y') -%></time> </div> </footer> diff --git a/templates/index.html b/templates/index.html @@ -1,33 +1 @@ -<div prefix="foaf: http://xmlns.com/foaf/0.1/ dc: http://purl.org/dc/terms/"> - <div - class="h-card hcard vcard" - id="hs" - resource="#hs" - typeof="Person" - vocab="http://schema.org/"> - <link property="sameAs" href="https://mastodon.sdf.org/@hs0ucy#"/> - <link property="sameAs" href="https://github.com/hs0ucy/#"/> - - <h1> - Bonjour ! Je m'appelle <strong class="p-name" property="name">Hugo Soucy</strong> - </h1> - - <img - alt="Hugo Soucy à l'été 2018" - class="hs0ucy-photo u-photo" - height="205" - property="image" - src="https://hugo.soucy.cc/hs0ucy-2018--240px.png" - width="240" /> - - <div class="p-note"> - <p> - <a class="u-url u-uid" href="https://hugo.soucy.cc/#hs" rel="me">Je</a> suis un <a href="https://hugo.soucy.cc/file/curriculum-vitae.html#cv" property="sameAs"><span class="p-job-title" property="jobTitle">développeur front-end</span></a> (ou <abbr title="Programmeur en Robustesse Esthétique">PRE</abbr>). Ici, se trouve mon port d'attache en ligne, où je me manifeste généralement sous le pseudo <strong class="p-nickname" property="foaf:nick">hs0ucy</strong>. <a href="https://keyoxide.org/hkp/hugo@soucy.cc" property="sameAs" rel="external">Je suis</a> surtout présent sur <span typeof="foaf:OnlineAccount" property="foaf:account"><a href="https://bandcamp.com/hs0ucy" property="foaf:accountProfilePage" rel="external nofollow me"><span property="dc:title">Bandcamp</span></a></span>, Freenode, <span typeof="foaf:OnlineAccount" property="foaf:account"><a href="https://mastodon.sdf.org/@hs0ucy" property="foaf:accountProfilePage" rel="external nofollow me"><span property="dc:title">Mastodon</span></a></span>, <a href="/xmpp.html">XMPP</a>; j'ai quelques commits sur <a href="https://soucy.cc/git/" rel="external">Git</a>&hellip;<a href="https://gitlab.com/hs0ucy/" rel="external">Git</a>&hellip;<span typeof="foaf:OnlineAccount" property="foaf:account"><a href="https://github.com/hs0ucy" property="foaf:accountProfilePage" rel="external nofollow me"><span property="dc:title">GitHub</span></a></span>. Hors ligne, on peut me croiser dans les rues de <span typeof="http://schema.org/PostalAddress" property="address"><strong class="p-locality" property="addressLocality">Lévis</strong></span> ou Québec. Sinon, vous pouvez communiquer avec moi par courriel à l'adresse <a href="mailto:hugo@soucy.cc" property="email" rel="me"> <span class="u-email">hugo@soucy.cc</span></a>. - </p> - - <p> - <a href="https://hugo.soucy.cc/2021">Dans ma soupe</a> je vois les <strong property="foaf:interest" resource="http://dbpedia.org/resource/FLOSS" title="FLOSS">logiciels libres et open-source</strong>, comme <strong property="foaf:interest" resource="http://dbpedia.org/resource/Emacs">Emacs</strong>, <strong property="foaf:interest" resource="http://dbpedia.org/page/Dwm">dwm</strong>, <strong property="foaf:interest" resource="http://dbpedia.org/resource/OpenBSD">OpenBSD</strong> 🐡, <strong property="foaf:interest" resource="http://dbpedia.org/resource/Manjaro_Linux">Manjaro</strong>, <strong property="foaf:interest" resource="http://dbpedia.org/page/Syncthing">Syncthing</strong>, etc; les <strong property="foaf:interest" resource="http://dbpedia.org/resource/Shell_script">shell scripts</strong>, le <strong property="foaf:interest" resource="http://dbpedia.org/page/Lua_(programming_language)">Lua</strong> script, le <strong property="foaf:interest" resource="http://dbpedia.org/resource/JavaScript">JavaScript</strong>; les <strong property="foaf:interest" resource="http://dbpedia.org/page/Web_standards">standards du Web</strong> et tout ce qui touche à l'indépendance numérique des utilisateurs. J'aime la <strong property="foaf:interest" resource="http://dbpedia.org/resource/Politics">politique</strong> sans les politiciens, la <strong property="foaf:interest" resource="http://dbpedia.org/resource/Reading_(process)">lecture</strong>, le <strong property="foaf:interest" resource="http://dbpedia.org/resource/Bicycle">vélo</strong>, le <strong property="foaf:interest" resource="http://dbpedia.org/page/Coffee">café</strong> ☕, la <strong property="foaf:interest" resource="http://dbpedia.org/page/Pizza">pizza</strong> 🍕 et les <strong property="foaf:interest" resource="http://dbpedia.org/resource/Sandwich">sandwichs</strong> 🥪. Wannabe <strong property="foaf:interest" resource="http://dbpedia.org/resource/Local_food">locavore</strong> et <em property="foaf:interest" resource="https://dbpedia.org/page/Canning">appertisan</em> (canneux) 🥫. - </p> - </div> - </div> -</div> +<%- content -%> diff --git a/templates/layout.html b/templates/layout.html @@ -2,7 +2,7 @@ <html lang="<%= language -%>"> <%- head -%> <% local posttype = posttype or 'default' %> - <body class="<%- template or posttype -%>" id="t"> + <body class="layout <%- template or posttype -%>" id="t"> <svg height="0" style="position:absolute" width="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="ico_note" width="24" height="24" fill="none"><path d="M3 2h18v14h-2v2h-2v-2h-2v2h2v2h-2v2H3V2zm2 2v16h8v-6h6V4H5z" fill="currentColor"/></symbol> <symbol id="ico_bookmark" width="24" height="24" fill="none"><path d="M18 2H6v2h12v16h-2v-2h-2v-2h-4v2H8v2H6V2H4v20h4v-2h2v-2h4v2h2v2h4V2h-2z" fill="currentColor"/></symbol> @@ -11,19 +11,21 @@ <symbol id="ico_corner_down_left" width="24" height="24" fill="none"><path d="M18 16H8v2H6v-2H4v-2h2v-2h2v2h10V4h2v12h-2zM8 12v-2h2v2H8zm0 6v2h2v-2H8z" fill="currentColor"/></symbol> <symbol id="ico_article" fill="none" height="24" width="24"><path d="M5 3H3v18h18V3H5zm14 2v14H5V5h14zm-2 2H7v2h10V7zM7 11h10v2H7v-2zm7 4H7v2h7v-2z" fill="currentColor"/></symbol> </svg> - - <a class="go-to-nav visuallyhidden--lg focusable" href="#n"> + <header class="header-banner" role="banner"> + <div> + <a href="/" rel="index">hs0ucy</a> + <a class="go-to-nav" href="#n"> <svg aria-hidden="true" class="ico" height="24" role="image" width="24"><use href="#ico_nav"></use></svg> - <span class="visuallyhidden--to-lg">Aller au&nbsp;</span>menu<span class="visuallyhidden"> de navigation</span> - </a> + <span class="visuallyhidden">Aller au&nbsp;</span>menu<span class="visuallyhidden"> de navigation</span> + </a> + </div> + </header> - <div class="layout"> - <main class="main" id="m"> - <%- post %> - </main> + <main class="main" id="m"> + <%- post %> + </main> - <%- navigation -%> - <%- footer -%> - </div> + <%- navigation -%> + <%- footer -%> </body> </html> diff --git a/templates/navigation.html b/templates/navigation.html @@ -1,49 +1,59 @@ <nav class="nav" id="n" data-rellink="<%= rellink -%>"> - <h2 class="nav__title visuallyhidden">Menu de navigation</h2> + <div> + <h2 class="nav__title visuallyhidden">Menu de navigation</h2> - <ol class="nav__list"> - <li class="nav__item"> - <a - <% if rellink == '' then %> - aria-current="page" - <% end %> - class="nav__link" - href="/" - rel="index">Intro</a> - </li> - <li class="nav__item"> - <a - <% if rellink == '2021/' then %> - aria-current="page" - <% end %> - class="nav__link" - href="/2021">Publications</a> - </li> - <li class="nav__item"> - <a - <% if rellink == '/file/curriculum-vitae.html' then %> - aria-current="page" - <% end %> - class="nav__link" - href="/file/curriculum-vitae.html"> - <abbr title="Curriculum Vitae">CV</abbr> - </a> - </li> - <li class="nav__item"> - <a - <% if rellink == '/archives.html' then %> - aria-current="page" - <% end %> - class="nav__link" - href="/archives.html">Archives</a> - </li> - <li class="nav__item"> - <a - <% if rellink == '/abonnement.html' then %> - aria-current="page" - <% end %> - class="nav__link" - href="/abonnement.html">S'abonner</a> - </li> - </ol> + <ol class="nav__list"> + <li class="nav__item"> + <a + <% if rellink == '' then %> + aria-current="page" + <% end %> + class="nav__link" + href="/" + rel="index">Intro</a> + </li> + <li class="nav__item"> + <a + <% if rellink == '2021/' then %> + aria-current="page" + <% end %> + class="nav__link" + href="/2021">Publications</a> + </li> + <li class="nav__item"> + <a + <% if rellink == '/file/curriculum-vitae.html' then %> + aria-current="page" + <% end %> + class="nav__link" + href="/file/curriculum-vitae.html"> + <abbr title="Curriculum Vitae">CV</abbr> + </a> + </li> + <li class="nav__item"> + <a + <% if rellink == '/archives.html' then %> + aria-current="page" + <% end %> + class="nav__link" + href="/archives.html">Archives</a> + </li> + <li class="nav__item"> + <a + <% if rellink == '/xfn.html' then %> + aria-current="page" + <% end %> + class="nav__link" + href="/xfn.html">Liens</a> + </li> + <li class="nav__item"> + <a + <% if rellink == '/abonnement.html' then %> + aria-current="page" + <% end %> + class="nav__link" + href="/abonnement.html">S'abonner</a> + </li> + </ol> + </div> </nav>