update footer socials

Signed-off-by: Guilherme Avila <[email protected]>

assets/css/waves.css

@@ -455,13 +455,15 @@ body.hid #brand {
 
 #footer {
   position: absolute;
+  display: flex;
+  align-items: center;
   right: 4vw;
   bottom: 5vh;
 }
 
 .footers, .footers a {
   font-weight: 600;
-  display: inline-block;
+  display: block;
   color: #e4e5e6;
   font-size: 14px;
   text-rendering: optimizeLegibility;
@@ -470,8 +472,9 @@ body.hid #brand {
   letter-spacing: 1.1px;
 }
 
-.footers a {
-  text-decoration: underline;
+.footers {
+  /* text-decoration: underline; */
+  margin: auto 5px;
 }
 
 /* === [MENU_ICON] === */
@@ -1109,6 +1112,45 @@ input[type=range] {
   opacity: 0;
 }
 
+#twitter {
+  display: block;
+  height: 16px;
+  aspect-ratio: 1;
+  background-color: #e4e5e6;
+  mask-image: url(../images/twitter.svg);
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-image: url(../images/twitter.svg);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+}
+
+#mastodon {
+  display: block;
+  height: 16px;
+  aspect-ratio: 1;
+  background-color: #e4e5e6;
+  mask-image: url(../images/mastodon.svg);
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-image: url(../images/mastodon.svg);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+}
+
+#github {
+  display: block;
+  height: 16px;
+  aspect-ratio: 1;
+  background-color: #e4e5e6;
+  mask-image: url(../images/github.svg);
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-image: url(../images/github.svg);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+}
+
 @media screen and (max-width: 700px) {
   #brand {
 		font-size: 26px;

index.html

@@ -43,8 +43,10 @@ <h1 id="brand" class="brandPos brandInit nodelay"><span>•</span> Atomize <span
 		  </div>
 		</div>
 		<div id="footer" class="inactive delay">
-		  <h4 class="footers">ScieCode /</h4>
-		  <h4 class="footers"><a href="https://github.com/sciecode/sciecode.github.io" target="_blank" rel="noopener">github</a></h4>
+		  <h4 class="footers">ScieCode / </h4>
+		  <h4 class="footers"><a id="github" href="https://github.com/sciecode/sciecode.github.io" target="_blank" rel="noopener"></a></h4>
+			<h4 class="footers"><a id="twitter" rel="me" href="https://twitter.com/sciecode"></a></h4>
+			<h4 class="footers"><a id="mastodon" rel="me" href="https://mastodon.gamedev.place/@sciecode"></a></h4>
 		</div>
 		<div id="settings_menu" class="menu_inactive inactive delay">
 		  <div class="upper_menu hover_menu"></div>