Merge pull request #17 from EpicsDAO/update/typography

update/typography
EpicsDAO · Nov 24, 2023 · fdac0b6 · fdac0b6
2 parents f4fa0ac + f70ce6f
commit fdac0b6
Show file tree

Hide file tree

Showing 22 changed files with 59 additions and 51 deletions.
diff --git a/public/locales/en/doc.json b/public/locales/en/doc.json
@@ -31,10 +31,10 @@
     },
     "tutorial": {
       "groupTitle": "Tutorial",
-      "chapter1": "①: Solana Setup",
-      "chapter2": "②: Backup & Migrate",
-      "chapter3": "③: Cloud & Monitor",
-      "chapter4": "④: Revenue Analysis"
+      "chapter1": "1. Solana Setup",
+      "chapter2": "2. Backup & Migrate",
+      "chapter3": "3. Cloud & Monitor",
+      "chapter4": "4. Revenue Analysis"
     }
   },
   "headerNav": {

diff --git a/public/locales/ja/doc.json b/public/locales/ja/doc.json
@@ -31,10 +31,10 @@
     },
     "tutorial": {
       "groupTitle": "チュートリアル",
-      "chapter1": "①: Solanaバリデーター設定",
-      "chapter2": "②: バックアップと移転",
-      "chapter3": "③: クラウドとSolana監視",
-      "chapter4": "④: 収益管理と分析"
+      "chapter1": "1. Solanaバリデーター設定",
+      "chapter2": "2. バックアップと移転",
+      "chapter3": "3. クラウドとSolana監視",
+      "chapter4": "4. 収益管理と分析"
     }
   },
   "headerNav": {

diff --git a/src/components/articles/doc/DocContents.tsx b/src/components/articles/doc/DocContents.tsx
@@ -14,7 +14,9 @@ export default function DocContents({ article, articleHtml }: Props) {
       <Container>
         <div className="flex justify-center py-12 lg:gap-12">
           <div className="max-w-2xl">
-            <h1 className="text-4xl font-bold">{article.title}</h1>
+            <h1 className="text-4xl font-extrabold tracking-tighter">
+              {article.title}
+            </h1>
 
             <div className="py-8 xl:hidden">
               <ScrollSyncToc rawMarkdownBody={article.content} />

diff --git a/src/components/articles/doc/DocIndex.tsx b/src/components/articles/doc/DocIndex.tsx
@@ -37,7 +37,7 @@ export default function DocIndex({}: Props) {
       <div className="py-24">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
+            <h2 className="text-3xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-4xl">
               {t('doc:title')}
             </h2>
             <p className="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
@@ -70,7 +70,7 @@ export default function DocIndex({}: Props) {
                   </span>
                 </div>
                 <div className="mt-8">
-                  <h3 className="text-lg font-medium">
+                  <h3 className="text-lg font-bold tracking-tight">
                     <Link href={action.href} className="focus:outline-none">
                       <span className="absolute inset-0" aria-hidden="true" />
                       {t(action.title)}

diff --git a/src/components/articles/news/NewsContents.tsx b/src/components/articles/news/NewsContents.tsx
@@ -14,7 +14,9 @@ export default function NewsContents({ article, articleHtml }: Props) {
       <Container>
         <div className="flex justify-center py-12 lg:grid lg:grid-cols-8 lg:gap-12">
           <div className="lg:col-span-5">
-            <h1 className="text-4xl font-bold">{article.title}</h1>
+            <h1 className="text-4xl font-extrabold tracking-tighter">
+              {article.title}
+            </h1>
             <p className="mt-1 text-gray-600 dark:text-gray-200">
               {article.date}
             </p>

diff --git a/src/components/articles/news/NewsIndex.tsx b/src/components/articles/news/NewsIndex.tsx
@@ -17,7 +17,7 @@ export default function NewsIndex({ articles, urls }: Props) {
       <div className="pb-24 sm:pb-32">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <TopNewsRow articles={articles.slice(0, 4)} urls={urls} />
-          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-y-20 gap-x-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
             {articles.slice(4).map((article, index) => (
               <article
                 key={`NewsIndex Article${article.title}`}
@@ -42,12 +42,12 @@ export default function NewsIndex({ articles, urls }: Props) {
                       >
                         {article.date}
                       </time>
-                      <span className="relative bg-gray-600 py-1.5 px-3 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
+                      <span className="relative bg-gray-600 px-3 py-1.5 font-medium text-white group-hover:bg-gray-400 dark:bg-gray-400  dark:text-gray-50 dark:group-hover:bg-gray-700">
                         {article.category}
                       </span>
                     </div>
                     <div className="relative">
-                      <h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
+                      <h3 className="mt-3 text-lg font-bold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
                         <span className="absolute inset-0" />
                         {article.title}
                       </h3>

diff --git a/src/components/articles/news/TopNewsRow.tsx b/src/components/articles/news/TopNewsRow.tsx
@@ -16,7 +16,7 @@ export default function TopNewsRow({ articles, urls }: Props) {
       <div className="py-24 sm:py-36">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
-            <h2 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-5xl">
+            <h2 className="text-4xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-5xl">
               News
             </h2>
           </div>
@@ -52,7 +52,7 @@ export default function TopNewsRow({ articles, urls }: Props) {
                           </span>
                         </div>
                         <div className="relative">
-                          <h2 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
+                          <h2 className="mt-3 text-lg font-bold leading-6 tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
                             <a href={urls[index]}>
                               <span className="absolute inset-0" />
                               {article.title}
@@ -95,7 +95,7 @@ export default function TopNewsRow({ articles, urls }: Props) {
                                   {article.category}
                                 </span>
                               </div>
-                              <h2 className="mt-2 text-lg font-semibold text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
+                              <h2 className="mt-2 text-lg font-bold tracking-tight text-gray-900 group-hover:text-gray-600 dark:text-gray-50 dark:group-hover:text-gray-300">
                                 <span className="absolute inset-0" />
                                 {article.title}
                               </h2>

diff --git a/src/components/pages/common/CTASectionRow.tsx b/src/components/pages/common/CTASectionRow.tsx
@@ -8,10 +8,10 @@ export default function CTASectionRow() {
       <div className="">
         <div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:justify-between lg:px-8">
           <div>
-            <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+            <h2 className="text-3xl font-extrabold tracking-tighter text-gray-900 dark:text-white sm:text-5xl">
               {t('common:CTASectionRow.title')}
             </h2>
-            <p className="mt-2 text-lg font-medium tracking-tight text-gray-400 dark:text-gray-400 sm:text-lg">
+            <p className="mt-2 text-lg font-medium tracking-tight text-gray-400 dark:text-gray-400 sm:text-xl">
               {t('common:CTASectionRow.body')}
             </p>
           </div>

diff --git a/src/components/pages/common/ContactRow.tsx b/src/components/pages/common/ContactRow.tsx
@@ -23,7 +23,7 @@ export default function ContactRow() {
               aria-label="Discord icon"
               className="h-9 w-9 text-white"
             />
-            <h3 className="mt-2 text-2xl font-semibold leading-6 text-white">
+            <h3 className="mt-2 text-2xl font-extrabold leading-6 tracking-tight text-white">
               {t('ContactRow.discord.title')}
             </h3>
             <div className="mt-2 sm:flex sm:items-start sm:justify-between">
@@ -50,7 +50,7 @@ export default function ContactRow() {
               aria-label="Contact Form"
               className="h-9 w-9 text-white"
             />
-            <h3 className="mt-2 text-2xl font-semibold leading-6 text-white">
+            <h3 className="mt-2 text-2xl font-extrabold leading-6 tracking-tight text-white">
               {t('ContactRow.form.title')}
             </h3>
             <div className="mt-2 sm:flex sm:items-start sm:justify-between">

diff --git a/src/components/pages/common/LatitudeCouponRow.tsx b/src/components/pages/common/LatitudeCouponRow.tsx
@@ -29,7 +29,7 @@ export default function LatitudeCouponRow() {
                 <h2 className="bg-gradient-to-tl from-green-500 via-blue-400 to-purple-400 bg-clip-text text-base font-semibold leading-7 text-transparent">
                   {t('common:LatitudeCouponRow.subtitle')}
                 </h2>
-                <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+                <p className="mt-2 text-3xl font-extrabold tracking-tighter text-gray-900 dark:text-white sm:text-4xl">
                   {t('common:LatitudeCouponRow.title')}
                 </p>
                 <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400">

diff --git a/src/components/pages/common/MediaLogoRow.tsx b/src/components/pages/common/MediaLogoRow.tsx
@@ -15,7 +15,7 @@ export default function MediaLogoRow() {
   return (
     <>
       <Container className="py-24 text-center lg:py-32">
-        <h2 className="font-display mx-auto max-w-4xl text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-5xl">
+        <h2 className="font-display mx-auto max-w-4xl text-2xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-5xl">
           {t('media')}
         </h2>
 

diff --git a/src/components/pages/common/OurWorksRow.tsx b/src/components/pages/common/OurWorksRow.tsx
@@ -40,7 +40,7 @@ export default function OurWorksRow() {
                   alt={work.title}
                   unoptimized
                 />
-                <h3 className="mt-6 text-lg font-semibold leading-8 text-gray-900 dark:text-white">
+                <h3 className="mt-6 text-lg font-bold leading-8 tracking-tight text-gray-900 dark:text-white">
                   {t(work.title)}
                 </h3>
                 <p className="mt-4 text-base leading-7 text-gray-600 dark:text-gray-200">

diff --git a/src/components/pages/common/RoadmapRow.tsx b/src/components/pages/common/RoadmapRow.tsx
@@ -90,7 +90,7 @@ export default function RoadmapRow() {
     <>
       <div className="mx-auto max-w-2xl px-4 py-48 sm:px-6 lg:px-8">
         <div className="mx-auto max-w-xl text-center">
-          <h2 className="pb-16 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-5xl">
+          <h2 className="pb-16 text-4xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-5xl">
             Roadmap
           </h2>
         </div>

diff --git a/src/components/pages/common/SolanaBreakpointSideEventRow.tsx b/src/components/pages/common/SolanaBreakpointSideEventRow.tsx
@@ -14,7 +14,7 @@ export default function SolanaBreakpointSideEventRow() {
             <h2 className="bg-gradient-to-t from-blue-500 via-purple-400 to-pink-300 bg-clip-text text-base font-semibold leading-7 text-transparent">
               Solana Breakpoint 2023 Side Event
             </h2>
-            <h2 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+            <h2 className="mt-2 text-4xl font-extrabold tracking-tighter text-gray-900 dark:text-white sm:text-4xl">
               {t('common:SolanaBreakpointSideEventRow.title')}
             </h2>
             <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-200">

diff --git a/src/components/pages/common/SolvTutorialYouTubeRow.tsx b/src/components/pages/common/SolvTutorialYouTubeRow.tsx
@@ -15,7 +15,7 @@ export default function SolvTutorialYouTubeRow() {
             <h2 className="bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400 bg-clip-text text-base font-semibold leading-7 text-transparent">
               {t('common:SolvTutorialYouTubeRow.subtitle')}
             </h2>
-            <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+            <p className="mt-2 text-3xl font-extrabold tracking-tighter text-gray-900 dark:text-white sm:text-5xl">
               {t('common:SolvTutorialYouTubeRow.title')}
             </p>
             <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-200">

diff --git a/src/components/pages/common/WhyOpenSourceDevelopment.tsx b/src/components/pages/common/WhyOpenSourceDevelopment.tsx
@@ -36,7 +36,7 @@ export default function WhyOpenSourceDevelopmentRow() {
           <h2 className="bg-gradient-to-tl from-red-400 via-purple-400 to-blue-400 bg-clip-text text-base font-semibold leading-7 text-transparent">
             {t('common:WhyOpenSourceDevelopmentRow.subtitle')}
           </h2>
-          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+          <p className="mt-2 text-3xl font-extrabold tracking-tighter text-gray-900 dark:text-white sm:text-5xl">
             {t('common:WhyOpenSourceDevelopmentRow.title')}
           </p>
           <p className="mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600 dark:text-gray-200">
@@ -61,7 +61,7 @@ export default function WhyOpenSourceDevelopmentRow() {
           <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
             {features.map((feature) => (
               <div key={feature.name} className="flex flex-col">
-                <dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900 dark:text-white">
+                <dt className="flex items-center gap-x-3 text-base font-bold leading-7 tracking-tight text-gray-900 dark:text-white">
                   <feature.icon
                     className="h-5 w-5 flex-none"
                     aria-hidden="true"

diff --git a/src/components/pages/dao/EpicsDAOTitleRow.tsx b/src/components/pages/dao/EpicsDAOTitleRow.tsx
@@ -8,7 +8,7 @@ export default function EpicsDAOTitleRow() {
   return (
     <div className="px-6 py-24 sm:py-32 lg:px-8">
       <div className="mx-auto max-w-2xl text-center">
-        <h2 className="mt-2 bg-gradient-to-tr from-green-500 via-blue-400 to-purple-400 bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-6xl">
+        <h2 className="mt-2 bg-gradient-to-tr from-green-500 via-blue-400 to-purple-400 bg-clip-text text-4xl font-extrabold tracking-tighter text-transparent sm:text-6xl">
           Epics DAO
         </h2>
         <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-200">

diff --git a/src/components/pages/dao/TeamRow.tsx b/src/components/pages/dao/TeamRow.tsx
@@ -41,7 +41,7 @@ export default function TeamRow() {
       <div className="py-24 md:py-32">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-5">
           <div className="max-w-2xl xl:col-span-2">
-            <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
+            <h2 className="text-3xl font-extrabold tracking-tighter text-gray-900 dark:text-gray-50 sm:text-4xl">
               {t('dao:TeamRow.title')}
             </h2>
             <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-200">
@@ -64,7 +64,7 @@ export default function TeamRow() {
                   unoptimized
                 />
                 <div className="max-w-xl flex-auto">
-                  <h3 className="text-lg font-semibold leading-8 tracking-tight text-gray-900 dark:text-gray-50">
+                  <h3 className="text-lg font-bold leading-8 tracking-tight text-gray-900 dark:text-gray-50">
                     {t(`dao:TeamRow.${person.name}.name`)}
                   </h3>
                   <p className="text-base leading-7 text-gray-600 dark:text-gray-300">

diff --git a/src/components/pages/enterprise/EnterpriseSupportFormRow.tsx b/src/components/pages/enterprise/EnterpriseSupportFormRow.tsx
@@ -46,7 +46,7 @@ export default function EnterpriseSupportFormRow() {
               </svg>
               Support
             </span>
-            <p className="mt-3 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+            <p className="mt-3 text-3xl font-extrabold tracking-tighter text-gray-900 dark:text-white sm:text-4xl">
               {t('enterprise:EnterpriseSupportFormRow.title')}
             </p>
             <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
@@ -58,8 +58,8 @@ export default function EnterpriseSupportFormRow() {
               <dl className="col-span-1 grid grid-cols-1 gap-y-10 lg:col-span-3">
                 {merits.map((item) => (
                   <div key={item.title} className="relative  pl-16">
-                    <dt className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
-                      <div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:bg-gray-800">
+                    <dt className="text-base font-bold leading-7 tracking-tight text-gray-900 dark:text-white">
+                      <div className="bg-gray-50text-gray-600 absolute left-0 top-0 flex h-10 w-10 items-center justify-center ring-1 ring-inset ring-gray-500/10 dark:bg-gray-800">
                         <item.icon
                           className="h-6 w-6 text-gray-600 dark:text-gray-200"
                           aria-hidden="true"
@@ -81,7 +81,7 @@ export default function EnterpriseSupportFormRow() {
                   <p className="mt-6 text-center font-bold">
                     {t('enterprise:EnterpriseSupportFormRow.cardTitle')}
                   </p>
-                  <p className="mt-2 text-center text-sm font-light">
+                  <p className="mt-2 text-center text-sm font-light tracking-tight">
                     by Epics DAO
                   </p>
                   <p className="mt-4 text-center text-sm">