diff --git a/src/App.tsx b/src/App.tsx index aed7f00..1463740 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,7 +25,6 @@ import { SelectCoffeeStyle, CoffeeCapFillingBorderStyle, CoffeeCapFillingMaskStyle, - CoffeeEspressoStyle, CoffeeMikeStyle, CoffeeMileFoamStyle, CoffeeButterStyle, @@ -33,7 +32,8 @@ import { 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 ( diff --git a/src/asset/locales/ja.json b/src/asset/locales/ja.json index c0663f3..60ad3f7 100644 --- a/src/asset/locales/ja.json +++ b/src/asset/locales/ja.json @@ -6,11 +6,11 @@ "milkFoam": "ミルクフォーム", "milkSperm": "ミルクスパム", "water": "水", - "syrup": "キャラメルシロップ", + "syrup": "キャラメル", "brownSugar": "黒糖", "vanillaSyrup": "バニラシロップ", - "hazelnutSyrup": "ヘーゼルナッツシロップ", - "almondSyrup": "アーモンドシロップ", + "hazelnutSyrup": "ヘーゼル", + "almondSyrup": "アーモンド", "butter": "バター" }, "Coffee": { diff --git a/src/styled/components/LanguageMenu.ts b/src/styled/components/LanguageMenu.ts index 3405b25..df15fd3 100644 --- a/src/styled/components/LanguageMenu.ts +++ b/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]}; diff --git a/src/styled/page/index.ts b/src/styled/page/index.ts index feaaf1b..276f095 100644 --- a/src/styled/page/index.ts +++ b/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` )}; 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) ` @@ -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; + } ` diff --git a/src/styled/utils/color.ts b/src/styled/utils/Colors.ts similarity index 89% rename from src/styled/utils/color.ts rename to src/styled/utils/Colors.ts index ffd6dbc..ef0926d 100644 --- a/src/styled/utils/color.ts +++ b/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', diff --git a/src/styled/utils/Mixins.ts b/src/styled/utils/Mixins.ts new file mode 100644 index 0000000..86b578c --- /dev/null +++ b/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 } diff --git a/vite.config.ts b/vite.config.ts index a70a7af..c5c60c2 100644 --- a/vite.config.ts +++ b/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', })