From 8c47f6c43458cddf2732f3a8d24ea690cf4c93cc Mon Sep 17 00:00:00 2001
From: Ahmed raza <ahmed.raza1054@gmail.com>
Date: Wed, 30 Oct 2024 02:16:29 +0500
Subject: [PATCH 1/6] Fix: Adjust container responsiveness for small screens

---
 style.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/style.css b/style.css
index a4256e1..0669de0 100644
--- a/style.css
+++ b/style.css
@@ -671,3 +671,8 @@ Animating title
     width: 200px;
   }
 }
+@media screen and (max-width: 420px) {  
+  .container {     
+   margin-top: 10px;   
+     max-width: 100%;   } 
+   }
\ No newline at end of file

From 7e3495b337580de11481bef21becb6963a0be8b8 Mon Sep 17 00:00:00 2001
From: Ahmed raza <ahmed.raza1054@gmail.com>
Date: Wed, 30 Oct 2024 02:21:41 +0500
Subject: [PATCH 2/6] run the lint test and format code

---
 style.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/style.css b/style.css
index 0669de0..8e8c0a2 100644
--- a/style.css
+++ b/style.css
@@ -671,8 +671,9 @@ Animating title
     width: 200px;
   }
 }
-@media screen and (max-width: 420px) {  
-  .container {     
-   margin-top: 10px;   
-     max-width: 100%;   } 
-   }
\ No newline at end of file
+@media screen and (max-width: 420px) {
+  .container {
+    margin-top: 10px;
+    max-width: 100%;
+  }
+}

From a256b6a52bd0c89b47b5fc8c78dea78ec7e0530c Mon Sep 17 00:00:00 2001
From: Ahmed raza <ahmed.raza1054@gmail.com>
Date: Wed, 30 Oct 2024 02:38:25 +0500
Subject: [PATCH 3/6] Enhance Navigation Links: Improve Responsiveness and
 Hover Effects

---
 Todo.html |  5 +++--
 style.css | 12 ++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/Todo.html b/Todo.html
index 8f367fc..77b2ba8 100644
--- a/Todo.html
+++ b/Todo.html
@@ -34,8 +34,9 @@
       <div class="navlinks-container">
         <ul class="navlinks">
           <li class="link">
-            <a href="index.html"
-              >Back to main <i class="fa-solid fa-arrow-right"></i
+            <a href="index.html">
+              <span class="back-to-man"> Back to main </span>
+              <i class="fa-solid fa-arrow-right"></i
             ></a>
           </li>
         </ul>
diff --git a/style.css b/style.css
index 8e8c0a2..8ec5660 100644
--- a/style.css
+++ b/style.css
@@ -676,4 +676,16 @@ Animating title
     margin-top: 10px;
     max-width: 100%;
   }
+  .back-to-man {
+    display: none;
+  }
+  .link a {
+    padding: 0.5rem;
+  }
+  .link a i {
+    font-size: 0.9rem;
+  }
+  .navlinks {
+    margin-right: 1rem;
+  }
 }

From 2139bdf2c7d0bd29ab651b87ee70f14cf4b541e4 Mon Sep 17 00:00:00 2001
From: Ahmed raza <ahmed.raza1054@gmail.com>
Date: Wed, 30 Oct 2024 02:53:22 +0500
Subject: [PATCH 4/6] Fix: moving issue and  Center align social media icons

---
 style.css | 37 +++++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/style.css b/style.css
index 8ec5660..ae815d9 100644
--- a/style.css
+++ b/style.css
@@ -84,6 +84,8 @@ why-need-link {
 }
 
 .link a {
+  display: flex;
+  align-items: center;
   font-size: 1rem;
   font-weight: 500;
   text-decoration: none;
@@ -96,12 +98,15 @@ why-need-link {
 .link a:hover {
   background-color: rgb(228, 227, 227);
   transition: all 300ms linear;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 .link i {
   font-size: 1rem;
   align-self: center;
+  margin-left: 0.4rem;
 }
+
 .container {
   width: 100%;
   max-width: 1000px;
@@ -343,22 +348,27 @@ footer p {
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 10px;
 }
 
 .social-media a {
-  margin: 1px 11px;
+  width: 32px;
+  height: 32px;
   color: black;
-  font-size: 15px;
-  padding: 8px;
-  border: 2px solid black;
+  font-size: 16px;
+  border: 1.5px solid black;
   border-radius: 8px;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+  transition: all 0.25s ease-out;
+}
+.social-media a i {
+  vertical-align: middle;
 }
-
 .social-media a:hover {
   transform: scale(1.05);
   transition: all 0.25s ease-out;
-  border: none;
+  border: transparent;
 }
 
 .social-media .insta:hover {
@@ -679,13 +689,16 @@ Animating title
   .back-to-man {
     display: none;
   }
-  .link a {
-    padding: 0.5rem;
+  .navlinks {
+    margin-right: 1rem; /* Reduce margin on smaller screens */
   }
-  .link a i {
-    font-size: 0.9rem;
+
+  .link a {
+    font-size: 0.9rem; /* Smaller font size for mobile */
+    padding: 0.4rem; /* Less padding for compactness */
   }
-  .navlinks {
-    margin-right: 1rem;
+
+  .link i {
+    font-size: 0.9rem; /* Smaller icon size */
   }
 }

From 316fb2feb8809c77a95b433ef30bbd0cc28bf638 Mon Sep 17 00:00:00 2001
From: Ahmed raza <ahmed.raza1054@gmail.com>
Date: Wed, 30 Oct 2024 03:16:49 +0500
Subject: [PATCH 5/6] Enhance Responsiveness: Adjust Button Layout for Small
 Screens

---
 Todo.html | 15 +++++++++------
 style.css | 20 +++++++++++++++++++-
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/Todo.html b/Todo.html
index 77b2ba8..00cd393 100644
--- a/Todo.html
+++ b/Todo.html
@@ -83,12 +83,15 @@ <h1 class="subtitle">Todo-List</h1>
       <!-- Sorting and task counter section -->
       <div class="sort-buttons">
         <div class="sort-filter-container">
-          <button class="sort-button" onclick="sortTodos('category')">
-            Sort by Category
-          </button>
-          <button class="sort-button" onclick="sortTodos('priority')">
-            Sort by Priority
-          </button>
+          <div class="button-container">
+            <button class="sort-button" onclick="sortTodos('category')">
+              Sort by Category
+            </button>
+            <button class="sort-button" onclick="sortTodos('priority')">
+              Sort by Priority
+            </button>
+          </div>
+
           <select class="js-filter-input" onchange="filterTodos()">
             <option value="all">All</option>
             <option value="pending">Pending</option>
diff --git a/style.css b/style.css
index ae815d9..becec6c 100644
--- a/style.css
+++ b/style.css
@@ -470,7 +470,6 @@ Animating title
   margin-left: auto;
   margin-right: 0;
 }
-
 .task-counter-button:hover {
   background-color: #45a049; /* Same hover effect as sort button */
 }
@@ -686,6 +685,25 @@ Animating title
     margin-top: 10px;
     max-width: 100%;
   }
+
+  .sort-buttons {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .button-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+  }
+  .sort-button {
+    width: 40%;
+  }
+  .task-counter-button {
+    width: 90%;
+    margin: 0 auto;
+  }
+
   .back-to-man {
     display: none;
   }

From e3f71f0ac0f90afbda364fdd66da1d9543eb8aef Mon Sep 17 00:00:00 2001
From: Ahmed raza <ahmed.raza1054@gmail.com>
Date: Wed, 30 Oct 2024 19:27:47 +0500
Subject: [PATCH 6/6] Applied formating fixes

---
 style.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/style.css b/style.css
index 80553ae..684749c 100644
--- a/style.css
+++ b/style.css
@@ -712,12 +712,11 @@ Animating title
   }
 
   .link a {
-    font-size: 0.9rem; 
-    padding: 0.4rem; 
+    font-size: 0.9rem;
+    padding: 0.4rem;
   }
 
   .link i {
-    font-size: 0.9rem; 
+    font-size: 0.9rem;
   }
-
 }