Docs page update (#1754)

* Docs page update

* update margins

* update team image

Author: carlosabadia

assets/about/team_3.avif

@@ -1145,6 +1145,7 @@
     --text-6xl: 3.5rem;
     --text-6xl--line-height: 4rem;
     --text-6xl--letter-spacing: -0.1925rem;
+    --breakpoint-3xl: 110rem;
 
     /* Animation */
     --animate-accordion-down: accordion-down 0.2s ease-out;

assets/tailwind-theme.css

@@ -107,7 +107,7 @@ def navbar_sidebar_drawer(trigger) -> rx.Component:
                     rx.cond(
                         HostingBannerState.is_banner_visible,
                         "!top-[137px]",
-                        "!top-[74px]",
+                        "!top-[77px]",
                     ),
                 ),
             )

pcweb/components/docpage/navbar/buttons/sidebar.py

@@ -672,6 +672,16 @@ def markdown_with_shiki(*args, **kwargs):
     """
     return rx.markdown(
         *args,
-        component_map={"pre": markdown_codeblock},
+        component_map={
+            "h1": lambda text: h1_comp_xd(text=text),
+            "h2": lambda text: h2_comp_xd(text=text),
+            "h3": lambda text: h3_comp_xd(text=text),
+            "h4": lambda text: h4_comp_xd(text=text),
+            "p": lambda text: text_comp(text=text),
+            "li": lambda text: list_comp(text=text),
+            "a": doclink2,
+            "pre": markdown_codeblock,
+            "img": lambda src: img_comp_xd(src=src),
+        },
         **kwargs,
     )

pcweb/components/docpage/sidebar/sidebar.py

@@ -45,7 +45,7 @@ def product_card(
                 class_name="size-4 text-secondary-11 group-hover:text-slate-12 group-hover:translate-x-1 transition-all duration-300",
             ),
             to=url,
-            class_name="flex flex-row items-center gap-2 justify-between group h-[4rem] px-10 hover:bg-slate-2 transition-colors border-t max-lg:border-b border-slate-3",
+            class_name="flex flex-row items-center gap-2 justify-between group h-[4rem] px-10 hover:bg-slate-2 transition-colors border-t max-lg:border-b border-slate-3 mt-auto shrink-0",
         ),
         class_name="flex flex-col",
     )

pcweb/flexdown.py

@@ -91,8 +91,8 @@ def create(
         href = rx.State.router.page.full_path + "#" + id_
         scroll_margin = rx.cond(
             HostingBannerState.is_banner_visible,
-            "scroll-m-[8.5rem]",
-            "scroll-m-[5rem]",
+            "scroll-mt-[113px]",
+            "scroll-mt-[77px]",
         )
 
         return super().create(
@@ -113,7 +113,7 @@ def create(
             href=href,
             on_click=lambda: rx.set_clipboard(href),
             # as_child=True,
-            class_name="flex flex-row items-center gap-6 hover:!text-violet-11 text-slate-12 cursor-pointer mb-2 transition-colors group",
+            class_name="flex flex-row items-center gap-6 hover:!text-violet-11 cursor-pointer mb-6 transition-colors group text-m-slate-12 dark:text-m-slate-3 ",
         )
 
 
@@ -125,7 +125,7 @@ def h1_comp(text: str) -> rx.Component:
     return h_comp_common(
         text=text,
         heading="h1",
-        class_name="font-x-large lg:font-xx-large",
+        class_name="lg:text-5xl text-3xl font-[525]",
     )
 
 
@@ -134,7 +134,7 @@ def h1_comp_xd(text: str) -> rx.Component:
     return h_comp_common(
         text=text,
         heading="h1",
-        class_name="font-x-large lg:font-xx-large",
+        class_name="lg:text-5xl text-3xl font-[525]",
     )
 
 
@@ -144,7 +144,7 @@ def h2_comp(text: str) -> rx.Component:
         text=text,
         heading="h2",
         mt="8",
-        class_name="font-large lg:font-x-large",
+        class_name="lg:text-4xl text-2xl font-[525]",
     )
 
 
@@ -154,7 +154,7 @@ def h2_comp_xd(text: str) -> rx.Component:
         text=text,
         heading="h2",
         mt="8",
-        class_name="font-large lg:font-x-large",
+        class_name="lg:text-3xl text-2xl font-[525]",
     )
 
 
@@ -164,7 +164,7 @@ def h3_comp(text: str) -> rx.Component:
         text=text,
         heading="h3",
         mt="4",
-        class_name="font-large",
+        class_name="lg:text-2xl text-xl font-[525]",
     )
 
 
@@ -174,7 +174,7 @@ def h3_comp_xd(text: str) -> rx.Component:
         text=text,
         heading="h3",
         mt="4",
-        class_name="font-large",
+        class_name="lg:text-2xl text-lg font-[525]",
     )
 
 
@@ -184,7 +184,7 @@ def h4_comp(text: str) -> rx.Component:
         text=text,
         heading="h4",
         mt="2",
-        class_name="font-md-smbold",
+        class_name="lg:text-xl text-lg font-[525]",
     )
 
 
@@ -194,7 +194,7 @@ def h4_comp_xd(text: str) -> rx.Component:
         text=text,
         heading="h4",
         mt="2",
-        class_name="font-md-smbold",
+        class_name="lg:text-xl text-lg font-[525]",
     )
 
 

pcweb/pages/landing/views/products.py

@@ -35,17 +35,24 @@ def definition(title: str, *children) -> rx.Component:
 
 @rx.memo
 def text_comp(text: rx.Var[str]) -> rx.Component:
-    return rx.text(text, class_name="font-normal text-slate-12 mb-4 leading-7")
+    return rx.text(
+        text, class_name="font-[475] text-m-slate-8 dark:text-m-slate-6 mb-4 leading-7"
+    )
 
 
 @rx.memo
 def text_comp_2(text: rx.Var[str]) -> rx.Component:
-    return rx.text(text, class_name="font-normal text-slate-12 max-w-[80%] mb-10")
+    return rx.text(
+        text,
+        class_name="font-[475] text-m-slate-8 dark:text-m-slate-6 max-w-[80%] mb-10",
+    )
 
 
 @rx.memo
 def list_comp(text: rx.Var[str]) -> rx.Component:
-    return rx.list_item(text, class_name="font-normal text-slate-12 mb-4")
+    return rx.list_item(
+        text, class_name="font-[475] text-m-slate-8 dark:text-m-slate-6 mb-4"
+    )
 
 
 @rx.memo