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 ( - + ); }; 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 = () => (
-
- Survive - JS - — {type} -
-

From apprentice to master

+ + + SurviveJS — {type} + + From apprentice to master +
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 }) => (
-
- Survive - JS - — Maintenance -
- -

Streamline JavaScript Workflow

+ + + SurviveJS — Maintenance + + Streamline JavaScript Workflow +
@@ -41,13 +45,15 @@ const MaintenanceIndex = ({ section }) => ( - SurviveJS — Maintenance + + About the book +
-

Getting the Book

+ Getting the Book
( /> - About the Authors + About the Authors
( __html: require("../content/authors/artem.md").body, }} /> - Getting the Books + Getting the Books
- Training + Training
(
-
- Survive - JS - — React -
- -

From apprentice to master

+ + + SurviveJS — React + + From apprentice to master +
@@ -41,13 +45,15 @@ const ReactIndex = ({ section }) => ( - SurviveJS - React + + About the book +
-

Getting the Book

+ Getting the Book
( /> - About the Author + About the Author
- Getting the Books + Getting the Books
- Training + Training
- Translations + Translations
(
-
- Survive - JS -
-

- Learn JavaScript -
- SurviveJS will take you from apprentice to master -
-

+ + + SurviveJS + + Learn JavaScript + + +

+ SurviveJS will take you from apprentice to master +

@@ -36,7 +40,7 @@ const SiteIndex = ({ section }) => ( __html: require("../content/descriptions/maintenance.md").body, }} /> -

Getting the Book

+ Getting the Book
( __html: require("../content/descriptions/react.md").body, }} /> -

Getting the Book

+ Getting the Book
( __html: require("../content/descriptions/webpack.md").body, }} /> -

Getting the Book

+ Getting the Book
(
-
- Survive - JS - — Webpack -
- -

From apprentice to master

+ + + SurviveJS — Webpack + + From apprentice to master +
@@ -67,13 +71,15 @@ const WebpackIndex = ({ section }) => ( - SurviveJS - Webpack + + About the book +
-

Getting the Book

+ Getting the Book
( /> - About the Author + About the Author
- Getting the Books + Getting the Books
- Training + Training
- Translations + Translations