added social logos for github and X (#183)

* added social logos

* Remove labels from social icons in index.html

* fixed white spaces and added aria labels for X and github in HTML file

* Remove text decoration and border from links

Remove text decoration and border from social icon links.

Author: Recxsmacx

src/css/main.css

@@ -748,6 +748,24 @@ ul.icons li > span {
   text-decoration: none;
 }
 
+.social-icon-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icon-link:hover {
+  color: #ffffff;
+}
+
+.social-svg-icon {
+  width: 1.1em;
+  height: 1.1em;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
 ul.actions {
   cursor: default;
   list-style: none;

src/index.html

@@ -173,8 +173,16 @@ <h3 data-i18n>Discussion and Notification Group</h3>
                 <li>
                   <h3 data-i18n>Social</h3>
                   <ul class="icons">
-                    <li><a href="https://twitter.com/MeasurementLab" class="fa-twitter" target="_blank"><span class="label" data-i18n>Twitter</span></a></li>
-                    <li><a href="https://github.com/m-lab" class="fa-github" target="_blank"><span class="label" data-i18n>GitHub</span></a></li>
+                    <li>
+                      <a href="https://x.com/MeasurementLab" target="_blank" class="social-icon-link" aria-label="X">
+                        <svg class="social-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://github.com/m-lab" target="_blank" class="social-icon-link" aria-label="GitHub">
+                        <svg class="social-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
+                      </a>
+                    </li>
                   </ul>
                 </li>
               </ul>