From 7cdc6751b62efdffe62b2092eeed6370bd174e8a Mon Sep 17 00:00:00 2001
From: Artem Sapegin <artem@sapegin.ru>
Date: Mon, 2 Jul 2018 21:51:31 +0200
Subject: [PATCH] Cleanup headings on landings

* Wrap whole book (page) title in h1
* Keep page outline more consistent and semantic
* Fix testimonials layout
* Add styles for hr

Part of #109

Closes #86
---
 components/Landing.js                         |  28 +++++
 components/LatestPost.js                      |   6 +-
 components/VisuallyHidden.js                  |  12 ++
 content/descriptions/maintenance.md           |   2 +-
 content/descriptions/webpack.md               |   2 +-
 layouts/IndexPage.js                          |  13 ++-
 ...intenanceIndex.jsx => MaintenanceIndex.js} |  30 +++--
 layouts/ReactIndex.js                         |  32 +++---
 layouts/{SiteIndex.jsx => SiteIndex.js}       |  30 ++---
 layouts/{WebpackIndex.jsx => WebpackIndex.js} |  32 +++---
 styles/custom.scss                            |   6 +-
 styles/pages/_front.scss                      | 107 ++++++------------
 styles/theme.js                               |   1 +
 13 files changed, 166 insertions(+), 135 deletions(-)
 create mode 100644 components/VisuallyHidden.js
 rename layouts/{MaintenanceIndex.jsx => MaintenanceIndex.js} (75%)
 rename layouts/{SiteIndex.jsx => SiteIndex.js} (83%)
 rename layouts/{WebpackIndex.jsx => WebpackIndex.js} (87%)

diff --git a/components/Landing.js b/components/Landing.js
index 2b3035aedf..71cfa1ccd5 100644
--- a/components/Landing.js
+++ b/components/Landing.js
@@ -37,3 +37,31 @@ export const Book = Column.withComponent("li");
 export const Heading = styled.h2`
   margin: 0 0 ${theme.space.m};
 `;
+
+export const SubHeading = styled.h3`
+  margin: 0 0 ${theme.space.m};
+`;
+
+export const PageTitle = styled.h1`
+  margin: 0;
+  line-height: 1.2;
+`;
+
+export const PageTitleLogo = styled.div`
+  margin-bottom: calc(0.2rem + 0.5vh + 1vw);
+  text-transform: uppercase;
+  font-family: ${theme.font.heading};
+  font-size: calc(0.8rem + 0.1vh + 0.5vw);
+  font-weight: ${theme.fontWeight.fat};
+  color: ${theme.color.inverted};
+
+  & strong {
+    color: ${theme.color.actionDark};
+  }
+`;
+
+export const PageTitleSub = styled.div`
+  color: ${theme.color.actionDark};
+  font-size: calc(1.2rem + 0.5vh + 1vw);
+  font-weight: ${theme.fontWeight.normal};
+`;
diff --git a/components/LatestPost.js b/components/LatestPost.js
index d70d58dc99..de3195e3d7 100644
--- a/components/LatestPost.js
+++ b/components/LatestPost.js
@@ -2,6 +2,8 @@ import React from "react";
 import { Link } from "@survivejs/components";
 import Tip from "./Tip";
 
+const Aside = Tip.withComponent("aside");
+
 const LatestPost = ({ section }) => {
   const post = section.pages("blog")[0];
 
@@ -10,12 +12,12 @@ const LatestPost = ({ section }) => {
   }
 
   return (
-    <Tip>
+    <Aside>
       Latest in the blog:{" "}
       <Link className="latestpost-link" to={post.url}>
         {post.file.attributes.title}
       </Link>
-    </Tip>
+    </Aside>
   );
 };
 
diff --git a/components/VisuallyHidden.js b/components/VisuallyHidden.js
new file mode 100644
index 0000000000..afdfdfd6cf
--- /dev/null
+++ b/components/VisuallyHidden.js
@@ -0,0 +1,12 @@
+import styled from "react-emotion";
+
+const VisuallyHidden = styled.div`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+`;
+
+export default VisuallyHidden;
diff --git a/content/descriptions/maintenance.md b/content/descriptions/maintenance.md
index d8b8d9a0c2..695036860b 100644
--- a/content/descriptions/maintenance.md
+++ b/content/descriptions/maintenance.md
@@ -6,7 +6,7 @@ The purpose of this book is to gather development practices that are particularl
 
 I, Juho Vepsäläinen, and my co-author Artem Sapegin, have spent years developing npm packages and JavaScript projects. As a result we have gained insight on how to do it and how **not** to do it. The book combines our experience into a concise format that allows you to improve your development experience.
 
-## What Will You Learn
+### What Will You Learn
 
 Unless you work on fresh greenfield projects all the time, maintenance concerns are something that will come up fast. The book has been structured into small parts where you learn:
 
diff --git a/content/descriptions/webpack.md b/content/descriptions/webpack.md
index e0054dd793..10f00160f4 100644
--- a/content/descriptions/webpack.md
+++ b/content/descriptions/webpack.md
@@ -8,7 +8,7 @@ During this process I have become a core developer of webpack while learning a l
 
 Webpack, a module bundler, is a powerful tool that helps you to develop complex web applications. It enables techniques, such as **code splitting**. You could say it solves the fundamental problem of web development and it has allowed developers to reach new levels of productivity.
 
-## What Will You Learn
+### What Will You Learn
 
 The book would not have been possible without constant feedback by the community around the book. It has been developed to contain solutions to most bundling related problems you might encounter. You can see the book as a complement to the [official documentation](https://webpack.js.org/) which I helped to create. By reading the book, you will develop [an extensive configuration](https://github.com/survivejs-demos/webpack-demo) you understand.
 
diff --git a/layouts/IndexPage.js b/layouts/IndexPage.js
index 820d761586..21706a8412 100644
--- a/layouts/IndexPage.js
+++ b/layouts/IndexPage.js
@@ -1,16 +1,17 @@
 import React from "react";
+import { PageTitle, PageTitleLogo, PageTitleSub } from "../components/Landing";
 
 const IndexPage = ({ type, content }) => {
   const page = () => (
     <div className="frontpage">
       <div className="front__heading">
         <div className="front-header-wrapper">
-          <div className="front-name">
-            <span className="first">Survive</span>
-            <span className="second">JS</span>
-            <span className="first"> — {type}</span>
-          </div>
-          <h1 className="front-header">From apprentice to master</h1>
+          <PageTitle>
+            <PageTitleLogo>
+              Survive<strong>JS</strong> — {type}
+            </PageTitleLogo>
+            <PageTitleSub>From apprentice to master</PageTitleSub>
+          </PageTitle>
         </div>
       </div>
 
diff --git a/layouts/MaintenanceIndex.jsx b/layouts/MaintenanceIndex.js
similarity index 75%
rename from layouts/MaintenanceIndex.jsx
rename to layouts/MaintenanceIndex.js
index 89b744a4e0..2e9708732e 100644
--- a/layouts/MaintenanceIndex.jsx
+++ b/layouts/MaintenanceIndex.js
@@ -1,24 +1,28 @@
 import React from "react";
 import LatestPost from "../components/LatestPost";
+import VisuallyHidden from "../components/VisuallyHidden";
 import {
   Landing,
   Container,
   Column,
   WideColumn,
   Heading,
+  SubHeading,
+  PageTitle,
+  PageTitleLogo,
+  PageTitleSub,
 } from "../components/Landing";
 
 const MaintenanceIndex = ({ section }) => (
   <div className="frontpage">
     <div className="front__heading">
       <div className="front-header-wrapper">
-        <div className="front-name">
-          <span className="first">Survive</span>
-          <span className="second">JS</span>
-          <span className="first"> — Maintenance</span>
-        </div>
-
-        <h1 className="front-header">Streamline JavaScript Workflow</h1>
+        <PageTitle>
+          <PageTitleLogo>
+            Survive<strong>JS</strong> — Maintenance
+          </PageTitleLogo>
+          <PageTitleSub>Streamline JavaScript Workflow</PageTitleSub>
+        </PageTitle>
 
         <div className="front-button-wrapper">
           <span className="read-free">
@@ -41,13 +45,15 @@ const MaintenanceIndex = ({ section }) => (
       <LatestPost section={section} />
       <Container>
         <WideColumn>
-          <Heading>SurviveJS — Maintenance</Heading>
+          <VisuallyHidden>
+            <Heading>About the book</Heading>
+          </VisuallyHidden>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/maintenance.md").body,
             }}
           />
-          <h3>Getting the Book</h3>
+          <SubHeading>Getting the Book</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/gets/maintenance.md").body,
@@ -55,7 +61,7 @@ const MaintenanceIndex = ({ section }) => (
           />
         </WideColumn>
         <Column>
-          <Heading>About the Authors</Heading>
+          <SubHeading>About the Authors</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/authors/juho.md").body,
@@ -67,13 +73,13 @@ const MaintenanceIndex = ({ section }) => (
               __html: require("../content/authors/artem.md").body,
             }}
           />
-          <Heading>Getting the Books</Heading>
+          <SubHeading>Getting the Books</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/gettingbooks.md").body,
             }}
           />
-          <Heading>Training</Heading>
+          <SubHeading>Training</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/training.md").body,
diff --git a/layouts/ReactIndex.js b/layouts/ReactIndex.js
index b80be21712..3e568aa979 100644
--- a/layouts/ReactIndex.js
+++ b/layouts/ReactIndex.js
@@ -1,24 +1,28 @@
 import React from "react";
 import LatestPost from "../components/LatestPost";
+import VisuallyHidden from "../components/VisuallyHidden";
 import {
   Landing,
   Container,
   Column,
   WideColumn,
   Heading,
+  SubHeading,
+  PageTitle,
+  PageTitleLogo,
+  PageTitleSub,
 } from "../components/Landing";
 
 const ReactIndex = ({ section }) => (
   <div className="frontpage">
     <div className="front__heading">
       <div className="front-header-wrapper">
-        <div className="front-name">
-          <span className="first">Survive</span>
-          <span className="second">JS</span>
-          <span className="first"> — React</span>
-        </div>
-
-        <h1 className="front-header">From apprentice to master</h1>
+        <PageTitle>
+          <PageTitleLogo>
+            Survive<strong>JS</strong> — React
+          </PageTitleLogo>
+          <PageTitleSub>From apprentice to master</PageTitleSub>
+        </PageTitle>
 
         <div className="front-button-wrapper">
           <span className="read-free">
@@ -41,13 +45,15 @@ const ReactIndex = ({ section }) => (
       <LatestPost section={section} />
       <Container>
         <WideColumn>
-          <Heading>SurviveJS - React</Heading>
+          <VisuallyHidden>
+            <Heading>About the book</Heading>
+          </VisuallyHidden>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/react.md").body,
             }}
           />
-          <h3>Getting the Book</h3>
+          <SubHeading>Getting the Book</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/gets/react.md").body,
@@ -55,25 +61,25 @@ const ReactIndex = ({ section }) => (
           />
         </WideColumn>
         <Column>
-          <Heading>About the Author</Heading>
+          <SubHeading>About the Author</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/authors/juho.md").body,
             }}
           />
-          <Heading>Getting the Books</Heading>
+          <SubHeading>Getting the Books</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/gettingbooks.md").body,
             }}
           />
-          <Heading>Training</Heading>
+          <SubHeading>Training</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/training.md").body,
             }}
           />
-          <Heading>Translations</Heading>
+          <SubHeading>Translations</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/translations.md").body,
diff --git a/layouts/SiteIndex.jsx b/layouts/SiteIndex.js
similarity index 83%
rename from layouts/SiteIndex.jsx
rename to layouts/SiteIndex.js
index 46c490a51e..2027f91dcf 100644
--- a/layouts/SiteIndex.jsx
+++ b/layouts/SiteIndex.js
@@ -7,22 +7,26 @@ import {
   Books,
   Book,
   Heading,
+  SubHeading,
+  PageTitle,
+  PageTitleLogo,
+  PageTitleSub,
 } from "../components/Landing";
 
 const SiteIndex = ({ section }) => (
   <div className="frontpage">
     <div className="front__heading">
       <div className="front-header-wrapper">
-        <div className="front-name">
-          <span className="first">Survive</span>
-          <span className="second">JS</span>
-        </div>
-        <h1 className="front-header">
-          Learn JavaScript
-          <div className="front-motto">
-            SurviveJS will take you from apprentice to master
-          </div>
-        </h1>
+        <PageTitle>
+          <PageTitleLogo>
+            Survive<strong>JS</strong>
+          </PageTitleLogo>
+          <PageTitleSub>Learn JavaScript</PageTitleSub>
+        </PageTitle>
+
+        <p className="front-motto">
+          SurviveJS will take you from apprentice to master
+        </p>
       </div>
     </div>
 
@@ -36,7 +40,7 @@ const SiteIndex = ({ section }) => (
               __html: require("../content/descriptions/maintenance.md").body,
             }}
           />
-          <h3>Getting the Book</h3>
+          <SubHeading>Getting the Book</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/gets/maintenance.md").body,
@@ -50,7 +54,7 @@ const SiteIndex = ({ section }) => (
               __html: require("../content/descriptions/react.md").body,
             }}
           />
-          <h3>Getting the Book</h3>
+          <SubHeading>Getting the Book</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/gets/react.md").body,
@@ -64,7 +68,7 @@ const SiteIndex = ({ section }) => (
               __html: require("../content/descriptions/webpack.md").body,
             }}
           />
-          <h3>Getting the Book</h3>
+          <SubHeading>Getting the Book</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/gets/webpack.md").body,
diff --git a/layouts/WebpackIndex.jsx b/layouts/WebpackIndex.js
similarity index 87%
rename from layouts/WebpackIndex.jsx
rename to layouts/WebpackIndex.js
index 6f4d1ad561..2bc317101a 100644
--- a/layouts/WebpackIndex.jsx
+++ b/layouts/WebpackIndex.js
@@ -1,25 +1,29 @@
 import React from "react";
 import { Testimonial } from "@survivejs/components";
 import LatestPost from "../components/LatestPost";
+import VisuallyHidden from "../components/VisuallyHidden";
 import {
   Landing,
   Container,
   Column,
   WideColumn,
   Heading,
+  SubHeading,
+  PageTitle,
+  PageTitleLogo,
+  PageTitleSub,
 } from "../components/Landing";
 
 const WebpackIndex = ({ section }) => (
   <div className="frontpage">
     <div className="front__heading">
       <div className="front-header-wrapper">
-        <div className="front-name">
-          <span className="first">Survive</span>
-          <span className="second">JS</span>
-          <span className="first"> — Webpack</span>
-        </div>
-
-        <h1 className="front-header">From apprentice to master</h1>
+        <PageTitle>
+          <PageTitleLogo>
+            Survive<strong>JS</strong> — Webpack
+          </PageTitleLogo>
+          <PageTitleSub>From apprentice to master</PageTitleSub>
+        </PageTitle>
 
         <div className="front-button-wrapper">
           <span className="read-free">
@@ -67,13 +71,15 @@ const WebpackIndex = ({ section }) => (
       <LatestPost section={section} />
       <Container>
         <WideColumn>
-          <Heading>SurviveJS - Webpack</Heading>
+          <VisuallyHidden>
+            <Heading>About the book</Heading>
+          </VisuallyHidden>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/webpack.md").body,
             }}
           />
-          <h3>Getting the Book</h3>
+          <SubHeading>Getting the Book</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/gets/webpack.md").body,
@@ -81,25 +87,25 @@ const WebpackIndex = ({ section }) => (
           />
         </WideColumn>
         <Column>
-          <Heading>About the Author</Heading>
+          <SubHeading>About the Author</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/authors/juho.md").body,
             }}
           />
-          <Heading>Getting the Books</Heading>
+          <SubHeading>Getting the Books</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/gettingbooks.md").body,
             }}
           />
-          <Heading>Training</Heading>
+          <SubHeading>Training</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/training.md").body,
             }}
           />
-          <Heading>Translations</Heading>
+          <SubHeading>Translations</SubHeading>
           <div
             dangerouslySetInnerHTML={{
               __html: require("../content/descriptions/translations.md").body,
diff --git a/styles/custom.scss b/styles/custom.scss
index e9d195b7ce..5aeb8862dc 100644
--- a/styles/custom.scss
+++ b/styles/custom.scss
@@ -22,8 +22,10 @@ q {
 }
 
 hr {
-  margin-top: $base-spacing-unit / 2;
-  margin-bottom: $base-spacing-unit / 2;
+  margin-top: $space-l;
+  margin-bottom: $space-l;
+  border-top: 0;
+  border-bottom: 1px solid $quiet-font-color;
 }
 
 .post {
diff --git a/styles/pages/_front.scss b/styles/pages/_front.scss
index da48387ef3..e04e5b2aff 100644
--- a/styles/pages/_front.scss
+++ b/styles/pages/_front.scss
@@ -48,38 +48,17 @@
     }
   }
 
-  .front-name {
-    margin-bottom: calc(0.5em + 0.5vh + 1vw);
-    text-transform: uppercase;
-    font-family: "Avenir Next", "Helvetica Neue", sans-serif;
-    font-weight: 700;
-
-    .first {
-      color: #ccc;
-    }
-
-    .second {
-      color: #09b5c4;
-    }
-  }
-
   .front-text-wrapper {
     margin-top: 2em;
     margin-bottom: 2em;
   }
 
-  .front-header {
-    margin: 0;
-    color: darken($action-color, 30%);
-    line-height: 1.2;
-    font-size: calc(1rem + 0.5vh + 1vw);
-    font-weight: 400;
-  }
-
   .front-motto {
     margin-top: calc(1rem + 0.5vh + 1vw);
+    margin-bottom: 0;
     font-size: 20px;
     color: darken(white, 20%);
+    font-family: "Avenir Next", "Helvetica Neue", sans-serif;
   }
 
   .front__heading {
@@ -169,17 +148,6 @@
     height: 100px;
   }
 
-  .front__testimonials {
-    width: 100%;
-
-    padding-top: 2em;
-    padding-bottom: 1em;
-
-    background: #d6f5f7;
-
-    display: table;
-  }
-
   .btn--buy {
     display: inline-block;
     margin-top: 0.5em;
@@ -188,68 +156,63 @@
     text-align: center;
   }
 
+  .front__testimonials {
+    display: flex;
+    flex-wrap: wrap;
+    padding: $space-m;
+    background: #d6f5f7;
+  }
+
   .testimonial {
-    padding-left: 1em;
-    padding-right: 1em;
-    font-size: 75%;
-    display: table-cell;
-    font-family: "Avenir Next", "Helvetica Neue", sans-serif;
-    min-width: 20em;
+    flex: 1;
+    min-width: 320px;
+    padding: $space-m;
+    font-size: $deci-size;
+    font-family: $small-font;
 
     .text-wrapper {
-      padding: 1em;
-      padding-bottom: 2em;
-
+      position: relative;
+      padding: $space-m;
+      padding-bottom: $space-l;
       min-height: 10em;
-
-      background: white;
-      background-image: url("../assets/img/quotes.png");
-      background-size: contain;
-      background-repeat: no-repeat;
-
-      border: 0.1em solid #ccc;
-      border-radius: 0.5em;
+      background: $background-color;
+      border: 2px solid $background-alt-color;
+      border-radius: 6px;
+
+      &:after {
+        content: "”";
+        position: absolute;
+        right: $space-m;
+        bottom: 0;
+        color: $quiet-font-color;
+        font-family: $body-font;
+        font-size: $h1-size;
+      }
     }
     .photo-wrapper {
       text-align: center;
 
       .photo {
-        border: 0.1em solid #777;
-
+        position: relative;
+        border: 2px solid $quiet-font-color;
         margin-top: -25px;
-
-        border-radius: 25px;
+        border-radius: 50%;
         width: 50px;
         height: 50px;
       }
     }
+
     .name-wrapper {
       text-align: center;
     }
 
     .title-wrapper {
       text-align: center;
-
-      font-size: 85%;
+      font-size: $centi-size;
       font-style: italic;
     }
   }
-  @include media-query(portable) {
-    .testimonial {
-      display: inline-block;
-
-      max-width: 33%;
 
-      .text-wrapper {
-        min-height: 5em;
-      }
-    }
-  }
-  @include media-query(palm) {
-    .testimonial {
-      max-width: 100%;
-    }
-  }
   @media (max-width: 550px) {
     .front-cover {
       display: block;
diff --git a/styles/theme.js b/styles/theme.js
index 70155c1f37..8775128fe0 100644
--- a/styles/theme.js
+++ b/styles/theme.js
@@ -36,6 +36,7 @@ module.exports = {
     base: "#222",
     heading: "#222",
     quiet: "#999",
+    inverted: "#ccc",
     background: "#fff",
     backgroundAlt: "#eee",
     backgroundLight: "#fafafa",