brought the translate to hindi button to main page for smaller devices (

#152) * brought the translate to hindi button to main page for smaller devices * fixed the bug for translate button * fixed the bug
rbjks · Jun 13, 2024 · ae3acf6 · ae3acf6
1 parent bc1edae
commit ae3acf6
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 29 deletions.
diff --git a/activities.html b/activities.html
@@ -64,6 +64,9 @@
           <path d="M4 19L20 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </nav>
+      <div class="special-button">
+        <a class="translate" href="#" aria-label="Read in English" onclick="changelanguage()">हिन्दी में देखिये</a>
+      </div>
       <ul class="mobileNav">
         <li><a class="translate" href="/" aria-label="होम">Home</a></li>
         <li>
@@ -84,15 +87,6 @@
             >Contact Us</a
           >
         </li>
-        <li>
-          <a
-            class="translate"
-            href="#"
-            aria-label="Read in English"
-            onclick="changelanguage()"
-            >हिन्दी में देखिये</a
-          >
-        </li>
       </ul>
     </div>
 

diff --git a/assets/css/activities.css b/assets/css/activities.css
@@ -14,3 +14,19 @@
 .twitter-activities * {
   margin: auto;
 }
+.special-button {
+  display: none;
+}
+@media (max-width: 768px) {
+  .special-button {
+    display: flex;
+    position: absolute;
+    right: 40px;
+    top: 30px;
+    align-items: center;
+  }
+  .special-button a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
diff --git a/assets/css/contact.css b/assets/css/contact.css
@@ -43,12 +43,25 @@ body {
   border-radius: 10px;
   text-decoration: none;
 }
-
+.special-button {
+  display: none;
+}
 @media (max-width: 768px) {
   .contact-parent div {
     flex: 1 1 80%; /* Forces divs to stack on top of each other */
   }
   .contact-parent {
     flex-wrap: wrap;
   }
+  .special-button {
+    display: flex;
+    position: absolute;
+    right: 40px;
+    top: 30px;
+    align-items: center;
+  }
+  .special-button a {
+    color: #fff;
+    text-decoration: none;
+  }
 }
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -542,6 +542,9 @@ footer {
   height: 1.5rem;
   width: 1.5rem;
 }
+.special-button {
+  display: none;
+}
 
 /* Media queries */
 @media (max-width: 768px) {
@@ -638,11 +641,21 @@ footer {
   #navbar .mobileNav li a:active {
     color: #fff;
   }
+  .special-button {
+    display: flex;
+    position: absolute;
+    right: 40px;
+    top: 30px;
+    align-items: center;
+  }
+  .special-button a {
+    color: #fff;
+    text-decoration: none;
+  }
 }
 
 @media (max-width: 510px) {
   .about--address {
     word-break: break-word;
   }
-
 }
diff --git a/contact.html b/contact.html
@@ -62,6 +62,9 @@
           <path d="M4 19L20 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </nav>
+      <div class="special-button">
+        <a class="translate" href="#" aria-label="Read in English" onclick="changelanguage()">हिन्दी में देखिये</a>
+      </div>
       <ul class="mobileNav">
         <li><a class="translate" href="/" aria-label="होम">Home</a></li>
         <li>
@@ -82,15 +85,6 @@
             >Contact Us</a
           >
         </li>
-        <li>
-          <a
-            class="translate"
-            href="#"
-            aria-label="Read in English"
-            onclick="changelanguage()"
-            >हिन्दी में देखिये</a
-          >
-        </li>
       </ul>
     </div>
 

diff --git a/index.html b/index.html
@@ -62,6 +62,9 @@
           <path d="M4 19L20 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </nav>
+      <div class="special-button">
+        <a class="translate" href="#" aria-label="Read in English" onclick="changelanguage()">हिन्दी में देखिये</a>
+      </div>
       <ul class="mobileNav">
         <li><a class="translate" href="/" aria-label="होम">Home</a></li>
         <li>
@@ -82,15 +85,6 @@
             >Contact Us</a
           >
         </li>
-        <li>
-          <a
-            class="translate"
-            href="#"
-            aria-label="Read in English"
-            onclick="changelanguage()"
-            >हिन्दी में देखिये</a
-          >
-        </li>
       </ul>
     </div>
     <div class="introduction">