Merge pull request #483 from SStan-prog/scott-stanfel-patch-4

improve speaker cropping on mobile/tablet
jsconfjp · Nov 7, 2024 · 3c72ebd · 3c72ebd
2 parents 8eaa419 + f02dd3f
commit 3c72ebd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/2024/src/styled.d.ts b/2024/src/styled.d.ts
@@ -41,6 +41,7 @@ declare module "styled-components" {
       subTitle: string
     }
     breakpoints: {
+      mobileSm: string
       mobile: string
       largerThanMobile: string
     }

diff --git a/2024/src/templates/speaker.tsx b/2024/src/templates/speaker.tsx
@@ -32,12 +32,17 @@ type Props = {
 }
 
 const SpeakerBox = styled.div`
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: 25% 1fr;
   margin: 2em 0;
   padding: 0 2.5rem;
 
   ${({ theme }) => theme.breakpoints.mobile} {
+    grid-template-columns: 45% 1fr;
+  }
+
+  ${({ theme }) => theme.breakpoints.mobileSm} {
+    display: flex;
     flex-direction: column;
   }
 `
@@ -48,13 +53,14 @@ const SpeakerSide = styled.div`
   font-size: 1.8rem;
   margin: 0 3em;
 
-  ${({ theme }) => theme.breakpoints.mobile} {
+  ${({ theme }) => theme.breakpoints.mobileSm} {
     margin: 2em 0;
   }
 `
 const Avatar = styled(Image)`
   width: 100%;
-  max-width: 273px;
+
+  aspect-ratio: 1 / 1;
 
   ${({ theme }) => theme.breakpoints.mobile} {
     max-width: 100%;

diff --git a/2024/src/theme.ts b/2024/src/theme.ts
@@ -61,6 +61,7 @@ export const theme: DefaultTheme = {
     subTitle: "2.6rem",
   },
   breakpoints: {
+    mobileSm: "@media (max-width: 600px)",
     mobile: "@media (max-width: 860px)",
     largerThanMobile: "@media (min-width: 861px)",
   },