Update button for AA accessibility

rdi-berkeley · May 18, 2024 · 9284c34 · 9284c34
1 parent 346111d
commit 9284c34
Showing 1 changed file with 37 additions and 8 deletions.
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -62,7 +62,6 @@
 </div>
 
 <div id="affiliated-container">
-  <!-- <h2 id="affiliated-title">Join our Community</h2> -->
   <div style="font-size: 12pt; font-family: 'Open Sans', sans-serif; font-weight: 300;">
     <p>
       RDI will also act as a hub and platform for collaborations globally with other organizations and researchers, as
@@ -74,20 +73,17 @@
     <p>
       For more information about the RDI Center, please join <a
         href="https://groups.google.com/g/berkeley-rdi">berkeley-rdi@googlegroups.com</a>. For students who are
-      interested in learning more about research opportunities and internship programs offered by the RDI Center, please
-      fill out <a
+        interested in learning more about research opportunities and internship programs offered by the RDI Center, please
+        fill out <a
         href="https://docs.google.com/forms/d/e/1FAIpQLSfn16l-74qwGEzagjxT8ffbvShlIlZ6Zm3voiCnrh1PYJ_wvg/viewform">this
         form</a>.
     </p>
     <div style="display: flex; width: 100%;">
-      <!-- <a href="https://forms.gle/eDChgjkGCZJKtpM29"
-        style="width: 50%; align-content: center; justify-content: center; display: flex; text-decoration: none; padding: 5px; "> -->
-      <div style="width: 50%; align-content: center; justify-content: center; display: flex; text-decoration: none; padding: 5px; ">
+      <div style="width: 50%; align-content: center; justify-content: center; display: flex; text-decoration: none; padding: 5px;">
         <button class="our-button" id="communityBtn" style="background-color: #44BBA4; color: black;">
           Join Our Mailing List to Learn More
         </button>
       </div>
-      <!-- </a> -->
       <a href="https://docs.google.com/forms/d/e/1FAIpQLSfn16l-74qwGEzagjxT8ffbvShlIlZ6Zm3voiCnrh1PYJ_wvg/viewform"
         style="width: 50%; align-content: center; justify-content: center; display: flex; text-decoration: none;padding: 5px;">
         <button class="our-button" style="background-color: #DC3D38;">
@@ -97,7 +93,6 @@
     </div>
   </div>
 </div>
-</div>
 
 <div id="joinBtn" onclick="window.location.href='https://rdi.berkeley.edu/signup';">
   <img id="mailList"
@@ -249,3 +244,37 @@ <h2>Subscribe to Our Mailing List</h2>
     }
   </script>
 </div>
+<style>
+.our-button {
+    font-size: 16px;
+    padding: 10px;
+  }
+
+  @media (max-width: 1200px) {
+    .our-button {
+      font-size: 14px;
+      padding: 8px;
+    }
+  }
+
+  @media (max-width: 992px) {
+    .our-button {
+      font-size: 12px;
+      padding: 6px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .our-button {
+      font-size: 10px;
+      padding: 4px;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .our-button {
+      font-size: 8px;
+      padding: 2px;
+    }
+  }
+</style>