initial blog overview site

src/pages/blog.js

@@ -1,12 +1,13 @@
 import * as React from "react"
-import "../index.css"
-
-import Layout from "../components/layout"
-import Seo from "../components/seo"
+import * as styles from "./blog.module.css"
 
 import { graphql, Link } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
 
+import Layout from "../components/layout"
+import Seo from "../components/seo"
+import Back from "../components/items/back"
+
 export const query = graphql`
   query {
     allSanityPost {
@@ -23,10 +24,15 @@ export const query = graphql`
             name
             image {
               asset {
-                gatsbyImageData
+                gatsbyImageData(width: 40, height: 40)
               }
             }
           }
+          mainImage {
+            asset {
+              gatsbyImageData(aspectRatio: 1.618)
+            }
+          }
         }
       }
     }
@@ -34,21 +40,38 @@ export const query = graphql`
 `
 const BlogPage = ({ data }) => (
   <Layout>
-    <Seo title="Blog" />
-    <div className="container">
-      {data.allSanityPost.edges.map(post => (
-        <article>
-          <p>{post.node._createdAt}</p>
-          <Link to={post.node.slug.current}>
-            <h2>{post.node.title}</h2>
+    <Seo
+      title="Blog"
+      description="Nyheter om hva som skjer i foreningen og skriverier om alt og ingenting"
+    />
+    <div className={styles.container}>
+      <div className={styles.back}>
+        <Back />
+      </div>
+      <div className={styles.articleContainer}>
+        {data.allSanityPost.edges.map(post => (
+          <Link to={post.node.slug.current} className={styles.link}>
+            <article className={styles.card}>
+              <GatsbyImage
+                image={post.node.mainImage.asset.gatsbyImageData}
+                className={styles.headerImage}
+              />
+              <div className={styles.cardContent}>
+                <h2 className={styles.header}>{post.node.title}</h2>
+                <p className={styles.published}>{post.node._createdAt}</p>
+                <div className={styles.author}>
+                  <GatsbyImage
+                    className={`circular ${styles.authorImage}`}
+                    image={post.node.author.image.asset.gatsbyImageData}
+                  />
+                  <p>{post.node.author.name}</p>
+                </div>
+                <p>{post.node.excerpt}</p>
+              </div>
+            </article>
           </Link>
-          <div>
-            <GatsbyImage image={post.node.author.image.asset.gatsbyImageData} />
-            <p>{post.node.author.name}</p>
-          </div>
-          <p>{post.node.excerpt}</p>
-        </article>
-      ))}
+        ))}
+      </div>
     </div>
   </Layout>
 )

src/pages/blog.module.css

@@ -0,0 +1,66 @@
+.container {
+  display: grid;
+  gap: 2rem;
+  padding: 1.25rem;
+}
+.back {
+  justify-self: start;
+}
+.articleContainer {
+  display: grid;
+  grid-template-columns: auto;
+  place-items: center;
+  align-items: stretch;
+  gap: 3rem;
+}
+.card {
+  display: grid;
+  max-width: 50ch;
+  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
+}
+.headerImage {
+  max-height: 50vh;
+}
+
+.cardContent {
+  background-color: var(--secondary-background-color);
+  padding: 2rem;
+}
+.published {
+  font-weight: 100;
+}
+.header {
+  font-size: 2.25rem;
+}
+
+.author {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 0.5em;
+  font-weight: 100;
+  margin-block: 1rem;
+}
+.authorImage {
+  border: 2px solid white;
+}
+
+.link {
+  color: white;
+}
+.link h2 {
+  text-decoration: underline;
+  text-decoration-color: var(--link-color);
+}
+.link:hover h2 {
+  text-decoration-color: var(--link-color-hover);
+}
+
+@media (min-width: 60em) {
+  .container {
+    padding: 2rem;
+  }
+  .articleContainer {
+    grid-template-columns: auto auto;
+  }
+}