Added "X"

👎

css/brands.css

@@ -911,7 +911,7 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* Twitter */
+/* Twitter (archiving soon, see 'X') */
 .button.button-twit {
   color: #ffffff;
   background-color: #1da1f2;
@@ -1025,6 +1025,17 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* X */
+.button.button-x {
+  color: #FFFFFF;
+  background-color: #000000;
+  border: 1px solid #FFFFFF;
+}
+.button.button-x:hover,
+.button.button-x:focus {
+  filter: brightness(90%);
+}
+
 /* Xing */
 .button.button-xing {
   color: #ffffff;

images/icons/x.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9014 1.16016H22.5816L14.5415 10.3493L24 22.8537H16.5941L10.7935 15.2699L4.15631 22.8537H0.473926L9.07356 13.0249L0 1.16016H7.59394L12.8372 8.09208L18.9014 1.16016ZM17.6098 20.651H19.649L6.48589 3.24719H4.29759L17.6098 20.651Z" fill="white"/>
+</svg>

index.html

@@ -334,7 +334,7 @@
         <!-- Twitch -->
         <a class="button button-twitch" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/twitch.svg" alt="">Twitch</a><br>
 
-        <!-- Twitter -->
+        <!-- Twitter (archiving soon, see 'X') -->
         <a class="button button-twit" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/twitter.svg" alt="">Twitter</a><br>
 
         <!-- Unsplash -->
@@ -364,6 +364,9 @@
         <!-- WordPress -->
         <a class="button button-wordpress" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/wordpress.svg" alt="">WordPress</a><br>
 
+        <!-- X -->
+        <a class="button button-x" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/x.svg" alt="">Follow on X</a><br>
+
         <!-- Xing -->
         <a class="button button-xing" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/xing.svg" alt="">Xing</a><br>