- Merge _fonts.scss to _page.scss

- Rename _page.scss to _document.scss
- Rename $fontfaces to $font-faces for consistency
- Document _fonts.scss mixins and functions
- Create mixins @font-face for one face

assets/styles/elements/_document.scss

@@ -0,0 +1,83 @@
+// ==========================================================================
+// Base / Page
+// ==========================================================================
+
+//
+// Simple page-level setup.
+//
+// 1. Include web fonts
+// 2. Ensure the page always fills at least the entire height of the viewport.
+// 3. Set the default `font-size` and `line-height` for the entire project,
+//    sourced from our default variables.
+
+@include font-faces($font-faces, $font-dir); /* [1] */
+
+html {
+    min-height: 100%; /* [2] */
+    line-height: $line-height;
+    font-family: ff("sans");
+    color: $color;
+    line-height: $line-height; /* [3] */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    @media (max-width: $to-small) {
+        font-size: $font-size - 2px;
+    }
+
+    @media (min-width: $from-small) and (max-width: $to-medium) {
+        font-size: $font-size - 2px;
+    }
+
+    @media (min-width: $from-medium) and (max-width: $to-large) {
+        font-size: $font-size - 1px;
+    }
+
+    @media (min-width: $from-large) and (max-width: $to-huge) {
+        font-size: $font-size; /* [1] */
+    }
+
+    @media (min-width: $from-huge) and (max-width: $to-gigantic) {
+        font-size: $font-size + 1px;
+    }
+
+    @media (min-width: $from-gigantic) and (max-width: $to-colossal) {
+        font-size: $font-size + 2px;
+    }
+
+    @media (min-width: $from-colossal) {
+        font-size: $font-size + 4px;
+    }
+
+    &.is-loading {
+        cursor: wait;
+    }
+
+    &.has-scroll-smooth {
+        overflow: hidden;
+    }
+
+    &.has-scroll-dragging {
+        user-select: none;
+    }
+}
+
+body {
+    .has-scroll-smooth & {
+        overflow: hidden;
+    }
+}
+
+::selection {
+    background-color: $selection-background-color;
+    color: $selection-text-color;
+    text-shadow: none;
+}
+
+a {
+    color: $link-color;
+
+    @include u-hocus {
+        color: $link-hover-color;
+    }
+}