Merge commit 'd800a02f4d3caa8e80a65e0dc0ef3b26edabb02e'

src/App.tsx

@@ -25,15 +25,15 @@ import {
   SelectCoffeeStyle,
   CoffeeCapFillingBorderStyle,
   CoffeeCapFillingMaskStyle,
-  CoffeeEspressoStyle,
   CoffeeMikeStyle,
   CoffeeMileFoamStyle,
   CoffeeButterStyle,
   CoffeeSyrupStyle,
   CoffeeMilkSpermStyle,
   CoffeeWaterStyle,
   CoffeeChocolateStyle,
-} from './styled/page'
+  CoffeeEspressoStyle,
+} from './styled/page/index'
 
 const App = () => {
   const { t } = useTranslation()
@@ -72,7 +72,7 @@ const App = () => {
     i18n.changeLanguage(getLocalLang)
     setLang(getLocalLang)
     setSelectCoffee(getLocal?.coffee || CoffeeList[0])
-  }, [lang])
+  }, [])
 
   return (
     <I18nextProvider i18n={i18n}>

src/asset/locales/ja.json

@@ -6,11 +6,11 @@
     "milkFoam": "ミルクフォーム",
     "milkSperm": "ミルクスパム",
     "water": "水",
-    "syrup": "キャラメルシロップ",
+    "syrup": "キャラメル",
     "brownSugar": "黒糖",
     "vanillaSyrup": "バニラシロップ",
-    "hazelnutSyrup": "ヘーゼルナッツシロップ",
-    "almondSyrup": "アーモンドシロップ",
+    "hazelnutSyrup": "ヘーゼル",
+    "almondSyrup": "アーモンド",
     "butter": "バター"
   },
   "Coffee": {

src/styled/components/LanguageMenu.ts

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react'
 
-import Colors from '../utils/color'
+import Colors from '../utils/Colors'
 
 export const LanguageButton = styled.button`
   color: ${Colors.Primary[900]};

src/styled/page/index.ts

@@ -1,11 +1,14 @@
 import { styled } from '@linaria/react'
 
-import Colors from '../utils/color'
+import Colors from '../utils/Colors'
+import { rwd } from '../utils/Mixins'
 
+const WrapperHeight = 35
 export const WrapperStyle = styled.div`
   padding: 0.8rem 1.5rem;
   display: flex;
   justify-content: space-between;
+  height: ${`${WrapperHeight}px`};
 `
 
 export const LogoStyle = styled.span`
@@ -20,11 +23,20 @@ export const InnerContentStyle = styled.div`
   justify-content: center;
   align-items: center;
   padding-bottom: 3rem;
+  ${rwd('md')}{
+    padding-bottom: 0; 
+  max-height: calc(100vh - ${`${WrapperHeight * 2}px`});
+  }
+
   &::before {
     content: url(../../../public/Vector.svg);
     position: absolute;
     bottom: 0;
     left: 0;
+    
+    ${rwd('md')}{
+      content: '';
+    } 
   }
 `
 
@@ -36,13 +48,33 @@ export const InnerStyle = styled.div`
   gap: 1rem;
   width: 80%;
   max-width: 1000px;
+
+  ${rwd('md')}{
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto;
+    width: 100%;
+    height: 100%;
+  }
 `
 
 export const MenuStyle = styled.div`
+  ${rwd('md')}{
+    width: 100%;
+    height: 100%;
+    overflow: auto; 
+    background-color: ${Colors.Primary[200]};
+    border-top:1rem solid ${Colors.Primary[200]};
+    border-bottom: 1rem solid ${Colors.Primary[200]};
+  }
+
   h4{
     font-size: 2rem;
     color: ${Colors.Primary[900]};
     margin-bottom: 1.8rem;
+
+    ${rwd('md')}{
+      display: none;
+    }
   }
 `
 
@@ -52,6 +84,13 @@ export const MenuListStyle = styled.div`
   line-height: 1.5rem;
   gap: 2rem;
 
+  ${rwd('md')}{
+    background-color: ${Colors.White[300]};
+    grid-template-columns: 10rem repeat(2, 1fr);
+    margin: 0 1rem;
+    padding: 1rem;
+  }
+
   div:not(:first-child){
     text-align: center;
   }
@@ -70,19 +109,24 @@ export const MenuTextStyle = styled.p<MenuTextType>`
   )};
   cursor: pointer;
 
+
   &::before{
-    content:"";
+    content: "";
     position: absolute;
     width: ${(props) => (props.selected ? '100%' : '0')};
     height: 10px;
     background-color:${Colors.Primary.transparency};
     border-radius: 2px;
     bottom: 4px;
-    transition: 0.2s;
+    transition: 0.2s;   
   }
 `
 
-export const CoffeeCapStyle = styled.div``
+export const CoffeeCapStyle = styled.div`
+  ${rwd('md')}{
+    transform: scale(0.8);
+  }
+`
 
 export const CoffeeCapBorder = styled.div`
   border-bottom: 2px solid ${Colors.Black.transparency};
@@ -132,6 +176,7 @@ export const CoffeeCapFillingBorderStyle = styled.div`
   margin-top: -1px;
   margin-left: -15px;
   clip-path: polygon(0 0%, 100% 0, 88% 100%, 14% 100%);
+ 
 `
 export const CoffeeCapFillingMaskStyle = styled(CoffeeCapFillingBorderStyle)`
   position: absolute;
@@ -147,7 +192,10 @@ export const CoffeeIngredientsStyle = styled.div`
   text-align: center;
   font-size: 1.2rem;
   line-height: 2.2rem;
-  transition: flex-grow 0.8s ease;
+  transition: flex-grow 0.8s ease; 
+  ${rwd('md')}{
+    font-size: 1.5rem;
+  }
 `
 
 export const CoffeeEspressoStyle = styled(CoffeeIngredientsStyle) <CoffeeCapMaskType>`
@@ -207,4 +255,7 @@ export const SelectCoffeeStyle = styled(CoffeeCapMargin)`
   font-size: 1.2rem;
   text-align: center;
   padding-top: 1rem;
+  ${rwd('md')}{
+    font-size: 1.5rem;
+  }
 `

src/styled/utils/color.ts → src/styled/utils/Colors.ts

@@ -8,12 +8,15 @@ const Colors = {
   },
   Primary: {
     900: '#5A7785',
+    300: '#c9d7df',
+    200: '#dcdcdc',
     transparency: '#5f97b254',
   },
   White: {
     900: '#fff',
     700: '#F2E5DA',
     500: '#F0F0F0',
+    300: '#fdf8f4',
   },
   Coffee: {
     Espresso: '#7d604e',

src/styled/utils/Mixins.ts

@@ -0,0 +1,15 @@
+const breakpoints: { [key: string]: string } = {
+  xs: '480px',
+  md: '768px',
+}
+
+const rwd = (breakpoint: string) => {
+  const point = breakpoints[breakpoint]
+  if (!point) {
+    console.warn(`Invalid breakpoint: ${breakpoint}.`)
+    return ''
+  }
+  return `@media (max-width: ${point})`
+}
+
+export { breakpoints, rwd }

vite.config.ts

@@ -6,7 +6,12 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   plugins: [
     react(),
-    VitePluginLinaria(),
+    VitePluginLinaria({
+      include: ['**/*.{ts,tsx}'],
+      babelOptions: {
+        presets: ['@babel/preset-typescript', '@babel/preset-react'],
+      },
+    }),
   ],
   base: 'https://MeganxLi.github.io/coffee-guide',
 })