From 3675833254feeaeaad172c5ade003d2cb6277a64 Mon Sep 17 00:00:00 2001
From: Somrat <58769763+tfsomrat@users.noreply.github.com>
Date: Wed, 20 Mar 2024 11:48:19 +0600
Subject: [PATCH] update type-scale calculation for font-size

---
 package.json                               |  2 +-
 src/layouts/components/ThemeSwitcher.astro | 24 ++++++++++++++++------
 src/styles/base.scss                       | 12 +++++++----
 tailwind.config.js                         |  9 ++++----
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index fa0d197..7c1639c 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "3.3.4",
+  "version": "3.4.0",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",
diff --git a/src/layouts/components/ThemeSwitcher.astro b/src/layouts/components/ThemeSwitcher.astro
index 4850bff..2f10b2c 100755
--- a/src/layouts/components/ThemeSwitcher.astro
+++ b/src/layouts/components/ThemeSwitcher.astro
@@ -16,7 +16,7 @@ const { className }: { className?: string } = Astro.props;
         <span class="sr-only">theme switcher</span>
         <span>
           <svg
-            class="absolute left-[4px] top-[4px] z-10 opacity-100 dark:opacity-0"
+            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 opacity-100 dark:opacity-0"
             viewBox="0 0 56 56"
             fill="#fff"
             height="16"
@@ -25,7 +25,7 @@ const { className }: { className?: string } = Astro.props;
             <path d="M30 4.6c0-1-.9-2-2-2a2 2 0 0 0-2 2v5c0 1 .9 2 2 2s2-1 2-2Zm9.6 9a2 2 0 0 0 0 2.8c.8.8 2 .8 2.9 0L46 13a2 2 0 0 0 0-2.9 2 2 0 0 0-3 0Zm-26 2.8c.7.8 2 .8 2.8 0 .8-.7.8-2 0-2.9L13 10c-.7-.7-2-.8-2.9 0-.7.8-.7 2.1 0 3ZM28 16a12 12 0 0 0-12 12 12 12 0 0 0 12 12 12 12 0 0 0 12-12 12 12 0 0 0-12-12Zm23.3 14c1.1 0 2-.9 2-2s-.9-2-2-2h-4.9a2 2 0 0 0-2 2c0 1.1 1 2 2 2ZM4.7 26a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4.9c1 0 2-.9 2-2s-1-2-2-2Zm37.8 13.6a2 2 0 0 0-3 0 2 2 0 0 0 0 2.9l3.6 3.5a2 2 0 0 0 2.9 0c.8-.8.8-2.1 0-3ZM10 43.1a2 2 0 0 0 0 2.9c.8.7 2.1.8 3 0l3.4-3.5c.8-.8.8-2.1 0-2.9-.8-.8-2-.8-2.9 0Zm20 3.4c0-1.1-.9-2-2-2a2 2 0 0 0-2 2v4.9c0 1 .9 2 2 2s2-1 2-2Z" />
           </svg>
           <svg
-            class="absolute left-[4px] top-[4px] z-10 opacity-0 dark:opacity-100"
+            class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 opacity-0 dark:opacity-100"
             viewBox="0 0 24 24"
             fill="none"
             height="16"
@@ -47,11 +47,18 @@ const { className }: { className?: string } = Astro.props;
 <script>
   import { settings } from "@/config/config.json";
   const matchMedia = window.matchMedia("(prefers-color-scheme: dark)");
-  
-  matchMedia.addEventListener('change', () => toggleTheme(document.querySelectorAll("[data-theme-switcher]")));
+
+  matchMedia.addEventListener("change", () =>
+    toggleTheme(document.querySelectorAll("[data-theme-switcher]"))
+  );
 
   function toggleTheme(themeSwitch: NodeListOf<Element>) {
-    const defaulTheme =  settings.default_theme ==="system" ? matchMedia.matches ? "dark" : "light" : settings.default_theme;
+    const defaulTheme =
+      settings.default_theme === "system"
+        ? matchMedia.matches
+          ? "dark"
+          : "light"
+        : settings.default_theme;
     const currentTheme = localStorage.getItem("theme") || defaulTheme;
     const isDarkTheme = currentTheme === "dark";
     themeSwitch.forEach((sw: any) => (sw.checked = isDarkTheme));
@@ -63,7 +70,12 @@ const { className }: { className?: string } = Astro.props;
     toggleTheme(themeSwitch);
     themeSwitch.forEach((sw) => {
       sw.addEventListener("click", function () {
-        const defaulTheme =  settings.default_theme ==="system" ? matchMedia.matches ? "dark" : "light" : settings.default_theme;
+        const defaulTheme =
+          settings.default_theme === "system"
+            ? matchMedia.matches
+              ? "dark"
+              : "light"
+            : settings.default_theme;
         const currentTheme = localStorage.getItem("theme") || defaulTheme;
         const newTheme = currentTheme === "light" ? "dark" : "light";
         localStorage.setItem("theme", newTheme);
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 3d30f17..b568330 100755
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -1,5 +1,5 @@
 html {
-  @apply text-base;
+  @apply text-base-sm md:text-base;
 }
 
 body {
@@ -32,17 +32,17 @@ h3,
 
 h4,
 .h4 {
-  @apply text-h4 font-medium;
+  @apply text-h4;
 }
 
 h5,
 .h5 {
-  @apply text-h5 font-medium;
+  @apply text-h5;
 }
 
 h6,
 .h6 {
-  @apply text-h6 font-medium;
+  @apply text-h6;
 }
 
 b,
@@ -53,3 +53,7 @@ strong {
 code {
   @apply after:border-none;
 }
+
+blockquote > p {
+  @apply my-0 #{!important};
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 042d889..04004f5 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@ const theme = require("./src/config/theme.json");
 
 let font_base = Number(theme.fonts.font_size.base.replace("px", ""));
 let font_scale = Number(theme.fonts.font_size.scale);
-let h6 = font_base / font_base;
+let h6 = font_scale;
 let h5 = h6 * font_scale;
 let h4 = h5 * font_scale;
 let h3 = h4 * font_scale;
@@ -59,12 +59,13 @@ module.exports = {
       },
       fontSize: {
         base: font_base + "px",
+        "base-sm": font_base * 0.8 + "px",
         h1: h1 + "rem",
-        "h1-sm": h1 * 0.8 + "rem",
+        "h1-sm": h1 * 0.9 + "rem",
         h2: h2 + "rem",
-        "h2-sm": h2 * 0.8 + "rem",
+        "h2-sm": h2 * 0.9 + "rem",
         h3: h3 + "rem",
-        "h3-sm": h3 * 0.8 + "rem",
+        "h3-sm": h3 * 0.9 + "rem",
         h4: h4 + "rem",
         h5: h5 + "rem",
         h6: h6 + "rem",