API tools faq
paste
Advertisement
ciralismthemes

Thunderstorm

ciralismthemes
Jun 14th, 2017
2,824
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  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. Thunderstorm
  12. Theme by Caroline
  13. http://ciralism.tumblr.com
  14.  
  15. This theme was inspired by web designer Brandon Termini, whose work I greatly admire. I simply adapted his design for a menu interaction into a Tumblr theme that (I hope) you can enjoy!
  16.  
  17. ---->
  18.  
  19. <!-- customization options -->
  20. <meta name="if:hide captions" content="1"/>
  21. <meta name="if:center description" content="0"/>
  22. <meta name="if:rounded corners" content="1"/>
  23. <meta name="if:show tags" content="1"/>
  24.  
  25. <meta name="select:body font" content="Open Sans"/>
  26. <meta name="select:body font" content="Work Sans"/>
  27. <meta name="select:body font" content="Times"/>
  28. <meta name="select:body font" content="Baskerville"/>
  29. <meta name="select:body font" content="Helvetica"/>
  30.  
  31. <meta name="image:header" content=""/>
  32.  
  33. <meta name="color:text" content="#ffffff"/>
  34. <meta name="color:background" content="#303030"/>
  35. <meta name="color:heading" content="#ffffff"/>
  36. <meta name="color:post background" content="#ffffff"/>
  37. <meta name="color:link" content="#ffffff"/>
  38. <meta name="color:link hover" content="#888888"/>
  39. <meta name="color:menu background" content="#dddddd"/>
  40. <meta name="color:accent2" content="#dddddd"/>
  41. <meta name="color:accent3" content="#dddddd"/>
  42. <meta name="color:accent4" content="#dddddd"/>
  43. <meta name="color:menu button" content="#444444"/>
  44. <meta name="color:menu text" content="#ffffff"/>
  45.  
  46. <meta name="text:link1url" content="link 1 url"/>
  47. <meta name="text:link 1" content="link 1"/>
  48. <meta name="text:link2url" content="link 2 url"/>
  49. <meta name="text:link 2" content="link 2"/>
  50. <meta name="text:link3url" content="link 3 url"/>
  51. <meta name="text:link 3" content="link 3"/>
  52. <meta name="text:link4url" content="link 4 url"/>
  53. <meta name="text:link 4" content="link 4"/>
  54. <meta name="text:link5url" content="link 5 url"/>
  55. <meta name="text:link 5" content="link 5"/>
  56. <meta name="text:link6url" content="link 6 url"/>
  57. <meta name="text:link 6" content="link 6"/>
  58. <meta name="text:link7url" content="link 7 url"/>
  59. <meta name="text:link 7" content="link 7"/>
  60. <meta name="text:link8url" content="link 8 url"/>
  61. <meta name="text:link 8" content="link 8"/>
  62.  
  63.  
  64. <!--external scripts and fonts -->
  65. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"><link href='https://fonts.googleapis.com/css?family=Work+Sans:400,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'><link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com/css?family=Playfair+Display:700i,900" rel="stylesheet">
  66. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  67. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  68. <script src="https://use.fontawesome.com/c35c91ae01.js"></script>
  69.  
  70.  
  71. <!-- style rules -->
  72. <style type="text/css">
  73. /* BASICS */
  74. body {background-color:{color:menu background};font-family:Open Sans,sans-serif;color:{color:text};font-size:11px;-webkit-font-smoothing:antialiased;line-height:1.618;}
  75. a {color:{color:link};text-decoration:none;-webkit-transition-duration:600ms;-o-transition-duration:600ms;-moz-transition-duration:600ms;-ms-transition-duration:600ms;}
  76. a:hover, a:active {
  77. color:{color:link hover};
  78. }
  79. h1 {text-align:left;font-size:1.5em;font-weight:700;letter-spacing:.03rem;color:{color:heading};padding:0;}
  80. #tumblr_controls,.tmblr-iframe {transform:scale(.8);-webkit-transform:scale(.8);position:fixed;top:0;right:-20px!important;filter:invert(100%);-webkit-filter:invert(100%);opacity:.3;}
  81. blockquote {text-align:left!important;border-left:2px solid {color:menu background};padding:2px 7px;}
  82. blockquote img {max-width:100%;height:auto;}
  83. b, em {font-weight:bold;font-size:11px;color:{color:accent};}
  84.  
  85. /* HEADER */
  86.  
  87. #header {width:470px;margin:100px auto;padding:15px;background:{color:postbackground};border:1px solid #f1f1f1;{block:ifroundedcorners}overflow:hidden;border-radius:5px;{/block:ifroundedcorners}position:relative;}
  88.  
  89. .headerimg {border:1px solid rgba(0,0,0,.08);width:calc(100% + 30px);margin-left:-15px;margin-top:-17px;height:200px;overflow:hidden;margin-bottom:15px;}
  90.  
  91. .headerimg img {width:100%;}
  92.  
  93. #head-links {width:470px;padding:10px 15px 0 15px;margin-left:-15px;border-top:1px solid #f1f1f1;}
  94.  
  95. #head-links a {display:inline-block;margin-right:20px;font-size:.95em;font-weight:bold;color:#343434;letter-spacing:.02rem;}
  96.  
  97. #head-links a:hover {color:{color:link hover};}
  98.  
  99. .title {color:{color:heading};font-family:Playfair Display;letter-spacing:.05rem;display:block;font-size:25px;font-weight:600;font-style:italic;{block:ifnotcenterdescription}text-align:left;{/block:ifnotcenterdescription}{block:ifcenterdescription}text-align:center;{/block:ifcenterdescription}}
  100.  
  101. .desc::before {content:"";position:absolute;left:15px;background:{color:accent3};width:150px;height:1px;opacity:.4;margin-top:-10px;}
  102.  
  103. .desc {line-height:180%;font-size:13px;font-weight:300;letter-spacing:.02rem;{block:ifnotcenterdescription}text-align:left;{/block:ifnotcenterdescription}{block:ifcenterdescription}text-align:center;{/block:ifcenterdescription}margin-top:23px;color:#000;opacity:.9;font-family:Work Sans;}
  104.  
  105. /* MENU BUTTON */
  106. #button {font-family:Open Sans;padding:10px;background:{color:menu button};color:{color:menu text};text-transform:uppercase;font-size:10px;letter-spacing:2px;width:55px;text-align:left;font-weight:bold;position:fixed;left:15px;top:15px;border:1px solid {color:menu background};cursor:pointer;transition-duration:200ms!important;padding-left:40px;z-index:99999;{block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}}
  107.  
  108. #button:hover {color:{color:menu text};}
  109.  
  110. #button:active {box-shadow:none;}
  111.  
  112. .bar, .bar::before, .bar::after {transition-duration:300ms;}
  113.  
  114. .bar {width:10px;background:{color:menu text};position:absolute;height:1px;margin-top:4px;margin-left:-15px;}
  115. .bar::before {content:"";margin-top:3px;width:10px;background:{color:menu text};position:absolute;height:1px;}
  116. .bar::after {content:"";margin-top:6px;width:10px;background:{color:menu text};position:absolute;height:1px;}
  117.  
  118. #button:hover .bar::before {background:{color:accent2};width:8px;}
  119. #button:hover .bar::after {background:{color:link hover};}
  120. #button:hover .bar {background:{color:accent3};}
  121.  
  122.  
  123. /* Credit // DO NOT TOUCH */
  124. #credit {z-index:999999;position:fixed;text-transform:uppercase;font-size:7px;font-style:normal;right:10px;bottom:5px;letter-spacing:1px;font-family:Roboto,sans-serif;font-weight:900;width:41px;overflow:hidden;transition-delay:800ms;-webkit-transition-delay:800ms;-moz-transition-delay:800ms;-ms-transition-delay:800ms;-o-transition-delay:800ms;}
  125. #credit .l {font-weight:300!important;display:inline;}
  126. #credit:hover {color:#000;width:78px;transition-delay:0ms;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;-ms-transition-delay:0ms;-o-transition-delay:0ms;}
  127. #credit .n {color:#111;text-transform:lowercase;font-weight:normal;font-style:italic;display:block;width:78px;margin-bottom:-9px;-webkit-transition-duration:400ms;-o-transition-duration:400ms;-moz-transition-duration:400ms;-ms-transition-duration:400ms;transition-delay:400ms;-webkit-transition-delay:400ms;-moz-transition-delay:400ms;-ms-transition-delay:400ms;-o-transition-delay:400ms;}
  128. .n::after {width:25px;height:1px;content:"";position:absolute;background-color:transparent;margin-top:4px;margin-left:3px;-webkit-transition-duration:400ms;-o-transition-duration:400ms;-moz-transition-duration:400ms;-ms-transition-duration:400ms;transition-delay:0ms;-webkit-transition-delay:0ms;-moz-transition-delay:0ms;-ms-transition-delay:0ms;-o-transition-delay:0ms;}
  129. #credit:hover .n::after {box-shadow:inset 24px 0px 0px 0px {color:accent2};transition-delay:800ms;-webkit-transition-delay:800ms;-moz-transition-delay:800ms;-ms-transition-delay:800ms;-o-transition-delay:800ms;}
  130. #credit:hover .n {margin-bottom:0px;}
  131.  
  132. /* POSTS */
  133. .container {width:500px;margin:0px auto;padding-bottom:200px;margin-top:-50px;}
  134.  
  135. .post {width:470px;line-height:1.618;font-size:12px;font-weight:300;margin-top:200px;position:relative;padding:15px;background:{color:post background};border:1px solid rgba(0,0,0,.07);font-size:12px;letter-spacing:.02rem;font-family:{select:body font};{block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}}
  136.  
  137. .post blockquote {
  138. line-height:120%;font-weight:400;
  139. }
  140.  
  141. .post h1 {margin-top:0;padding-top:0;padding-bottom:15px;border-bottom:1px solid rgba(0,0,0,.08);width:485px;padding-left:15px;margin-left:-15px;font-style:italic;font-family:Playfair Display;}
  142.  
  143. .caption {
  144. font-size:11px;
  145. letter-spacing:.02rem;
  146. line-height:180%;
  147. text-align:left;
  148. color:{color:text};
  149. padding:10px;
  150. margin-top:10px;
  151. }
  152.  
  153. .caption * {display:inline;padding-left:3px;margin-left:0;}
  154.  
  155. .caption blockquote {padding:none;border:none;}
  156.  
  157. .quote {
  158. text-align:center;
  159. font-family:Serif;
  160. font-style:italic;
  161. font-weight:bold;
  162. font-size:12px;
  163. }
  164. .source{
  165. text-align:center;
  166. text-transform:uppercase;
  167. font-size:8px;
  168. letter-spacing:2px;
  169. font-weight:300;
  170. }
  171.  
  172. .linkpost_description{
  173. text-align:center;
  174. font-size:10px;
  175. letter-spacing:1px;
  176. }
  177. .lines {
  178. text-align:left;
  179. }
  180. .chatline {
  181. padding:5px 0px;
  182. }
  183. .label {
  184. font-weight:bold;
  185. font-size:.9em;
  186. }
  187.  
  188. .asker {display:block;font-weight:bold;font-size:12px;color:#000;opacity:.8;letter-spacing:.01rem;margin-bottom:3px;font-family:Playfair Display;font-style:italic;}
  189.  
  190. .question {display:block;border:1px solid #f3f3f3;padding:10px;{block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}text-align:center;font-size:13px;}
  191.  
  192. .answer {font-weight:normal;color:#000;opacity:.64;}
  193.  
  194.  
  195. .play_wrap {
  196. width:40px;
  197. height:40px;
  198. border-radius:50% 50%;
  199. background:#f1f1f1;
  200. border:1px solid {color:link hover};
  201. -webkit-border-radius:50% 50%;
  202. -webkit-transition-duration:400ms;
  203. -o-transition-duration:400ms;
  204. -moz-transition-duration:400ms;
  205. -ms-transition-duration:400ms;
  206. position:relative;
  207. display:block;
  208. margin:0 auto 15px auto;
  209. }
  210.  
  211. .player {
  212. overflow:hidden;
  213. width:25px;
  214. height:25px;
  215. margin-left:5px;
  216. margin-top:6px;
  217. position:absolute;
  218. opacity:.4;
  219. }
  220.  
  221. .audio {text-align:center;}
  222.  
  223. .audio_info {
  224. vertical-align:center;
  225. line-height:150%;
  226. padding:10px;
  227. border:1px solid #f3f3f3;background-color:#fff;
  228. }
  229. .audio_info li {
  230. list-style-type:none;
  231. text-align:center;
  232. margin-left:-40px;
  233. padding:0;
  234. }
  235. .audio_info li:nth-of-type(odd) {
  236. font-weight:bold;
  237. font-size:7px;
  238. text-transform:uppercase;
  239. letter-spacing:1px;
  240. }
  241. .audio_info h3 {
  242. text-transform:uppercase;
  243. font-size:10px;
  244. letter-spacing:1px;
  245. padding:0;
  246. margin:0;
  247. text-align:center;
  248. }
  249. .pagination {text-align:center;margin-top:150px;width:100%;font-size:8px;}
  250. .current_page, .jump_page:hover {font-weight:bold;}
  251. .jump_page, .current_page {padding:5px 8px;border-radius:50%;border:1px solid #f1f1f1;margin:5px;}
  252.  
  253. .info {
  254. display:block;
  255. letter-spacing:.04rem;
  256. font-size:10px;
  257. font-weight:500;
  258. margin-top:10px;
  259. text-align:left;
  260. color:#000;
  261. opacity:.64;
  262. width:470px;
  263. padding:10px 15px 0px 15px;
  264. margin-left:-15px;
  265. border-top:1px solid rgba(0,0,0,.125);
  266. }
  267.  
  268. .reblog_b {float:right;font-size:11px;}
  269.  
  270.  
  271. #notesname {padding:10px;position:absolute;margin-top:-70px;background:{color:accent2};color:rgba(255,255,255,.9);left:50%;font-weight:bold;text-transform:uppercase;font-size:12px;transform:translateX(-50%);{block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}}
  272.  
  273. #postnotes {display:block;color:black;opacity:.7;margin-top:200px;text-align:center;margin-left:-45px;}
  274.  
  275. #postnotes ol {color:black;list-style-type: none;}
  276.  
  277. #postnotes li {margin:15px 0px;}
  278.  
  279. #postnotes li:nth-of-type(even) {opacity:.5;}
  280.  
  281. #postnotes li a {font-weight:bold;}
  282.  
  283. #postnotes li a:hover {color:{color:link hover}}
  284.  
  285. #postnotes img {display:none;}
  286.  
  287. .photo-slideshow {width:470px;}
  288.  
  289. .permalink {position:absolute;margin-top:-122px;width:10px;height:10px;left:50%;margin-left:-11px;padding:5px;border-radius:50%;-webkit-border-radius:50%;border:1px solid {color:accent4};background:#ffffff;text-align:center;color:#999;font-size:10px;line-height:10px;}
  290.  
  291. .permalink:hover {color:#999;border-color:{color:link hover};}
  292.  
  293. .info-icon {padding-right:3px;}
  294. .info-element {padding-right:10px;}
  295.  
  296. .tags {display:block;margin-top:5px;}
  297.  
  298. .untag {margin-right:6px;}
  299.  
  300. .untag i {margin-right:4px;color:#ddd;}
  301.  
  302. /* MENU ANIMATION */
  303.  
  304. #bod {transition-duration:500ms;-webkit-transition-duration:500ms;-o-transition-duration:500ms;-moz-transition-duration:500ms;-ms-transition-duration:500ms;background:{color:background};z-index:9;top:0;left:0;padding-top:10px;height:calc(100%);overflow:scroll;position:fixed;width:100%;overflow-x:hidden;}
  305.  
  306. .slid {transform:perspective( 600px ) rotateY( 45deg ) scale(.7);left:50%!important;width:700px!important;margin-left:-350px;height:500px!important;top:50%!important;margin-top:-250px;{block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}}
  307.  
  308. .pre-bod {background:red;margin-left:-365px;width:700px;height:500px;position:fixed;opacity:0;left:50%;top:50%;{block:ifroundedcorners}border-radius:5px;{/block:ifroundedcorners}}
  309.  
  310. .one {background:{color:accent2};height:470px;margin-top:-235px;z-index:3;transition-duration:600ms;-webkit-transition-duration:600ms;-o-transition-duration:600ms;-moz-transition-duration:600ms;-ms-transition-duration:600ms;}
  311. .two {background:{color:accent3};height:440px;margin-top:-220px;margin-left:-380px;z-index:2;transition-duration:700ms;-webkit-transition-duration:700ms;-o-transition-duration:700ms;-moz-transition-duration:700ms;-ms-transition-duration:700ms;}
  312.  
  313. .open {opacity:.6;transform:perspective( 600px ) rotateY( 45deg ) scale(.7);}
  314.  
  315. #menu {left:calc(50% + 250px);position:fixed;height:300px;top:50%;margin-top:-150px;}
  316.  
  317. #menu .num, #menu a {display:block;}
  318.  
  319. .num {margin-top:35px;font-weight:bold;color:{color:accent2};}
  320.  
  321. #menu a {text-transform:uppercase;letter-spacing:2px;font-weight:700;font-size:10px;color:#000;opacity:.6;}
  322.  
  323. .line {background:#f1f1f1;width:1px;height:calc(100% + 220px);position:absolute;margin-top:-100px;z-index:-1;left:50%;}
  324.  
  325. </style>
  326.  
  327. </head>
  328. <body>
  329.  
  330. <a id="button"><div class="bar"></div>Menu</a>
  331.  
  332. <div id="menu">
  333. <span class="num">01</span>
  334. <a href="{text:link5url}">{text:link 5}</a>
  335. <span class="num">02</span>
  336. <a href="{text:link6url}">{text:link 6}</a>
  337. <span class="num">03</span>
  338. <a href="{text:link7url}">{text:link 7}</a>
  339. <span class="num">04</span>
  340. <a href="{text:link8url}">{text:link 8}</a>
  341. </div>
  342.  
  343.  
  344. <div class="pre-bod one"></div>
  345. <div class="pre-bod two"></div>
  346. <div id="bod">
  347.  
  348. <div id="header">
  349. <div class="headerimg"><img src="{image:header}"></div>
  350. <a class="title" href="/">{Title}</a>
  351. <div class="desc">{Description}</div>
  352. <div id="head-links">
  353. <a href="{text:link1url}">{text:link 1}</a>
  354. <a href="{text:link2url}">{text:link 2}</a>
  355. <a href="{text:link3url}">{text:link 3}</a>
  356. <a href="{text:link4url}">{text:link 4}</a>
  357.  
  358. </div>
  359. </div>
  360.  
  361. <div class="container">
  362. {block:Posts}<!-- {block:Noreblog_bgedFrom}{block:reblog_bgedFrom}{reblog_bParentName}{/block:reblog_bgedFrom}{/block:Noreblog_bgedFrom} -->{block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  363.  
  364. <article class="post">
  365.  
  366. <div class="line"></div>
  367.  
  368.  
  369. {block:Text}<a href="{Permalink}" class="permalink"><i class="fa fa-font"></i></a>{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  370.  
  371. {block:Photo}<a href="{Permalink}" class="permalink"><i class="fa fa-camera"></i></a>{LinkOpenTag}<img src="{PhotoURL-500}" width="470" alt="{PhotoAlt}">{LinkCloseTag}{block:IfHideCaptions}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfHideCaptions}{block:IfNotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfNotHideCaptions}{/block:Photo}
  372.  
  373. {block:Photoset}<a href="{Permalink}" class="permalink"><i class="fa fa-files-o"></i></a><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>{block:IfHideCaptions}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfHideCaptions}{block:IfNotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfNotHideCaptions}{/block:Photoset}
  374.  
  375. {block:Quote}<a href="{Permalink}" class="permalink"><i class="fa fa-quote-right"></i></a><div class="quote">{Quote}</div><div class="source">{Source}</div>{/block:Quote}
  376.  
  377. {block:Link}<a href="{Permalink}" class="permalink"><i class="fa fa-link"></i></a><h1><a href="{URL}" class="linkpost" {Target}>{Name}</a></h1>{block:Description}<div class="linkpost_description">{Description}</div>{/block:Description}{/block:Link}
  378.  
  379. {block:Chat}<a href="{Permalink}" class="permalink"><i class="fa fa-comment-o"></i></a>{block:Title}<h1>{Title}</h1>{/block:Title}<div class="lines">{block:Lines}<div class="chatline">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</div>{/block:Lines}</div>{/block:Chat}
  380.  
  381. {block:Video}<a href="{Permalink}" class="permalink"><i class="fa fa-video-camera"></i></a>{Video-400}{block:IfHideCaptions}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfHideCaptions}{block:IfNotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfNotHideCaptions}{/block:Video}
  382.  
  383. {block:Answer}<a href="{Permalink}" class="permalink"><i class="fa fa-envelope-o"></i></a><div class="question"><span class="asker">{Asker} </span>{Question}</div><div class="answer">{Answer}</div>{/block:Answer}
  384.  
  385. {block:Audio}<div class="audio"><a href="{Permalink}" class="permalink"><i class="fa fa-music"></i></a><div class="play_wrap">{block:AudioPlayer}<div class="player">{AudioPlayer}</div>{/block:AudioPlayer}</div></div><div class="audio_info">{block:TrackName}<h3>{TrackName}</h3>{/block:TrackName}<ul>{block:Album}<li>Album</li><li>{Album}</li>{/block:Album}{block:Artist}<li>Artist</li><li>{Artist}</li>{/block:Artist}{block:PlayCount}<li>Plays</li><li>{FormattedPlayCount}</li>{/block:PlayCount}</ul></div>{block:IfHideCaptions}{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfHideCaptions}{block:IfNotHideCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfNotHideCaptions}{/block:Audio}
  386.  
  387. <div class="info">{block:Date}<a href="{Permalink}"><span class="info-icon"><i class="fa fa-clock-o"></i></span> <span class="info-element">{TimeAgo}</span></a>{/block:Date} {block:NoteCount}<a href="{Permalink}"><span class="info-icon"><i class="fa fa-plus-square-o"></i></span> <span class="info-element">{NoteCountWithLabel}</span></a>{/block:NoteCount}{block:Date}<a class="reblog_b" href="{reblog_bURL}"><i class="fa fa-repeat"></i></a>{/block:Date}{block:ifshowtags}{block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}" class="untag"><i class="fa fa-tag"></i>{Tag}</a>{/block:Tags}</div>{/block:HasTags}{/block:ifshowtags}
  388. </div>
  389.  
  390.  
  391. </article>
  392. {/block:Posts}
  393. <article class="pagination">
  394. {Block:Pagination}
  395. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">&laquo;</a>{/block:PreviousPage}
  396.  
  397. {block:JumpPagination length="5"}{block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  398. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  399.  
  400. {block:NextPage}<a href="{NextPage}" class="jump_page">&raquo;</a>{/block:NextPage}
  401. {/block:Pagination}
  402. </article>
  403. {block:PostNotes}<div id="postnotes"><div id="notesname">Post Notes</div>{PostNotes-16}</div>{/block:PostNotes}</div></div>
  404.  
  405.  
  406. </div>
  407. <!---if you do anything to this you are the scum of the earth and I hope you choke--->
  408. <a href="http://ciralism.tumblr.com" id="credit">Ciralism<span class="l">themes</span><span class="n">by Caroline</span></a>
  409.  
  410. </div><!--end body--->
  411.  
  412.  
  413. </body>
  414.  
  415. <script>
  416. $("#button").click(function(){
  417. $('#bod').toggleClass('slid');
  418. $('.pre-bod').toggleClass('open');
  419. });
  420. $("#bod").click(function(){
  421. $('#bod').removeClass('slid');
  422. $('.pre-bod').removeClass('open');
  423. });
  424. $('.like_bbutton').click(function(){
  425. $('.like_b').toggleClass('likedd');
  426. });
  427. </script>
  428.  
  429. <script>
  430. $(document).ready(function(){
  431. $('.photo-slideshow').pxuPhotoset({
  432. lightbox: true,
  433. rounded: false,
  434. gutter: '5px',
  435. borderRadius: '0px',
  436. photoset: '.photo-slideshow',
  437. photoWrap: '.photo-data',
  438. photo: '.pxu-photo'
  439. });
  440. });
  441. </script>
  442.  
  443. <script>
  444. !function(a){a.fn.unnest=function(b){var d,e,f,g,h,c=a.extend({yourCaption:".caption",wrapName:".tumblr_parent",newCaptionUsername:!1,originalPostCaptionUsername:!1,tumblrAvatarClass:".tumblr_avatar",tumblrAvatars:!0,usernameColon:!0},b),i=c.wrapName.slice(1,c.wrapName.length),j=c.tumblrAvatarClass.slice(1,c.tumblrAvatarClass.length);a(c.yourCaption,this).each(function(){var b=!1,k=!1;a("a.tumblr_blog",this).length<=0&&(b=!0),a(this).find("blockquote").each(function(){a(this).prev().children(".tumblr_blog").length>0&&(a(this).addClass(i),d=a(this).parent().find("a.tumblr_blog").parent("p").html(),c.usernameColon||(d=d.slice(0,-1))),a(this).hasClass(i)&&(a(this).prepend(d),c.tumblrAvatars&&(g=a(this).prev().children("a.tumblr_blog").text(),a(this).prepend('<img src="http://api.tumblr.com/v2/blog/'+g+'.tumblr.com/avatar/30" class="'+j+'" />')))}),a(this).find("a.tumblr_blog:first-of-type").parent("p").remove(),a(c.wrapName,this).each(function(){a(this).parents(c.yourCaption).prepend(a(this))}),h=window.location.hostname;var l=a(this);a.getScript("http://"+h+"/api/read/json").complete(function(){e=l.contents(":not("+c.wrapName+")"),e.text().replace(/\s/g,"").length>0&&(k=l.clone().find(c.wrapName).remove().end().html(),e.remove(),c.newCaptionUsername||b?(f='<blockquote class="'+i+'">',c.tumblrAvatars&&(!b||b&&c.originalPostCaptionUsername)&&(f+='<img src="http://api.tumblr.com/v2/blog/'+h+'/avatar/30" class="'+j+'" />'),(!b||b&&c.originalPostCaptionUsername)&&(f+='<a class="tumblr_blog" href="/">'),(!b||b&&c.originalPostCaptionUsername)&&("undefined"!=typeof tumblr_api_read&&(h=tumblr_api_read.tumblelog.name),console.info(h),f+=h+"</a><p>"),f+=k+"</blockquote>",l.append(f)):l.append('<blockquote class="'+i+'">'+k+"</blockquote>"))})})}}(jQuery);
  445. </script>
  446.  
  447. <script>
  448. $('.post').unnest({
  449. yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
  450. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  451. newCaptionUsername: true, //if the user adds a new caption, following a series of captions, show their username above the caption
  452. originalPostCaptionUsername: true, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  453. tumblrAvatars: false, //”dashboard style” caption, have the avatar of the blog next to the username
  454. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  455. usernameColon: true //if turned to false, removes the colon at the end of usernames bc :) seriously :) hwy :)
  456. });
  457. </script>
  458.  
  459. </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!