diff options
| -rw-r--r-- | website/sandbox/learnpianochords/src/Overview.elm | 26 | ||||
| -rw-r--r-- | website/sandbox/learnpianochords/src/Preferences.elm | 24 | ||||
| -rw-r--r-- | website/sandbox/learnpianochords/src/Responsive.elm | 19 | ||||
| -rw-r--r-- | website/sandbox/learnpianochords/src/Tempo.elm | 10 | ||||
| -rw-r--r-- | website/sandbox/learnpianochords/src/UI.elm | 17 |
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 ] |