initial blogpost styling

src/components/pages/blogPost.js

@@ -3,7 +3,7 @@ import * as styles from "./blogPost.module.css"
 import Seo from "../seo"
 import { graphql } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
-import PortableText from "@sanity/block-content-to-react"
+import BlockContent from "@sanity/block-content-to-react"
 import urlBuilder from "@sanity/image-url"
 
 export const query = graphql`
@@ -15,7 +15,7 @@ export const query = graphql`
         name
         image {
           asset {
-            gatsbyImageData(width: 64, height: 64)
+            gatsbyImageData(width: 50, height: 50)
           }
         }
       }
@@ -26,36 +26,11 @@ export const query = graphql`
         }
       }
       excerpt
-      body {
-        children {
-          _key
-          _type
-          text
-          marks
-        }
-        _type
-        list
-        style
-      }
+      _rawBody(resolveReferences: { maxDepth: 10 })
     }
   }
 `
 
-const urlFor = source =>
-  urlBuilder({ projectId: "mmqlu667", dataset: "production" }).image(source)
-
-const serializer = {
-  types: {
-    mainImage: props => (
-      <figure>
-        <img src={urlFor(props.node.asset).width(600).url()} />
-
-        <figcaption>{props.node.caption}</figcaption>
-      </figure>
-    ),
-  },
-}
-
 const BlogPost = ({ data }) => {
   return (
     <>
@@ -66,28 +41,28 @@ const BlogPost = ({ data }) => {
         author={data.sanityPost.author.name}
       />
       <div className={styles.container}>
-        <article>
-          <header>
-            <p className={styles.published}>{data.sanityPost._createdAt}</p>
+        <article className={styles.article}>
+          <header className={styles.header}>
             <GatsbyImage
               image={data.sanityPost.mainImage.asset.gatsbyImageData}
               className={styles.headerImage}
             />
-            <h1>{data.sanityPost.title}</h1>
-            <p>{data.sanityPost.excerpt}</p>
+            <h1 className={styles.title}>{data.sanityPost.title}</h1>
+            <p className={styles.excerpt}>{data.sanityPost.excerpt}</p>
             <div className={styles.author}>
               <GatsbyImage
                 image={data.sanityPost.author.image.asset.gatsbyImageData}
               />
-              <p>{data.sanityPost.author.name}</p>
+              <div className={styles.authorNameSection}>
+                <p>{data.sanityPost.author.name}</p>
+                <p>{data.sanityPost._createdAt}</p>
+              </div>
             </div>
           </header>
-          <div className={styles.content}>
-            <PortableText
-              blocks={data.sanityPost.body}
-              serializer={serializer}
-            />
-          </div>
+          <BlockContent
+            className={styles.content}
+            blocks={data.sanityPost._rawBody}
+          />
         </article>
       </div>
     </>

src/components/pages/blogPost.module.css

@@ -5,31 +5,29 @@
 .article {
   display: grid;
   place-items: center;
-  padding: 3rem 1rem;
+  padding: 1rem 0;
 }
-.header {
-  border-bottom: var(--blog-header-divider);
-  padding-bottom: 1rem;
-  margin-bottom: 3rem;
+.header > * {
+  padding: 0 1rem;
 }
-.headerImage {
-  max-height: 75vh;
-  margin: 1rem 0;
-  max-width: 1280px;
-}
-h1 {
-  font-size: 3rem;
-  line-height: 1;
-  padding: 1.5rem 0;
-}
-.content {
-  max-width: 60ch;
-}
-
 .published {
   font-weight: 100;
 }
-
+.headerImage {
+  padding: 0;
+  margin: 1rem 0;
+  max-width: 85ch;
+  max-height: 80vh;
+}
+.title {
+  font-size: 3rem;
+  line-height: 1;
+  margin: 1.5rem 0;
+}
+.excerpt {
+  max-width: none;
+  margin-bottom: 1rem;
+}
 .author {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -37,7 +35,51 @@ h1 {
   gap: 0.5em;
   font-weight: 100;
 }
+.authorNameSection {
+  display: flex;
+  flex-direction: column;
+}
 .author img {
   border-radius: 50%;
   border: 2px solid white;
 }
+.article {
+  display: grid;
+  gap: 2em;
+}
+.content {
+  display: grid;
+  gap: 1rem;
+  max-width: 60ch;
+  padding: 0 1rem;
+}
+
+/* Block content styling */
+.content h1,
+h2,
+h3,
+h4 {
+  padding-inline-start: 1rem;
+  border-inline-start: 8px solid var(--main-color);
+}
+.content blockquote {
+  color: rgb(225, 225, 225);
+  font-weight: 100;
+  padding-inline-start: 2rem;
+  border-inline-start: 2px solid var(--link-color-hover);
+}
+
+/* .content blockquote::before {
+  content: '"';
+  font-size: 3rem;
+}
+.content blockquote::after {
+  content: '"';
+  font-size: 3rem;
+} */
+
+@media (min-width: 60em) {
+  .content {
+    padding: 0;
+  }
+}