footer: add "follow us" section

* scss/style.scss (.mastadon-icon .follow-block): New classes.
* static/includes/follow.html: New file.
* static/includes/footer.html: Include follow.html

3 files changed, 47 insertions, 1 deletions

diff --git a/scss/style.scss b/scss/style.scss
index 07dca53..b5f19a0 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -78,7 +78,7 @@ nav {
     }
 }
 
-// Feed
+// Feed, Social
 a.feed {
     border-bottom: 0px;
 }
@@ -91,6 +91,33 @@ a.feed {
     margin-left: 2px;
 }
 
+.mastadon-icon {
+    content: url('/assets/img/mastadon.svg');
+    background-color: $fsfi-dark;
+    max-width: 17px;
+    border-radius: 3px;
+    margin-left: 2px;
+}
+
+.follow-block {
+    ul {
+        display: flex;
+        justify-content: center;
+        list-style: none;
+        margin: 0 0 0 0;
+
+        li {
+            display: inline;
+            margin-top: 1px;
+
+            a {
+                border-bottom: 0px;
+            }
+        }
+    }
+}
+
+
 // Join
 .fellowship-type {
     border: 2px solid $fsfi-dark;
diff --git a/static/includes/follow.html b/static/includes/follow.html
new file mode 100644
index 0000000..4cf31d3
--- /dev/null
+++ b/static/includes/follow.html
@@ -0,0 +1,16 @@
+<div class="content is-small has-text-centered">
+    <div class="follow-block">
+        <p class="is-sr-only">Follow us</p>
+        <ul>
+            <li><a class="follow-link" rel="me"
+                   href="https://social.masto.host/@fsfi">
+                <span class="mastadon-icon"></span>
+                <span class="is-sr-only">Mastadon</span></a>
+            </li>
+            <li><a class="follow-link" href="/news/feed.atom">
+                <span class="feed-icon"></span>
+                <span class="is-sr-only">News Feed</span></a>
+            </li>
+        </ul>
+    </div>
+</div>
diff --git a/static/includes/footer.html b/static/includes/footer.html
index d0066b6..a9a408f 100755
--- a/static/includes/footer.html
+++ b/static/includes/footer.html
@@ -1,5 +1,8 @@
 <!-- start footer -->
 <footer class="footer">
+
+  <!--#include virtual="/includes/follow.html"-->
+
   <div class="content is-small">
     <p>Copyright &copy; 2002-2020 Free Software Foundation of India.</p>