add some style

nicolas-daniel · Feb 6, 2015 · 668d9a5 · 668d9a5
1 parent f767125
commit 668d9a5
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 13 deletions.
diff --git a/css/less/_params.less b/css/less/_params.less
@@ -0,0 +1,10 @@
+@black: #000;
+@grey: #f0f0f0;
+@indigo: #3F51B5;
+@red: #F44336;
+
+.opensans {
+	font-family : "Open Sans";
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
diff --git a/css/less/style.less b/css/less/style.less
@@ -4,4 +4,81 @@
 html, body {
 	width: 100%;
 	height: 100%;
+
+	background-color: @grey;
+}
+
+.interface {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	z-index: 999;
+}
+
+canvas {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	.translate(-50%, -50%);
+}
+
+.hour {
+	position: absolute;
+	top: calc(~"50% - 200px");
+	left: 50%;
+	.translate(-50%, -50%);
+
+	.opensans;
+	font-size: 24px;
+	color: @black;
+}
+
+.text {
+	.opensans;
+	font-size: 14px;
+	color: @black;
+}
+
+.text-made {
+	position: absolute;
+	bottom: 24px;
+	left: 24px;
+}
+
+.text-inspiration {
+	position: absolute;
+	bottom: 24px;
+	right: 24px;
+}
+
+.text-link {
+	position: relative;
+
+	color: @indigo;
+	text-decoration: none;
+
+	&:after {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 0;
+		height: 1px;
+
+		background-color: @indigo;
+
+		.transition(width 0.2s ease-out);
+	}
+
+	&:hover {
+		&:after {
+			width: 100%;
+		}
+	}
+}
+
+.love svg {
+	width: 12px;
+	height: 12px;
+	fill: @red;
 }
diff --git a/css/style.css b/css/style.css
@@ -1,5 +1,85 @@
+.opensans {
+  font-family: "Open Sans";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 html,
 body {
   width: 100%;
   height: 100%;
+  background-color: #f0f0f0;
+}
+.interface {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+}
+canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.hour {
+  position: absolute;
+  top: calc(50% - 200px);
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  font-family: "Open Sans";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 24px;
+  color: #000000;
+}
+.text {
+  font-family: "Open Sans";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 14px;
+  color: #000000;
+}
+.text-made {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+}
+.text-inspiration {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+}
+.text-link {
+  position: relative;
+  color: #3f51b5;
+  text-decoration: none;
+}
+.text-link:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background-color: #3f51b5;
+  -webkit-transition: width 0.2s ease-out;
+  -moz-transition: width 0.2s ease-out;
+  -o-transition: width 0.2s ease-out;
+  transition: width 0.2s ease-out;
+}
+.text-link:hover:after {
+  width: 100%;
+}
+.love svg {
+  width: 12px;
+  height: 12px;
+  fill: #f44336;
 }
diff --git a/index.tpl b/index.tpl
@@ -4,6 +4,8 @@
 	<meta charset="UTF-8">
 	<title>The clocks</title>
 
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+
 	<!-- @if NODE_ENV = 'dev' -->
 	<link rel="stylesheet" href="css/reset.css">
 	<link rel="stylesheet" href="css/style.css">
@@ -18,6 +20,10 @@
 	<!-- @endif -->
 </head>
 <body>
-
+	<div class="interface">
+		<div class="text text-made">Made with <span class="love"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="favorite-2-icon" d="M450.703,124.225C410.233,41.419,287.288,47.821,256,119.967c-31.288-72.146-154.233-78.548-194.703,4.257C13.59,221.837,124.309,314.82,256,448.014C387.691,314.82,498.41,221.837,450.703,124.225z"/></svg>
+		</span> by <a href="https://twitter.com/nicolasdnl" target="_blank" class="text-link">Nicolas Daniel</a></div>
+		<div class="text text-inspiration">Inspired by <a href="http://vimeo.com/52798481" target="_blank" class="text-link">Humans Since 1982</a></div>
+	</div>
 </body>
 </html>
diff --git a/js/clock.js b/js/clock.js
@@ -17,6 +17,10 @@
 	p.secondHourArray = [];
 	p.firstMinuteArray = [];
 	p.secondMinuteArray = [];
+	p.currentFirstMinute = 0;
+	p.currentSecondMinute = 0;
+	p.currentFirstHour = 0;
+	p.currentSecondHour = 0;
 
 	/**
 	 * Initialisation
@@ -331,28 +335,28 @@
 	p.setNumberTwo = function(array) {
 		for ( var i=0 ; i<array.length ; ++i ) {
 			if ( i == 0 ) {
-				p.setEastDirection(p.clocksarray[i].hour);
-				p.setEastDirection(p.clocksarray[i].minute);
+				p.setEastDirection(array[i].hour);
+				p.setEastDirection(array[i].minute);
 			}
 			if ( i == 1 ) {
-				p.setSouthDirection(p.clocksarray[i].hour);
-				p.setWestDirection(p.clocksarray[i].minute);
+				p.setSouthDirection(array[i].hour);
+				p.setWestDirection(array[i].minute);
 			}
 			if ( i == 2 ) {
-				p.setEastDirection(p.clocksarray[i].hour);
-				p.setSouthDirection(p.clocksarray[i].minute);
+				p.setEastDirection(array[i].hour);
+				p.setSouthDirection(array[i].minute);
 			}
 			if ( i == 3 ) {
-				p.setWestDirection(p.clocksarray[i].hour);
-				p.setNorthDirection(p.clocksarray[i].minute);
+				p.setWestDirection(array[i].hour);
+				p.setNorthDirection(array[i].minute);
 			}
 			if ( i == 4 ) {
-				p.setEastDirection(p.clocksarray[i].hour);
-				p.setNorthDirection(p.clocksarray[i].minute);
+				p.setEastDirection(array[i].hour);
+				p.setNorthDirection(array[i].minute);
 			}
 			if ( i == 5 ) {
-				p.setWestDirection(p.clocksarray[i].hour);
-				p.setWestDirection(p.clocksarray[i].minute);
+				p.setWestDirection(array[i].hour);
+				p.setWestDirection(array[i].minute);
 			}
 		}
 	}