5 files changed, 84 insertions, 12 deletions
diff --git a/website/sandbox/learnpianochords/src/Overview.elm b/website/sandbox/learnpianochords/src/Overview.elm
index efcf5f5e1e0a..021d15955d8c 100644
--- a/website/sandbox/learnpianochords/src/Overview.elm
+++ b/website/sandbox/learnpianochords/src/Overview.elm
@@ -3,6 +3,7 @@ module Overview exposing (render)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
+import Responsive
 import State
 import UI
 
@@ -10,7 +11,11 @@ import UI
 header1 : String -> Html msg
 header1 copy =
     h2
-        [ [ "text-center", "text-6xl", "pt-24", "pb-12" ]
+        [ [ "text-center"
+          , "pt-24"
+          , "pb-12"
+          , Responsive.h1
+          ]
             |> UI.tw
             |> class
         ]
@@ -19,13 +24,26 @@ header1 copy =
 
 header2 : String -> Html msg
 header2 copy =
-    h2 [ [ "text-center", "text-5xl", "pb-10" ] |> UI.tw |> class ]
+    h2
+        [ [ "text-center"
+          , "pb-10"
+          , Responsive.h2
+          ]
+            |> UI.tw
+            |> class
+        ]
         [ text copy ]
 
 
 paragraph : String -> Html msg
 paragraph copy =
-    p [ [ "text-4xl", "pb-10" ] |> UI.tw |> class ]
+    p
+        [ [ "pb-10"
+          , Responsive.h3
+          ]
+            |> UI.tw
+            |> class
+        ]
         [ text copy ]
 
 
@@ -39,7 +57,7 @@ numberedList items =
     ol
         [ [ "list-inside"
           , "list-decimal"
-          , "text-4xl"
+          , Responsive.h3
           ]
             |> UI.tw
             |> class
diff --git a/website/sandbox/learnpianochords/src/Preferences.elm b/website/sandbox/learnpianochords/src/Preferences.elm
index e385359b9f43..e90a669c21f2 100644
--- a/website/sandbox/learnpianochords/src/Preferences.elm
+++ b/website/sandbox/learnpianochords/src/Preferences.elm
@@ -4,6 +4,7 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Icon
+import Responsive
 import State
 import Tempo
 import Theory
@@ -98,7 +99,16 @@ keyCheckboxes model =
             ]
     in
     div []
-        [ h2 [ class "text-gray-500 text-center pt-10 text-5xl" ] [ text "Select keys" ]
+        [ h2
+            [ [ "text-gray-500"
+              , "text-center"
+              , "pt-10"
+              , Responsive.h2
+              ]
+                |> UI.tw
+                |> class
+            ]
+            [ text "Select keys" ]
         , ul []
             (circleOfFifths
                 |> List.map
@@ -115,7 +125,17 @@ keyCheckboxes model =
 closePreferences : Html State.Msg
 closePreferences =
     button
-        [ class "w-48 h-48 absolute right-0 top-0 z-10"
+        [ [ "w-48"
+          , "lg:w-32"
+          , "h-48"
+          , "lg:h-32"
+          , "absolute"
+          , "right-0"
+          , "top-0"
+          , "z-10"
+          ]
+            |> UI.tw
+            |> class
         , onClick (State.SetView State.Practice)
         ]
         [ Icon.close ]
diff --git a/website/sandbox/learnpianochords/src/Responsive.elm b/website/sandbox/learnpianochords/src/Responsive.elm
new file mode 100644
index 000000000000..5d97161df6a8
--- /dev/null
+++ b/website/sandbox/learnpianochords/src/Responsive.elm
@@ -0,0 +1,19 @@
+module Responsive exposing (..)
+
+{-| Returns a string containing all of the Tailwind selectors we use to size
+h2-sized elements across various devices. -}
+h1 : String
+h1 =
+    "text-6xl lg:text-4xl"
+
+{-| Returns a string containing all of the Tailwind selectors we use to size
+h2-sized elements across various devices. -}
+h2 : String
+h2 =
+    "text-5xl lg:text-3xl"
+
+{-| Returns a string containing all of the Tailwind selectors we use to size
+h3-sized elements across various devices. -}
+h3 : String
+h3 =
+    "text-4xl lg:text-2xl"
diff --git a/website/sandbox/learnpianochords/src/Tempo.elm b/website/sandbox/learnpianochords/src/Tempo.elm
index 50485c4c0aba..a1afd776acb4 100644
--- a/website/sandbox/learnpianochords/src/Tempo.elm
+++ b/website/sandbox/learnpianochords/src/Tempo.elm
@@ -3,6 +3,7 @@ module Tempo exposing (render)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
+import Responsive
 import UI
 
 
@@ -15,7 +16,14 @@ type alias Props msg =
 render : Props msg -> Html msg
 render { tempo, handleInput } =
     div [ class "text-center" ]
-        [ p [ class "text-5xl py-10" ] [ text (String.fromInt tempo ++ " BPM") ]
+        [ p
+            [ [ "py-10"
+              , Responsive.h2
+              ]
+                |> UI.tw
+                |> class
+            ]
+            [ text (String.fromInt tempo ++ " BPM") ]
         , UI.textField
             { placeholderText = "Set tempo..."
             , handleInput = handleInput
diff --git a/website/sandbox/learnpianochords/src/UI.elm b/website/sandbox/learnpianochords/src/UI.elm
index ac15b37d54fe..dd0b7d2e0c7e 100644
--- a/website/sandbox/learnpianochords/src/UI.elm
+++ b/website/sandbox/learnpianochords/src/UI.elm
@@ -3,6 +3,7 @@ module UI exposing (..)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
+import Responsive
 
 
 type Color
@@ -48,9 +49,11 @@ simpleButton { label, handleClick, color, classes } =
             [ bgForColor color
             , textForColor color
             , "py-10"
+            , "lg:py-6"
             , "px-20"
-            , "text-5xl"
+            , "lg:px-12"
             , "rounded-lg"
+            , Responsive.h2
             ]
     in
     button
@@ -80,8 +83,10 @@ textToggleButton { label, toggled, handleClick, classes } =
             [ textColor
             , textTreatment
             , "py-8"
+            , "lg:py-5"
             , "px-10"
-            , "text-5xl"
+            , "lg:px-6"
+            , Responsive.h2
             ]
     in
     button
@@ -100,12 +105,14 @@ textField :
 textField { placeholderText, handleInput, classes } =
     let
         inputClasses =
-            [ "text-5xl"
-            , "w-full"
+            [ "w-full"
             , "py-10"
+            , "lg:py-6"
             , "px-16"
+            , "lg:px-10"
             , "border"
             , "rounded-lg"
+            , Responsive.h2
             ]
     in
     input
@@ -153,9 +160,9 @@ overlayButton { label, handleClick, isVisible } =
                 tw
                     [ "transform"
                     , "-rotate-90"
-                    , "text-6xl"
                     , "text-white"
                     , "font-mono"
+                    , Responsive.h1
                     ]
             ]
             [ text label ]