feat: adjust font sizes

fetchai · Nov 14, 2024 · faff490 · faff490
1 parent 2c72a7c
commit faff490
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 44 deletions.
diff --git a/components/feature-guide-tabs.tsx b/components/feature-guide-tabs.tsx
@@ -35,7 +35,7 @@ export const GuideBox = ({
       >
         {content.title}
       </h3>
-      <p className="nx-text-gray-500 dark:nx-text-white-60 nx-font-normal">
+      <p className="nx-text-gray-500 nx-text-paragraph dark:nx-text-white-60 nx-font-normal">
         {content.description}
       </p>
     </section>

diff --git a/components/landing.module.css b/components/landing.module.css
@@ -5,17 +5,20 @@
 
 .mainTitle {
   color: #000d3d;
-  font-size: 48px;
+  font-size: 32px;
+  font-style: normal;
   font-weight: 400;
   line-height: 120%;
+  padding-bottom: 12px;
 }
 
 .subTitle {
   color: #000d3d;
-  font-size: 28px;
+  font-size: 24px;
+  font-style: normal;
   font-weight: 400;
   line-height: 140%;
-  letter-spacing: -0.28px;
+  letter-spacing: -0.24px;
 }
 
 @media (max-width: 767px) {
@@ -32,24 +35,28 @@
   .subTitle {
     color: #000d3d;
     font-size: 24px;
+    font-style: normal;
     font-weight: 400;
+    line-height: 140%;
+    letter-spacing: -0.24px;
+    margin-bottom: 12px;
   }
 }
 
 .description {
   color: #73879e;
-  font-size: 22px;
+  font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: 160%;
 }
 
 .subDescription {
   color: #73879e;
-  font-size: 20px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
-  line-height: 160%; /* 32px */
+  line-height: 160%;
 }
 
 .guideBox {
@@ -84,16 +91,16 @@
 .startGuides {
   display: flex;
   flex-grow: 1;
-  margin-top: 48px;
+  margin-top: 24px;
   margin-bottom: 48px;
 }
 
 .startGuideText {
   color: #000d3d;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 150%;
-  letter-spacing: -0.18px;
+  line-height: 160%;
+  letter-spacing: -0.16px;
   max-width: 254px;
 }
 
@@ -120,7 +127,6 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  gap: 12px;
 }
 
 .welcomeText {
@@ -129,6 +135,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: 160%;
+  padding-bottom: 8px;
 }
 
 .horizontalLine {
@@ -145,7 +152,7 @@
 
 .systemDescripton {
   color: #3e4c5c;
-  font-size: 1.1rem;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: 180%;
@@ -185,11 +192,11 @@
 .stackHeading {
   color: #000d3d;
   text-align: center;
-  font-size: 32px;
+  font-size: 28px;
   font-style: normal;
   font-weight: 500;
-  line-height: 160%;
-  letter-spacing: -0.32px;
+  line-height: 140%;
+  letter-spacing: -0.28px;
   text-align: center;
   max-width: 207px;
   height: 90px;
@@ -213,7 +220,7 @@
 
 .coursesHeading {
   color: #fff;
-  font-size: 28px;
+  font-size: 24px;
   font-weight: 400;
   line-height: 140%;
   letter-spacing: -0.28px;
@@ -225,7 +232,7 @@
 
 .coursesSubtitle {
   color: #dce2ea;
-  font-size: 20px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 160%;
@@ -248,10 +255,10 @@
 .introduction {
   color: #8a9fb8;
   text-align: center;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   line-height: 160%;
-  letter-spacing: 1.4px;
+  letter-spacing: 1.2px;
   text-transform: uppercase;
 }
 
@@ -311,7 +318,7 @@
 .comingSomewhereTitle {
   color: #000d3d;
   font-family: Lexend;
-  font-size: 16px;
+  font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

diff --git a/components/products.tsx b/components/products.tsx
@@ -70,8 +70,8 @@ const Item = ({
           <h3
             className={
               hover
-                ? "nx-text-purple nx-text-lg nx-font-medium nx-mb-2"
-                : "nx-text-black dark:nx-text-[#E9E9EA] nx-text-lg nx-font-medium nx-mb-2"
+                ? "nx-text-purple nx-text-base nx-font-medium nx-mb-2"
+                : "nx-text-black dark:nx-text-[#E9E9EA] nx-text-base nx-font-medium nx-mb-2"
             }
           >
             {item.title}

diff --git a/components/tab.module.css b/components/tab.module.css
@@ -53,16 +53,18 @@
 .productsHeading {
   color: rgba(0, 13, 61, 0.8);
   font-family: Lexend;
-  font-size: 18px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
-  letter-spacing: -0.36px;
+  letter-spacing: -0.32px;
   text-transform: uppercase;
 }
 
 .productDescripton {
   color: #73879e;
+  font-size: 14px;
+  font-style: normal;
   font-weight: 400;
   line-height: 160%;
 }

diff --git a/styles/globals.css b/styles/globals.css
@@ -1729,14 +1729,14 @@ video {
 }
 
 .nx-text-base {
-  font-size: 1.1rem;
+  font-size: 1rem;
 }
 
 .nx-text-paragraph {
-  font-size: 16px;
+  font-size: 1rem;
 }
 .nx-text-toc {
-  font-size: 13px;
+  font-size: 0.75rem;
 }
 
 .nx-text-lg {
@@ -1755,6 +1755,10 @@ video {
   font-size: 0.75rem;
 }
 
+.nx-text-32 {
+  font-size: 2rem;
+}
+
 .nx-font-bold {
   font-weight: 700;
 }
@@ -2617,7 +2621,14 @@ span:target + .subheading-anchor:after {
 
 :is(html[class~="dark"] .nextra-scrollbar-bg) {
   background-color: #20222c;
-  border-right: 1px solid var(--Dark-Mode-White-10, #363841);
+}
+
+.border-body-left {
+  border-left: 1px solid var(--Cold-Grey-Grey200, #dce2ea);
+}
+
+:is(html[class~="dark"] .border-body-left) {
+  border-left: 1px solid var(--Dark-Mode-White-10, #363841);
 }
 
 .nextra-active-route {
@@ -4838,7 +4849,7 @@ div:hover > .\[div\:hover\>\&\]\:nx-opacity-100 {
 .link-text {
   color: #5f38fb;
   font-weight: 400;
-  font-size: 1.1rem;
+  font-size: 0.875rem;
 }
 
 :is(html[class~="dark"] .link-text) {

diff --git a/theme/fetch-ai-docs/components/navbar.tsx b/theme/fetch-ai-docs/components/navbar.tsx
@@ -190,12 +190,12 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
                   >
                     <span
                       className={`${
-                        hoveredLink === href && !isActive ? "link-text " : ""
-                      } nx-absolute nx-inset-x-0 nx-text-base nx-text-center`}
+                        hoveredLink === href && !isActive ? "link-text" : ""
+                      } nx-absolute nx-inset-x-0 nx-text-sm nx-text-center`}
                     >
                       {page.title}
                     </span>
-                    <span className="nx-invisible nx-text-base">
+                    <span className="nx-invisible nx-text-sm">
                       {page.title}
                     </span>
                   </Anchor>

diff --git a/theme/fetch-ai-docs/components/not-found.tsx b/theme/fetch-ai-docs/components/not-found.tsx
@@ -24,7 +24,7 @@ export function NotFoundPage(): ReactElement | null {
           labels,
         })}
         newWindow
-        className="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]"
+        className="nx-text-primary-600 nx-underline nx-decoration-from-font nx-text-paragraph [text-underline-position:from-font]"
       >
         {renderComponent(content)}
       </Anchor>

diff --git a/theme/fetch-ai-docs/components/server-side-error.tsx b/theme/fetch-ai-docs/components/server-side-error.tsx
@@ -26,7 +26,7 @@ export function ServerSideErrorPage(): ReactElement | null {
           labels,
         })}
         newWindow
-        className="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]"
+        className="nx-text-primary-600 nx-underline nx-decoration-from-font nx-text-paragraph [text-underline-position:from-font]"
       >
         {renderComponent(content)}
       </Anchor>

diff --git a/theme/fetch-ai-docs/components/sidebar.tsx b/theme/fetch-ai-docs/components/sidebar.tsx
@@ -428,7 +428,7 @@ export function Sidebar({
         )}
         onClick={() => setMenu(false)}
       />
-      <div className="nextra-scrollbar-bg">
+      <div>
         <aside
           className={cn(
             "nextra-sidebar-container nx-sidebar-scrollable    nx-flex nx-flex-col nx-p-3",

diff --git a/theme/fetch-ai-docs/index.tsx b/theme/fetch-ai-docs/index.tsx
@@ -160,7 +160,7 @@ const Body = ({
       <article
         className={cn(
           classes.main,
-          "nextra-content nx-flex nx-min-h-[calc(100vh-var(--nextra-navbar-height))] nx-min-w-0 nx-pb-8 nx-pr-[calc(env(safe-area-inset-right)-1.5rem)]",
+          "nextra-content nx-flex border-body-left  nx-min-h-[calc(100vh-var(--nextra-navbar-height))] nx-min-w-0 nx-pb-8 nx-pr-[calc(env(safe-area-inset-right)-1.5rem)]",
           themeContext.typesetting === "article" &&
             "nextra-body-typesetting-article",
         )}

diff --git a/theme/fetch-ai-docs/mdx-components.tsx b/theme/fetch-ai-docs/mdx-components.tsx
@@ -51,11 +51,11 @@ function HeadingLink({
       className={cn(
         "nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90",
         {
-          h2: "nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400",
-          h3: "nx-mt-8 nx-text-2xl",
-          h4: "nx-mt-8 nx-text-xl",
-          h5: "nx-mt-8 nx-text-lg",
-          h6: "nx-mt-8 nx-text-base",
+          h2: "nx-mt-10 nx-border-b nx-pb-1 nx-text-2xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400",
+          h3: "nx-mt-8 nx-text-xl",
+          h4: "nx-mt-8 nx-text-lg",
+          h5: "nx-mt-8 nx-text-base",
+          h6: "nx-mt-8 nx-text-sm",
         }[Tag],
       )}
       {...props}
@@ -169,7 +169,7 @@ export const Link = ({ href = "", className, ...props }: AnchorProps) => {
           href={href}
           newWindow={EXTERNAL_HREF_REGEX.test(href)}
           className={cn(
-            "nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]",
+            "nx-text-primary-600 nx-underline nx-text-paragraph nx-decoration-from-font [text-underline-position:from-font]",
             className,
           )}
           {...props}
@@ -204,7 +204,7 @@ export const getComponents = ({
   return {
     h1: (props) => (
       <h1
-        className="nx-mt-2 nx-text-4xl nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90"
+        className="nx-mt-2 nx-text-32 nx-tracking-tight nx-text-slate-900 dark:nx-text-white-90"
         {...props}
       />
     ),