Skip to content

Commit 37d406d

Browse files
matthewlipskimatthewlipski
authored
docs: Mobile fixes (TypeCellOS#626)
* Fixed home page mobile styles * Fixed example import * Changed how mobile is detected
1 parent 1d8393c commit 37d406d

9 files changed

Lines changed: 47 additions & 14 deletions

File tree

‎docs/components/pages/landing/gradients.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,20 @@ section {
1111
--bg-color: #000000;
1212
}
1313

14-
.editor-glow {
14+
.demo-glow {
1515
--glow-opacity: 0.4;
16+
display: block;
17+
}
18+
19+
.text-glow {
20+
--glow-opacity: 0.2;
21+
display: none;
22+
@media only screen and (hover: none) and (pointer: coarse) {
23+
display: block; /* disable on mobile */
24+
}
25+
}
26+
27+
.hero-glow {
1628
background: conic-gradient(
1729
from 33deg at 50% 50%,
1830
hsla(var(--glow-blue), var(--glow-opacity)),

‎docs/components/pages/landing/hero/Demo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ const DemoEditor = dynamic(
3131

3232
export function Demo(props: { theme?: "light" | "dark" }) {
3333
return (
34-
<div className="hero relative h-[36rem] w-full shrink-0 grow-0 rounded-lg xl:w-[584px]">
35-
<div className="editor-glow absolute z-10 h-full w-full" />
34+
<div className="hero-demo relative h-[36rem] w-full shrink-0 grow-0 rounded-lg sm:block xl:w-[584px]">
35+
<div className="hero-glow demo-glow absolute z-10 h-full w-full" />
3636
<div className="relative z-20 h-full w-full rounded-lg bg-white dark:bg-[#202020]">
3737
<DemoEditor theme={props.theme} />
3838
</div>

‎docs/components/pages/landing/hero/DemoEditor.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import { useCallback, useMemo, useState } from "react";
66
import YPartyKitProvider from "y-partykit/provider";
77
import * as Y from "yjs";
88

9-
import "./styles.css";
10-
119
const colors = [
1210
"#958DF1",
1311
"#F98181",

‎docs/components/pages/landing/hero/Hero.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { Text } from "@/components/pages/landing/hero/Text";
44
import { Demo } from "@/components/pages/landing/hero/Demo";
55
import { FadeIn } from "@/components/pages/landing/shared/FadeIn";
66

7+
import "./styles.css";
8+
79
export function Hero() {
810
const { theme } = useTheme();
911

‎docs/components/pages/landing/hero/Text.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ import { CTAButton } from "@/components/pages/landing/shared/CTAButton";
66

77
export function Text() {
88
return (
9-
<div className="flex h-fit flex-col items-center justify-center gap-6 text-center xl:w-[584px] xl:items-start xl:text-left">
10-
<HeroText h1>
9+
<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">
10+
<div className="hero-glow text-glow absolute block h-full w-full sm:hidden" />
11+
<HeroText h1 className={"z-10"}>
1112
The open source
1213
<br />
1314
<strong>Block-Based</strong>
1415
<br />
1516
rich text editor
1617
</HeroText>
17-
<SectionSubtext>
18+
<SectionSubtext className={"z-10"}>
1819
A beautiful text editor that just works. Easily add an editor to your
1920
app that users will love. Customize it with your own functionality like
2021
custom blocks or AI tooling.

‎docs/components/pages/landing/hero/styles.css‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
1-
.hero .bn-container, .hero .bn-editor {
1+
.hero-demo {
2+
@media only screen and (hover: none) and (pointer: coarse) {
3+
display: none; /* disable on mobile */
4+
}
5+
}
6+
7+
.hero-demo .bn-container, .hero .bn-editor {
28
height: 100%
39
}
410

5-
.hero .bn-editor {
11+
.hero-demo .bn-editor {
612
overflow: auto;
713
min-height: 100%;
814
/* Removes focus outline */
915
box-shadow: none !important;
1016
padding-block: 1rem
1117
}
1218

13-
.hero a {
19+
.hero-demo a {
1420
color: revert;
1521
text-decoration: revert;
1622
}

‎docs/components/pages/landing/shared/Headings.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,19 @@ export function SectionSubHeader({ children }: { children: React.ReactNode }) {
4848
);
4949
}
5050

51-
export function SectionSubtext({ children }: { children: React.ReactNode }) {
51+
export function SectionSubtext({
52+
children,
53+
className,
54+
}: {
55+
children: React.ReactNode;
56+
className?: string;
57+
}) {
5258
return (
5359
<p
54-
className={`font-space-grotesk text-lg leading-snug text-[#00000080] dark:text-[#FFFFFFB2] md:text-xl`}>
60+
className={cn(
61+
"font-space-grotesk text-lg leading-snug text-[#00000080] dark:text-[#FFFFFFB2] md:text-xl",
62+
className,
63+
)}>
5564
{children}
5665
</p>
5766
);

‎docs/components/pages/landing/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
}
99

1010
.nextra-nav-container {
11+
z-index: 40;
12+
}
13+
14+
.nextra-sidebar-container {
1115
z-index: 30;
1216
}
1317

‎examples/01-basic/04-selection-blocks/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Block } from "@blocknote/core";
2+
import "@blocknote/core/fonts/inter.css";
23
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
3-
import "../../../packages/react/dist/style.css";
4+
import "@blocknote/react/style.css";
45
import { useState } from "react";
56

67
import "./styles.css";

0 commit comments

Comments
 (0)