Merge pull request #29 from nishant0708/minimal_items

Change the list to very few #12
recodehive · Aug 2, 2024 · d4f3835 · d4f3835
2 parents 334fa1d + 7996548
commit d4f3835
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -4,41 +4,45 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Awesome GitHub Profile READMEs</title>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
+    <div class="toggle-switch-container">
     <div class="toggle-switch">
       <input type="checkbox" id="theme-toggle" />
       <label for="theme-toggle"></label>
       <span class="toggle-label">Light Mode</span>
     </div>
+</div>
     <div class="container">
       <h1 class="main-heading">Awesome GitHub Profile READMEs</h1>
       <div class="tags">
-        <span class="tag">All</span>
-        <span class="tag">Github Actions 🤖</span>
-        <span class="tag">Game Mode 🚀</span>
-        <span class="tag">Code Mode 👨‍💻</span>
-        <span class="tag">Dynamic Realtime 🔄</span>
-        <span class="tag">A Little Bit of Everything 😃</span>
-        <span class="tag">Descriptive 🗒</span>
-        <span class="tag">Simple but Innovative Ones 🤗</span>
-        <span class="tag">Typing.. Mode ⌨️</span>
-        <span class="tag">Anime 👾</span>
+        <span class="tag">Badge 🎖️</span>
         <span class="tag">Minimalistic ✨</span>
-        <span class="tag">GIFS 🖼️</span>
-        <span class="tag">Just Images 🐱</span>
-        <span class="tag">Badges 🎖️</span>
-        <span class="tag">Fancy Fonts ✍️</span>
+        <span class="tag">Dynamic 🔄</span>
         <span class="tag">Icons 🎯</span>
-        <span class="tag">Retro 😎</span>
+
+        <span class="tag">Backgrounds 😎</span>
+        <span class="tag">GIFS 🖼️</span>
+        <span class="tag">Game Mode 🚀</span>
+        <span class="tag">Code 👨‍💻</span>
       </div>
-      <a href="https://github.com/recodehive/awesome-github-profiles" class="grey-banner">
+      <a
+        href="https://github.com/recodehive/awesome-github-profiles"
+        class="grey-banner"
+      >
         ADD YOUR PROFILE
       </a>
       <div class="search-bar">
-        <input type="text" class="search-input" placeholder="Search Nickname or Username..." />
+        <input
+          type="text"
+          class="search-input"
+          placeholder="Search Nickname or Username..."
+        />
       </div>
       <div class="profiles">
         <!-- Profiles will be dynamically loaded here -->

diff --git a/styles.css b/styles.css
@@ -19,6 +19,10 @@ body {
   }
 
   .tags {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
     margin-bottom: 20px;
   }
 
@@ -138,11 +142,13 @@ body {
 
   /* Toggle Switch Styles */
   .toggle-switch {
-    position: fixed;
-    top: 20px;
-    left: 20px;
-    display: flex;
-    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    position: absolute;
+
+
     cursor: pointer;
   }
 
@@ -159,7 +165,10 @@ body {
     position: relative;
     transition: background-color 0.3s ease;
   }
-
+  .toggle-switch-container{
+    position: relative;
+    margin: 40px 0px;
+  }
   .toggle-switch label::after {
     content: "";
     width: 23px;
@@ -189,4 +198,11 @@ body {
   body.dark-mode .toggle-label {
     color: #f0f0f0;
   }
-
+  @media (max-width:500px){
+    .toggle-switch{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+    }
+  }