tvl-depot/scratch/habit-screens/client/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Elm SPA</title>
    <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>
    <div id="mount"></div>
    <script>
     Elm.Main.init({node: document.getElementById("mount")});
    </script>
  </body>
</html>
Begin working on Habit Screens project Created a small MVP for digitizing my weekly habits. Much more to come. Lots of things happening: - Copied the boilerplate to get started - Added a brief project-level README - Outlined my ambitions in design.md See README and design.md for more context on this project. 2020-10-10 18:04:24 +02:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8" />`
			`<title>Elm SPA</title>`
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 2020-10-11 11:09:15 +02:00			`<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chilanka">`
			`<link rel="stylesheet" href="./output.css">`
			`<style>`
			`body {`
			`font-family: 'Chilanka';`
			`}`
			`</style>`
Begin working on Habit Screens project Created a small MVP for digitizing my weekly habits. Much more to come. Lots of things happening: - Copied the boilerplate to get started - Added a brief project-level README - Outlined my ambitions in design.md See README and design.md for more context on this project. 2020-10-10 18:04:24 +02:00			`<script src="./Main.min.js"></script>`
			`</head>`
			`<body>`
			`<div id="mount"></div>`
			`<script>`
			`Elm.Main.init({node: document.getElementById("mount")});`
			`</script>`
			`</body>`
			`</html>`