From 6909a08c349a3ae3141b5d946f43ef7b283c95b1 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Fri, 7 May 2021 23:24:08 +0300
Subject: [PATCH] update breakpoints

---
 src/pages/_app.tsx       | 7 ++++---
 src/theme/breakpoints.ts | 8 ++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 039e3d3..e6e1f5f 100644
--- a/src/pages/_app.tsx
+++ b/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;
   }
diff --git a/src/theme/breakpoints.ts b/src/theme/breakpoints.ts
index d7b5829..416b4ad 100644
--- a/src/theme/breakpoints.ts
+++ b/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 }), {});