Merge branch 'release/1.4'

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@sanity/block-content-to-react": "^2.0.6",
+    "@sanity/image-url": "^0.140.9",
     "babel-plugin-styled-components": "^1.10.0",
     "dotenv": "^6.2.0",
     "gatsby": "^2.1.20",
@@ -28,7 +29,7 @@
     "github-buttons": "^2.0.5",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
-    "react-github-btn": "^1.0.0",
+    "react-github-btn": "^1.0.3",
     "react-github-button": "^0.1.11",
     "react-helmet": "^5.2.0",
     "react-media": "^1.9.2",

src/components/Layout/Layout.js

@@ -8,11 +8,17 @@ import Footer from './footer'
 const PageContainer = styled.div`
   background: var(--color-grey) no-repeat;
   background-size: cover;
+
+  .contentContainer {
+    @media screen and (min-width: 48em) {
+        display: grid;
+        grid-template-columns: repeat(16, 1fr);
+    }
+  }
+
   &.home .contentContainer {
     @media screen and (min-width: 48em) {
-      display: grid;
       grid-template-columns: repeat(4, 1fr);
-      /* grid-column-gap: 25px; */
     }
     @media screen and (min-width: 64em) {
       grid-template-columns: minmax(200px, 6fr) repeat(8, 1fr);
@@ -25,8 +31,6 @@ const PageContainer = styled.div`
   }
   &.sub .contentContainer {
     @media screen and (min-width: 48em) {
-      display: grid;
-      grid-template-columns: repeat(16, 1fr);
       grid-template-rows: minmax(100px, 200px);
       grid-column-gap: 25px;
     }
@@ -37,12 +41,17 @@ const PageContainer = styled.div`
   &.notes .contentContainer {
     padding: 0 1.5em;
     @media screen and (min-width: 48em) {
-      display: grid;
-      grid-template-columns: repeat(16, 1fr);
       grid-column-gap: 25px;
       padding: 0;
     }
   }
+  &.center-squared .contentContainer {
+    /* max-width: 85%; */
+    @media screen and (min-width: 48em) {
+      margin: 0 auto;
+      max-width: 1800px;
+    }
+  }
 `
 const Layout = (props) => {
   const layout = props.pageLayout

src/components/Layout/footer/Footer.js

@@ -201,7 +201,6 @@ const Updated = styled.div`
     grid-column: 11 / 15;
   }
 `
-
 const Footer = () => (
   <>
     <SiteFooter>

src/components/Layout/general.css

@@ -20,7 +20,7 @@
 
   --font-weight: 300;
   --font-weight-headings: 900;
-  /* --font-size-xx-large: 5.063rem;  */
+  --font-size-xxx-large: 5.063rem; 
   --font-size-xx-large: 3.813em; 
   --font-size-x-large: 3.375rem;
   --font-size-large: 2.25rem;

src/components/Layout/header/Header.js

@@ -217,7 +217,7 @@ const Header = (props) => {
           {/* <li><Link to="/" getProps={isCurrent}{...props}>Home</Link></li> */}
           <li><Link to="/now" getProps={isPartiallyActive}{...props} title="Find out what I'm focusing on now">Now</Link></li>
           <li><Link to="/notes" getProps={isPartiallyActive}{...props} title="Find out what I've written lately">Notes</Link></li>
-          <li><Link to="/log" getProps={isPartiallyActive}{...props} title="Checkout what has been updated on the site">Log</Link></li>
+          <li><Link to="/uses" getProps={isPartiallyActive}{...props} title="Check out the gear I use on a daily basis">Uses</Link></li>
         </SiteNav>
       </nav>
     </MainHeader>

src/components/Shared/Content.js

@@ -2,6 +2,18 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import BaseBlockContent from '@sanity/block-content-to-react'
+import imageUrlBuilder from "@sanity/image-url";
+import sanityClient from "@sanity/client";
+
+const client = sanityClient({
+  projectId: "dlox5499", // you can find this in sanity.json
+  dataset: "production", // or the name you chose in step 1
+  useCdn: true // `false` if you want to ensure fresh data
+});
+
+function urlFor(source) {
+  return imageUrlBuilder(client).image(source);
+}
 
 const PostBody = styled.div`
   ul,
@@ -50,7 +62,10 @@ const serializers = {
         default:
           return <p>{props.children}</p>
       }
-    }
+    },
+    image: ({node: { asset }}) => (
+      <img src={ urlFor(asset) } alt=""/>
+    )
   }
 }
 

src/components/Shared/SubMast.js

@@ -4,23 +4,72 @@ import BaseBlockContent from '@sanity/block-content-to-react'
 import { Content } from '../Shared/Content'
 
 const SubHeading = styled.div`
-  grid-column: 3 / 15;
-  grid-row: 1 / 2;
-  color: white;
-  align-self: center;
-  padding: 0 1.5em 0.938em 1.5em;
-  @media screen and (min-width: 48em) {
-    padding: 0;
-  }
-  p {
-    color: var(--color-light-grey);
-    @media screen and (min-width: 75em){
-      font-size: var(--font-size-medium);
+  &.standard {
+    grid-column: 3 / 15;
+    grid-row: 1 / 2;
+    color: white;
+    align-self: center;
+    padding: 0 1.5em 0.938em 1.5em;
+    @media screen and (min-width: 48em) {
+      padding: 0;
+    }
+    p {
+      color: var(--color-light-grey);
+      @media screen and (min-width: 75em){
+        font-size: var(--font-size-medium);
+      }
+    }
+    h1 {
+      @media screen and (max-width: 75em) {
+      font-size: var(--font-size-large);
+      }
     }
   }
-  h1 {
-    @media screen and (max-width: 75em) {
-    font-size: var(--font-size-large);
+  &.centered {
+    grid-column: 5 / 14;
+    grid-row: 1 / 2;
+    padding: 0 1.5em;
+    align-self: center;
+    margin: 0 auto;
+    @media screen and (min-width: 48em) { /* 540px */
+      display: flex;
+      justify-content: space-around;
+      max-width: 680px;
+    }
+    /* @media screen and (min-width: 48em) {
+      grid-column: 5 / 13;
+    } */
+    @media screen and (min-width: 75em) {
+      grid-column: 6 / 13;
+      padding: 1.875em 0;
+    }
+
+    h1 {
+      font-size: var(--font-size-large);
+      @media screen and (min-width: 48em) { /* 540px */
+        font-size: var(--font-size-xx-large);
+        max-width: 260px;
+        line-height: 0.9;
+        text-transform: uppercase;
+        padding-right:0.25em;
+        text-align: right;
+        width: 400px;
+      }
+      @media screen and (min-width: 75em) {
+        font-size: var(--font-size-xxx-large);
+      }
+    }
+    p {
+      color: var(--color-light-grey);
+      font-size: 1em;
+      @media screen and (min-width: 48em) { 
+        color: #fff;
+        font-size: 0.75em;
+      }
+      @media screen and (min-width: 75em) { 
+        max-width: 400px;
+        font-size: var(--font-size);
+      }
     }
   }
 `
@@ -54,12 +103,11 @@ const serializers = {
 }
 
 const SubMast = (props) => {
-  const { title, description, textContent } = props;
+  const { title, description, textContent, layout } = props;
   return (
-    <SubHeading>
+    <SubHeading className={layout}>
       <h1>{title}</h1>
       {
-
         props.description ? (
           <BaseBlockContent blocks={description} serializers={serializers} />
         ) :

src/pages/log.js

@@ -70,6 +70,7 @@ const LogPage = ({data}, props) => {
         <SubMast
           title="What's new?"
           textContent="Documenting new features, enhancements and bug fixes."
+          layout="standard"
         />
 
         <PageContainer>

src/pages/notes.js

@@ -23,7 +23,11 @@ const NotesIndexPage = ( {data}) => {
           metaKeywords="Notes, Blog, Blogging, Tech, Web, Life, Writing, News, Posts"
       />
       <Layout pageLayout={page}>
-        <SubMast title="Notes" textContent="The Web, Technology, Life and Site related updates." />
+        <SubMast 
+          title="Notes" 
+          textContent="The Web, Technology, Life and Site related updates." 
+          layout="standard"
+        />
         <LatestBlock note={notesLatest} />
         {/* <PreviousPosts notes={notesPrevious.edges} tot={notesPrevious.totalCount} tags={getTags} isTags={false} /> */}
         <PreviousPosts notes={notesPrevious.edges} tot={notesPrevious.totalCount} isTags={false} />