refactor: use scss features

src/assets/css/fonts.scss

@@ -1,5 +1,11 @@
-html {
+@mixin font($weight: null, $size: null) {
     font-family: "Noto Sans", sans-serif;
+    font-weight: $weight;
+    font-size: $size;
+}
+
+html {
+    @include font;
     font-size: 93%;
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
@@ -7,25 +13,16 @@ html {
     text-rendering: optimizeLegibility;
 }
 
-h1,
-h2,
-h3 {
-    font-family: "Noto Sans", sans-serif;
-}
-
 h1 {
-    font-weight: 400;
+    @include font(400, 1.8em);
-    font-size: 1.8em;
 }
 
 h2 {
-    font-weight: 400;
+    @include font(400, 1.5em);
-    font-size: 1.5em;
 }
 
 h3 {
-    font-weight: 400;
+    @include font(400, 1.17em);
-    font-size: 1.17em;
 }
 
 .layout-tv {

src/assets/css/fonts.sized.scss

@@ -1,31 +1,31 @@
-h1 {
+@mixin header-font($size: null) {
     font-weight: 400;
-    font-size: 1.8em;
+    font-size: $size;
 }
 
-.layout-desktop h1 {
+html {
-    font-size: 2em;
+    @media all and (min-height: 720px) {
-}
-
-h2 {
-    font-weight: 400;
-    font-size: 1.5em;
-}
-
-h3 {
-    font-weight: 400;
-    font-size: 1.17em;
-}
-
-@media all and (min-height: 720px) {
-    html {
         font-size: 20px;
     }
-}
 
-/* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
+    /* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
-@media all and (min-height: 1000px) {
+    @media all and (min-height: 1000px) {
-    html {
         font-size: 27px;
     }
 }
+
+h1 {
+    @include header-font(1.8em);
+
+    .layout-desktop & {
+        font-size: 2em;
+    }
+}
+
+h2 {
+    @include header-font(1.8em);
+}
+
+h3 {
+    @include header-font(1.17em);
+}

src/assets/css/livetv.scss

@@ -2,8 +2,8 @@
     padding-bottom: 15em;
 }
 
-@media all and (min-width: 62.5em) {
+#guideTab {
-    #guideTab {
+    @media all and (min-width: 62.5em) {
         padding-left: 0.5em;
     }
 }

src/assets/css/site.scss

@@ -16,6 +16,17 @@ body {
     -webkit-font-smoothing: antialiased;
 }
 
+.clipForScreenReader {
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+}
+
 .material-icons {
     /* Fix font ligatures on older WebOS versions */
     -webkit-font-feature-settings: "liga";