fix resumeLink stretching on small screens, techStackDescription size…

… & breakpoint, fix blog post layout on small screens, close mobileMenu when a nav link is selected, increase timeout further
SSTPIERRE2 · Mar 18, 2024 · 892566b · 892566b
1 parent bbad781
commit 892566b
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 30 deletions.
diff --git a/packages/web/app/about/page.module.css b/packages/web/app/about/page.module.css
@@ -96,7 +96,7 @@
 }
 
 .techStackDescription {
-  flex: 0 0 65ch;
+  flex: 0 0 66%;
   max-width: 65ch;
 }
 
@@ -119,10 +119,9 @@
   }
 }
 
-@media (max-width: 950px) {
+@media (max-width: 50rem) {
   .main > * {
     grid-column: 1 / -1;
-    padding: 0;
   }
 
   .aside {
@@ -140,5 +139,6 @@
 
   .resumeLink {
     flex: 0;
+    align-self: flex-start;
   }
 }
diff --git a/packages/web/app/blog/[postSlug]/page.module.css b/packages/web/app/blog/[postSlug]/page.module.css
@@ -2,8 +2,7 @@
   width: 100%;
   grid-column: 1 / -1;
   background: var(--color-background-accent);
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  padding: 2rem;
 }
 
 .heroWrapper {
@@ -27,25 +26,18 @@
 
 .main {
   position: relative;
-  display: grid;
-  grid-template-columns: minmax(auto, 65ch) 260px;
-  grid-template-rows: 1fr;
-  grid-template-areas: 'article sidebar';
-  column-gap: 5rem;
-  isolation: isolate;
-  width: 100%;
+  max-width: 65ch;
+  margin: 0 auto;
   padding-top: 3rem;
   padding-bottom: 3rem;
 }
 
 .article {
-  grid-area: article;
   font-size: calc(18 / 16 * 1rem);
 }
 
 .aside {
   display: none;
-  grid-area: sidebar;
   font-size: calc(14 / 16 * 1rem);
 }
 
@@ -87,11 +79,26 @@
   align-items: flex-end;
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 60rem) {
+  .main {
+    display: grid;
+    grid-template-columns: minmax(auto, 65ch) 260px;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'article sidebar';
+    column-gap: 4rem;
+    max-width: revert;
+    margin: revert;
+  }
+
+  .article {
+    grid-area: article;
+  }
+
   .aside {
     display: block;
     position: sticky;
     top: 3rem;
     align-self: start;
+    grid-area: sidebar;
   }
 }
diff --git a/packages/web/app/blog/[postSlug]/page.tsx b/packages/web/app/blog/[postSlug]/page.tsx
@@ -93,7 +93,6 @@ export async function generateMetadata({
 const PostPage: NextPage<{ params: { postSlug: string } }> = async ({
   params: { postSlug },
 }) => {
-  const test = await getPostMetadata(postSlug);
   const {
     id,
     title,
@@ -105,7 +104,7 @@ const PostPage: NextPage<{ params: { postSlug: string } }> = async ({
     updated,
     tags,
     links,
-  } = test;
+  } = await getPostMetadata(postSlug);
 
   return (
     <>

diff --git a/packages/web/components/CodeSnippet/CodeSnippet.module.css b/packages/web/components/CodeSnippet/CodeSnippet.module.css
@@ -10,7 +10,7 @@
   font-size: 1.125rem;
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 60rem) {
   .wrapper {
     border-radius: 4px !important;
     margin: 0px calc(32px * -1) !important;

diff --git a/packages/web/components/MobileMenu/MobileMenu.module.css b/packages/web/components/MobileMenu/MobileMenu.module.css
@@ -27,9 +27,6 @@
   justify-content: space-between;
 }
 
-.mainMobileNav {
-}
-
 .mobileNavItem {
   display: block;
   position: relative;

diff --git a/packages/web/components/MobileMenu/MobileMenu.tsx b/packages/web/components/MobileMenu/MobileMenu.tsx
@@ -52,22 +52,24 @@ const MobileMenu = () => {
             aria-hidden
           />
           <nav className={styles.mobileNavContainer}>
-            <div className={styles.mainMobileNav}>
+            <div>
               {LINKS.map(({ slug, label, href }, index) => (
                 <div
                   key={slug}
                   className={styles.mobileNavItem}
                   style={{
-                    transform: isMobileMenuOpen
-                      ? 'translateX(0%)'
-                      : 'translateX(-100%)',
+                    transform:
+                      isMobileMenuOpen ? 'translateX(0%)' : 'translateX(-100%)',
                     transition: 'transform 500ms',
-                    transitionDelay: isMobileMenuOpen
-                      ? `${index * 100}ms`
-                      : '0ms',
+                    transitionDelay:
+                      isMobileMenuOpen ? `${index * 100}ms` : '0ms',
                   }}
                 >
-                  <Link key={slug} href={href}>
+                  <Link
+                    key={slug}
+                    href={href}
+                    onClick={() => toggleMobileMenu()}
+                  >
                     {label}
                   </Link>
                 </div>

diff --git a/stacks/Web.ts b/stacks/Web.ts
@@ -8,7 +8,7 @@ export function Web({ stack }: StackContext) {
     customDomain: stack.stage === 'prod' ? 'stephenstpierre.com' : undefined,
     path: 'packages/web',
     warm: 20,
-    timeout: '20 seconds',
+    timeout: '30 seconds',
     openNextVersion: '2.3.7',
     environment: {
       NEXT_SHARP_PATH: '/tmp/node_modules/sharp',