jaesoonie

THEME #42.1

Jun 21st, 2014
4,904
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.99 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6.  
  7.  
  8. ᴛʜᴇᴍᴇ #42; ᴠᴇʀsɪᴏɴ 1
  9. © ᴍᴀᴅᴇ ʙʏ ᴄʜʟᴏᴇ
  10. [ ʏ-ᴏɴɢɪɴ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ] & [ sᴏᴏɴᴊᴜɴs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]
  11.  
  12. ᴛʜᴇᴍᴇs ᴄᴀɴ ʙᴇ ғᴏᴜɴᴅ ᴀᴛ:
  13. [ sᴏᴏɴ-co.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]
  14.  
  15.  
  16. - ᴅᴏɴ'ᴛ sᴛᴇᴀʟ ɪᴛ.
  17. - ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏɴ ᴛʜᴇ ᴛʜᴇᴍᴇ.
  18.  
  19.  
  20.  
  21. -->
  22.  
  23. <head>
  24. <title>{Title}</title>
  25. <link rel="shortcut icon" href="{Favicon}">
  26. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><script type="text/javascript"
  27. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  28.  
  29.  
  30. <meta name="select:Font" content="trebuchet ms" title="Trebuchet ms"/>
  31. <meta name="select:Font" content="arial" title="Arial"/>
  32. <meta name="select:Font" content="calibri" title="Calibri"/>
  33. <meta name="select:Font" content="consolas" title="Consolas"/>
  34. <meta name="select:Font" content="times" title="Times New Roman"/>
  35. <meta name="select:Font" content="tunga" title="Tunga"/>
  36. <meta name="select:Font" content="century gothic" title="Century Gothic"/>
  37. <meta name="select:Font" content="cambria" title="Cambria"/>
  38. <meta name="select:Font" content="georgia" title="Georgia"/>
  39. <meta name="color:Blog Background" content="#fff" />
  40. <meta name="color:Headers Background" content="#f5f5f5" />
  41. <meta name="color:Title Font" content="#ffffff" />
  42. <meta name="color:Title Background" content="#000" />
  43. <meta name="color:Post Title Font" content="#888" />
  44. <meta name="color:All General Text" content="#565656" />
  45. <meta name="color:Bold Text" content="#6f6e6e" />
  46. <meta name="color:Italic Text" content="#b9b8b8" />
  47. <meta name="color:Navigation Background" content="#f5f5f5" />
  48. <meta name="color:Navigation Font" content="#777" />
  49. <meta name="color:Links Background" content="#fff" />
  50. <meta name="color:Links Font" content="#777" />
  51. <meta name="color:Description Font" content="#aaa" />
  52. <meta name="color:Description Background" content="#fff" />
  53. <meta name="color:Hyperlinks" content="#ede5f3"/>
  54. <meta name="color:Hyperlinks Hover" content="#fff" />
  55. <meta name="color:Text Posts Background" content="#f5f5f5" />
  56. <meta name="color:Info Font" content="#aaa" />
  57. <meta name="color:Info Background" content="#fff" />
  58. <meta name="color:Tags Font" content="#777" />
  59. <meta name="color:Tags Background" content="#ede5f3" />
  60. <meta name="color:Tooltip Background" content="#222" />
  61. <meta name="color:Tooltip Font" content="#ffffff" />
  62. <meta name="color:Pagination Font" content="#888" />
  63. <meta name="color:Question Background" content="#f5f5f5" />
  64. <meta name="image:Blog Background" content="" />
  65. <meta name="image:Sidebar Image" content="" />
  66. <meta name="image:Special Cursor Default" content="" />
  67. <meta name="image:Special Cursor Pointer" content="" />
  68. <meta name="text:Text Size" content="10px" />
  69. <meta name="text:Post Distance" content="150px"/>
  70. <meta name="text:Home" content="home" />
  71. <meta name="text:Ask" content="message" />
  72. <meta name="text:Archive" content="archive" />
  73. <meta name="text:Archive Link" content="/archive" />
  74. <meta name="text:Link1" content="/" />
  75. <meta name="text:Link1 Title" content="link 1" />
  76. <meta name="text:Link2" content="/" />
  77. <meta name="text:Link2 Title" content="link 2" />
  78. <meta name="text:Link3" content="/" />
  79. <meta name="text:Link3 Title" content="link 3" />
  80. <meta name="if:250px" content="0"/>
  81. <meta name="if:400px" content="0"/>
  82. <meta name="if:500px" content="1"/>
  83. <meta name="if:InfiniteScroll" content="0">
  84. <meta name="if:Caption" content="1">
  85. <meta name="text:Opacity Value" content="1"/>
  86. <meta name="if:Greyscale" content="0"/>
  87. <meta name="if:TinyCursor" content="0"/>
  88. <meta name="if:SpecialCursor" content="0"/>
  89. <meta name="select:Cursor" content="default" title="default">
  90. <meta name="select:Cursor" content="crosshair" title="crosshair">
  91. <meta name="select:Cursor" content="help" title="help">
  92. <meta name="select:Cursor" content="sw-resize" title="resize">
  93.  
  94. <script type="text/javascript"
  95. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  96. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  97. <script>
  98. (function($){
  99. $(document).ready(function(){
  100. $("[title]").style_my_tooltips();
  101. });
  102. })(jQuery);
  103. </script>
  104. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  105. <script>
  106. $(document).ready(function(){
  107. $("#flip").click(function(){
  108. $("#navigation").slideToggle("slow");
  109. });
  110. });
  111. </script>
  112.  
  113. <style type="text/css">
  114.  
  115.  
  116.  
  117. /* --- general --- */
  118.  
  119.  
  120.  
  121. body { font-family:{select:Font};line-height:120%;color:{color:All General Text};word-wrap: break-word;font-size:{text:Text Size};background: {color:Blog Background} url('{image:Blog Background}') fixed repeat;
  122. cursor:{select:Cursor};}
  123.  
  124.  
  125.  
  126. a {
  127. text-decoration:none;
  128. cursor:pointer;
  129. color:{color:Hyperlinks};
  130. -webkit-transition: all 0.7s ease-in-out;
  131. -moz-transition: all 0.7s ease-in-out;
  132. -o-transition: all 0.7s ease-in-out;
  133. -ms-transition: all 0.7s ease-in-out;
  134. transition: all 0.7s ease-in-out;}
  135.  
  136. a:link, a:active, a:visited {
  137. color: {color:Hyperlinks};
  138. -webkit-transition: all 0.7s ease-in-out;
  139. -moz-transition: all 0.7s ease-in-out;
  140. -o-transition: all 0.7s ease-in-out;
  141. -ms-transition: all 0.7s ease-in-out;
  142. transition: all 0.7s ease-in-out;}
  143.  
  144. a:hover {color:{color:Hyperlinks Hover};}
  145.  
  146.  
  147. b, strong {
  148. font-weight:700;
  149. color:{color:Bold Text};}
  150.  
  151. i, em {
  152. font-weight:light;
  153. color:{color:Italic Text};}
  154.  
  155. h2 { font:bold 15px arial;}
  156.  
  157.  
  158. blockquote {
  159. margin: 3px;
  160. padding:0px 3px 0px 3px;
  161. line-height:120%;
  162. border-left: 2px solid #fff;
  163. background-color:{color:Text Posts Background};}
  164.  
  165.  
  166. blockquote img {
  167. {block:indexpage}
  168. width:160px;
  169. {/block:indexpage}
  170. {block:permalinkpage}
  171. width:410px;
  172. {/block:permalinkpage}
  173. overflow: auto;}
  174.  
  175.  
  176. #caption {
  177. padding: 10px;
  178. color:{color:All General Text};
  179. background-color:{color:Text Posts Background};
  180. margin-top:4px;
  181. text-align:justify;
  182. border:4px double #fff;}
  183.  
  184.  
  185. pre, xmp, plaintext, listing {
  186. display: block;
  187. white-space: pre;
  188. background: {color:Text Posts Background};
  189. padding: 5px;
  190. word-wrap: break-word;
  191. font: 10px consolas;}
  192.  
  193.  
  194.  
  195.  
  196. /* --- sidebar --- */
  197.  
  198.  
  199.  
  200.  
  201. #sidebar {
  202. position: fixed;
  203. top:0px;
  204. height:100%;
  205. width:150px;
  206. padding:15px;
  207. font:10px consolas;
  208. letter-spacing:1px;
  209. {block:if250px}
  210. margin-left:270px;
  211. {/block:if250px}
  212. {block:if400px}
  213. margin-left:230px;
  214. {/block:if400px}
  215. {block:if500px}
  216. margin-left:200px;
  217. {/block:if500px}}
  218.  
  219. #title {
  220. width:130px;
  221. margin-top:50px;
  222. font: bold 23px arial;
  223. letter-spacing:5px;
  224. line-height:110%;
  225. text-align:center;
  226. padding:10px;
  227. color:{color:Title Font};
  228. z-index:99;
  229. background:{color:Title Background};}
  230.  
  231. #flip {
  232. text-align:center;
  233. cursor:pointer;
  234. border:10px solid {color:Navigation Background};
  235. padding:2px;
  236. background:{color:Links Background};
  237. width:126px;}
  238.  
  239. #navigation {
  240. width: 140px;
  241. padding:5px;
  242. text-align:center;
  243. z-index:9;
  244. position:relative;
  245. display:none;
  246. background:{color:Navigation Background};
  247. border-top:2px solid #fff;}
  248.  
  249. #navigation a {
  250. display:inline-block;
  251. width:57px;
  252. color:{color:Links Font};
  253. margin:3px;
  254. padding:2px;
  255. font:8px consolas;
  256. text-transform:uppercase;
  257. background:{color:Links Background};
  258. letter-spacing:1px;}
  259.  
  260. #description {
  261. width: 130px;
  262. font: 9px arial;
  263. letter-spacing:0px;
  264. line-height:100%;
  265. padding:10px;
  266. text-align: justify;
  267. color:{color:Description Font};
  268. z-index:9999;
  269. background:{color:Description Background};}
  270.  
  271. #pagination {
  272. margin:auto;
  273. position:relative;
  274. text-align:center;
  275. font:8px arial;
  276. letter-spacing:3px;
  277. text-transform:lowercase;
  278. width: 205px;
  279. z-index:9999;
  280. margin-top:7px;
  281. {block:permalinkpage}display:none;{/block:permalinkpage}
  282. {block:ifinfinitescroll}display:none;{/block:ifinfinitescroll}}
  283.  
  284. #pagn {display:inline-block;text-align:center;padding:2px 4px 2px 4px;}
  285. #pagp {display:inline-block;text-align:center;padding:2px 4px 2px 4px;}
  286.  
  287. #pagination a{color:{color:Pagination Font}; cursor:pointer;}
  288.  
  289.  
  290.  
  291.  
  292. /* --- posts --- */
  293.  
  294.  
  295.  
  296.  
  297. #container{
  298. margin:auto;
  299. padding:0px 0px 20px 0px;
  300. margin-top:50px;
  301. {block:indexpage}
  302. {block:if250px}
  303. width:250px;margin-left:500px;
  304. {/block:if250px}
  305. {block:if400px}
  306. width:400px;margin-left:440px;
  307. {/block:if400px}
  308. {block:if500px}
  309. width:500px;margin-left:410px;
  310. {/block:if500px}
  311. {/block:indexpage}
  312. {block:permalinkpage}
  313. width:500px;margin-left:410px;
  314. {/block:permalinkpage}}
  315.  
  316. #posts{
  317. {block:indexpage}
  318. {block:if250px}
  319. width:250px;margin-bottom:{text:Post Distance};
  320. {/block:if250px}
  321. {block:if400px}
  322. width:400px;margin-bottom:{text:Post Distance};
  323. {/block:if400px}
  324. {block:if500px}
  325. width:500px;margin-bottom:{text:Post Distance};
  326. {/block:if500px}
  327. {/block:indexpage}
  328. {block:PermalinkPage}
  329. width:500px;margin-bottom:20px;line-height:120%;
  330. {/block:PermalinkPage}}
  331.  
  332. .titles{
  333. color:{color:Post Title Font};
  334. font: bold 16px arial;
  335. line-height: 100%;
  336. text-align:left;
  337. padding:9px;
  338. text-transform:lowercase;
  339. letter-spacing:2px;}
  340.  
  341.  
  342. #opandgrey {
  343. opacity:{text:Opacity Value};
  344. -webkit-transition-duration:0.8s;
  345. -moz-transition-duration: 0.8s;
  346. transition: all 0.8s ease-in-out;
  347. {block:ifgreyscale}
  348. 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");filter: gray;
  349. -webkit-filter: grayscale(100%);-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;transition: all 0.8s ease-in-out;{/block:ifgreyscale}}
  350. #opandgrey:hover{{block:indexpage}opacity:1;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;-webkit-filter: grayscale(0%);{/block:indexpage}}
  351.  
  352. #posts img {
  353. {block:if250px}
  354. max-width:210px;
  355. height:auto
  356. {/block:if250px}
  357. {block:if400px}
  358. max-width:360px;
  359. height:auto;
  360. {/block:if400px}
  361. {block:if500px}
  362. max-width:460px;
  363. height:auto;
  364. {/block:if500px}
  365. {block:permalinkpage}max-width:450px;height:auto;{/block:permalinkpage};}
  366.  
  367. #text {
  368. padding: 5px 15px 5px 15px;
  369. text-align:justify;
  370. background:{color:Text Posts Background};}
  371.  
  372. #quote {
  373. text-align:center;
  374. font: oblique bold 20px 'bodoni';
  375. letter-spacing:1px;
  376. line-height: 100%;
  377. padding: 20px 20px 15px 20px;
  378. background:{color:Text Posts Background};}
  379.  
  380. #source {font: oblique 9px cambria;letter-spacing:1px; text-align:center;padding: 5px; margin-top:5px;color:#888;}
  381.  
  382. .chat ul{padding:0px 0px 0px 0px;margin:0px;}
  383. .chat li{margin-bottom:1px;padding:10px;list-style-type:none;}
  384. .chat li.odd {background:#f5f5f5;}
  385. .chat li.even {background:#fcfcfc;}
  386. span.chats {color:#222;font: 10px calibri; font-weight:700;letter-spacing:1px;text-transform:uppercase;}
  387.  
  388. .audioplayer {position:relative;display:inline-block;width:100%;}
  389. .player {left: 5px;top: 5px;padding:10px;background:#f5f5f5;overflow:hidden;border-right:10px solid #f5f5f5;}
  390. .button {position: relative;width: 40px;height: 40px;}
  391. .tumblr_audio_player {margin-left:60px;width: 500px;height:40px;background:#111;{block:if250px}width: 250px;{/block:if250px}{block:if400px}width: 400px;{/block:if400px}{block:if500px}width: 500px;{/block:if500px}}
  392. .audioalbum {position: absolute;left: 5px;top: 5px;overflow: hidden;width: 40px;height: 40px;border:5px solid #fff;border-radius:50%;}
  393. .audioalbum img {width: 100%;height: auto;}
  394. .audioinfo {width:auto;margin-top:10px; padding:0px;text-align:center; font-family:consolas;letter-spacing:1px;font-size:9px;font-weight:bold;color:#777;text-transform:uppercase;overflow:hidden;}
  395.  
  396. #asker {
  397. line-height: 100%;
  398. text-align:left;
  399. letter-spacing:4px;
  400. text-transform:lowercase;
  401. color:{color:Post Title Font};
  402. font:oblique bold 14px arial;
  403. -webkit-transition: all 0.7s ease-in-out;
  404. -moz-transition: all 0.7s ease-in-out;
  405. -o-transition: all 0.7s ease-in-out;
  406. -ms-transition: all 0.7s ease-in-out;
  407. transition: all 0.7s ease-in-out;}
  408.  
  409. #asker img {padding:3px;background:#fff;}
  410.  
  411. #questions {
  412. text-align:justify;
  413. padding:20px;
  414. font:oblique bold 11px calibri;
  415. margin-bottom:5px;
  416. letter-spacing:1px;
  417. background: {color:Question Background};}
  418.  
  419. #asker a {color:#888;}
  420. #asker a:hover {color:#666;}
  421.  
  422.  
  423.  
  424.  
  425. /* --- post information --- */
  426.  
  427.  
  428.  
  429.  
  430. .info {
  431. {block:indexpage}
  432. position:absolute;
  433. letter-spacing:1px;
  434. font: 9px consolas;
  435. text-align:center;
  436. text-transform:uppercase;
  437. color:{color:Info Font};
  438. z-index:2;
  439. padding:10px;
  440. opacity:0;
  441. line-height:160%;
  442. background:{color:Info Background};
  443. {block:if250px}
  444. width:180px;
  445. margin-left:25px;
  446. margin-top:25px;
  447. {/block:if250px}
  448. {block:if400px}
  449. width:310px;
  450. margin-left:35px;
  451. margin-top:35px;
  452. {/block:if400px}
  453. {block:if500px}
  454. width:410px;
  455. margin-left:35px;
  456. margin-top:35px;
  457. {/block:if500px}
  458. -webkit-transition: all 0.7s ease-in-out;
  459. -moz-transition: all 0.7s ease-in-out;
  460. -o-transition: all 0.7s ease-in-out;
  461. -ms-transition: all 0.7s ease-in-out;
  462. transition: all 0.7s ease-in-out;
  463. {/block:indexpage}
  464. {block:PermalinkPage}
  465. display:none;
  466. {/block:PermalinkPage}}
  467.  
  468. .info_text {
  469. {block:indexpage}
  470. position:absolute;
  471. text-transform:uppercase;
  472. letter-spacing:1px;
  473. font-family: calibri;
  474. font-size:8px;
  475. margin-top:-15px;
  476. opacity:0;
  477. color:{color:Info Font};
  478. z-index:2;
  479. padding:1px 3px 1px 3px;
  480. -webkit-transition: all 0.7s ease-in-out;
  481. -moz-transition: all 0.7s ease-in-out;
  482. -o-transition: all 0.7s ease-in-out;
  483. -ms-transition: all 0.7s ease-in-out;
  484. transition: all 0.7s ease-in-out;
  485. {/block:indexpage}
  486. {block:PermalinkPage}
  487. display:none;
  488. {/block:PermalinkPage}}
  489.  
  490. .tagging{
  491. {block:indexpage}
  492. position:absolute;
  493. text-transform:uppercase;
  494. font-family: calibri;
  495. font-size:8px;
  496. margin-top:5px;
  497. opacity:0;
  498. line-height:140%;
  499. text-align:justify;
  500. word-wrap: break-word;
  501. text-shadow:1px 1px 0px #eee;
  502. {/block:indexpage}
  503. {block:PermalinkPage}
  504. display:none;
  505. {/block:PermalinkPage}
  506. -webkit-transition: all 0.5s ease-in-out;
  507. -moz-transition: all 0.5s ease-in-out;
  508. -o-transition: all 0.5s ease-in-out;
  509. -ms-transition: all 0.5s ease-in-out;
  510. transition: all 0.5s ease-in-out;}
  511.  
  512. #posts:hover .info_text {opacity:1;}
  513. #posts:hover .tagging, #posts:hover .info {opacity:1;}
  514. .info_text a{color:{color:Info Font};}
  515. .info a{color:{color:Info Font};}
  516. .tagging a{color:{color:Tags Font};background:{color:Tags Background};}
  517. .infofoot a:hover, .info a:hover, .tagging a:hover{text-decoration:underline;}
  518.  
  519.  
  520.  
  521.  
  522. /* --- permalink --- */
  523.  
  524.  
  525.  
  526.  
  527. #infoperm{
  528. font-family: arial;
  529. font-size:9px;
  530. text-transform:lowercase;
  531. letter-spacing:1px;
  532. text-align:left;
  533. margin-top:10px;
  534. padding-left: 13px;
  535. padding-right: 13px;
  536. padding-top: 8px;
  537. padding-bottom: 8px;
  538. background-color: #f5f5f5;
  539. {block:permalinkpage}width:474px;{/block:permalinkpage}}
  540.  
  541. #tagperm{
  542. font-family:calibri;
  543. text-transform:normal;
  544. text-transform:uppercase;
  545. font-size:8px;
  546. letter-spacing: 1px;
  547. text-align:left;
  548. margin-top: 3px;
  549. padding: 13px;
  550. background-color: #f5f5f5;}
  551.  
  552. #notecount{
  553. font:bold 17px arial;
  554. text-transform:normal;
  555. letter-spacing: -1px;
  556. text-align:center;
  557. margin-top:5px;
  558. margin-bottom: 10px;
  559. padding: 1px;
  560. color:#333;
  561. background-color:#f5f5f5;}
  562.  
  563. #infoperm a {{color:hyperlinks};}
  564. #tagperm a {{color:hyperlinks};}
  565. #tagperm a:hover {color:{color:hyperlinks hover};}
  566.  
  567. .pnotes {
  568. background:transparent;
  569. max-height:250px;
  570. width:500px;
  571. text-align: left;
  572. overflow:auto;
  573. line-height:15px;
  574. padding:5px;
  575. margin-left: -20px;}
  576.  
  577. .pnotes img{width:26px;margin:5px;border:3px solid #f5f5f5;}
  578. .pnotes li{list-style-type:none; padding:4px;margin-right: 20px;margin-bottom:2px;}
  579. ol.notes {margin: 25px 0px;}
  580. img.avatar {
  581. vertical-align: -18px;
  582. width: 26px;
  583. height: 26px;
  584. padding: 1px;}
  585.  
  586.  
  587.  
  588. /* --- etc --- */
  589.  
  590.  
  591.  
  592. #top {
  593. margin:auto;
  594. background:{color:Headers Background};
  595. position:fixed;
  596. top:0;
  597. height:30px;
  598. z-index:9999;
  599. {block:if250px}
  600. width:250px;margin-left:500px;
  601. {/block:if250px}
  602. {block:if400px}
  603. width:400px;margin-left:440px;
  604. {/block:if400px}
  605. {block:if500px}
  606. width:500px;margin-left:410px;
  607. {/block:if500px}}
  608.  
  609. #bottom{
  610. margin:auto;
  611. background:{color:Headers Background};
  612. position:fixed;
  613. bottom:0;
  614. height:30px;
  615. z-index:9999;
  616. {block:if250px}
  617. width:250px;margin-left:500px;
  618. {/block:if250px}
  619. {block:if400px}
  620. width:400px;margin-left:440px;
  621. {/block:if400px}
  622. {block:if500px}
  623. width:500px;margin-left:410px;
  624. {/block:if500px}}
  625.  
  626. #chloe {font-size:8px;font-family:consolas;text-align:center;letter-spacing:2px;padding: 5px 8px 5px 8px;z-index:99999;position:fixed;top:0px;left:0px;color:#ccc;}
  627. #chloe a {color:#aaa;}
  628.  
  629. #s-m-t-tooltip {display: block;background: {color:Tooltip Background};font-size: 8px;font-family: calibri;letter-spacing: 1px;text-transform: uppercase;line-height:130%;color: {color:Tooltip Font};text-align: center;margin-left: 18px;padding:10px;min-width: 40px;max-width: 150px;z-index: 999999;}
  630.  
  631. iframe#tumblr_controls {right:0px !important;position:fixed !important;opacity:0.5;z-index:999999;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;}
  632. iframe#tumblr_controls:hover {opacity:1;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;}
  633.  
  634. ::-webkit-scrollbar-track {background-color:#fff;}
  635. ::-webkit-scrollbar-thumb {background-color:#f5f5f5;}
  636. ::-webkit-scrollbar {width:10px;height:7px;}
  637.  
  638. ::selection {color: #bbb; background: #f5f5f5; }
  639. ::-moz-selection {color: #bbb; background: #f5f5f5; }
  640. ::-webkit-selection {color: #bbb; background: #f5f5f5; }
  641.  
  642. {block:iftinycursor}
  643. body{cursor:url('http://www.totallylayouts.com/cursors/random/tiny_cursor.png'), auto;}
  644. a, a:hover,a:link, a:active, a:visited, #navigation a:hover, #pagination a:hover {cursor:url('http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif'), auto;}
  645. {/block:iftinycursor}
  646. {block:ifspecialcursor}
  647. body{cursor:url('{image:Special Cursor Default}'), auto;}
  648. a, a:hover,a:link, a:active, a:visited, #navigation a:hover, #pagination a:hover {cursor:url('{image:Special Cursor Pointer}'), auto;}
  649. {/block:ifspecialcursor}
  650.  
  651.  
  652.  
  653. </style>
  654.  
  655.  
  656.  
  657. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  658. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  659. <script type="text/javascript">
  660. $(window).load(function () {
  661. $('#container').masonry({
  662. itemSelector : "#posts",
  663. },
  664. function() { $('#container').masonry({ appendedContent: $(this) }); },
  665. // trigger Masonry as a callback
  666. function( newElements ) {
  667. var $newElems = $( newElements ).css({ opacity: 0 });
  668. // ensure that images load before adding to masonry layout
  669. $newElems.imagesLoaded(function(){
  670. $newElems.animate({ opacity: 1 });
  671. $container.masonry( 'appended', $newElems, true );
  672. });
  673. }
  674. );
  675. });
  676. </script>
  677.  
  678.  
  679.  
  680. </head>
  681. <body>
  682.  
  683.  
  684.  
  685. <div id="top">
  686. <div id="pagination">
  687. {block:Pagination}
  688. {block:PreviousPage}
  689. <div id="pagp"><a href="{PreviousPage}">« previous page</a>
  690. </div>
  691. {/block:PreviousPage}
  692. {block:NextPage}
  693. <div id="pagn"><a href="{NextPage}">next page »</a>
  694. </div>
  695. {/block:NextPage}
  696. {/block:Pagination}
  697. </div>
  698. </div>
  699.  
  700. <div id="bottom"></div>
  701.  
  702. <div id="sidebar">
  703. <div id="title">{Title}</div>
  704.  
  705. <div id="flip">navigation ▾</div>
  706. <div id="navigation">
  707. <a href="/">home</a><a href="/ask">askbox</a><a href="{text:archive link}">{text:archive}</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}
  708. </div>
  709.  
  710. <div id="description">{block:Description}{Description}{/block:Description}</div>
  711.  
  712. <img src="{image:Sidebar Image}" width="150">
  713.  
  714. </div>
  715.  
  716.  
  717.  
  718. <!-----------posts-------------->
  719.  
  720.  
  721.  
  722. <div id="container">
  723.  
  724. {block:Posts}
  725. <div id="posts">
  726.  
  727.  
  728.  
  729.  
  730. {block:Quote}
  731.  
  732. <div class="info_text">
  733. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} {block:RebloggedFrom} <a href="{ReblogParentURL}"> &middot; {ReblogParentName}</a>{/block:RebloggedFrom} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  734. </div>
  735.  
  736. <div id="quote">{Quote}<div id="source">{Source}</div></div>
  737.  
  738. <div class="tagging">
  739. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  740. </div>
  741.  
  742. {/block:Quote}
  743.  
  744.  
  745.  
  746.  
  747.  
  748. {block:Photo}
  749.  
  750. {block:indexpage}
  751.  
  752. <div class="info">
  753. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a> <br>{/block:Date} <span style="font-size:14px;color:#888;">▸{NoteCountWithLabel}◂</span> {block:RebloggedFrom} <br> <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> & <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} <br><a href="{ReblogURL}" title="reblog this post">reblog</a>
  754. </div>
  755.  
  756. <div id="opandgrey">
  757.  
  758. <center>
  759. <img src="{PhotoURL-500}" style="
  760. {block:if250px}max-width:250px;{/block:if250px}
  761. {block:if400px}max-width:400px;{/block:if400px}
  762. {block:if500px}max-width:500px;{/block:if500px}"/>
  763. </center>
  764.  
  765. </div>
  766.  
  767. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  768.  
  769. <div class="tagging">
  770. {block:HasTags}<span style="padding:2px 3px 2px 3px;">Tags:</span>{block:Tags} <a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  771.  
  772. {/block:indexpage}
  773.  
  774. {block:permalinkpage}
  775. <center>
  776. <img src="{PhotoURL-500}" alt="{PhotoAlt}" style="max-width:500px;">
  777. </center>
  778. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  779. {/block:permalinkpage}
  780.  
  781. {/block:Photo}
  782.  
  783.  
  784.  
  785.  
  786.  
  787. {block:Photoset}
  788.  
  789. {block:indexpage}
  790.  
  791. <div class="info">
  792. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a> <br>{/block:Date} <span style="font-size:14px;color:#888;">▸{NoteCountWithLabel}◂</span> {block:RebloggedFrom} <br> <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> & <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} <br><a href="{ReblogURL}" title="reblog this post">reblog</a>
  793. </div>
  794.  
  795. <div id="opandgrey">
  796.  
  797. <center>
  798. {block:if250px}{Photoset-250}{/block:if250px}
  799. {block:if400px}{Photoset-400}{/block:if400px}
  800. {block:if500px}{Photoset-500}{/block:if500px}
  801. </center>
  802.  
  803. </div>
  804.  
  805. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  806.  
  807. <div class="tagging">
  808. {block:HasTags}<span style="padding:2px 3px 2px 3px;">Tags:</span>{block:Tags} <a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  809. </div>
  810.  
  811. {/block:indexpage}
  812.  
  813. {block:permalinkpage}
  814. <center>{Photoset-500}</center>
  815. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  816. {/block:permalinkpage}
  817.  
  818. {/block:Photoset}
  819.  
  820.  
  821.  
  822.  
  823.  
  824. {block:Link}
  825.  
  826. <div class="info_text">
  827. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} {block:RebloggedFrom} <a href="{ReblogParentURL}"> &middot; {ReblogParentName}</a>{/block:RebloggedFrom} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  828. </div>
  829.  
  830. <a href="{URL}" class="link" {Target}>
  831. <div class="titles">{Name} ▹</div>
  832. </a>
  833. {block:Description}
  834. <div id="text">{Description}</div>
  835. {/block:Description}
  836.  
  837. <div class="tagging">
  838. {block:HasTags}<br/><br/>{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  839. </div>
  840.  
  841. {block:Link}
  842.  
  843.  
  844.  
  845.  
  846.  
  847. {block:Chat}
  848.  
  849. <div class="info_text">
  850. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} {block:RebloggedFrom} <a href="{ReblogParentURL}"> &middot; {ReblogParentName}</a>{/block:RebloggedFrom} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  851. </div>
  852.  
  853. {block:Title}
  854. <div class="titles">{Title}</div>
  855. {/block:Title}
  856. <div class="chat">
  857. <ul>
  858. {block:Lines}
  859. <li class="{Alt} u{UserNumber}">
  860. {block:Label}<span class="chats">{Label}</span>{/block:Label}
  861. {Line}</li>
  862. {/block:Lines}
  863. </ul>
  864. </div>
  865.  
  866. <div class="tagging">
  867. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  868. </div>
  869.  
  870. {/block:Chat}
  871.  
  872.  
  873.  
  874.  
  875.  
  876. {block:Audio}
  877.  
  878. <div class="info_text">
  879. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} {block:RebloggedFrom} <a href="{ReblogParentURL}"> &middot; {ReblogParentName}</a>{/block:RebloggedFrom} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  880. </div>
  881.  
  882. {block:AudioPlayer}
  883. <div class="audioplayer">
  884. {block:AlbumArt}<div class="audioalbum"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  885. <div class="player">
  886. <div class="button">{AudioPlayerWhite}</div>
  887. </div>
  888. <div class="audioinfo">{block:TrackName}{TrackName}{/block:TrackName}{block:Artist} // {Artist}{/block:Artist} {block:PlayCount}// {PlayCountWithLabel}{/block:PlayCount}
  889. </div>
  890. </div>
  891. {/block:AudioPlayer}
  892.  
  893. {block:ifcaption}{block:Caption}<br><br><div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  894.  
  895. <div class="tagging">
  896. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  897. </div>
  898.  
  899. {/block:Audio}
  900.  
  901.  
  902.  
  903.  
  904.  
  905. {block:Text}
  906.  
  907. {block:indexpage}
  908.  
  909. <div class="info_text">
  910. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} {block:RebloggedFrom} <a href="{ReblogParentURL}"> &middot; {ReblogParentName}</a>{/block:RebloggedFrom} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  911. </div>
  912.  
  913. <div id="opandgrey">
  914.  
  915. {block:Title}
  916. <div class="titles">{Title}</div>
  917. {/block:Title}
  918. <div id="text">{Body}</div>
  919.  
  920. </div>
  921.  
  922. <div class="tagging">
  923. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  924. </div>
  925.  
  926. {/block:indexpage}
  927.  
  928. {block:permalinkpage}
  929. {block:Title}
  930. <div class="titles">{Title}</div>
  931. {/block:Title}
  932. <div id="text">{Body}</div>
  933. {/block:permalinkpage}
  934.  
  935. {/block:Text}
  936.  
  937.  
  938.  
  939.  
  940.  
  941. {block:Video}
  942.  
  943. {block:indexpage}
  944.  
  945. <div class="info_text">
  946. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} {block:RebloggedFrom} <a href="{ReblogParentURL}"> &middot; {ReblogParentName}</a>{/block:RebloggedFrom} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  947. </div>
  948.  
  949. <center>
  950. {block:if250px}{Video-250}{/block:if250px}
  951. {block:if400px}{Video-400}{/block:if400px}
  952. {block:if500px}{Video-500}{/block:if500px}
  953. </center>
  954.  
  955. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  956.  
  957. <div class="tagging">
  958. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  959. </div>
  960.  
  961. {/block:indexpage}
  962.  
  963. {block:permalinkpage}
  964. <center>{Video-500}</center>
  965. {block:Caption}{Caption}{/block:Caption}
  966. {/block:permalinkpage}
  967.  
  968. {block:Video}
  969.  
  970.  
  971.  
  972.  
  973.  
  974. {block:Answer}
  975.  
  976. <div class="info_text">
  977. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} {block:RebloggedFrom} <a href="{ReblogParentURL}"> &middot; {ReblogParentName}</a>{/block:RebloggedFrom} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  978. </div>
  979.  
  980. <div id="asker">
  981. <img src="https://31.media.tumblr.com/da6ec800b306286814b56c85c065973c/tumblr_inline_n2aigp3RjV1r7v6wt.png" style="vertical-align:-3px;"> {Asker}:</div>
  982. <div id="questions">{Question}</div>
  983. <div id="text">{Answer}</div>
  984.  
  985. <div class="tagging">
  986. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  987. </div>
  988.  
  989. {/block:Answer}
  990.  
  991.  
  992.  
  993.  
  994.  
  995. <!----------------------->
  996.  
  997.  
  998.  
  999.  
  1000. {block:permalinkpage}
  1001.  
  1002.  
  1003. <div id="infoperm">
  1004. {block:Date}Posted on {Month} {DayOfMonth}, {Year} at {24Hour}:{Minutes}{/block:Date}
  1005. {block:RebloggedFrom} - <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a> {/block:RebloggedFrom}
  1006. {block:ContentSource} - <b>source:</b> <a href="{SourceURL}">{SourceLink}</a>{/block:ContentSource}</div>
  1007.  
  1008. {block:HasTags}
  1009. <div id="tagperm">
  1010. <b>Tagged as:</b>{block:Tags} <a href="{TagURL}"> <small>#</small>{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  1011.  
  1012. <div id="notecount">{block:NoteCount}<p>{NoteCountWithLabel}{/block:NoteCount}</div>
  1013.  
  1014. <div class="pnotes">
  1015. {block:PostNotes}
  1016. {PostNotes-64}
  1017. {/block:PostNotes}
  1018. </div>
  1019.  
  1020.  
  1021. {/block:permalinkpage}
  1022.  
  1023.  
  1024. </div>
  1025. {/block:Posts}
  1026. </div>
  1027.  
  1028.  
  1029.  
  1030. <!----------------------->
  1031.  
  1032.  
  1033.  
  1034.  
  1035. {block:ifinfinitescroll}
  1036. {block:indexpage}
  1037.  
  1038. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  1039. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  1040. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  1041. <script type="text/javascript">
  1042. $(window).load(function(){
  1043. var $wall = $('#container');
  1044. $wall.imagesLoaded(function(){
  1045. $wall.masonry({
  1046. itemSelector: '#posts',
  1047. isAnimated : true
  1048. });
  1049. });
  1050.  
  1051. $wall.infinitescroll({
  1052. navSelector : '#page-nav',
  1053. nextSelector : '#page-nav a',
  1054. itemSelector : '#posts',
  1055. bufferPx : 1000,
  1056. debug : true,
  1057. errorCallback: function() {
  1058. $('#infscr-loading').fadeOut('linear');
  1059. }},
  1060. function( newElements ) {
  1061. var $newElems = $( newElements );
  1062. $newElems.hide();
  1063. $newElems.imagesLoaded(function(){
  1064. $wall.masonry( 'appended', $newElems,{isAnimated: true}, function(){$newElems.fadeIn('slow');} );
  1065. });
  1066. }); $('#content').show(400);
  1067. });
  1068. </script>
  1069.  
  1070. {/block:indexpage}
  1071. {/block:ifinfinitescroll}
  1072.  
  1073. <div id="chloe" title="coded by chloe"><a href="http://soon-co.tumblr.com/">SOONCO</a></div>
  1074.  
  1075. </body>
  1076. </html>
Advertisement
Add Comment
Please, Sign In to add comment