#215 add podcast title, subtitle and summary

src/containers/Podcast/Podcast.css

@@ -1 +1,11 @@
-/* .imprint {} */
+.podcast__header {
+  margin-top: 5rem;
+  position: relative;
+}
+
+.podcast__illustration {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  width: 400px;
+}

src/containers/Podcast/Podcast.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react'
 
 import './Podcast.css'
+import HeaderIllustration from '../../assets/images/podcast-header.svg'
 
 const Podcast = () => {
   const [error, setError] = useState(null)
   const [isLoaded, setIsLoaded] = useState(false)
-  const [items, setItems] = useState([])
+  const [podcast, setPodcast] = useState([])
 
   useEffect(() => {
     document.title = 'Podcast – podcasterinnen.org'
@@ -14,7 +15,8 @@ const Podcast = () => {
       .then(
         (result) => {
           setIsLoaded(true)
-          setItems(result)
+          console.log(result)
+          setPodcast(result)
         },
         // Note: it's important to handle errors here
         // instead of a catch() block so that we don't swallow
@@ -28,6 +30,19 @@ const Podcast = () => {
 
   return (
     <section className="podcast main__section">
+      { podcast ?
+        <div className="podcast__header">
+          <h1 className="title">
+            <img
+              className="podcast__illustration"
+              src={HeaderIllustration}
+            />
+            {podcast.title}
+          </h1>
+          <h2 className="title--small">{podcast.subtitle}</h2>
+          <h2 className="subtitle">{podcast.summary}</h2>
+        </div> : null
+      }
     </section>
   )
 }

src/index.css

@@ -336,4 +336,8 @@ img {
 
 .main__section--wide {
   max-width: 1100px;
+}
+
+.main__section--max {
+  max-width: 100vw;
 }