From 862867e1a60c0b4e0534b42972ed53e1bd4901d4 Mon Sep 17 00:00:00 2001
From: Kayne Ruse <kayneruse@gmail.com>
Date: Fri, 14 Jun 2019 06:24:09 +1000
Subject: [PATCH] Improved marquee effect

---
 public/styles/shared.css      | 67 +++++++++++++++++++++++++----------
 src/components/pages/home.jsx |  4 +--
 2 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/public/styles/shared.css b/public/styles/shared.css
index 7059991..e4b02b5 100644
--- a/public/styles/shared.css
+++ b/public/styles/shared.css
@@ -362,29 +362,60 @@ pre {
 	);
 }
 
+/* marquee effect */
+.marqueeContainer { /* wrap the marquee with this to get the correct overflow effect */
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
 .marquee {
+	-moz-animation: marquee 20s linear infinite;
+	-webkit-animation: marquee 20s linear infinite;
+	animation: marquee 20s linear infinite;
+}
+
+.marquee.fast { /* for smaller text regions */
 	-moz-animation: marquee 10s linear infinite;
 	-webkit-animation: marquee 10s linear infinite;
 	animation: marquee 10s linear infinite;
+}
+
+@media screen and (max-width: 480px) { /* comfortable speed based on screen size */
+	.marquee {
+		-moz-animation: marquee 10s linear infinite;
+		-webkit-animation: marquee 10s linear infinite;
+		animation: marquee 10s linear infinite;
 	}
-	@-moz-keyframes marquee {
-		0% { transform: translateX(100%); }
-		100% { transform: translateX(-100%); }
-	}
-	@-webkit-keyframes marquee {
-		0% { transform: translateX(100%); }
-		100% { transform: translateX(-100%); }
-	}
-	@keyframes marquee {
-		0% {
-			-moz-transform: translateX(100%);
-			-webkit-transform: translateX(100%);
-			transform: translateX(100%) }
-		100% {
-			-moz-transform: translateX(-100%);
-			-webkit-transform: translateX(-100%);
-			transform: translateX(-100%); }
-		}
+
+	.marquee.fast {
+		-moz-animation: marquee 5s linear infinite;
+		-webkit-animation: marquee 5s linear infinite;
+		animation: marquee 5s linear infinite;
+	}
+}
+
+@-moz-keyframes marquee {
+	0% { transform: translateX(100%); }
+	100% { transform: translateX(-100%); }
+}
+
+@-webkit-keyframes marquee {
+	0% { transform: translateX(100%); }
+	100% { transform: translateX(-100%); }
+}
+
+@keyframes marquee {
+	0% {
+		-moz-transform: translateX(100%);
+		-webkit-transform: translateX(100%);
+		transform: translateX(100%)
+	}
+	100% {
+		-moz-transform: translateX(-100%);
+		-webkit-transform: translateX(-100%);
+		transform: translateX(-100%);
 	}
 }
 
diff --git a/src/components/pages/home.jsx b/src/components/pages/home.jsx
index 6517662..36d6e49 100644
--- a/src/components/pages/home.jsx
+++ b/src/components/pages/home.jsx
@@ -34,10 +34,10 @@ class Home extends React.Component {
 		//A bit of fun
 		let Tagline = () => {
 			if (this.state.tagline === 'marquee') {
-				return (<p className='marquee'><em>I hope this CSS marquee effect works in all browsers!</em></p>);
+				return (<div className='marqueeContainer'><em><p className='marquee'>I hope this CSS marquee effect works in all browsers!</p></em></div>);
 			}
 			if (this.state.tagline === 'rainbow') {
-				return (<p className='centered rainbowText'><em>I hope this CSS rainbow effect works in all browsers!</em></p>);
+				return (<em><p className='centered rainbowText'>I hope this CSS rainbow effect works in all browsers!</p></em>);
 			}
 			return (<p className='centered'><em><Markdown source={this.state.tagline} escapeHtml={true} /></em></p>);
 		}