API tools faq
paste
jaesoonie

THEME #33 JOEY

jaesoonie
Oct 24th, 2013
4,058
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.34 KB | None | 0 0
raw download clone embed print report
  1. <!---------------------------------------------------------------------
  2.  
  3.  
  4. ᴛʜᴇᴍᴇ #33; ᴍᴀᴅᴇ ʙʏ >SOONJUN<. [ʏᴏɴɢ.ᴄᴏ.ᴠᴜ]
  5. sᴏᴏɴᴊᴜɴᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ
  6. ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ.
  7. ᴀɴʏ ǫᴜᴇsᴛɪᴏɴs ᴀᴛ ᴀʟʟ ᴄᴏᴍᴇ ᴀsᴋ.
  8.  
  9.  
  10. ---------------------------------------------------------------------->
  11.  
  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  13. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15. <head>
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{favicon}">
  18. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  19.  
  20. <meta name="font:body" content="trebuchet ms, sans-serif"/>
  21. <meta name="color:background" content="#ffffff" />
  22. <meta name="color:title" content="#666666" />
  23. <meta name="color:text" content="#9b9898" />
  24. <meta name="color:bold" content="#6f6e6e" />
  25. <meta name="color:italic" content="#b9b8b8" />
  26. <meta name="color:description" content="#888888" />
  27. <meta name="color:navigation links" content="#f5f5f5" />
  28. <meta name="color:navigation links hover" content="#444444" />
  29. <meta name="color:hyperlinks" content="#a2a2a2"/>
  30. <meta name="color:hyperlinks hover" content="#dadada" />
  31. <meta name="color:caption bg" content="#fafafa" />
  32. <meta name="color:info bg" content="#181818" />
  33. <meta name="color:info" content="#f0eeee" />
  34. <meta name="color:border picture" content="#f8f8f8" />
  35. <meta name="color:base color" content="#666666" />
  36. <meta name="color:base color 2" content="#f5f5f5" />
  37. <meta name="color:asker" content="#666666" />
  38.  
  39. <meta name="text:Link1" content="/" />
  40. <meta name="text:Link1 Title" content="link 1" />
  41. <meta name="text:Link2" content="/" />
  42. <meta name="text:Link2 Title" content="link 2" />
  43. <meta name="text:Link3" content="/" />
  44. <meta name="text:Link3 Title" content="link 3" />
  45. <meta name="text:Link4" content="/" />
  46. <meta name="text:Link4 Title" content="link 4" />
  47. <meta name="text:Link5" content="/" />
  48. <meta name="text:Link5 Title" content="link 5" />
  49. <meta name="text:Link6" content="/" />
  50. <meta name="text:Link6 Title" content="link 6" />
  51. <meta name="text:Link7" content="/" />
  52. <meta name="text:Link7 Title" content="link 7" />
  53.  
  54. <meta name="image:picture" content="" />
  55.  
  56. <meta name="if:2columns210" content="0"/>
  57. <meta name="if:2columns250" content="0"/>
  58. <meta name="if:250px" content="0"/>
  59. <meta name="if:400px" content="0"/>
  60. <meta name="if:500px" content="1"/>
  61.  
  62. <meta name="if:infinitescroll" content="0">
  63. <meta name="if:caption" content="1">
  64. <meta name="if:greyscale" content="0"/>
  65. <meta name="text:opacity value" content="1" />
  66. <meta name="text:navigation title" content="navigation" />
  67.  
  68. {block:if2columns210}
  69. {block:indexpage}
  70. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  71. </script>
  72. <script type="text/javascript">
  73. /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
  74. $(document).ready(function() {
  75. function photosetResize() {
  76. $('iframe.photoset').each(function(){
  77. var newSize = 210;
  78. var newSrc = $(this).attr('src').replace('500',newSize);
  79. $(this).attr('src', newSrc).width(newSize);
  80. var high = $(this).css('height');
  81. var calculate = parseInt(high, 10)* newSize/500;
  82. $(this).css('height', calculate);
  83. });
  84. }
  85. photosetResize();
  86. });
  87. </script>
  88. {/block:indexpage}
  89. {/block:if2columns210}
  90.  
  91. <script type="text/javascript"
  92. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  93. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  94. <script>
  95. (function($){
  96. $(document).ready(function(){
  97. $("[title]").style_my_tooltips();
  98. });
  99. })(jQuery);
  100. </script>
  101.  
  102. <style type="text/css">
  103.  
  104. #s-m-t-tooltip {display: block;background: #444;font-size: 8px;font-family: calibri;letter-spacing: 1px;text-transform: uppercase;line-height:100%;color: #fff;text-align: center;margin-left: 18px;padding:4px;min-width: 40px;max-width: 200px;z-index: 999999;}
  105.  
  106. iframe#tumblr_controls {right:0px !important;position:fixed !important;-webkit-filter:invert(100%);opacity:0.2;z-index:99;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;}
  107. iframe#tumblr_controls:hover {opacity:1;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;}
  108.  
  109. ::-webkit-scrollbar-track {background-color:#fff;}
  110. ::-webkit-scrollbar-thumb {background-color:#f0f0f0;}
  111. ::-webkit-scrollbar {width:7px;height:7px;}
  112.  
  113. ::selection {color: #bbb; background: #f5f5f5; }
  114. ::-moz-selection {color: #bbb; background: #f5f5f5; }
  115. ::-webkit-selection {color: #bbb; background: #f5f5f5; }
  116.  
  117. body{
  118. background-color: {color:background};
  119. font-family:trebuchet ms;
  120. font-family:{font:body};
  121. line-height:100%;
  122. color:{color:text};
  123. word-wrap: break-word;
  124. font-size:10px;}
  125.  
  126. li {list-style:square;}
  127.  
  128. a { text-decoration:none;
  129. cursor:pointer;
  130. color:{color:hyperlinks};
  131. -webkit-transition: all 0.7s ease-in-out;
  132. -moz-transition: all 0.7s ease-in-out;
  133. -o-transition: all 0.7s ease-in-out;
  134. -ms-transition: all 0.7s ease-in-out;
  135. transition: all 0.7s ease-in-out;}
  136.  
  137. a:link, a:active, a:visited {color: {color:hyperlinks};}
  138. a:hover {color:{color:hyperlinks hover};}
  139.  
  140. b, strong {
  141. font-weight:heavy;
  142. color:{color:bold};}
  143.  
  144. i, em {
  145. font-weight:light;
  146. color:{color:italic};}
  147.  
  148. blockquote {
  149. margin: 5px;
  150. padding:0px 3px 0px 3px;
  151. line-height:90%;
  152. border-left: 1px solid #ddd;}
  153.  
  154. blockquote img {
  155. {block:indexpage}
  156. width:190px;
  157. {/block:indexpage}
  158. {block:permalinkpage}
  159. width:410px;
  160. {/block:permalinkpage}
  161. overflow: auto;}
  162.  
  163. #posts img {
  164. {block:if2columns210}
  165. max-width:200px;
  166. height:auto;
  167. {/block:if2columns210}
  168. {block:if250px}
  169. max-width:240px;
  170. height:auto;
  171. {/block:if250px}
  172. {block:if400px}
  173. max-width:390px;
  174. height:auto;
  175. {/block:if400px}
  176. {block:if500px}
  177. max-width:490px;
  178. height:auto;
  179. {/block:if500px}
  180. {block:permalinkpage}width:auto;height:auto;{/block:permalinkpage};}
  181.  
  182. pre, xmp, plaintext, listing {
  183. display: block;
  184. white-space: pre;
  185. background: {color:bg block};
  186. padding: 5px;
  187. word-wrap: break-word;
  188. font: 9px consolas;}
  189.  
  190. /*sidebar*/
  191.  
  192. #sidebar {
  193. position: fixed;
  194. top: 80px;
  195. width:135px;
  196. left:210px;
  197. z-index:22;}
  198.  
  199. #image {position:absolute;margin-top:-3px;
  200. -webkit-transition-duration:0.8s;
  201. -moz-transition-duration: 0.8s;
  202. transition: all 0.8s ease-in-out;}
  203. #image img {
  204. width:50px;
  205. padding:9px;
  206. background:{color:border picture};
  207. border:6px double #fff;}
  208. #sidebar:hover #title{margin-top:-30px;opacity:0;}
  209. #sidebar:hover #navigation,#sidebar:hover #pagination{opacity:1;}
  210. #sidebar:hover #description{margin-top:60px;opacity:0;}
  211.  
  212. #title {
  213. font-family:calibri;
  214. font-weight:700;
  215. text-transform:uppercase;
  216. margin-left:90px;
  217. letter-spacing:-1px;
  218. text-shadow:1px 1px 1px #eee;
  219. font-size:18px;
  220. width:148px;
  221. text-align:left;
  222. margin-top:0px;
  223. line-height:80%;
  224. position:relative;
  225. color:{color:title};
  226. -webkit-transition-duration:0.8s;
  227. -moz-transition-duration: 0.8s;
  228. transition: all 0.8s ease-in-out;}
  229.  
  230. #description {
  231. position:relative;
  232. font-size:7px;
  233. text-align: justify;
  234. color:{color:description};
  235. font-family:helvetica;
  236. text-transform:uppercase;
  237. letter-spacing:1px;
  238. padding: 10px;
  239. width: 100px;
  240. height:auto;
  241. line-height:120%;
  242. margin-left:80px;
  243. margin-top:0px;
  244. -webkit-transition: all 0.8s ease-in-out;
  245. -moz-transition: all 0.8s ease-in-out;}
  246.  
  247. #navigation{
  248. width: 145px;
  249. margin-left:80px;
  250. z-index:333;
  251. opacity:0;
  252. position:absolute;
  253. text-align:center;
  254. -webkit-transition: all 0.7s ease-in-out;
  255. -moz-transition: all 0.7s ease-in-out;
  256. -o-transition: all 0.7s ease-in-out;
  257. -ms-transition: all 0.7s ease-in-out;
  258. transition: all 0.7s ease-in-out;}
  259.  
  260. #navigation a{
  261. display:inline-block;
  262. font-size:7px;
  263. padding:4px 3px 3px 3px;
  264. font-family:helvetica;
  265. width: 30px;
  266. text-transform:uppercase;
  267. color:#666;
  268. margin:0px 5px 5px 0px;
  269. text-align:center;
  270. background:{color:navigation links};
  271. border-radius: 1px;
  272. cursor:pointer;}
  273.  
  274. .navtitle{
  275. display:inline-block;
  276. font-size:8px;
  277. padding:4px;
  278. font-family:helvetica;
  279. width: 110px;
  280. text-transform:uppercase;
  281. margin:0px 0px 6px -5px;
  282. text-align:center;
  283. border-radius: 1px;}
  284.  
  285. #navigation a:hover {color:#fff;background:{color:navigation links hover};}
  286.  
  287. #pagination {
  288. position:relative;
  289. display:inline-block;
  290. text-align:center;
  291. text-transform:uppercase;
  292. font-size:9px;
  293. font-family:calibri;
  294. color:{color:description};
  295. width:205px;
  296. padding:5px;
  297. margin-bottom:5px;
  298. opacity:0;
  299. background:{color:border picture};
  300. z-index:333;
  301. -webkit-transition: all 0.8s ease-in-out;
  302. -moz-transition: all 0.8s ease-in-out;
  303. {block:ifinfinitescroll}display:none;{/block:ifinfinitescroll}}
  304.  
  305. #pagination a{color:{color:description};}
  306.  
  307. /*posts*/
  308.  
  309. #entry{
  310. padding:30px 10px 50px 0px;
  311. margin-left: 440px;
  312. {block:indexpage}
  313. {block:if2columns210}
  314. width:590px;float:center;
  315. {/block:if2columns210}
  316. {block:if2columns250}
  317. width:600px;float:center;
  318. {/block:if2columns250}
  319. {block:if250px}
  320. width:250px;
  321. {/block:if250px}
  322. {block:if400px}
  323. width:400px;
  324. {/block:if400px}
  325. {block:if500px}
  326. width:500px;
  327. {/block:if500px}
  328. {/block:indexpage}
  329. {block:permalinkpage}
  330. width:550px;padding:50px 10px 50px 0px; margin-left: 460px;
  331. {/block:permalinkpage}}
  332.  
  333. .posttitle{
  334. color:{color:title};
  335. font-family:calibri;
  336. font-weight:700;
  337. text-transform:uppercase;
  338. letter-spacing:-1px;
  339. text-shadow:1px 1px 1px #eee;
  340. line-height: 100%;
  341. text-align:justify;
  342. padding-bottom: 4px;
  343. padding-top: 5px;
  344. padding-left: 4px;
  345. {block:if2columns210}
  346. font-size:18px;
  347. {/block:if2columns210}
  348. {block:if2columns250}
  349. font-size:20px;
  350. {/block:if2columns250}
  351. {block:if250px}
  352. font-size:20px;
  353. {/block:if250px}
  354. {block:if400px}
  355. font-size:23px;
  356. {/block:if400px}
  357. {block:if500px}
  358. font-size:25px;
  359. {/block:if500px}}
  360.  
  361. #posts{
  362. line-height:90%;
  363. padding:7px;
  364. background:#fff;
  365. {block:indexpage}
  366. {block:if2columns210}
  367. width:210px;margin-left:30px;margin-bottom:20px;
  368. {/block:if2columns210}
  369. {block:if2columns250}
  370. width:250px;margin-left:25px;margin-bottom:25px;
  371. {/block:if2columns250}
  372. {block:if250px}
  373. width:250px;margin-bottom:20px;
  374. {/block:if250px}
  375. {block:if400px}
  376. width:400px;margin-bottom:25px;
  377. {/block:if400px}
  378. {block:if500px}
  379. width:500px; margin-bottom:25px;
  380. {/block:if500px}
  381. {/block:indexpage}
  382. {block:PermalinkPage}
  383. width:500px;margin-bottom:20px;
  384. {/block:PermalinkPage}}
  385.  
  386. #opandgrey{
  387. opacity:{text:opacity value};
  388. -webkit-transition-duration:0.8s;
  389. -moz-transition-duration: 0.8s;
  390. transition: all 0.8s ease-in-out;
  391. {block:ifgreyscale}
  392. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  393. filter: gray;
  394. -webkit-filter: grayscale(100%);
  395. -webkit-transition-duration:0.8s;
  396. -moz-transition-duration: 0.8s;
  397. transition: all 0.8s ease-in-out;
  398. {/block:ifgreyscale}}
  399.  
  400. #opandgrey:hover{{block:indexpage}opacity:1;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;-webkit-filter: grayscale(0%);{/block:indexpage}}
  401.  
  402. #text {padding: 3px 6px 3px 6px;text-align:justify;}
  403.  
  404. #caption{
  405. margin-top:2px;
  406. padding: 3px 10px 3px 10px;
  407. background-color:{color:caption bg};}
  408.  
  409. .info {
  410. position:absolute;
  411. text-transform:uppercase;
  412. text-align:left;
  413. letter-spacing:1px;
  414. font-family: consolas;
  415. font-size:8px;
  416. color:#fff;
  417. opacity:0;
  418. line-height:180%;
  419. {block:PermalinkPage}
  420. display:none;
  421. {/block:PermalinkPage}
  422. -webkit-transition: all 0.8s ease-in-out;
  423. -moz-transition: all 0.8s ease-in-out;}
  424.  
  425. .infotext{
  426. position:relative;
  427. z-index:333;
  428. text-transform:uppercase;
  429. text-align: justify;
  430. letter-spacing:1px;
  431. font-family: consolas;
  432. font-size:8px;
  433. color:#444;
  434. padding:4px;
  435. background:#fff;
  436. margin-bottom:-10px;
  437. border-top: 1px solid #f5f5f5;
  438. opacity:0;
  439. {block:PermalinkPage}
  440. display:none;
  441. {/block:PermalinkPage}
  442. -webkit-transition: all 0.8s ease-in-out;
  443. -moz-transition: all 0.8s ease-in-out;}
  444.  
  445. #posts:hover .info, #posts:hover .infotext {
  446. opacity:1;
  447. -webkit-transition: all 0.8s ease-in-out;
  448. -moz-transition: all 0.8s ease-in-out;}
  449.  
  450. .info a, .infotext a{
  451. color:#444;
  452. -webkit-transition: all 0.7s ease-in-out;
  453. -moz-transition: all 0.7s ease-in-out;
  454. -o-transition: all 0.7s ease-in-out;
  455. -ms-transition: all 0.7s ease-in-out;
  456. transition: all 0.7s ease-in-out;}
  457. .infotext a{color:#999;}
  458.  
  459. .info a:hover{text-shadow: 1px 1px 2px #ddd;}
  460.  
  461. .linktitle{
  462. color:{color:title};
  463. font-family:calibri;
  464. font-weight:700;
  465. background:#f8f8f8;
  466. text-transform:uppercase;
  467. letter-spacing:-1px;
  468. text-shadow:1px 1px 1px #eee;
  469. line-height: 100%;
  470. text-align:justify;
  471. padding: 6px;
  472. {block:if2columns210}
  473. font-size:15px;
  474. {/block:if2columns210}
  475. {block:if2columns250}
  476. font-size:16px;
  477. {/block:if2columns250}
  478. {block:if250px}
  479. font-size:16px;
  480. {/block:if250px}
  481. {block:if400px}
  482. font-size:18px;
  483. {/block:if400px}
  484. {block:if500px}
  485. font-size:20px;
  486. {/block:if500px}}
  487.  
  488. #asker {
  489. color:#fff;
  490. background:{color:asker};
  491. font-family:consolas;
  492. text-transform: uppercase;
  493. letter-spacing: 1px;
  494. line-height: 100%;
  495. text-align:right;
  496. padding:7px;
  497. font-size:14px;
  498. -webkit-transition: all 0.8s ease-in-out;
  499. -moz-transition: all 0.8s ease-in-out;}
  500.  
  501. #asker img{width:24px;}
  502.  
  503. #questions {
  504. text-align:justify;
  505. color: #777;
  506. padding:10px;
  507. font-family:trebuchet ms;
  508. font-size:11px;
  509. overflow:auto;
  510. background:{color:base color 2};
  511. margin-top:0px;
  512. -webkit-transition: all 0.8s ease-in-out;
  513. -moz-transition: all 0.8s ease-in-out;}
  514.  
  515. #asker a {color:#fff;
  516. -webkit-transition: all 0.8s ease-in-out;
  517. -moz-transition: all 0.8s ease-in-out;}
  518. #asker a:hover {color:#ddd;
  519. -webkit-transition: all 0.8s ease-in-out;
  520. -moz-transition: all 0.8s ease-in-out;}
  521.  
  522. #quote {
  523. color:#888;
  524. font: oblique 15px cambria;
  525. letter-spacing:0px;
  526. line-height: 100%;
  527. padding: 15px 15px 0px 15px;
  528. background:{color:base color 2};
  529. text-align:justify;
  530. margin-bottom: 10px;}
  531.  
  532. #source {font: 9px calibri; text-align: right;background:{color:base color};padding: 5px; margin-top:15px;margin-left:-15px;color:#fff;{block:if2columns210}width:200px;{/block:if2columns210}{block:if2columns250}width:240px;{/block:if2columns250}{block:if250px}width:240px;{/block:if250px}{block:if400px}width:390px;{/block:if400px}{block:if500px}width:490px;{/block:if500px}}
  533. #source a{color:#fcfcfc;}
  534.  
  535. .chat ul{padding:0px 0px 5px 0px;margin:0px;}
  536. .chat li{margin:0px;padding:6px 6px 6px 8px;list-style-type:none;}
  537. .chat li.odd {background:#f5f5f5;}
  538. .chat li.even {background:#fcfcfc;}
  539. span.chats {color:#222;font: 10px calibri; font-weight:700;letter-spacing:1px;text-transform:uppercase;}
  540.  
  541. .audio {background-color:{color:base color 2};height:62px;margin-bottom:0px;}
  542. .audio-player{height:26px;width:26px; margin-top: 15px; margin-left: 15px;overflow:hidden;opacity:0.5;border: 3px solid #f9f9f9; position:absolute; z-index:2; margin-right:12px;}
  543. .audio-album { position:absolute; width:42px; margin-right:0px;}
  544. .audio-info { height: 50px;margin-left:60px; padding:0px 10px 0px 10px;text-align:left; font-family:calibri;font-size:10px;line-height:110%;font-weight:bold;color:#888;text-transform:uppercase;}
  545.  
  546. #infoperm{
  547. font-family: calibri;
  548. font-size:9px;
  549. text-transform:uppercase;
  550. letter-spacing:0px;
  551. text-align:left;
  552. margin-top:10px;
  553. padding-left: 13px;
  554. padding-right: 13px;
  555. padding-top: 8px;
  556. padding-bottom: 8px;
  557. background-color: #f9f9f9;
  558. {block:permalinkpage}width:475px;{/block:permalinkpage}}
  559.  
  560. #tagperm{
  561. font-family:calibri;
  562. text-transform:normal;
  563. font-size:9px;
  564. letter-spacing: 1px;
  565. text-align:left;
  566. margin-top: 3px;
  567. padding-top: 3px;
  568. background-color: #f8f8f8;}
  569.  
  570. #notecount{
  571. font-family:consolas;
  572. text-transform:normal;
  573. font-size:11px;
  574. letter-spacing: 1px;
  575. text-align:center;
  576. margin-top: 6px;
  577. margin-bottom: 10px;
  578. padding: 2px;
  579. background-color: #f8f8f8;}
  580.  
  581. #infoperm a {{color:hyperlinks};}
  582. #tagperm a {{color:hyperlinks};}
  583. #tagperm a:hover {color:{color:hyperlinks hover};}
  584.  
  585. .pnotes {
  586. background:transparent;
  587. max-height:250px;
  588. width:500px;
  589. text-align: left;
  590. overflow:auto;
  591. line-height:15px;
  592. padding:5px;
  593. margin-left: -20px;}
  594.  
  595. .pnotes img{width:16px;}
  596.  
  597. .pnotes li{list-style-type:none; border-bottom: 1px solid #ebebeb;padding:4px;margin-right: 20px;margin-bottom:2px;}
  598.  
  599. ol.notes {margin: 25px 0px;}
  600.  
  601. img.avatar {
  602. vertical-align: -4px;
  603. width: 16px;
  604. height: 16px;
  605. padding: 1px;}
  606.  
  607. </style>
  608.  
  609. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  610. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  611. <script type="text/javascript">
  612. $(window).load(function () {
  613. $('#entry').masonry({
  614. itemSelector : "#posts",
  615. },
  616. function() { $('#entry').masonry({ appendedContent: $(this) }); },
  617. // trigger Masonry as a callback
  618. function( newElements ) {
  619. var $newElems = $( newElements ).css({ opacity: 0 });
  620. // ensure that images load before adding to masonry layout
  621. $newElems.imagesLoaded(function(){
  622. $newElems.animate({ opacity: 1 });
  623. $container.masonry( 'appended', $newElems, true );
  624. });
  625. }
  626. );
  627. });
  628. </script>
  629.  
  630. </head>
  631. <body>
  632. <div id="content">
  633. <div id="sidebar">
  634. <div id="pagination">
  635. {block:Pagination}
  636. {block:PreviousPage}<a href="{PreviousPage}">previous page </a>{/block:PreviousPage} - {CurrentPage} of {TotalPages} - {block:NextPage}<a href="{NextPage}"> next page</a>{/block:NextPage}
  637. {/block:Pagination}
  638. </div>
  639. <div id="image"><img src="{image:picture}"></div>
  640. <div id="navigation">
  641. <div class="navtitle" style="background:{color:base color};color:#fff">{text:navigation title}:</div><a href="/">home</a><a href="/ask">inbox</a>{block:ifLink1}<a href="{text:Link1}">{text:Link1 Title}</a>{/block:ifLink1}{block:ifLink2}<a href="{text:Link2}">{text:Link2 Title}</a>{/block:ifLink2}{block:ifLink3}<a href="{text:Link3}">{text:Link3 Title}</a>{/block:ifLink3}{block:ifLink4}<a href="{text:Link4}">{text:Link4 Title}</a>{/block:ifLink4}{block:ifLink5}<a href="{text:Link5}">{text:Link5 Title}</a>{/block:ifLink5}{block:ifLink6}<a href="{text:Link6}">{text:Link6 Title}</a>{/block:ifLink6}{block:ifLink7}<a href="{text:Link7}">{text:Link7 Title}</a>{/block:ifLink7}
  642. </div>
  643. <div id="title">{Title}</div>
  644. <div id="description">
  645. {block:Description}{Description}{/block:Description}
  646. </div>
  647. </div>
  648.  
  649. <div id="entry">
  650. {block:Posts}
  651. <div id="posts">
  652.  
  653. {block:Quote}
  654. <div id="quote">{Quote}<br><div id="source">--- {Source}</small></div></div>
  655. <div class="infotext">
  656. {block:Date}<a href="{Permalink}" title="permalink">{ShortMonth} {DayofMonth}</a> {/block:Date}
  657. {block:RebloggedFrom} &middot; <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> &middot; <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  658. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  659. {/block:Quote}
  660.  
  661. {block:Photo}
  662. {block:indexpage}
  663. <div id="opandgrey">
  664. <div class="info">
  665. <div style="padding:15px;">
  666. <span style="background:#fff; padding:1px 3px 1px 3px;color:#444;">{TimeAgo}</span><br>
  667. {block:Date}<span style="background:#fff; padding:1px 3px 1px 3px;"><a href="{Permalink}" title="permalink">{DayofMonth}.{ShortMonth}.{Year}</a> {/block:Date}</span>
  668. {block:RebloggedFrom} <br><span style="background:#fff; padding:1px 3px 1px 3px;"><a href="{ReblogParentURL}" title="{ReblogParentName}">via</a></span> & <span style="background:#fff; padding:1px 3px 1px 3px;"><a href="{ReblogRootURL}" title="{ReblogRootName}">source</a></span>{/block:RebloggedFrom}
  669. {block:NoteCount} <br><span style="background:#fff; padding:1px 3px 1px 3px;color:#444;">{NoteCountWithLabel}</span>{/block:NoteCount}
  670. <br> <span style="background:#fff; padding:1px 3px 1px 3px;"><a href="{ReblogURL}" title="reblog this post" style="color:#666;">reblog</a></span></div></div>
  671. <center><img src="{PhotoURL-500}" style="{block:if2columns210}max-width:210px;{/block:if2columns210}{block:if2columns250}max-width:250px;{/block:if2columns250}{block:if250px}max-width:250px;
  672. {/block:if250px}{block:if400px}max-width:400px;
  673. {/block:if400px}{block:if500px}max-width:500px;
  674. {/block:if500px}"/></center></div>
  675. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  676. <div class="infotext">
  677. {block:HasTags} tags:{block:Tags} <a href="{TagURL}">&middot;{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  678. {/block:indexpage}
  679. {block:permalinkpage}
  680. <center><img src="{PhotoURL-500}" alt="{PhotoAlt}" style="max-width:500px;"></center>
  681. {block:Caption}<br><div id="caption">{Caption}</div>{/block:Caption}
  682. {/block:permalinkpage}
  683. {/block:Photo}
  684.  
  685. {block:Photoset}
  686. {block:indexpage}
  687. <div id="opandgrey">
  688. <div class="info">
  689. <div style="padding:15px;">
  690. <span style="background:#fff; padding:1px 3px 1px 3px;color:#444;">{TimeAgo}</span><br>
  691. {block:Date}<span style="background:#fff; padding:1px 3px 1px 3px;"><a href="{Permalink}" title="permalink">{DayofMonth}.{ShortMonth}.{Year}</a> {/block:Date}</span>
  692. {block:RebloggedFrom} <br><span style="background:#fff; padding:1px 3px 1px 3px;"><a href="{ReblogParentURL}" title="{ReblogParentName}">via</a></span> & <span style="background:#fff; padding:1px 3px 1px 3px;"><a href="{ReblogRootURL}" title="{ReblogRootName}">source</a></span>{/block:RebloggedFrom}
  693. {block:NoteCount} <br><span style="background:#fff; padding:1px 3px 1px 3px;color:#444;">{NoteCountWithLabel}</span>{/block:NoteCount}
  694. <br> <span style="background:#fff; padding:1px 3px 1px 3px;"><a href="{ReblogURL}" title="reblog this post" style="color:#666;">reblog</a></span></div></div>
  695. <center>{block:if2columns210}{Photoset-500}{/block:if2columns210}{block:if2columns250}{Photoset-250}{/block:if2columns250}{block:if250px}{Photoset-250}
  696. {/block:if250px}{block:if400px}{Photoset-400}
  697. {/block:if400px}{block:if500px}{Photoset-500}
  698. {/block:if500px}</center></div>
  699. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  700. <div class="infotext">
  701. {block:HasTags} tags:{block:Tags} <a href="{TagURL}">&middot;{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  702. {/block:indexpage}
  703. {block:permalinkpage}
  704. <center>{Photoset-500}</center>
  705. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  706. {/block:permalinkpage}
  707. {/block:Photoset}
  708.  
  709. {block:Link}
  710. <a href="{URL}" class="link" {Target}><div class="linktitle">{Name} ➨</div></a>
  711. {block:Description}<div id="text">{Description}<br/></div>{/block:Description}
  712. <div class="infotext">
  713. {block:Date}<a href="{Permalink}" title="permalink">{ShortMonth} {DayofMonth}</a> {/block:Date}
  714. {block:RebloggedFrom} &middot; <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> &middot; <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  715. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  716. {block:Link}
  717.  
  718. {block:Chat}
  719. {block:Title}<div class="posttitle">{Title}</div>{/block:Title}
  720. <div class="chat">
  721. <ul>{block:Lines}
  722. <li class="{Alt} u{UserNumber}">
  723. {block:Label}<span class="chats">{Label}</span>{/block:Label}
  724. {Line}</li>
  725. {/block:Lines}</ul></div>
  726. {/block:Label}
  727. <div class="infotext">
  728. {block:Date}<a href="{Permalink}" title="permalink">{ShortMonth} {DayofMonth}</a> {/block:Date}
  729. {block:RebloggedFrom} &middot; <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> &middot; <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  730. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  731. {/block:Chat}
  732.  
  733. {block:Audio}
  734. <div class="audio">
  735. {block:AlbumArt}<img class="audio-album" src="{AlbumArtURL}" style="width:62px;">{/block:AlbumArt}
  736. <div class="audio-player">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div>
  737. <div class="audio-info">
  738. {block:TrackName} <div style="font-family:calibri;text-transform:uppercase; font-size:10px;padding:8px 8px 8px 8px;margin-left:-8px;color:#fff;width:100%;background:{color:base color};">{TrackName}</div><br>{/block:TrackName}
  739. {block:Artist}{Artist}<br>{/block:Artist}
  740. </div></div>
  741. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}<br>
  742. <div class="infotext">
  743. {block:Date}<a href="{Permalink}" title="permalink">{ShortMonth} {DayofMonth}</a> {/block:Date}
  744. {block:RebloggedFrom} &middot; <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> &middot; <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  745. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  746. {/block:Audio}
  747.  
  748. {block:Text}
  749. {block:Title}
  750. <div class="posttitle">{Title}</div>
  751. {/block:Title}
  752. <div id="text">{Body}<br/></div>
  753. <div class="infotext">
  754. {block:Date}<a href="{Permalink}" title="permalink">{ShortMonth} {DayofMonth}</a> {/block:Date}
  755. {block:RebloggedFrom} &middot; <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> &middot; <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  756. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  757. {/block:Text}
  758.  
  759. {block:Video}
  760. {block:if2columns400}{Video-400}{/block:if2columns400}{block:if3columns250}{Video-250}{/block:if3columns250}{block:if2columns250}{Video-250}{/block:if2columns250}{block:indexpage}{block:if250px}{Video-250}{/block:if250px}{block:if400px}{Video-400}{/block:if400px}{block:if500px}{Video-500}{/block:if500px}
  761. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  762. <div class="infotext">
  763. {block:Date}<a href="{Permalink}" title="permalink">{ShortMonth} {DayofMonth}</a> {/block:Date}
  764. {block:RebloggedFrom} &middot; <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> &middot; <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  765. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  766. {/block:indexpage}
  767. {block:permalinkpage}
  768. <center>{Video-500}</center>
  769. {block:Caption}{Caption}{/block:Caption}
  770. {/block:permalinkpage}
  771. {block:Video}
  772.  
  773. {block:Answer}
  774. <div id="asker">{Asker} <img src="{AskerPortraitURL-24}" style="vertical-align:-7px;border-radius:50%;"></div><div id="questions">{Question}</div><div id="text">{Answer}</div>
  775. <div class="infotext">
  776. {block:Date}<a href="{Permalink}" title="permalink">{ShortMonth} {DayofMonth}</a> {/block:Date}
  777. {block:RebloggedFrom} &middot; <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> &middot; <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} {block:NoteCount} &middot;{NoteCount}<small>&hearts;</small>{/block:NoteCount} &middot; <a href="{ReblogURL}" title="reblog">reblog</a>
  778. {block:HasTags} &middot; <a title="{block:Tags} #{Tag}{/block:Tags}">Tags</a>{/block:HasTags}</div>
  779. {/block:Answer}
  780.  
  781. {block:permalinkpage}
  782. <div id="infoperm">
  783. {block:Date}{Month} {DayOfMonth}, {Year} at {24Hour}:{Minutes}{/block:Date}
  784. {block:RebloggedFrom} / <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a> {/block:RebloggedFrom}
  785. {block:ContentSource} / <b>source:</b> <a href="{SourceURL}">{SourceLink}</a>{/block:ContentSource}
  786.  
  787. {block:HasTags}
  788. <div id="tagperm">
  789. <b>Tagged as:</b>{block:Tags} <a href="{TagURL}"> <small>#</small>{Tag}</a> {/block:Tags}</div>{/block:HasTags} </div>
  790.  
  791. <div id="notecount">{block:NoteCount}<p>{NoteCountWithLabel}{/block:NoteCount}</div>
  792.  
  793. <div class="pnotes">
  794. {block:PostNotes}
  795. {PostNotes-16}
  796. {/block:PostNotes}
  797.  
  798. </div>{/block:permalinkpage}</div>
  799. {/block:Posts}
  800. </div>
  801.  
  802. {block:ifnot2columns210}
  803. {block:ifinfinitescroll}
  804. {block:indexpage}
  805. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  806. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  807. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  808. <script type="text/javascript">
  809. $(window).load(function(){
  810. var $wall = $('#entry');
  811. $wall.imagesLoaded(function(){
  812. $wall.masonry({
  813. itemSelector: '#posts',
  814. isAnimated : false
  815. });
  816. });
  817.  
  818. $wall.infinitescroll({
  819. navSelector : '#page-nav',
  820. nextSelector : '#page-nav a',
  821. itemSelector : '#posts',
  822. bufferPx : 2000,
  823. debug : false,
  824. errorCallback: function() {
  825. $('#infscr-loading').fadeOut('normal');
  826. }},
  827. function( newElements ) {
  828. var $newElems = $( newElements );
  829. $newElems.hide();
  830. $newElems.imagesLoaded(function(){
  831. $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
  832. });
  833. }); $('#content').show(500);
  834. });
  835. </script>
  836. {/block:indexpage}
  837. {/block:ifinfinitescroll}
  838. {/block:ifnot2columns210}
  839.  
  840. {block:if2columns210}
  841. {block:ifinfinitescroll}
  842. {block:indexpage}
  843. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  844. <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  845. <script src="/jquery.masonry.min.js" type="text/javascript"></script>
  846. <script src="/jquery.infinitescroll.min.js" type="text/javascript" ></script>
  847. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  848. <script type="text/javascript">
  849. $(document).ready(function() {
  850. $('iframe.photoset').each(function() {
  851. var i = this;
  852. $(i).attr("onload", "ps_resize(this)");
  853. var s = $(i).attr("src");
  854. s = s.replace(/\/500\//, "/200/");
  855. $(i).attr("src", s);
  856. });
  857. $(function(){
  858. var $container = $('#entry');
  859. $container.imagesLoaded(function(){
  860. $container.masonry({
  861. itemSelector: '#posts',
  862. });
  863. });
  864. $container.infinitescroll({
  865. navSelector : '#page-nav',
  866. nextSelector : '#page-nav a',
  867. itemSelector : '#posts',
  868. loading: {
  869. finishedMsg: '~ THE END ~',
  870. img: '',
  871. text: '....'
  872. }
  873. },
  874. function( newElements ) {
  875. $(newElements).find('iframe.photoset').each(function() {
  876. var i = this;
  877. $(i).attr("onload", "ps_resize(this)");
  878. var s = $(i).attr("src");
  879. s = s.replace(/\/500\//, "/200/");
  880. $(i).attr("src", s);
  881. });
  882. var $newElems = $( newElements ).css({ opacity: 0 });
  883. $newElems.imagesLoaded(function(){
  884. $newElems.animate({ opacity: 1 });
  885. $container.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
  886. });
  887. }
  888. );
  889. });
  890. });
  891.  
  892. function ps_resize(i) {
  893. $(i).contents().find("body").imagesLoaded(function() {
  894. $(i).attr("width", 200);
  895. $(i).attr("height", $(this).height());
  896. var $container = $('#entry');
  897. $container.imagesLoaded(function(){
  898. $container.masonry({
  899. itemSelector: '#posts',
  900. });
  901. });
  902. });
  903. return false;
  904. }
  905. </script>
  906. <script type="text/javascript">
  907. (function($, undefined) {
  908. $.extend($.infinitescroll.prototype,{
  909. _callback_masonry: function infscr_callback_masonry (newElements) {
  910. $(this).masonry('appended',$(newElements));
  911. }
  912. });
  913. })(jQuery);
  914. </script>
  915.  
  916. {/block:indexpage}
  917. {/block:ifinfinitescroll}
  918. {/block:if2columns210}
  919.  
  920. </body><a href="http://soonjunthemes.tumblr.com/" title="theme created by soonjun" style="font-size:10px;right:15px;bottom:15px;position:fixed;font-family:calibri;letter-spacing:1px;background:#f7f7f7;padding: 2px 5px 3px 5px;border-radius:3px;z-index:99;"> theme. </a></div>
  921. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!