API tools faq
paste
Advertisement
cvndythemes

pantone theme #003

cvndythemes
Feb 20th, 2019
801
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5. <title>{Title}</title>
  6.  
  7. <link rel="shortcut icon" href="{favicon}">
  8.  
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12.  
  13. <!--
  14.  
  15. >> ETHEREAL THEMES // codingcabin pantone challenge theme
  16.  
  17. Designed by etherealthemes
  18. etherealthemes.tumblr.com
  19. ⓒ 2016 - 2019
  20.  
  21. >> CREDITS
  22.  
  23. Fonts by Google
  24. Photosets by @gukthemes & @cathms
  25. Cover photo (c) Annie Spratt via unsplash
  26.  
  27. -->
  28.  
  29.  
  30.  
  31.  
  32. <!-- COLORS -->
  33. <meta name="color:Background" content="#ffffff" />
  34. <meta name="color:Text" content="#282828" />
  35. <meta name="color:Links" content="#535353" />
  36. <meta name="color:Accent" content="#FF6F61" />
  37.  
  38. <meta name="color:Content" content="#ffffff" />
  39.  
  40.  
  41.  
  42.  
  43. <!-- IMAGES -->
  44. <meta name="image:Cover" content=""/>
  45. <meta name="image:Avatar" content="https://placehold.it/60X60"/>
  46.  
  47.  
  48.  
  49.  
  50. <!-- IF -->
  51. <meta name="if:Invert Tumblr Controls" content="1"/>
  52. <meta name="if:Hover Content" content="1"/>
  53. <meta name="if:Captions" content="1"/>
  54.  
  55.  
  56.  
  57.  
  58. <!-- SELECT -->
  59. <meta name="select:Font Size" content="9pt" title="Default">
  60. <meta name="select:Font Size" content="10pt" title="Medium">
  61. <meta name="select:Font Size" content="11pt" title="Large">
  62.  
  63. <meta name="select:Lightbox" content="0,0,0," title="Black">
  64. <meta name="select:Lightbox" content="255,255,255," title="White">
  65.  
  66.  
  67.  
  68.  
  69.  
  70. <!-- TEXT -->
  71. <meta name="text:Topbar Link One" content="Link">
  72. <meta name="text:Topbar Link One URL" content="URL">
  73. <meta name="text:Topbar Link Two" content="Link">
  74. <meta name="text:Topbar Link Two URL" content="URL">
  75. <meta name="text:Topbar Link Three" content="Link">
  76. <meta name="text:Topbar Link Three URL" content="URL">
  77. <meta name="text:Topbar Link Four" content="Link">
  78. <meta name="text:Topbar Link Four URL" content="URL">
  79.  
  80.  
  81.  
  82.  
  83. <!-- SCRIPTS -->
  84.  
  85. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  86.  
  87. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  88.  
  89. <script src="https://static.tumblr.com/zvesamf/uCToz2tqz/jquery.style-my-tooltips.js"></script>
  90.  
  91. <script>
  92. (function($){
  93. $(document).ready(function(){
  94. $("[title]").style_my_tooltips({
  95. tip_delay_time:200,
  96. tip_fade_speed:300,
  97. tip_follows_cursor:true
  98. }
  99. );
  100. });
  101. })(jQuery);
  102. </script>
  103.  
  104. <script src="https://static.tumblr.com/yzs4yqx/BV3o343ow/smoothscroll.min.js"></script>
  105.  
  106. <script>
  107. $container.infinitescroll({
  108. itemSelector: '.posts',
  109. navSelector: '.pagination',
  110. nextSelector: '.pagination a',
  111. loadingImg: '',
  112. loadingText: '<em></em>',
  113. bufferPx: 2000
  114. },
  115. function( newElements ) {
  116. var $newElems = $(newElements);
  117. var $newElemsIDs = $newElems.map(function(){
  118. return this.id;
  119. }).get();
  120. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  121. });
  122. </script>
  123.  
  124. <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Merriweather:400,400i,700,700i&display=swap" rel="stylesheet">
  125.  
  126. <!-- STYLESHEET -->
  127.  
  128. <style type="text/css">
  129.  
  130. /* --- SCROLLBAR ---*/
  131.  
  132. ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {width:0px;overflow:hidden;}
  133.  
  134. /* --- TOOLTIPS ---*/
  135.  
  136. #s-m-t-tooltip {
  137. max-width:200px;
  138. margin:15px;
  139. background-color:{color:Accent};
  140. padding:5px;
  141. line-height:100%;
  142. font-size:calc({select:Font Size} + 1pt);
  143. border-radius:3px;
  144. word-wrap:break-word;
  145. text-transform:lowercase;
  146. word-break:break-all;
  147. color:{color:Content};
  148. z-index:8;
  149. }
  150.  
  151. /* --- SELECTION ---*/
  152.  
  153. ::-moz-selection {color:{color:Text};background:{color:Accent};}
  154.  
  155. ::selection {color:{color:Text};background:{color:Accent};}
  156.  
  157. /* --- TUMBLR TOOLS --- */
  158.  
  159. {block:IndexPage}
  160. iframe.tmblr-iframe {
  161. top:31px!important;
  162. right:40px!important;
  163. opacity:0;
  164. padding:0px 30px 0px 0px;
  165. z-index:10!important;
  166. transform:scale(0.5);
  167. transform-origin:100% 0;
  168. -webkit-transform:scale(0.5);
  169. -webkit-transform-origin:100% 0;
  170. -o-transform:scale(0.5);
  171. -o-transform-origin:100% 0;
  172. -moz-transform:scale(0.5);
  173. -moz-transform-origin:100% 0;
  174. -ms-transform:scale(0.5);
  175. -ms-transform-origin:100% 0;
  176. transition:0.2s ease-in-out;
  177. -webkit-transition:0.2s ease-in-out;
  178. -moz-transition:0.2s ease-in-out;
  179. {block:InvertTumblrControls}
  180. filter:invert(1);
  181. -webkit-filter:invert(1);
  182. -o-filter:invert(1);
  183. -moz-filter:invert(1);
  184. -ms-filter:invert(1);
  185. {/block:InvertTumblrControls}
  186. }
  187.  
  188. iframe.tmblr-iframe:hover {opacity:0.5!important;}
  189.  
  190. .tcontrols {
  191. position:fixed;
  192. top:37px;
  193. right:43px;
  194. z-index:9;
  195. transition:0.2s ease-in-out;
  196. -webkit-transition:0.2s ease-in-out;
  197. -moz-transition:0.2s ease-in-out;
  198. }
  199.  
  200. .tcontrols {
  201. color:{color:Text};
  202. font-size:calc({select:Font Size} + 5pt);
  203. font-weight:600;}
  204.  
  205. {/block:IndexPage}
  206.  
  207. {block:PermalinkPage}
  208. iframe.tmblr-iframe {
  209. top:31px!important;
  210. right:40px!important;
  211. opacity:0.5;
  212. padding:0px 30px 0px 0px;
  213. z-index:10!important;
  214. transform:scale(0.5);
  215. transform-origin:100% 0;
  216. -webkit-transform:scale(0.5);
  217. -webkit-transform-origin:100% 0;
  218. -o-transform:scale(0.5);
  219. -o-transform-origin:100% 0;
  220. -moz-transform:scale(0.5);
  221. -moz-transform-origin:100% 0;
  222. -ms-transform:scale(0.5);
  223. -ms-transform-origin:100% 0;
  224. transition:0.2s ease-in-out;
  225. -webkit-transition:0.2s ease-in-out;
  226. -moz-transition:0.2s ease-in-out;
  227. filter:invert(1);
  228. -webkit-filter:invert(1);
  229. -o-filter:invert(1);
  230. -moz-filter:invert(1);
  231. -ms-filter:invert(1);
  232. }
  233. {/block:PermalinkPage}
  234.  
  235. /* --- BODY --- */
  236.  
  237. body {
  238. margin:0px;
  239. padding:0px;
  240. font-family: 'Roboto', sans-serif;
  241. color:{color:Text};
  242. font-size:{select:Font Size};
  243. font-weight:400;
  244. line-height:150%;
  245. font-weight:normal;
  246. word-wrap:normal;
  247. text-align:left;
  248. background-color:{color:Background};
  249. }
  250.  
  251. a {
  252. color:{color:Links};
  253. text-decoration:none;
  254. border:0;
  255. transition:0.2s ease-in-out;
  256. -webkit-transition:0.2s ease-in-out;
  257. -moz-transition:0.2s ease-in-out;
  258. }
  259.  
  260. a:hover {opacity:0.8;}
  261.  
  262. b,strong {font-weight:600;}
  263. i,italic {font-style:italic;letter-spacing:0.5px;}
  264. small {font-size:{select:Font Size};}
  265. big {font-size:{select:Font Size};}
  266.  
  267. hr.divider, hr, hr.separator {
  268. width:240px;
  269. display:block;
  270. margin:20px 0px 20px 200px;
  271. border-style:inset;
  272. border-color:{color:Text};
  273. border-bottom:1px;
  274. opacity:0.5;
  275. }
  276.  
  277. pre {
  278. border:0px;
  279. margin:20px 0px 10px 0px;
  280. padding:10px;
  281. max-width:540px;
  282. background:{color:Accent};
  283. color:{color:Content};
  284. white-space:pre-wrap;
  285. white-space:-moz-pre-wrap;
  286. white-space:-pre-wrap;
  287. white-space:-o-pre-wrap;
  288. word-wrap:break-word;
  289. }
  290.  
  291. /* --- BORDERS --- */
  292.  
  293. .page_top, .page_bottom, .page_left, .page_right {position:fixed;background:{color:Accent};z-index:7;}
  294.  
  295. .page_top {top:0px;left:0px;width:100%;height:30px;}
  296.  
  297. .page_bottom {bottom:0px;left:0px;width:100%;height:30px;}
  298.  
  299. .page_left {top:0px;left:0px;height:100%;width:30px;}
  300.  
  301. .page_right {top:0px;right:0px;height:100%;width:30px;}
  302.  
  303. .whitespace_top, .whitespace_bottom, .whitespace_left, .whitespace_right {position:fixed;background:{color:Background};z-index:6;}
  304.  
  305. .whitespace_top {top:30px;left:0px;width:100%;height:60px;}
  306.  
  307. .whitespace_bottom {bottom:30px;left:0px;width:100%;height:60px;}
  308.  
  309. .whitespace_left {top:0px;left:30px;height:100%;width:60px;}
  310.  
  311. .whitespace_right {top:0px;right:30px;height:100%;width:60px;}
  312.  
  313. /* --- CONTAINER --- */
  314.  
  315. .container {
  316. margin:0 auto;
  317. top:0px;
  318. left:0px;
  319. width:100%;
  320. height:100%;
  321. }
  322.  
  323. .content {
  324. position:relative;
  325. margin:0 auto;
  326. width:600px;
  327. {block:IfHoverContent}
  328. {block:IndexPage}opacity:0;{block:IndexPage}
  329. {/block:IfHoverContent}
  330. z-index:5;
  331. }
  332.  
  333. @media only screen and (max-height: 1049px) and (min-height: 200px) {
  334. .content {margin-top:160px;}
  335. }
  336.  
  337.  
  338. @media only screen and (min-height: 1050px) {
  339. .content {margin-top:300px;}
  340. }
  341.  
  342. #end {clear:both;text-align:center;}
  343.  
  344. {block:IfHoverContent}
  345. .cover_bg, .cover {
  346. transition:0.5s ease-in-out;
  347. -webkit-transition:0.5s ease-in-out;
  348. -moz-transition:0.5s ease-in-out;
  349. }
  350.  
  351. .content {
  352. transition:0.6s ease-in-out;
  353. -webkit-transition:0.6s ease-in-out;
  354. -moz-transition:0.6s ease-in-out;
  355. }
  356. {/block:IfHoverContent}
  357.  
  358. /* --- COVER PHOTO --- */
  359.  
  360. {block:IfHoverContent}
  361. .cover_bg {position:fixed;top:0px;left:0px;background:{color:Content};z-index:3;}
  362.  
  363. .bg {position:fixed;top:0px;left:0px;height:100%;width:100%;background:{color:Content};z-index:3;}
  364.  
  365. .cover {
  366. position:fixed;
  367. top:50%;
  368. left:50%;
  369. transform: translateX(-50%) translateY(-50%);
  370. height:100%;
  371. width:100%;
  372. background-color:{color:Accent};
  373. background: url({image:Cover});
  374. background-position:center center;
  375. background-repeat:no-repeat;
  376. background-size:90%;
  377. z-index:4;
  378. }
  379.  
  380. .cover h1 {
  381. position:relative;
  382. display:inline-block;
  383. font-family: 'Merriweather', serif;
  384. font-size:calc({select:Font Size} + 2pt);
  385. font-weight:400!important;
  386. color:{color:Links};
  387. font-style:italic;
  388. letter-spacing:1px;
  389. text-align:center;
  390. top:50%;
  391. left:50%;
  392. background-color:{color:Content};
  393. padding:20px 30px;
  394. outline:1px solid {color:Content};
  395. outline-offset: 10px;
  396. transform: translateX(-50%) translateY(-50%);
  397. }
  398.  
  399. .container:hover .cover_bg {opacity:0;}
  400. .container:hover .cover {opacity:0;}
  401.  
  402. .container:hover .content {opacity:1;}
  403. {/block:IfHoverContent}
  404.  
  405. /* --- SIDEBAR --- */
  406.  
  407. .sidebar {
  408. margin:0 auto;
  409. width:300px;
  410. font-size:calc({select:Font Size} - 1pt);
  411. text-align:center;
  412. background:{color:Content};
  413. }
  414.  
  415. .sidebar img {
  416. margin:0 auto;
  417. display:block;
  418. height:60px;
  419. width:60px;
  420. margin-bottom:20px;
  421. border-radius:50%;
  422. }
  423.  
  424. .sidebar hr {
  425. display:block;
  426. width:15%;
  427. margin:15px auto 15px auto ;
  428. border-style:inset;
  429. border-color:{color:Text};
  430. border-bottom:1px;
  431. }
  432.  
  433. .side_navigation {padding:10px 0px;}
  434.  
  435. .side_navigation a {
  436. position:relative;
  437. overflow:hidden;
  438. margin:0px 6px;
  439. color:{color:Text};
  440. transition:0.2s ease-in-out;
  441. -webkit-transition:0.2s ease-in-out;
  442. -moz-transition:0.2s ease-in-out;
  443. padding:0px 4px 2px 4px;
  444. display:inline-block;
  445. vertical-align:middle;
  446. font-style:italic;
  447. -webkit-transform: perspective(1px) translateZ(0);
  448. transform: perspective(1px) translateZ(0);
  449. box-shadow:0 0 1px rgba(0, 0, 0, 0);
  450. }
  451.  
  452. .side_navigation a:before {
  453. content:"";
  454. position:absolute;
  455. left:0;
  456. right:0;
  457. bottom:0;
  458. background:{color:Accent};
  459. height:3px;
  460. z-index:-1;
  461. -webkit-transform: translateY(4px);
  462. transform: translateY(4px);
  463. -webkit-transition-property: transform;
  464. transition-property: transform;
  465. -webkit-transition-duration: 0.3s;
  466. transition-duration: 0.3s;
  467. -webkit-transition-timing-function: ease-out;
  468. transition-timing-function: ease-out;
  469. }
  470.  
  471. .side_navigation a:hover:before, .side_navigation a:focus:before, .side_navigation a:active:before {-webkit-transform: translateY(0);transform: translateY(0);}
  472.  
  473. /* --- NAVIGATION --- */
  474.  
  475. #navigation {
  476. position:fixed;
  477. top:40%;
  478. left:50%;
  479. margin:-50px 0px 0px -380px;
  480. text-align:right;
  481. }
  482.  
  483. #navigation a {
  484. text-transform:lowercase;
  485. display:block;
  486. text-align:center;
  487. padding:3px 6px;
  488. margin:0px 0px 10px 0px;
  489. background:{color:Accent};
  490. color:{color:Content};
  491. }
  492.  
  493. .navi {
  494. position:fixed;
  495. z-index:1;
  496. transition:.2s ease-in-out;
  497. -webkit-transition:.2s ease-in-out;
  498. -moz-transition:.2s ease-in-out;
  499. }
  500.  
  501. .navi a {display:block;}
  502.  
  503. .hide {opacity:0;left:0px;}
  504.  
  505. .show {opacity:1;left:83px;}
  506.  
  507. /* --- POSTS --- */
  508.  
  509. .posts {
  510. width:calc(540px + 20px);
  511. padding:0px;
  512. margin:75px 0px 0px 20px;
  513. background:{color:Content};
  514. }
  515.  
  516. .iposts {
  517. margin:0 auto;
  518. width:540px;
  519. background:{color:Content};
  520. min-height:75px;
  521. padding:10px;
  522. }
  523.  
  524. .iposts a {color:{color:Accent};}
  525.  
  526. .set {margin-bottom:-8px;}
  527.  
  528. .photo-slideshow {width:auto!important;}
  529.  
  530. .video, video, embed, iframe {max-width:100%;}
  531.  
  532. .video {margin-left:20px;}
  533.  
  534. .iposts img, .ipostpxu, .ipostpxu img, img, object {max-width:100%;height:auto;}
  535.  
  536. .caption {padding:0px;}
  537.  
  538. /* --- POST INFO --- */
  539.  
  540. .postinfo {
  541. padding:10px;
  542. text-align:center;
  543. background:{color:Content};
  544. }
  545.  
  546. .postdetail {
  547. font-family: 'Merriweather', serif;
  548. font-size:{select:Font Size};
  549. display:inline-block;
  550. padding:4px 9px;
  551. background:{color:Content};
  552. }
  553.  
  554. /* --- POST END --- */
  555.  
  556. .postend {
  557. text-align:center;
  558. font-size:calc({select:Font Size} - 1pt);
  559. min-height:25px;
  560. padding:10px;
  561. background:{color:Content};
  562. }
  563.  
  564. .postending {font-family: 'Merriweather', serif;display:inline-block;}
  565.  
  566. .postend a {padding:0px 3px;}
  567.  
  568. /* --- POST CONTROL --- */
  569.  
  570. .postcontrol {display:inline-block;text-align:center;font-size:calc({select:Font Size} - 1pt);}
  571.  
  572. .postcontrol a {display:inline-block;}
  573.  
  574. .postcontrol .like .liked + i {fill:{color:Accent};color:{color:Accent};}
  575.  
  576. .like-b .liked + .b {color:{color:Accent};}
  577.  
  578. .like-b .liked + .b:after {content:'d';}
  579.  
  580. .like-b {
  581. position:relative;
  582. display:inline-block;
  583. height:1em;
  584. line-height:1em;
  585. overflow:hidden;
  586. margin-bottom:-1px;
  587. }
  588.  
  589. .postcontrol .like .like_button {position:relative;}
  590.  
  591. .postcontrol .like .like_button iframe {
  592. position:absolute;
  593. top:0;
  594. left:0;
  595. bottom:0;
  596. right:0;
  597. z-index:2;
  598. opacity:0.000001;
  599. }
  600.  
  601. /* --- POST TAGS --- */
  602.  
  603. .posttags {
  604. font-size:calc({select:Font Size} - 1pt);
  605. padding:10px;
  606. margin-bottom:100px;
  607. background:{color:Content};
  608. }
  609.  
  610. .ptags {font-family: 'Merriweather', serif;}
  611.  
  612. .ptags a {margin:0px 6px 0px 0px;font-weight:600;}
  613.  
  614.  
  615. /* --- POST STYLES --- */
  616.  
  617. h1, h2, h3 {
  618. font-family: 'Merriweather', serif;
  619. color:{color:Text};
  620. font-size:calc({select:Font Size} + 3pt);
  621. text-align:left;
  622. letter-spacing:1px;
  623. font-weight:400;
  624. padding:8px 0px 6px 0px;
  625. margin:0px 0px 3px 0px;
  626. }
  627.  
  628. h1, h2 {text-transform:uppercase;padding-bottom:10px;}
  629.  
  630. blockquote {
  631. padding:1px 0px 1px 10px;
  632. text-decoration:none;
  633. border-left:1px solid {color:Text};
  634. margin:2px 0px;
  635. }
  636.  
  637. blockquote img {
  638. max-width:100%;
  639. display:block;
  640. margin-bottom:5px;
  641. }
  642.  
  643. .read_more {
  644. color:{color:Text}!important;
  645. display:inline-block;
  646. padding:3px 6px;
  647. border-bottom:2px solid {color:Content};
  648. }
  649.  
  650. .read_more:hover {border-bottom:2px solid {color:Accent};opacity:1;}
  651.  
  652. /* --- QUESTION --- */
  653.  
  654. .questionpost {text-align:left;}
  655.  
  656. .question {color:{color:Content};background:{color:Accent};padding:10px;}
  657.  
  658. .asked {padding-bottom:10px;}
  659.  
  660. .asked a {font-weight:bold;}
  661.  
  662. .asked img {height:35px;width:35px;vertical-align:middle;padding:0px 10px 0px 0px;}
  663.  
  664. /* --- QUOTES --- */
  665.  
  666. .quotes h3 {font-size:calc({select:Font Size} + 3pt);line-height:160%;}
  667.  
  668. .quotes b {font-weight:normal!important;color:{color:Accent};}
  669.  
  670. /* --- CHAT --- */
  671.  
  672. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label, .user_7 .label, .user_8 .label {color:{color:Accent};font-weight:600;}
  673.  
  674. ul.chat {
  675. list-style:none;
  676. margin:0px 0px 0px 0px;
  677. padding:0px;
  678. color:{color:Text};
  679. }
  680.  
  681. .chat li {
  682. list-style:none;
  683. margin:0px 0px 3px 0px;
  684. padding:2px;
  685. border:none;
  686. }
  687.  
  688. /* --- AUDIO --- */
  689.  
  690. .player {
  691. position:absolute;
  692. margin-top:-69px;
  693. margin-left:35px;
  694. opacity:0.5;
  695. }
  696.  
  697. .audiop, .player {display:inline-block;}
  698.  
  699. .trackname, .artist, .playcount {
  700. margin-left:120px;
  701. color:{color:Text};
  702. }
  703.  
  704. .trackname {margin-top:-84px;}
  705.  
  706. .artist {margin-top:10px;}
  707.  
  708. .playcount {margin-top:10px;}
  709.  
  710. .trackname b, .artist b, .playcount b {
  711. font-weight:normal!important;
  712. color:{color:Content};
  713. background:{color:Accent};
  714. padding:2px 4px 2px 4px;
  715. margin:0px 4px 0px 0px;
  716. transition:0.1s ease-in-out;
  717. -webkit-transition:0.1s ease-in-out;
  718. -moz-transition:0.1s ease-in-out;
  719. }
  720.  
  721. .audiop {
  722. position:absolute;
  723. display:block;
  724. margin-top:4px
  725. margin-top:-109px;
  726. }
  727.  
  728. .audioimg img {
  729. margin-top:10px;
  730. height:100px;
  731. width:100px;
  732. }
  733.  
  734. .tumblr_audio_player {
  735. width:30px;
  736. height:27px;
  737. overflow:hidden;
  738. }
  739.  
  740. .soundcloud_audio_player {margin-left:-20px;padding-top:15px;width:540px;height:100px;}
  741.  
  742. /* --- LIGHTBOXES ---*/
  743.  
  744. .vignette, #vignette {opacity:0; }
  745.  
  746. .lightbox-image, #tumblr_lightbox img {
  747. box-shadow:none !important;
  748. border-radius:0 !important;
  749. max-width:none;
  750. -moz-box-sizing:border-box;
  751. box-sizing:border-box;
  752. }
  753.  
  754. .tmblr-lightbox, #tumblr_lightbox {
  755. background-color:rgba({select:Lightbox}.90) !important;
  756. }
  757.  
  758. .lightbox-caption, #tumblr_lightbox_caption {visibility:hidden;}
  759.  
  760. /* ---PERMALINK NOTES --- */
  761.  
  762. #permanote {
  763. width:500px;
  764. margin:-50px 0px 20px -5px;
  765. padding:5px 30px;
  766. text-align:left;
  767. overflow-x:hidden;
  768. }
  769.  
  770. #permanote blockquote {border:0px;}
  771.  
  772. ol.notes {
  773. padding:0px;
  774. margin:25px 0px;
  775. list-style-type:none;
  776. border-bottom:solid 0px;
  777. font-size:calc({select:Font Size} + 1pt);
  778. letter-spacing:1px;
  779. }
  780.  
  781. .notes a {color:{color:Text};}
  782. .notes a:hover {color:{color:Text};}
  783.  
  784. ol.notes li.note {
  785. border-top:solid 1px {color:Text};
  786. padding:10px;
  787. list-style-type:none!important;
  788. }
  789.  
  790. ol.notes li.note img.avatar {
  791. vertical-align:-1px;
  792. margin-right:10px;
  793. width:12px;
  794. height:12px;
  795. display:inline-block;
  796. }
  797.  
  798. ol.notes li.note span.action {font-weight:normal;}
  799.  
  800. ol.notes li.note .answer_content {font-weight:normal;}
  801.  
  802. ol.notes li.note blockquote {
  803. border-color:{color:Content};
  804. padding:4px 10px;
  805. margin:10px 0px 0px 25px;
  806. }
  807.  
  808. ol.notes li.note blockquote a {text-decoration:none;}
  809.  
  810.  
  811. /* --- PAGINATION --- */
  812.  
  813. .pagination {
  814. margin:30px 0px 70px 0px;
  815. padding:10px 10px 25px 10px;
  816. text-align:center;
  817. color:{color:Text};
  818. background:{color:Content};
  819. }
  820.  
  821. .pagination a {
  822. display:inline-block;
  823. color:{color:Text};
  824. padding:0px 5px;
  825. }
  826.  
  827. .pagination a:hover {color:{color:Accent};}
  828.  
  829. {CustomCSS}
  830. </style>
  831.  
  832. </head>
  833. <body>
  834.  
  835.  
  836.  
  837. <!-- START TUMBLR TOOLS -->
  838. {block:IndexPage}
  839. <div class="tcontrols">+</div>
  840. {/block:IndexPage}
  841. <!-- END TUMBLR TOOLS -->
  842.  
  843.  
  844.  
  845. <!-- START BORDERS -->
  846. <div class="page_top"></div>
  847. <div class="page_bottom"></div>
  848. <div class="page_left"></div>
  849. <div class="page_right"></div>
  850. <div class="whitespace_top"></div>
  851. <div class="whitespace_bottom"></div>
  852. <div class="whitespace_left"></div>
  853. <div class="whitespace_right"></div>
  854. <!-- END BORDERS -->
  855.  
  856.  
  857. <div class="bg"></div>
  858.  
  859. <!-- START CONTAINER -->
  860. <div class="container">
  861.  
  862.  
  863.  
  864.  
  865. <!-- START COVER PHOTO -->
  866. {block:IfHoverContent}
  867. {block:IndexPage}
  868. <div class="cover_bg"></div>
  869. <div class="cover">
  870. <h1>{Title}</h1>
  871. </div>
  872. {/block:IndexPage}
  873. {/block:IfHoverContent}
  874. <!-- END COVER PHOTO -->
  875.  
  876.  
  877.  
  878.  
  879. <!-- START CONTENT -->
  880. <div class="contained">
  881. <div class="content">
  882.  
  883.  
  884.  
  885.  
  886. <!-- START SIDEBAR -->
  887. <div class="sidebar">
  888.  
  889. <a href="/"><img title="the rest is confetti" src="{image:Avatar}" /></a>
  890.  
  891. {Description}
  892.  
  893. <div class="side_navigation">
  894. <a href="/">home</a>
  895. <a href="/ask">ask</a>
  896. <a href="{text:Topbar Link One URL}">{text:Topbar Link One}</a>
  897. <a href="{text:Topbar Link Two URL}">{text:Topbar Link Two}</a>
  898. <a href="{text:Topbar Link Three URL}">{text:Topbar Link Three}</a>
  899. <a href="{text:Topbar Link Four URL}">{text:Topbar Link Four}</a>
  900. </div>
  901.  
  902. </div>
  903. <!-- END SIDEBAR -->
  904.  
  905.  
  906.  
  907.  
  908. <!-- START FIXED NAVIGATION -->
  909. {block:IndexPage}
  910. <div id="navigation" class="navi hide">
  911. <a href="/">home</a>
  912. <a href="/ask">ask</a>
  913. <a href="{text:Topbar Link One URL}">{text:Topbar Link One}</a>
  914. <a href="{text:Topbar Link Two URL}">{text:Topbar Link Two}</a>
  915. <a href="{text:Topbar Link Three URL}">{text:Topbar Link Three}</a>
  916. <a href="{text:Topbar Link Four URL}">{text:Topbar Link Four}</a>
  917. </div>
  918. {/block:IndexPage}
  919. <!-- END FIXED NAVIGATION -->
  920.  
  921.  
  922.  
  923.  
  924.  
  925.  
  926.  
  927.  
  928.  
  929. <!-- START POST CONTAINER -->
  930. <div class="posts">
  931. {block:Posts}
  932.  
  933.  
  934.  
  935.  
  936. <!-- START POST INFO -->
  937. <div class="postinfo">
  938. <div class="postdetail">
  939. {block:Date}<a href="{Permalink}">{DayOfWeek}, {DayOfMonth}{DayOfMonthSuffix} of {Month} {Year}</a>{/block:Date}
  940. </div>
  941. </div>
  942.  
  943.  
  944. <!-- Post Styles Start -->
  945. <div class="iposts" id="{PostID}">
  946.  
  947. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  948.  
  949. {block:Photo}<center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  950. </center>{block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}{/block:Photo}
  951.  
  952. {block:Photoset}<div class="set"><center><div class="pxu"><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></center>
  953. {block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}</div>{/block:Photoset}
  954.  
  955. {block:Answer}
  956. <div class="questionpost"><div class="asked"><img src="{AskerPortraitURL-64}" />{Asker} asked:</div><div class="question">{Question}</div></div>{Answer}{/block:Answer}
  957.  
  958. {block:Quote}<div class="quotes"><h3>"{Quote}"</h3>—<b> {Source}</b></div>{/block:Quote}
  959.  
  960. {block:Link}<h2>{Name}</h2>{block:Excerpt}{Excerpt}{block:Host}<p> https://<a href="{URL}">{Host}</a>{/block:Host}{/block:Excerpt}{block:Description}{Description}{/block:Description}{/block:Link}
  961.  
  962. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">
  963. {block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  964.  
  965. {block:Video}<div class="video">{Video-500}{block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}</div>{/block:Video}
  966.  
  967. {block:Audio}
  968. <div class="audio">
  969. {block:AlbumArt}<div class="audioimg"><img src="{AlbumArtURL}" /></div>{block:AlbumArt}{block:AudioPlayer}<div class="player">{AudioPlayerBlack}</div>{/block:AudioPlayer}<div class="audiop">{block:TrackName}<div class="trackname"><b>Title</b> {TrackName}</div>{/block:TrackName}
  970. {block:Artist}<div class="artist"><b>Artist</b> {Artist}</div>{/block:Artist}
  971. {block:PlayCount}<div class="playcount"><b>Plays</b> {PlayCount}</div>{/block:PlayCount}
  972. </div>{block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}
  973. </div>
  974. {/block:Audio}
  975.  
  976. </div>
  977. <!-- Post Styles End -->
  978.  
  979.  
  980.  
  981. <!-- START POST END -->
  982. <div class="postend">
  983.  
  984. <div class="postending">
  985. {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} {block:RebloggedFrom} <a title="{ReblogParentName}" href="{ReblogParentURL}">via</a>
  986. {block:ContentSource} <a title="{ReblogRootName}" href="{SourceURL}">src</a>
  987. {/block:ContentSource}
  988. {/block:RebloggedFrom}
  989.  
  990. <!-- Post Control -->
  991. {block:IndexPage}
  992. <div class="postcontrol">
  993. <a href="{ReblogURL}" target="_blank" >reblog</a>
  994. <a href="#" class="like">{LikeButton}like</a>
  995. </div>
  996. {/block:IndexPage}
  997.  
  998. </div>
  999.  
  1000. </div>
  1001. <!-- END POST END -->
  1002.  
  1003.  
  1004.  
  1005.  
  1006. <!-- POST TAGS START -->
  1007. <div class="posttags">
  1008. {block:HasTags}
  1009. <div class="ptags">Tagged as:&nbsp;{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>
  1010. {/block:HasTags}
  1011. </div>
  1012. <!-- POST TAGS END -->
  1013.  
  1014.  
  1015.  
  1016. {block:PostNotes}
  1017. <div id="permanote">{PostNotes}
  1018. </div>
  1019. {/block:PostNotes}
  1020.  
  1021. {/block:Posts}
  1022. </div>
  1023. <!-- END POST CONTAINER -->
  1024.  
  1025.  
  1026.  
  1027.  
  1028.  
  1029.  
  1030.  
  1031. <!-- START PAGINATION -->
  1032. {block:IndexPage}
  1033. {block:Pagination}
  1034.  
  1035. <div class="pagination">
  1036.  
  1037. {block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage}<a class="next" href="{NextPage}">next</a>{/block:NextPage}
  1038.  
  1039. </div>
  1040.  
  1041. {/block:Pagination}
  1042. {/block:IndexPage}
  1043. <!-- END PAGINATION -->
  1044.  
  1045.  
  1046.  
  1047.  
  1048.  
  1049.  
  1050.  
  1051.  
  1052. <div id="end"></div>
  1053.  
  1054. </div> </div> </div>
  1055. <!-- END CONTAINER AND CONTENT -->
  1056.  
  1057.  
  1058.  
  1059.  
  1060.  
  1061.  
  1062.  
  1063.  
  1064. <!-- ADDITIONAL SCRIPTS -->
  1065.  
  1066. <script>
  1067. var images = [];
  1068. function preload() {
  1069. for (var i = 0; i < arguments.length; i++) {
  1070. images[i] = new Image();
  1071. images[i].src = preload.arguments[i];
  1072. }
  1073. }
  1074.  
  1075. //-- usage --//
  1076. preload(
  1077. "{image:Cover}"
  1078. )
  1079. </script>
  1080. <script>
  1081. myID = document.getElementById("navigation");
  1082.  
  1083. var myScrollFunc = function () {
  1084. var y = window.scrollY;
  1085. if (y >= 500) {
  1086. myID.className = "navi show"
  1087. } else {
  1088. myID.className = "navi hide"
  1089. }
  1090. };
  1091.  
  1092. window.addEventListener("scroll", myScrollFunc);
  1093. </script>
  1094.  
  1095. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1096. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1097. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1098.  
  1099. <link href="//static.tumblr.com/wupwnyt/qWVoc4phj/resizing.css" rel="stylesheet" type="text/css"/>
  1100.  
  1101. <script>
  1102. $(document).ready(function(){
  1103. $('.photo-slideshow').pxuPhotoset({
  1104. lightbox: true,
  1105. rounded: false,
  1106. gutter: '0px',
  1107. borderRadius: '0px',
  1108. photoset: '.photo-slideshow',
  1109. photoWrap: '.photo-data',
  1110. photo: '.pxu-photo'
  1111. });
  1112. });
  1113. </script>
  1114.  
  1115. </body>
  1116. </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!