Responsively size UI

TL;DR: scale down UI for non-mobile devices.

I pulled the screen resolution for my phone, the Google Pixel 4, off of the
internet. I created a device profile in Chrome to develop this application
specifically for my phone. To my surprise, when I opened the app on my phone,
many of elements that looked good in Google Chrome, looked askew on my phone. I
needed to troubleshoot.

Here's how I did that:
I used Tailwind to responsively color the bg for each breakpoint to see if my
device was sm, md, lg, xl (according to Tailwind's breakpoint
terminology). After reading Tailwind's documentation and comparing their
breakpoints with my Pixel 4's width (i.e. 1080px), I figured that my device
would be lg. It's not; it's md, which I confirmed by using ngrok to load
localhost:8000 on my phone and see that the background-color was
"md:bg-green-600".

I'm still unsure why my device is not lg, but knowing that my device was md
was enough to fix many of the styling issues. My current theory is that while
my screen's resolution is 1080 wide, the pixel density affects the media query
for the breakpoint.

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 ]