API tools faq
paste
Advertisement
dylaenobriens

Theme #60: Time Bomb

dylaenobriens
Apr 11th, 2014
272
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.71 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.  
  3. <!-- theme #60 by alexgaeskarth
  4. do not steal or i will eat you -->
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  7.  
  8. <!--click panel javascript-->
  9.  
  10. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  11. </script>
  12. <script>
  13. $(document).ready(function(){
  14. $("#title").click(function(){
  15. $("#panel").slideToggle("slow");
  16. });
  17. });
  18. </script>
  19.  
  20. <head>
  21.  
  22. <title>{Title}</title>
  23.  
  24. {block:Description}<meta name="description" content="{MetaDescription}"/>
  25. {/block:Description}
  26. <link rel="shortcut icon" href="{Favicon}" />
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  28.  
  29. <meta name="color:Bg" content="#ffffff">
  30. <meta name="color:Link" content="#bbb8b8">
  31. <meta name="color:Text" content="#9a9a9a">
  32. <meta name="color:Ask" content="#fcfcfc">
  33. <meta name="color:Hover" content="#eeeeee">
  34. <meta name="color:Accent" content="#e7e7e7">
  35. <meta name="color:Scrollbar" content="#d6d5d5">
  36. <meta name="color:Bold Text" content="#8d8c8c">
  37. <meta name="color:selection" content="#f7f7f7">
  38.  
  39.  
  40. <meta name="image:sidebar" content=""/>
  41.  
  42. <meta name="text:link 1" content="">
  43. <meta name="text:link 1 url" content="/">
  44. <meta name="text:link 2" content="">
  45. <meta name="text:link 2 url" content="/">
  46. <meta name="text:link 3" content="">
  47. <meta name="text:link 3 url" content="/">
  48. <meta name="text:link 4" content="">
  49. <meta name="text:link 4 url" content="/">
  50. <meta name="text:link 5" content="">
  51. <meta name="text:link 5 url" content="/">
  52.  
  53. <meta name="if:Cursor" content="1">
  54. <meta name="if:500pxPosts" content="1">
  55. <meta name="if:400pxPosts" content="0">
  56.  
  57.  
  58. <style type="text/css">
  59.  
  60.  
  61. /*--scrollbar--*/
  62.  
  63. ::-webkit-scrollbar-thumb:vertical {border:2px solid #fff;height:12px; background-color:{color:scrollbar};}
  64. ::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
  65. ::-webkit-scrollbar {background-color:{color:scrollbar};height:7px;width:12px;border:5px solid #fff;}
  66. ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{background-color:{color:scrollbar};display:block;height:8px;border-right:2px solid #fff;border-left:2px solid #fff;
  67. }
  68. /*--body--*/
  69.  
  70.  
  71. body {
  72. margin:0px;
  73. font-style:none;
  74. background-color:{color:bg};
  75. font-family:arial;
  76. color:{color:text};
  77. font-size:8px;
  78. }
  79.  
  80.  
  81. a {
  82. color:{color:Link};
  83. text-decoration:none;
  84. -webkit-transition: all 0.6s ease;
  85. -moz-transition: all 0.6s ease;
  86. -o-transition: all 0.6s ease
  87. }
  88.  
  89. a:hover {
  90. color:{color:hover};
  91. text-decoration:none;
  92. -webkit-transition: all 0.8s ease-out;
  93. -moz-transition: all 0.8s ease-out;
  94. transition: all 0.8s ease-out;
  95. }
  96.  
  97. img {
  98. max-width:100%;
  99. border:none;
  100. }
  101.  
  102. blockquote {
  103. padding-left:5px;
  104. border-left:2px solid {color:accent};
  105. background:#eee;
  106. padding:7px;
  107. }
  108.  
  109. h1 {
  110. font-size:15px;
  111. line-height:110%;
  112. text-align:Center;
  113. font-style:none;
  114. padding-bottom:3px;
  115. color:#000;
  116. border-bottom:3px solid {color:Accent};
  117. }
  118.  
  119. h1 a {
  120. color:#000;
  121. }
  122.  
  123. h2 {
  124. text-align:left;
  125. font-size:15px;
  126. line-height:110%;
  127. font-style:none;
  128. color:#000;
  129. }
  130.  
  131. b {
  132. color:{color:Bold Text};
  133. }
  134.  
  135. ::selection {
  136. background:{color:selection};
  137. }
  138.  
  139. pre {
  140. padding:5px;
  141. background:#eee;
  142. }
  143.  
  144. /*--Cursor code--*/
  145.  
  146. {block:ifCursor}
  147.  
  148. body, a{cursor:url("http://i.imgur.com/2qleX.jpg"), auto !important; }
  149.  
  150. a:hover{cursor:url("http://i.imgur.com/IepP2.jpg"), auto !important;}
  151.  
  152. {/block:ifCursor}
  153.  
  154. /*--title--*/
  155.  
  156. #title {
  157. font-weight:bold;
  158. font-size:15px;
  159. margin-top:5px;
  160. cursor:help;
  161. padding-bottom:3px;
  162. color:#000;
  163. border-bottom:3px solid {color:Accent};
  164. }
  165.  
  166. #panel {
  167. display:none;
  168. }
  169.  
  170.  
  171. /*--sidebar--*/
  172.  
  173. #sidebar {
  174. position:fixed;
  175. width:200px;
  176. text-align:left;
  177. margin-left:170px;
  178. margin-top:130px;
  179. }
  180.  
  181. #sidebarimage {
  182. width:200px;
  183. }
  184.  
  185. #sidebarimage img {
  186. width:200px;
  187. }
  188.  
  189. /*--links--*/
  190.  
  191. #links {
  192. margin-top:5px;
  193. font-family:'arial';
  194. text-transform:lowercase;
  195. text-align:left;
  196. font-weight:bold;
  197. }
  198.  
  199. #links a{
  200. color:#000;
  201. font-size:9px;
  202. display: inline-block;
  203. overflow: hidden;
  204. vertical-align: top;
  205. -webkit-perspective: 600px;
  206. -moz-perspective: 600px;
  207. -o-perspective: 600px;
  208. -ms-perspective: 600px;
  209. perspective: 600px;
  210. -webkit-perspective-origin: 50% 50%;
  211. -moz-perspective-origin: 50% 50%;
  212. -o-perspective-origin: 50% 50%;
  213. -ms-perspective-origin: 50% 50%;
  214. perspective-origin: 50% 50%;
  215. }
  216.  
  217.  
  218. #links a span{
  219. display: block;
  220. position: relative;
  221. padding: 0 2px;
  222. -webkit-transition: all 400ms ease;
  223. -moz-transition: all 400ms ease;
  224. -o-transition: all 400ms ease;
  225. -ms-transition: all 400ms ease;
  226. transition: all 400ms ease;
  227. -webkit-transform-origin: 50% 0%;
  228. -moz-transform-origin: 50% 0%;
  229. -o-transform-origin: 50% 0%;
  230. -ms-transform-origin: 50% 0%;
  231. transform-origin: 50% 0%;
  232. -webkit-transform-style: preserve-3d;
  233. -moz-transform-style: preserve-3d;
  234. -o-transform-style: preserve-3d;
  235. -ms-transform-style: preserve-3d;
  236. transform-style: preserve-3d;
  237. }
  238.  
  239. #links a:hover span {
  240. background: #000;
  241. -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  242. -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  243. -o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  244. -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  245. transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  246. }
  247.  
  248. #links a span:after {
  249. content: attr(data-title);
  250. display: block;
  251. position: absolute;
  252. left:0;
  253. top:0;
  254. padding:0 2px;
  255. color:#fff;
  256. background:#000;
  257. -webkit-transform-origin: 50% 0%;
  258. -moz-transform-origin: 50% 0%;
  259. -o-transform-origin: 50% 0%;
  260. -ms-transform-origin: 50% 0%;
  261. transform-origin: 50% 0%;
  262. -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  263. -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  264. -o-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  265. -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  266. transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  267. }
  268.  
  269. /*--description--*/
  270.  
  271. #description {
  272. margin-top:5px;
  273. font-family:'arial';
  274. font-size:9px;
  275. text-align:justify;
  276. }
  277.  
  278. #description a {
  279. color:{color:accent};
  280. }
  281.  
  282. /*--pagination--*/
  283.  
  284. #pagination {
  285. text-align:right;
  286. margin-top:5px;
  287. font-size:9px;
  288. text-transform:lowercase;
  289. font-family:arial;
  290. }
  291.  
  292. #pagination a{
  293. color:{color:Link};
  294. }
  295.  
  296. #pagination a:hover {
  297. color:{color:Hover};
  298. }
  299.  
  300. /*--posts--*/
  301.  
  302. {block:if500pxPosts}
  303.  
  304. #posts {
  305. width:500px;
  306. margin-bottom:10px;
  307. padding:1px;
  308. font-size:11px;
  309. color:{color:Text};
  310. line-height:100%;
  311. text-align:justify;
  312. }
  313.  
  314. {/block:if500pxPosts}
  315.  
  316. {block:if400pxPosts}
  317.  
  318. #posts {
  319. width:400px;
  320. margin-bottom:10px;
  321. padding:1px;
  322. font-size:11px;
  323. color:{color:Text};
  324. line-height:100%;
  325. text-align:justify;
  326. }
  327.  
  328. {/block:if400pxPosts}
  329.  
  330. #postscontainer {
  331. margin-bottom:20px;
  332. padding:1px;
  333. margin-left:450px;
  334. margin-top:55px;
  335. }
  336.  
  337.  
  338.  
  339.  
  340. #info {
  341. background-color:#000;
  342. padding:5px;
  343. font-family:'trebuchet ms';
  344. text-align:left;
  345. text-transform:uppercase;
  346. margin-bottom:10px;
  347. margin-top:10px;
  348. letter-spacing:1px;
  349. font-size:7px;
  350. padding-top:4px;
  351. color:#fff;
  352. }
  353.  
  354. #info a {
  355. color:#fff;
  356. }
  357.  
  358.  
  359. /*--tags--*/
  360.  
  361. #tags {
  362. font-family:trebuchet ms;
  363. width:490px;
  364. margin-left:0px;
  365. margin-top:2px;
  366. font-size:7px;
  367. color:#fff:
  368. }
  369.  
  370. #tags a {
  371. color:#fff;
  372. }
  373.  
  374.  
  375. #tags a:hover {
  376. color:{color:Hover};
  377. }
  378.  
  379. /*--asks--*/
  380.  
  381. #ask {
  382. padding:10px;
  383. background-color:{color:Ask};
  384. color:#fff;
  385. }
  386.  
  387. #ask a {
  388. color:#fff;
  389. }
  390.  
  391. /*--audio--*/
  392.  
  393. .newplayerbutton {
  394. position: relative;
  395. width: 28px;
  396. height: 27px;
  397. overflow: hidden;
  398. }
  399.  
  400. .playerbuttonhug {
  401. position: absolute;
  402. top: -12px;
  403. left: -8px;
  404. }
  405.  
  406.  
  407. .tumblr_audio_player {
  408. border: none;
  409. padding: 0px;
  410. margin: 0px;
  411. height: 53px;
  412. width: 500px;
  413. }
  414.  
  415. .playerbuttonbg {
  416. position: absolute;
  417. left: 25px;
  418. top: 20px;
  419. width: 28px;
  420. height: 28px;
  421. background-color: #fff;
  422. padding: 10px;
  423. -webkit-border-radius: 40px;
  424. -moz-border-radius: 40px;
  425. border-radius: 40px;
  426. opacity: .4;
  427. filter: alpha(opacity=40);
  428. -moz-opacity: 0.4;
  429. -khtml-opacity: 0.4;
  430. transition: opacity .7s ease-in-out;
  431. -moz-transition: opacity .7s ease-in-out;
  432. -webkit-transition: opacity .7s ease-in-out;
  433. }
  434.  
  435. .playerbuttonbg:hover {
  436. opacity: 1;
  437. filter: alpha(opacity=100);
  438. -moz-opacity: 1;
  439. -khtml-opacity: 1;
  440. }
  441.  
  442. .audioimgwrapper {
  443. position: absolute;
  444. left: 10px;
  445. top: 5px;
  446. -webkit-border-radius: 50px;
  447. -moz-border-radius: 50px;
  448. border-radius: 50px;
  449. overflow: hidden;
  450. width: 78px;
  451. height: 78px;
  452. }
  453.  
  454. .audioimgwrapper img {
  455. width: 100%;
  456. height: auto;
  457. -webkit-border-radius: 50px;
  458. -moz-border-radius: 50px;
  459. border-radius: 50px;
  460. }
  461.  
  462. .trackdetails {
  463. width: auto;
  464. display:inline-block;
  465. margin-left: 100px;
  466. margin-top:10px;
  467. min-height: 85px;
  468. line-height:150%;
  469. }
  470.  
  471. .audiowrapper {
  472. position: relative;
  473. display:inline-block;
  474. background-color:#000;
  475. width:100%;
  476. height:88px;
  477. color:#fff;
  478. }
  479.  
  480. /*--credit--*/
  481.  
  482. #credit {
  483. right:2px;
  484. bottom:0px;
  485. font-size:9px;
  486. padding:5px;
  487. text-transform:uppercase;
  488. position:fixed;
  489. -webkit-transition: all 0.5s ease-out;
  490. -moz-transition: all 0.5s ease-out;
  491. transition: all 0.5s ease-out;
  492. }
  493.  
  494. /*--tooltips--*/
  495.  
  496. #s-m-t-tooltip {
  497. max-width:300px;
  498. padding:3px 4px 5px 4px;
  499. margin:20px 0px 0px 20px;
  500. background-color:{color:accent}; /* change the background color */
  501. font-family:arial; /* change the font */
  502. font-size:9px; /* change the font size */
  503. font-weight:bold;
  504. text-transform:lowercase; /* can be uppercase, lowercase, none*/
  505. color:white; /* change the text color */
  506. z-index:999999999999999999999999999999999999;
  507. }
  508.  
  509. {CustomCSS}
  510.  
  511. </style></head>
  512.  
  513. <!--tooltips javascript-->
  514.  
  515. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  516.  
  517. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  518.  
  519. <script>
  520.  
  521. (function($){
  522.  
  523. $(document).ready(function(){
  524.  
  525. $("a[title]").style_my_tooltips({
  526.  
  527. tip_follows_cursor:true,
  528.  
  529. tip_delay_time:90,
  530.  
  531. tip_fade_speed:600,
  532.  
  533. attribute:"title"
  534.  
  535. });
  536.  
  537. });
  538.  
  539. })(jQuery);
  540.  
  541. </script>
  542.  
  543. <body>
  544.  
  545. <div id="sidebar">
  546. <div id="sidebarimage">
  547. <a title="home" href="/"><img src="{image:sidebar}"></div></a>
  548.  
  549. <div id="title">{title}</div>
  550. <div id="panel">
  551. <div id="links">
  552. <a href="{text:link 1 url}"><span data-title="{text:link 1}"</span>{text:link 1}</a>
  553. <a href="{text:link 2 url}"><span data-title="{text:link 2}"</span>{text:link 2}</a>
  554. <a href="{text:link 3 url}"><span data-title="{text:link 3}"</span>{text:link 3}</a>
  555. <a href="{text:link 4 url}"><span data-title="{text:link 4}"</span>{text:link 4}</a>
  556. <a href="{text:link 5 url}"><span data-title="{text:link 5}"</span>{text:link 5}</a>
  557. </div></div>
  558.  
  559. <div id="description">{description}</div>
  560.  
  561.  
  562. {block:Pagination}
  563. <div id="pagination">
  564.  
  565. {block:PreviousPage}<a href="{PreviousPage}">Prev</a>{/block:PreviousPage}
  566. {block:NextPage} - <a href="{NextPage}">Next</a>{/block:NextPage}
  567. </div>{/block:Pagination}
  568.  
  569. </div></div>
  570.  
  571.  
  572. <div id="postscontainer">
  573.  
  574. {block:Posts}
  575.  
  576. <div id="posts">
  577.  
  578.  
  579. {block:Text}{block:Title}<h1>{Title}{/block:Title}</h1>{Body}{/block:Text}
  580.  
  581.  
  582. {block:Photo}{LinkOpenTag}
  583.  
  584. {block:if500pxPosts}
  585. <img src="{PhotoURL-500}">
  586. {/block:if500pxPosts}
  587.  
  588. {block:if400pxPosts}
  589. <img src="{PhotoURL-400}">
  590. {/block:if400pxPosts}
  591.  
  592. {LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  593.  
  594. {block:Photoset}
  595.  
  596. {block:if500pxPosts}
  597. {Photoset-500}
  598. {/block:if500pxPosts}
  599.  
  600. {block:if400pxPosts}
  601. {Photoset-400}
  602. {/block:if400pxPosts}
  603.  
  604. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  605. {block:Quote}<h2>{Quote}</h2>{block:Source} &#8212;{Source}{/block:Source}{/block:Quote}
  606.  
  607. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  608.  
  609. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  610.  
  611. {block:Audio}{block:AudioPlayer}
  612. <div class="audiowrapper">
  613. {block:AlbumArt}
  614. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  615. {/block:AlbumArt}
  616.  
  617. <div class="playerbuttonbg">
  618. <div class="newplayerbutton">
  619. <div class="playerbuttonhug">
  620.  
  621. {AudioPlayerWhite}
  622.  
  623. </div>
  624. </div>
  625. </div>
  626.  
  627. <div class="trackdetails">
  628.  
  629. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}<br/>
  630. {block:Artist}<b>Artist:</b> {Artist}{/block:Artist}<br/>
  631. {block:Album}<b>Album:</b> {Album}{/block:Album}<br/>
  632. <b>{PlayCountWithLabel}</b>
  633.  
  634. </div>
  635. </div>
  636. {/block:AudioPlayer}
  637.  
  638. {block:Caption}{Caption}{/block:Caption}{/block:Audio}
  639.  
  640. {block:Video}
  641.  
  642. {block:if500pxPosts}
  643. {Video-500}
  644. {/block:if500pxPosts}
  645.  
  646. {block:if400pxPosts}
  647. {Video-400}
  648. {/block:if400pxPosts}
  649.  
  650. {block:Caption}{Caption}{/block:Caption}{/block:Video}
  651.  
  652.  
  653. {block:Answer}<div id="ask"><span style="font-family:arial;font-size:15px;font-weight:bold;color:#fff;">{Asker}</span>: {Question}</div> {Answer}{/block:Answer}
  654.  
  655. <div id="info">{block:Date} <a href="{Permalink}">
  656. {DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</a></a>{/block:Date} - {block:RebloggedFrom} <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
  657. and {block:ContentSource} <a href="{SourceURL}"><a href="{SourceURL}">source</a>{/block:ContentSource}{/block:RebloggedFrom} with <a href="{Permalink}">
  658. {NoteCountWithLabel}</a>
  659. {block:HasTags} <div id="tags">tags:{block:Tags} <a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}</div>
  660.  
  661.  
  662. </div>
  663.  
  664. {/block:Posts}
  665.  
  666. {block:PostNotes}{PostNotes}</div>{/block:PostNotes}
  667. {/block:Posts}
  668.  
  669. </div>
  670.  
  671. <div id="credit"><a href="http://alexgaeskarth.tumblr.com/"><img src="http://static.tumblr.com/ujmsumm/TJamv4jm6/sg.png" width="40px;"></div></a>
  672. </body>
  673. </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!