[www] Fix header background for paginated "Blog" pages (#8042)

* Move paginated blog pages from e.g. `/blog/2` to `/blog/page/2`

and fix header background for those pages.

* Fix navigating to page 1 (`/blog/`)

Thanks @pieh, @NickyMeuleman and @DSchau! 🙏

www/gatsby-node.js

@@ -181,7 +181,7 @@ exports.createPages = ({ graphql, actions }) => {
 
       Array.from({ length: numPages }).forEach((_, i) => {
         createPage({
-          path: i === 0 ? `/blog` : `/blog/${i + 1}`,
+          path: i === 0 ? `/blog` : `/blog/page/${i + 1}`,
           component: slash(blogListTemplate),
           context: {
             limit: postsPerPage,

www/src/components/navigation.js

@@ -30,7 +30,7 @@ const NavItem = ({ linkTo, children }) => (
 
 const Navigation = ({ pathname }) => {
   const isHomepage = pathname === `/`
-  const isBlog = pathname === `/blog/`
+  const isBlog = pathname === `/blog/` || pathname.indexOf(`/blog/page/`) === 0
 
   const socialIconsStyles = {
     ...styles.navItem,

www/src/components/pagination/index.js

@@ -8,17 +8,17 @@ import { options, rhythm } from "../../utils/typography"
 
 class Pagination extends React.Component {
   changePage = e => {
-    navigate(`/blog/${e.target.value}`)
+    navigate(e.target.value ? `/blog/page/${e.target.value}` : `/blog/`)
   }
   render() {
     const { numPages, currentPage } = this.props.context
     const isFirst = currentPage === 1
     const isLast = currentPage === numPages
     const prevPageNum =
-      currentPage - 1 === 1 ? `` : (currentPage - 1).toString()
+      currentPage - 1 === 1 ? `` : `page/${(currentPage - 1).toString()}`
     const nextPageNum = (currentPage + 1).toString()
     const prevPageLink = isFirst ? null : `/blog/${prevPageNum}`
-    const nextPageLink = isLast ? null : `/blog/${nextPageNum}`
+    const nextPageLink = isLast ? null : `/blog/page/${nextPageNum}`
 
     const prevNextLinkStyles = {
       "&&": {