Skip to content

Commit

Permalink
docs: update CMS examples to use the new tw grid gaps (#34917)
Browse files Browse the repository at this point in the history
  • Loading branch information
stipsan committed Mar 1, 2022
1 parent 57702cb commit 6b37d6c
Show file tree
Hide file tree
Showing 31 changed files with 31 additions and 31 deletions.
2 changes: 1 addition & 1 deletion examples/cms-agilitycms/components/hero-post.js
Expand Up @@ -20,7 +20,7 @@ export default function HeroPost({
slug={slug}
/>
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-agilitycms/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ title, posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
{title}
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-builder-io/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage title={title} slug={slug} url={coverImage} />
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-builder-io/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.data.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-buttercms/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage title={title} url={coverImage} slug={slug} />
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-buttercms/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-contentful/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage title={title} slug={slug} url={coverImage.url} />
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-contentful/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-cosmic/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage title={title} url={coverImage.imgix_url} slug={slug} />
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-cosmic/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-datocms/components/hero-post.js
Expand Up @@ -20,7 +20,7 @@ export default function HeroPost({
slug={slug}
/>
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-datocms/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-drupal/components/hero-post.js
Expand Up @@ -18,7 +18,7 @@ export default function HeroPost({
<CoverImage title={title} coverImage={coverImage} slug={slug} />
)}
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={slug}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-ghost/components/hero-post.js
Expand Up @@ -22,7 +22,7 @@ export default function HeroPost({
height={1216}
/>
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-ghost/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-graphcms/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage slug={slug} title={title} url={coverImage.url} />
</div>
<div className="mb-20 md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 md:mb-28">
<div className="mb-20 md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 md:mb-28">
<div>
<h3 className="mb-4 text-4xl leading-tight lg:text-6xl">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-kontent/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage title={title} src={coverImage} slug={slug} />
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-kontent/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-prepr/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage slug={slug} title={title} url={coverImage} />
</div>
<div className="mb-20 md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 md:mb-28">
<div className="mb-20 md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 md:mb-28">
<div>
<h3 className="mb-4 text-4xl leading-tight lg:text-6xl">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-prismic/components/hero-post.js
Expand Up @@ -21,7 +21,7 @@ export default function HeroPost({
url={coverImage.url}
/>
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-prismic/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map(({ node }) => (
<PostPreview
key={node._meta.uid}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-sanity/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage slug={slug} title={title} image={coverImage} />
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-sanity/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-storyblok/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage title={title} url={coverImage} slug={slug} />
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-storyblok/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-strapi/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage title={title} url={coverImage.url} slug={slug} />
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-strapi/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-takeshape/components/hero-post.js
Expand Up @@ -16,7 +16,7 @@ export default function HeroPost({
<div className="mb-8 md:mb-16">
<CoverImage title={title} coverImage={coverImage} slug={slug} />
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-takeshape/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map((post) => (
<PostPreview
key={post.slug}
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-wordpress/components/hero-post.js
Expand Up @@ -18,7 +18,7 @@ export default function HeroPost({
<CoverImage title={title} coverImage={coverImage} slug={slug} />
)}
</div>
<div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
<div className="md:grid md:grid-cols-2 md:gap-x-16 lg:gap-x-8 mb-20 md:mb-28">
<div>
<h3 className="mb-4 text-4xl lg:text-6xl leading-tight">
<Link href={`/posts/${slug}`}>
Expand Down
2 changes: 1 addition & 1 deletion examples/cms-wordpress/components/more-stories.js
Expand Up @@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
<h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
More Stories
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
{posts.map(({ node }) => (
<PostPreview
key={node.slug}
Expand Down

0 comments on commit 6b37d6c

Please sign in to comment.