From 6a3e1e5e787c474555bd0866e3b062371e224050 Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Sun, 19 Mar 2023 12:08:48 +0100
Subject: [PATCH] Improve accessibility : abbreviations and links

---
 src/index.html          | 12 ++++++------
 src/static/css/main.css |  6 ++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/index.html b/src/index.html
index 73d6aee..546b72c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -47,24 +47,24 @@
 			<h2>Contact</h2>
 			<div class="block link-block">	
 				<a href="mailto:contact@edgarpierre.fr">
+					<span class="desc">Email</span>
 					<span class="i ri-mail-send-fill"></span>
-					<span class="desc">Email <em>contact@edgarpierre.fr</em></span>
 				</a>
 			</div>
 
 			<h2>Liens</h2>
 			<div class="block link-block">
 				<a href="https://git.edgarpierre.fr/edpibu">
+					<span class="desc">Git</span>
 					<span class="i ri-git-repository-fill"></span>
-					<span class="desc">Git <em>git.edgarpierre.fr/edpibu</em></span>
 				</a>
 				<a href="https://www.komoot.fr/user/383887346799">
+					<span class="desc">Komoot</span>
 					<span class="i ri-map-2-fill"></span>
-					<span class="desc">Komoot <em>edpibu</em></span>
 				</a>
 				<a href="https://m.edgarpierre.fr">
+					<span class="desc">Mastodon</span>
 					<span class="i ri-mastodon-fill"></span>
-					<span class="desc">Mastodon <em>m.edgarpierre.fr</em></span>
 				</a>
 			</div>
 		</div>
@@ -192,10 +192,10 @@
 				<dt>Bureautique</dt>
 				<dd>LaTeX, LibreOffice, Microsoft Office</dd>
 
-				<dt>CAO</dt>
+				<dt><abbr title="Conception assistée par ordinateur">CAO</abbr></dt>
 				<dd>SolidWorks, Autocad, OpenScad</dd>
 
-				<dt>BIM</dt>
+				<dt><abbr title="Building information modeling">BIM</abbr></dt>
 				<dd>Revit</dd>
 
 				<dt>Réalité Virtuelle</dt>
diff --git a/src/static/css/main.css b/src/static/css/main.css
index ae6003e..eee33cd 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -170,10 +170,9 @@ dd {
 	.link-block > a {
 		background: var(--bg-01);
 		padding: var(--gap);
-		height: 6rem;
 		display: grid;
-		grid-template-columns: 1fr;
-		grid-template-rows: 1fr auto;
+		grid-template-columns: 1fr min-content;
+		align-items: end;
 	}
 }
 .link-block > a:hover {
@@ -190,7 +189,6 @@ dd {
 	text-align: right;
 }
 .link-block > a > span.desc {
-	grid-row: 2;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }