* Adds Responsive Header

3 files changed, 52 insertions, 34 deletions

diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css
index 520dade..1899a4d 100644
--- a/src/_includes/assets/css/styles.css
+++ b/src/_includes/assets/css/styles.css
@@ -576,12 +576,12 @@ video {
 .mt-2 {
   margin-top: 0.5rem;
 }
-.mt-10 {
-  margin-top: 2.5rem;
-}
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mt-10 {
+  margin-top: 2.5rem;
+}
 .mb-10 {
   margin-bottom: 2.5rem;
 }
@@ -606,12 +606,12 @@ video {
 .hidden {
   display: none;
 }
-.h-screen {
-  height: 100vh;
-}
 .h-48 {
   height: 12rem;
 }
+.h-screen {
+  height: 100vh;
+}
 .w-full {
   width: 100%;
 }
@@ -624,9 +624,6 @@ video {
 .flex-col {
   flex-direction: column;
 }
-.content-center {
-  align-content: center;
-}
 .items-center {
   align-items: center;
 }
@@ -645,15 +642,6 @@ video {
 .gap-10 {
   gap: 2.5rem;
 }
-.justify-self-center {
-  justify-self: center;
-}
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-.rounded-2xl {
-  border-radius: 1rem;
-}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -685,14 +673,6 @@ video {
   -o-object-fit: cover;
      object-fit: cover;
 }
-.object-none {
-  -o-object-fit: none;
-     object-fit: none;
-}
-.object-center {
-  -o-object-position: center;
-     object-position: center;
-}
 .p-2 {
   padding: 0.5rem;
 }
@@ -733,9 +713,6 @@ video {
 .text-justify {
   text-align: justify;
 }
-.align-middle {
-  vertical-align: middle;
-}
 .font-supply-regular {
   font-family: supplyRegular, sans-serif;
 }
@@ -755,6 +732,10 @@ video {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
 .font-bold {
   font-weight: 700;
 }
@@ -966,4 +947,41 @@ pre[class*="language-"] {
   .md\:flex-row {
     flex-direction: row;
   }
+
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
+  .md\:p-2 {
+    padding: 0.5rem;
+  }
+
+  .md\:p-0 {
+    padding: 0px;
+  }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
 }
\ No newline at end of file
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
index a4e04a2..da51bba 100644
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@@ -1,8 +1,8 @@
-<header class="w-full bg-black text-yellow-500 flex justify-between items-center px-6 py-4">
+<header class="w-full bg-black text-yellow-500 flex flex-row md:flex-col justify-between items-center px-6 py-4">
     <nav class="w-full">
-        <ul class="flex gap-10 font-supply-regular w-full items-center text-xl">
+        <ul class="flex flex-col md:flex-row  gap-10 font-supply-regular w-full items-center text-lg md:text-xl">
             <li>
-                <a href="/" class="text-3xl">{ indrajith.dev } </a>
+                <a href="/" class="text-lg md:text-3xl">{ indrajith.dev } </a>
             </li>
             <li class="hover:text-white"><a href="/about" id="about" class="links">About</a></li>
             <li class="hover:text-white"><a href="/posts" id="posts" class="links">Posts</a></li>
diff --git a/src/index.njk b/src/index.njk
index f0c0d75..e539bb1 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -3,8 +3,8 @@ layout: intro.njk
 title: "Hello Friend!! My name is Indrajith K L."
 ---
 <div class="flex w-full">
-    <div class="bg-yellow-500 text-xl text-black font-supply-regular shadow-[5px_5px_0px_0px_rgba(0,0,0,255)] p-10 mt-10">
-        <p class="text-2xl">{{title}}</p>
+    <div class="bg-yellow-500 text-md md:text-xl text-black font-supply-regular shadow-[5px_5px_0px_0px_rgba(0,0,0,255)] p-10 mt-10 md:p-0">
+        <p class="text-lg md:text-2xl">{{title}}</p>
         <p class="mt-3 text-justify">
             I'm a web developer, hobbyist game developer from Kerala, India working as a front-end developer.
             This site is where I write about my fun side projects, R&amp;D's, random thoughts, game development etc. Since you here why don't you read some posts from <a href="/posts" class="text-red-700"> here</a>.