diff --git a/README.md b/README.md index f25d54b3..02a3ae54 100644 --- a/README.md +++ b/README.md @@ -94,4 +94,4 @@ of the project/ ### License -stylex is [MIT licensed](./LICENSE). +StyleX is [MIT licensed](./LICENSE). diff --git a/apps/docs/src/pages/index.js b/apps/docs/src/pages/index.js index 093effd5..cae764a5 100644 --- a/apps/docs/src/pages/index.js +++ b/apps/docs/src/pages/index.js @@ -132,6 +132,8 @@ export default function Home() { ); } +const CTA_BREAK = '@media (max-width: 360px)'; + const styles = stylex.create({ main: { flexGrow: 1, @@ -181,11 +183,23 @@ const styles = stylex.create({ opacity: 0.7, }, ctaSection: { + alignItems: 'center', display: 'flex', gap: '1rem', - margin: '4rem', + justifyContent: 'center', + marginBlock: { + default: '4rem', + [CTA_BREAK]: '2rem', + }, + flexDirection: { + default: 'row', + [CTA_BREAK]: 'column', + }, }, cta: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', borderRadius: 8, color: { default: 'var(--fg1)', @@ -195,6 +209,10 @@ const styles = stylex.create({ default: 'none', ':hover': 'none', }, + width: { + default: 'null', + [CTA_BREAK]: '100%', + }, backgroundColor: 'hsl(var(--pink-h), var(--pink-s), var(--pink-l))', paddingBlock: '0.75rem', paddingInline: '2rem',