API tools faq
paste
Advertisement
aryasnark

aryasnark - Theme 11

aryasnark
Jul 1st, 2014
5,647
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <!--
  6.  
  7. THEME 11 by ARYASNARK
  8.  
  9. Copyright © Aryasnark 2014 All Rights Reserved. No part of this website may be reproduced without my express consent.
  10.  
  11. -->
  12.  
  13. <head>
  14. <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  18. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
  19.  
  20.  
  21.  
  22. <meta name="color:background" content="#ffffff">
  23. <meta name="color:sidebar bg" content="#ffffff">
  24. <meta name="color:panel bg" content="#222222">
  25. <meta name="color:panel text" content="#999999">
  26. <meta name="color:panel bold" content="#ffffff">
  27. <meta name="color:panel link" content="#999999">
  28. <meta name="color:panel link hover" content="#ffffff">
  29. <meta name="color:title" content ="#2b2b2b">
  30. <meta name="color:title hover" content ="#2b2b2b">
  31. <meta name="color:text" content="#2b2b2b">
  32. <meta name="color:tags" content="#cccccc">
  33. <meta name="color:tags hover" content="#2b2b2b">
  34. <meta name="color:link" content="#cccccc">
  35. <meta name="color:link hover" content="#2b2b2b">
  36. <meta name="color:sidelink" content="#2b2b2b">
  37. <meta name="color:sidelink hover" content="#cccccc">
  38. <meta name="color:border" content="#dddddd">
  39. <meta name="color:scrollbar" content="#dddddd">
  40. <meta name="color:scrollbar bg" content="#ffffff">
  41.  
  42. <meta name="image:sidebar" content=""/>
  43.  
  44. <meta name="if:sidebarimg" content="0"/>
  45. <meta name="if:400px" content="1"/>
  46. <meta name="if:500px" content="0"/>
  47. <meta name="if:hover tags" content="0"/>
  48. <meta name="text:link 1 title" content=""/>
  49. <meta name="text:panel 1 title" content=""/>
  50. <meta name="text:link 2 title" content=""/>
  51. <meta name="text:panel 2 title" content=""/>
  52. <meta name="text:link 3 title" content=""/>
  53. <meta name="text:panel 3 title" content=""/>
  54. <meta name="text:ask link" content="ask"/>
  55. <meta name="text:ask title" content="ask me anything"/>
  56. <meta name="text:username" content=""/>
  57.  
  58. <style type="text/css">
  59.  
  60. ::-webkit-scrollbar {
  61. width:7px;
  62. height:auto;
  63. background:{color:scrollbar bg};
  64. }
  65. ::-webkit-scrollbar-corner {
  66. background:{color:scrollbar};
  67. }
  68. ::-webkit-scrollbar-thumb:vertical {
  69. background:{color:scrollbar};
  70. -webkit-border-radius: 5px;
  71. -moz-border-radius: 5px;
  72. border-radius: 5px;
  73. }
  74. ::-webkit-scrollbar-thumb:horizontal {
  75. background:{color:scrollbar};
  76. -webkit-border-radius: 5px;
  77. -moz-border-radius: 5px;
  78. border-radius: 5px;
  79. }
  80.  
  81. body {
  82. margin:0 auto;
  83. padding:0px;
  84. font-family: 'Lato', sans-serif;
  85. font-weight:300;
  86. font-size:9px;
  87. color:{color:text};
  88. letter-spacing:1px;
  89. background:{color:background};
  90. }
  91.  
  92. a:link, a, a:active, a:visited {
  93. text-decoration:none;
  94. color:{color:link};
  95. transition-duration: 0.6s;
  96. -moz-transition-duration: 0.6s;
  97. -webkit-transition-duration: 0.6s;
  98. -o-transition-duration: 0.6s;
  99. }
  100.  
  101. a:hover {
  102. color:{color:link hover};
  103. transition-duration: 0.6s;
  104. -moz-transition-duration: 0.6s;
  105. -webkit-transition-duration: 0.6s;
  106. -o-transition-duration: 0.6s;
  107. }
  108. p { margin-bottom:10px; }
  109.  
  110. p img {
  111. max-width:400px;
  112. height:auto;
  113. {block:if500px}
  114. max-width:500px;
  115. {/block:if500px}
  116. }
  117.  
  118. .text img {
  119. max-width:400px;
  120. height:auto;
  121. {block:if500px}
  122. max-width:500px;
  123. {/block:if500px}
  124. }
  125.  
  126. h1 {font-size:10px;
  127. text-transform:uppercase;
  128. letter-spacing:2px;
  129. text-align:center;
  130. padding:10px;
  131. line-height:150%;
  132. color:{color:text};
  133. font-weight:400;
  134. border-bottom:1px dashed {color:border};
  135. }
  136.  
  137. h1 a {
  138. color:{color:text}!important;
  139. }
  140.  
  141. /*SIDEBAR*/
  142.  
  143. #sidebar {
  144. width:180px;
  145. left:300px;
  146. padding:20px;
  147. margin:auto;
  148. background:{color:sidebar bg};
  149. text-align:center;
  150. height:800px;
  151. position:fixed;
  152. z-index:99;
  153. border-right:1px dashed {color:border};
  154. }
  155.  
  156. {block:ifsidebarimg}
  157. #sidebar img {
  158. width:180px;
  159. height:auto;
  160. margin-left:0px;
  161. }
  162. {/block:ifsidebarimg}
  163.  
  164. .blogtitle {
  165. font-size:12px;
  166. line-height:300%;
  167. padding:10px;
  168. letter-spacing:2px;
  169. text-transform:uppercase;
  170. font-weight:400;
  171. margin-top:100px;
  172. margin-bottom:-10px;
  173. margin-left:-10px;
  174. width:180px;
  175. }
  176. .blogtitle a {
  177. color:{color:title};
  178. }
  179. .blogtitle a:hover {
  180. color:{color:title hover};
  181. }
  182.  
  183. .description {
  184. line-height:200%;
  185. margin-left:-10px;
  186. width:180px;
  187. padding:10px;
  188. font-size:8px;
  189. letter-spacing:1px;
  190. transition-duration: 0.6s;
  191. -moz-transition-duration: 0.6s;
  192. -webkit-transition-duration: 0.6s;
  193. -o-transition-duration: 0.6s;
  194. }
  195.  
  196. .description a {
  197. color:{color:links};
  198. transition-duration: 0.6s;
  199. -moz-transition-duration: 0.6s;
  200. -webkit-transition-duration: 0.6s;
  201. -o-transition-duration: 0.6s;
  202. }
  203.  
  204. .pagination {
  205. margin-top:70px;
  206. padding:10px;
  207. text-transform:uppercase;
  208. letter-spacing:3px;
  209. font-weight:400;
  210. line-height:200%;
  211. width:180px;
  212. margin-left:-10px;
  213. font-size:7px;
  214. }
  215. .pagination a {
  216. color:{color:links};
  217. transition-duration: 0.6s;
  218. -moz-transition-duration: 0.6s;
  219. -webkit-transition-duration: 0.6s;
  220. -o-transition-duration: 0.6s;
  221. }
  222. .pagination a:hover {
  223. color:{color:links hover};
  224. transition-duration: 0.6s;
  225. -moz-transition-duration: 0.6s;
  226. -webkit-transition-duration: 0.6s;
  227. -o-transition-duration: 0.6s;
  228. }
  229.  
  230. .showmenu input { width:80%; }
  231.  
  232.  
  233. #tab1, #tab2, #tab3, #tab4 {
  234. font-size:7px;
  235. color:{color:sidelink};
  236. padding: 10px;
  237. letter-spacing:3px;
  238. text-transform:uppercase;
  239. font-weight:400;
  240. opacity:1;
  241. cursor:pointer;
  242. display:block;
  243. border-bottom:1px dashed {color:border};
  244. line-height:200%;
  245. width:180px;
  246. margin-left:-10px;
  247. transition-duration: 0.6s;
  248. -moz-transition-duration: 0.6s;
  249. -webkit-transition-duration: 0.6s;
  250. -o-transition-duration: 0.6s;
  251. }
  252.  
  253. #tab1:hover, #tab2:hover, #tab3:hover, #tab4:hover {
  254. color:{color:sidelink hover};
  255. transition-duration: 0.6s;
  256. -moz-transition-duration: 0.6s;
  257. -webkit-transition-duration: 0.6s;
  258. -o-transition-duration: 0.6s;
  259. }
  260.  
  261. #panel1, #panel2, #panel3, #panel3, #panel4 {
  262. position:fixed;
  263. left:0px;
  264. margin-left:520px;
  265. top:0px;
  266. height:800px;
  267. width:0;
  268. z-index:99999;
  269. background-color:{color:panel bg};
  270. }
  271.  
  272. #panel1 .content1, #panel2 .content2, #panel3 .content3, #panel4 .content4{
  273. width:400px;
  274. display:none;
  275. z-index:99999;
  276. margin-left:0px;
  277. text-align:center;
  278. padding:70px;
  279. color:{color:panel text};
  280. text-align:center;
  281. margin-top:40px;
  282. text-transform:uppercase;
  283. font-size:8px;
  284. letter-spacing:2px;
  285. font-weight:normal;
  286. line-height:200%;
  287. font-weight:400;
  288. {block:if500px}
  289. width:450px;
  290. {/block:if500px}
  291. }
  292.  
  293. #panel1 .content1 b, #panel2 .content2 b, #panel3 .content3 b, #panel4 .content4 b{
  294. color:{color:panel bold};
  295. font-weight:300;
  296. }
  297.  
  298. #panel1 .content1 a, #panel2 .content2 a, #panel3 .content3 a, #panel4 .content4 a {
  299. color:{color:panel link};
  300. font-weight:400;
  301. line-height:200%;
  302. transition-duration: 0.6s;
  303. -moz-transition-duration: 0.6s;
  304. -webkit-transition-duration: 0.6s;
  305. -o-transition-duration: 0.6s;
  306. }
  307. #panel1 .content1 a:hover, #panel2 .content2 a:hover, #panel3 .content3 a:hover, #panel4 .content4 a:hover {
  308. color:{color:panel link hover};
  309. transition-duration: 0.6s;
  310. -moz-transition-duration: 0.6s;
  311. -webkit-transition-duration: 0.6s;
  312. -o-transition-duration: 0.6s;
  313. }
  314.  
  315. h3 {
  316. font-size:10px;
  317. line-height:2em;
  318. color:{color:panel bold};
  319. padding:10px;
  320. letter-spacing:3px;
  321. text-transform:uppercase;
  322. font-weight:300;
  323. border-bottom:1px dashed {color:panel text};
  324. width:50%;
  325. margin-left:90px;
  326. margin-bottom:20px;
  327. {block:if500px}
  328. margin-left:100px;
  329. {/block:if500px}
  330. }
  331.  
  332. /*POSTS*/
  333.  
  334. #posts {
  335. width:600px;
  336. margin-left:540px;
  337. margin-top:30px;
  338. position:absolute;
  339. {block:if500px}
  340. width:600px;
  341. {/block:if500px}
  342. }
  343.  
  344. .entries {
  345. margin:40px;
  346. float:left;
  347. width:400px;
  348. {block:if500px}
  349. width:500px;
  350. {/block:if500px}
  351. }
  352.  
  353. {block:IndexPage}
  354. .caption {
  355. opacity:0;
  356. background:white;
  357. top:0px;
  358. position:absolute;
  359. width:350px;
  360. overflow:scroll;
  361. {block:if500px}
  362. width:450px;
  363. {/block:if500px}
  364. margin:15px;
  365. padding:10px;
  366. padding-top:0px;
  367. padding-bottom:0px;
  368. line-height:130%;
  369. margin-bottom:10px;
  370. transition-duration: 0.6s;
  371. -moz-transition-duration: 0.6s;
  372. -webkit-transition-duration: 0.6s;
  373. -o-transition-duration: 0.6s;
  374. }
  375.  
  376. .caption a {
  377. color:{color:link};
  378. transition-duration: 0.6s;
  379. -moz-transition-duration: 0.6s;
  380. -webkit-transition-duration: 0.6s;
  381. -o-transition-duration: 0.6s;
  382. }
  383.  
  384. .caption a:hover {
  385. color:{color:link hover};
  386. transition-duration: 0.6s;
  387. -moz-transition-duration: 0.6s;
  388. -webkit-transition-duration: 0.6s;
  389. -o-transition-duration: 0.6s;
  390. }
  391.  
  392. .entries:hover .caption {
  393. opacity:1;
  394. transition-duration: 0.6s;
  395. -moz-transition-duration: 0.6s;
  396. -webkit-transition-duration: 0.6s;
  397. -o-transition-duration: 0.6s;
  398. }
  399. {/block:IndexPage}
  400.  
  401. {block:PermalinkPage}
  402. .caption {
  403. background:white;
  404. width:380px;
  405. padding:10px;
  406. line-height:130%;
  407. {block:if500px}
  408. width:480px;
  409. {/block:if500px}
  410. }
  411. {/block:PermalinkPage}
  412.  
  413. blockquote {
  414. padding-left:10px;
  415. border-left:1px dashed {color:border};
  416. margin-left:10px;
  417. }
  418.  
  419. .info {
  420. width:400px;
  421. z-index:999;
  422. font-size:8px;
  423. font-style:none;
  424. text-align:center;
  425. letter-spacing:1px;
  426. line-height:150%;
  427. margin-top:10px;
  428. text-transform:uppercase;
  429. color:{color:text};
  430. transition-duration: 0.5s;
  431. -moz-transition-duration: 0.5s;
  432. -webkit-transition-duration: 0.5s;
  433. -o-transition-duration: 0.5s;
  434. {block:if500px}
  435. width:500px;
  436. padding-top:7px;
  437. {/block:if500px}
  438. }
  439.  
  440. .info a {
  441. color:{color:text};
  442. padding:5px;
  443. }
  444.  
  445. .info a:hover {
  446. color:{color:text};
  447. }
  448.  
  449. .tags {
  450. font-weight:300;
  451. width:400px;
  452. font-size:8px;
  453. font-style:none;
  454. text-align:center;
  455. letter-spacing:1px;
  456. line-height:170%;
  457. text-transform:lowercase;
  458. padding-top:5px;
  459. color:{color:tags};
  460. {block:indexpage}
  461. {block:ifhovertags}
  462. opacity:0;
  463. {/block:ifhovertags}
  464. {block:indexpage}
  465. transition-duration: 0.5s;
  466. -moz-transition-duration: 0.5s;
  467. -webkit-transition-duration: 0.5s;
  468. -o-transition-duration: 0.5s;
  469. {block:if500px}
  470. width:500px;
  471. padding-top:7px;
  472. {/block:if500px}
  473. }
  474.  
  475. .tags a {
  476. color:{color:tags};
  477. transition-duration: 0.6s;
  478. -moz-transition-duration: 0.6s;
  479. -webkit-transition-duration: 0.6s;
  480. -o-transition-duration: 0.6s;
  481. }
  482.  
  483. .tags a:hover {
  484. color:{color:tags hover};
  485. transition-duration: 0.6s;
  486. -moz-transition-duration: 0.6s;
  487. -webkit-transition-duration: 0.6s;
  488. -o-transition-duration: 0.6s;
  489. }
  490.  
  491. {block:ifhovertags}
  492. .entries:hover .tags {
  493. opacity:1;
  494. -webkit-transition: all 0.6s ease-in-out;
  495. -moz-transition: all 0.6s ease-in-out;
  496. -o-transition: all 0.6s ease-in-out;
  497. -ms-transition: all 0.6s ease-in-out;
  498. }
  499. {/block:ifhovertags}
  500.  
  501. .quote {
  502. font-size:8px;
  503. font-style:none;
  504. text-align:center;
  505. letter-spacing:1px;
  506. line-height:150%;
  507. padding:10px;
  508. padding-bottom:0px;
  509. text-transform:uppercase;
  510. }
  511.  
  512. #source {
  513. font-size:8px;
  514. text-transform:uppercase;
  515. letter-spacing:2px;
  516. text-align:center;
  517. padding:10px;
  518. line-height:150%;
  519. color:{color:text};
  520. font-weight:400;
  521. border-bottom:1px dashed {color:border};
  522. }
  523.  
  524. #source a {
  525. color:{color:link};
  526. text-decoration:none;
  527. }
  528.  
  529. #source a:hover {
  530. color:{color:link hover};
  531. }
  532.  
  533. #asker {
  534. font-size:8px;
  535. text-align:center;
  536. font-style:none;
  537. padding:10px;
  538. letter-spacing:3px;
  539. line-height:150%;
  540. text-transform:uppercase;
  541. font-weight:400;
  542. color:{color:text};
  543. border-bottom:1px dashed {color:border};
  544. }
  545.  
  546. #asker a {
  547. font-size:8px;
  548. text-transform:uppercase;
  549. letter-spacing:3px;
  550. color:{color:text};
  551. text-decoration:none;
  552. font-weight:400;
  553. }
  554.  
  555. #asked {
  556. text-transform:uppercase;
  557. text-align:center;
  558. font-size:8px;
  559. font-style:none;
  560. line-height:150%;
  561. padding:10px;
  562. margin-bottom:-20px;
  563. color:{color:link};
  564. }
  565.  
  566. #answer {
  567. font-size:9px;
  568. font-style:none;
  569. text-align:center;
  570. letter-spacing:1px;
  571. padding:10px;
  572. }
  573.  
  574. #answer img {
  575. max-width:380px;
  576. {block:if500px}
  577. width:480px;
  578. {/block:if500px}
  579. }
  580.  
  581. .playbutton {
  582. width:20px;
  583. height:30px;
  584. overflow:hidden;
  585. position:relative;
  586. opacity:0.8;
  587. z-index:100;
  588. margin:9px 18px 7px 10px;
  589. }
  590.  
  591. .playbox {
  592. margin-top:10px;
  593. margin-left:13px;
  594. opacity:0.8;
  595. background-color:#e5e5e5;
  596. position: absolute;
  597. z-index: 100;
  598. }
  599.  
  600. .audiodata {
  601. background-color:#eeeeee;
  602. font-size:8px;
  603. letter-spacing:2px;
  604. color:{color:text};
  605. padding:1px 10px 10px 10px;
  606. text-transform:uppercase;
  607. line-height:200%;
  608. height:55px;
  609. width:305px;
  610. margin-top:0px;
  611. margin-left:75px;
  612. text-align:right;
  613. {block:if500px}
  614. width:405px;
  615. {/block:if500px}
  616. }
  617.  
  618. ol.notes {
  619. padding-bottom:2%;
  620. width:380px;
  621. list-style-type:lower-roman;
  622. text-align:left;
  623. font-size:9px;
  624. {block:if500px}
  625. width:480px;
  626. {/block:if500px}
  627. }
  628.  
  629. ol.notes li.note{
  630. border-bottom:1px dashed {color:border};
  631. padding:2%;
  632. }
  633.  
  634. ol.notes li.note img.avatar{
  635. width:0px;
  636. height:0px;
  637. }
  638.  
  639. #credit {
  640. position:fixed;
  641. bottom:0px;
  642. right:0px;
  643. text-align:right;
  644. font-size:7px;
  645. letter-spacing:3px;
  646. opacity:0.3;
  647. width:200px;
  648. padding:10px;
  649. }
  650.  
  651. </style></head>
  652.  
  653.  
  654. <body>
  655.  
  656.  
  657. <!----- SIDEBAR ----->
  658. <div id="sidebar">
  659. <div class="blogtitle"><a href="/">{Title}</a></div>
  660. {block:ifsidebarimg}<div id="sidebar img"><img src="{image:sidebar}"width="180"/></div>{/block:ifsidebarimg}
  661. {block:iflink1title}
  662.  
  663.  
  664. <div id="panel1">
  665. <div class="content1">
  666. {block:ifpanel1title}<h3>{text:panel 1 title}</h3>{/block:ifpanel1title}
  667. <!--CONTENT BEGINS-->
  668. <p>This is some example text.</p>
  669. <p>This is another paragraph.</p>
  670. <p><b>This text is bolded.</b></p>
  671. <!--CONTENT ENDS-->
  672. </div>
  673. </div>
  674. <div id="tab1">{text:link 1 title}</div>
  675. {/block:iflink1title}
  676.  
  677. {block:iflink2title}
  678. <div id="panel2">
  679. <div class="content2">
  680. {block:ifpanel2title}<h3>{text:panel 2 title}</h3>{/block:ifpanel2title}
  681. <!--CONTENT BEGINS-->
  682. <p><a href="/#">LINK 1</a></p>
  683. <p><a href="/#">LINK 2</a></p>
  684. <p><a href="/#">LINK 3</a></p>
  685. <!--CONTENT ENDS-->
  686. </div>
  687. </div>
  688. <div id="tab2">{text:link 2 title}</div>
  689. {/block:iflink2title}
  690.  
  691. {block:iflink3title}
  692. <div id="panel3">
  693. <div class="content3">
  694. {block:ifpanel3title}<h3>{text:panel 3 title}</h3>{block:ifpanel3title}
  695. <!--CONTENT BEGINS-->
  696. <p><a href="/#">LINK 1</a></p>
  697. <p><a href="/#">LINK 2</a></p>
  698. <p><a href="/#">LINK 3</a></p>
  699. <!--CONTENT ENDS-->
  700. </div>
  701. </div>
  702. <div id="tab3">{text:link 3 title}</div>
  703. {/block:iflink3title}
  704.  
  705. <div id="panel4">
  706. <div class="content4">
  707. {block:ifasktitle}<h3>{text:ask title}</h3>{/block:ifasktitle}
  708. <iframe frameborder="0" border="0" scrolling="no" width="400px" height="255" allowtransparency="true" src="http://www.tumblr.com/ask_form/{text:username}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  709. </div>
  710. </div>
  711. <div id="tab4">{text:ask link}</div>
  712.  
  713. <!----- SCRIPT ----->
  714.  
  715. <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  716.  
  717. <script>
  718. $(function() {
  719. $('#tab1').click(function(event) {
  720. var panel = $('#panel1');
  721. if (panel.hasClass('open')) {
  722. panel.removeClass('open');
  723. $('.content1').fadeOut('slow', function() {
  724. $('#panel1').stop().animate({
  725. width: '0',
  726. opacity: 0.0
  727. }, 500)
  728. })
  729. } else {
  730. panel.addClass('open');
  731. $('#panel1').stop().animate({
  732. {block:if400px}width: '540'{/block:if400px}{block:if500px}width: '590'{/block:if500px},
  733. opacity: 1
  734. }, 500, function() {
  735. $('.content1').fadeIn('slow');
  736. });
  737. }
  738.  
  739. });
  740.  
  741. $('#tab2').click(function(event) {
  742. var panel = $('#panel2');
  743. if (panel.hasClass('open')) {
  744. panel.removeClass('open');
  745. $('.content2').fadeOut('slow', function() {
  746. $('#panel2').stop().animate({
  747. width: '0',
  748. opacity: 0.0
  749. }, 500)
  750. })
  751. } else {
  752. panel.addClass('open');
  753. $('#panel2').stop().animate({
  754. {block:if400px}width: '540'{/block:if400px}{block:if500px}width: '590'{/block:if500px},
  755. opacity: 1
  756. }, 500, function() {
  757. $('.content2').fadeIn('slow');
  758. });
  759. }
  760. });
  761.  
  762. $('#tab3').click(function(event) {
  763. var panel = $('#panel3');
  764. if (panel.hasClass('open')) {
  765. panel.removeClass('open');
  766. $('.content3').fadeOut('slow', function() {
  767. $('#panel3').stop().animate({
  768. width: '0',
  769. opacity: 0.0
  770. }, 500)
  771. })
  772. } else {
  773. panel.addClass('open');
  774. $('#panel3').stop().animate({
  775. {block:if400px}width: '540'{/block:if400px}{block:if500px}width: '590'{/block:if500px},
  776. opacity: 1
  777. }, 500, function() {
  778. $('.content3').fadeIn('slow');
  779. });
  780. }
  781. });
  782.  
  783. $('#tab4').click(function(event) {
  784. var panel = $('#panel4');
  785. if (panel.hasClass('open')) {
  786. panel.removeClass('open');
  787. $('.content4').fadeOut('slow', function() {
  788. $('#panel4').stop().animate({
  789. width: '0',
  790. opacity: 0.0
  791. }, 500)
  792. })
  793. } else {
  794. panel.addClass('open');
  795. $('#panel4').stop().animate({
  796. {block:if400px}width: '540'{/block:if400px}{block:if500px}width: '590'{/block:if500px},
  797. opacity: 1
  798. }, 500, function() {
  799. $('.content4').fadeIn('slow');
  800. });
  801. }
  802. });
  803.  
  804. });
  805. </script>
  806.  
  807. <!----- DESCRIPTION ----->
  808.  
  809. <div class="description">
  810. <p>{Description}</p>
  811. </div>
  812. {block:Pagination}
  813. <div class="pagination">
  814. {block:PreviousPage}
  815. <a href="{PreviousPage}">&larr; regress</a>&nbsp;&nbsp;
  816. {/block:PreviousPage}
  817.  
  818. {block:NextPage}
  819. <a href="{NextPage}">progress &rarr;</a>
  820. {/block:NextPage}
  821.  
  822. </div>
  823. {/block:Pagination}
  824.  
  825.  
  826.  
  827.  
  828.  
  829. </div>
  830.  
  831. <!----- SCRIPT ----->
  832.  
  833. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  834. <script>/*
  835. * jQuery pageSlide
  836. * Version 2.0
  837. * http://srobbin.com/jquery-pageslide/
  838. *
  839. * jQuery Javascript plugin which slides a webpage over to reveal an additional interaction pane.
  840. *
  841. * Copyright (c) 2011 Scott Robbin (srobbin.com)
  842. * Dual licensed under the MIT and GPL licenses.
  843. */
  844. ;(function(b){function j(e,a){if(0===e.indexOf("#"))b(e).clone(!0).appendTo(c.empty()).show();else{if(a){var d=b("<iframe />").attr({src:e,frameborder:0,hspace:0}).css({width:"100%",height:"100%"});c.html(d)}else c.load(e);c.data("localEl",!1)}}function k(b,a){var d=c.outerWidth(!0),f={},g={};if(!c.is(":visible")&&!h){h=!0;switch(b){case "left":c.css({left:"auto",right:"-"+d+"px"});f["margin-left"]="-="+d;g.right="+="+d;break;default:c.css({left:"-"+d+"px",right:"auto"}),f["margin-left"]="+="+d,g.left="+="+d}l.animate(f,a);c.show().animate(g,a,function(){h=!1})}}var l=b("body"),c=b("#pageslide"),h=!1,m;0==c.length&&(c=b("<div />").attr("id","pageslide").css("display","none").appendTo(b("body")));b.fn.pageslide=function(e){this.click(function(a){var d=b(this),f=b.extend({href:d.attr("href")},e);a.preventDefault();a.stopPropagation();c.is(":visible")&&d[0]==m?b.pageslide.close():(b.pageslide(f),m=d[0])})};b.fn.pageslide.defaults={speed:400,direction:"right",modal:!1,iframe:!0,href:null};b.pageslide=function(e){var a=b.extend({},b.fn.pageslide.defaults,e);c.is(":visible")&&c.data("direction")!=a.direction?b.pageslide.close(function(){j(a.href,a.iframe);k(a.direction,a.speed)}):(j(a.href,a.iframe),c.is(":hidden")&&k(a.direction,a.speed));c.data(a)};b.pageslide.close=function(c){var a=b("#pageslide"),d=a.outerWidth(!0),f=a.data("speed"),g={},i={};if(!a.is(":hidden")&&!h){h=!0;switch(a.data("direction")){case "left":g["margin-left"]="+="+d;i.right="-="+d;break;default:g["margin-left"]="-="+d,i.left="-="+d}a.animate(i,f);l.animate(g,f,function(){a.hide();h=!1;"undefined"!=typeof c&&c()})}};c.click(function(b){b.stopPropagation()});b(document).bind("click keyup",function(e){"keyup"==e.type&&27!=e.keyCode||c.is(":visible")&&!c.data("modal")&&b.pageslide.close()})})(jQuery);
  845. </script>
  846. <script>
  847. $(document).ready(function() {
  848. $(".open, .impatient").pageslide();
  849. });
  850. </script>
  851.  
  852.  
  853.  
  854. <!----- ENTRIES ----->
  855.  
  856. <div id="posts">
  857.  
  858. {block:Posts}
  859. <div class="entries">
  860.  
  861. {block:Text}
  862. {block:Title}
  863. <h1><a href="{Permalink}">{Title}</a></h1>
  864. {/block:Title}
  865. {Body}
  866. {/block:Text}
  867.  
  868.  
  869. {block:Photo}
  870. {block:if400px}
  871. <a href="{Permalink}"><img src="{PhotoURL-400}" alt="{PhotoAlt}"/></a>
  872. {/block:if400px}
  873. {block:if500px}
  874. <a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
  875. {/block:if500px}
  876.  
  877. {block:Caption}
  878. <div class="caption">{Caption}</div>
  879. {/block:Caption}
  880. {/block:Photo}
  881.  
  882.  
  883. {block:Photoset}
  884. {block:if400px}
  885. {Photoset-400}
  886. {/block:if400px}
  887. {block:if500px}
  888. {Photoset-500}
  889. {/block:if500px}
  890.  
  891. {block:Caption}
  892. <div class="caption">{Caption}</div>
  893. {/block:Caption}
  894. {/block:Photoset}
  895.  
  896.  
  897. {block:Quote}
  898. {block:Source}
  899. <div id="source">{Source}</div>
  900. {/block:Source}
  901.  
  902. <div class="quote">❝ {Quote} ❞</div>
  903. {/block:Quote}
  904.  
  905.  
  906. {block:Link}
  907. <h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>
  908.  
  909. {block:Description}
  910. {Description}
  911. {/block:Description}
  912. {/block:Link}
  913.  
  914.  
  915. {block:Chat}
  916. {block:Title}<h1>{Title}</h1>{/block:Title}
  917.  
  918. {block:Lines}
  919. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  920. {/block:Lines}
  921. {/block:Chat}
  922.  
  923.  
  924. {block:Video}
  925. {block:if400px}
  926. {Video-400}
  927. {/block:if400px}
  928. {block:if500px}
  929. {Video-500}
  930. {/block:if500px}
  931.  
  932. {block:Caption}
  933. <div class="caption">{Caption}</div>
  934. {/block:Caption}
  935. {/block:Video}
  936.  
  937.  
  938. {block:Audio}
  939. <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}</div></div>
  940. <div class="audiodata"><br>{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br><b>{Artist}</b>{/block:Artist}</div>
  941.  
  942. {block:Caption}
  943. <span class="caption">{Caption}</span>
  944. {/block:Caption}
  945. {/block:Audio}
  946.  
  947.  
  948. {block:Answer}
  949. <div id="asker">{Asker}</div>
  950. <div id="asked">{Question}</div>
  951. <div id="answer">{Answer}</div>
  952. {/block:Answer}
  953.  
  954.  
  955. <!----- DATE/NOTES/TAGS ----->
  956.  
  957.  
  958. {block:IndexPage}
  959. <div class="info">{block:Date}<a href="{Permalink}">{DayOfMonth} {ShortMonth}</a>{/block:Date}&nbsp;{block:NoteCount} +{NoteCount}{/block:NoteCount}</div>
  960. <div class="tags">{block:HasTags}{block:Tags}#<a href="/tagged/{Tag}">{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}</div>
  961. {/block:IndexPage}
  962.  
  963. {block:PermalinkPage}
  964. <div class="info">{block:Date}Posted on the {DayOfMonth}{DayOfMonthSuffix} of {Month}, {Year}{/block:Date}&nbsp;{block:NoteCount}with {NoteCountwithLabel}{/block:NoteCount}</div>
  965. <div class="tags">{block:HasTags}{block:Tags}#<a href="/tagged/{Tag}">{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}</div>
  966. <div class="info" style="margin-top:5px">{block:ContentSource}by: <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource} {block:RebloggedFrom} &nbsp; via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</div>
  967. {/block:PermalinkPage}
  968.  
  969. </div>
  970. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  971. <script type="text/javascript">
  972. $(window).load(function () {
  973. $('#posts').masonry({
  974. itemSelector : ".entries",
  975. },
  976. function() { $('#posts').masonry({ appendedContent: $(this) }); }
  977. );
  978. });
  979. </script>
  980. {/block:Posts}
  981.  
  982.  
  983.  
  984. {block:PermalinkPage}
  985. {block:PostNotes}
  986. <div id="notes">{PostNotes}</div>
  987. {/block:PostNotes}
  988. {/block:permalinkpage}
  989.  
  990.  
  991. </div>
  992.  
  993.  
  994.  
  995. <div id="credit">
  996. <a href="https://aryasnark.tumblr.com"><img src="http://static.tumblr.com/ktebk5j/KQDn13fzc/logo.png" height="25"></a>
  997. </div>
  998.  
  999.  
  1000.  
  1001.  
  1002.  
  1003. </body>
  1004. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!