fix mobile

assets/scss/pages/about.scss

@@ -21,7 +21,6 @@
     overflow: hidden; /* Ensures the content is not revealed until the animation */
     border-right: .15em solid $primary; /* The typwriter cursor */
     white-space: nowrap; /* Keeps the content on a single line */
-    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
     animation: 
       typing 2s steps(40, end),
       blink-caret 1s step-end infinite;
@@ -36,6 +35,10 @@
   }
 }
 
+.typewriter {
+  display: inline-block;
+}
+
 /* The typing effect */
 @keyframes typing {
   from { width: 0 }

layouts/index.html

@@ -6,12 +6,14 @@
 
 <div class="splash-container">
   <div class="splash">
-    <div style="width:415px">
-    <h1>{{ .Params.heading }}</h1>
-  </div>
-    {{ if isset .Params "handle" }}
-    <span class="handle">@{{ .Params.handle }}</span>
-    {{ end }}
+    <div class="typewriter">
+      <h1>{{ .Params.heading }}</h1>
+    </div>
+    <div>
+      {{ if isset .Params "handle" }}
+      <span class="handle">@{{ .Params.handle }}</span>
+      {{ end }}
+    </div>
     <h2>
       {{ .Params.subheading }}
     </h2>