nathankerr.github.com/index.html at master · nathankerr/nathankerr.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Nathan Kerr</title>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Setting the style:
		1. Choose the picture
		2. Select a new header background color from the picure for use behind the header
		3. Select a new content background color from the picture to use behind the readable content
		4. Place the header and content to suite the picture
		5. Adjust the colors in _layouts/comments.textile and _layouts/default.textile
		6. Profit!
		64 37 28
	-->
	<style>
		html {
			background: url(cover.jpg) no-repeat center center fixed;
			background-size: cover;
		}
		header {
			color: rgba(234, 216, 241, 0.9);
			bottom: 10px;
			right: 10px;
			position: fixed;
			background-color: rgba(103, 70, 53, 0.9);
			padding: 10px;
			border-radius: 10px;
			text-align: center;
		}
		header a, header a:visited, header a:link, header a:active header, a:hover {
			text-decoration: none;
			color: inherit;
		}
	</style>
</head>
<body>

<header>
	<a id="name" style="font-size: 200%" href="/">Nathan Kerr</a><br/>
	<nav>
		<a href="projects">Projects</a>
		| <a href="photos">Photos</a>
		| <a href="about">About</a>
	</nav>
</header>

<script>
	header = document.getElementsByTagName('header')[0]
	source = document.getElementById('name')

	function sizeHeader() {
		var defaultFontSize = getComputedStyle(document.body).getPropertyValue("font-size")
		defaultFontSize = defaultFontSize.substr(0,defaultFontSize.length - 2) - 0

		var fontSize = defaultFontSize
		header.style.setProperty("font-size", fontSize + "px")
		var maxWidth = window.innerWidth / 3.618
		var maxHeight = window.innerHeight / 3.618
		while(source.offsetWidth < maxWidth && header.offsetHeight < maxHeight) {
			fontSize = fontSize + 1
			header.style.setProperty("font-size", fontSize + "px")
		}
	}

	// debounce from http://michalkuklis.com/blog/2011/06/04/debounce-in-javascript/
	function debounce(fn, wait) {
		var timeout = null
		return function () {
			clearTimeout(timeout)
			var args = arguments
			var ctx = this
			timeout = setTimeout(function () {
				fn.apply(ctx, args)
			}, wait)
		}
	}

	window.onresize = debounce(sizeHeader,200)
	sizeHeader()
</script>

<!-- Google Analytics -->
<script>
var _gaq = [['_setAccount', 'UA-1960166-2'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
    s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>

<!-- Woopra -->
<script type="text/javascript">
(function(){
  var wsc=document.createElement('script');
  wsc.type='text/javascript';
  wsc.src=document.location.protocol+'//static.woopra.com/js/woopra.js';
  wsc.async=true;
  var ssc = document.getElementsByTagName('script')[0];
  ssc.parentNode.insertBefore(wsc, ssc);
})();
</script>
</body>
</html>