Improve socials

Author: tautropfli

sass/style.scss

@@ -107,8 +107,6 @@ figure {
 }
 
 .social-links {
-    list-style: none;
-    padding-inline-start: 0; // TODO: only style lists in content
     display: grid;
     grid-template-columns: repeat(2, auto);
     gap: 0.2em 1.5em;
@@ -117,3 +115,7 @@ figure {
         grid-template-columns: auto;
     }
 }
+
+.link-with-icon {
+    svg { margin-right: .5ch; }
+}

templates/includes/footer.html

@@ -1,4 +1,4 @@
-<footer class="site-footer">
+<footer class="site-footer" role="contentinfo">
     <div class="wrapper">
         {% if config.description %}
             <p>{{ config.description }}</p>

templates/includes/home.html

@@ -15,9 +15,9 @@
         </p>
         <p>
             Join us on
-            <a href="https://github.com/{{ social.github | urlencode }}/wg"><svg class="svg-icon"><use xlink:href="{{ get_url(path='minima-social-icons.svg#github') }}"></use></svg> GitHub</a>
+            <a href="https://github.com/{{ social.github | urlencode }}/wg" class="link-with-icon"><svg class="svg-icon" aria-hidden="true"><use xlink:href="{{ get_url(path='social/github.svg#icon') }}"></use></svg><span>GitHub</span></a>
             or
-            <a href="https://discord.gg/{{ social.discord | urlencode }}"><svg class="svg-icon"><use xlink:href="{{ get_url(path='minima-social-icons.svg#discord') }}"></use></svg> Discord</a>,
+            <a href="https://discord.gg/{{ social.discord | urlencode }}" class="link-with-icon"><svg class="svg-icon" aria-hidden="true"><use xlink:href="{{ get_url(path='social/discord.svg#icon') }}"></use></svg><span>Discord</span></a>,
             and help shape the future of game development in Rust!
         </p>
     </div>

templates/includes/social.html

@@ -1,8 +1,8 @@
 {% set social = config.extra.social_links -%}
 
-<ul class="social-links">
-    {% if social.github %}<li><a href="https://github.com/{{ social.github | urlencode }}" title="{{ social.github }}"><svg class="svg-icon"><use xlink:href="{{ get_url(path='social/github.svg#icon') }}"></use></svg> GitHub (rust-gamedev)</a></li>{% endif %}
-    {% if social.twitter %}<li><a href="https://twitter.com/{{ social.twitter  | urlencode }}" title="{{ social.twitter }}"><svg class="svg-icon"><use xlink:href="{{ get_url(path='social/twitter.svg#icon') }}"></use></svg> Twitter (rust_gamedev)</a></li>{% endif %}
-    {% if social.discord %}<li><a href="https://discord.gg/{{ social.discord | urlencode }}" title="Discord"><svg class="svg-icon"><use xlink:href="{{ get_url(path='social/discord.svg#icon') }}"></use></svg> Discord (#wg-gamedev)</a></li>{% endif %}
-    {% if social.rss %}<li><a href="{{ get_url(path='rss.xml') }}" title="{{ social.rss }}"><svg class="svg-icon"><use xlink:href="{{ get_url(path='social/rss.svg#icon') }}"></use></svg> RSS feed</a></li>{% endif %}
+<ul class="social-links _semantic">
+    {% if social.github %}<li><a href="https://github.com/{{ social.github | urlencode }}" class="link-with-icon"><svg class="svg-icon" title="GitHub" aria-label="GitHub" role="img"><use xlink:href="{{ get_url(path='social/github.svg#icon') }}" aria-hidden="true"></use></svg><span>rust-gamedev</span></a></li>{% endif %}
+    {% if social.twitter %}<li><a href="https://twitter.com/{{ social.twitter  | urlencode }}" class="link-with-icon"><svg class="svg-icon" title="Twitter" aria-label="Twitter" role="img"><use xlink:href="{{ get_url(path='social/twitter.svg#icon') }}" aria-hidden="true"></use></svg><span>rust_gamedev</span></a></li>{% endif %}
+    {% if social.discord %}<li><a href="https://discord.gg/{{ social.discord | urlencode }}" class="link-with-icon"><svg class="svg-icon" title="Discord" aria-label="Discord" role="img"><use xlink:href="{{ get_url(path='social/discord.svg#icon') }}" aria-hidden="true"></use></svg>#wg-gamedev</span></a></li>{% endif %}
+    {% if social.rss %}<li><a href="{{ get_url(path='rss.xml') }}" class="link-with-icon"><svg class="svg-icon" title="RSS" aria-label="RSS" role="img"><use xlink:href="{{ get_url(path='social/rss.svg#icon') }}" aria-hidden="true"></use></svg><span>gamedev.rs</span></a></li>{% endif %}
 </ul>