blog posts ui

src/components/mdx/BlogPosts/BlogPosts.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import clsx from 'clsx'
+import styles from './style.module.scss'
+import { Button } from '@site/src/components/Button'
+
+type TProps = {
+  children: React.ReactNode
+}
+
+const BlogPost = () => (
+  <div className={clsx('card', styles.blogpost)}>
+    <h3 className={'sans'}>Decentralizing Storage for Web3</h3>
+    <p className={''}>
+      Throughout the Web 2.0 era of the Internet, the distributed systems
+      architecture adopted by large multinational technology corporations has
+      led to the centralization of control over user-generated content.
+    </p>
+    <div className={styles.blogpostMeta}>
+      <small className={'sans'}>by Leonardo Bautista-Gomez</small>
+      <small>
+        <time> - Jul 5, 2022</time>
+      </small>
+    </div>
+    <a>
+      <Button className={'button--secondary'}>Learn More</Button>
+    </a>
+  </div>
+)
+
+export const BlogPosts = ({ children }: TProps): JSX.Element => {
+  return (
+    <section className={styles.blogpostsWrapper}>
+      <div className={styles.blogposts}>
+        <BlogPost />
+        <BlogPost />
+      </div>
+    </section>
+  )
+}

src/components/mdx/BlogPosts/index.tsx

@@ -0,0 +1 @@
+export * from './BlogPosts'

src/components/mdx/BlogPosts/style.module.scss

@@ -0,0 +1,19 @@
+.blogpostsWrapper {
+  .blogposts {
+    .blogpost {
+      background: none;
+      //border: 1px solid var(--ifm-color-gray-200);
+      p {
+        color: var(--ifm-color-gray-500);
+      }
+
+      .blogpostMeta {
+        margin-bottom: calc(var(--ifm-leading) / 2);
+      }
+
+      + .blogpost {
+        margin-top: var(--ifm-leading);
+      }
+    }
+  }
+}

src/css/custom.scss

@@ -78,7 +78,7 @@
   --ifm-font-weight-base: var(--ifm-font-weight-normal);
 
   --ifm-h1-font-size: 4rem;
-  --ifm-h2-font-size: 3.5rem;
+  --ifm-h2-font-size: 2rem;
   --ifm-h3-font-size: 1.25rem;
   --ifm-h4-font-size: 1.15rem;
   --ifm-h5-font-size: 1rem;
@@ -211,7 +211,6 @@
 
 .sans {
   font-family: var(--lgs-font-family-secondary);
-  font-size: var(--ifm-font-size-secondary);
   line-height: var(--ifm-line-height-secondary);
 }