API tools faq
paste
oftenwrongthemes

Quiet Afternoon Crush - Theme 15

oftenwrongthemes
Aug 28th, 2017
659
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.82 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  7. <meta name="description" content="" />
  8. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  9.  
  10. <!--
  11.  
  12. THEME BY OFTENWRONGTHEMES
  13.  
  14. TERMS OF SERVICE:
  15. - do not remove the credit
  16. - do not use as a base
  17. - do not repost/claim as your own
  18.  
  19. -->
  20.  
  21. <!--jquery for tooltips - script released online-->
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23.  
  24. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  25. <script>
  26. (function($){
  27. $(document).ready(function(){
  28. $("a[title]").style_my_tooltips({
  29. tip_follows_cursor:true,
  30. tip_delay_time:60,
  31. tip_fade_speed:600,
  32. attribute:"title"
  33. });
  34. });
  35. })(jQuery);
  36. </script>
  37.  
  38. <!--Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM-->
  39. <script type="text/javascript">
  40. $(document).ready(function() {
  41. function photosetResize() {
  42. $('iframe.photoset').each(function(){
  43. var newSize = {text:post width};
  44. var newSrc = $(this).attr('src').replace('500',newSize);
  45. $(this).attr('src', newSrc).width(newSize);
  46. var high = $(this).css('height');
  47. var calculate = parseInt(high, 10)* newSize/500;
  48. $(this).css('height', calculate);
  49. });
  50. }
  51. photosetResize();
  52. });
  53. </script>
  54.  
  55. <!--Photoset Gutter Resize Code by Pixel Union-->
  56. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  57. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  58. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  59.  
  60. <script>
  61. $(document).ready(function(){
  62. $('.photo-slideshow').pxuPhotoset({
  63. lightbox: true,
  64. rounded: false,
  65. gutter: '3px',
  66. borderRadius: '0px',
  67. photoset: '.photo-slideshow',
  68. photoWrap: '.photo-data',
  69. photo: '.pxu-photo'
  70. });
  71. });
  72. </script>
  73.  
  74. <!---Resize Video Script by SHYTHEMES--->
  75. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  76.  
  77. <!--IMPORT GOOGLE FONTS-->
  78.  
  79. <link href="https://fonts.googleapis.com/css?family=Bellefair|Josefin+Sans:400,400i,700,700i|Josefin+Slab|Oxygen:300,700|Poppins:300,300i,700,700i" rel="stylesheet">
  80.  
  81. <!--IMPORT FONT AWESOME ICONS-->
  82. <script src="https://use.fontawesome.com/a8cbc62841.js"></script>
  83.  
  84. <!--META TAGS-->
  85.  
  86. <meta name="image:Sidebar Home" content=""/>
  87. <meta name="image:Sidebar Inbox" content=""/>
  88. <meta name="image:Sidebar One" content=""/>
  89. <meta name="image:Sidebar Two" content=""/>
  90. <meta name="image:Sidebar Three" content=""/>
  91.  
  92. <meta name="text:Font Size" content="9pt"/>
  93. <meta name="text:Sidebar Width" content="250"/>
  94. <meta name="text:Post Width" content="450"/>
  95. <meta name="text:Link 1 URL" content=""/>
  96. <meta name="text:Link 2 URL" content=""/>
  97. <meta name="text:Link 3 URL" content=""/>
  98.  
  99. <meta name="select:Font" content="'Poppins', sans-serif" title="Poppins"/>
  100. <meta name="select:Font" content="'Oxygen', sans-serif" title="Oxygen"/>
  101. <meta name="select:Font" content="'Josefin Sans', sans-serif" title="Josefin Sans"/>
  102. <meta name="select:Title Font" content="'Bellefair', serif" title="Bellefair"/>
  103. <meta name="select:Title Font" content="'Josefin Slab', serif" title="Josefin Slab"/>
  104.  
  105. <meta name="color:Background" content="#fff"/>
  106. <meta name="color:Body Text" content="#555"/>
  107. <meta name="color:Links" content="#aaa"/>
  108. <meta name="color:Links Hover" content="#eee"/>
  109. <meta name="color:Bubbles" content="#ccc"/>
  110. <meta name="color:Bubble Icons" content="#fff"/>
  111. <meta name="color:Blockquotes" content="#999"/>
  112.  
  113. <style type="text/css">
  114.  
  115. /*GLOBAL*/
  116.  
  117. html, body {
  118. font-family: {select:Font};
  119. font-size: {text:Font Size};
  120. color: {color:Body Text};
  121. background-color: {color:Background};
  122. line-height: 1.5em;
  123. }
  124.  
  125. a {
  126. color: {color:Links};
  127. text-decoration: none;
  128. transition-duration: 0.5s;
  129. -moz-transition-duration: 0.5s;
  130. -webkit-transition-duration: 0.5s;
  131. -o-transition-duration: 0.5s;
  132. }
  133.  
  134. a:hover {
  135. color: {color:Links Hover};
  136. }
  137.  
  138. #s-m-t-tooltip {
  139. max-width: 350px;
  140. padding: 2px 5px;
  141. margin: 15px 0px 0px 15px;
  142. background: {color:Background};
  143. font-size: 0.75em;
  144. z-index: 9999999999999;
  145. }
  146.  
  147. pre {
  148. white-space: pre-wrap;
  149. word-wrap: break-word;
  150. }
  151.  
  152. .credit a {
  153. position: fixed;
  154. bottom: 15px;
  155. right: 15px;
  156. font-size: 0.8em;
  157. border-bottom: none;
  158. }
  159.  
  160. /*SIDEBAR*/
  161.  
  162. .sidebar {
  163. width: {text:Sidebar Width}px;
  164. position: fixed;
  165. margin: 15%;
  166. }
  167.  
  168. .sidebar .title a {
  169. font-family: {select:Title Font};
  170. font-size: 1.3rem;
  171. color: {color:Body Text};
  172. }
  173.  
  174. .sidebar .desc {
  175. font-size: 0.8em;
  176. line-height: 1.6em;
  177. margin: 5px 0 10px 0;
  178. }
  179.  
  180. .sidebar .bubble {
  181. display: flex;
  182. align-items: center;
  183. justify-content: center;
  184. padding: 2px;
  185. width: 25px;
  186. height: 25px;
  187. border-radius: 50px;
  188. -moz-border-radius: 50px;
  189. -webkit-border-radius: 50px;
  190. background: {color:Background};
  191. border: 1px solid {color:Bubbles};
  192. float: left;
  193. transition-duration: 0.5s;
  194. -moz-transition-duration: 0.5s;
  195. -webkit-transition-duration: 0.5s;
  196. -o-transition-duration: 0.5s;
  197. margin-left: calc(({text:Sidebar Width}px - 145px) / 7);
  198. }
  199.  
  200. .sidebar .bubble:hover {
  201. background: {color:Bubbles};
  202. }
  203.  
  204. .sidebar .bubble i {
  205. font-size: 1.3em;
  206. color: {color:Bubble Icons};
  207. position: absolute;
  208. z-index: -1;
  209. }
  210.  
  211. .sidebar .bubble:hover i {
  212. z-index: 99;
  213. }
  214.  
  215. .sidebar img {
  216. width: 25px;
  217. height: 25px;
  218. border-radius: 50px;
  219. -moz-border-radius: 50px;
  220. -webkit-border-radius: 50px;
  221. transition-duration: 0.5s;
  222. -moz-transition-duration: 0.5s;
  223. -webkit-transition-duration: 0.5s;
  224. -o-transition-duration: 0.5s;
  225. }
  226.  
  227. .sidebar .bubble:hover img {
  228. opacity: 0;
  229. }
  230.  
  231. .sidebar .line {
  232. width: {text:Sidebar Width}px;
  233. margin-top: 25px;
  234. height: 1px;
  235. background: {color:Bubbles};
  236. }
  237.  
  238. /*POSTS*/
  239.  
  240. .posts {
  241. width: {text:Post Width}px;
  242. margin-left: calc(15% + 350px);
  243. }
  244.  
  245. .posts .entries {
  246. margin: 30px 0;
  247. width: {text:Post Width}px;
  248. }
  249.  
  250. .posts .entries h1 {
  251. font-size: 1.3em;
  252. font-family: {select:Title Font};
  253. text-transform: uppercase;
  254. }
  255.  
  256. .posts .entries h2 {
  257. font-family: {select:Title Font};
  258. font-size: 1.7em;
  259. line-height: 1.35em;
  260. }
  261.  
  262. .posts .entries ol, .posts .entries ul {
  263. text-align: left;
  264. list-style-position: outside;
  265. list-style-type: round;
  266. clear: left;
  267. }
  268.  
  269. .posts .entries blockquote {
  270. border-left: 1px solid {color:Blockquotes};
  271. padding-left: 7px;
  272. margin-left: 20px;
  273. }
  274.  
  275. .posts .entries .text img,
  276. .posts .entries .text iframe {
  277. max-width: 100%;
  278. height: auto;
  279. }
  280.  
  281. .posts .entries .sender img {
  282. width: 25px;
  283. height: 25px;
  284. border-radius: 50px;
  285. -moz-border-radius: 50px;
  286. -webkit-border-radius: 50px;
  287. padding: 2px;
  288. border: 1px solid {color:Bubbles};
  289. float: left;
  290. }
  291.  
  292. .posts .entries .sender .line {
  293. width: calc({text:Post Width}px - 31px);
  294. height: 1px;
  295. margin-top: 16px;
  296. background: {color:Bubbles};
  297. float: left;
  298. }
  299.  
  300. .posts .entries .text .source {
  301. font-size: 0.8em;
  302. }
  303.  
  304. .posts .entries .convo {
  305. list-style: none;
  306. line-height: 160%;
  307. padding-bottom: 5px;
  308. }
  309.  
  310. .posts .entries .chat-line {
  311. padding: 5px 0;
  312. }
  313.  
  314. .posts .entries .label {
  315. text-transform: uppercase;
  316. padding-right: 2px;
  317. font-family: {select:Title Font};
  318. }
  319.  
  320. /*AUDIO FORMATTING TUTORIAL BY LMTHEMES + EDITED BY ME*/
  321.  
  322. .posts .entries .playbutton {
  323. width: 30px;
  324. height: 28px;
  325. padding: 10px;
  326. overflow: hidden;
  327. position: relative;
  328. z-index: 1000;
  329. left: -8px;
  330. }
  331.  
  332. .posts .entries .playbox {
  333. background: transparent;
  334. position: absolute;
  335. z-index: 1000;
  336. margin-top: 17px;
  337. margin-left: 17px;
  338. opacity: .7;
  339. }
  340.  
  341. .posts .entries .audiodesc {
  342. position: relative;
  343. left: 5px;
  344. }
  345.  
  346. .posts .entries .text .album-art {
  347. width: 70px;
  348. height: 70px;
  349. }
  350.  
  351. /*POST INFO*/
  352.  
  353. .post-info, .tags {
  354. text-align: center;
  355. width: {text:Post Width}px;
  356. font-size: 0.8em;
  357. }
  358.  
  359. .post-info {
  360. font-size: 1.1em;
  361. padding-bottom: 20px;
  362. color: {color:Links};
  363. }
  364.  
  365. .post-info a {
  366. margin: 0 7px;
  367. }
  368.  
  369. .tags {
  370. padding-top: 7px;
  371. }
  372.  
  373. .permalink-info {
  374. font-size: 0.9em;
  375. }
  376.  
  377. .permalink-info a {
  378. margin: 0 3px;
  379. }
  380.  
  381. .postnotes {
  382. line-height: 200%;
  383. text-align: left;
  384. list-style: none;
  385. font-size: 0.8em;
  386. width: {text:post width}px;
  387. margin: 10px 0;
  388. }
  389.  
  390. .postnotes blockquote {
  391. border-left: 1px solid {color:Blockquotes};
  392. padding-left: 7px;
  393. margin-left: 20px;
  394. }
  395.  
  396. .postnotes ol.notes {
  397. list-style-type: none;
  398. }
  399.  
  400. .postnotes li {
  401. list-style-type: none;
  402. }
  403.  
  404. .postnotes img.avatar {
  405. width: 0px;
  406. height: 0px;
  407. }
  408.  
  409. .pagi {
  410. text-align: center;
  411. margin: 20px 0;
  412. width: {text:post width}px;
  413. }
  414.  
  415. .pagi a,
  416. .pagi .current_page {
  417. margin: 0 5px;
  418. font-size: 0.85em;
  419. }
  420.  
  421. </style>
  422. </head>
  423. <body>
  424.  
  425. <!--SIDEBAR-->
  426.  
  427. <div class="sidebar">
  428.  
  429. <div class="title">
  430. <a href="/">
  431. {Title}
  432. </a>
  433. </div>
  434.  
  435. <div class="desc">
  436. {Description}
  437. </div>
  438.  
  439. <a href="/">
  440. <div class="bubble">
  441. <i class="fa fa-home" aria-hidden="true"></i>
  442. <img src="{image:Sidebar Home}">
  443. </div>
  444. </a>
  445.  
  446. <a href="/ask">
  447. <div class="bubble">
  448. <i class="fa fa-question" aria-hidden="true"></i>
  449. <img src="{image:Sidebar Inbox}">
  450. </div>
  451. </a>
  452.  
  453. <a href="{text:Link 1 URL}">
  454. <div class="bubble">
  455. <!--REPLACE THIS LINE TO CHANGE THE LIST ICON-->
  456. <i class="fa fa-list" aria-hidden="true"></i>
  457. <img src="{image:Sidebar One}">
  458. </div>
  459. </a>
  460.  
  461. <a href="{text:Link 2 URL}">
  462. <div class="bubble">
  463. <!--REPLACE THIS LINE TO CHANGE THE COMPASS ICON-->
  464. <i class="fa fa-compass" aria-hidden="true"></i>
  465. <img src="{image:Sidebar Two}">
  466. </div>
  467. </a>
  468.  
  469. <a href="{text:Link 3 URL}">
  470. <div class="bubble">
  471. <!--REPLACE THIS LINE TO CHANGE THE LINK ICON-->
  472. <i class="fa fa-link" aria-hidden="true"></i>
  473. <img src="{image:Sidebar Three}">
  474. </div>
  475. </a>
  476.  
  477. <div class="line"></div>
  478.  
  479. </div>
  480.  
  481. <!--END SIDEBAR-->
  482.  
  483. <!--POSTS-->
  484.  
  485. <div class="posts">
  486. {block:Posts}
  487.  
  488. {block:NoRebloggedFrom}
  489. {block:RebloggedFrom}
  490. {ReblogParentName}
  491. {/block:RebloggedFrom}
  492. {/block:NoRebloggedFrom}
  493.  
  494. {block:ContentSource}
  495. <!-- {SourceURL}
  496. {block:SourceLogo}
  497. <img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  498. {block:NoSourceLogo}
  499. {SourceLink}
  500. {/block:NoSourceLogo} -->
  501. {/block:ContentSource}
  502.  
  503. <div class="entries">
  504.  
  505. {block:Text}
  506. <div class="text">
  507. {block:Title}
  508. <h1>{Title}</h1>
  509. {/block:Title}
  510. {Body}
  511. </div>
  512. {/block:Text}
  513.  
  514. {block:Answer}
  515. <div class="text">
  516. <div class="sender">
  517. {Asker} said: {Question}
  518. <div class="line"></div>
  519. <img src="{AskerPortraitURL-64}">
  520. </div>
  521. {Answer}
  522. </div>
  523. {/block:Answer}
  524.  
  525. {block:Quote}
  526. <div class="text">
  527. <h2>❝ {Quote}</h2>
  528. {block:Source}
  529. <div class="source">
  530. <blockquote>
  531. {Source}
  532. </blockquote>
  533. </div>
  534. {/block:Source}
  535. </div>
  536. {/block:Quote}
  537.  
  538. {block:Link}
  539. <div class="text">
  540. <h1 align="center"><a href="{URL}">
  541. {Name} →
  542. </a></h1>
  543. <div class="divider"></div>
  544. {block:Description}
  545. {Description}
  546. {/block:Description}
  547. </div>
  548. {/block:Link}
  549.  
  550. {block:Photo}
  551. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="{text:post width}px">{LinkCloseTag}
  552. {block:Caption}
  553. <div class="text">
  554. {Caption}
  555. </div>
  556. {/block:Caption}
  557. {/block:Photo}
  558.  
  559. {block:Photoset}
  560. <div class="photo">
  561. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  562. {block:Photos}
  563. <div class="photo-data">
  564. <div class="pxu-photo">
  565. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  566. </div>
  567. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  568. </div>
  569. {/block:Photos}
  570. </div>
  571. </div>
  572. {block:Caption}
  573. <div class="text">
  574. {Caption}
  575. </div>
  576. {/block:Caption}
  577. {/block:Photoset}
  578.  
  579. {block:Chat}
  580. <div class="text">
  581. {block:Title}
  582. <h1>{Title}</h1>
  583. {/block:Title}
  584. <div class="convo">
  585. {block:Lines}
  586. <div class="chat-line">
  587. {block:Label}
  588. <span class="label">
  589. {Label}
  590. </span>
  591. {/block:Label}
  592. {Line}
  593. </div>
  594. {/block:Lines}
  595. </div>
  596. </div>
  597. {/block:Chat}
  598.  
  599. {block:Audio}
  600. <div class="text">
  601. <table><tr>
  602. <td>
  603. {block:AudioPlayer}
  604. <div class="playbox"><div class="playbutton">
  605. {AudioPlayerWhite}
  606. </div></div>
  607. {/block:AudioPlayer}
  608. <div style="width: 70px; height: 70px; margin-top: 5px; background: black; position: relative;">
  609. {block:AlbumArt}<img src="{AlbumArtURL}" height="70px" width="70px" class="album-art">{/block:AlbumArt}
  610. </div></td>
  611. <td><div class="audiodesc">{block:TrackName}<b>Title:</b> {TrackName}<br>{/block:TrackName}{block:Artist}<b>Artist:</b> {Artist}<br>{/block:Artist} {block:Album}<b>Album:</b> {Album}<br>{/block:Album}</div></td>
  612. </tr></table>
  613. {block:Caption}{Caption}{/block:Caption}
  614. </div>
  615. {/block:Audio}
  616.  
  617. {block:Video}
  618. <div class="photo">
  619. <div class="video">
  620. {Video-500}
  621. </div>
  622. </div>
  623. {block:Caption}
  624. <div class="text">
  625. {Caption}
  626. </div>
  627. {/block:Caption}
  628. {/block:Video}
  629.  
  630. </div>
  631.  
  632. <!--POST INFO-->
  633.  
  634. <div class="post-info">
  635. {block:IndexPage}
  636. {block:Date}
  637. <a href="{Permalink}" title="Posted {TimeAgo}">
  638. <i class="fa fa-clock-o" aria-hidden="true"></i>
  639. </a>
  640. <a href="{Permalink}" title="{NoteCountWithLabel}">
  641. <i class="fa fa-comment-o" aria-hidden="true"></i>
  642. </a>
  643. {/block:Date}
  644. <a href="{ReblogURL}">
  645. <i class="fa fa-retweet" aria-hidden="true"></i>
  646. </a>
  647. {/block:IndexPage}
  648.  
  649. {block:PermalinkPage}
  650. <div class="permalink-info">
  651. {block:Date}
  652. Posted on {ShortMonth} {DayOfMonthWithZero} with {NoteCountWithLabel}
  653. {/block:Date}
  654. {block:RebloggedFrom}
  655. <a href="{ReblogParentURL}">via</a>
  656. <a href="{ReblogRootURL}">source</a>
  657. {/block:RebloggedFrom}
  658. </div>
  659. {/block:PermalinkPage}
  660.  
  661. {block:HasTags}
  662. <div class="tags">
  663. {block:Tags}
  664. <span class="permalink">
  665. <a href="{TagURL}" style="margin-right: 5px;">
  666. #{TAG}
  667. </a>
  668. </span>
  669. {/block:Tags}
  670. </div>
  671. {/block:HasTags}
  672. </div>
  673.  
  674. {block:PostNotes}
  675. <div class="postnotes">
  676. {PostNotes}
  677. </div>
  678. {/block:PostNotes}
  679.  
  680. <!--END POST INFO-->
  681.  
  682. {/block:Posts}
  683.  
  684. <!--END POSTS-->
  685.  
  686. <div class="pagi">
  687. {block:Pagination}
  688. {block:PreviousPage}
  689. <a href="{PreviousPage}">previous</a>
  690. {/block:PreviousPage}
  691. {block:JumpPagination length="6"}
  692. {block:CurrentPage}
  693. <span class="current_page">{PageNumber}</span>
  694. {/block:CurrentPage}
  695. {block:JumpPage}
  696. <a class="jump_page" href="{URL}">{PageNumber}</a>
  697. {/block:JumpPage}
  698. {/block:JumpPagination}
  699. {block:NextPage}
  700. <a href="{NextPage}">next</a>
  701. {/block:NextPage}
  702. {/block:Pagination}
  703. </div>
  704. </div>
  705.  
  706. <div class="credit">
  707. <a href="http://transjeanluc.tumblr.com" target="_blank">▲▲▲</a>
  708. </div>
  709. </body>
  710. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!