Upgrade post and header layout

Author: jerolan

assets/screen.png

@@ -1,21 +1,21 @@
 import React from 'react';
 import Link from 'gatsby-link';
 
-import LogoPNG from '../../assets/logo.png';
-
 import styles from './Header.module.css';
 
 import { ThemeConsumer } from '../ThemeProvider';
-import Image from '../Image';
+import Grid from '../Grid';
+import Row from '../Row';
+import Col from '../Col';
 
-export function HeaderLink(props) {
+export function HeaderExternalLink(props) {
   return (
     <ThemeConsumer>
       {theme => (
         <a
           {...props}
           style={{ color: theme.Blue }}
-          className={styles.HeaderLink}
+          className={styles.HeaderExternalLink}
         >
           {props.children}
         </a>
@@ -28,38 +28,40 @@ export default function Header() {
   return (
     <ThemeConsumer>
       {theme => (
-        <header style={{ backgroundColor: theme.Darker }}>
-          <div className={styles.Header}>
-            <Link
-              to="/"
-              style={{ textDecoration: 'none', color: theme.Yellow }}
-            >
-              <div className={styles.HeaderLogoGroup}>
-                <Image
-                  style={{ maxHeight: 32 }}
-                  src={LogoPNG}
-                  alt="Javascript Mérida"
-                />
-                <p style={{ fontWeight: 'bold' }} className={styles.HeaderLink}>
-                  Away from Javascript
-                </p>
-              </div>
-            </Link>
-            <nav>
-              <HeaderLink href="https://rss.simplecast.com/podcasts/10278/rss">
-                RSS
-              </HeaderLink>
-              <HeaderLink href="https://open.spotify.com/show/2lFTjo5kc498PWOOg0fvum?si=4g0U4s43SSqu8ifdaKFR3A">
-                Spotify
-              </HeaderLink>
-              <HeaderLink href="https://www.google.com/podcasts?feed=aHR0cHM6Ly9yc3Muc2ltcGxlY2FzdC5jb20vcG9kY2FzdHMvMTAyNzgvcnNz">
-                Google Podcast
-              </HeaderLink>
-              <HeaderLink href="https://itunes.apple.com/mx/podcast/away-from-javascript/id1452959831?l=en&mt=2">
-                iTunes
-              </HeaderLink>
-            </nav>
-          </div>
+        <header className={styles.Header}>
+          <Grid>
+            <Row center="xs">
+              <Col xs md={8}>
+                <Link
+                  to="/"
+                  style={{ textDecoration: 'none', color: theme.Darker }}
+                >
+                  <div className={styles.HeaderLink}>
+                    <h1 style={{ fontWeight: 'bold' }}>Away from Javascript</h1>
+                  </div>
+                </Link>
+              </Col>
+            </Row>
+
+            <Row center="xs">
+              <Col xs md={8}>
+                <nav>
+                  <HeaderExternalLink href="https://rss.simplecast.com/podcasts/10278/rss">
+                    RSS
+                  </HeaderExternalLink>
+                  <HeaderExternalLink href="https://open.spotify.com/show/2lFTjo5kc498PWOOg0fvum?si=4g0U4s43SSqu8ifdaKFR3A">
+                    Spotify
+                  </HeaderExternalLink>
+                  <HeaderExternalLink href="https://www.google.com/podcasts?feed=aHR0cHM6Ly9yc3Muc2ltcGxlY2FzdC5jb20vcG9kY2FzdHMvMTAyNzgvcnNz">
+                    Google Podcast
+                  </HeaderExternalLink>
+                  <HeaderExternalLink href="https://itunes.apple.com/mx/podcast/away-from-javascript/id1452959831?l=en&mt=2">
+                    iTunes
+                  </HeaderExternalLink>
+                </nav>
+              </Col>
+            </Row>
+          </Grid>
         </header>
       )}
     </ThemeConsumer>

src/assets/logo.png

@@ -1,10 +1,5 @@
 .Header {
-  display: flex;
-  padding: 12px;
-  justify-content: space-between;
-  align-items: center;
-  max-width: 76rem;
-  margin: auto;
+  padding: 48px 0px;
 }
 
 .HeaderLogoGroup {
@@ -13,5 +8,9 @@
 }
 
 .HeaderLink {
-  margin-left: 12px;
+  margin-bottom: 24px;
+}
+
+.HeaderExternalLink {
+  margin: 0px 12px;
 }

src/components/Header/Header.js

@@ -10,7 +10,7 @@ import Row from '../Row';
 import Col from '../Col';
 import Image from '../Image';
 
-export default function Post({ image, title, description, published }) {
+export default function Post({ ep, image, title, description, published }) {
   return (
     <ThemeConsumer>
       {theme => (
@@ -20,17 +20,16 @@ export default function Post({ image, title, description, published }) {
         >
           <article className={styles.Post}>
             <Row>
-              <Col xs={3}>
+              <Col xs={2}>
                 <Image className={styles.PostImage} src={image} alt={title} />
               </Col>
               <Col xs>
                 <div>
-                  <p style={{ color: theme.Dark }}>{published}</p>
                   <h2
                     className={`subtitle ${styles.PostTitle}`}
                     style={{ color: theme.Darker }}
                   >
-                    {title}
+                    {ep ? `${ep}: ${title}` : title}
                   </h2>
                   <div
                     style={{ color: theme.Dark }}

src/components/Header/Header.module.css

@@ -1,11 +1,11 @@
 .Post {
   margin-bottom: 24px;
   padding: 24px 12px;
+  text-align: start;
 }
 
 .PostTitle {
   margin-bottom: 12px;
-  margin-top: 8px;
 }
 
 .PostImage {

src/components/Post/Post.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 
+import LogoPNG from '../assets/logo.png';
+
 import BaseLayout from '../layouts/BaseLayout';
 import Post from '../components/Post';
 import Grid from '../components/Grid';
@@ -19,12 +21,13 @@ function IndexPage({ data }) {
     >
       <Page>
         <Grid>
-          {posts.map(post => (
-            <Row>
-              <Col xs key={post.node.id}>
+          {posts.map((post, index) => (
+            <Row center="xs">
+              <Col xs md={8} key={post.node.id}>
                 <Post
+                  ep={posts.length - index}
                   published={post.node.published}
-                  image={post.node.image}
+                  image={LogoPNG}
                   title={post.node.title}
                   description={post.node.description}
                 />

src/components/Post/Post.module.css

@@ -2,6 +2,8 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import ReactAudioPlayer from 'react-audio-player';
 
+import LogoPNG from '../assets/logo.png';
+
 import { ThemeConsumer } from '../components/ThemeProvider';
 import BaseLayout from '../layouts/BaseLayout';
 import Post from '../components/Post';
@@ -24,8 +26,8 @@ export default function PostTemplate(props) {
         {theme => (
           <Page>
             <Grid>
-              <Row>
-                <Col xs>
+              <Row center="xs">
+                <Col xs md={8}>
                   <ReactAudioPlayer
                     style={{
                       width: '100%',
@@ -38,7 +40,7 @@ export default function PostTemplate(props) {
                   />
                   <Post
                     published={post.node.published}
-                    image={post.node.image}
+                    image={LogoPNG}
                     title={post.node.title}
                     description={post.node.description}
                   />