From e2e1b81df62ee8538f3b7e654cb8d104ad08081a Mon Sep 17 00:00:00 2001
From: Andy Vivash <av@andrewvivash.com>
Date: Wed, 27 Mar 2024 14:22:31 -0700
Subject: [PATCH] Chore: update mobile font size

---
 src/css/stylesheet.css |   4 +-
 tailwind.config.js     | 128 +++++++++++++++++++++++------------------
 2 files changed, 75 insertions(+), 57 deletions(-)

diff --git a/src/css/stylesheet.css b/src/css/stylesheet.css
index 0871afb..b043f73 100644
--- a/src/css/stylesheet.css
+++ b/src/css/stylesheet.css
@@ -240,7 +240,7 @@ pre[class*="language-"] {
   color: #ccc;
   background: 0 0;
   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  @apply text-xs sm:text-body-xs !important;
+  @apply text-body-2xs sm:text-body-xs !important;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -334,7 +334,7 @@ pre[class*="language-"] {
 
 .kg-code-card,
 .language-sh {
-  @apply text-xs sm:text-body-xs !important;
+  @apply text-body-2xs sm:text-body-xs !important;
 }
 
 /**
diff --git a/tailwind.config.js b/tailwind.config.js
index 2a8557f..b4e229c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,70 +10,88 @@ module.exports = {
 
     extend: {
       animation: {
-        rotateAnimation: 'rotateAnimation 30s linear infinite',
-      },      
+        rotateAnimation: "rotateAnimation 30s linear infinite",
+      },
       backgroundImage: {
         "purple-fade":
           "linear-gradient(360deg, rgba(100, 70, 250, 0) 10.03%, rgba(100, 70, 250, 0.04) 32.78%, rgba(100, 70, 250, 0.08) 51.82%, rgba(100, 70, 250, 0.12) 70.86%, rgba(100, 70, 250, 0.16) 84.79%, rgba(100, 70, 250, 0.2) 99.18%);",
       },
       colors: {
         newneutral: {
-          "0": "#fcfcfd",
-          "100": "#eeeef5",
-          "200": "#c8c8d4",
-          "300": "#a3a3b3",
-          "400": "#808094",
-          "500": "#5e5f76",
-          "600": "#3e3f59",
-          "700": "#1f223d",
-          "800": "#17172b"
+          0: "#fcfcfd",
+          100: "#eeeef5",
+          200: "#c8c8d4",
+          300: "#a3a3b3",
+          400: "#808094",
+          500: "#5e5f76",
+          600: "#3e3f59",
+          700: "#1f223d",
+          800: "#17172b",
         },
         pink: {
-          "100": "#ffdbe2",
-          "200": "#ffadb8",
-          "300": "#ff8697",
-          "400": "#fd5375",
-          "500": "#fa2e55",
-          "600": "#ec1345"
+          100: "#ffdbe2",
+          200: "#ffadb8",
+          300: "#ff8697",
+          400: "#fd5375",
+          500: "#fa2e55",
+          600: "#ec1345",
         },
         purple: {
-          "100": "#e0deff",
-          "200": "#c0baff",
-          "300": "#a195ff",
-          "400": "#836fff",
-          "500": "#6446fa",
-          "600": "#523ee5"
+          100: "#e0deff",
+          200: "#c0baff",
+          300: "#a195ff",
+          400: "#836fff",
+          500: "#6446fa",
+          600: "#523ee5",
         },
         yellow: {
-          "100": "#fff0ad",
-          "200": "#f9dd90",
-          "300": "#f2ca74",
-          "400": "#eab757"
+          100: "#fff0ad",
+          200: "#f9dd90",
+          300: "#f2ca74",
+          400: "#eab757",
         },
         red: {
-          "100": "#ffbdc8",
-          "200": "#ff9c9f",
-          "300": "#fd7977",
-          "400": "#f65555"
+          100: "#ffbdc8",
+          200: "#ff9c9f",
+          300: "#fd7977",
+          400: "#f65555",
         },
         green: {
-          "100": "#a1e2c1",
-          "200": "#82d1a6",
-          "300": "#61c18c",
-          "400": "#3bb073"
-        }, 
+          100: "#a1e2c1",
+          200: "#82d1a6",
+          300: "#61c18c",
+          400: "#3bb073",
+        },
       },
       fontFamily: {
         display: ["PPFragment"],
         sans: ["UncutSans"],
       },
       fontSize: {
-        "heading-2xl": ["3.052rem", { lineHeight: "120%", letterSpacing: "-0.01em"  }],
-        "heading-xl": ["2.441rem", { lineHeight: "120%", letterSpacing: "-0.01em"  }],
-        "heading-lg": ["1.953rem", { lineHeight: "120%", letterSpacing: "-0.01em"  }],
-        "heading-base": ["1.563rem", { lineHeight: "120%", letterSpacing: "-0.01em"  }],
-        "heading-sm": ["1.5rem", { lineHeight: "120%", letterSpacing: "-0.01em"  }],
-        "heading-xs": ["1rem", { lineHeight: "120%", letterSpacing: "-0.01em" }],
+        "heading-2xl": [
+          "3.052rem",
+          { lineHeight: "120%", letterSpacing: "-0.01em" },
+        ],
+        "heading-xl": [
+          "2.441rem",
+          { lineHeight: "120%", letterSpacing: "-0.01em" },
+        ],
+        "heading-lg": [
+          "1.953rem",
+          { lineHeight: "120%", letterSpacing: "-0.01em" },
+        ],
+        "heading-base": [
+          "1.563rem",
+          { lineHeight: "120%", letterSpacing: "-0.01em" },
+        ],
+        "heading-sm": [
+          "1.5rem",
+          { lineHeight: "120%", letterSpacing: "-0.01em" },
+        ],
+        "heading-xs": [
+          "1rem",
+          { lineHeight: "120%", letterSpacing: "-0.01em" },
+        ],
         "body-3xl": ["1.602rem", { lineHeight: "130%" }],
         "body-2xl": ["1.424rem", { lineHeight: "130%" }],
         "body-xl": ["1.25rem", { lineHeight: "130%" }],
@@ -86,33 +104,33 @@ module.exports = {
         "button-lg": ["1.1rem", { lineHeight: "100%" }],
         "button-base": ["1rem", { lineHeight: "100%" }],
         "button-sm": [".889rem", { lineHeight: "100%" }],
-        "button-xs": ["0.79rem", { lineHeight: "100%" }]
+        "button-xs": ["0.79rem", { lineHeight: "100%" }],
       },
       keyframes: {
         rotateAnimation: {
-          '0%': { transform: 'rotate(0deg)' },
-          '100%': { transform: 'rotate(360deg)' }
+          "0%": { transform: "rotate(0deg)" },
+          "100%": { transform: "rotate(360deg)" },
         },
-      },      
+      },
       zIndex: {
         max: "1000",
       },
       borderWidth: {
-        DEFAULT: '1.4px',
+        DEFAULT: "1.4px",
       },
-      "borderRadius": {
-        "none": "0",
-        "xs": "0.5rem",
-        "sm": "0.7rem"
+      borderRadius: {
+        none: "0",
+        xs: "0.5rem",
+        sm: "0.7rem",
       },
       screens: {
-        'xl': '1352px',
-        'xlpadded': '1422px',
+        xl: "1352px",
+        xlpadded: "1422px",
       },
       typography: (theme) => ({
         DEFAULT: {
           css: {
-            color: theme('colors.newneutral.600'),
+            color: theme("colors.newneutral.600"),
           },
         },
       }),
@@ -127,6 +145,6 @@ module.exports = {
         addBase({ "@font-face": fontFace });
       });
     }),
-    require('@tailwindcss/typography'),
+    require("@tailwindcss/typography"),
   ],
 };