API tools faq
paste
Advertisement
quirons

drive, seventeen

quirons
Jul 17th, 2015
57
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. DRIVE, C17 BY @QUIRONS.
  8. - don't repost or give away as your own
  9. - don't steal bits of the code
  10. - if you have any doubts/find bugs, feel free to send me a message
  11.  
  12. -->
  13.  
  14. {block:Description}
  15. <meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17.  
  18. <meta charset="utf-8">
  19. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23.  
  24. <!-- SCRIPTS -->
  25.  
  26. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  27. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("a[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:90,
  34. tip_fade_speed:600,
  35. attribute:"title"
  36. });
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <script type="text/javascript">
  42. /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
  43. $(document).ready(function() {
  44. function photosetResize() {
  45. $('iframe.photoset').each(function(){
  46. var newSize = 420;
  47. var newSrc = $(this).attr('src').replace('500',newSize);
  48. $(this).attr('src', newSrc).width(newSize);
  49. var high = $(this).css('height');
  50. var calculate = parseInt(high, 10)* newSize/500;
  51. $(this).css('height', calculate);
  52. });
  53. }
  54. photosetResize();
  55. });
  56. </script>
  57.  
  58. <!-- METAS -->
  59.  
  60. <meta name="color:background" content="#ffffff"/>
  61. <meta name="color:text" content="#000000"/>
  62. <meta name="color:posts" content="#fffffff"/>
  63. <meta name="color:info" content="#000000"/>
  64. <meta name="image:sidebar image" content=""/>
  65.  
  66. <meta name="text:Link1" content="Link 1"/>
  67. <meta name="text:Link2" content="Link 2"/>
  68. <meta name="text:Link3" content="Link 3"/>
  69. <meta name="text:URL1" content="URL 1"/>
  70. <meta name="text:URL2" content="URL 2"/>
  71. <meta name="text:URL3" content="URL 3"/>
  72.  
  73. <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  74. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic' rel='stylesheet' type='text/css'>
  75.  
  76. <style type="text/css">
  77.  
  78. /* -------- SCROLLBAR -------- */
  79.  
  80. ::-webkit-scrollbar {width: 2px;}
  81. ::-webkit-scrollbar-track {background:none;}
  82. ::-webkit-scrollbar-thumb {background:black;}
  83. ::-webkit-scrollbar-thumb:window-inactive {background: transparent;}
  84. ::-webkit-scrollbar-thumb:horizontal {display:none;}
  85.  
  86. /* -------- TOOLTIPS -------- */
  87.  
  88. #s-m-t-tooltip {
  89. max-width:300px;
  90. margin:15px;
  91. padding:5px;
  92. background-color:black;
  93. font-family:helvetica;
  94. font-size:12px;
  95. color:white;
  96. z-index:999999999999999999999999999999999999;
  97. }
  98.  
  99. /* -------- BASICS -------- */
  100.  
  101. body {
  102. color:{color:text};
  103. font-family:helvetica, arial, times;
  104. background-color:{color:background};
  105. font-size:11px;
  106. }
  107.  
  108. a {
  109. text-decoration:none;
  110. color:black;
  111. -webkit-transition: all .3s;
  112. -moz-transition: all .3s;
  113. -o-transition: all .3s;
  114. -ms-transition: all .3s;
  115. transition: all .3s;
  116. }
  117.  
  118. a:hover {
  119. opacity:.75;
  120. }
  121.  
  122. h1 {
  123. text-transform:uppercase;
  124. font-size:13px;
  125. }
  126.  
  127. #pagination {
  128. font-weight:bold;
  129. color:{color:links};
  130. margin-top:-85px;
  131. margin-bottom:-75px;
  132. text-align:center;
  133. }
  134.  
  135. #pagination a {
  136. color:{color:links};
  137. }
  138.  
  139. /* ------- SIDEBAR ------ */
  140.  
  141. #sidebar img {
  142. width:140px;
  143. display:block;
  144. border-radius:50%;
  145. margin-bottom:15px;
  146. }
  147.  
  148. #sidebar {
  149. display:block;
  150. color:{color:text};
  151. position:fixed;
  152. float:left;
  153. width:180px;
  154. overflow:hidden;
  155. left:30px;
  156. top:30px;
  157. -webkit-transition: all .9s;
  158. -moz-transition: all .9s;
  159. -o-transition: all .9s;
  160. -ms-transition: all .9s;
  161. transition: all .9s;
  162. }
  163.  
  164. #sblinks {
  165. margin-top:10px;
  166. border-top:1px solid black;
  167. padding-top:8px;
  168. margin-left:-2px;
  169. text-transform:lowercase;
  170. }
  171.  
  172. #sblinks a {
  173. display:inline-block;
  174. padding:2.5px;
  175. }
  176.  
  177. #sblinks a:last-child {
  178. padding-right:2.5px;
  179. }
  180.  
  181. /* ------- POSTS ------- */
  182.  
  183. #entries {
  184. margin-top:75px;
  185. margin-left:450px;
  186. position:static;
  187. float:left;
  188. }
  189.  
  190. #post {
  191. width:420px;
  192. margin-bottom:135px;
  193. -webkit-transition: ease .5s;
  194. -moz-transition: ease .5s;
  195. -o-transition: ease .5s;
  196. -ms-transition: ease .5s;
  197. transition: ease .5s;
  198. overflow:hidden;
  199. }
  200.  
  201. #post:hover {
  202. border-radius:15px;
  203. -webkit-transition-duration: 0.5s;
  204. -moz-transition-duration:0.5s;
  205. transition-duration:0.5s;
  206. -o-transition-duration:0.5s;
  207. }
  208.  
  209. #tags {
  210. color:white;
  211. background:{color:info};
  212. -webkit-transition: ease .5s;
  213. -moz-transition: ease .5s;
  214. -o-transition: ease .5s;
  215. -ms-transition: ease .5s;
  216. transition: ease .5s;
  217. margin-top:-4px;
  218. padding:15px;
  219. font-family:'Montserrat';
  220. z-index:9999;
  221. }
  222.  
  223. #tags a {
  224. color:white;
  225. border-bottom:0px solid white;
  226. -webkit-transition: .25s;
  227. -moz-transition: .25s;
  228. -o-transition: .25s;
  229. -ms-transition: .25s;
  230. transition: .25s;
  231. }
  232.  
  233. #tags a:hover {
  234. border-bottom:2px solid white;
  235. opacity:1;
  236. }
  237.  
  238. #post:hover #tags {
  239. border-bottom-left-radius:10px;
  240. border-bottom-right-radius:10px;
  241. }
  242.  
  243. #post:hover #pic {
  244. border-top-left-radius:10px;
  245. border-top-right-radius:10px;
  246. }
  247.  
  248. blockquote {
  249. margin-left:15px;
  250. border-left:1px solid #9e9f65;
  251. padding:1px 0px 1px 10px;
  252. }
  253.  
  254. .pic, video {
  255. min-width:420px;
  256. width:420px;
  257. }
  258.  
  259. #pict a:hover {
  260. opacity:1;
  261. }
  262.  
  263. .source {
  264. text-align:right;
  265. }
  266.  
  267. ul.chat {
  268. list-style:none;
  269. }
  270.  
  271. .chat span {
  272. margin-left:-30px;
  273. float:left;
  274. }
  275.  
  276. .person {
  277. font-weight:bold;
  278. margin-right:5px;
  279. }
  280.  
  281. #ask {
  282. color:{color:text};
  283. padding:10px;
  284. margin-top:2.5px;
  285. background:#fff3b5;
  286. }
  287.  
  288. #ask a {
  289. color:{color:text};
  290. }
  291.  
  292. .comma:last-child {
  293. display:none;
  294. }
  295.  
  296. /* ------- MUSIC ------- */
  297.  
  298. #audioinfo {
  299. background:{color:posts};
  300. color:black;
  301. text-align:center;
  302. text-transform:uppercase;
  303. width:420px;
  304. margin-left:-100px;
  305. display:inline-block;
  306. position:absolute;
  307. height:100px;
  308. -webkit-transition-duration: 0.5s;
  309. -moz-transition-duration:0.5s;
  310. transition-duration:0.5s;
  311. -o-transition-duration:0.5s;
  312. }
  313.  
  314. #post:hover #audioinfo {
  315. border-top-right-radius:15px;
  316. }
  317.  
  318. .info {
  319. width:280px;
  320. margin-top:20px;
  321. margin-left:100px;
  322. padding:20px;
  323. text-align:center;
  324. }
  325.  
  326. .cover {
  327. width:100px;
  328. z-index:99;
  329. position:relative;
  330. -webkit-transition-duration: 0.5s;
  331. -moz-transition-duration:0.5s;
  332. transition-duration:0.5s;
  333. -o-transition-duration:0.5s;
  334. }
  335.  
  336. #post:hover #audioinfo {
  337. border-top-left-radius:15px;
  338. }
  339.  
  340. #post:hover .cover {
  341. border-top-left-radius:15px;
  342. }
  343.  
  344. .playbutton {
  345. width: 20px;
  346. height: 35px;
  347. overflow: hidden;
  348. z-index: 9999;
  349. margin-left:17.5px;
  350. padding-bottom:7.5px;
  351. padding-top:15px;
  352. }
  353.  
  354. .playbox {
  355. background-color:black;
  356. position: absolute;
  357. z-index: 900;
  358. margin-top: 25px;
  359. margin-left: 22.5px;
  360. padding-right:22.5px;
  361. opacity:.75;
  362. border-radius:50%;
  363. }
  364.  
  365. /* ------- NOTES ------- */
  366.  
  367. ol.notes {
  368. display:block;
  369. text-align:left;
  370. list-style:none;
  371. margin-left:-40px;
  372. }
  373.  
  374. ol.notes li.note{
  375. padding-bottom:5px;
  376. }
  377.  
  378. .pagenotes {
  379. margin-top:-75px;
  380. margin-bottom:60px;
  381. }
  382.  
  383. .pagenotes img{
  384. padding-right:5px;
  385. padding-top:5px;
  386. margin-bottom:-5px;
  387. display:none;
  388. }
  389.  
  390. #caption {
  391. padding:15px;
  392. background:{color:posts};
  393. margin-top:-3px;
  394. }
  395.  
  396. </style>
  397. </head>
  398. <body>
  399.  
  400. <div id="sidebar">
  401. <a href="/" title="refresh"><img src="{image:sidebar image}"/></a>
  402. {Description}
  403. <div id="sblinks">
  404. <a href="{text:URL1}">{text:Link1}</a>
  405. <a href="{text:URL2}">{text:Link2}</a>
  406. <a href="{text:URL3}">{text:Link3}</a>
  407. </div>
  408. </div>
  409.  
  410. <!-- POSTS -->
  411.  
  412. <div id="entries">
  413.  
  414. {block:Posts}
  415.  
  416. <div id="post">
  417.  
  418. <!-- VIA/SOURCE FIX -->
  419.  
  420. {block:ContentSource}
  421. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  422. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  423. {/block:SourceLogo}
  424. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  425. {/block:ContentSource}
  426.  
  427. {block:Text}
  428. <div id="caption">
  429. {block:Title}
  430. <h1><a href="{Permalink}">{Title}</a></h1>
  431. {/block:Title}
  432. {Body}</div>
  433. {/block:Text}
  434.  
  435. {block:Photo}
  436. <div id="pict">
  437. {LinkOpenTag}
  438. <img class="pic" src="{PhotoURL-500}" alt="{PhotoAlt}" />
  439. {LinkCloseTag}
  440. </div>
  441. {/block:Photo}
  442.  
  443. {block:Photoset}
  444. {Photoset-500}
  445. {/block:Photoset}
  446.  
  447. {block:Quote}
  448. <div id="caption">
  449. {Quote}
  450. {block:Source}
  451. <div class="source"><br>{Source}</div>
  452. {/block:Source}
  453. </div>
  454. {/block:Quote}
  455.  
  456. {block:Link}
  457. <div id="caption">
  458. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  459. {block:Description}{Description}{/block:Description}
  460. </div>
  461. {/block:Link}
  462.  
  463. {block:Chat}
  464. <div id="caption">
  465. <ul class="chat">
  466. {block:Lines}
  467. <li class="{Alt}">
  468. {block:Label}<span class="person">{Label}</span>{/block:Label}
  469. <p> {Line} </p></li>
  470. {/block:Lines}
  471. </ul>
  472. </div>
  473. {/block:Chat}
  474.  
  475. {block:Audio}
  476. <div id="audio">
  477. <div class="playbox"><div class="playbutton">
  478. {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
  479. </div></div>
  480. {block:AlbumArt}<img src="{AlbumArtURL}" class="cover">{/block:AlbumArt}
  481. <div id="audioinfo">
  482. <div class="info">
  483. {block:TrackName}
  484. <b>{TrackName}</b><br />
  485. {/block:TrackName}
  486. {block:Artist}
  487. <b style="opacity:.8">{Artist}</b>
  488. {/block:Artist}
  489. {block:Album}
  490. <span style="padding-left:7.5px;opacity:.8">{Album}</span>
  491. {/block:Album}
  492. </div></div>
  493. </div>
  494. {/block:Audio}
  495.  
  496. {block:Video}
  497. {Video-500}
  498. {/block:Video}
  499.  
  500. {block:Answer}
  501. <div id="caption">
  502. <div id="ask">
  503. <b style="text-transform:lowercase;font-family:'Montserrat';display:block;padding-bottom:2.5px">{Asker}: </b>
  504. {Question}
  505. </div>
  506. <div id="answer">{Answer}</div>
  507. </div>
  508. {/block:Answer}
  509.  
  510. {block:Caption}
  511. <div id="caption">{Caption}</div>
  512. {/block:Caption}
  513.  
  514. {block:Date}
  515. <a href="{Permalink}">
  516. <div id="arrow-up"></div>
  517. <div id="tags">
  518. {block:Date}<span style="text-transform:lowercase;">
  519. {ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</span>
  520. {/block:Date}
  521. </a>
  522.  
  523. {block:NoteCount}
  524. + <a href="{Permalink}">{NoteCount} </a>
  525. {/block:NoteCount}
  526.  
  527. {block:permalinkpage}
  528. <!--VIA AND SOURCE-->
  529. {block:RebloggedFrom} /
  530. <a href="{ReblogParentURL}">via</a>
  531. {/block:RebloggedFrom}
  532. {block:ContentSource}
  533. & <a href="{SourceURL}">source</a>
  534. {/block:ContentSource}
  535. {block:RebloggedFrom}{/block:RebloggedFrom}
  536. {/block:permalinkpage}
  537.  
  538. {block:HasTags}
  539. +
  540. {block:Tags}
  541. <a href="{TagURL}"> {Tag}</a><span class="comma">,</span>
  542. {/block:Tags}
  543. {/block:HasTags}
  544. </div>
  545. {/block:Date}
  546.  
  547. </div>
  548.  
  549. <!--POST NOTES-->
  550.  
  551. {block:PostNotes}
  552. <div class="pagenotes">{PostNotes-16}</div>
  553. {/block:PostNotes}
  554.  
  555. {/block:Posts}
  556.  
  557. {block:Pagination}
  558. <div id="pagination">
  559. {block:PreviousPage}
  560. <a href="{PreviousPage}">Previous</a> |
  561. {/block:PreviousPage}
  562. {block:NextPage}
  563. <a href="{NextPage}">Next</a>
  564. {/block:NextPage}
  565. </div>
  566. {/block:Pagination}
  567.  
  568. </div>
  569.  
  570. <div id="clubs" style="right:25px;bottom:15px;position:fixed;font-size:18px;font-family: 'Playfair Display', serif;";><a href="http://javads.tumblr.com">C</a></div>
  571.  
  572. </body>
  573. </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!