From 04778daf9f5b017d4903b1cbb2efc983442242df Mon Sep 17 00:00:00 2001
From: David Dossett <ddossett@microsoft.com>
Date: Fri, 21 Sep 2018 12:18:11 -0700
Subject: [PATCH] Added text animation to "delightful" in paragraph 3

---
 docs/css/style.css | 41 +++++++++++++++++++++++++++++++++++++++++
 docs/index.html    | 21 +++++++++++++++------
 2 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/docs/css/style.css b/docs/css/style.css
index c36f875..5541315 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -100,6 +100,35 @@
   }
 }
 
+@keyframes jello {
+  0%,
+  11.1%,
+  100% {
+    transform: none;
+  }
+  22.2% {
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+  33.3% {
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+  44.4% {
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+  55.5% {
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+  66.6% {
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+  77.7% {
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+  88.8% {
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+
 /* Common */
 
 html {
@@ -202,6 +231,18 @@ h1 {
   padding: var(--text-block-spacing) 0;
 }
 
+.animate-letter {
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-iteration-count: infinite;
+  display: inline-block;
+}
+
+.jello {
+  animation-name: jello;
+  transform-origin: center;
+}
+
 /* Container */
 
 .container {
diff --git a/docs/index.html b/docs/index.html
index e8f4b84..dd7d91f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -34,22 +34,30 @@
     </header>
     <main>
       <h1>
-        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on
+        Microsoft is looking for designers who code to help create the most compelling developer
+        tools&nbsp;&amp;&nbsp;services on
         the planet.
       </h1>
       <p>
-        We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.
+        We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and
+        elsewhere.
       </p>
       <p>
-        We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
+        We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and
+        build the future
         of software development.
       </p>
       <p>
-        We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
+        We believe in diversity, openness, and building
+        <span class="jello animate-letter">d</span><span>e</span><span class="jello animate-letter">l</span><span>i</span><span
+          class="jello animate-letter">g</span><span>h</span><span class="jello animate-letter">t</span><span>f</span><span
+          class="jello animate-letter">u</span><span>l</span>
+        tools that empower every person and organization to achieve more.
       </p>
       <p>
         Interested? Send a PR with any improvement to
-        <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
+        <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a>
+        or
         <a href="mailto:mmuno@microsoft.com" title="Email address for mmuno@microsoft.com">email us</a>.
       </p>
     </main>
@@ -81,7 +89,8 @@ <h1>
       </span>
       <span class="footer-piece footer-piece--separate">
         Created by
-        <a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
+        <a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a>
+        contributors on
         <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
       </span>
     </p>