View difference between Paste ID: uacWg7zr and n4EUZyE4
SHOW: | | - or go back to the newest paste.
1
<!DOCTYPE html>
2
<html>
3
<head>
4
5
<!--
6
 
7
Tag Page 02
8
by yukoki/houtarubi
9
10
1. Light/Heavy CSS editting is allowed.
11
2. Do not use as base code.
12
3. Do not remove credit.
13
4. Do not claim theme as your own.
14
5. Do not redistribute.
15
 
16
-->
17
18
<title>tags</title>
19
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
20
<link rel="shortcut icon" href="{Favicon}" />
21
22
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
23
24
<style type="text/css">
25
26
iframe#tumblr_controls { right:3px; position:fixed; opacity: 0.4;}
27
iframe#tumblr_controls:hover { opacity: 1;
28
-webkit-transition: all 0.4s ease-in-out;
29
-moz-transition: all 0.4s ease-in-out;
30
-o-transition: all 0.4s ease-in-out;
31
-ms-transition: all 0.4s ease-in-out;
32
transition: all 0.4s ease-in-out;}
33
34
body {
35
    background-color: #ffffff;
36
    background-image: url(http://i1246.photobucket.com/albums/gg607/mogimochi/backgrounds/bg-woodverticallight_zpsb9111c79.png); 
37
    /**background image**/
38
    background-attachment: fixed;
39
    margin: 0;
40
    word-wrap: break-word;
41
    text-decoration: none;
42
}
43
a {
44
    text-decoration:none;
45
}
46
47
#main {
48
    width: 480px;
49
    margin-top: 30px;
50
    padding: 10px;
51
}
52
.title {
53
    font-family: courier new;
54
    font-size: 38px;
55
    text-transform: uppercase;
56
    color: #97a7b7; /** "- TAGS -" colour**/
57
}
58
.nav {
59
    font-family: consolas;
60
    font-size: 10px;
61
    text-transform: uppercase;
62
    letter-spacing: 1px;
63
    margin: -5px 10px 10px 10px;
64
    color: #888; /** nav dots (dividers) colour**/
65
}
66
.nav a {
67
    color: #adadad; /** nav text colour**/
68
-webkit-transition: all 0.4s ease-in-out;
69
-moz-transition: all 0.4s ease-in-out;
70
-o-transition: all 0.4s ease-in-out;
71
-ms-transition: all 0.4s ease-in-out;
72
transition: all 0.4s ease-in-out;
73
}
74
.nav a:hover {
75
    text-shadow: -2px 0 0 #8dcad7; /** nav text shadow colour**/
76
-webkit-transition: all 0.4s ease-in-out;
77
-moz-transition: all 0.4s ease-in-out;
78
-o-transition: all 0.4s ease-in-out;
79
-ms-transition: all 0.4s ease-in-out;
80
transition: all 0.4s ease-in-out;
81
}
82
.pic {
83
    width: 410px;
84
    height: 120px;
85
    overflow: hidden;
86
    margin-left: -8px;
87
    margin-bottom: 5px;
88
}
89
90
#content {
91
    width: 500px;
92
    height: auto;
93
}
94
.maintag {
95
    width: 205px;
96
    padding: 10px;
97
    float: left;
98
    margin: 5px;
99
    background-color: #ededed; /** fandom background colour**/
100
}
101
.tagtitle {
102
    color: #707070; /** fandom title colour**/
103
    text-align: center;
104
    font-family: lekton;
105
    text-transform: uppercase;
106
    border-bottom: 1px dashed #c1c1c1; /** fandom title underline colour**/
107
    padding: 5px 5px;
108
    font-size: 16px;
109
    line-height: 17px;
110
    margin-bottom: 10px;
111
}
112
.tag {
113
    color: #999; /** tag colour**/
114
    border-left: 10px solid #b1c1d2; /** tag border colour**/
115
    margin: 3px 0;
116
    text-align: left;
117
    line-height: 13px;
118
    font-family: consolas;
119
    font-size: 12px;
120
    line-height: 13px;
121
    padding: 0 10px;
122
-webkit-transition: all 0.4s ease-in-out;
123
-moz-transition: all 0.4s ease-in-out;
124
-o-transition: all 0.4s ease-in-out;
125
transition: all 0.4s ease-in-out;
126
}
127
.tag:hover {
128
    border-left: 20px solid #809cbb; /** hover tag colour**/
129
    color: #5e5e5e; /** hover tag border colour**/
130
}
131
132
</style>
133
134
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
135
 
136
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
137
 
138
<script>
139
$(function(){
140
var $container = $('#content');
141
$container.imagesLoaded(function(){
142
$container.masonry({
143
itemSelector: '.maintag',
144
});
145
});
146
$container.infinitescroll({
147
itemSelector : ".maintag",
148
navSelector : "div.pagination",
149
nextSelector : ".pagination a#next",
150
loadingImg : "",
151
loadingText : "<em></em>",
152
bufferPx : 10000,
153
extraScrollPx: 12000,
154
},
155
// trigger Masonry as a callback
156
function( newElements ) {
157
  var $newElems = $( newElements ).css({ opacity: 0 });
158
// ensure that images load before adding to masonry layout
159
$newElems.imagesLoaded(function(){
160
$newElems.animate({ opacity: 1 });
161
$container.masonry( 'appended', $newElems, true );
162
});
163
}
164
);
165
});
166
</script>
167
168
<body>
169
170
<center>
171
<div id="main">
172
<div class="title">- tags -</div>
173
<div class="nav">
174
<a href="/">index</a> ● 
175
<a href="/ask">message</a> ● 
176
<a href="/archive">memories</a> ● 
177
<a href="/">link 1</a> ● <!--custom link 1-->
178
<a href="/">link 2</a> ● <!--custom link 2-->
179
<a href="/">link 3</a> ● <!--custom link 3-->
180
<a href="http://yukoki.tumblr.com">credit</a>
181
</div>
182
<img class="pic" src="http://i1246.photobucket.com/albums/gg607/mogimochi/asdfgh_zps539dc3cc.png"><!--header image-->
183
184
<div id="content">
185
186
<div class="maintag">
187
<div class="tagtitle">fandom #1</div>
188
<a href="/tagged/"><div class="tag">tag 1</div></a>
189
<a href="/tagged/"><div class="tag">tag 2</div></a>
190
<a href="/tagged/"><div class="tag">tag 3</div></a>
191
<a href="/tagged/"><div class="tag">tag 4</div></a>
192
<a href="/tagged/"><div class="tag">tag 5</div></a>
193
</div>
194
195
<div class="maintag">
196
<div class="tagtitle">fandom #2</div>
197
<a href="/tagged/"><div class="tag">tag 1</div></a>
198
<a href="/tagged/"><div class="tag">tag 2</div></a>
199
</div>
200
201
<div class="maintag">
202
<div class="tagtitle">fandom #3</div>
203
<a href="/tagged/"><div class="tag">tag 1</div></a>
204
<a href="/tagged/"><div class="tag">tag 2</div></a>
205
<a href="/tagged/"><div class="tag">tag 3</div></a>
206
<a href="/tagged/"><div class="tag">tag 4</div></a>
207
<a href="/tagged/"><div class="tag">tag 5</div></a>
208
<a href="/tagged/"><div class="tag">tag 6</div></a>
209
<a href="/tagged/"><div class="tag">tag 7</div></a>
210
</div>
211
212
<div class="maintag">
213
<div class="tagtitle">fandom #4</div>
214
<a href="/tagged/"><div class="tag">tag 1</div></a>
215
<a href="/tagged/"><div class="tag">tag 2</div></a>
216
<a href="/tagged/"><div class="tag">tag 3</div></a>
217
</div>
218
219
<div class="maintag">
220
<div class="tagtitle">fandom #5</div>
221
<a href="/tagged/"><div class="tag">tag 1</div></a>
222
<a href="/tagged/"><div class="tag">tag 2</div></a>
223
<a href="/tagged/"><div class="tag">tag 3</div></a>
224
<a href="/tagged/"><div class="tag">tag 4</div></a>
225
<a href="/tagged/"><div class="tag">tag 5</div></a>
226
<a href="/tagged/"><div class="tag">tag 6</div></a>
227
<a href="/tagged/"><div class="tag">tag 7</div></a>
228
<a href="/tagged/"><div class="tag">tag 8</div></a>
229
<a href="/tagged/"><div class="tag">tag 9</div></a>
230
<a href="/tagged/"><div class="tag">tag 10</div></a>
231
</div>
232
233
<div class="maintag">
234
<div class="tagtitle">fandom #6</div>
235
<a href="/tagged/"><div class="tag">tag 1</div></a>
236
<a href="/tagged/"><div class="tag">tag 2</div></a>
237
<a href="/tagged/"><div class="tag">tag 3</div></a>
238
<a href="/tagged/"><div class="tag">tag 4</div></a>
239
<a href="/tagged/"><div class="tag">tag 5</div></a>
240
<a href="/tagged/"><div class="tag">tag 6</div></a>
241
</div>
242
243
</div><!--content-->
244
245
</div><!--main--></center>
246
247
</body>
248
</html>