Merge pull request #1208 from varshasric4/gh-pages

Improved Tag Alignment for Enhanced Layout

index.html

@@ -159,9 +159,6 @@ <h1 class="main-heading">Awesome GitHub Profile READMEs</h1>
         </svg>
 
       </button>
-
-
-
       <i class="fa-solid fa-caret-down dropdown" id="caret-down"></i>
     </div>
     <!-- Modal Structure -->

styles/styles.css

@@ -39,6 +39,8 @@ body {
 }
 
 .tag {
+  flex: 0 0 25%; /* Each tag will take up 25% of the width */
+  box-sizing: border-box; /* Ensures padding and border are included in width */
   display: inline-block;
   margin: 5px;
   padding: 10px 15px;
@@ -285,19 +287,32 @@ body.dark-mode ::-webkit-scrollbar-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
+  flex-wrap:wrap;
   margin-bottom: 20px;
 }
 
 .tag {
+<<<<<<< HEAD
+
   display: inline-block;
+=======
+  flex: 0 0 25%; /* Each tag will take up 25% of the width */
+  box-sizing: border-box; /* Ensures padding and border are included in width */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+>>>>>>> origin/gh-pages
   margin: 5px;
-  padding: 10px 15px;
+  padding: 11px 15px;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 20px;
   cursor: pointer;
   transition: background-color 0.3s ease;
+  flex: 0 0 25%; /* Each tag will take up 25% of the width */
+  box-sizing: border-box; /* Ensures padding and border are included in width */
 }
 
 .tag:hover {
@@ -779,10 +794,10 @@ body.dark-mode .footer-button:hover {
 .side-icons {
   position: fixed;
   right: 20px;
-  top: 30%;
+  top: 20%;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 10px;
 }
 
 .icon-content {
@@ -883,17 +898,17 @@ body.dark-mode .side-icons .icon-content a:hover i {
 
 /* Dark mode background colors for different icons */
 body.dark-mode .side-icons .icon-content a[data-social="facebook"] .filled {
-  background-color: #3b5998;
+  background-color: #040c1e;
   /* Darker shade for Facebook in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="linkedin"] .filled {
-  background-color: #0077b5;
+  background-color: #04141d;
   /* Darker shade for LinkedIn in dark mode */
 }
 
 body.dark-mode .side-icons .icon-content a[data-social="twitter"] .filled {
-  background-color: #1da1f2;
+  background-color: #030d13;
   /* Darker shade for Twitter in dark mode */
 }
 
@@ -916,7 +931,7 @@ body.dark-mode .side-icons .icon-content a:hover {
 /* Base styles */
 body {
   font-family: Arial, sans-serif;
-  background: linear-gradient(45deg, rgba(10, 151, 207, 0.9) 60%, rgba(15, 61, 214, 0.9) 40%);
+  background: linear-gradient(45deg, rgba(0, 8, 11, 0.9) 60%, rgba(1, 4, 15, 0.9) 40%);
   color: #333;
   margin: 0;
   padding: 0;