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
survivejs · Jul 2, 2018 · 7cdc675 · 7cdc675
1 parent cd92f8c
commit 7cdc675
Show file tree

Hide file tree

Showing 13 changed files with 166 additions and 135 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → layouts/MaintenanceIndex.js b/layouts/MaintenanceIndex.jsx → 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,21 +45,23 @@ 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,
             }}
           />
         </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
@@ -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,39 +45,41 @@ 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,
             }}
           />
         </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 → layouts/SiteIndex.js b/layouts/SiteIndex.jsx → 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,