-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtumblr-static.html
executable file
·176 lines (142 loc) · 6.72 KB
/
tumblr-static.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Tumblr Boilerplate</title>
<meta name="description" content="The Tumblr Boilerplate (unofficial) is a fully automated approach to Tumblr theme development.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Appearance options -->
<meta name="font:Title Font" content="Arial, sans-serif">
<meta name="font:Body Font" content="Arial, sans-serif">
<meta name="color:Background" content="#ffffff">
<meta name="color:Body Text" content="#222222">
<meta name="color:Link Text" content="#0000ff">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header" id="header" role="banner">
<a class="site-title" href="/">Tumblr Boilerplate</a>
<!-- Other blog information and links -->
<nav role="navigation">
<ul class="site-nav">
<li><a href="/">Home</a></li>
<li><a href="/archive">Archive</a></li>
</ul>
</nav>
</header><!-- /site-header -->
<main class="posts-list" id="main" role="main">
<article class="[ single-post single-post--text ]">
<!-- Text -->
<h2 class="post-title"><a href="#">Text post title</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus magnam aperiam dolorum vitae repudiandae veritatis iste ipsam neque voluptatum ad!</p>
<blockquote>
<p>Lorem ipsum dolor sit amet.</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae temporibus, ipsam id numquam earum nulla reiciendis vel facilis vero debitis fugiat velit facere, ipsum cupiditate.</p>
<!-- Post metadata -->
<footer class="post-meta">
<a class="post-meta__date" href="#">31 December</a>
<a class="post-meta__notes" href="#">999,999 notes</a>
<ul class="tags-list">
<li><a class="tags-list__tag" href="#">post</a></li>
<li><a class="tags-list__tag" href="#">text</a></li>
</ul>
</footer>
</article><!-- /single-post -->
<article class="[ single-post single-post--photo ]">
<!-- Photo -->
<figure class="post-media">
<a href="http://placehold.it/500x375"><img src="http://placehold.it/500x375" alt=""></a>
<figcaption class="[ caption caption--photo ]">Look, it's a placeholder image.</figcaption>
</figure>
<!-- Post metadata -->
<footer class="post-meta">
<a class="post-meta__date" href="#">31 December</a>
<a class="post-meta__notes" href="#">999,999 notes</a>
<ul class="tags-list">
<li><a class="tags-list__tag" href="#">post</a></li>
<li><a class="tags-list__tag" href="#">photo</a></li>
</ul>
</footer>
</article><!-- /single-post -->
<article class="[ single-post single-post--quote ]">
<!-- Quote -->
<figure class="post-media">
<blockquote class="featured-quote">Life is what happens to you while you're busy making other plans.</blockquote>
<figcaption class="[ caption caption--quote-source ]">John Lennon</figcaption>
</figure>
<!-- Post metadata -->
<footer class="post-meta">
<a class="post-meta__date" href="#">31 December</a>
<a class="post-meta__notes" href="#">999,999 notes</a>
<ul class="tags-list">
<li><a class="tags-list__tag" href="#">post</a></li>
<li><a class="tags-list__tag" href="#">quote</a></li>
</ul>
</footer>
</article><!-- /single-post -->
<article class="[ single-post single-post--link ]">
<!-- Link -->
<a class="featured-link" href="http://google.co.uk" target="_blank">Google</a>
<div class="[ caption caption--link-description ]">
<blockquote>
<p>Google is an American multinational corporation specializing in Internet-related services and products.</p>
</blockquote>
<p>from <a href="http://en.wikipedia.org/wiki/Google">Wikipedia</a></p>
</div>
<!-- Post metadata -->
<footer class="post-meta">
<a class="post-meta__date" href="#">31 December</a>
<a class="post-meta__notes" href="#">999,999 notes</a>
<ul class="tags-list">
<li><a class="tags-list__tag" href="#">post</a></li>
<li><a class="tags-list__tag" href="#">link</a></li>
</ul>
</footer>
</article><!-- /single-post -->
<article class="[ single-post single-post--chat ]">
<!-- Chat -->
<h2 class="post-title"><a href="#">Talking about Tumblr boilerplate</a></h2>
<ul class="chat-log">
<li class="[ chat-log__line chat-log__line--odd ]"><span class="chat-log__label">TB:</span> Hello. I'm a Tumblr boilerplate.</li>
<li class="[ chat-log__line chat-log__line--even ]"><span class="chat-log__label">Me:</span> Cool. How can you help me?</li>
<li class="[ chat-log__line chat-log__line--odd ]"><span class="chat-log__label">TB:</span> I can make it easier for you to get started developing themes.</li>
<li class="[ chat-log__line chat-log__line--even ]"><span class="chat-log__label">Me:</span> Great! Let's do it</li>
</ul>
<!-- Post metadata -->
<footer class="post-meta">
<a class="post-meta__date" href="#">31 December</a>
<a class="post-meta__notes" href="#">999,999 notes</a>
<ul class="tags-list">
<li><a class="tags-list__tag" href="#">post</a></li>
<li><a class="tags-list__tag" href="#">chat</a></li>
</ul>
</footer>
</article><!-- /single-post -->
<article class="[ single-post single-post--video ]">
<!-- Video -->
<figure class="post-media">
<iframe width="500" height="375" src="http://www.youtube.com/embed/fJ9rUzIMcZQ?rel=0" frameborder="0" allowfullscreen></iframe>
<figcaption class="[ caption caption--video ]">
<p>Bohemian Rapshody by Queen</p>
</figcaption>
</figure>
<!-- Post metadata -->
<footer class="post-meta">
<a class="post-meta__date" href="#">31 December</a>
<a class="post-meta__notes" href="#">999,999 notes</a>
<ul class="tags-list">
<li><a class="tags-list__tag" href="#">post</a></li>
<li><a class="tags-list__tag" href="#">video</a></li>
</ul>
</footer>
</article><!-- /single-post -->
</main>
<footer class="pagination" id="pagination">
<a class="[ pagination__link pagination__link--older ]" href="/page/2">Older posts</a>
<a class="[ pagination__link pagination__link--newer ]" href="/">Newer posts</a>
</footer><!-- /pagination -->
</body>
</html>