pull in v11.0.1 from upstream

resources/css/global/_typography.scss

@@ -0,0 +1,147 @@
+.wysiwyg {
+  *:first-child {
+    margin-top: 0;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $primary;
+  font-weight: 700;
+  font-family: $font;
+  line-height: 1.1em;
+  margin: 1.5em 0 0.25em;
+  padding: 0;
+
+  &.section-title {
+    margin-top: 0;
+  }
+
+  @media screen {
+    .knockout & {
+      color: $white;
+    }
+  }
+}
+
+h1 {
+  font-size: 1.75em;
+  margin-top: 0;
+}
+
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.25em; }
+
+h4,
+h5 { font-size: 1.15em; }
+
+@media (min-width: $screen-sm) {
+  h1 { font-size: 2.5em; }
+  h2 { font-size: 2em; }
+  h3 { font-size: 1.5em; }
+
+  h4,
+  h5 {
+    font-size: 1.25em;
+  }
+}
+
+p,
+li,
+td,
+label {
+  color: $grey;
+  font-family: $font;
+  font-weight: 400;
+  line-height: 1.5em;
+  margin: 0 0 0.8em;
+  padding: 0;
+
+  @media screen {
+    .knockout & {
+      color: $white;
+    }
+  }
+}
+
+a {
+  color: $primary;
+  text-decoration: none;
+  outline: none;
+  transition: all 300ms ease;
+
+  &:hover,
+  &:focus {
+    color: $primary-dark;
+    text-decoration: none;
+  }
+
+  @media screen {
+    .knockout & {
+      color: $white;
+
+      &:hover,
+      &:focus {
+        color: $primary-light;
+      }
+    }
+  }
+}
+
+strong { font-weight: 700; }
+small { font-size: 0.8em; }
+
+li {
+  margin: 0.125em 0;
+  line-height: 1.5em;
+}
+
+ul,
+ol {
+  margin: 0 0 0.7em;
+  padding: 0 0 0 1.2em;
+  text-align: left;
+}
+
+.nolist {
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  list-style: none;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+hr {
+  margin: 1.5em auto 2em;
+  height: 0;
+  border: 0 solid $grey-light;
+  border-width: $borderThin 0 0;
+
+  @media screen {
+    .knockout & {
+      border-color: $white;
+    }
+  }
+}
+
+.align {
+  &-centre {
+    text-align: center;
+  }
+
+  &-right {
+    text-align: right;
+  }
+}