From 1099a75509ec80ccf9632bd0c1ff74e14579a9bd Mon Sep 17 00:00:00 2001
From: John Shaver <john@jshaver.net>
Date: Thu, 2 Aug 2018 21:53:06 -0700
Subject: [PATCH] Added more use cases to sliding text.

---
 lib/extensions/admin/index.html               |  6 ++-
 .../styles/vertical-slide.css                 | 37 +++++++++----------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/lib/extensions/admin/index.html b/lib/extensions/admin/index.html
index aad1cbe..28f628b 100644
--- a/lib/extensions/admin/index.html
+++ b/lib/extensions/admin/index.html
@@ -77,7 +77,11 @@
             new values are included in the style comments.
           -->
           <span class="accent-color">to test your webhooks.</span>
-          <span class="accent-color">to show your project to Grandma.</span>
+          <span class="accent-color">to show your project to Mom.</span>
+          <span class="accent-color">to test your site on mobile.</span>
+          <span class="accent-color">to work from 127.0.0.1.</span>
+          <span class="accent-color">to access your raspberry pi.</span>
+          <span class="accent-color">to build peer-to-peer apps.</span>
         </div></h2>
         <h2 id="download-section">Quickstart with bash</h2>
         <div class="quickstart-step">
diff --git a/lib/extensions/admin/static-site-assets/styles/vertical-slide.css b/lib/extensions/admin/static-site-assets/styles/vertical-slide.css
index fc54c08..5037452 100644
--- a/lib/extensions/admin/static-site-assets/styles/vertical-slide.css
+++ b/lib/extensions/admin/static-site-assets/styles/vertical-slide.css
@@ -11,9 +11,9 @@ nth: the value in "nth-child())"
 	text-indent: 8px;
 }
 .sliding-vertical span{
-	animation: topToBottom 5s linear infinite 0s;/* interval * n */
-	-ms-animation: topToBottom 5s linear infinite 0s;/* interval * n */
-	-webkit-animation: topToBottom 5s linear infinite 0s;/* interval * n */
+	animation: topToBottom 15s linear infinite 0s;/* interval * n */
+	-ms-animation: topToBottom 15s linear infinite 0s;/* interval * n */
+	-webkit-animation: topToBottom 15s linear infinite 0s;/* interval * n */
 	opacity: 0;
 	overflow: hidden;
 	position: absolute;
@@ -23,7 +23,6 @@ nth: the value in "nth-child())"
 	-ms-animation-delay: 2.5s;/* (nth - 1) * interval */
 	-webkit-animation-delay: 2.5s;/* (nth - 1) * interval */
 }
-/*
 .sliding-vertical span:nth-child(3){
 	animation-delay: 5s;
 	-ms-animation-delay: 5s;
@@ -43,9 +42,9 @@ nth: the value in "nth-child())"
 .sliding-vertical span:nth-child(6){
 	animation-delay: 12.5s;
 	-ms-animation-delay: 12.5s;
-	-webkit-animation-delay: 7.5s;
+	-webkit-animation-delay: 12.5s;
 }
-
+/*
 .sliding-vertical span:nth-child(7){
 	animation-delay: 15s;
 	-ms-animation-delay: 15s;
@@ -55,31 +54,31 @@ nth: the value in "nth-child())"
 /*topToBottom Animation*/
 @keyframes topToBottom{
 	0% { opacity: 0; transform: translateY(-50px); }
-	12.5% { opacity: 1; transform: translateY(0px); }/* transitionTime * interval * n */
-	50% { opacity: 1; transform: translateY(0px); } /* interval/(interval * n) */
-	62.5% { opacity: 0; transform: translateY(50px); } /* interval/(interval * n) + transitionTime */
+	6.667% { opacity: 1; transform: translateY(0px); }/* transitionTime/(interval*n) */
+	16.667% { opacity: 1; transform: translateY(0px); } /* 1/n */
+	23.333% { opacity: 0; transform: translateY(50px); } /* (interval + transitionTime)/(n*interval) */
 }
 
 @-moz-keyframes topToBottom{
 	0% { opacity: 0; -moz-transform: translateY(-50px); }
-	12.5% { opacity: 1; -moz-transform: translateY(0px); }
-	50% { opacity: 1; -moz-transform: translateY(0px); }
-	62.5% { opacity: 0; -moz-transform: translateY(50px); }
+	6.667% { opacity: 1; -moz-transform: translateY(0px); }
+	16.667% { opacity: 1; -moz-transform: translateY(0px); }
+	23.333% { opacity: 0; -moz-transform: translateY(50px); }
 }
 @-webkit-keyframes topToBottom{
 	0% { opacity: 0; -webkit-transform: translateY(-50px); }
-	12.5% { opacity: 1; -webkit-transform: translateY(0px); }
-	50% { opacity: 1; -webkit-transform: translateY(0px); }
-	62.5% { opacity: 0; -webkit-transform: translateY(50px); }
+	6.667% { opacity: 1; -webkit-transform: translateY(0px); }
+	16.667% { opacity: 1; -webkit-transform: translateY(0px); }
+	23.333% { opacity: 0; -webkit-transform: translateY(50px); }
 }
 @-ms-keyframes topToBottom{
 	0% { opacity: 0; -ms-transform: translateY(-50px); }
-	12.5% { opacity: 1; -ms-transform: translateY(0px); }
-	25% { opacity: 1; -ms-transform: translateY(0px); }
-	62.5% { opacity: 0; -ms-transform: translateY(50px); }
+	6.667% { opacity: 1; -ms-transform: translateY(0px); }
+	16.667% { opacity: 1; -ms-transform: translateY(0px); }
+	23.333% { opacity: 0; -ms-transform: translateY(50px); }
 }
 
 
 .install-for {
   margin-top: 3.1111111113em;
-}
\ No newline at end of file
+}