about summary refs log tree commit diff
path: root/scratch/habit-screens/client/index.html
diff options
context:
space:
mode:
authorWilliam Carroll <wpcarro@gmail.com>2020-10-11T09·09+0100
committerWilliam Carroll <wpcarro@gmail.com>2020-10-11T09·09+0100
commit106457de4b5fc8172ce302eaa61c7625150e67a1 (patch)
tree943ccd885152a3bd2bb803295b09c838f1dee362 /scratch/habit-screens/client/index.html
parent19fbdad1c0a93fbc177fdb1ae97354aa3bec4f9f (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/habit-screens/client/index.html')
-rw-r--r--scratch/habit-screens/client/index.html8
1 files changed, 7 insertions, 1 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>