mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prefer handwritten font

Browse source 
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
This commit is contained in:
William Carroll 2020-10-11 10:09:15 +01:00
parent 19fbdad1c0
commit 106457de4b
2 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
scratch/habit-screens/client/index.html
View file

@ -3,7 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Elm SPA</title> <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> <script src="./Main.min.js"></script>
</head> </head>
<body> <body>

2
scratch/habit-screens/client/src/Habits.elm
View file

@ -146,7 +146,7 @@ render { today, visibleDayOfWeek, completed } =
Just weekday -> Just weekday ->
div div
[ class "font-sans py-6 px-6" [ class "container mx-auto py-6 px-6"
, tailwind [ ( "pt-20", today /= visibleDayOfWeek ) ] , tailwind [ ( "pt-20", today /= visibleDayOfWeek ) ]
] ]
[ header [] [ header []