improved visual on blog

Author: tkokhing

src/app/_components/post_gen/hero-post.tsx

@@ -34,22 +34,22 @@ export function HeroPost(
       </div>
       <div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
         <div>
-          <h3 className="mb-4 text-4xl lg:text-5xl leading-tight">
+          <h3 className="mb-4 text-adaptive_fs_l leading-tight">
             <Link href={`/${subPath}/${slug}`} className="hover:underline">
               {title}
-              <p className="mb-4 md:mb-0 text-lg italic">
+              <p className="mb-4 md:mb-0 text-adaptive_fs_xs italic">
                 {postStatus} < DateFormatter dateString={date} />
               </p>
             </Link>
           </h3>
         </div>
-        <div className="shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4">
+        <div className="text-adaptive_fs_sm shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4">
           <Link href={`/${subPath}/${slug}`}>
             <h4
-            className="font-semibold italic text-lg hover:underline text-sky-950 dark:text-slate-100"> 
+            className="font-semibold italic  hover:underline text-sky-950 dark:text-slate-100"> 
               Excerpt:
             </h4>
-            <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+            <p className=" leading-relaxed mb-4">{excerpt}</p>
           </Link>
 
         </div>

src/app/_components/post_gen/post-header.tsx

@@ -27,7 +27,7 @@ export function PostHeader({ title, coverImage, date, author, subPath, postStatu
         <div className="block md:hidden mb-6">
           <Avatar name={author.name} picture={author.picture} />
         </div>
-        <div className="mb-6 text-lg italic">
+        <div className="mb-6 text-adaptive_fs_sm italic">
           {postStatus} <DateFormatter dateString={date} />
         </div>
       </div>

src/app/_components/post_gen/post-preview.tsx

@@ -28,24 +28,24 @@ export function PostPreview({
   {
   return (
     <div>
-      <div className="mb-5">
+      <div className="mb-3">
         <CoverImage subPath={subPath} slug={slug} title={title} src={coverImage} /> 
       </div>
-        <h3 className="text-3xl mb-3 leading-snug">
+        <h3 className="text-adaptive_fs_base mb-3 leading-snug">
           <Link href={`/${subPath}/${slug}`} className="hover:underline">
             {title}
-            <p className="text-right text-sm mb-4 italic">
+            <p className="text-right text-adaptive_fs_xs mb-4 italic">
               {postStatus} <DateFormatter dateString={date} />
             </p>
           </Link>
         </h3>
-      <div className="shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4">
+      <div className="text-adaptive_fs_sm shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4">
         <Link href={`/${subPath}/${slug}`}>
           <h4
-          className="font-semibold italic text-lg hover:underline text-sky-950 dark:text-slate-100"> 
+          className="font-semibold italic hover:underline text-sky-950 dark:text-slate-100"> 
             Excerpt:
           </h4>
-          <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
+          <p className="leading-relaxed mb-4">{excerpt}</p>
         </Link>
 
       </div>

src/app/_components/post_gen/title-preview.tsx

@@ -19,12 +19,12 @@ export function TitlePreview({
   postStatus,
 }: Props) {
   return (
-    <div className="shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4 text-xl mb-3 leading-snug">
+    <div className="shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4 mb-3 leading-snug">
       <Link href={`/${subPath}/${slug}`}>
-        <h3 className="text-xl font-medium hover:underline">{title}</h3>
+        <h3 className="text-adaptive_fs_base font-medium hover:underline">{title}</h3>
       </Link>
-      <p className="text-pretty text-xs mb-1 italic">{excerpt}</p>
-      <p className="text-right text-xs italic">
+      <p className="text-pretty text-adaptive_fs_sm mb-1 italic">{excerpt}</p>
+      <p className="text-right text-adaptive_fs_xs italic">
         {postStatus} <DateFormatter dateString={date} />
       </p>
     </div>

tailwind.config.ts

@@ -44,10 +44,11 @@ const config: Config = {
         tighter: "-.04em",
       },
       fontSize: {
-        "5xl": "2.5rem",
-        "6xl": "2.75rem",
-        "7xl": "4.5rem",
-        "8xl": "6.25rem",
+        'adaptive_fs_xl': 'clamp(2rem, calc(5.5vw), 4.5rem)',
+        'adaptive_fs_l': 'clamp(1.7rem, calc(4.2vw), 3.5rem)',
+        'adaptive_fs_base': 'clamp(1.2rem, calc(3vw), 3rem)',
+        'adaptive_fs_sm': 'clamp(0.875rem, calc(2vw), 2rem)',
+        'adaptive_fs_xs': 'clamp(0.625rem, calc(1vw), 2rem)',
       },
       boxShadow: {
         sm: "0 5px 10px rgba(0, 0, 0, 0.12)",