update breakpoints

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import Head from "next/head";
 import styled, { createGlobalStyle } from "styled-components";
 import { ToastContainer } from "react-toastify";
 import { colors } from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 import LocaleStore from "../i18n";
 
 import "react-mde/lib/styles/css/react-mde-all.css";
@@ -25,17 +26,17 @@ html {
   font-size: ${fontSize * 0.75}pt;
   line-height: ${lineHeight};
 
-  @media screen and (min-width: 1200px) {
+  @media screen and (min-width: ${breakpoints.medium}) {
     /* 16px */
     font-size: ${fontSize}pt;
   }
 
-  @media screen and (min-width: 1920px) {
+  @media screen and (min-width: ${breakpoints.large}) {
     /* 20px */
     font-size: ${fontSize * 1.25}pt;
   }
 
-  @media screen and (min-width: 2560px) {
+  @media screen and (min-width: ${breakpoints.xlarge}) {
     /* 24px */
     font-size: ${fontSize * 1.5}pt;
   }

src/theme/breakpoints.ts

@@ -1,10 +1,10 @@
 type Keys = "mobile" | "medium" | "large" | "xlarge";
 
 const breakpointsNumber: Record<Keys, number> = {
-  mobile: 800,
-  medium: 1200,
-  large: 1920,
-  xlarge: 2560,
+  mobile: 801,
+  medium: 1201,
+  large: 1921,
+  xlarge: 2561,
 };
 
 const breakpoints = Object.entries(breakpointsNumber).map(([k, v]) => [k, `${v}px`]).reduce((a, [k, v]) => ({ ...a, [k]: v }), {});