Advertisement
quirons

talk me down, nineteen

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