Vendor fonts into Kittybox

These fonts are licensed under OFL 1.1, which means I can freely
redistribute them. Ain't that nice?

Change-Id: Ide32286305680865652db17c8d482b5ac0f20a50

1 files changed, 75 insertions, 10 deletions

diff --git a/templates/assets/style.css b/templates/assets/style.css
index 98cb3a9..a06bf23 100644
--- a/templates/assets/style.css
+++ b/templates/assets/style.css
@@ -1,4 +1,47 @@
-@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Lato&display=swap');
+/* lato-regular - latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/lato-v24-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* lato-italic - latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 400;
+  src: url('./fonts/lato-v24-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* lato-700 - latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url('./fonts/lato-v24-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* lato-700italic - latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 700;
+  src: url('./fonts/lato-v24-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* caveat-500 - cyrillic_cyrillic-ext_latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Caveat';
+  font-style: normal;
+  font-weight: 500;
+  src: url('./fonts/caveat-v18-cyrillic_cyrillic-ext_latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
 
 :root {
     font-family: var(--font-normal);
@@ -19,19 +62,31 @@ h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-accent);
 }
 .titanic {
-    font-size: 3.815rem
+    font-size: calc(1rem * pow(var(--type-scale), 6));
 }
 h1, .xxxlarge {
     margin-top: 0;
     margin-bottom: 0;
-    font-size: 3.052rem;
-}
-h2, .xxlarge {font-size: 2.441rem;}
-h3, .xlarge {font-size: 1.953rem;}
-h4, .larger {font-size: 1.563rem;}
-h5, .large {font-size: 1.25rem;}
-h6, .normal {font-size: 1rem;}
-small, .small { font-size: 0.8em; }
+    font-size: calc(1rem * pow(var(--type-scale), 5));
+}
+h2, .xxlarge {
+    font-size: calc(1rem * pow(var(--type-scale), 4));
+}
+h3, .xlarge {
+    font-size: calc(1rem * pow(var(--type-scale), 3));
+}
+h4, .larger {
+    font-size: calc(1rem * pow(var(--type-scale), 2));
+}
+h5, .large {
+    font-size: calc(1rem * var(--type-scale));
+}
+h6, .normal {
+    font-size: 1rem;
+}
+small, .small {
+    font-size: calc(1rem * pow(var(--type-scale, -1)));
+}
 
 nav#headerbar {
     background: var(--primary-accent);
@@ -235,3 +290,13 @@ body > a#skip-to-content:focus {
     width: auto; height: auto; clip: auto;
     z-index: 999;
 }
+
+.screen-reader-only:not(:focus):not(:active) {
+  clip: rect(0 0 0 0); 
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap; 
+  width: 1px;
+}