Make Footer Sticky & Include Social Links

alokc83 · Feb 20, 2019 · 0f1a7fc · 0f1a7fc
1 parent 1924509
commit 0f1a7fc
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 20 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,7 +1,10 @@
-<footer class="mt-5 text-center text-muted wow animated fadeIn" data-wow-delay=".30s">
-  <small>
+<footer class="mt-auto py-3 text-center">
+
+  <small class="text-muted mb-2">
     <i class="fas fa-code"></i> with <i class="fas fa-heart"></i>
-    by <strong>{{ site.author.name }}</strong> | 
-    © <script>document.write(new Date().getFullYear())</script>
+    by <strong>{{ site.author.name }}</strong>
   </small>
+
+  {% include social.html %}
+
 </footer>
diff --git a/_includes/header.html b/_includes/header.html
@@ -9,8 +9,5 @@
   </div>
 
   <p class="text-muted wow animated slideInUp" data-wow-delay=".25s">{{ site.description }}</p>
-  <hr class="text-muted wow animated fadeIn" data-wow-delay=".40s">
-
-  {% include social.html %}
 
 </div>
diff --git a/_includes/social.html b/_includes/social.html
@@ -1,32 +1,32 @@
-<div class="row justify-content-center wow animated fadeIn" data-wow-delay=".6s">
+<div class="container-fluid justify-content-center">
 
   {% if site.author.twitter %}
-  <a class="mx-2" href="https://www.twitter.com/{{ site.author.twitter }}">
-    <i class="fab fa-lg fa-twitter"></i>
+  <a class="social twitter mx-1" href="https://www.twitter.com/{{ site.author.twitter }}">
+    <i class="fab fa-1x fa-twitter"></i>
   </a>
   {% endif %}
 
   {% if site.author.facebook %}
-  <a class="mx-2" href="https://www.facebook.com/{{ site.author.facebook }}">
-    <i class="fab fa-lg fa-facebook"></i>
+  <a class="social facebook mx-1" href="https://www.facebook.com/{{ site.author.facebook }}">
+    <i class="fab fa-1x fa-facebook"></i>
   </a>
   {% endif %}
 
   {% if site.author.email %}
-  <a class="mx-2" href="mailto:{{ site.author.email }}">
-    <i class="fas fa-lg fa-envelope"></i>
+  <a class="social email mx-1" href="mailto:{{ site.author.email }}">
+    <i class="fas fa-1x fa-envelope"></i>
   </a>
   {% endif %}
 
   {% if site.author.github %}
-  <a class="mx-2" href="https://www.github.com/{{ site.author.github }}">
-    <i class="fab fa-lg fa-github"></i>
+  <a class="social github mx-1" href="https://www.github.com/{{ site.author.github }}">
+    <i class="fab fa-1x fa-github"></i>
   </a>
   {% endif %}
 
   {% if site.author.linkedin %}
-  <a class="mx-2" href="https://www.linkedin.com/in/{{ site.author.linkedin }}">
-    <i class="fab fa-lg fa-linkedin-in"></i>
+  <a class="social linkedin mx-1" href="https://www.linkedin.com/in/{{ site.author.linkedin }}">
+    <i class="fab fa-1x fa-linkedin-in"></i>
   </a>
   {% endif %}
 

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,15 +6,20 @@
   https://github.com/YoussefRaafatNasry/portfolYOU
 -->
 
-<html lang="en">
+<html lang="en" class="h-100">
 
 {% include head.html %}
 
-<body class="container my-5">
+<body class="d-flex flex-column h-100">
+
+  <main class="flex-shrink-0 container mt-5">
   {% include navbar.html %}
   {{ content }}
+  </main>
+
   {% include footer.html %}
   {% include scripts.html %}
+
 </body>
 
 </html>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -32,4 +32,16 @@ body {
     border-radius: 50%;
     object-fit: cover;
     object-position: center;
+}
+
+// Footer
+.social {
+    text-decoration: none !important;
+    color: #6c757d;
+
+    &.twitter:hover  { color: #1da1f2 }
+    &.facebook:hover { color: #3b5998 }
+    &.email:hover    { color: #db4437 }
+    &.github:hover   { color: #333333 }
+    &.linkedin:hover { color: #007bb5 }
 }