banners are now svg images

styles/elements/banners.css

@@ -1,33 +1,76 @@
+.banner {
+	width: 100%;
+	--base_banner_height: 24px;
+	--banner_height: var(--base_banner_height); /*default*/
+	height: min(26vw, var(--banner_height));
 
-.pre_banner {
-	position: relative;
-	margin: 10px 0px 10px -100px;
-	animation-name: slide;
+	background-image: url(../img/banner_1.svg); /*default*/
+	background-size: contain;
+	background-repeat: repeat;
+	background-position-x: 0%;
+
+	animation-duration: 10s; /*default*/
+	animation-name: slide_svg;
 	animation-iteration-count: infinite;
-	animation-duration: 2s;
 	animation-timing-function: linear;
 	animation-direction: normal;
 }
-.pre_banner.pause {
-	animation-play-state: paused;
-}
-.pre_banner.reverse {
-	animation-direction: reverse;
-}
-.pre_banner.t05 {
-	animation-duration: 0.5s;
-}
-.pre_banner.t10 {
-	animation-duration: 1s;
-}
-.pre_banner.t15 {
-	animation-duration: 1.5s;
-}
-.pre_banner.t20 {
-	animation-duration: 2s;
-}
-@keyframes slide {
-	from {left:0;}
-	to {left:2.4em;}
+@keyframes slide_svg {
+	from {background-position-x: 0%;}
+	to   {background-position-x: 100%;}
 }
 
+
+
+/*
+* speeds
+*
+*/
+.banner_pause {
+	animation-play-state: paused;
+}
+.banner_reverse {
+	animation-direction: reverse;
+}
+.banner_speed_10 {
+	animation-duration: 10s;
+}
+.banner_speed_20 {
+	animation-duration: 20s;
+}
+.banner_speed_30 {
+	animation-duration: 30s;
+}
+.banner_speed_40 {
+	animation-duration: 40s;
+}
+.banner_speed_50 {
+	animation-duration: 50s;
+}
+
+
+
+/*
+* sizes
+*
+*/
+.banner_size_1 {
+	background-image: url(../img/banner_1.svg);
+	--banner_height: calc(var(--base_banner_height) * 1);
+}
+.banner_size_2 {
+	background-image: url(../img/banner_2.svg);
+	--banner_height: calc(var(--base_banner_height) * 2);
+}
+.banner_size_3 {
+	background-image: url(../img/banner_3.svg);
+	--banner_height: calc(var(--base_banner_height) * 3);
+}
+.banner_size_4 {
+	background-image: url(../img/banner_4.svg);
+	--banner_height: calc(var(--base_banner_height) * 4);
+}
+.banner_size_5 {
+	background-image: url(../img/banner_5.svg);
+	--banner_height: calc(var(--base_banner_height) * 5);
+}

styles/elements/banners_svg.css

@@ -1,21 +0,0 @@
-.banner_svg {
-	width: 100%;
-	height: 150px;
-	height: min(26vw, 150px);
-
-	background-image: url(../img/banner.svg);
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-repeat: repeat;
-	background-position-x: 0%;
-
-	animation-name: slide_svg;
-	animation-iteration-count: infinite;
-	animation-duration: 30s;
-	animation-timing-function: linear;
-	animation-direction: normal;
-}
-@keyframes slide_ssvg {
-	from {background-position-x: 0%;}
-	to   {background-position-x: 100%;}
-}

styles/img/banner_5.svg

@@ -1,7 +1,7 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	width="58"
-	height="293"
+	height="290"
 >
 	<defs>
 		<style type="text/css">