mobile reduce fontsize

Author: hattifnatt4r

events.css

@@ -45,6 +45,29 @@
   }
 }
 
+.events-room {
+  font-size: 0.94rem;
+  font-style: italic;
+}
+@media (max-width: 480px) {
+  .hero_events .h1 {
+    font-size: min(1.7rem, 9vw);
+    line-height: min(2.1rem, 11vw);
+    font-weight: 700;
+    margin-bottom: 1rem;
+  }
+  .events-days {
+    display: block;
+    line-height: 1.35rem;
+  }
+  .events-room {
+    margin-left: 0rem;
+    font-size: 0.94rem;
+    margin-bottom: 0.4rem;
+    display: block;
+  }
+}
+
 /* DISCORD BUTTON */
 .btn-discord {
   display: inline-block;

events.html

@@ -82,11 +82,11 @@ <h2 class="hero-description">
         </div>
         <div>
           <h3 class="h3">Every Monday and Wednesday*</h3>
-          <span>
-            Mon May 18 &nbsp;5:30&hairsp;-&hairsp;8pm &nbsp; <span class="strong_">Ground&nbsp;floor</span>,<br>
-            Wed May 20 &nbsp;6&hairsp;-&hairsp;8pm &nbsp; <span class="strong_">Community&nbsp;Room</span>,<br>
-            <span class="strong">Tue</span> May 26 &nbsp;5:30&hairsp;-&hairsp;8pm &nbsp; <span class="strong_">Ground&nbsp;floor</span>,<br>
-            Wed May 27 &nbsp;6&hairsp;-&hairsp;8pm &nbsp; <span class="strong_">Community&nbsp;Room</span><br>
+          <span class="events-days">
+            Mon May 18 &nbsp;5:30&hairsp;-&hairsp;8pm, &nbsp; <span class="events-room"><span class="strong_">Ground&nbsp;floor</span><br></span>
+            Wed May 20 &nbsp;6&hairsp;-&hairsp;8pm, &nbsp; <span class="events-room"><span class="strong_">Community&nbsp;Room</span><br></span>
+            <span class="strong">Tue</span> May 26 &nbsp;5:30&hairsp;-&hairsp;8pm, &nbsp; <span class="events-room"><span class="strong_">Ground&nbsp;floor</span><br></span>
+            Wed May 27 &nbsp;6&hairsp;-&hairsp;8pm, &nbsp; <span class="events-room"><span class="strong_">Community&nbsp;Room</span><br></span>
           </span>
         </div>
       </section>

nav.css

@@ -21,6 +21,8 @@ nav {
 }
 @media (max-width: 480px) {
   .nav-hide-mobile { display: none; }
+  .nav-left { gap: 1.5rem; }
+  .nav-right { gap: 1.8rem; }
 }
 
 .nav-icon {
@@ -38,54 +40,3 @@ nav {
   text-decoration: none;
 }
 
-
-/* AI_ MOBILE MENU */
-.nav-mobile-btn {
-  all:unset;
-  display: none;
-  cursor: pointer;
-  color: inherit;
-  font-weight: 700;
-  font-size: 1.4rem;
-  line-height: 0.7;
-}
-
-.nav-mobile {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 13rem;
-  background: #fff;
-  border-right: 1px solid rgba(0,0,0,0.1);
-  padding: 3.5rem 2rem 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  transform: translateX(-100%);
-  transition: transform 0.22s ease;
-  z-index: 200;
-}
-.nav-mobile.open {
-  transform: translateX(0);
-}
-.nav-mobile a {
-  font-size: 0.9rem;
-  font-weight: 600;
-  /* text-transform: uppercase; */
-  letter-spacing: 0.5px;
-  text-decoration: none;
-}
-.mobile-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.25);
-  z-index: 199;
-}
-.mobile-overlay.open {
-  display: block;
-}
-body.menu-open {
-  overflow: hidden;
-}

style.css

@@ -8,7 +8,7 @@ html {
 }
 
 @media (max-width: 600px) {
-  html { font-size: 17px; line-height: 26px; }
+  html { font-size: 15px; line-height: 27px; }
 }
 
 a { color: inherit; }
@@ -38,10 +38,12 @@ a:hover { opacity: 0.7; }
   font-size: 0.82rem;
   font-size: 0.88rem;
   margin-bottom: 0.1rem;
+  padding-top: 0.25rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: rgb(17, 17, 17);
+  line-height: 1.4rem;
 }
 
 .strong {