* Style Changes

* Adds RSS Link
* Adds Social Links in Header & Footer based on responsiveness

3 files changed, 45 insertions, 6 deletions

diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css
index aee78a4..65be806 100644
--- a/src/_includes/assets/css/styles.css
+++ b/src/_includes/assets/css/styles.css
@@ -541,6 +541,9 @@ video {
     max-width: 1536px;
   }
 }
+.visible {
+  visibility: visible;
+}
 .absolute {
   position: absolute;
 }
@@ -606,6 +609,12 @@ video {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.ml-auto {
+  margin-left: auto;
+}
+.inline-block {
+  display: inline-block;
+}
 .flex {
   display: flex;
 }
@@ -648,6 +657,9 @@ video {
 .gap-10 {
   gap: 2.5rem;
 }
+.gap-4 {
+  gap: 1rem;
+}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -942,6 +954,14 @@ pre[class*="language-"] {
 
 @media (min-width: 768px) {
 
+  .md\:absolute {
+    position: absolute;
+  }
+
+  .md\:relative {
+    position: relative;
+  }
+
   .md\:ml-0 {
     margin-left: 0px;
   }
@@ -950,10 +970,26 @@ pre[class*="language-"] {
     margin-right: 0px;
   }
 
+  .md\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .md\:mt-auto {
+    margin-top: auto;
+  }
+
   .md\:flex {
     display: flex;
   }
 
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
index a883038..a0832b2 100644
--- a/src/_includes/partials/footer.njk
+++ b/src/_includes/partials/footer.njk
@@ -1,11 +1,13 @@
 <footer class="items-center px-6 py-2 mt-auto bg-black text-white">
-    
-    <ul class="flex w-full gap-10 font-supply-regular justify-center">
+    <ul class="flex w-full visible md:hidden gap-4 font-supply-regular ml-auto justify-center mt-5">
+        <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>
+        <li class="hover:text-white inline-block"><a title="RSS" href="/feed.xml" class="links">{% feather "rss" %}</a></li>
+    </ul>
+    <ul class="flex w-full gap-10 font-supply-regular justify-center mt-5 md:mt-auto">
             <li class="mt-1">
                 <p>&copy; 2022 Indrajith K L </p>
             </li>
-            {# <li><a title="Twitter" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li>
-            <li><a title="Github" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li>
-            <li><a title="LinkedIn" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li> #}
-        </ul>
+    </ul>
 </footer>
\ No newline at end of file
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
index ab1d424..50c1a7f 100644
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@@ -12,6 +12,7 @@
             <li class="hover:text-white"><a title="Twitter" href="https://twitter.com/indrajithKLIS" class="links">{% feather "twitter" %}</a></li>
             <li class="hover:text-white"><a title="Github" href="https://github.com/cooljith91112" class="links">{% feather "github" %}</a></li>
             <li class="hover:text-white"><a title="LinkedIn" href="https://www.linkedin.com/in/indrajithklis/" class="links">{% feather "linkedin" %}</a></li>
+            <li class="hover:text-white"><a title="RSS" href="/feed.xml" class="links">{% feather "rss" %}</a></li>
         </ul>
     </nav>
 </header>