templates: Fix awkward typed title wrapping on phones

Fixes #19

templates/.dir-locals.el

@@ -1,4 +1,5 @@
 ((nil . ((indent-tabs-mode . nil)
          (tab-width . 4)
          (fill-column . 80)
-         (projectile-project-run-cmd . "cd templates && parcel serve --no-autoinstall"))))
+         (projectile-project-run-cmd . "cd templates && parcel serve --no-autoinstall")))
+ (scss-mode . ((css-indent-offset . 2))))

templates/src/lib/scss/_typed.scss

@@ -10,11 +10,11 @@
   $iterations: math.ceil(math.div($duration, 1s)) * 2;
 
   animation: $name ease-in-out 500ms $iterations alternate;
-  content: " ";
+  content: " ";
 
   @keyframes #{$name} {
     from {
-      content: " ";
+      content: " ";
     }
 
     to {
@@ -25,6 +25,8 @@
 
 /// Animate a piece of text as if it was being typed by a human.
 @mixin typed($text, $duration) {
+  word-break: break-all;
+
   // We don't want a linearly typed set of text, which makes this
   // singificantly more complex.
   //