Initial commit

scss/_typography.scss

@@ -0,0 +1,69 @@
+@font-face {
+  font-family: 'Gelasio';
+  src: url('../assets/fonts/Gelasio-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'NewsCycle';
+  src: url('../assets/fonts/NewsCycle-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+    font-family: $font-primary;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-heading;
+}
+
+a,
+a:active {
+    color: $dark-gray;
+    transition: color 0.2s ease-out;
+}
+
+a:hover {
+  color: $less-dark-gray;
+}
+
+p {
+  line-height: 1.2;
+}
+
+.link-button {
+  display: inline-flex;
+  background-color: $light_gray;
+  color: $dark_gray;
+  padding: 0.6rem 0.7rem;
+  font-size: 0.9rem;
+  transition: background-color 0.3s ease-out;
+  text-decoration: none;
+  justify-content: center;
+  align-items: center;
+  word-break: break-all;
+  max-width: 100%;
+
+  > i {
+    margin-right: 0.6rem;
+  }
+
+  &:hover {
+    background-color: $less_light-gray;
+  }
+
+  @media ($tablet) {
+    font-size: unset;
+    padding: 0.6rem 1rem;
+  }
+
+  // Multi-word titles: break at word boundaries; only split a word mid-letter
+  // as a last resort when it overflows the container.
+  &--wrap-word {
+    word-break: normal;
+    overflow-wrap: break-word;
+  }
+}