breakpoint and example

pages/[network_type]/[network_sub_type]/index.tsx

@@ -10,7 +10,7 @@ const Home: NextPage = () => {
 
   return (
     <Page>
-      <Center h="100%">
+      <Center h="100%" fontSize={{ base: 'sm', lg: 'xl' }}>
         <VStack gap={ 4 }>
           <Box>home page for { router.query.network_type } { router.query.network_sub_type } network</Box>
         </VStack>

theme/foundations/breakpoints.ts

+const breakpoints = {
+  lg: '1000px',
+};
+
+export default breakpoints;

theme/index.ts

@@ -3,6 +3,7 @@ import { extendTheme } from '@chakra-ui/react';
 import components from './components/index';
 import config from './config';
 import borders from './foundations/borders';
+import breakpoints from './foundations/breakpoints';
 import colors from './foundations/colors';
 import typography from './foundations/typography';
 import global from './global';
@@ -16,6 +17,7 @@ const overrides = {
   styles: {
     global,
   },
+  breakpoints,
 };
 
 export default extendTheme(overrides);