Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Change homepage tagline #9

Merged
merged 4 commits into from
Nov 29, 2023
Merged

Docs: Change homepage tagline #9

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0013772
Docs: Change homepage tagline
nmn Nov 28, 2023
b79d426
Website: Design tweaks
nmn Nov 29, 2023
5ed6bc3
Cleanup ZStack
nmn Nov 29, 2023
3c57b1a
Website: Change Bento layout to a list with more details (#11)
nmn Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/docs/docs/learn/05-styling-ui/01-defining-styles.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ styles in React DOM, or styles in React Native.

## Constraints

Since `StyleX` depends on ahead-of-time compilation, it is important for all
Since StyleX depends on ahead-of-time compilation, it is important for all
your styles to be statically analyzable. This means that every "Raw Style
Object" must only contain:

Expand Down
60 changes: 43 additions & 17 deletions apps/docs/src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import StylexAnimatedLogo from '@site/components/StylexAnimatedLogo';
import CodeBlock from '@site/components/CodeBlock';
import Link from '@docusaurus/Link';
import FeaturePile from '../../components/FeaturePile';
import ZStack from '../../components/ZStack';

const STEP_CONFIGURE = `import plugin from '@stylexjs/rollup-plugin';

Expand Down Expand Up @@ -82,24 +83,49 @@ export default function Home() {
<StylexAnimatedLogo style={styles.logo} />
</h1>
<h2 {...stylex.props(styles.subtitle)}>
<span
{...stylex.props([
styles.subtitleHighlight,
styles.highlightBlue,
])}>
Predictable
The
<span {...stylex.props([styles.subtitleHighlight])}>
{' '}
Styling System{' '}
</span>{' '}
& <span {...stylex.props(styles.subtitleHighlight)}>scalable</span>{' '}
styling
<br /> for{' '}
<span
{...stylex.props([
styles.subtitleHighlight,
styles.highlightPrimary,
])}>
ambitious
</span>{' '}
user-interfaces.
that powers
<br />
<ZStack>
{[
<span
{...stylex.props([
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should make a component to avoid repetition of the span with styles

styles.subtitleHighlight,
styles.highlightBlue,
])}>
{' '}
Facebook.com{' '}
</span>,
<span
{...stylex.props([
styles.subtitleHighlight,
styles.highlightBlue,
])}>
{' '}
Instagram.com{' '}
</span>,
<span
{...stylex.props([
styles.subtitleHighlight,
styles.highlightBlue,
])}>
{' '}
WhatsApp.com{' '}
</span>,
<span
{...stylex.props([
styles.subtitleHighlight,
styles.highlightBlue,
])}>
{' '}
Threads.net{' '}
</span>,
]}
</ZStack>
</h2>
<section {...stylex.props(styles.ctaSection)}>
<Link {...stylex.props(styles.cta)} to="/docs/learn/installation/">
Expand Down
Loading