stumblr/example.html at master · upright-netizen/stumblr · 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
<!DOCTYPE html>
<html>
	<head>
		<title>Stumblr Example Page</title>
		<style>
			html, body {
				padding: 0;
				margin: 0;
				background-color: #eee;
				font-family: futura;
				font-size: 18px;
				text-align: center;
			}

			h1 {
				font-weight: bold;
				font-size: 64px;
				letter-spacing: 12px;
				text-transform: uppercase
			}

			#posts {
				padding: 0;
				margin: 0;
				display: inline-block;
				width: 450px;
				padding-bottom: 35px
			}

			#posts li {
				list-style: none;
				text-align: left;
				background-color: #fff;
				padding: 12px 0 12px 12px;
				margin: 18px 0 0 0;

				-webkit-box-shadow: 5px 5px 0 #ccc;
				-moz-box-shadow: 5px 5px 0 #ccc;
				-o-box-shadow: 5px 5px 0 #ccc;
				box-shadow: 5px 5px 0 #ccc;

				-webkit-transition: all .3s ease-in-out;
				-moz-transition: all .3s ease-in-out;
				-o-transition: all .3s ease-in-out;
				transition: all .3s ease-in-out;
			}

			#posts li:focus,
			#posts li:hover {
				-webkit-box-shadow: 5px 5px 0 #777;
				-moz-box-shadow: 5px 5px 0 #777;
				-o-box-shadow: 5px 5px 0 #777;
				box-shadow: 5px 5px 0 #777;
			}
		</style>

		<!-- include the dependencies and fallbacks-->
		<script src="http://code.jquery.com/jquery-1.5.1.js"></script>
		<script>window.jQuery || document.write('<script src="lib/jquery.js">\x3C/script>')</script>
		<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
		<script>window.jQuery.tmpl || document.write('<script src="lib/jquery.tmpl.js">\x3C/script>')</script>

		<script id="stumblr-posts-tmpl" type="text/x-jquery-tmpl">
			<ul id="posts">
				{{each posts}}
					{{if this['type'] === 'link'}}
						<li class="link post"><a href="${this['link-url']}">${this['link-text']}</a></li>
					{{/if}}

					{{if this['type'] === 'video'}}
						<li class="video post">{{html this['video-source'] }}</li>
					{{/if}}

					{{if this['type'] === 'quote'}}
						<li class="quote post">
							<p class="text">{{html this['quote-text']}}</p>
							<p class="source">{{html this['quote-source']}}</p>
						</li>
					{{/if}}
				{{/each}}
			</ul>
		</script>

		<script src="jquery.stumblr.js"></script>
	</head>
	<body>
		<h1>Upright Netizen</h1>

		<div class="urn-links" data-url="http://uprightnetizen.tumblr.com"></div>

		<script>
			(function($, window, document, undefined){
				$(function(){

					$(".urn-links").stumblr();

				});
			})(jQuery, window, document);
		</script>

	</body>
</html>