fix(theme): update the markup and styling of translastions

assets/static/css/bcarlin.css

@@ -236,7 +236,9 @@ body {
 main {
   .translations {
     text-align: end;
-    margin-bottom: 0.3em;
+    margin-block-end: 0.3em;
+    padding-inline-end: 2em;
+    font-size: 0.9em;
 
     a {
       text-decoration: none;

i18n/en.yaml

@@ -17,5 +17,6 @@ permalink_section: "Permalink to this section"
 tags: Tags
 information_icon: Information icon
 warning_icon: Warning icon
+translations: Translations
 also_available_in: "Also available in:"
 table_of_contents: "Contents:"

i18n/fr.yaml

@@ -17,5 +17,6 @@ permalink_section: Permalien vers cette partie
 tags: Tags
 information_icon: Icône information
 warning_icon: Icône attention
+translations: Traductions
 also_available_in: "Également disponible en :"
 table_of_contents: "Contenu :"

layouts/baseof.html

@@ -38,12 +38,12 @@
   <main>
     {{- if .IsTranslated }}
     {{- range .Translations }}
-    <div class="translations">
+    <aside class="translations" aria-label="{{ T `translations` }}">
       {{ T `also_available_in` }}
       <a hreflang="{{ .Language.LanguageCode }}" href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}">
         {{ if eq .Language.Lang "en" }}🇬🇧{{ else if eq .Language.Lang "fr" }}🇫🇷{{ else }}{{ .Language.LanguageName }}{{ end }}
       </a>
-    </div>
+    </aside>
     {{- end }}
     {{- end }}