Add father's day message

5 years ago · da4db9cf9a
3 changed files with 25 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,7 @@
 		<title>Parallax Test</title>
 	</head>
 	<body>
+		<p id="event-text">Happy Father's Day!</p>
 		<canvas id="canvas-main"></canvas>
 		
 		<!---------------->
--- a/main.css
+++ b/main.css
@ -1,11 +1,29 @@
 html, body { font-size: 100%; }
 body
 {
-    font-family: sans-serif;
+	font-family: sans-serif;
 }

 #canvas-main
 {
-    position: absolute;
-    top: 0; right: 0; bottom: 0; left: 0;
+	position: absolute;
+	top: 0; right: 0; bottom: 0; left: 0;
+    z-index: -100;
+}
+
+#event-text
+{
+	position: absolute; top: 0; left: 0; right: 0;
+    z-index: 100;
+    
+    margin: 0;
+    padding: 0.2em;
+    
+    text-align: center;
+    font-size: 3em;
+    font-weight: bold;
+    
+    background: linear-gradient(to left, transparent, white, transparent);
+    color: transparent;
+    -webkit-background-clip: text;
 }
--- a/renderer.js
+++ b/renderer.js
@ -101,6 +101,9 @@ class Renderer
 }

 window.addEventListener("load", function (event) {
+	if((new Date()).toISOString().substr(5, 5) !== "06-19")
+		document.getElementById("event-text").style.display = "none";
+	
 	var canvas = document.getElementById("canvas-main"),
 		renderer = new Renderer(canvas);
 	renderer.start();