Improved marquee effect

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%);
 	}
 }