From 106457de4b5fc8172ce302eaa61c7625150e67a1 Mon Sep 17 00:00:00 2001 From: William Carroll <wpcarro@gmail.com> Date: Sun, 11 Oct 2020 10:09:15 +0100 Subject: 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 --- scratch/habit-screens/client/index.html | 8 +++++++- 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 [] -- cgit 1.4.1