From 575dcd8334c9b635bb375eaec1b6d80b941ab380 Mon Sep 17 00:00:00 2001
From: Guilherme Danno <guilherme.danno@gmail.com>
Date: Sat, 16 May 2020 00:54:46 -0300
Subject: [PATCH] refactor: use scss features

---
 src/assets/css/fonts.scss       | 23 ++++++++---------
 src/assets/css/fonts.sized.scss | 44 ++++++++++++++++-----------------
 src/assets/css/livetv.scss      |  4 +--
 src/assets/css/site.scss        | 11 +++++++++
 4 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/assets/css/fonts.scss b/src/assets/css/fonts.scss
index cb0da0f80..abffd3a0d 100644
--- a/src/assets/css/fonts.scss
+++ b/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;
-    font-size: 1.8em;
+    @include font(400, 1.8em);
 }
 
 h2 {
-    font-weight: 400;
-    font-size: 1.5em;
+    @include font(400, 1.5em);
 }
 
 h3 {
-    font-weight: 400;
-    font-size: 1.17em;
+    @include font(400, 1.17em);
 }
 
 .layout-tv {
diff --git a/src/assets/css/fonts.sized.scss b/src/assets/css/fonts.sized.scss
index f60a94f23..1cec58a4a 100644
--- a/src/assets/css/fonts.sized.scss
+++ b/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 {
-    font-size: 2em;
-}
-
-h2 {
-    font-weight: 400;
-    font-size: 1.5em;
-}
-
-h3 {
-    font-weight: 400;
-    font-size: 1.17em;
-}
-
-@media all and (min-height: 720px) {
-    html {
+html {
+    @media all and (min-height: 720px) {
         font-size: 20px;
     }
-}
 
-/* 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) {
-    html {
+    /* 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) {
         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);
+}
diff --git a/src/assets/css/livetv.scss b/src/assets/css/livetv.scss
index 695adff8c..032bcddf4 100644
--- a/src/assets/css/livetv.scss
+++ b/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;
     }
 }
diff --git a/src/assets/css/site.scss b/src/assets/css/site.scss
index db179afb2..d900a8bb4 100644
--- a/src/assets/css/site.scss
+++ b/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";