Skip to content

Commit c677398

Browse files
selah-aweandreverence[bot]jontsai
selah-aweandreverence[bot]
and
jontsai
authored
fix: improve mobile nav and stacked layouts (#86)
## Summary - add a real mobile menu for the top navigation on narrow screens - move the image above the text on mobile for Labs and similar right-image content pages - export the matching `docs/` updates so GitHub Pages gets the same responsive behavior ## What changed - switched the header to a collapsible Bootstrap navbar with a hamburger toggle below desktop breakpoints - styled the mobile nav so links stack cleanly instead of overflowing horizontally - added a shared `mobileImageFirst` helper for narrow screens - applied that helper to `/labs/` and `/about/` so the image leads on mobile ## Verification Checked with Playwright against the exported static site on mobile for: - `/` - `/about/` - `/labs/` - `/blog/` - `/apprenticeship/` - `/apprenticeship/projects/` - `/policies/` - `/policies/privacy/` - `/policies/tos/` - `/tags/` Also did a desktop sanity pass on: - `/` - `/about/` - `/labs/` - `/blog/` - `/apprenticeship/` Results: - mobile nav collapses behind a hamburger menu - no mobile horizontal overflow on the checked pages - Labs/About now render image-first on small screens - desktop nav remains expanded ## Screenshots Closed menu: ![Labs mobile layout](https://raw.githubusercontent.com/aweandreverence/www.aweandreverence.com/fix/mobile-menu-layout/.github/pr-images/labs-mobile-after.png) Open menu: ![Labs mobile menu open](https://raw.githubusercontent.com/aweandreverence/www.aweandreverence.com/fix/mobile-menu-layout/.github/pr-images/labs-mobile-menu-open.png) Co-authored-by: Jonathan Tsai <jontsai@users.noreply.github.com> Co-authored-by: selah-aweandreverence[bot] <264603484+selah-aweandreverence[bot]@users.noreply.github.com> Co-authored-by: Jonathan Tsai <jontsai@users.noreply.github.com>
1 parent 0552af1 commit c677398

142 files changed

Lines changed: 170 additions & 116 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/pr-images/labs-mobile-after.png‎

1.32 MB

‎.github/pr-images/labs-mobile-menu-open.png‎

1.59 MB

‎docs/404.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/><script src="https://awesome.bible/manna.js" async=""></script><title data-next-head="">404: This page could not be found</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/7f1d2cd3686bfb00.css" as="style"/><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&amp;family=Inter:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/><link rel="stylesheet" href="/_next/static/css/7f1d2cd3686bfb00.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-a339f4a57035852b.js" defer=""></script><script src="/_next/static/chunks/framework-de98b93a850cfc71.js" defer=""></script><script src="/_next/static/chunks/main-3e410600a8770ba2.js" defer=""></script><script src="/_next/static/chunks/pages/_app-a38f8fd664105064.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5366f00fee9a89ba.js" defer=""></script><script src="/_next/static/mynwInTJ0wGJBL9gKr3ya/_buildManifest.js" defer=""></script><script src="/_next/static/mynwInTJ0wGJBL9gKr3ya/_ssgManifest.js" defer=""></script></head><body><a href="#main-content" class="skip-to-content">Skip to content</a><div id="__next"><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"mynwInTJ0wGJBL9gKr3ya","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
1+
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/><script src="https://awesome.bible/manna.js" async=""></script><title data-next-head="">404: This page could not be found</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/7f1d2cd3686bfb00.css" as="style"/><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&amp;family=Inter:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/><link rel="stylesheet" href="/_next/static/css/7f1d2cd3686bfb00.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-a339f4a57035852b.js" defer=""></script><script src="/_next/static/chunks/framework-8a814198346296d4.js" defer=""></script><script src="/_next/static/chunks/main-a00beb2ca89a391c.js" defer=""></script><script src="/_next/static/chunks/pages/_app-74cd5d91c0eee3be.js" defer=""></script><script src="/_next/static/chunks/pages/_error-1f998b6f01d5956d.js" defer=""></script><script src="/_next/static/fKmIsC5EeYeXfrUdHwBX1/_buildManifest.js" defer=""></script><script src="/_next/static/fKmIsC5EeYeXfrUdHwBX1/_ssgManifest.js" defer=""></script></head><body><a href="#main-content" class="skip-to-content">Skip to content</a><div id="__next"><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"fKmIsC5EeYeXfrUdHwBX1","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

‎docs/404/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/><script src="https://awesome.bible/manna.js" async=""></script><title data-next-head="">404: This page could not be found</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/7f1d2cd3686bfb00.css" as="style"/><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&amp;family=Inter:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/><link rel="stylesheet" href="/_next/static/css/7f1d2cd3686bfb00.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-a339f4a57035852b.js" defer=""></script><script src="/_next/static/chunks/framework-de98b93a850cfc71.js" defer=""></script><script src="/_next/static/chunks/main-3e410600a8770ba2.js" defer=""></script><script src="/_next/static/chunks/pages/_app-a38f8fd664105064.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5366f00fee9a89ba.js" defer=""></script><script src="/_next/static/mynwInTJ0wGJBL9gKr3ya/_buildManifest.js" defer=""></script><script src="/_next/static/mynwInTJ0wGJBL9gKr3ya/_ssgManifest.js" defer=""></script></head><body><a href="#main-content" class="skip-to-content">Skip to content</a><div id="__next"><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"mynwInTJ0wGJBL9gKr3ya","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
1+
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/><script src="https://awesome.bible/manna.js" async=""></script><title data-next-head="">404: This page could not be found</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/7f1d2cd3686bfb00.css" as="style"/><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&amp;family=Inter:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/><link rel="stylesheet" href="/_next/static/css/7f1d2cd3686bfb00.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" noModule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-a339f4a57035852b.js" defer=""></script><script src="/_next/static/chunks/framework-8a814198346296d4.js" defer=""></script><script src="/_next/static/chunks/main-a00beb2ca89a391c.js" defer=""></script><script src="/_next/static/chunks/pages/_app-74cd5d91c0eee3be.js" defer=""></script><script src="/_next/static/chunks/pages/_error-1f998b6f01d5956d.js" defer=""></script><script src="/_next/static/fKmIsC5EeYeXfrUdHwBX1/_buildManifest.js" defer=""></script><script src="/_next/static/fKmIsC5EeYeXfrUdHwBX1/_ssgManifest.js" defer=""></script></head><body><a href="#main-content" class="skip-to-content">Skip to content</a><div id="__next"><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"fKmIsC5EeYeXfrUdHwBX1","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

docs/_next/data/mynwInTJ0wGJBL9gKr3ya/blog.json renamed to docs/_next/data/fKmIsC5EeYeXfrUdHwBX1/blog.json

File renamed without changes.

docs/_next/data/mynwInTJ0wGJBL9gKr3ya/blog/1-kings-18-21-if-the-lord-is-god-a180b1f.json renamed to docs/_next/data/fKmIsC5EeYeXfrUdHwBX1/blog/1-kings-18-21-if-the-lord-is-god-a180b1f.json

File renamed without changes.

docs/_next/data/mynwInTJ0wGJBL9gKr3ya/blog/ai-and-god-bb5ba22.json renamed to docs/_next/data/fKmIsC5EeYeXfrUdHwBX1/blog/ai-and-god-bb5ba22.json

File renamed without changes.

docs/_next/data/mynwInTJ0wGJBL9gKr3ya/blog/isaiah-40-22-he-who-sits-above-the-circle-of-the-earth-54c71e1.json renamed to docs/_next/data/fKmIsC5EeYeXfrUdHwBX1/blog/isaiah-40-22-he-who-sits-above-the-circle-of-the-earth-54c71e1.json

File renamed without changes.

docs/_next/data/mynwInTJ0wGJBL9gKr3ya/blog/luke-12-15-21-don-t-waste-your-life-ca73620.json renamed to docs/_next/data/fKmIsC5EeYeXfrUdHwBX1/blog/luke-12-15-21-don-t-waste-your-life-ca73620.json

File renamed without changes.

docs/_next/data/mynwInTJ0wGJBL9gKr3ya/blog/matthew-18-8-9-obedience-to-god-against-sin-920b4f3.json renamed to docs/_next/data/fKmIsC5EeYeXfrUdHwBX1/blog/matthew-18-8-9-obedience-to-god-against-sin-920b4f3.json

File renamed without changes.

0 commit comments

Comments
 (0)