Adjust navigation breakpoints

README.md

@@ -1,29 +1,22 @@
-## 🧞 Commands
+## Contributing
 
-All commands are run from the root of the project, from a terminal:
+The instructions for contributing to the website depend on whether or not you have write access to the main repository.
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+### If you have write access ...
 
-```bash
-npx sst deploy --stage production
-```
+Create a new branch from `main`:
 
-## Keeping branches in sync
+* `git checkout main`
+* `git pull` (to ensure your copy is up to date)
+* `git checkout -b <new branch name>`
 
-Whenever you finish a feature and merge it into main, your staging branch will technically be "behind." To sync it back up so staging always matches production before you start the next task:
+### If you do not have write access ...
 
-```bash
-git checkout staging
-git pull origin main
-git push origin staging
-```
+Fork the repository to your own namespace
+
+### In both cases ...
+
+When you have made your changes and tested them with `npm run dev`, push them back to GitHub and raise a pull request against the `main` branch. This will trigger the deployment of a test version under a cloudfront.net URL.
 
 ## Updating Member logos
 
@@ -101,8 +94,3 @@ For answers that need bullet lists, links, email addresses, or multiple paragrap
 
 New blogs should be added as `.mdx` files to `src/content/blogs` folder.
 The current schema requires a `title`, `date`, `image` and `author`, along with the content.
-
-## Deployment
-
-Merges into the `staging` branch will automatically be deployed to Cloudfront with a default url.
-Merges into the `main` branch will automatically be deployed into the `production` stage and the "corecollective.dev" url.

src/components/nav/Footer.astro

@@ -30,7 +30,7 @@ const currentYear = new Date().getFullYear();
 <footer class="bg-cc-dark w-full px-4 py-12 text-white">
   <div class="mx-auto max-w-7xl">
     <div
-      class="flex flex-col items-center justify-between space-y-8 border-b border-white/10 pb-10 md:flex-row md:space-y-0"
+      class="flex flex-col items-center justify-between space-y-8 border-b border-white/10 pb-10 lg:flex-row lg:space-y-0"
     >
       <div class="flex flex-1 flex-col items-center justify-start">
         <a href="/">

src/components/nav/Navbar.tsx

@@ -10,7 +10,7 @@ const navLinks: NavLink[] = [
   {
     name: 'About',
     children: [
-      { name: 'About', href: '/about/' },
+      { name: 'CoreCollective', href: '/about/' },
       { name: 'FAQ', href: '/faq/' },
     ],
   },
@@ -24,34 +24,37 @@ export default function Navbar() {
   const [currentPath, setCurrentPath] = useState('');
   const [dropdownOpen, setDropdownOpen] = useState<string | null>(null);
   const dropdownRef = useRef<HTMLLIElement>(null);
+  const mobileMenuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setCurrentPath(globalThis.location.pathname);
   }, []);
 
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
+      const target = e.target as Node;
       if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as Node)
+        dropdownRef.current?.contains(target) ||
+        mobileMenuRef.current?.contains(target)
       ) {
-        setDropdownOpen(null);
+        return;
       }
+      setDropdownOpen(null);
     }
     document.addEventListener('click', handleClickOutside);
     return () => document.removeEventListener('click', handleClickOutside);
   }, []);
 
   return (
     <>
-      <header className="bg-cc-blue fixed top-0 z-50 h-30 w-full text-white">
-        <nav className="mx-auto flex h-full items-center justify-between px-4 md:max-w-2/3">
-          <div className="flex h-full shrink-0 items-center">
+      <header className="bg-cc-blue fixed inset-x-0 top-0 z-50 h-30 text-white">
+        <nav className="mx-auto flex h-full items-center justify-between gap-4 px-4 lg:gap-8 lg:px-8">
+          <div className="flex h-full min-w-0 max-w-75 items-center">
             <a href="/">
-              <img src={LogoImg.src} alt="Logo" className="h-auto w-75" />
+              <img src={LogoImg.src} alt="Logo" className="h-auto w-full" />
             </a>
           </div>
-          <ul className="hidden items-center md:flex">
+          <ul className="hidden items-center lg:flex">
             {navLinks.map((link) => {
               if ('children' in link) {
                 const isActive = link.children.some(
@@ -133,7 +136,7 @@ export default function Navbar() {
           </ul>
           <button
             onClick={() => setIsOpen(!isOpen)}
-            className="p-2 text-white focus:outline-none md:hidden"
+            className="shrink-0 p-2 text-white focus:outline-none lg:hidden"
             aria-expanded={isOpen}
           >
             <svg
@@ -160,87 +163,88 @@ export default function Navbar() {
             </svg>
           </button>
         </nav>
-        <div
-          className={`${isOpen ? 'block' : 'hidden'} bg-cc-blue absolute left-0 w-full border-t border-white/10 shadow-lg md:hidden`}
-        >
-          <ul className="flex flex-col p-4">
-            {navLinks.map((link) => {
-              if ('children' in link) {
-                const isMobileDropdownOpen = dropdownOpen === link.name;
-                return (
-                  <li
-                    key={link.name}
-                    className="border-b border-white/10 last:border-b-0"
-                  >
-                    <button
-                      onClick={() =>
-                        setDropdownOpen(
-                          isMobileDropdownOpen ? null : link.name,
-                        )
-                      }
-                      className="hover:text-cc-cyan flex w-full items-center justify-between py-4 text-white"
-                    >
-                      {link.name}
-                      <svg
-                        className={`h-3 w-3 transition-transform ${isMobileDropdownOpen ? 'rotate-180' : ''}`}
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M19 9l-7 7-7-7"
-                        />
-                      </svg>
-                    </button>
-                    {isMobileDropdownOpen && (
-                      <ul className="pb-2 pl-4">
-                        {link.children.map((child) => (
-                          <li key={child.name}>
-                            <a
-                              href={child.href}
-                              className={`hover:text-cc-cyan block py-2 ${
-                                currentPath === child.href
-                                  ? 'text-cc-cyan'
-                                  : 'text-white'
-                              }`}
-                              onClick={() => {
-                                setIsOpen(false);
-                                setDropdownOpen(null);
-                              }}
-                            >
-                              {child.name}
-                            </a>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                  </li>
-                );
-              }
-
+      </header>
+      <div
+        ref={mobileMenuRef}
+        className={`${isOpen ? 'block' : 'hidden'} bg-cc-blue fixed inset-x-0 top-30 z-50 border-t border-white/10 shadow-lg lg:hidden`}
+      >
+        <ul className="flex flex-col p-4">
+          {navLinks.map((link) => {
+            if ('children' in link) {
+              const isMobileDropdownOpen = dropdownOpen === link.name;
               return (
                 <li
                   key={link.name}
                   className="border-b border-white/10 last:border-b-0"
                 >
-                  <a
-                    href={link.href}
-                    className={`hover:text-cc-cyan block py-4 ${
-                      currentPath === link.href ? 'text-cc-cyan' : 'text-white'
-                    }`}
-                    onClick={() => setIsOpen(false)}
+                  <button
+                    onClick={() =>
+                      setDropdownOpen(
+                        isMobileDropdownOpen ? null : link.name,
+                      )
+                    }
+                    className="hover:text-cc-cyan flex w-full items-center justify-between py-4 text-white"
                   >
                     {link.name}
-                  </a>
+                    <svg
+                      className={`h-3 w-3 transition-transform ${isMobileDropdownOpen ? 'rotate-180' : ''}`}
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
+                  {isMobileDropdownOpen && (
+                    <ul className="pb-2 pl-4">
+                      {link.children.map((child) => (
+                        <li key={child.name}>
+                          <a
+                            href={child.href}
+                            className={`hover:text-cc-cyan block py-2 ${
+                              currentPath === child.href
+                                ? 'text-cc-cyan'
+                                : 'text-white'
+                            }`}
+                            onClick={() => {
+                              setIsOpen(false);
+                              setDropdownOpen(null);
+                            }}
+                          >
+                            {child.name}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
                 </li>
               );
-            })}
-          </ul>
-        </div>
-      </header>
+            }
+
+            return (
+              <li
+                key={link.name}
+                className="border-b border-white/10 last:border-b-0"
+              >
+                <a
+                  href={link.href}
+                  className={`hover:text-cc-cyan block py-4 ${
+                    currentPath === link.href ? 'text-cc-cyan' : 'text-white'
+                  }`}
+                  onClick={() => setIsOpen(false)}
+                >
+                  {link.name}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
       <div className="h-30"></div>
     </>
   );

src/layouts/BaseLayout.astro

@@ -14,7 +14,7 @@ const { title } = Astro.props;
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/CC_logo_fav_32_px.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{'Core Collective - ' + title}</title>
@@ -34,6 +34,7 @@ const { title } = Astro.props;
     body {
       margin: 0;
       width: 100%;
+      overflow-x: hidden;
     }
   </style>
 </html>

src/pages/about/index.astro

@@ -11,7 +11,7 @@ import Leadership from '../../components/Leadership.astro';
 
 <BaseLayout title="About">
   <div
-    class="flex w-full flex-col items-center gap-16 py-14 md:px-32"
+    class="flex w-full flex-col items-center gap-16 py-14 lg:px-32"
     style={{
       backgroundImage: `url(${backgroundImage.src})`,
       backgroundSize: 'cover',
@@ -20,18 +20,18 @@ import Leadership from '../../components/Leadership.astro';
   >
     <PageTitle path={aboutTitle} />
     <div
-      class="flex flex-col gap-8 text-left text-lg font-light text-white md:mx-24 md:text-2xl"
+      class="flex flex-col gap-8 text-left text-lg font-light text-white lg:mx-24 lg:text-2xl"
     >
       <div
-        class="flex flex-col-reverse items-center gap-8 md:flex-row md:gap-0"
+        class="flex flex-col-reverse items-center gap-8 lg:flex-row lg:gap-0"
       >
         <Image
           src={developersImage}
           alt="developers talking image"
-          class="h-auto w-full shrink-0 rounded-lg object-cover md:w-2/5"
+          class="h-auto w-full shrink-0 rounded-lg object-cover lg:w-2/5"
         />
         <div
-          class="mx-4 flex flex-1 flex-col gap-8 py-6 md:mx-0 md:px-4 md:py-0"
+          class="mx-4 flex flex-1 flex-col gap-8 py-6 lg:mx-0 lg:px-4 lg:py-0"
         >
           <p class="">
             The Arm ecosystem has grown far beyond mobile, now spanning AI,

src/pages/index.astro

@@ -18,10 +18,10 @@ import logo from '../assets/CC_logo_no_tag.svg';
       <h1 class="text-2xl md:text-4xl">
         Where the Arm software ecosystem connects
       </h1>
-      <h3 class="text-cc-cyan text-base md:text-xl">
-        CoreCollective is an open collaborative forum for the Arm Ecosystem,<br
-        /> designed to accelerate innovation through shared software tools and standards
-        <br />that power every Arm system from cloud to edge.
+      <h3 class="text-cc-cyan max-w-3xl text-base md:text-xl">
+        CoreCollective is an open collaborative forum for the Arm Ecosystem,
+        designed to accelerate innovation through shared software tools and
+        standards that power every Arm system from cloud to edge.
       </h3>
     </div>
   </div>

src/pages/working-groups/index.astro

@@ -68,9 +68,8 @@ const data = [
   >
     <div class="mx-auto flex w-full flex-col justify-center gap-12 text-center">
       <PageTitle path={workingGroupsTitle} />
-      <h3 class="text-cc-cyan text-xl md:text-xl">
-        CoreCollective comprises multiple Working Groups, each focused on a<br
-        />
+      <h3 class="text-cc-cyan mx-auto max-w-3xl text-xl">
+        CoreCollective comprises multiple Working Groups, each focused on a
         specific technology. Any company is free to join and participate in CoreCollective.
       </h3>
     </div>