From 06779ddd043705aaf4ad37429d39f0d99861e4ce Mon Sep 17 00:00:00 2001
From: shiro <shiro@usagi.io>
Date: Wed, 3 Apr 2024 10:00:29 +0900
Subject: [PATCH] Add breakpoints, fix CSS

---
 postcss.config.js         |  1 -
 src/style/fluidSizeTS.tsx | 10 +++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/postcss.config.js b/postcss.config.js
index 964b5e8..3cdbaba 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -14,4 +14,3 @@ export default {
     ...(process.env.NODE_ENV === "production" ? [cssnano] : []),
   ],
 };
-
diff --git a/src/style/fluidSizeTS.tsx b/src/style/fluidSizeTS.tsx
index 48c7b5e..c81192f 100644
--- a/src/style/fluidSizeTS.tsx
+++ b/src/style/fluidSizeTS.tsx
@@ -4,7 +4,8 @@ const cssUnitMult = (value: string, multiplier: number) =>
   `${parseFloat(value) * multiplier}${getUnit(value)}`;
 
 const scalingMap = [
-  [0, 0.3],
+  [200, 0.3],
+  [380, 0.65],
   [500, 0.8],
   [720, 0.9],
   [1280, 1],
@@ -38,6 +39,9 @@ export const _calculateFluidProperty = (
     ? maxFonSize.replace(/(px|rem)/g, "")
     : parseFloat(maxFonSize);
 
+  // the pxToRem plugin converts "0px" to "0", which breaks things
+  if (minVW == "0px") minVW = "0rem";
+
   return `calc(${minFontSize} + (${_maxFontSize} - ${_minFontSize}) * ((100vw - ${minVW}) / ${
     parseFloat(maxVW) - parseFloat(minVW)
   }))`;
@@ -45,9 +49,9 @@ export const _calculateFluidProperty = (
 
 export const remBase = 16;
 export const pxToEmDepr = (value: string | number) =>
-  parseFloat(`${value}`) / remBase + "em";
+  parseFloat(value.toString()) / remBase + "em";
 export const pxToRemDepr = (value: string | number) =>
-  parseFloat(`${value}`) / remBase + "rem";
+  parseFloat(value.toString()) / remBase + "rem";
 const pxToRemRuntime = (value: string | number) => `(${value}/${remBase}*1rem)`;
 
 export const pxToEm = pxToEmDepr;