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