TypeCellOS · matthewlipski · Mar 11, 2024 · Mar 7, 2024 · Mar 7, 2024 · Mar 8, 2024
diff --git a/docs/components/pages/landing/gradients.css b/docs/components/pages/landing/gradients.css
@@ -11,8 +11,20 @@ section {
   --bg-color: #000000;
 }
 
-.editor-glow {
+.demo-glow {
   --glow-opacity: 0.4;
+  display: block;
+}
+
+.text-glow {
+  --glow-opacity: 0.2;
+  display: none;
+  @media only screen and (hover: none) and (pointer: coarse) {
+    display: block; /* disable on mobile */
+  }
+}
+
+.hero-glow {
   background: conic-gradient(
     from 33deg at 50% 50%,
     hsla(var(--glow-blue), var(--glow-opacity)),

diff --git a/docs/components/pages/landing/hero/Demo.tsx b/docs/components/pages/landing/hero/Demo.tsx
@@ -31,8 +31,8 @@ const DemoEditor = dynamic(
 
 export function Demo(props: { theme?: "light" | "dark" }) {
   return (
-    <div className="hero relative h-[36rem] w-full shrink-0 grow-0 rounded-lg xl:w-[584px]">
-      <div className="editor-glow absolute z-10 h-full w-full" />
+    <div className="hero-demo relative h-[36rem] w-full shrink-0 grow-0 rounded-lg sm:block xl:w-[584px]">
+      <div className="hero-glow demo-glow absolute z-10 h-full w-full" />
       <div className="relative z-20 h-full w-full rounded-lg bg-white dark:bg-[#202020]">
         <DemoEditor theme={props.theme} />
       </div>

diff --git a/docs/components/pages/landing/hero/DemoEditor.tsx b/docs/components/pages/landing/hero/DemoEditor.tsx
@@ -6,8 +6,6 @@ import { useCallback, useMemo, useState } from "react";
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";
 
-import "./styles.css";
-
 const colors = [
   "#958DF1",
   "#F98181",

diff --git a/docs/components/pages/landing/hero/Hero.tsx b/docs/components/pages/landing/hero/Hero.tsx
@@ -4,6 +4,8 @@ import { Text } from "@/components/pages/landing/hero/Text";
 import { Demo } from "@/components/pages/landing/hero/Demo";
 import { FadeIn } from "@/components/pages/landing/shared/FadeIn";
 
+import "./styles.css";
+
 export function Hero() {
   const { theme } = useTheme();
 

diff --git a/docs/components/pages/landing/hero/Text.tsx b/docs/components/pages/landing/hero/Text.tsx
@@ -6,15 +6,16 @@ import { CTAButton } from "@/components/pages/landing/shared/CTAButton";
 
 export function Text() {
   return (
-    <div className="flex h-fit flex-col items-center justify-center gap-6 text-center xl:w-[584px] xl:items-start xl:text-left">
-      <HeroText h1>
+    <div className="relative flex h-fit flex-col items-center justify-center gap-6 text-center xl:w-[584px] xl:items-start xl:text-left">
+      <div className="hero-glow text-glow absolute block h-full w-full sm:hidden" />
+      <HeroText h1 className={"z-10"}>
         The open source
         <br />
         <strong>Block-Based</strong>
         <br />
         rich text editor
       </HeroText>
-      <SectionSubtext>
+      <SectionSubtext className={"z-10"}>
         A beautiful text editor that just works. Easily add an editor to your
         app that users will love. Customize it with your own functionality like
         custom blocks or AI tooling.

diff --git a/docs/components/pages/landing/hero/styles.css b/docs/components/pages/landing/hero/styles.css
@@ -1,16 +1,22 @@
-.hero .bn-container, .hero .bn-editor {
+.hero-demo {
+    @media only screen and (hover: none) and (pointer: coarse) {
+        display: none; /* disable on mobile */
+    }
+}
+
+.hero-demo .bn-container, .hero .bn-editor {
     height: 100%
 }
 
-.hero .bn-editor {
+.hero-demo .bn-editor {
     overflow: auto;
     min-height: 100%;
     /* Removes focus outline */
     box-shadow: none !important;
     padding-block: 1rem
 }
 
-.hero a {
+.hero-demo a {
     color: revert;
     text-decoration: revert;
 }
diff --git a/docs/components/pages/landing/shared/Headings.tsx b/docs/components/pages/landing/shared/Headings.tsx
@@ -48,10 +48,19 @@ export function SectionSubHeader({ children }: { children: React.ReactNode }) {
   );
 }
 
-export function SectionSubtext({ children }: { children: React.ReactNode }) {
+export function SectionSubtext({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
     <p
-      className={`font-space-grotesk text-lg leading-snug text-[#00000080] dark:text-[#FFFFFFB2] md:text-xl`}>
+      className={cn(
+        "font-space-grotesk text-lg leading-snug text-[#00000080] dark:text-[#FFFFFFB2] md:text-xl",
+        className,
+      )}>
       {children}
     </p>
   );

diff --git a/docs/components/pages/landing/styles.css b/docs/components/pages/landing/styles.css
@@ -8,6 +8,10 @@
 }
 
 .nextra-nav-container {
+    z-index: 40;
+}
+
+.nextra-sidebar-container {
     z-index: 30;
 }
 

diff --git a/examples/01-basic/04-selection-blocks/App.tsx b/examples/01-basic/04-selection-blocks/App.tsx
@@ -1,6 +1,7 @@
 import { Block } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
-import "../../../packages/react/dist/style.css";
+import "@blocknote/react/style.css";
 import { useState } from "react";
 
 import "./styles.css";