Advertisement
aeternaphantasia

theme #06: purity paradox

Sep 19th, 2014 (edited)
8,114
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.12 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9.  
  10. <!--
  11.  
  12. Theme #06: Purity Paradox
  13. coded by kuzuriha
  14.  
  15. 1. Don't remove the credit.
  16. 2. Don't move the credit. Just leave it there.
  17. 3. Don't use as a base code.
  18. 4. Please enjoy! If you find any bugs, please contact me! c:
  19.  
  20. -->
  21.  
  22. <!--Variables-->
  23.  
  24. <meta name="image:bg" content=""/>
  25.  
  26. <meta name="color:bg" content="#fff"/>
  27. <meta name="color:postbg" content="#fff"/>
  28. <meta name="color:body" content="#797979"/>
  29.  
  30. <meta name="color:first accent" content="#E8D2CB"/>
  31. <meta name="color:second accent" content="#FFE2DF"/>
  32.  
  33. <meta name="image:sidebar" content=""/>
  34.  
  35. <meta name="color:sidebarbg" content="#fff"/>
  36. <meta name="color:navbarbg" content="#171717"/>
  37.  
  38. <meta name="text:link1" content=""/>
  39. <meta name="text:link1URL" content=""/>
  40. <meta name="text:link2" content=""/>
  41. <meta name="text:link2URL" content=""/>
  42. <meta name="text:link3" content=""/>
  43. <meta name="text:link3URL" content=""/>
  44. <meta name="text:link4" content=""/>
  45. <meta name="text:link4URL" content=""/>
  46. <meta name="text:link5" content=""/>
  47. <meta name="text:link5URL" content=""/>
  48.  
  49. <meta name="if:postshadow" content="0"/>
  50.  
  51. <script src="//use.edgefonts.net/merriweather;lora.js"></script>
  52.  
  53. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  54.  
  55. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  56.  
  57. <script src="http://static.tumblr.com/wdp3vza/pJvosgmgd/jquery.style-my-tooltips.js"></script>
  58.  
  59. <script>
  60.  
  61. (function($){
  62.  
  63. $(document).ready(function(){
  64.  
  65. $("a[title]").style_my_tooltips({
  66.  
  67. tip_follows_cursor:true,
  68.  
  69. tip_delay_time:0,
  70.  
  71. tip_fade_speed:0,
  72.  
  73. attribute:"title"
  74.  
  75. });
  76.  
  77. });
  78.  
  79. })(jQuery);
  80.  
  81. </script>
  82.  
  83. <style type="text/css">
  84. iframe.tmblr-iframe {
  85. z-index:99999999999999!important;
  86. top:0!important;
  87. right:0!important;
  88. opacity:0.4;
  89. /* delete invert(1) from here */
  90. filter:invert(1) contrast(150%);
  91. -webkit-filter:invert(1) contrast(150%);
  92. -o-filter:invert(1) contrast(150%);
  93. -moz-filter:invert(1) contrast(150%);
  94. -ms-filter:invert(1) contrast(150%);
  95. /* to here if your blog has a dark background */
  96. transform:scale(0.65);
  97. transform-origin:100% 0;
  98. -webkit-transform:scale(0.65);
  99. -webkit-transform-origin:100% 0;
  100. -o-transform:scale(0.65);
  101. -o-transform-origin:100% 0;
  102. -moz-transform:scale(0.65);
  103. -moz-transform-origin:100% 0;
  104. -ms-transform:scale(0.65);
  105. -ms-transform-origin:100% 0;}
  106.  
  107. iframe.tmblr-iframe:hover {
  108. opacity:0.6!important;}
  109.  
  110. ::-webkit-scrollbar{
  111. width:8px;
  112. }
  113.  
  114. ::-webkit-scrollbar-thumb:vertical{
  115. background:{color:second accent};
  116. border:3px solid #fff;
  117. }
  118.  
  119. ::selection{
  120. color:{color:first accent};
  121. background:transparent;
  122. }
  123.  
  124. ::-moz-selection{
  125. color:{color:first accent};
  126. background:transparent;
  127. }
  128.  
  129. body{
  130. font-family:merriweather;
  131. margin:0;
  132. padding:0;
  133. font-size:11px;
  134. color:{color:body};
  135. background:{color:bg} url('{image:bg}') fixed;
  136. }
  137.  
  138.  
  139. a{
  140. text-decoration:none;
  141. color:{color:first accent};
  142. }
  143.  
  144. a:hover{
  145. color:{color:second accent};
  146. }
  147.  
  148. blockquote blockquote{
  149. border-left:2px solid {color:second accent};
  150. padding-left:5px;
  151. }
  152.  
  153. #s-m-t-tooltip {
  154. max-width:150px;
  155. padding:5px 10px 5px 10px;
  156. margin:20px 14px 7px 10px;
  157. background-color:{color:first accent}; /* change the background color */
  158. font-style: normal;
  159. font-size:10px; /* change the font size */
  160. line-height:11px;
  161. letter-spacing:1px; /* change the letter spacing */
  162. text-transform:uppercase; /* can be uppercase, lowercase, none*/
  163. color:#fff; /* change the text color */
  164. z-index:999999;
  165. }
  166.  
  167. #navbar{
  168. height:100%;
  169. position:fixed;
  170. width:30px;
  171. padding:20px;
  172. background:{color:navbarbg};
  173. top:0;
  174. left:0;
  175. }
  176.  
  177. #sidebar{
  178. width:450px;
  179. height:100%;
  180. position:fixed;
  181. background:{color:sidebarbg};
  182. top:0;
  183. left:70px;
  184. }
  185.  
  186. #sidebarimg{
  187. width:385px;
  188. margin:20px;
  189. height:220px;
  190. padding:10px;
  191. border:1px solid #ccc;
  192. }
  193.  
  194. #sidebarimg img{
  195. width:385px;
  196. height:220px;
  197. max-height:220px;
  198. max-width:385px;
  199. }
  200.  
  201. #navcont{
  202. width:50px;
  203. height:210px;
  204. position:absolute;
  205. left:10px;
  206. margin-top:110px;
  207. }
  208.  
  209. .navlink a{
  210. display:block;
  211. width:30px;
  212. height:30px;
  213. color:{color:second accent};
  214. font-size:20px;
  215. padding:10px;
  216. text-align:center;
  217. line-height:180%;
  218. margin-bottom:20px;
  219. transition:.3s linear;
  220. }
  221.  
  222. .navlink a:hover{
  223. color:#fff;
  224. background:{color:first accent};
  225. }
  226.  
  227. #blogtitle{
  228. width:380px;
  229. padding:10px;
  230. position:absolute;
  231. margin:20px;
  232. margin-top:-10px;
  233. font-family:lora;
  234. font-size:18px;
  235. font-weight:700;
  236. text-align:center;
  237. border-bottom:2px solid {color:second accent};
  238. font-style:italic;
  239. }
  240.  
  241. #desc{
  242. width:380px;
  243. padding:10px;
  244. margin:20px;
  245. position:absolute;
  246. min-height:50px;
  247. max-height:100px;
  248. margin-top:40px;
  249. }
  250.  
  251. #custcont{
  252. width:400px;
  253. margin:20px;
  254. height:30px;
  255. position:absolute;
  256. margin-top:140px;
  257. }
  258.  
  259. .custlink a{
  260. display:inline-block;
  261. min-width:50px;
  262. text-align:center;
  263. font-family:lora;
  264. margin-right:10px;
  265. padding:8px;
  266. text-transform:lowercase;
  267. color:#777;
  268. }
  269.  
  270. .custlink a:hover{
  271. border-bottom:1px solid {color:first accent};
  272. }
  273.  
  274. #container{
  275. margin-left:580px;
  276. margin-top:-15px;
  277. }
  278.  
  279. .post{
  280. width:500px;
  281. position:relative;
  282. margin-bottom:120px;
  283. margin-top:60px;
  284. background:{color:postbg};
  285. }
  286.  
  287. .cap{
  288. word-wrap:break-word;
  289. padding:15px;
  290. text-align:justify;
  291.  
  292. {block:ifpostshadow}
  293. {block:IndexPage}
  294. box-shadow:5px 5px {color:first accent};
  295. {/block:IndexPage}
  296. {/block:ifpostshadow}
  297.  
  298. }
  299.  
  300. .cap b, strong{
  301. color:{color:first accent};
  302. }
  303.  
  304. .cap i, em{
  305. color:{color:second accent};
  306. }
  307.  
  308. .post img, .cap img{
  309. max-width:100%;
  310. }
  311.  
  312. .title{
  313. text-transform:uppercase;
  314. font-weight:700;
  315. font-size:18px;
  316. font-family:lora;
  317. text-align:center;
  318. color:{color:first accent};
  319. padding:5px;
  320. }
  321.  
  322. .ctrcont{
  323. width:90px;
  324. position:absolute;
  325. top:-35px;
  326. left:430px;
  327. }
  328.  
  329. .chat li{
  330. list-style-type:none !important;
  331. padding:8px;
  332. margin-left:-40px;
  333. margin-top:4px;
  334. margin-bottom:2px;
  335. font-family:lora;
  336. }
  337.  
  338. .line_odd .label{
  339. font-weight:700;
  340. border-bottom:2px solid {color:first accent};
  341. }
  342.  
  343. .line_even .label{
  344. font-weight:700;
  345. border-bottom:2px solid {color:second accent};
  346. }
  347.  
  348. svg {
  349. width:10px;
  350. height:auto;
  351. opacity:.5;
  352. padding:1px;
  353. display:block;
  354. overflow:visible;
  355. }
  356.  
  357. .controls a {
  358. position:relative;
  359. display:inline-block;
  360. overflow:hidden;
  361. padding:10px;
  362. width:12px;
  363. height:12px;
  364. margin-right:5px;
  365. background:#fff;
  366. color:{color:body};
  367. }
  368.  
  369. .controls .reblog {
  370. opacity:.93;
  371. }
  372. .controls .reblog svg {
  373. width:9px;
  374. margin-top:1px;
  375. }
  376.  
  377. .controls .like .liked + svg {
  378. opacity:1;
  379. }
  380.  
  381. .controls .like .liked + svg path {
  382. fill:#ec5a5a;
  383. }
  384.  
  385. .controls .like .like_button {
  386. position:relative;
  387. }
  388.  
  389. .controls .like .like_button iframe {
  390. position:absolute;
  391. top:0;
  392. left:0;
  393. bottom:0;
  394. right:0;
  395. z-index:2;
  396. opacity:0;
  397. }
  398.  
  399. #tagcont{
  400. position:absolute;
  401. top:0;
  402. left:510px;
  403. padding:5px;
  404. width:120px;
  405. height:75px;
  406. max-height:75px;
  407. }
  408.  
  409. .tag a{
  410. font-family:lora;
  411. text-transform:uppercase;
  412. font-size:10px;
  413. display:block;
  414. margin-bottom:5px;
  415. }
  416.  
  417. #link{
  418. display:block;
  419. font-family:lora;
  420. font-size:18px;
  421. font-weight:700;
  422. text-transform:uppercase;
  423. padding-left:10px;
  424. margin-top:10px;
  425. }
  426.  
  427. .pinfo{
  428. position:absolute;
  429. margin-top:20px;
  430. font-family:lora;
  431. width:500px;
  432. }
  433.  
  434. #quote{
  435. font-family:lora;
  436. font-weight:700;
  437. font-size:16px;
  438. text-align:center;
  439. text-transform:lowercase;
  440. font-style:italic;
  441. }
  442.  
  443. #source{
  444. padding-top:5px;
  445. border-top:2px solid {color:second accent};
  446. display:inline-block;
  447. margin-top:15px;
  448. margin-left:35%;
  449. }
  450.  
  451. #playcont{
  452. width:calc(95%+1px);
  453. border:1px solid {color:second accent};
  454. padding:10px;
  455. }
  456.  
  457. .playbutton{
  458. position:absolute;
  459. overflow:hidden;
  460. width:33px;
  461. height:30px;
  462. z-index:3;
  463. }
  464.  
  465. .audioinfo{
  466. text-transform:uppercase;
  467. font-family:lora;
  468. position:relative;
  469. padding:6px;
  470. min-width:100px;
  471. max-width:250px;
  472. text-align:center;
  473. font-weight:700;
  474. }
  475.  
  476. .reblogcont{
  477. position:absolute;
  478. top:-30px;
  479. height:10px;
  480. width:400px;
  481. padding:10px;
  482. text-transform:uppercase;
  483. background:#fff;
  484. }
  485.  
  486. #infocont{
  487. width:220px;
  488. position:absolute;
  489. }
  490.  
  491. .infoicon{
  492. width:10px;
  493. height:10px;
  494. background:{color:second accent};
  495. color:#fff;
  496. font-size:10px;
  497. padding:10px;
  498. text-align:center;
  499. float:left;
  500. }
  501.  
  502. .notecount, .date a{
  503. display:inline-block;
  504. color:{color:body};
  505. text-transform:uppercase;
  506. background:#fff;
  507. position:relative;
  508. height:10px;
  509. font-family:lora;
  510. padding:10px;
  511. }
  512.  
  513. .date a:hover{
  514. border:none !important;
  515. }
  516.  
  517. .notecount{
  518. text-align:center;
  519. }
  520.  
  521. .date a:hover{
  522. border-bottom:2px solid {color:second accent};
  523. }
  524.  
  525. #notecnt{
  526. width:150px;
  527. margin-left:330px;
  528. }
  529.  
  530. .qbox{
  531. background:#E8E8E8;
  532. font-family:lora;
  533. padding:10px;
  534. }
  535.  
  536. .tumblr_parent{
  537. margin-left:-1px;
  538. height:auto;
  539. }
  540.  
  541. a.tumblr_blog{
  542. font-weight:700;
  543. text-transform:uppercase;
  544. font-family:lora;
  545. }
  546.  
  547. .ask{
  548. display:inline-block;
  549. text-transform:uppercase;
  550. color:{color:body};
  551. margin-bottom:3px;
  552. }
  553.  
  554. .ask a{
  555. color:{color:body};
  556. }
  557.  
  558. div.pnotes{
  559. position:absolute;
  560. width:480px;
  561. background:#fff;
  562. padding:10px;
  563. margin-top:20px;
  564. border:1px solid #f2f2f2;
  565. max-height:200px;
  566. overflow:scroll;
  567. margin-bottom:20px;
  568. }
  569.  
  570.  
  571. div.pnotes::-webkit-scrollbar{
  572. display:none !important;
  573. }
  574.  
  575. ol.notes{
  576. list-style-type:none !important;
  577. margin-left:-30px;
  578. }
  579.  
  580. ol.notes li.note{
  581. top:0;
  582. padding-bottom:10px;
  583. }
  584.  
  585. ol.notes:before, li.note:before{
  586. content:none!important;
  587. }
  588.  
  589. .pnotes img.avatar{
  590. float:left;
  591. margin-right:10px;
  592. }
  593.  
  594. .pnotes a{
  595. font-family:lora;
  596. text-transform:uppercase;
  597. }
  598.  
  599. #searchbox{
  600. width:385px;
  601. height:20px;
  602. padding:8px;
  603. position:fixed;
  604. margin-top:180px;
  605. margin-left:20px;
  606. }
  607.  
  608. .sfm input{
  609. border:0px !important;
  610. border-bottom:1px solid {color:first accent} !important;
  611. font-family:merriweather;
  612. width:370px;
  613. text-transform:uppercase;
  614. padding:4px 8px;
  615. }
  616.  
  617. .sfm input:focus {
  618. outline:none;
  619. }
  620. </style>
  621.  
  622. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  623.  
  624. </head>
  625.  
  626. <body>
  627. <div id="navbar">
  628. <div id="navcont">
  629. <div class="navlink">
  630. <a href="/" title="home"><span class="sf sf-home-o"></span></a>
  631. </div>
  632. <div class="navlink">
  633. <a href="/ask" title="message"><span class="sf sf-envelope-2-o"></span></a>
  634. </div>
  635. <div class="navlink">
  636. <a href="/archive" title="archive"><span class="sf sf-menu-o"></span></a>
  637. </div>
  638. <div class="navlink">
  639. <a href="http://kuzuriha.tumblr.com" title="theme by kuzuriha"><span class="sf sf-code-o"></span></a>
  640.  
  641. {block:IndexPage}
  642. {block:Pagination}
  643. {block:PreviousPage}
  644. <a href="{PreviousPage}" title="previous">
  645. <span class="sf sf-chevron-left"></span>
  646. </a>
  647. {/block:PreviousPage}
  648.  
  649. {block:NextPage}<a href="{NextPage}" title="next">
  650. <span class="sf sf-chevron-right"></span>
  651. </a>{/block:NextPage}
  652.  
  653. {/block:Pagination}
  654.  
  655. {/block:IndexPage}
  656. </div>
  657.  
  658.  
  659. </div>
  660. </div>
  661.  
  662.  
  663. <div id="sidebar">
  664. <div id="sidebarimg"><img src="{image:sidebar}"/></div>
  665.  
  666. <div id="blogtitle">{Title}</div>
  667.  
  668. <div id="desc">{Description}</div>
  669.  
  670. <div id="custcont">
  671. <div class="custlink">
  672. {block:ifLink1}<a href="{text:Link1URL}">{text:Link1}.</a>{/block:ifLink1}
  673.  
  674. {block:ifLink2}<a href="{text:Link2URL}">{text:Link2}.</a>{/block:ifLink2}
  675.  
  676. {block:ifLink3}<a href="{text:Link3URL}">{text:Link3}.</a>{/block:ifLink3}
  677.  
  678. {block:ifLink4}<a href="{text:Link4URL}">{text:Link4}.</a>{/block:ifLink4}
  679.  
  680. {block:ifLink5}<a href="{text:Link5URL}">{text:Link5}.</a>{/block:ifLink5}
  681. </div>
  682. </div>
  683.  
  684. <div id="searchbox">
  685.  
  686. <script language="javascript">
  687. function send()
  688. {document.theform.submit()}
  689. </script>
  690.  
  691. <form class="sfm" action="/search" method="get" name="theform">
  692. <input type="text" name="q" value="{SearchQuery}" id="sf" autocomplete="off" placeholder="search"/>
  693. </form>
  694. </div>
  695.  
  696. </div>
  697.  
  698. <div id="container">
  699.  
  700.  
  701. {block:Posts}
  702.  
  703. <div class="post" id="{PostID}">
  704. {block:Text}
  705. <div class="cap">
  706. {block:Title}<div class="title">{Title}</div>{/block:Title}{Body}</div>
  707.  
  708. {/block:Text}
  709.  
  710. {block:Photo}
  711. {LinkOpenTag}
  712. <img src="{PhotoURL-HighRes}"/>
  713. {LinkCloseTag}
  714.  
  715. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  716.  
  717. {/block:Photo}
  718.  
  719. {block:Photoset}
  720. {Photoset-500}
  721. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  722.  
  723. {/block:Photoset}
  724.  
  725. {block:Video}
  726. {Video-500}
  727.  
  728. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  729.  
  730. {/block:Video}
  731.  
  732. {block:Quote}
  733. <div class="cap">
  734. <div id="quote">{Quote}</div>
  735. {block:Source}<div id="source">{Source}</div>{/block:Source}
  736. </div>
  737. {/block:Quote}
  738.  
  739. {block:Link}
  740. <a href="{URL}"><div id="link">{Name} →</div></a>
  741. {block:Description}<div class="cap">{Description}</div>{/block:Description}
  742.  
  743. {/block:Link}
  744.  
  745. {block:Chat}
  746. {block:Title}<div class="title">{Title}</div>{/block:Title}
  747. <div class="cap">
  748. <ul class="chat">
  749. {block:Lines}
  750. <li class="line_{Alt}"><span class="label">{block:Label}{Label}{/block:Label}</span> {Line}
  751. {/block:Lines}
  752. </li>
  753. </ul>
  754. </div>
  755.  
  756. {/block:Chat}
  757.  
  758. {block:Audio}
  759.  
  760. <div id="playcont">
  761. <div class="playbutton">{AudioPlayerWhite}</div>
  762.  
  763. <div class="audioinfo">
  764. {block:TrackName}{TrackName} {/block:TrackName}{block:Artist}by {Artist}{/block:Artist}
  765.  
  766. </div>
  767. </div>
  768.  
  769. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  770.  
  771. {/block:Audio}
  772.  
  773. {block:Answer}
  774. <div class="qbox">
  775. <div class="ask">{Asker}</div>
  776. <div class="qt">{Question}</div>
  777. </div>
  778.  
  779. <div class="cap">
  780. {Answer}
  781. </div>
  782. {/block:Answer}
  783.  
  784. {block:IndexPage}
  785. {block:Date}
  786.  
  787. <div class="pinfo">
  788. <div id="infocont">
  789. <div class="infoicon"><i class="sf sf-clock-3-o"></i></div>
  790. <div class="date"><a href="{Permalink}">{DayOfWeek}, {DayOfMonth} {Month}</a></div>
  791. </div>
  792.  
  793. <div id="notecnt">
  794. <div class="infoicon"><i class="sf sf-bookmark-o"></i></div>
  795. <div class="notecount">{NoteCountWithLabel}</div>
  796. </div>
  797.  
  798. </div>
  799.  
  800. {/block:Date}
  801.  
  802.  
  803. <div class="ctrcont">
  804. <div class="controls">
  805. <a href="{ReblogURL}" target="_blank" class="reblog">
  806. <i class="sf sf-reblog-o"></i>
  807. </a>
  808. <a href="#" class="like">{LikeButton}
  809. <i class="sf sf-heart"></i>
  810. </a>
  811. </div>
  812. </div><!--end ctrcont-->
  813.  
  814. {block:RebloggedFrom}
  815. <div class="reblogcont">
  816. via: <a href="{ReblogParentURL}">{ReblogParentName}</a> // src: <a href="{ReblogRootURL}">{ReblogRootName}</a>
  817. </div>
  818. {/block:RebloggedFrom}
  819.  
  820. {/block:IndexPage}
  821.  
  822.  
  823. {block:ContentSource}
  824. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  825. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  826. {/block:SourceLogo}
  827. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  828. {/block:ContentSource}
  829.  
  830.  
  831. {block:IndexPage}
  832. {block:HasTags}
  833. <div id="tagcont">
  834. <div class="tag">{block:Tags}<a href="{TagURL}">> {Tag}</a>
  835. {/block:Tags}</div>
  836. </div>
  837. {/block:HasTags}
  838. {/block:IndexPage}
  839.  
  840. {block:PermalinkPage}
  841. {block:PostNotes}
  842. <div class="pnotes">
  843. <ol class="notes">{PostNotes}</ol>
  844. </div>
  845. {/block:PostNotes}
  846. </div>
  847. {/block:PermalinkPage}
  848.  
  849.  
  850. </div><!--end mcontainer-->
  851. {/block:Posts}
  852. </div>
  853.  
  854. <script>
  855.  
  856. $(document).ready(function(){
  857.  
  858. var $container = $('#container');
  859. $('.post').unnest({
  860. yourCaption: ".cap",
  861. wrapName: ".tumblr_parent",
  862. newCaptionUsername: false,
  863. originalPostCaptionUsername: true,
  864. tumblrAvatars: false,
  865. tumblrAvatarClass: ".tumblr_avatar",
  866. usernameColon: false
  867. });
  868. });
  869. </script>
  870.  
  871. </body>
  872. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement