style: medium sized headings look best with a font weight between 500…

…-600
tszhong0411 · Jan 12, 2025 · 72bc10f · 72bc10f
1 parent 38c3cbc
commit 72bc10f
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 13 deletions.
diff --git a/apps/docs/src/components/layout/header.tsx b/apps/docs/src/components/layout/header.tsx
@@ -10,7 +10,7 @@ const Header = () => {
   return (
     <header className='border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur'>
       <div className='mx-auto flex h-14 max-w-6xl items-center justify-between px-5 md:px-8'>
-        <div className='flex items-center gap-2 font-bold md:gap-6'>
+        <div className='flex items-center gap-2 font-semibold md:gap-6'>
           <MobileNav />
           <Link href='/' className='tracking-tighter max-md:hidden'>
             @tszhong0411/docs

diff --git a/apps/web/src/app/[locale]/(main)/dashboard/metrics.tsx b/apps/web/src/app/[locale]/(main)/dashboard/metrics.tsx
@@ -139,7 +139,7 @@ const Metrics = () => {
             className='group relative overflow-hidden rounded-lg border p-4 shadow-sm transition-colors hover:bg-zinc-100 dark:bg-zinc-900/50 dark:hover:bg-zinc-900'
           >
             <div className='flex flex-col items-center justify-center gap-2 transition-transform group-hover:-translate-y-24 group-focus:-translate-y-24'>
-              <div className='flex items-center gap-2 text-3xl font-bold'>
+              <div className='flex items-center gap-2 text-3xl font-semibold'>
                 {hasValue ? (
                   <>
                     <span>{icon}</span>
@@ -160,7 +160,7 @@ const Metrics = () => {
               </div>
               <div className='text-xl font-medium'>{title}</div>
             </div>
-            <span className='absolute left-1/2 top-1/2 flex -translate-x-1/2 translate-y-24 items-center gap-1 text-2xl font-bold opacity-0 transition group-hover:-translate-y-1/2 group-hover:opacity-100 group-focus:-translate-y-1/2 group-focus:opacity-100'>
+            <span className='absolute left-1/2 top-1/2 flex -translate-x-1/2 translate-y-24 items-center gap-1 text-2xl font-semibold opacity-0 transition group-hover:-translate-y-1/2 group-hover:opacity-100 group-focus:-translate-y-1/2 group-focus:opacity-100'>
               {linkText}
               <ArrowRightIcon className='size-6' />
             </span>

diff --git a/apps/web/src/components/home/about-me.tsx b/apps/web/src/components/home/about-me.tsx
@@ -41,7 +41,7 @@ const AboutMe = () => {
       className='relative my-24'
     >
       <motion.h2
-        className='text-center text-3xl font-bold'
+        className='text-center text-3xl font-semibold'
         initial={{
           y: 30,
           opacity: 0

diff --git a/apps/web/src/components/home/get-in-touch.tsx b/apps/web/src/components/home/get-in-touch.tsx
@@ -116,7 +116,7 @@ const GetInTouch = () => {
           </div>
 
           <div className='flex flex-col justify-center px-4'>
-            <p className='mb-2 bg-gradient-to-r from-black to-black/70 bg-clip-text text-3xl font-bold text-transparent dark:from-zinc-100 dark:to-zinc-400'>
+            <p className='mb-2 bg-gradient-to-r from-black to-black/70 bg-clip-text text-3xl font-semibold text-transparent dark:from-zinc-100 dark:to-zinc-400'>
               {t('homepage.get-in-touch.title')}
             </p>
             <p className='text-zinc-800 dark:text-zinc-300'>

diff --git a/apps/web/src/components/home/latest-articles.tsx b/apps/web/src/components/home/latest-articles.tsx
@@ -48,7 +48,7 @@ const LatestArticles = () => {
       className='my-24'
     >
       <motion.h2
-        className='text-center text-3xl font-bold'
+        className='text-center text-3xl font-semibold'
         initial={{
           y: 30,
           opacity: 0
@@ -152,7 +152,7 @@ const Card = (props: CardProps) => {
         </div>
       </div>
       <div className='flex flex-col px-2 py-4 transition-transform ease-out group-hover:translate-x-0.5'>
-        <h3 className='text-2xl font-bold'>{title}</h3>
+        <h3 className='text-2xl font-semibold'>{title}</h3>
         <p className='text-muted-foreground mt-2'>{summary}</p>
       </div>
     </Link>

diff --git a/apps/web/src/components/home/selected-projects.tsx b/apps/web/src/components/home/selected-projects.tsx
@@ -46,7 +46,7 @@ const SelectedProjects = () => {
       className='relative my-24'
     >
       <motion.h2
-        className='text-center text-3xl font-bold'
+        className='text-center text-3xl font-semibold'
         initial={{
           y: 30,
           opacity: 0
@@ -122,7 +122,7 @@ const Card = (props: CardProps) => {
         className='rounded-lg'
       />
       <div className='absolute bottom-6 left-7 flex flex-col transition-[left] ease-out group-hover:left-[30px]'>
-        <h3 className='text-2xl font-bold text-white'>{name}</h3>
+        <h3 className='text-2xl font-semibold text-white'>{name}</h3>
         <p className='dark:text-muted-foreground mt-2 text-zinc-100'>{description}</p>
       </div>
     </Link>

diff --git a/apps/web/src/components/post-cards.tsx b/apps/web/src/components/post-cards.tsx
@@ -70,7 +70,7 @@ const PostCard = (props: PostCardProps) => {
         </div>
       </div>
       <div className='flex flex-col px-2 py-4'>
-        <h3 className='text-2xl font-bold'>{title}</h3>
+        <h3 className='text-2xl font-semibold'>{title}</h3>
         <p className='text-muted-foreground mt-2'>{summary}</p>
       </div>
     </Link>

diff --git a/apps/web/src/components/project-cards.tsx b/apps/web/src/components/project-cards.tsx
@@ -40,7 +40,7 @@ const ProjectCard = (props: ProjectCardProps) => {
       />
       <div className='flex-1 px-2 py-4'>
         <div className='space-y-2'>
-          <h2 className='text-2xl font-bold'>{name}</h2>
+          <h2 className='text-2xl font-semibold'>{name}</h2>
           <div className='text-muted-foreground'>{description}</div>
         </div>
         <div className='mt-4 flex flex-wrap gap-2'>

diff --git a/apps/web/src/components/sign-in-dialog.tsx b/apps/web/src/components/sign-in-dialog.tsx
@@ -68,7 +68,7 @@ const SignInDialog = () => {
         </DialogHeader>
         <div className='my-6 flex flex-col gap-4'>
           <Button
-            className='h-10 rounded-xl font-bold'
+            className='h-10 rounded-xl font-semibold'
             onClick={() => {
               setIsGitHubLoading(true)
               void signIn('github')
@@ -85,7 +85,7 @@ const SignInDialog = () => {
             )}
           </Button>
           <Button
-            className='h-10 rounded-xl border font-bold'
+            className='h-10 rounded-xl border font-semibold'
             variant='ghost'
             onClick={() => {
               setIsGoogleLoading(true)