diff --git a/pcweb/components/numbers_pattern.py b/pcweb/components/numbers_pattern.py index 0ce58cd9e..b1cf1151b 100644 --- a/pcweb/components/numbers_pattern.py +++ b/pcweb/components/numbers_pattern.py @@ -39,9 +39,8 @@ def numbers_pattern( class_name: Additional CSS classes """ position_class = "left-0" if side == "left" else "right-0" - light_dark_path = rx.color_mode_cond("light", "dark") - - src = f"/landing/patterns/{light_dark_path}/numbers-pattern.avif" + light_src = "/landing/patterns/light/numbers-pattern.avif" + dark_src = "/landing/patterns/dark/numbers-pattern.avif" # Determine if we need to flip: right side XOR reverse # - right side normally flips @@ -49,9 +48,11 @@ def numbers_pattern( is_flipped = (side == "right") != reverse # Background image style - image_style = {"opacity": rx.color_mode_cond("1", "0.3")} + light_image_style = {"opacity": "1"} + dark_image_style = {"opacity": "0.3"} if is_flipped: - image_style |= {"transform": "scaleX(-1)"} + light_image_style |= {"transform": "scaleX(-1)"} + dark_image_style |= {"transform": "scaleX(-1)"} # Gradient masks vertical_gradient = "linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, #000000 12%, #000000 88%, rgba(0, 0, 0, 0) 100%)" @@ -70,25 +71,44 @@ def numbers_pattern( container_mask_style["transform"] = "scaleX(-1)" # Image mask style for the ellipses layer - ellipses_mask_style = { - "mask_image": f"url({src})", + ellipses_mask_light_style = { + "mask_image": f"url({light_src})", + "mask_size": "cover", + "mask_repeat": "no-repeat", + "mask_position": "center", + "webkit_mask_image": f"url({light_src})", + "webkit_mask_size": "cover", + "webkit_mask_repeat": "no-repeat", + "webkit_mask_position": "center", + } + ellipses_mask_dark_style = { + "mask_image": f"url({dark_src})", "mask_size": "cover", "mask_repeat": "no-repeat", "mask_position": "center", - "webkit_mask_image": f"url({src})", + "webkit_mask_image": f"url({dark_src})", "webkit_mask_size": "cover", "webkit_mask_repeat": "no-repeat", "webkit_mask_position": "center", } if is_flipped: - ellipses_mask_style["transform"] = "scaleX(-1)" + ellipses_mask_light_style["transform"] = "scaleX(-1)" + ellipses_mask_dark_style["transform"] = "scaleX(-1)" return rx.el.div( # Layer 1: Background pattern image rx.image( - src=src, - class_name="pointer-events-none w-full h-full absolute inset-0 object-cover", - style=image_style, + src=light_src, + class_name="pointer-events-none w-full h-full absolute inset-0 object-cover dark:hidden", + style=light_image_style, + alt="Numbers pattern", + loading="eager", + custom_attrs={"fetchPriority": "high"}, + ), + rx.image( + src=dark_src, + class_name="pointer-events-none w-full h-full absolute inset-0 object-cover hidden dark:block", + style=dark_image_style, alt="Numbers pattern", loading="eager", custom_attrs={"fetchPriority": "high"}, @@ -96,8 +116,13 @@ def numbers_pattern( # Layer 2: Masked animated ellipses rx.el.div( _ellipses(side=side, reverse_animation=reverse), - class_name="absolute inset-0 w-full h-full max-lg:hidden", - style=ellipses_mask_style, + class_name="absolute inset-0 w-full h-full max-lg:hidden dark:hidden", + style=ellipses_mask_light_style, + ), + rx.el.div( + _ellipses(side=side, reverse_animation=reverse), + class_name="absolute inset-0 w-full h-full max-lg:hidden hidden dark:block", + style=ellipses_mask_dark_style, ), class_name=ui.cn( f"absolute {position_class} pointer-events-none z-[-1] lg:w-[234px] w-[180px] h-full bottom-0", diff --git a/pcweb/pcweb.py b/pcweb/pcweb.py index 1ee0a6223..ba2594a8d 100644 --- a/pcweb/pcweb.py +++ b/pcweb/pcweb.py @@ -44,7 +44,7 @@ cross_origin="", ), rx.el.link( - href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Source+Code+Pro:wght@400;500&family=JetBrains+Mono:wght@400;500;600;700&display=swap", + href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap", rel="stylesheet", ), ], diff --git a/pcweb/styles/fonts.py b/pcweb/styles/fonts.py index 383d3e744..07952f5a8 100644 --- a/pcweb/styles/fonts.py +++ b/pcweb/styles/fonts.py @@ -85,7 +85,7 @@ } code = { - "font-family": "Source Code Pro", + "font-family": "JetBrains Mono", "font-size": "14px", "font-style": "normal", "font-weight": "400", diff --git a/pcweb/templates/docpage/blocks/code.py b/pcweb/templates/docpage/blocks/code.py index 348fd4bc8..68d56fd19 100644 --- a/pcweb/templates/docpage/blocks/code.py +++ b/pcweb/templates/docpage/blocks/code.py @@ -70,7 +70,7 @@ def doccmdoutput( } }, style=fonts.code, - font_family="Source Code Pro", + font_family="JetBrains Mono", width="100%", ), rx._x.code_block( @@ -86,7 +86,7 @@ def doccmdoutput( } }, style=fonts.code, - font_family="Source Code Pro", + font_family="JetBrains Mono", width="100%", ), padding_y="1em", diff --git a/pcweb/views/footer.py b/pcweb/views/footer.py index b90944a49..4a4e4b173 100644 --- a/pcweb/views/footer.py +++ b/pcweb/views/footer.py @@ -141,11 +141,13 @@ def ph_1() -> rx.Component: src="/logos/dark/ph_1.svg", class_name="hidden dark:block h-[40px] w-fit", alt="1st product of the day logo", + loading="lazy", ), rx.image( src="/logos/light/ph_1.svg", class_name="dark:hidden block h-[40px] w-fit", alt="1st product of the day logo", + loading="lazy", ), )