Feat/responsive design (#21)

src/app/GlobalStyles.tsx

@@ -25,6 +25,9 @@ export default function GlobalStyles() {
         /* https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html*/
         body {
           line-height: 1.5;
+          display: flex;
+          flex-direction: column;
+          min-height: 100vh;
         }
 
         /* Prevent media from overflowing and make them not inline elements */

src/app/homepage/HeroSection.tsx

@@ -1,57 +1,90 @@
 'use client'
 import Image from 'next/image'
-import { Color } from '@/app/theme'
+import { Color, ScreenSize, linearlyScaleSize } from '@/app/theme'
 import styled from '@emotion/styled'
 import React from 'react'
 import { Section } from './Styles'
 
-const RespFontSize = {
-  title_xl: '2.25rem',
-  title_lg: '1.75rem',
-  title_sm: '1rem',
-} as const
+export const HeroSection = () => {
+  const RespFontSize = {
+    title_xl: '2.25rem',
+    title_lg: '1.75rem',
+    title_sm: '1rem',
+  } as const
 
-const HeroContainer = styled.div`
-  display: flex;
-`
+  const HeroContainer = styled.div`
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    // TODO: Decide whether to keep gap
+    // gap: 24px;
 
-const HeroTextArea = styled.div`
-  flex-basis: 50%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: start;
-  padding: 90px 96px;
-`
+    @media (max-width: ${ScreenSize.md}) {
+      flex-direction: column;
+      gap: 0px;
+    }
+  `
 
-const HeroTitle = styled.h1`
-  font-size: clamp(2rem, 1vw + 2rem, 3.5rem);
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  margin-bottom: 24px;
-`
-const HeroSubtitle = styled.h2`
-  font-size: clamp(1.25rem, 0.3125 + 4.17vw, 2.5rem);
-  font-weight: 300;
-  margin-bottom: 32px;
-`
-const HeroMessage = styled.p`
-  font-size: clamp(1rem, 0.65vw + 0.5rem, 2rem);
-  color: ${Color.gray700};
-  text-align: justify;
-  min-width: 300px;
-  max-width: 100%;
-`
+  const HeroTextArea = styled.div`
+    flex-basis: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    padding: ${linearlyScaleSize({
+        minSizePx: 24,
+        maxSizePx: 96,
+        minScreenSizePx: parseInt(ScreenSize.md),
+        maxScreenSizePx: parseInt(ScreenSize.lg),
+      })}
+      ${linearlyScaleSize({
+        minSizePx: 48,
+        maxSizePx: 96,
+        minScreenSizePx: parseInt(ScreenSize.md),
+        maxScreenSizePx: parseInt(ScreenSize.lg),
+      })};
+  `
 
-const HeroImageContainer = styled.div`
-  flex-basis: 50%;
-  display: grid;
-  align-content: center;
-  position: relative;
-  z-index: 0;
-`
+  const HeroTitle = styled.h1`
+    // TODO: Try to make the responsive font-size more systematic. This is a temporary fix.
+    font-size: clamp(2rem, 1vw + 2rem, 3.5rem);
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    margin-bottom: 24px;
+    text-align: left;
 
-export const HeroSection = () => {
+    @media (max-width: ${ScreenSize.md}) {
+      align-self: center;
+      text-align: center;
+    }
+  `
+
+  const HeroSubtitle = styled.h2`
+    font-size: clamp(1.25rem, 0.3125 + 4.17vw, 2.5rem);
+    font-weight: 300;
+    margin-bottom: 32px;
+
+    @media (max-width: ${ScreenSize.md}) {
+      align-self: center;
+      text-align: center;
+    }
+  `
+  const HeroMessage = styled.p`
+    font-size: clamp(1rem, 0.65vw + 0.5rem, 2rem);
+    color: ${Color.gray700};
+    text-align: justify;
+    max-width: 100%;
+  `
+
+  const HeroImageContainer = styled.div`
+    flex-basis: 50%;
+    position: relative;
+    z-index: 0;
+    @media (max-width: ${ScreenSize.md}) {
+      // TODO: Set the min-height more systematically. This is a temporary fix.
+      min-height: 30vh;
+    }
+  `
   return (
     <Section id="hero-section" style={{ padding: '0' }}>
       {/* padding: 0 is to allow image to stretch to the right side of the webpage*/}
@@ -69,14 +102,14 @@ export const HeroSection = () => {
             online by designing new interactive systems that leverage and support interaction at scale.
           </HeroMessage>
         </HeroTextArea>
-        <HeroImageContainer id="hero-image-area">
+        <HeroImageContainer id="hero-image-container">
           <Image
             id="hero-image"
             src={'/images/hero-image.png'}
             alt="Kixlab group picture"
             fill={true}
             priority
-            style={{ objectFit: 'contain' }}
+            style={{ position: 'absolute', objectFit: 'cover', width: '100%', height: '100%' }}
           />
         </HeroImageContainer>
       </HeroContainer>

src/app/homepage/MediaSection.tsx

@@ -3,58 +3,62 @@ import { FontVariant } from '@/app/theme'
 import styled from '@emotion/styled'
 import { SectionHeader } from '@/components/Section'
 import React from 'react'
-import { Section, GridContainer } from './Styles'
+import { Section } from './Styles'
+import VIDEOS from '@/data/videos'
 
 const MediaArea = styled.div`
   display: flex;
   flex-direction: row;
   flex: auto;
   flex-wrap: wrap;
   justify-content: space-between;
-  gap: 72px;
+  gap: 32px;
 `
+
+const VideoCard = styled.div`
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  justify-content: normal;
+`
+const VideoContainer = styled.div`
+  max-height: 300px;
+  aspect-ratio: 16 / 9;
+`
+
 const VideoTitle = styled.h3`
   ${FontVariant.title_md}
   text-align: center;
 `
+
 const VideoDate = styled.h4`
   text-align: center;
   font-size: 16px;
 `
-const videos = [
-  {
-    url: 'https://www.youtube.com/embed/j0v1Cr74kN8?si=tp_blkpKqN4FP9te',
-    title: 'What is Interaction-centric AI?',
-    date: '2022.10.28',
-  },
-  {
-    url: 'https://www.youtube.com/embed/pkhTuiYvvw4?si=hUee7IqJ-m95L1k2',
-    title: 'KIXLAB Introduction',
-    date: '2021.02.12',
-  },
-  { url: 'https://www.youtube.com/embed/GgvkmXXPFPI?si=YWMLcLMhac5kRYzJ', title: 'Open KAIST', date: '2022.01.10' },
-]
 
 export const MediaSection = () => {
   return (
     <Section id="media-section" altBackground={true}>
       <SectionHeader title="KIXLAB on Media" subtitle="Explore KIXLAB’s media realm" />
       <MediaArea>
-        {videos.map((video, i) => (
-          <GridContainer columnTemplate="1fr" style={{ gap: '4px' }} key={i}>
-            <iframe
-              width="390"
-              height="270"
-              src={video.url}
-              title="YouTube video player"
-              frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              referrerPolicy="strict-origin-when-cross-origin"
-              allowFullScreen
-            ></iframe>
+        {VIDEOS.map(video => (
+          <VideoCard key={video.url}>
+            <VideoContainer>
+              <iframe
+                width="100%"
+                height="100%"
+                src={video.url}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerPolicy="strict-origin-when-cross-origin"
+                allowFullScreen
+              ></iframe>
+            </VideoContainer>
             <VideoTitle>{video.title}</VideoTitle>
-            <VideoDate>{video.date}</VideoDate>
-          </GridContainer>
+            <VideoDate>{video.formattedDate}</VideoDate>
+          </VideoCard>
         ))}
       </MediaArea>
     </Section>

src/app/homepage/ResearchThemesSection.tsx

@@ -1,6 +1,6 @@
 'use client'
 import Image from 'next/image'
-import { Color, FontVariant } from '@/app/theme'
+import { Color, FontVariant, ScreenSize } from '@/app/theme'
 import styled from '@emotion/styled'
 import { MEMBERS } from '@/data/members'
 import { ResearchTopics } from '@/data/publications'
@@ -11,7 +11,7 @@ import { Section, Text } from './Styles'
 const ResearchTopicsArea = styled.div`
   display: grid;
   gap: 48px;
-  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(300px, 45%), 1fr));
 `
 
 const ResearchTopicItem = styled.div`
@@ -45,7 +45,7 @@ const ResearchTopicsMemberAvatar = styled(Image)`
 
 export const ResearchThemesSection = () => {
   const [membersByResearchTopic, numVisible] = useMemo(() => {
-    // TODO: Fix the type of membersByResearchTopic
+    // TODO: Specify the type of membersByResearchTopic
     const membersByResearchTopic: Record<string, any[]> = {}
     ResearchTopics.forEach(topic => {
       membersByResearchTopic[topic] = MEMBERS.filter(

src/app/homepage/Styles.tsx

@@ -1,12 +1,18 @@
 'use client'
-import { Color, FontVariant } from '@/app/theme'
+import { Color, FontVariant, ScreenSize, linearlyScaleSize } from '@/app/theme'
 import styled from '@emotion/styled'
 
 export const Section = styled.section<{ altBackground?: boolean }>`
   background-color: ${props => (props.altBackground ? '#F6F6F6' : 'white')};
   margin: 0 auto;
   width: 100%;
-  padding: 48px 96px;
+  padding: 48px
+    ${linearlyScaleSize({
+      minSizePx: 48,
+      maxSizePx: 96,
+      minScreenSizePx: parseInt(ScreenSize.md),
+      maxScreenSizePx: parseInt(ScreenSize.lg),
+    })};
 `
 export const GridContainer = styled.div<{ columnTemplate: string }>`
   display: grid;

src/app/theme.ts

@@ -73,3 +73,28 @@ export const Radius = {
   sm: '4px',
   md: '12px',
 } as const
+
+export const ScreenSize = {
+  sm: '576px',
+  md: '784px', // Navbar looks weird below 784px
+  lg: '992px',
+  xl: '1200px',
+} as const
+
+interface LinearlyScaleSizeParams {
+  minScreenSizePx: number
+  minSizePx: number
+  maxScreenSizePx: number
+  maxSizePx: number
+}
+
+/* Refer to https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/ for the math*/
+/* TODO: Specify the return value type of this function*/
+export const linearlyScaleSize = ({
+  minScreenSizePx,
+  minSizePx,
+  maxScreenSizePx,
+  maxSizePx,
+}: LinearlyScaleSizeParams) => {
+  return `clamp(${minSizePx}px, calc(${minSizePx}px + ${minSizePx} / ${maxScreenSizePx - minScreenSizePx} * (100vw - ${minScreenSizePx}px)), ${maxSizePx}px)`
+}

src/components/Filter.tsx

@@ -20,9 +20,7 @@ const SelectName = styled.span<{ filtered: boolean }>`
 
 const SelectBody = styled.div`
   position: relative;
-  min-width: 230px;
-  width: 100%;
-  width: fit-content;
+  min-width: 25vw;
 
   ${FontVariant.body_md}
 

src/components/Footer.tsx

@@ -12,6 +12,7 @@ const FooterContainer = styled.footer`
   align-items: flex-start;
   padding: 36px 48px;
   background-color: ${Color.gray600};
+  margin-top: auto;
 `
 
 const FooterTextContainer = styled.div`