forked from metaphox/metamorphosis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlayout.html
264 lines (247 loc) · 13.7 KB
/
layout.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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<!-- CSS: implied media=all -->
<!-- CSS concatenated and minified via ant build script-->
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC|IM+Fell+DW+Pica+SC|Bowlby+One+SC' rel='stylesheet'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/screen.css">
<!-- end CSS-->
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
<!-- All JavaScript at the bottom, except for Modernizr / Respond.
Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body class="nowireframe">
<div id="grid-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div id="container">
<header id="siteheader">
<div id="sitename"><a href="/">Metamorphosis</a></div/>
<p>Yet another awkward predicament.</p>
</header>
<div id="main" role="main">
<aside class="entry-info">
<div class="pub-date">
<span class="date-year">二〇一一<span class="year-name">年</span></span>
<span class="date-month">九<span class="month-name">月</span>
<span class="date-day">廿七<span class="day-name-hidden">日</span></span>
</span>
<span class="date-weekday"><span class="week-name">星期</span>二</span></span>
</div>
</aside>
<article>
<h1>This is the title of an article</h1>
<p>日月星辰是天空的附屬物的時代，現時可說比較好些兒，說我乖巧識禮，接連鬥過兩三晚，因為這是親戚間，有一陣孩子們，第一浮上我的思想，在幾千年前，日月星辰是天空的附屬物的時代，坐著閒談。禮義之邦的中國，日月星辰是天空的附屬物的時代，敢因為蠻性的遺留？卻不能稍超興奮，那些富家人<sup id="ref-1-1" class="ref-1"><a href="#note-1">[1]</a></sup>，橋梁是否有斷折，使得我們也不能不跟他多一次麻煩。一塊錢，已經看見圓圓的地平線，這不能用意志去抵抗去克制。在我未曾學過遊歷、視察、觀光的人，何故世上的人類們，把我們龍頭割去！所以這一回，這不是和舊時代的天子，禮這一字是很可利用的東西，濛迷地濃結起來，運行了一個週環。</p>
<p>有好些個等著看鬧熱的人，和他們一拚！空間又再恢復到前一樣的暗黑，甲總不平地罵。一邊就以為得到了勝利在優勝者的地位，不知談論些什麼，用什麼做根據？所有一切，一時看鬧熱的人，已闢農場已築家室，若說因所認定的起始點，雖則不知，這呼聲，凶惡的他們忍相虐待，愈覺用錢的事故愈多，憑這雙腕！<sup id="ref-2-1" class="ref-2"><a href="#note-2">[2]</a></sup>也就不容易，思想也漸糢糊起來，管他做甚？他倆感到有一種，不懷著危險的恐懼，富豪是先天所賦與，人們不預承認，拭過似的、萬里澄碧的天空，十五年前的熱鬧，我們有這雙腕，旗鼓的行列，也不是什麼大不了的事，陷人的泥澤，因為寒冷和睡眠的催促，來！</p>
<!--html test-->
<p>The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.</p>
<hr />
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4<sup id="ref-3-1" class="ref-3"><a href="#note-3">[3]</a></sup></h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr />
<h2 id="paragraph">Paragraph</h2>
<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<p><a href="http://www.flickr.com/photos/lonelyfox/6204432029/" title="Untitled by Metaphox, on Flickr"><img src="http://farm7.static.flickr.com/6156/6204432029_61fb9ee67e.jpg" width="500" height="374" alt=""></a></p>
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
<hr />
<h2 id="list_types">List Types</h2>
<h3>Definition List</h3>
<dl>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
</dl>
<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<hr />
<h2 id="form_elements">Forms</h2>
<fieldset>
<legend>Legend</legend>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<form>
<h2>Form Element</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
<p><label for="text_field">Text Field:</label></p>
<input type="text" id="text_field" />
<p><label for="text_area">Text Area:</label><br />
<textarea id="text_area"></textarea></p>
<p><label for="select_element">Select Element:</label></p>
<select name="select_element">
<optgroup label="Option Group 1"></p>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<p> </optgroup></p>
<p> <optgroup label="Option Group 2"></p>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<p> </optgroup><br />
</select>
</p>
<p><label for="radio_buttons">Radio Buttons:</label></p>
<input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1<br/>
<input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2<br/>
<input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3<br/>
<p><label for="checkboxes">Checkboxes:</label></p>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3<br/>
<p><label for="password">Password:</label><br>
<input type="password" class="password" name="password" /></p>
<p><label for="file">File Input:</label><br>
<input type="file" class="file" name="file" /></p>
<p>
<input class="button" type="reset" value="Clear" />
<input class="button" type="submit" value="Submit" /></p></form>
</fieldset>
<hr />
<h2 id="tables">Tables</h2>
<table cellspacing="0" cellpadding="0">
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr class="even">
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</table>
<hr />
<h2 id="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h2>
<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p>
<pre>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Nullam dignissim convallis est.
Quisque aliquam. Donec faucibus.
Nunc iaculis suscipit dui.
Nam sit amet sem.
Aliquam libero nisi, imperdiet at,
tincidunt nec, gravida vehicula,
nisl.
Praesent mattis, massa quis
luctus fermentum, turpis mi
volutpat justo, eu volutpat
enim diam eget metus.
Maecenas ornare tortor.
Donec sed tellus eget sapien
fringilla nonummy.
<acronym title="National Basketball Association">NBA</acronym>
Mauris a ante. Suspendisse
quam sem, consequat at,
commodo vitae, feugiat in,
nunc. Morbi imperdiet augue
quis tellus.
<abbr title="Avenue">AVE</abbr>
</pre>
<blockquote><p>
"This stylesheet is going to help so freaking much." <br />-Blockquote
</p></blockquote>
<!-- End of Sample Content -->
</article>
<aside class="footnotes">
<ol class="footnotelist">
<li id="note-1"><div>Lorem ipsum dolor sit amet, consectetur adipisici enim ad minim veniam, quis nostrud</div></li>
<li id="note-2"><div>Lorem i st amet, consectetur adipisi enim ad minim veniam, quis nostrud</div></li>
<li id="note-3"><div>Lorem isum dolor sit amet, consecteinim veniam, quis nostrud</div></li>
<li id="note-4"><div>Lorem st amet, consectetur adipisici enim ad minim veniam, quis nostrud</div></li>
<li id="note-5"><div>Lorem or sit amet, consectetur adipisici enim ad minim veniam, quis nostrud</div></li>
<li id="note-6"><div>Lorem p dolor sit amet, consectetur adipisici enim ad minim veniam, quis nostrud</div></li>
<li id="note-7"><div>Lorem n ad minim veniam, quis nostrud</div></li>
<li id="note-8"><div>Lorem rit amet, consectetur adipisici enim ad minim veniam, quis nostrud</div></li>
<li id="note-9"><div>Lorem um dolor sit amet, consectetur adipisici enim ad minim veniam, quis nostrud</div></li>
<li id="note-10"><div>Loremlor sit amet, consectetur adipisici enim ad minim veniam, quis nostrud</div></li>
<li id="note-11"><div>Lorempsum dolor sit amet, consectetur adipisici enim ad minim veniam, quis nostrud</div></li>
</ol>
</aside>
</div><!--//#main-->
</div> <!--! end of #container -->
<footer>
<h2>Here is the footer area.</h2>
<h3>Blogroll</h3>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>');</script>
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts-->
<!-- Change UA-XXXXX-X to be your site's ID -->
<script>/*
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
}); */
</script>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>