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> |