new social media links

NEWS

@@ -14,6 +14,8 @@
 
   - Adopted a triple-collumn layout for the footer
 
+  - New components : social media links
+
 ## BlueSky 2.x
 
 ### BlueSky 2.1

css/style.css

@@ -60,6 +60,35 @@ footer {
   margin-top:40px;
 }
 
+/* social media */
+
+ul.social {
+  font-size:1.5em;
+  padding-bottom:1em;
+  margin:auto;
+  text-align:center;
+}
+
+li.social-li {
+  list-style:none;
+  display:inline;
+}
+
+a.social-link {
+  color:#FFFFFF;
+  background-color:#000000;
+  padding:0.3em;
+  padding-left:0.36em;
+  padding-right:0.36em;
+  vertical-align:middle;
+  border-radius:100%;
+}
+
+a.social-link:hover {
+  color:#000000;
+  background-color:#FFFFFF;
+}
+
 
 /* ------------------ PANELS ------------------- */
 

index.html

@@ -227,6 +227,14 @@ In id suscipit elit.</code></pre>
 
 <footer class="container">
 
+  <ul class="social">
+    <li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
+    <li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
+    <li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li>
+    <li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li>
+    <li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li>
+    <li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
+  </ul>
 
   <div class="row">
     <div class="col-md-4">