Footer Changes : Style Fixes

2 files changed, 19 insertions, 1 deletions

diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css
index 65be806..0edf646 100644
--- a/src/_includes/assets/css/styles.css
+++ b/src/_includes/assets/css/styles.css
@@ -544,6 +544,9 @@ video {
 .visible {
   visibility: visible;
 }
+.invisible {
+  visibility: hidden;
+}
 .absolute {
   position: absolute;
 }
@@ -612,6 +615,9 @@ video {
 .ml-auto {
   margin-left: auto;
 }
+.block {
+  display: block;
+}
 .inline-block {
   display: inline-block;
 }
@@ -954,6 +960,14 @@ pre[class*="language-"] {
 
 @media (min-width: 768px) {
 
+  .md\:visible {
+    visibility: visible;
+  }
+
+  .md\:invisible {
+    visibility: hidden;
+  }
+
   .md\:absolute {
     position: absolute;
   }
@@ -982,6 +996,10 @@ pre[class*="language-"] {
     margin-top: auto;
   }
 
+  .md\:block {
+    display: block;
+  }
+
   .md\:flex {
     display: flex;
   }
diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
index a0832b2..3b88e2a 100644
--- a/src/_includes/partials/footer.njk
+++ b/src/_includes/partials/footer.njk
@@ -1,5 +1,5 @@
 <footer class="items-center px-6 py-2 mt-auto bg-black text-white">
-    <ul class="flex w-full visible md:hidden gap-4 font-supply-regular ml-auto justify-center mt-5">
+    <ul class="w-full block md:hidden gap-4 font-supply-regular ml-auto text-center mt-5 md:mt-0">
         <li class="hover:text-white inline-block"><a title="Twitter" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li>
         <li class="hover:text-white inline-block"><a title="Github" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li>
         <li class="hover:text-white inline-block"><a title="LinkedIn" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li>