Improve footer socials hoover state, make the structure cleaner

sass/_footer.scss

@@ -33,37 +33,47 @@
 
 	#socials {
 		display: flex;
-		flex-direction: row;
 		flex-wrap: wrap;
 		justify-content: center;
-		align-items: baseline;
+		gap: 0.5rem;
-		gap: 1rem;
+		margin: 0.5rem 0 0;
-		margin: 1rem 0 0;
 		padding: 0;
 
 		li {
-			display: block;
+			display: inline-flex;
-			padding: 0;
-			padding: 0.25rem 0;
 			list-style: none;
 
 			a {
-				display: inline-block;
+				display: inline-flex;
 				transition: var(--transition);
-				margin: 0;
+				border-radius: 999px;
-				background-color: var(--fg-muted-4);
+				padding: 0.5rem;
-				width: 1.5rem;
-				height: 1.5rem;
-				content: "";
 
 				&:hover {
-					background-color: var(--primary-color);
+					box-shadow: var(--edge-highlight);
+					background-color: var(--fg-muted-1);
+
+					i {
+						background-color: var(--primary-color);
+					}
 				}
 
 				&:active {
 					transform: scale(var(--active));
 				}
 
+				i {
+					display: inline-block;
+					transition: var(--transition);
+					background-color: var(--fg-muted-4);
+					width: 1.5rem;
+					height: 1.5rem;
+					font-style: normal;
+					font-variant: normal;
+					line-height: 1;
+					text-rendering: auto;
+				}
+
 				span {
 					display: none;
 				}

templates/partials/footer.html

@@ -46,7 +46,10 @@
 		<ul id="socials">
 			{% for link in config.extra.footer.socials %}
 				<li>
-					<a style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")' href="{{ link.url | safe }}" rel="me" title="{{ link.name }}"><span>{{ link.name }}</span></a>
+					<a href="{{ link.url | safe }}" rel="me" title="{{ link.name }}">
+						<i style='mask-image: url("data:image/svg+xml,{{ link.icon }}"); -webkit-mask-image: url("data:image/svg+xml,{{ link.icon }}")'></i>
+						<span>{{ link.name }}</span>
+					</a>
 				</li>
 			{% endfor %}
 		</ul>