Advertisement
cleuron

papersquare

Jul 6th, 2015
1,392
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.70 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. </a>
  5.  
  6. <!--papersquare theme by daenso @ tumblr
  7. don't copy, don't redistribute, don't use as base
  8. don't mix parts of this theme with other users' themes
  9. don't remove the credit, thank you-->
  10.  
  11. <head>
  12.  
  13. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  14.  
  15. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips({tip_follows_cursor:true,
  16. tip_delay_time:200,tip_fade_speed:300});});})(jQuery);</script>
  17.  
  18. {block:indexpage}<script type="text/javascript">$(window).scroll(function(e){ $el = $('.header2'); if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed'){ $('.header2').css({'position': 'fixed', 'top': '0px'}); } if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {$('.header2').css({'position': 'absolute', 'top': '300px'}); } });</script>{/block:indexpage}
  19.  
  20. <script type="text/javascript">$(function() {
  21. $(window).scroll(function(){var scrollTop = $(window).scrollTop();
  22. if(scrollTop != 0) $('.header2').stop().animate({'opacity':'0.6'},400); else $('.header2, .header2:hover desc').stop().animate({'opacity':'1'},400);}); $('.header2').hover(function (e) {var scrollTop = $(window).scrollTop();
  23. if(scrollTop != 0){$('.header2, .header2:hover desc').stop().animate({'opacity':'1'},400);}},
  24. function (e) {var scrollTop = $(window).scrollTop();
  25. if(scrollTop != 0){$('.header2').stop().animate({'opacity':'0.6'},400);
  26. }});});</script>
  27.  
  28. <title>{Title}</title>
  29. <link rel="shortcut icon" href="{Favicon}">
  30. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  31. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  32.  
  33. <meta name="color:background" content="#fff"/>
  34. <meta name="color:header bg" content="#fff"/>
  35. <meta name="color:text" content="#c6c4c4"/>
  36. <meta name="color:border posts" content="#eee"/>
  37. <meta name="color:scrollbar" content="#bdd9da"/>
  38. <meta name="color:header" content="#bdd9da"/>
  39. <meta name="color:sidelinks" content="#fff"/>
  40. <meta name="color:sidelinks hover" content="#ebfffe"/>
  41. <meta name="color:bordering" content="#ffc3ce" />
  42. <meta name="color:side" content="#d4ebec" />
  43. <meta name="color:link boxes" content="#dceff1" />
  44. <meta name="color:link boxes text" content="#ffffff" />
  45. <meta name="color:links" content="#bdd9da"/>
  46. <meta name="color:links hover" content="#dededf"/>
  47. <meta name="color:desc links" content="#f2cccc" />
  48. <meta name="color:perma" content="#e2e2e2"/>
  49. <meta name="color:perma links" content="#7fc6c8"/>
  50. <meta name="color:tags" content="#bbcfd1"/>
  51. <meta name="color:details" content="#ddd"/>
  52. <meta name="color:posts" content="#ffffff"/>
  53. <meta name="color:posttitle" content="#d1d1d1"/>
  54. <meta name="color:posttitle hover" content="#bdd9da"/>
  55.  
  56. <meta name="if:showcaptions" content="1" />
  57. <meta name="if:fadephotoset" content="1" />
  58. <meta name="if:250px posts" content="1" />
  59. <meta name="if:400px posts" content="0" />
  60. <meta name="if:500px posts" content="0" />
  61. <meta name="if:infinitescroll" content="0" />
  62.  
  63. <meta name="text:title1" content="title 1"/>
  64. <meta name="text:link1" content="url link 1"/>
  65. <meta name="text:subtitle1" content="subtitle 1"/>
  66. <meta name="text:title2" content="title 2"/>
  67. <meta name="text:link2" content="url link 2"/>
  68. <meta name="text:subtitle2" content="subtitle 2"/>
  69. <meta name="text:title3" content="title 3"/>
  70. <meta name="text:link3" content="url link 3"/>
  71. <meta name="text:subtitle3" content="subtitle 3"/>
  72. <meta name="text:title4" content="title 4"/>
  73. <meta name="text:link4" content="url link 4"/>
  74. <meta name="text:subtitle4" content="subtitle 4"/>
  75. <meta name="text:title5" content="title 5"/>
  76. <meta name="text:link5" content="url link 5"/>
  77. <meta name="text:subtitle5" content="subtitle 5"/>
  78.  
  79. <style type="text/css">
  80.  
  81. {block:indexpage}{block:iffadephotoset}
  82. .entry img, .entry iframe {opacity:0.8; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s;} .entry:hover img, .entry:hover iframe {opacity:1; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}{/block:iffadephotoset}{/block:indexpage}
  83.  
  84. body {
  85. margin:0px;
  86. color:{color:text};
  87. font-family:trebuchet, arial, helvetica;
  88. font-size:10px;
  89. font-weight:100;
  90. overflow-y:scroll;
  91. overflow-x:hidden;
  92. word-wrap:break-word;
  93. background:{color:background};
  94. }
  95.  
  96. a {
  97. color:{color:links};
  98. text-decoration: none;
  99. transition-duration: 0.5s;
  100. -moz-transition-duration: 0.5s;
  101. -webkit-transition-duration: 0.5s;
  102. -o-transition-duration: 0.5s;
  103. }
  104.  
  105. a:hover {
  106. opacity:1;
  107. color:{color:links hover};
  108. -webkit-transition: all 0.5s ease;
  109. -moz-transition: all 0.5s ease;
  110. -o-transition: all 0.5s ease;
  111. transition: all 0.5s ease;
  112. }
  113.  
  114. ::selection {background:{color:side};color: {color:posts};}
  115. ::-moz-selection {background:{color:side};color: {color:posts};}
  116. ::-webkit-selection {background:{color:side};color: {color:posts};}
  117.  
  118. blockquote {
  119. width:90%;
  120. border-left:1px dotted {color:border posts};
  121. margin-left:auto;
  122. font-size:9px;
  123. margin-right:auto;
  124. padding-left:5px;
  125. padding-right:5px;
  126. padding-top:0px;
  127. padding-bottom:0px;
  128. }
  129.  
  130. pre {
  131. width:100%;
  132. font-size:9x;
  133. border:1px dotted {color:border posts};
  134. border-radius:3px;
  135. padding:3px;
  136. letter-spacing:1px;
  137. margin-left:auto;
  138. margin-right:auto;
  139. white-space:pre-wrap;
  140. word-wrap:break-word;
  141. }
  142.  
  143. #s-m-t-tooltip{
  144. background:{color:links};
  145. color:{color:posts};
  146. max-width:320px;
  147. margin-top:-40px;
  148. letter-spacing:1px;
  149. margin-left:-15px;
  150. padding:5px 10px 5px 10px;
  151. font-weight:500;
  152. z-index:99999999999999;
  153. font-family:trebuchet, helvetica;
  154. font-size:8px;
  155. text-transform:uppercase;
  156. line-height:9px;
  157. }
  158.  
  159. ::-webkit-scrollbar {width:7px; height:9px;}
  160.  
  161. ::-webkit-scrollbar-thumb {background: transparent; border-left:2px solid {color:scrollbar};}
  162.  
  163. ::-webkit-scrollbar-track{background: transparent;}
  164.  
  165. iframe#tumblr_controls {top:0px!important; right:5px!important; position:fixed!important; z-index:999999999!important; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);
  166. filter: invert(100%); opacity:0.2;}
  167.  
  168. #contain {
  169. overflow:hidden;
  170. position:absolute;
  171. height:auto;
  172. left:50%;
  173. {block:if500pxposts}width:580px; padding-top:100vh; margin-left:-184px;{/block:if500pxposts}
  174. {block:if400pxposts}width:480px; padding-top:100vh; margin-left:-134px;{/block:if400pxposts}
  175. {block:if250pxposts}width:330px; padding-top:100vh; margin-left:-59px;{/block:if250pxposts}
  176. {block:permalinkpage}width:580px; padding-top:150px; margin-left:-184px;{/block:permalinkpage}
  177. }
  178.  
  179. .entry {
  180. float:left;
  181. position:relative;
  182. background:{color:posts};
  183. color:{color:text};
  184. border-radius:1px;
  185. border:1px solid {color:border posts};
  186. font-size:9px;
  187. border-radius:5px;
  188. text-transform:uppercase;
  189. margin-bottom:300px;margin-left:10px;
  190. padding:30px 30px 40px 30px;
  191. {block:if500pxposts}width:500px;{/block:if500pxposts}
  192. {block:if400pxposts}width:400px;{/block:if400pxposts}
  193. {block:if250pxposts}width:250px;{/block:if250pxposts}
  194. {block:permalinkpage}width:500px;{/block:permalinkpage}
  195. }
  196.  
  197. .entry a{color:{color:links};}
  198. .entry a:hover{color:{color:links hover};}
  199.  
  200. .pagi{
  201. height:15px;
  202. position:fixed;
  203. background:{color:header bg};
  204. opacity:0.7;
  205. left:50%;
  206. padding-top:5px;
  207. font-size:10px;
  208. text-transform:uppercase;
  209. bottom:0;
  210. z-index:9999;
  211. {block:if500pxposts}width:580px; margin-left:-184px;{/block:if500pxposts}
  212. {block:if400pxposts}width:480px; margin-left:-134px;{/block:if400pxposts}
  213. {block:if250pxposts}width:330px; margin-left:-59px;{/block:if250pxposts}
  214. {block:permalinkpage}width:580px; margin-left:-184px;{/block:permalinkpage}
  215. }
  216.  
  217. .pagi:hover{
  218. opacity:1;
  219. }
  220.  
  221. .pagi h1{font-size:11px;
  222. margin:0px 4px 0px 4px;
  223. text-transform:uppercase;
  224. display:inline;
  225. color:white;
  226. font-weight:normal;
  227. background:{color:links};
  228. padding:0px 4px 4px 6px;
  229. }
  230.  
  231. .fixed {
  232. position: fixed;
  233. top: 0;
  234. z-index: 1;
  235. }
  236.  
  237. .header2{
  238. max-height:150px;
  239. min-height:50px;
  240. position:fixed;
  241. background:{color:header bg};
  242. left:50%;
  243. z-index:9999;
  244. overflow:hidden;
  245. {block:if500pxposts}width:580px; top:300px; margin-left:-184px;{/block:if500pxposts} {block:if400pxposts}width:480px; top:300px; margin-left:-134px;{/block:if400pxposts} {block:if250pxposts}width:330px; top:300px; margin-left:-59px;{/block:if250pxposts} {block:permalinkpage}width:580px; top:0px; opacity:0.6; margin-left:-184px;{/block:permalinkpage}
  246. -webkit-transition: all 0.8s ease;
  247. -moz-transition: all 0.8s ease;
  248. -o-transition: all 0.8s ease;
  249. transition: all 0.8s ease;
  250. }
  251.  
  252. .header2:hover{{block:permalinkpage}opacity:1;{/block:permalinkpage}
  253. -webkit-transition: all 0.8s ease;
  254. -moz-transition: all 0.8s ease;
  255. -o-transition: all 0.8s ease;
  256. transition: all 0.8s ease;
  257. }
  258.  
  259. .header2 p{
  260. font-size:20px;
  261. text-transform:uppercase;
  262. font-family:georgia;
  263. color:{color:header};
  264. text-align:center;
  265. -webkit-transition: all 0.8s ease;
  266. -moz-transition: all 0.8s ease;
  267. -o-transition: all 0.8s ease;
  268. transition: all 0.8s ease;
  269. }
  270.  
  271. .header2 p::first-letter {
  272. font-style:italic;
  273. border-bottom: 1px solid {color:desc links};
  274. }
  275.  
  276. .desc{
  277. font-size:8px;
  278. top:-15px;
  279. min-height:10px;
  280. max-height:60px;
  281. overflow-y:auto;
  282. text-transform:uppercase;
  283. color:{color:text};
  284. text-align:center;
  285. padding:5px 10px 0px 10px;
  286. margin:0px 30px 0px 30px;
  287. position:relative;
  288. line-height:8px;
  289. font-family:arial;
  290. letter-spacing:0px;
  291. opacity:1;
  292. -webkit-transition: all 0.8s ease;
  293. -moz-transition: all 0.8s ease;
  294. -o-transition: all 0.8s ease;
  295. transition: all 0.8s ease;
  296. }
  297.  
  298. .desc a{color:{color:desc links}; letter-spacing:2px;}
  299. .desc a:hover{color:{color:links hover}; letter-spacing:2px;}
  300.  
  301. .desc::first-letter, .desc b{
  302. font-size:12px;
  303. line-height:8px;
  304. display:inline-block;
  305. font-style:italic;
  306. font-family:georgia;
  307. color:{color:header};
  308. }
  309.  
  310. .entry::before{
  311. content:"";
  312. width:30px;
  313. height:30px;
  314. border-radius:5px 0px 5px 0px;
  315. position:absolute;
  316. border-top:1px solid {color:border posts};
  317. border-left:1px solid {color:border posts};
  318. top:100%; margin-top:-30px;
  319. left:100%; margin-left:-30px;
  320. z-index:999;
  321. }
  322.  
  323. .entry::after{
  324. content:"";
  325. width:41px;
  326. height:1px;
  327. position:absolute;
  328. top:100%; margin-top:-15px;
  329. left:100%; margin-left:-35px;
  330. z-index:999;
  331. background:{color:border posts};
  332. -ms-transform: rotate(-45deg);
  333. -webkit-transform: rotate(-45deg);
  334. -moz-transform: rotate(-45deg);
  335. -o-transform: rotate(-45deg);
  336. transform: rotate(-45deg);
  337. }
  338.  
  339. .entry img {max-width:100%;}
  340.  
  341. .triangle{
  342. width:0;
  343. height:0;
  344. position:absolute;
  345. top:100%; margin-top:-30px;
  346. left:100%; margin-left:-30px;
  347. border-bottom:31px solid {color:background};
  348. border-left:31px solid transparent;
  349. }
  350.  
  351. #tags {
  352. font-family:helvetica;
  353. font-size:8px;
  354. line-height:9px;
  355. color:{color:tags};
  356. }
  357.  
  358. #tags a {color:{color:tags};}
  359. #tags a:hover {color:{color:links hover};}
  360.  
  361. ol.notes {list-style:none;}
  362. li.note{margin-bottom:5px;}
  363.  
  364. ol.notes li.note span.action, ol.notes li.note.blockquote, ol.notes li.note.answer_content{padding:5px; color:{color:text}; display:inline-block; margin-left:22px;}
  365.  
  366. ol.notes li.note a {color:{color:tags};}
  367.  
  368. img.avatar { width:10px; height:10px; padding:4px; border:1px solid {color:border posts}; display:inline-block; position:absolute;}
  369.  
  370. #notes {
  371. width:460px;
  372. height:200px;
  373. overflow-y:auto;
  374. margin-top:30px;
  375. border-top:1px solid #eee;
  376. font-size:9px;
  377. text-transform:uppercase;
  378. position:relative;
  379. margin-left:auto;
  380. margin-right:auto;
  381. padding-bottom:10px;
  382. margin-bottom:60px;
  383. }
  384.  
  385. #perma{
  386. width:560px;
  387. height:auto;
  388. margin-left:-30px;
  389. top:100%; margin-top:20px;
  390. position:absolute;
  391. color:{color:perma};
  392. font-size:8px;
  393. letter-spacing:1px;
  394. text-align:left;
  395. margin-bottom:10px;
  396. }
  397.  
  398. #permalinkpage {
  399. width:560px;
  400. height:12px;
  401. padding-top:4px;
  402. position:absolute;
  403. font-family:calibri, helvetica;
  404. text-transform:uppercase;
  405. padding:5px 0px 0px 0px;
  406. letter-spacing:0px;
  407. color:#ccc;
  408. position:relative;
  409. font-size:11px;
  410. text-align:left;
  411. }
  412.  
  413. #permalinkpage a {color:{color:perma links};}
  414. #permalinkpage a:hover {color:{color:links hover};}
  415.  
  416. #details{
  417. {block:if500pxposts}width:25px;{/block:if500pxposts}{block:if400pxposts}width:25px;{/block:if400pxposts}{block:if250pxposts}width:75px;{/block:if250pxposts}
  418. height:23px;
  419. margin-left:-30px;
  420. margin-top:-30px; top:100%;
  421. font-family: Times;
  422. text-transform: lowercase;
  423. font-style: italic;
  424. position: absolute;
  425. color:{color:details};
  426. font-size: 15px;
  427. line-height:4px;
  428. padding:6px 35px 0px 0px;
  429. text-align:right;
  430. opacity:0;
  431. transform: scale(2);
  432. -moz-transform: scale(2);
  433. -webkit-transform: scale(2);
  434. -ms-transform: scale(2);
  435. -o-transform: scale(2);
  436. transition: all 0.5s ease-in-out 0.1s;
  437. -moz-transition: all 0.5s ease-in-out 0.1s;
  438. -o-transition: all 0.5s ease-in-out 0.1s;
  439. -webkit-transition: all 0.5s ease-in-out 0.1s;
  440. -ms-transition: all 0.5s ease-in-out 0.1s;
  441. }
  442.  
  443. #details p{
  444. font-size:11px;
  445. line-height:2px;
  446. text-align:right;
  447. text-transform:uppercase;
  448. letter-spacing:1px;
  449. }
  450.  
  451. #details2{
  452. {block:if500pxposts}width:500px;{/block:if500pxposts}{block:if400pxposts}width:400px;{/block:if400pxposts}{block:if250pxposts}width:250px;{/block:if250pxposts}
  453. height:auto;
  454. word-wrap:break-word;
  455. margin-left:-30px;
  456. top:100%; margin-top:10px;
  457. font-family: helvetica;
  458. text-transform: uppercase;
  459. letter-spacing:1px;
  460. position: absolute;
  461. color:{color:details};
  462. font-size: 8px;
  463. padding:6px 30px 0px 30px;
  464. text-align:center;
  465. opacity:0;
  466. transition: all 0.8s ease-in-out 0.1s;
  467. -moz-transition: all 0.8s ease-in-out 0.1s;
  468. -o-transition: all 0.8s ease-in-out 0.1s;
  469. -webkit-transition: all 0.8s ease-in-out 0.1s;
  470. -ms-transition: all 0.8s ease-in-out 0.1s;
  471. }
  472.  
  473. #details2 a{color:{color:details};}
  474. #details2 a:hover{color:{color:links};}
  475.  
  476. .entry:hover #details2{opacity:1;
  477. transition: all 0.8s ease-in-out 0.1s;
  478. -moz-transition: all 0.8s ease-in-out 0.1s;
  479. -o-transition: all 0.8s ease-in-out 0.1s;
  480. -webkit-transition: all 0.8s ease-in-out 0.1s;
  481. -ms-transition: all 0.8s ease-in-out 0.1s;}
  482.  
  483. .entry:hover #details {{block:if500pxposts}width:525;{/block:if500pxposts}{block:if400pxposts}width:425px;{/block:if400pxposts}{block:if250pxposts}width:275px;{/block:if250pxposts}opacity:1;
  484. transition: all 0.8s ease-in-out 0.1s;
  485. -moz-transition: all 0.8s ease-in-out 0.1s;
  486. -o-transition: all 0.8s ease-in-out 0.1s;
  487. -webkit-transition: all 0.8s ease-in-out 0.1s;
  488. -ms-transition: all 0.8s ease-in-out 0.1s;
  489. transform: scale(1);
  490. -moz-transform: scale(1);
  491. -webkit-transform: scale(1);
  492. -ms-transform: scale(1);
  493. -o-transform: scale(1);
  494. }
  495.  
  496. #audioplayer {
  497. width:25px;
  498. height:25px;
  499. padding-left:5px;
  500. padding-bottom:3px;
  501. padding-right:2px;
  502. overflow:hidden;
  503. position:absolute;
  504. margin-left:6px;
  505. margin-top:11px;
  506. opacity:0.8;
  507. transition: all 0.3s ease-in-out 0.1s;
  508. -moz-transition: all 0.3s ease-in-out 0.1s;
  509. -o-transition: all 0.3s ease-in-out 0.1s;
  510. -webkit-transition: all 0.3s ease-in-out 0.1s;
  511. -ms-transition: all 0.3s ease-in-out 0.1s;
  512. }
  513.  
  514. #audioplayer:hover{opacity:1;
  515. transition: all 0.3s ease-in-out 0.1s;
  516. -moz-transition: all 0.3s ease-in-out 0.1s;
  517. -o-transition: all 0.3s ease-in-out 0.1s;
  518. -webkit-transition: all 0.3s ease-in-out 0.1s;
  519. -ms-transition: all 0.3s ease-in-out 0.1s;
  520. }
  521.  
  522. #albumart { width:50px; height:50px; float:left; margin:0px 10px 0px 0px;}
  523.  
  524. #audioinfo{
  525. width:auto;
  526. height:40px;
  527. font-size:9px;
  528. letter-spacing:1px;
  529. color:{color:posts};
  530. background:{color:side};
  531. margin-left:50px;
  532. font-weight:bold;
  533. padding-top:10px;
  534. border-right:5px solid {color:header};
  535. }
  536.  
  537. #askeru{
  538. width:40px;
  539. height:40px;
  540. background:{color:posts};
  541. border:1px solid {color:border posts};
  542. position:absolute;
  543. }
  544.  
  545. #askeru img{
  546. margin:5px;
  547. width:30px;
  548. height:30px;
  549. border-radius:100%;
  550. }
  551.  
  552. #askery {
  553. padding:3px 3px 4px 3px;
  554. {block:if500pxposts}width:464px;{/block:if500pxposts}{block:if400pxposts}width:364px;{/block:if400pxposts}{block:if250pxposts}width:214px;{/block:if250pxposts}{block:permalinkpage}width:464px;{/block:permalinkpage}
  555. margin-left:30px;
  556. overflow:hidden;
  557. height:15px;
  558. text-align:left;
  559. font-family:times;
  560. text-transform:uppercase;
  561. font-style:italic;
  562. margin-top:11px;
  563. background:{color:side};
  564. font-weight:bold;
  565. line-height:16px;
  566. color:{color:posts};
  567. -webkit-transition: all 0.5s ease-out;
  568. -moz-transition: all 0.5s ease-out;
  569. -o-transition: all 0.5s ease-out;
  570. -ms-transition: all 0.5s ease-out;
  571. transition: all 0.5s ease-out;
  572. display:inline-block;
  573. font-size:12px;
  574. }
  575.  
  576. #askery a:hover { color:{color:links hover};
  577. -webkit-transition: all 0.5s ease-out;
  578. -moz-transition: all 0.5s ease-out;
  579. -o-transition: all 0.5s ease-out;
  580. -ms-transition: all 0.5s ease-out;
  581. transition: all 0.5s ease-out;
  582. }
  583. #askery a { color:{color:posts};
  584. -webkit-transition: all 0.5s ease-out;
  585. -moz-transition: all 0.5s ease-out;
  586. -o-transition: all 0.5s ease-out;
  587. -ms-transition: all 0.5s ease-out;
  588. transition: all 0.5s ease-out;
  589. }
  590.  
  591. .question {
  592. padding:5px 1px 4px 4px;
  593. margin-left:45px; margin-right:6px;
  594. word-wrap:break-word;
  595. font-family:helvetica;
  596. text-align:right;
  597. text-transform:uppercase;
  598. font-size:9px;
  599. margin-top:10px;
  600. color:{color:text};
  601. background-color:{color:posts};
  602. z-index:9;
  603. }
  604.  
  605. #answer {
  606. padding:2px 10px 2px 10px;
  607. font-family:helvetica;
  608. background:{color:side};
  609. text-align:left; font-size:9px;
  610. margin-top:10px;
  611. color:{color:posts};
  612. z-index:9;
  613. }
  614.  
  615. #answer a{color:{color:posts};
  616. text-decoration:underline;}
  617. #answer a:hover{color:{color:links};}
  618.  
  619. #posttitle {
  620. padding:2px 6px 5px 6px;
  621. text-align:center;
  622. border-bottom:2px solid {color:side};
  623. color:{color:posttitle};
  624. font-size:10px;
  625. letter-spacing:1px;
  626. font-family:trebuchet;
  627. margin-bottom:-5px;
  628. text-transform:uppercase;
  629. }
  630.  
  631. #posttitle a { color:{color:posttitle}; }
  632. #posttitle a:hover { color:{color:posttitle hover};}
  633.  
  634. #linko{
  635. padding:0px 6px 3px 6px;
  636. text-align:center;
  637. color:white;
  638. font-size:10px;
  639. letter-spacing:4px;
  640. font-family:trebuchet ms;
  641. margin-bottom:-5px;
  642. text-transform:uppercase;
  643. }
  644.  
  645. #quotation {
  646. padding:1px 4px 8px 4px;
  647. color:{color:links};
  648. text-align:center;
  649. font-weight:bold;
  650. font-size:12px;
  651. line-height:12px;
  652. font-family:georgia;
  653. text-transform:lowercase;
  654. }
  655.  
  656. .sideback{background:{color:side};position:fixed; width:50vw; height:100vh; z-index:-9999; left:0;
  657. {block:if500pxposts}margin-left:-187px;{/block:if500pxposts}
  658. {block:if400pxposts}margin-left:-137px;{/block:if400pxposts}
  659. {block:if250pxposts}margin-left:-62px;{/block:if250pxposts}
  660. {block:permalinkpage}margin-left:-187px;{/block:permalinkpage}
  661. }
  662.  
  663. .side {
  664. width:212px;
  665. height:100%;
  666. position:fixed;
  667. left:50%;
  668. background:{color:side};
  669. {block:if500pxposts}margin-left:-396px;{/block:if500pxposts}
  670. {block:if400pxposts}margin-left:-346px;{/block:if400pxposts}
  671. {block:if250pxposts}margin-left:-271px;{/block:if250pxposts}
  672. {block:permalinkpage}margin-left:-396px;{/block:permalinkpage}
  673. }
  674.  
  675. .sideline1{
  676. width:1px;
  677. height:100%;
  678. position:fixed;
  679. background:white;
  680. }
  681.  
  682. .sideline2{
  683. height:1px;
  684. width:50vw;
  685. z-index:999; left:0;
  686. position:fixed;
  687. background: -webkit-linear-gradient(left, {color:side}, white);
  688. background: -o-linear-gradient(left, {color:side}, white);
  689. background: -moz-linear-gradient(left, {color:side}, white);
  690. background: linear-gradient(left, {color:side}, white);
  691. {block:if500pxposts}margin-left:-187px;{/block:if500pxposts}
  692. {block:if400pxposts}margin-left:-137px;{/block:if400pxposts}
  693. {block:if250pxposts}margin-left:-62px;{/block:if250pxposts}
  694. {block:permalinkpage}margin-left:-187px;{/block:permalinkpage}
  695. }
  696.  
  697. .ch-item {
  698. width: 70px;
  699. height: 70px;
  700. position: absolute;
  701. cursor: default;
  702. }
  703.  
  704. .ch-item img{
  705. width: 70px;
  706. height: 70px;
  707. }
  708.  
  709. .ch-info-front{
  710. background:{color:link boxes};
  711. }
  712.  
  713. .ch-info-wrap{
  714. position: absolute;
  715. width: 70px;
  716. height: 70px;
  717.  
  718. -webkit-perspective: 800px;
  719. -moz-perspective: 800px;
  720. -o-perspective: 800px;
  721. -ms-perspective: 800px;
  722. perspective: 800px;
  723.  
  724. -webkit-transition: all 0.4s ease-in-out;
  725. -moz-transition: all 0.4s ease-in-out;
  726. -o-transition: all 0.4s ease-in-out;
  727. -ms-transition: all 0.4s ease-in-out;
  728. transition: all 0.4s ease-in-out;
  729.  
  730. top: 0px;
  731. left: 0px;
  732. background:{color:side};
  733. }
  734.  
  735. .ch-info{
  736. position: absolute;
  737. width: 70px;
  738. height: 70px;
  739.  
  740. -webkit-transition: all 0.4s ease-in-out;
  741. -moz-transition: all 0.4s ease-in-out;
  742. -o-transition: all 0.4s ease-in-out;
  743. -ms-transition: all 0.4s ease-in-out;
  744. transition: all 0.4s ease-in-out;
  745.  
  746. -webkit-transform-style: preserve-3d;
  747. -moz-transform-style: preserve-3d;
  748. -o-transform-style: preserve-3d;
  749. -ms-transform-style: preserve-3d;
  750. transform-style: preserve-3d;
  751. }
  752.  
  753. .ch-info > div {
  754. display: block;
  755. position: absolute;
  756. width: 100%;
  757. height: 100%;
  758. background-position: center center;
  759.  
  760. -webkit-backface-visibility: hidden;
  761. -moz-backface-visibility: hidden;
  762. -o-backface-visibility: hidden;
  763. -ms-backface-visibility: hidden;
  764. backface-visibility: hidden;
  765. }
  766.  
  767. .ch-info .ch-info-back {
  768. -webkit-transform: rotate3d(0,1,0,180deg);
  769. -moz-transform: rotate3d(0,1,0,180deg);
  770. -o-transform: rotate3d(0,1,0,180deg);
  771. -ms-transform: rotate3d(0,1,0,180deg);
  772. transform: rotate3d(0,1,0,180deg);
  773. background: ;
  774. }
  775.  
  776.  
  777. .ch-info h3 {
  778. color: {color:link boxes text};
  779. text-transform: uppercase;
  780. font-size: 9px;
  781. margin: 0 5px;
  782. padding: 20px 0 0 0;
  783. height: 15px;
  784. font-family: 'Open Sans', Arial, sans-serif;
  785. text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);
  786. }
  787.  
  788. .ch-info h3 a{color: {color:sidelinks};}
  789.  
  790. .ch-info h3 a:hover {color: {color:sidelinks hover};}
  791.  
  792. .ch-info p {
  793. height:15px;
  794. overflow:hidden;
  795. color: {color:link boxes text};
  796. padding: 8px 2px;
  797. text-transform:lowercase;
  798. letter-spacing:0.03em;
  799. font-family: 'open sans', sans-serif;
  800. margin: 0 2px;
  801. font-size: 10px;
  802. line-height:8px;
  803. border-top: 1px solid rgba(255,255,255,0.5);
  804. }
  805.  
  806. .ch-item:hover .ch-info {
  807. -webkit-transform: rotate3d(0,1,0,-180deg);
  808. -moz-transform: rotate3d(0,1,0,-180deg);
  809. -o-transform: rotate3d(0,1,0,-180deg);
  810. -ms-transform: rotate3d(0,1,0,-180deg);
  811. transform: rotate3d(0,1,0,-180deg);
  812. }
  813.  
  814. #credit{
  815. width:5px;
  816. height:5px;
  817. background:{color:side};
  818. color:{color:side};
  819. font-size:9px;
  820. font-family:trebuchet ms;
  821. font-weight:bold;
  822. border-radius:100px;
  823. overflow:hidden;
  824. text-transform:uppercase;
  825. padding:5px;
  826. text-align:center;
  827. position:fixed;
  828. bottom:2px; right:2px;
  829. -webkit-transition: all 0.4s ease-in-out;
  830. -moz-transition: all 0.4s ease-in-out;
  831. -o-transition: all 0.4s ease-in-out;
  832. -ms-transition: all 0.4s ease-in-out;
  833. transition: all 0.4s ease-in-out;
  834. }
  835.  
  836. #credit:hover {
  837. color:#a2bdc6;
  838. width:40px;
  839. height:40px;
  840. -webkit-transition: all 0.4s ease-in-out;
  841. -moz-transition: all 0.4s ease-in-out;
  842. -o-transition: all 0.4s ease-in-out;
  843. -ms-transition: all 0.4s ease-in-out;
  844. transition: all 0.4s ease-in-out;
  845. }
  846.  
  847. #credit a{color:{color:side};} #credit:hover a{color:#a2bdc6;}
  848. #credit a:hover {color:#fff;}
  849.  
  850. </style>
  851.  
  852. {block:IfInfiniteScroll}<script type="text/javascript" src="http://static.tumblr.com/puouuyx/qepnyhkgm/infinitescrolling.min.js"></script>{/block:IfInfiniteScroll}
  853.  
  854. </head>
  855. <body>
  856.  
  857. <div class="sideback"></div>
  858. <div class="header2"><center><p><span style="border-bottom:1px dotted {color:border posts};">{title}</span></p></center>
  859. <div class="desc">{description}</div></div>
  860.  
  861. {block:ifnotinfinitescroll}{block:pagination}<div class="pagi"><center>{block:PreviousPage}<a href="{PreviousPage}"><h1>«</h1></a>{/block:PreviousPage}{lang:Page CurrentPage of TotalPages}{block:NextPage}<a href="{NextPage}"><h1>»</h1></a>{/block:NextPage}</center></div>{/block:pagination}{/block:ifnotinfinitescroll}
  862.  
  863. <div class="side">
  864. <div class="sideline1" style="margin-left:70px;"></div>
  865. <div class="sideline1" style="margin-left:141px;"></div>
  866.  
  867. <div class="sideline2" style="margin-top:70px;"></div>
  868. <div class="sideline2" style="margin-top:141px;"></div>
  869. <div class="sideline2" style="margin-top:212px;"></div>
  870. <div class="sideline2" style="margin-top:283px;"></div>
  871. <div class="sideline2" style="margin-top:354px;"></div>
  872. <div class="sideline2" style="margin-top:425px;"></div>
  873. <div class="sideline2" style="margin-top:496px;"></div>
  874. <div class="sideline2" style="margin-top:567px;"></div>
  875. <div class="sideline2" style="margin-top:638px;"></div>
  876. <div class="sideline2" style="margin-top:709px;"></div>
  877. <div class="sideline2" style="margin-top:780px;"></div>
  878. <div class="sideline2" style="margin-top:851px;"></div>
  879. <div class="sideline2" style="margin-top:922px;"></div>
  880. <div class="sideline2" style="margin-top:993px;"></div>
  881. <div class="sideline2" style="margin-top:1164px;"></div>
  882. <div class="sideline2" style="margin-top:1235px;"></div>
  883. <div class="sideline2" style="margin-top:1306px;"></div>
  884. <div class="sideline2" style="margin-top:1377px;"></div>
  885. <div class="sideline2" style="margin-top:1448px;"></div>
  886. <div class="sideline2" style="margin-top:1519px;"></div>
  887.  
  888. <!--if your pc has a higher px resolution just add other sideline2 and write a px that's 71px more than the one on top of it-->
  889.  
  890. <div class="ch-item"><div class="ch-info-wrap"><div class="ch-info">
  891. <div class="ch-info-front"></div><div class="ch-info-back">
  892. <center><h3><a href="/">home</a></h3><p>refresh</p></center></div></div></div></div>
  893.  
  894. <div class="ch-item" style="margin-top:71px; margin-left:142px;"><div class="ch-info-wrap"><div class="ch-info"><div class="ch-info-front"></div><div class="ch-info-back"><center><h3><a href="/ask">mail</a></h3><p>askbox</p></center></div></div></div></div>
  895.  
  896. <div class="ch-item" style="margin-top:142px; margin-left:71px;"><div class="ch-info-wrap"><div class="ch-info"><div class="ch-info-front"></div><div class="ch-info-back"><center><h3><a href="/archive">past</a></h3><p>archive</p></center></div></div></div></div>
  897.  
  898. <div class="ch-item" style="margin-top:284px; margin-left:0px;"><div class="ch-info-wrap"><div class="ch-info"><div class="ch-info-front"></div><div class="ch-info-back"><center><h3><a href="{text:link2}">{text:title2}</a></h3><p>{text:subtitle2}</p></center></div></div></div></div>
  899.  
  900. <div class="ch-item" style="margin-top:355px; margin-left:71px;"><div class="ch-info-wrap"><div class="ch-info"><div class="ch-info-front"></div><div class="ch-info-back"><center><h3><a href="{text:link3}">{text:title3}</a></h3><p>{text:subtitle3}</p></center></div></div></div></div>
  901.  
  902. <div class="ch-item" style="margin-top:213px; margin-left:142px;"><div class="ch-info-wrap"><div class="ch-info"><div class="ch-info-front"></div><div class="ch-info-back"><center><h3><a href="{text:link1}">{text:title1}</a></h3><p>{text:subtitle1}</p></center></div></div></div></div>
  903.  
  904. <div class="ch-item" style="margin-top:497px; margin-left:142px;"><div class="ch-info-wrap"><div class="ch-info"><div class="ch-info-front"></div><div class="ch-info-back"><center><h3><a href="{text:link4}">{text:title4}</a></h3><p>{text:subtitle4}</p></center></div></div></div></div>
  905.  
  906. <div class="ch-item" style="margin-top:497px; margin-left:0px;"><div class="ch-info-wrap"><div class="ch-info"><div class="ch-info-front"></div><div class="ch-info-back"><center><h3><a href="{text:link5}">{text:title5}</a></h3><p>{text:subtitle5}</p></center></div></div></div></div>
  907.  
  908. </div>
  909.  
  910. <div id="contain">
  911.  
  912. <div class="autopagerize_page_element">
  913. {block:Posts}
  914. <div class="entry">
  915.  
  916. <div class="triangle"></div>
  917.  
  918. {block:indexpage}{block:date}<div id="details"><!--{block:RebloggedFrom} from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource} <a href="{SourceURL}">© <a href="{SourceURL}">{SourceLink}</a> {/block:ContentSource}{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom}--><a href="{permalink}" title="permalink">{DayOfMonthWithZero}</a> / {MonthNumberWithZero} / <a href="{reblogurl}" title="reblog?">{ShortYear}</a><br>
  919. <p>{NoteCount}#</p>
  920. </div> {/block:date}
  921.  
  922. <div id="details2">{block:Tags}<a href="{TagURL}"> .{Tag} </a>{/block:Tags}</div>{/block:indexpage}
  923.  
  924. {block:ContentSource}
  925. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  926. {/block:SourceLogo}
  927. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  928. {/block:ContentSource}
  929.  
  930. {block:Photo}
  931. {block:indexpage}
  932. <div id="photo">{LinkOpenTag}
  933. <img src="{PhotoURL-500}" alt='{PhotoAlt}'/>
  934. {LinkCloseTag}</div>
  935. {/block:IndexPage}
  936. {block:permalinkpage}
  937. <div id="photo">{LinkOpenTag}
  938. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  939. {LinkCloseTag}</div>
  940. {/block:PermalinkPage}
  941. {block:ifShowCaptions}{block:Indexpage}
  942. {block:Caption}{Caption}{/block:Caption}
  943. {/block:Indexpage}{/block:ifShowCaptions}
  944. {block:PermalinkPage}
  945. {block:Caption}{Caption}{/block:Caption}
  946. {/block:PermalinkPage}
  947. {/block:Photo}
  948.  
  949.  
  950. {block:Photoset}
  951. {block:indexpage}
  952. <div id="photoset">
  953. {block:if500pxposts}{photoset-500}{/block:if500pxposts}
  954. {block:if400pxposts}{Photoset-400}{/block:if400pxposts}
  955. {block:if250pxposts}{Photoset-250}{/block:if250pxposts}
  956. </div>
  957. {/block:IndexPage}
  958. {block:PermalinkPage}
  959. <div id="photoset">{Photoset-500}</div>
  960. {/block:PermalinkPage}
  961. {block:ifShowCaptions}
  962. {block:Indexpage}
  963. {block:Caption}{Caption}{/block:Caption}
  964. {/block:Indexpage}
  965. {/block:ifShowCaptions}
  966. {block:PermalinkPage}
  967. {block:Caption}{Caption}{/block:Caption}
  968. {/block:PermalinkPage}
  969. {/block:Photoset}
  970.  
  971.  
  972. {block:Video}
  973. {block:IndexPage}<div id="video">
  974. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  975. {block:if400pxposts}{Video-400}{/block:if400pxposts}
  976. {block:if250pxposts}{Video-250}{/block:if250pxposts}
  977. </div>
  978. {/block:IndexPage}
  979. {block:PermalinkPage}
  980. <div id="video">{Video-500}</div>
  981. {/block:PermalinkPage}
  982. {block:ifShowCaptions}
  983. {block:Indexpage}
  984. {block:Caption}{Caption}{/block:Caption}
  985. {/block:Indexpage}
  986. {/block:ifShowCaptions}
  987. {block:PermalinkPage}
  988. {block:Caption}{Caption}{/block:Caption}
  989. {/block:PermalinkPage}
  990. {/block:Video}
  991.  
  992. {block:Quote}
  993. <div id="quotation">« {Quote} »</div>
  994. {block:Source}</ br> <center><div style="{block:indexpage}{block:if500pxposts}width:400px;{/block:if500pxposts}{block:if400pxposts}width:300px;{/block:if400pxposts}{block:if250pxposts}}width:150px;{/block:if250pxposts}{/block:indexpage}{block:permalinkpage}width:400px;{/block:permalinkpage} font-size:10px; text-align:center; margin-bottom:-10px">— {Source} —</div></center><br>{/block:Source}
  995. {/block:Quote}
  996.  
  997. {block:Text}
  998. {block:Title}<div id="posttitle">{Title}</div>{/block:Title}<div style="position:relative; margin-top:10px; margin-left:6px; margin-right:6px">{Body}</div>{/block:Text}
  999.  
  1000. {block:Link}
  1001. <div id="posttitle"><a href="{URL}" {Target}>{Name} ›</a></div><div id="linko"><span style="background:{color:side}; padding:0px 0px 0px 5px;">link</span></div>
  1002. {block:Description}{Description}{/block:Description}{/block:Link}
  1003.  
  1004. {block:Audio}
  1005. <center><div id="audioplayer">{AudioPlayerWhite}</div></center>
  1006. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="50">{/block:AlbumArt}</div>
  1007. <div id="audioinfo">{FormattedPlayCount} hits<br>
  1008. {block:Artist}{Artist}{/block:Artist} : {block:TrackName}{TrackName}{/block:TrackName}<br>
  1009. from: {block:Album}{Album}{/block:Album}
  1010. </div>
  1011. {block:ifShowCaptions}{block:Indexpage}
  1012. {block:Caption}{Caption}{/block:Caption}
  1013. {/block:Indexpage}{/block:ifShowCaptions}
  1014. {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}
  1015. {/block:PermalinkPage}{/block:Audio}
  1016.  
  1017. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  1018.  
  1019.  
  1020. {block:Answer}<div id="askeru"><img src="{AskerPortraitURL-30}"></div><div id="askery"><span style="padding-left:15px;">{asker}</span></div>
  1021. <div style="margin-top:-3px;"><div class="question">{Question}</div></div>
  1022.  
  1023. <div id="answer">{Answer}</div>
  1024. {/block:Answer}
  1025.  
  1026. {block:PermalinkPage}<div id="perma">
  1027.  
  1028. {block:date}<div id="permalinkpage"> <!--{block:RebloggedFrom} from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource} <a href="{SourceURL}">© <a href="{SourceURL}">{SourceLink}</a> {/block:ContentSource}{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom}-->{ShortMonth}, {DayOfMonth}{DayOfMonthSuffix} with {NoteCountWithLabel}{/block:date} {block:Date}{block:RebloggedFrom} : from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource} by <a href="{sourceURL}">{sourcelink}</a>{/block:ContentSource}{/block:date}</div>
  1029.  
  1030. {block:HasTags}<div style="text-transform:uppercase;">file under {block:Tags}<div style="line-height:9px; word-wrap:break-word; display:inline-block;"><div id="tags"><a href="{TagURL}">•{Tag} </a></div></div> {/block:Tags}</div>
  1031. {/block:HasTags}
  1032.  
  1033.  
  1034. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  1035.  
  1036. </div>{/block:PermalinkPage}</div>
  1037.  
  1038. {/block:posts}</div>
  1039. </div>
  1040.  
  1041. <div id="credit"><div style="margin-top:10px;"><a href="http://daenso.tumblr.com/" title="themes by daenso">dænso</a> themes</div></div>
  1042.  
  1043.  
  1044. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement