[feat] adjust for mobile layout (#36)

* fixed overflows * made navbar mobile friendly * mobile impl: hero * mobile impl: about * mobile impl: schedule * mobile impl: sponsors * mobile impl: faq * mobile impl: contact * misc changes * fill in about placeholders * reposition hero brand
calblueprint · Jan 18, 2024 · 168a29b · 168a29b
1 parent 0d2807d
commit 168a29b
Show file tree

Hide file tree

Showing 19 changed files with 199 additions and 97 deletions.
diff --git a/src/components/About.astro b/src/components/About.astro
@@ -7,6 +7,8 @@ import fourppl from '../graphics/about/fourppl.webp';
 import bear from '../graphics/about/bear.webp';
 import tools from '../graphics/about/tools.webp';
 import crowd from '../graphics/about/crowd.webp';
+import educate from '../graphics/about/bigtable.webp';
+import empower from '../graphics/about/hackers_outdoors.webp';
 ---
 
 <section>
@@ -61,15 +63,15 @@ import crowd from '../graphics/about/crowd.webp';
           Cal Hacks at UC Berkeley. The event’s mission is two-fold:
         </p>
         <div class="captionRow">
-          <div class="image-placeholder"></div>
+          <Image src={empower} alt="Group of hackers mid-jump" />
           <p>
             To <b>empower</b> student hackers to develop creative solutions for relevant
             social causes and collaborate with non-profit organizations on ethical
             innovation with tangible community impact.
           </p>
         </div>
         <div class="captionRow">
-          <div class="image-placeholder"></div>
+          <Image src={educate} alt="People gathered in a conference" />
           <p>
             To <b>educate</b> students via a <b
               >series of workshops and speaker panels</b
@@ -86,6 +88,7 @@ import crowd from '../graphics/about/crowd.webp';
 <style lang="scss">
   @use '../styles/colors';
   @use '../styles/fonts';
+  @use '../styles/breakpoints';
 
   section {
     position: relative;
@@ -104,21 +107,24 @@ import crowd from '../graphics/about/crowd.webp';
   }
 
   div.mission-vision {
-    max-width: 58.625rem;
+    width: 100%;
+    padding-inline: 20px;
+
+    @media (min-width: breakpoints.$tablet) {
+      width: min(50rem, 90%);
+    }
   }
 
   div.bigRow {
     margin-top: 8.3125rem;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     gap: 0 6.125rem;
     text-align: left;
-  }
 
-  .image-placeholder {
-    background-color: colors.$secondary;
-    min-width: 10.5rem;
-    height: 7.0625rem;
+    @media (min-width: breakpoints.$tablet) {
+      flex-direction: row;
+    }
   }
 
   h2.left {
@@ -128,9 +134,23 @@ import crowd from '../graphics/about/crowd.webp';
 
   div.captionRow {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     margin-top: 3.75rem;
-    gap: 0 1.5rem;
+    gap: 1.5rem;
+
+    @media (min-width: breakpoints.$phone) {
+      flex-direction: row;
+    }
+
+    img {
+      background-color: colors.$secondary;
+      min-width: 10.5rem;
+      max-width: 10.5rem;
+      height: 7.0625rem;
+      margin: auto;
+      border-radius: 8px;
+      object-fit: cover;
+    }
   }
 
   div.text {
@@ -139,20 +159,18 @@ import crowd from '../graphics/about/crowd.webp';
     display: inline-block;
   }
 
-  div.captionRow {
-    display: flex;
-    flex-direction: row;
-    margin-top: 3.75rem;
-    gap: 0 1.5rem;
-  }
-
   div.spacer {
     height: 1.5rem;
   }
 
   div.header {
     display: inline-block;
-    width: 744px;
+    width: 100%;
+    padding-inline: 20px;
+
+    @media (min-width: breakpoints.$tablet) {
+      padding-inline: 20%;
+    }
   }
 
   div.header h2 {
@@ -177,5 +195,10 @@ import crowd from '../graphics/about/crowd.webp';
     position: absolute;
     left: 0px;
     bottom: 88px;
+    display: none;
+
+    @media (min-width: breakpoints.$tablet) {
+      display: block;
+    }
   }
 </style>
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -24,13 +24,14 @@ if (variant === 'menu') classes.push('menu');
 
 <style lang="scss">
   @use '../styles/colors';
+  @use '../styles/breakpoints';
 
   $primary-hover: #6dbeda;
   $primary-pressed: #53a0bc;
 
   a {
     border-radius: 8px;
-    padding: 1.25rem;
+    padding: 0.75rem;
     background-color: colors.$secondary;
     color: colors.$text;
     display: flex;
@@ -47,6 +48,10 @@ if (variant === 'menu') classes.push('menu');
     &.disabled {
       cursor: default;
     }
+
+    @media (min-width: breakpoints.$phone) {
+      padding: 1.25rem;
+    }
   }
 
   a.primary {

diff --git a/src/components/Contact.astro b/src/components/Contact.astro
@@ -7,7 +7,7 @@ import shapes from '../graphics/shapes_twirl_2.svg';
   <h4 id="contact">CONTACT US</h4>
   <div class="spacer"></div>
   <div class="row">
-    <h3>Any other&nbsp;</h3><h2>questions?</h2>
+    <h3>Any other&nbsp;<b>questions?</b></h3>
   </div>
   <div class="spacer"></div>
   <p class="description">
@@ -27,15 +27,22 @@ import shapes from '../graphics/shapes_twirl_2.svg';
 </section>
 
 <style lang="scss">
+  @use '../styles/breakpoints';
+  @use '../styles/fonts';
+
   section {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
-    margin: 0 auto;
-    padding: 0 20%;
+    width: 100%;
+    padding-inline: 20px;
     padding-top: 10.75rem;
+
+    @media (min-width: breakpoints.$phone) {
+      padding-inline: 20%;
+    }
   }
 
   div.spacer {
@@ -58,8 +65,18 @@ import shapes from '../graphics/shapes_twirl_2.svg';
 
   .img {
     position: absolute;
-    right: 0; 
+    right: 0;
     top: 73px;
     z-index: -1;
+    display: none;
+
+    @media (min-width: breakpoints.$tablet) {
+      display: block;
+    }
+  }
+
+  h3 > b {
+    font-family: fonts.$serif;
+    font-weight: 600;
   }
 </style>
diff --git a/src/components/FAQ.astro b/src/components/FAQ.astro
@@ -119,10 +119,15 @@ const faqsCol2 = faqs.slice(split);
     gap: 1.5rem;
     margin-bottom: 4.5rem;
 
+    h2 {
+      text-align: center;
+      padding-inline: 20px;
+    }
+
     span {
       font-family: fonts.$sans;
       font-size: 1.75rem;
-      font-weight: 600;
+      font-weight: 500;
     }
   }
 
@@ -145,6 +150,6 @@ const faqsCol2 = faqs.slice(split);
     flex-direction: column;
     gap: 35px;
     flex: 1;
-    padding: 0 0.7rem;
+    padding-inline: max(20px, 5vw);
   }
 </style>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -79,14 +79,14 @@ import Brand from './Brand.astro';
     justify-content: center;
     width: 100%;
     flex: 1;
-    padding: 0 16%;
+    padding: 0 12%;
     text-align: center;
     gap: 20px;
     position: relative;
 
     h1 {
       margin: 0.5rem 0;
-      font-size: clamp(1.25rem, 4vw, 3.25rem);
+      font-size: clamp(1.5rem, 4vw, 3.25rem);
 
       @media (min-width: breakpoints.$laptop) {
         width: 53.875rem;
@@ -107,14 +107,22 @@ import Brand from './Brand.astro';
 
   .btn-text {
     width: max-content;
-    font-size: 1.25rem;
+
+    @media (min-width: breakpoints.$phone) {
+      font-size: 1.25rem;
+    }
   }
 
   // arrow scroll indication
   .arrows {
     position: absolute;
-    bottom: 4svh;
+    bottom: 2svh;
     animation: bounce 5s ease infinite;
+    width: 16px;
+
+    @media (min-width: breakpoints.$tablet) {
+      width: 20px;
+    }
   }
 
   @keyframes bounce {
@@ -144,6 +152,11 @@ import Brand from './Brand.astro';
     perspective: 1px;
     overflow: hidden;
     z-index: -1;
+    display: none;
+
+    @media (min-width: breakpoints.$tablet) {
+      display: block;
+    }
 
     .parallax-group {
       position: relative;
@@ -194,11 +207,8 @@ import Brand from './Brand.astro';
       $offset: 50px;
       position: absolute;
       right: -$offset;
-      top: 50%;
-      transform: translate(
-        calc(clamp(#{-$offset}, -12vw, 0px) - 10px),
-        calc(50% + 150px)
-      );
+      top: 70%;
+      transform: translate(calc(clamp(#{-$offset}, -12vw, 0px) - 10px), 50%);
     }
 
     .bear-left {

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -1,8 +1,8 @@
 // a lot of code is commented in case mobile view
 // requires an animated menu
 
-// import { useState } from 'react';
-// import { motion, AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import styles from './style.module.scss';
 import logo from '../../graphics/tentative logo.svg';
 import { useEffect, useRef } from 'react';
@@ -18,7 +18,7 @@ interface Props {
 
 export default function NavBar({ links }: Props) {
   const navbarRef = useRef<HTMLElement>(null);
-  // const [menuVisible, setMenuVisible] = useState(false);
+  const [menuVisible, setMenuVisible] = useState(false);
 
   useEffect(() => {
     const checkHeight = () => {
@@ -49,7 +49,7 @@ export default function NavBar({ links }: Props) {
       </button>
 
       {/* menu toggle */}
-      {/* <button
+      <button
         className={styles.button}
         onClick={() => setMenuVisible(!menuVisible)}
       >
@@ -64,10 +64,10 @@ export default function NavBar({ links }: Props) {
           <rect x="0" y="15" width="30" height="2" fill="black" />
           <rect x="0" y="22" width="30" height="2" fill="black" />
         </svg>
-      </button> */}
+      </button>
 
       {/* backdrop */}
-      {/* <div className={styles.backdrop}></div> */}
+      <div className={styles.backdrop}></div>
 
       {/* links */}
       <section className={styles.links}>
@@ -78,7 +78,7 @@ export default function NavBar({ links }: Props) {
         ))}
       </section>
 
-      {/* <AnimatePresence>
+      <AnimatePresence>
         {menuVisible && (
           <motion.section
             className={styles.mobileLinks}
@@ -93,7 +93,7 @@ export default function NavBar({ links }: Props) {
             ))}
           </motion.section>
         )}
-      </AnimatePresence> */}
+      </AnimatePresence>
     </nav>
   );
 }