1.1 --- a/clock/index.html	Thu Aug 21 00:18:52 2014 -0700
     1.2 +++ b/clock/index.html	Thu Aug 21 01:33:14 2014 -0700
     1.3 @@ -41,7 +41,7 @@
     1.4  <script>
     1.5  
     1.6  var TAU = 2*Math.PI;
     1.7 -var margin = 10;
     1.8 +var margin = {top: 10, right: 5, bottom: 5, left: 10};
     1.9  
    1.10  var minutes_seconds_scale = d3.scale.linear()
    1.11  	.domain([0, 60])
    1.12 @@ -60,7 +60,11 @@
    1.13  	var minutes = ct.getMinutes() + (seconds/60.0);
    1.14  	var hours = ct.getHours() + (minutes/60.0);
    1.15  	
    1.16 -	var r = (Math.min(window.innerWidth, window.innerHeight)/2) - margin;
    1.17 +	var svg_width = window.innerWidth - 20;
    1.18 +	var svg_height = window.innerHeight - 20;
    1.19 +	var c_x = (svg_width - margin.left - margin.right)/2;
    1.20 +	var c_y = (svg_height - margin.top - margin.bottom)/2;
    1.21 +	var r = Math.min(c_x, c_y);
    1.22  	
    1.23  	var or_seconds = r;
    1.24  	var ir_seconds = r*0.75;
    1.25 @@ -74,19 +78,19 @@
    1.26  	var digital_text_scale = 0.75;
    1.27  	
    1.28  	var svg = d3.select("svg")
    1.29 -			.attr("width", 2*(r + margin))
    1.30 -			.attr("height", 2*(r + margin));
    1.31 +			.attr("width", svg_width)
    1.32 +			.attr("height", svg_height);
    1.33  
    1.34  	svg.selectAll("g").remove();
    1.35  
    1.36  	svg = svg.append("g")
    1.37 -			.attr("transform", "translate(" + margin + "," + margin + ")");
    1.38 +			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    1.39  
    1.40  	//svg.append("text")
    1.41  	//	.text(d3.time.format("%X")(ct));
    1.42  
    1.43  	var c = svg.append("g")
    1.44 -			.attr("transform", "translate(" + r + "," + r + ")");
    1.45 +			.attr("transform", "translate(" + c_x + "," + c_y + ")");
    1.46  
    1.47  	c.append("path")
    1.48  		.attr("class", "analog seconds")
    1.49 @@ -104,10 +108,13 @@
    1.50  			.startAngle(minutes_seconds_scale(seconds))
    1.51  			.endAngle(TAU)
    1.52  		);
    1.53 +	var dt_sz_seconds = (or_seconds - ir_seconds)*digital_text_scale;
    1.54 +	var dt_y_seconds = dt_sz_seconds/3;
    1.55  	c.append("text")
    1.56 -		.attr("class", "digital")
    1.57 +		.attr("class", "digital seconds")
    1.58  		.attr("x", ir_seconds)
    1.59 -		.attr("font-size", (or_seconds - ir_seconds)*digital_text_scale + "px")
    1.60 +		.attr("y", dt_y_seconds)
    1.61 +		.attr("font-size", dt_sz_seconds + "px")
    1.62  		.text(tf(seconds));
    1.63  
    1.64  	c.append("path")
    1.65 @@ -126,10 +133,13 @@
    1.66  			.startAngle(minutes_seconds_scale(minutes))
    1.67  			.endAngle(TAU)
    1.68  		);
    1.69 +	var dt_sz_minutes = (or_minutes - ir_minutes)*digital_text_scale;
    1.70 +	var dt_y_minutes = dt_sz_minutes/3;
    1.71  	c.append("text")
    1.72 -		.attr("class", "digital")
    1.73 +		.attr("class", "digital hours")
    1.74  		.attr("x", ir_minutes)
    1.75 -		.attr("font-size", (or_minutes - ir_minutes)*digital_text_scale + "px")
    1.76 +		.attr("y", dt_y_minutes)
    1.77 +		.attr("font-size", dt_sz_minutes + "px")
    1.78  		.text(tf(minutes));
    1.79  
    1.80  	c.append("path")
    1.81 @@ -148,10 +158,13 @@
    1.82  			.startAngle(hours_scale(hours))
    1.83  			.endAngle(TAU)
    1.84  		);
    1.85 +	var dt_sz_hours = (or_hours - ir_hours)*digital_text_scale;
    1.86 +	var dt_y_hours = dt_sz_hours/3;
    1.87  	c.append("text")
    1.88 -		.attr("class", "digital")
    1.89 +		.attr("class", "digital hours")
    1.90  		.attr("x", ir_hours)
    1.91 -		.attr("font-size", (or_hours - ir_hours)*digital_text_scale + "px")
    1.92 +		.attr("y", dt_y_hours)
    1.93 +		.attr("font-size", dt_sz_hours + "px")
    1.94  		.text(tf(hours));
    1.95  
    1.96