Add typography section

Typography is made up of three pillars:
- typographic system
- suggested sizes and styles
- proportional scaling

Explain these three pillars in the most concise way possible with examples, whilst conforming to the GDS guidelines on content style.

The suggested styles use Proxima Nova Light and Semi-Bold in conjuction with system-ui fonts to:
- Adhere to the new Barnardo's digital look and feel
- Optimise performance by minimising page weight

Apply all these to the website itself.

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 .cache
 public
 node_modules

.stylelintrc.json

@@ -12,28 +12,45 @@
     ],
     "at-rule-no-unknown": null,
     "at-rule-no-vendor-prefix": true,
-    "at-rule-whitelist": [],
+    "at-rule-whitelist": ["font-face", "media"],
     "declaration-no-important": true,
+    "font-family-no-missing-generic-family-keyword": null,
     "function-url-no-scheme-relative": true,
     "function-url-scheme-whitelist": [],
-    "function-whitelist": [],
+    "function-whitelist": ["url"],
     "media-feature-name-no-vendor-prefix": true,
-    "media-feature-name-whitelist": [],
-    "number-max-precision": 2,
+    "media-feature-name-whitelist": ["min-width"],
+    "number-max-precision": 4,
     "property-no-unknown": null,
     "property-no-vendor-prefix": true,
-    "property-whitelist": [],
+    "property-whitelist": [
+      "background",
+      "box-sizing",
+      "font-family",
+      "font-size",
+      "font-style",
+      "font-weight",
+      "font",
+      "line-height",
+      "margin-left",
+      "margin-top",
+      "margin",
+      "max-width",
+      "padding-left",
+      "padding",
+      "src"
+    ],
     "selector-attribute-operator-whitelist": [],
     "selector-max-attribute": 0,
-    "selector-max-class": 0,
+    "selector-max-class": 1,
     "selector-max-id": 0,
     "selector-max-type": 0,
     "selector-max-universal": 0,
     "selector-no-vendor-prefix": true,
     "selector-pseudo-class-no-unknown": null,
-    "selector-pseudo-class-whitelist": [],
+    "selector-pseudo-class-whitelist": ["first-child", "not"],
     "unit-no-unknown": null,
-    "unit-whitelist": [],
+    "unit-whitelist": ["%", "rem"],
     "value-no-vendor-prefix": true
   }
 }

src/components/HeadingOne/index.css

@@ -0,0 +1,3 @@
+.HeadingOne {
+  font: 600 1.8125rem/2rem Nova, sans-serif;
+}

src/components/HeadingOne/index.js

@@ -0,0 +1,12 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "./index.css";
+
+const HeadingOne = ({ children }) => <h2 className="HeadingOne">{children}</h2>;
+
+HeadingOne.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default HeadingOne;

src/components/HeadingTwo/index.css

@@ -0,0 +1,3 @@
+.HeadingTwo {
+  font: 300 1.625rem/2rem Nova, sans-serif;
+}

src/components/HeadingTwo/index.js

@@ -0,0 +1,12 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "./index.css";
+
+const HeadingTwo = ({ children }) => <h3 className="HeadingTwo">{children}</h3>;
+
+HeadingTwo.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default HeadingTwo;

src/components/Lede/index.css

@@ -0,0 +1,3 @@
+.Lede {
+  font: 300 1.625rem/2rem Nova, sans-serif;
+}

src/components/Lede/index.js

@@ -0,0 +1,12 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "./index.css";
+
+const Lede = ({ children }) => <p className="Lede">{children}</p>;
+
+Lede.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default Lede;

src/components/ListItem/index.css

@@ -0,0 +1,4 @@
+.ListItem {
+  font: 300 1rem/1.5rem system-ui;
+  margin-left: 0.25rem;
+}

src/components/ListItem/index.js

@@ -0,0 +1,12 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "./index.css";
+
+const ListItem = ({ children }) => <li className="ListItem">{children}</li>;
+
+ListItem.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default ListItem;

src/components/Paragraph/index.css

@@ -0,0 +1,3 @@
+.Paragraph {
+  font: 300 1rem/1.5rem system-ui;
+}

src/components/Paragraph/index.js

@@ -0,0 +1,12 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "./index.css";
+
+const Paragraph = ({ children }) => <p className="Paragraph">{children}</p>;
+
+Paragraph.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default Paragraph;

src/components/Title/index.css

@@ -0,0 +1,10 @@
+.Title {
+  font: 600 2.25rem/2.5rem Nova, sans-serif;
+}
+
+@media (min-width: 40rem) {
+  .Title {
+    font-size: 2.875rem;
+    line-height: 3rem;
+  }
+}

src/components/Title/index.js

@@ -0,0 +1,12 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "./index.css";
+
+const Title = ({ children }) => <h1 className="Title">{children}</h1>;
+
+Title.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default Title;

src/components/UnorderedList/index.css

@@ -0,0 +1,4 @@
+.UnorderedList {
+  font: 300 1rem/1.5rem system-ui;
+  padding-left: 1rem;
+}

src/components/UnorderedList/index.js

@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "./index.css";
+
+const UnorderedList = ({ children }) => (
+  <ul className="UnorderedList">{children}</ul>
+);
+
+UnorderedList.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default UnorderedList;

src/index.css

@@ -0,0 +1,67 @@
+/**
+ * Display font definitions
+ */
+
+@font-face {
+  font-family: Nova;
+  font-style: normal;
+  font-weight: 300;
+  src: url(./nova-light.woff);
+}
+
+@font-face {
+  font-family: Nova;
+  font-style: normal;
+  font-weight: 600;
+  src: url(./nova-semibold.woff);
+}
+
+/**
+ * Minimal reset
+ */
+
+/* stylelint-disable selector-max-universal */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* stylelint-enable */
+
+/**
+ * Foundation proportional font-sizing system
+ *
+ * The font-size of the html selector is scaled according to the viewport width.
+ * This provides a general rule for readable text and optimal line length.
+ * Components can then build of top of this general rule by using rem units.
+ * Thus, the majority of CSS will use rem units and target class selectors.
+ * Hence, the selector-max-type and declaration-property-unit-whitelist stylelint rules
+ * are only disabled for the following code, rather than turned off globally.
+ */
+
+/* stylelint-disable selector-max-type, declaration-property-unit-whitelist */
+
+html {
+  font-size: 93.75%;
+}
+
+@media (min-width: 36rem) {
+  html {
+    font-size: 100%;
+  }
+}
+
+@media (min-width: 40rem) {
+  html {
+    font-size: 106.25%;
+  }
+}
+
+@media (min-width: 44rem) {
+  html {
+    font-size: 112.5%;
+  }
+}
+
+/* stylelint-enable */

src/layouts/index.css

@@ -0,0 +1,7 @@
+/** @define Layout */
+
+.Layout {
+  margin: 0 auto;
+  max-width: 46rem;
+  padding: 1rem;
+}

src/layouts/index.js

@@ -0,0 +1,13 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "../index.css";
+import "./index.css";
+
+const Layout = ({ children }) => <main className="Layout">{children()}</main>;
+
+Layout.propTypes = {
+  children: PropTypes.any
+};
+
+export default Layout;

src/pages/index.css

@@ -0,0 +1,45 @@
+/** @define Index */
+
+.Index-typography {
+  background: whitesmoke;
+  margin-top: 1rem;
+  padding: 1rem;
+}
+
+.Index-typographyItem:not(:first-child) {
+  margin-top: 1rem;
+}
+
+.Index-typographyItemLabel {
+  font: 300 0.875rem/1.5rem system-ui;
+}
+
+.Index-scale {
+  background: whitesmoke;
+  margin-top: 1rem;
+  padding: 1rem;
+}
+
+.Index-scaleItem {
+  font: 300 1.625rem/2rem Nova, sans-serif;
+}
+
+.Index-scaleItem:not(:first-child) {
+  margin-top: 1rem;
+}
+
+.Index-headingOne {
+  margin-top: 2rem;
+}
+
+.Index-headingTwo {
+  margin-top: 2rem;
+}
+
+.Index-paragraph {
+  margin-top: 1rem;
+}
+
+.Index-unorderedList {
+  margin-top: 1rem;
+}