fix(gatsby-theme-minimal-blog): Add two variants (#541)

LekoArts · Nov 12, 2020 · 99de145 · 99de145
1 parent 300d8f7
commit 99de145
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/khaki-knives-do.md b/.changeset/khaki-knives-do.md
@@ -0,0 +1,5 @@
+---
+"@lekoarts/gatsby-theme-minimal-blog": patch
+---
+
+Adding two variants called "section_hero" and "section_bottom" to the homepage component so that both sections can be styled via Theme UI config directly, e.g. when the hero.mdx file is empty the surrounding section can be hidden via CSS.
diff --git a/themes/gatsby-theme-minimal-blog/src/components/homepage.tsx b/themes/gatsby-theme-minimal-blog/src/components/homepage.tsx
@@ -37,14 +37,14 @@ const Homepage = ({ posts }: PostsProps) => {
   return (
     <Layout>
       <h1 sx={visuallyHidden}>{siteTitle}</h1>
-      <section sx={{ mb: [5, 6, 7], p: { fontSize: [1, 2, 3], mt: 2 } }}>
+      <section sx={{ mb: [5, 6, 7], p: { fontSize: [1, 2, 3], mt: 2 }, variant: `section_hero` }}>
         <Hero />
       </section>
       <Title text="Latest Posts">
         <Link to={replaceSlashes(`/${basePath}/${blogPath}`)}>Read all posts</Link>
       </Title>
       <Listing posts={posts} showTags={false} />
-      <List>
+      <List sx={{ variant: `section_bottom` }}>
         <Bottom />
       </List>
     </Layout>