X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=src%2Findex.html.in;h=8d19568f74c3664f8d3dead6a39bb6f60be26053;hb=cbd1fd189b26016347334c3361bcf79da153cb05;hp=ee40cf8f18a76fd260c2fe325df2776c7786f3cc;hpb=662ede5f24dd8029c633d7a38de5545b2a568e6c;p=charm-bypass.git

diff --git a/src/index.html.in b/src/index.html.in
index ee40cf8..8d19568 100644
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -46,29 +46,129 @@
       /* Define, load, and specify the custom font we use for the ticket
        * date, time, and service name. */
       @font-face {
-	font-family: "CharmBypass Ticket Text";
+	font-family: "CharmBypass Regular";
 	src:
-	  url("data:font/woff2;base64,@TICKETFONT@") format("woff2")
+	  url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
       }
 
       #servicename, #tickettime, #ticketdate {
-        font-family: "CharmBypass Ticket Text" !important;
+        font-family: "CharmBypass Regular";
+      }
+
+      @font-face {
+	font-family: "CharmBypass Bold";
+	src:
+	  url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
+      }
+
+      #serviceletter {
+	font-family: "CharmBypass Bold";
       }
 
       /************************/
       /* Scrolling animations */
       /************************/
+
+      /* Bus */
       @keyframes busroll {
 	from {
-	  transform: translate(0%, 0%);
+	  transform: translateX(0%);
 	}
 	to {
-	  transform: translate(100%, 0%);
+	  transform: translateX(100%);
 	}
       }
 
       #bus {
-	animation: busroll 15s linear infinite;
+	animation: busroll 23s linear infinite;
+      }
+
+
+      /* Tram */
+      @keyframes tramroll {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(100%);
+	}
+      }
+
+      #tram {
+	animation: tramroll 17s linear infinite;
+      }
+
+
+      /* Tram */
+      @keyframes trainroll {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(100%);
+	}
+      }
+
+      #train {
+	animation: trainroll 11s linear infinite;
+      }
+
+
+      /* Clouds */
+      @keyframes cloudsfloat {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(-50%);
+	}
+      }
+
+      #clouds {
+	animation: cloudsfloat 40s linear infinite;
+      }
+
+      @keyframes cloudscopyfloat {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(-50%);
+	}
+      }
+
+      #cloudscopy {
+	animation: cloudscopyfloat 40s linear infinite;
+      }
+
+
+      /* Trees */
+      @keyframes treespass {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(-50%);
+	}
+      }
+
+      #trees {
+        /* The trees move a little faster than the clouds */
+	animation: treespass 30s linear infinite;
+      }
+
+      @keyframes treescopypass {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(-50%);
+	}
+      }
+
+      #treescopy {
+        /* The trees move a little faster than the clouds */
+	animation: treescopypass 30s linear infinite;
       }
     </style>
   </head>