diff options
| author | William Carroll <wpcarro@gmail.com> | 2020-10-11T09·09+0100 |
|---|---|---|
| committer | William Carroll <wpcarro@gmail.com> | 2020-10-11T09·09+0100 |
| commit | 106457de4b5fc8172ce302eaa61c7625150e67a1 (patch) | |
| tree | 943ccd885152a3bd2bb803295b09c838f1dee362 /scratch | |
| parent | 19fbdad1c0a93fbc177fdb1ae97354aa3bec4f9f (diff) | |
Prefer handwritten font
Use the Google Fonts API to fetch a handwritten font, which gives the app a modicum of personality. There are more "best practices" ways to do this, such as: - Download the font once, and include it in the bundle - Extend the Tailwind configure to recognize the font - Ditch the inline <style> block But I don't need the performance benefits that the first bullet provides. And the second two bullets are more relevant for a larger application with more than one font. So I think in this case, the easiest solution is best. Also: - Use `container` and `mx-auto` to constrain content for wide screens
Diffstat (limited to 'scratch')
| -rw-r--r-- | scratch/habit-screens/client/index.html | 8 | ||||
| -rw-r--r-- | scratch/habit-screens/client/src/Habits.elm | 2 |
2 files changed, 8 insertions, 2 deletions
diff --git a/scratch/habit-screens/client/index.html b/scratch/habit-screens/client/index.html index bdc421ee3f09..b587e0901284 100644 --- a/scratch/habit-screens/client/index.html +++ b/scratch/habit-screens/client/index.html @@ -3,7 +3,13 @@ <head> <meta charset="UTF-8" /> <title>Elm SPA</title> - <link rel="stylesheet" href="./output.css" /> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chilanka"> + <link rel="stylesheet" href="./output.css"> + <style> + body { + font-family: 'Chilanka'; + } + </style> <script src="./Main.min.js"></script> </head> <body> diff --git a/scratch/habit-screens/client/src/Habits.elm b/scratch/habit-screens/client/src/Habits.elm index f605ba7a3474..88a3d686912f 100644 --- a/scratch/habit-screens/client/src/Habits.elm +++ b/scratch/habit-screens/client/src/Habits.elm @@ -146,7 +146,7 @@ render { today, visibleDayOfWeek, completed } = Just weekday -> div - [ class "font-sans py-6 px-6" + [ class "container mx-auto py-6 px-6" , tailwind [ ( "pt-20", today /= visibleDayOfWeek ) ] ] [ header [] |