Merge pull request #261 from cnumr/fix/links-style

Fix/links style
cnumr · Apr 4, 2023 · 2d4bf4a · 2d4bf4a
2 parents 3ebb864 + a7d80bf
commit 2d4bf4a
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 45 deletions.
diff --git a/assets/css/2_main.css b/assets/css/2_main.css
@@ -21,9 +21,49 @@ html {
 	padding: var(--s-5) var(--s-5) var(--s-5) 0;
 }
 
+.enlarge-link {
+	position: relative;
+}
+.enlarge-link a {
+	background-image: none;
+	outline-width: 0;
+}
+.enlarge-link a:before {
+	content: "";
+	display: block;
+	height: 100%;
+	inset: 0;
+	outline-color: inherit;
+	outline-style: inherit;
+	outline-width: var(--border-focus);
+	outline-offset: var(--s-5);
+	transition: outline-width 0.3s;
+	position: absolute;
+	width: 100%;
+	z-index: 1;
+}
+
 /* A elements that don't have a class get default styles */
-a:not([class]) {
-	text-decoration-color: var(--color-lightest);
+:not(figure) > [target="_blank"]::after,
+figure > [target="_blank"] + figcaption::after {
+	background-color: currentcolor;
+	content: "";
+	display: inline-block;
+	height: 1rem;
+	margin-left: 0.25rem;
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6Zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8Z'/%3E%3C/svg%3E");
+	mask-size: 100% 100%;
+	vertical-align: -0.125em;
+	width: 1rem;
+}
+
+a:not([class]):hover,
+figure > [target="_blank"]:hover + figcaption {
+	text-decoration: underline;
+	text-decoration-color: var(--color-light);
+}
+figure > a + figcaption {
+	text-align: center;
 }
 
 /* Headings */
@@ -98,8 +138,8 @@ noscript {
 
 input,
 button {
-	padding: var(--s1);
-	border-width: 0;
+	padding: var(--s0);
+	border-color: transparent;
 	border-radius: var(--border-radius-small);
 }
 
@@ -145,27 +185,18 @@ button {
 nav a,
 span[aria-current="page"],
 span[data-state="active"] {
-	position: relative;
 	text-decoration: none;
 }
-nav span[aria-current="page"]::before,
-nav span[data-state="active"]::before {
-	content: "";
-	display: block;
-	width: 100%;
-	height: var(--border-thin);
-	position: absolute;
-	top: 100%;
-	left: 0;
-	padding-top: 0.25rem;
-	border-bottom-width: var(--border-thin);
+nav span[aria-current="page"],
+nav span[data-state="active"] {
+	border-bottom-width: var(--border-thick);
 	border-color: var(--color-highlight-light);
+	padding-bottom: var(--s-5);
 }
 
 /* Header */
 header {
-	padding-top: var(--s-3);
-	padding-bottom: var(--s-3);
+	padding: var(--s-3);
 }
 
 .logo-ecoindex {
@@ -271,6 +302,7 @@ footer > * {
 
 footer nav {
 	justify-content: space-between;
+	row-gap: var(--s1);
 }
 
 .hero {
@@ -368,7 +400,7 @@ footer nav {
 	border-radius: var(--border-radius-large);
 }
 
-.info-container a:not([class]) {
+.info-container a:not([class]):hover {
 	text-decoration-color: inherit;
 }
 
@@ -391,6 +423,7 @@ footer nav {
 
 :focus {
 	outline: var(--border-focus) var(--focus-style) var(--color-focus-light);
+	outline-offset: var(--s-5);
 }
 
 .info-container :focus {

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -51,6 +51,8 @@ for “##URL##”"""
 [en]
 	other = "English"
 [GreenITAssociation]
+	other = "Green IT"
+[GreenITAssociationLong]
 	other = "Association Green IT"
 [NeutralIT]
 	other = "Neutral IT"

diff --git a/i18n/fr.toml b/i18n/fr.toml
@@ -51,6 +51,8 @@ pour « ##URL## »"""
 [en]
 	other = "English"
 [GreenITAssociation]
+	other = "Green IT"
+[GreenITAssociationLong]
 	other = "Association Green IT  (prononcer grine • aïe • ti)"
 [NeutralIT]
 	other = "Neutral IT"

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -7,18 +7,17 @@
 					<div class="cluster-l">
 						<ul class>
 							{{- range .Site.Menus.footer }}
-								{{- $ariaCurrent := "" -}}
 								{{- if or ($currentPage.IsMenuCurrent "footer" .) ($currentPage.HasMenuCurrent "footer" .) -}}
-									{{- $ariaCurrent = `aria-current="page"` -}}
+									<li><span aria-current="page">{{ .Title }}</span></li>
+								{{- else -}}
+									<li>
+										<a
+											href="{{- .URL | safeHTMLAttr -}}"
+											{{ if .Params.Newtab -}}target="_blank" rel="noopener"{{- end -}}
+											>{{ .Title }}</a
+										>
+									</li>
 								{{- end -}}
-								<li>
-									<a
-										href="{{- .URL | safeHTMLAttr -}}"
-										{{ if .Params.Newtab -}}target="_blank" rel="noopener"{{- end -}}
-										{{ $ariaCurrent | safeHTMLAttr -}}
-										>{{ .Title }}</a
-									>
-								</li>
 							{{- end }}
 							{{- if eq hugo.Environment "development" -}}
 								<li>
@@ -27,22 +26,32 @@
 							{{- end }}
 						</ul>
 					</div>
-					<a
-						href="https://neutral-it.com/"
-						target="_blank"
-						rel="noopener"
-						title="{{ i18n `NeutralIT` }} – {{ i18n `NewWindow` }}"
-						>{{- $logoResource := resources.Get "images/logo-neutral-it.webp" -}}
-						<img src="{{- $logoResource.RelPermalink -}}" width="50" height="50" alt="{{ i18n `NeutralIT` }}"
-					/></a>
-					<a
-						href="https://www.greenit.fr/"
-						target="_blank"
-						rel="noopener"
-						title="{{ i18n `GreenITAssociation` }} – {{ i18n `NewWindow` }}"
-						>{{- $logoResource := resources.Get "images/logo-greenit.svg" -}}
-						<img src="{{- $logoResource.RelPermalink -}}" width="126" height="50" alt="{{ i18n `GreenITAssociation` }}"
-					/></a>
+					<figure class="enlarge-link">
+						<a
+							href="https://neutral-it.com/"
+							target="_blank"
+							rel="noopener"
+							title="{{ i18n `NeutralIT` }} – {{ i18n `NewWindow` }}"
+							>{{- $logoResource := resources.Get "images/logo-neutral-it.webp" -}}
+							<img src="{{- $logoResource.RelPermalink -}}" width="50" height="50" alt="{{ i18n `NeutralIT` }}"
+						/></a>
+						<figcaption>{{ i18n `NeutralIT` }}</figcaption>
+					</figure>
+					<figure class="enlarge-link">
+						<a
+							href="https://www.greenit.fr/"
+							target="_blank"
+							rel="noopener"
+							title="{{ i18n `GreenITAssociationLong` }} – {{ i18n `NewWindow` }}"
+							>{{- $logoResource := resources.Get "images/logo-greenit.svg" -}}
+							<img
+								src="{{- $logoResource.RelPermalink -}}"
+								width="126"
+								height="50"
+								alt="{{ i18n `GreenITAssociationLong` }}"
+						/></a>
+						<figcaption>{{ i18n `GreenITAssociation` }}</figcaption>
+					</figure>
 				</nav>
 			</div>
 		</footer>