From cc7c8051683c10467ed6759c30d249752b451173 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Sat, 30 Nov 2013 18:51:43 +0100
Subject: [PATCH] =?UTF-8?q?gr=C3=B6sse=20l=C3=A4sst=20sich=20nun=20konfigu?=
 =?UTF-8?q?rieren?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  3 ++-
 uhr.css    | 29 +++++++++++++----------------
 uhr.js     | 16 ++++++++++++----
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 9d5f1ca..c933b22 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		new Uhr($('#uhr'), {
 			layout: 'de_CH',
 			theme: 'black',
-			status: 'on'
+			status: 'on',
+			width: '20em'
 		});
 	</script>
 </body>
diff --git a/uhr.css b/uhr.css
index 67a8e27..45c84e4 100644
--- a/uhr.css
+++ b/uhr.css
@@ -20,11 +20,8 @@ body {
 	font-family: 'Uhrenfont', sans-serif;
 }
 .uhr {
-	padding: 3em;
 	position: relative;
 	margin: 0;
-	width: 40em;
-	height: 40em;
 	transition: background-color 0.5s;
 }
 .uhr .reflection {
@@ -42,11 +39,12 @@ body {
 .uhr .letterarea {
 	display: block;
 	position: absolute;
-	top: 5em;
-	bottom: 5em;
-	left: 5em;
-	right: 5em;
+	top: 12%;
+	bottom: 12%;
+	left: 12%;
+	right: 12%;
 	overflow: hidden;
+	font-size: 200%;
 }
 .item {
 	transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
@@ -64,20 +62,20 @@ body {
 	box-shadow: 0 0 0.2em #eee;
 }
 .dot1 {
-	top: 1.5em;
-	left: 1.5em;
+	top: 3.75%;
+	left: 3.75%;
 }
 .dot2 {
-	top: 1.5em;
-	right: 1.5em;
+	top: 3.75%;
+	right: 3.75%;
 }
 .dot3 {
-	bottom: 1.5em;
-	right: 1.5em;
+	bottom: 3.75%;
+	right: 3.75%;
 }
 .dot4 {
-	bottom: 1.5em;
-	left: 1.5em;
+	bottom: 3.75%;
+	left: 3.75%;
 }
 .letter {
 	height: 10%;
@@ -86,7 +84,6 @@ body {
 	margin: 0;
 	display: inline-block;
 	text-align: center;
-	font-size: 2.2em;
 	line-height: 160%;
 }
 .letter.active {
diff --git a/uhr.js b/uhr.js
index 8980718..8a9995a 100644
--- a/uhr.js
+++ b/uhr.js
@@ -141,20 +141,20 @@ Uhr.prototype.normalizeHour = function(hour) {
 	return hour;
 }
 Uhr.prototype.initHTMLElements = function(clockarea, presets) {
-	this.createHTMLElements(clockarea);
+	this.createHTMLElements(clockarea, presets.width);
 	var force = presets.force || false;
 	this.initToggleSwitch(presets.status, force);
 	this.initLayoutSwitch(presets.layout, force);
 	this.initThemeSwitch(presets.theme, force);
 }
-Uhr.prototype.createHTMLElements = function(clockarea) {
-	this.createClockarea(clockarea)
+Uhr.prototype.createHTMLElements = function(clockarea, width) {
+	this.createClockarea(clockarea, width)
 	this.letterarea = this.clockarea.find('.letterarea');
 	this.createToggleSwitch();
 	this.createLayoutSwitch();
 	this.createThemeSwitch();
 }
-Uhr.prototype.createClockarea = function(clockarea) {
+Uhr.prototype.createClockarea = function(clockarea, width) {
 	clockarea.addClass('uhr');
 	clockarea.empty();
 	clockarea.append('<span class="item dot dot1"></span>');
@@ -163,6 +163,14 @@ Uhr.prototype.createClockarea = function(clockarea) {
 	clockarea.append('<span class="item dot dot4"></span>');
 	clockarea.append('<div class="letterarea"></div>');
 	clockarea.append('<div class="reflection"></div>');
+	if(width == undefined) {
+		width = '100%';
+	}
+	clockarea.css('width', width);
+	var realWidth = clockarea.width()
+	clockarea.width(realWidth);
+	clockarea.height(realWidth);
+	clockarea.css('font-size', (realWidth / 40) + 'px');
 	this.clockarea = clockarea
 }
 Uhr.prototype.createToggleSwitch = function() {