API tools faq
paste
Advertisement
jamastar

tumblr theme 7/20/20

jamastar
Jul 20th, 2020
445
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.72 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Theme [31]: Fabricated
  3. Made by glenthemes
  4.  
  5. Initial release: 2018/06/20
  6. Last updated: 2020/04/01
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the theme credit.
  10. 2) Do not repost/redistribute my themes.
  11. 3) Do not take parts of the code and use it as your own.
  12. 4) Do not use my themes as a base code.
  13. 5) Do not mix my themes together.
  14. ------------------------------------------------------------------------>
  15.  
  16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  17. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  18.  
  19. <head>
  20.  
  21. <title>{Title}</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <!--------------------JAVASCRIPTS-------------------->
  26. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  27. <script src="//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:120,
  34. tip_fade_speed:120,
  35. attribute:"title"
  36. });
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <script>
  42. $(document).ready(function() {
  43. $('iframe.tumblr_audio_player').load( function() {
  44. $('iframe.tumblr_audio_player').contents().find("head")
  45. .append($("<style type='text/css'> .audio-player{background:{color:post accent background} !important; padding:5px 10px 5px 0px !important} .play-pause{color:{color:post accent text} !important; font-size:15px!important; padding:0 9.5px!important} </style>"));
  46. });
  47. });
  48. </script>
  49.  
  50. <link href="https://static.tumblr.com/gtjt4bo/WBJp40bor/library.css" rel="stylesheet">
  51. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  52. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  53. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  54.  
  55.  
  56. <script>
  57. $(document).ready(function(){
  58. $('.photo-slideshow').pxuPhotoset({
  59. lightbox: true,
  60. rounded: false,
  61. gutter: '{text:photoset gutter width}px',
  62. borderRadius: '0px',
  63. photoset: '.photo-slideshow',
  64. photoWrap: '.photo-data',
  65. photo: '.pxu-photo'
  66. });
  67. });
  68. </script>
  69.  
  70. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  71.  
  72. {block:ifsmoothscrolling}
  73. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
  74. {/block:ifsmoothscrolling}
  75.  
  76. {block:IndexPage}
  77. {block:iftwocolumns}
  78. <script src="//static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  79. <script type="text/javascript">
  80. $(window).load(function () {
  81. $('.semicontainer').masonry({
  82. itemSelector : ".posts",
  83. },
  84. function() { $('.semicontainer').masonry({ appendedContent: $(this) }); }
  85. );
  86. });
  87. </script>
  88. {/block:iftwocolumns}
  89. {/block:IndexPage}
  90.  
  91. <link href="https://static.tumblr.com/2pnwama/JGDpabi7q/jasmine.css" rel="stylesheet">
  92.  
  93. <link href="https://fonts.googleapis.com/css?family=Inconsolata|Karla|Muli|Open+Sans|Quicksand" rel="stylesheet">
  94.  
  95. <link href="https://fonts.googleapis.com/css?family={select:body font family}" rel="stylesheet"/>
  96.  
  97. <link rel="stylesheet" href="//static.tumblr.com/2pnwama/IUZoyg6qw/specialfonts.css">
  98.  
  99. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  100.  
  101. <script src="//dl.dropbox.com/s/1mztc6y7i6ry9ri/gtresizing.js"></script>
  102.  
  103. <script src="https://static.tumblr.com/2pnwama/BJppabl7l/primrose.js"></script>
  104.  
  105. <!--------------------COLORS-------------------->
  106. <meta name="color:background" content="#fdfdfd"/>
  107.  
  108. <meta name="color:top bar background" content="#000">
  109. <meta name="color:top bar text" content="#fff">
  110.  
  111. <meta name="color:sidebar borders" content="#ebebeb">
  112. <meta name="color:description background" content="#000">
  113. <meta name="color:description text" content="#eee">
  114.  
  115. <meta name="color:post" content="#fff"/>
  116. <meta name="color:post borders" content="#eee"/>
  117. <meta name="color:text" content="#999"/>
  118. <meta name="color:bold" content="#999">
  119. <meta name="color:Italic" content="#999">
  120. <meta name="color:Link" content="#000">
  121. <meta name="color:Link Hover" content="#aaa">
  122. <meta name="color:post accent background" content="#fafafa"/>
  123. <meta name="color:post accent text" content="#817f82"/>
  124.  
  125. <meta name="color:permalink background" content="#222">
  126. <meta name="color:permalink" content="#ddd">
  127. <meta name="color:permalink hover" content="#ddd">
  128. <meta name="color:tags" content="#666">
  129. <meta name="color:tags hover" content="#aaa">
  130.  
  131. <meta name="color:custom links color 1" content="#000">
  132. <meta name="color:custom links color 2" content="#fff">
  133.  
  134. <meta name="color:scrollbar" content="#333"/>
  135. <meta name="color:scrollbar background" content="#f8f8f8"/>
  136.  
  137. <meta name="color:highlight" content="#f3f3f3"/>
  138. <meta name="color:highlighted text" content="#555"/>
  139.  
  140. <!--------------------FONTS-------------------->
  141. <meta name="select:body font family" title="Inconsolata" content="Inconsolata"/>
  142. <meta name="select:body font family" title="Karla" content="Karla"/>
  143. <meta name="select:body font family" title="Lato" content="Lato"/>
  144. <meta name="select:body font family" title="Lora" content="Lora"/>
  145. <meta name="select:body font family" title="Muli" content="Muli"/>
  146. <meta name="select:body font family" title="Open Sans" content="Open Sans"/>
  147. <meta name="select:body font family" title="Quicksand" content="Quicksand"/>
  148.  
  149. <!--------------------OPTIONS-------------------->
  150. <meta name="if:music player" content="1" />
  151.  
  152. <meta name="if:two columns" content="1" />
  153. <meta name="if:photo fade" content="0" />
  154. <meta name="if:monochrome posts" content="0" />
  155. <meta name="if:post borders" content="1" />
  156. <meta name="if:show tags on front page" content="1" />
  157.  
  158. <meta name="if:smooth scrolling" content="0" />
  159. <meta name="if:dark tumblr controls" content="0" />
  160.  
  161. <!--------------------IMAGES-------------------->
  162. <meta name="image:background image" content=""/>
  163. <meta name="image:sidebar image" content=""/>
  164.  
  165. <!--------------------TITLES-------------------->
  166. <meta name="text:music file URL" content="https://dl.dropboxusercontent.com/s/omrgk9522zl2rw7/Amusement%20Park.mp3">
  167. <meta name="text:music name" content="Amusement Park">
  168. <meta name="text:top bar title" content="">
  169. <meta name="text:top bar title font size" content="11">
  170. <meta name="text:post font size" content="11">
  171. <meta name="text:post width" content="250">
  172. <meta name="text:post width on permalink page" content="500">
  173. <meta name="text:post padding" content="20">
  174. <meta name="text:photoset gutter width" content="2">
  175. <meta name="text:post margin" content="20">
  176. <meta name="text:sidebar right margin" content="80">
  177. <meta name="text:sidebar width" content="250">
  178. <meta name="text:Link 1" content="Sample link 1">
  179. <meta name="text:Link 1 URL" content="/">
  180. <meta name="text:Link 2" content="">
  181. <meta name="text:Link 2 URL" content="">
  182. <meta name="text:Link 3" content="">
  183. <meta name="text:Link 3 URL" content="">
  184. <meta name="text:Link 4" content="">
  185. <meta name="text:Link 4 URL" content="">
  186. <meta name="text:Link 5" content="">
  187. <meta name="text:Link 5 URL" content="">
  188. <meta name="text:Link 6" content="">
  189. <meta name="text:Link 6 URL" content="">
  190.  
  191. <!-------------------------------------------------------------------->
  192.  
  193. <style type="text/css">
  194.  
  195. /*--------------------TOOLTIPS--------------------*/
  196. #s-m-t-tooltip {
  197. padding: 3.5px 9px;
  198. margin: 26px 9px 0px 15px;
  199. background-color: {color:top bar background};
  200. font-family: quicksand;
  201. font-size: calc({text:post font size}px - 3px);
  202. text-transform: uppercase;
  203. letter-spacing:1px;
  204. color: {color:top bar text};
  205. z-index:99999999999999999999999999998!important;
  206. max-width: calc({text:post width}px * 1.25);
  207. -webkit-transition: all 0.3s ease-in-out;
  208. -moz-transition: all 0.3s ease-in-out;
  209. -o-transition: all 0.3s ease-in-out;
  210. }
  211.  
  212. /*--------------------TUMBLR CONTROLS--------------------*/
  213. iframe#tumblr_controls, .iframe-controls--desktop {
  214. top:5px!important;
  215. right:5px!important;
  216. position:fixed!important;
  217.  
  218. {block:ifdarktumblrcontrols}
  219. filter:invert(100%) hue-rotate(180deg);
  220. -webkit-filter:invert(100%) hue-rotate(180deg);
  221. opacity:1;
  222. {/block:ifdarktumblrcontrols}
  223.  
  224. transform:scale(0.7,0.7);
  225. -webkit-transform:scale(0.7,0.7);
  226. -moz-transform:scale(0.7,0.7);
  227.  
  228. transform-origin:100% 0;
  229. z-index:999999!important;
  230. transition:0.3s ease-in-out;
  231. }
  232.  
  233. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  234. opacity:1;
  235. }
  236.  
  237. /*--------------------SCROLLBAR--------------------*/
  238. ::-webkit-scrollbar {
  239. background-color:#f8f8f8;
  240. height:6px;
  241. width:6px;
  242. }
  243.  
  244. ::-webkit-scrollbar-thumb {
  245. background-color:{color:scrollbar};
  246. }
  247.  
  248. ::-webkit-scrollbar-track {background-color:{color:scrollbar background};}
  249.  
  250. /*--------------------TEXT HIGHLIGHT--------------------*/
  251. ::selection {
  252. background: {color:highlight};
  253. color:{color:highlighted text};
  254. }
  255.  
  256. ::-moz-selection {
  257. background: {color:highlight};
  258. color:{color:highlighted text};
  259. }
  260.  
  261. /*--------------------BASICS--------------------*/
  262. body {
  263. background:{color:background} url({image:background image});
  264. background-attachment:fixed;
  265. background-repeat:repeat;
  266. color:{color:text};
  267. cursor:normal;
  268. font-family:{select:body font family};
  269. line-height:1.6em;
  270. font-size:{text:post font size}px;
  271. text-align:left;
  272. }
  273.  
  274. blockquote {
  275. padding-left:10px;
  276. margin-left:5px;
  277. border-left:1px solid;
  278. border-color:rgba({RGBcolor:text},0.6);
  279. margin:10px;
  280. }
  281.  
  282. b, strong {font-weight:bold;color: {color:Bold};}
  283.  
  284. .non a {
  285. padding-bottom:0px!important;
  286. border-bottom:0px solid transparent!important;
  287. }
  288.  
  289. .nonn a {
  290. border-bottom:0px solid transparent!important;
  291. }
  292.  
  293. i, em, .em {color: {color:Italic};}
  294.  
  295. pre, code {
  296. white-space:pre-wrap;
  297. display:block;
  298. }
  299.  
  300. hr {
  301. width:70%;
  302. border-width:0px;
  303. height:1px;
  304. background-color:rgba({RGBcolor:text},0.3);
  305. }
  306.  
  307. p.npf_quirky, p.npf_quote {font-size:calc({text:post font size}px + 5px);line-height:1em;}
  308.  
  309. /*--------------------LINKS--------------------*/
  310. a {
  311. color:{color:link};
  312. text-decoration:none;
  313. cursor:normal;
  314. text-decoration:none;
  315. -webkit-transition: all 0.4s ease-in-out;
  316. -moz-transition: all 0.4s ease-in-out;
  317. -o-transition: all 0.4s ease-in-out;
  318. }
  319.  
  320. a:hover {text-decoration:none;}
  321.  
  322. img {
  323. opacity:1;
  324. text-decoration:none;
  325. border:0px solid transparent;
  326. }
  327.  
  328. h1 {
  329. margin-top:0px;
  330. padding:10px;
  331. background-color:{color:post accent background};
  332. border-bottom:3px solid rgba({RGBcolor:post accent text},0.1);
  333. color:{color:post accent text}!important;
  334. }
  335.  
  336. h1 a {
  337. color:{color:post accent text}!important;
  338. }
  339.  
  340. h1, h2, h3, h4, h5, h6 {
  341. font-size:calc({text:post font size}px + 1px);
  342. font-family:quicksand;
  343. text-transform: uppercase;
  344. letter-spacing: 2px;
  345. color:{color:text};
  346. text-align:center;
  347. line-height:1.6em;
  348. }
  349.  
  350. .pp p:first-child {margin-top:0px;}
  351.  
  352. /*-----------------TOPSHIT-----------------*/
  353. #yorha {
  354. position:fixed;
  355. top:0;margin-top:0px;
  356. left:0;margin-left:0px;
  357. width:100%;
  358. height:50px;
  359. background-color:{color:top bar background};
  360. display:table;
  361. z-index:10;
  362. }
  363.  
  364. #park {
  365. display:table-cell;
  366. vertical-align:middle;
  367. }
  368.  
  369. .nines, .nines a {
  370. padding:16px 0;
  371. text-align:center;
  372. font-family:quicksand, "KaiTi", "楷体", STKaiti, "华文楷体", serif;
  373. text-transform:uppercase;
  374. letter-spacing:1px;
  375. font-size:{text:top bar title font size}px;
  376. color:{color:top bar text};
  377. }
  378.  
  379. /*-----------------PLAYER-----------------*/
  380. #yolk {
  381. position:fixed;
  382. top:0;margin-top:0px;
  383. left:0;margin-left:20px;
  384. height:50px;
  385. display:table;
  386. z-index:11;
  387. }
  388.  
  389. #pearl {
  390. display:table-cell;
  391. vertical-align:middle;
  392. }
  393.  
  394. .playwrapper {display:flex;}
  395.  
  396. .butts {cursor:pointer;}
  397.  
  398. .playy, .pausee {
  399. font-size:13px;
  400. color:{color:top bar text};
  401. }
  402.  
  403. .pausee {
  404. display:none;
  405. margin-right:1.5px;
  406. }
  407.  
  408. .sonata {
  409. margin-left:10px;
  410. color:{color:top bar text};
  411. }
  412.  
  413. .labeltext {
  414. margin-left:8px;
  415. font-family:courier new;
  416. font-size:9px;
  417. color:{color:top bar text};
  418. }
  419.  
  420. /*-----------------CONT-----------------*/
  421. #container {
  422. position:absolute;
  423. margin:0 auto;
  424. margin-top:calc(50px + 40px);
  425. top:0;left:0;right:0;
  426.  
  427. {block:IndexPage}/*----------*/
  428.  
  429. {block:iftwocolumns}
  430. margin-bottom:calc(({text:post margin}px * 2) + 37px);
  431. width:calc(({text:post width}px * 2) + ({text:post padding}px * 4) + ({text:post margin}px * 2) + {text:sidebar right margin}px + {text:sidebar width}px);
  432. {/block:iftwocolumns}
  433.  
  434.  
  435. {block:ifnottwocolumns}
  436. margin-bottom:calc({text:post margin}px + 37px);
  437. width:calc({text:post width}px + ({text:post padding}px * 2) + {text:sidebar right margin}px + {text:sidebar width}px);
  438. {/block:ifnottwocolumns}
  439.  
  440. {/block:IndexPage}/*----------*/
  441.  
  442.  
  443.  
  444. {block:PermalinkPage}
  445. margin-bottom:{text:post margin}px;
  446. width:calc({text:post width on permalink page}px + ({text:post padding}px * 2) + {text:sidebar right margin}px + {text:sidebar width}px);
  447. {/block:PermalinkPage}
  448. }
  449.  
  450. .semicontainer {
  451. {block:IndexPage}/*----------*/
  452.  
  453. {block:iftwocolumns}
  454. margin-top:-{text:post margin}px;
  455. margin-left:calc(-{text:post margin}px + {text:sidebar width}px + {text:sidebar right margin}px);
  456. width:calc(({text:post width}px * 2) + ({text:post padding}px * 4) + ({text:post margin}px * 5));
  457. {/block:iftwocolumns}
  458.  
  459. {block:ifnottwocolumns}
  460. margin-left:calc({text:sidebar width}px + {text:sidebar right margin}px);
  461. {/block:ifnottwocolumns}
  462.  
  463. {/block:IndexPage}/*----------*/
  464.  
  465.  
  466.  
  467. {block:PermalinkPage}
  468. margin-left:calc({text:sidebar width}px + {text:sidebar right margin}px);
  469. {/block:PermalinkPage}
  470. }
  471.  
  472.  
  473. #nudge {
  474.  
  475. }
  476.  
  477. #galaxy {
  478. position:fixed;
  479. top:0;margin-top:50px;
  480.  
  481. /* total post width + gap between posts and sb */
  482.  
  483. margin-left:0px;
  484.  
  485. width:{text:sidebar width}px;
  486. text-align:center;
  487. }
  488.  
  489. .string1, .string2 {background-color:{color:sidebar borders};}
  490.  
  491. .string1 {
  492. position:absolute;
  493. margin-left:30px;
  494. width:1px;
  495. height:40px;
  496. }
  497.  
  498. .string2 {
  499. position:absolute;
  500. right:0;margin-right:30px;
  501. width:1px;
  502. height:40px;
  503. }
  504.  
  505. .pepper {
  506. margin-top:40px;
  507. width:calc(100% - 42px);
  508. height:auto;
  509. padding:20px;
  510. border:1px solid {color:sidebar borders};
  511. vertical-align:middle;
  512. }
  513.  
  514. .desc {
  515. margin-top:15px;
  516. padding:10px;
  517. background-color:{color:description background};
  518. color:{color:description text};
  519. font-size:11px;
  520. }
  521.  
  522. .desc a {
  523. padding-bottom:1px;
  524. border-bottom:0.5px solid rgba({RGBcolor:description text},0.4);
  525. }
  526.  
  527. .desc a, .desc b, .desc i {color:{color:description text};}
  528.  
  529. .desc p:last-child {margin-bottom:0px;}
  530.  
  531. /*-----------------CUSTOM LINKS-----------------*/
  532. #custard {
  533. position:absolute;
  534. margin-top:40px;
  535. margin-left:-35px;
  536. width:24px;
  537. }
  538.  
  539. .eggo {
  540. margin-bottom:10px;
  541. width:7px;
  542. height:7px;
  543. padding:3px;
  544. background-color:{color:custom links color 1};
  545. border:5px double {color:custom links color 2};
  546. border-radius:5px;
  547. }
  548.  
  549. .eggo:hover {
  550. width:12px;
  551. height:12px;
  552. background-color:{color:custom links color 1};
  553. border:2.5px solid {color:custom links color 2};
  554. }
  555.  
  556. /*--------------------POSTS--------------------*/
  557. .posts {
  558. {block:IndexPage}
  559. margin:{text:post margin}px {text:post margin}px calc({text:post margin}px + 37px) {text:post margin}px;
  560. width:{text:post width}px;
  561. {/block:IndexPage}
  562. /* ex: margintop marginright (marginbot+perma) marginleft*/
  563.  
  564. {block:PermalinkPage}
  565. margin-bottom:{text:post margin}px;
  566. width:{text:post width on permalink page}px;
  567. {/block:PermalinkPage}
  568.  
  569. padding:{text:post padding}px;
  570. background-color:{color:post};
  571. {block:ifpostborders}border:1px solid {color:post borders};{/block:ifpostborders}
  572. }
  573.  
  574. .posts:last-of-type {margin-bottom:0px;}
  575.  
  576. .posts a {
  577. color:{color:link};
  578. padding-bottom:1px;
  579. border-bottom:0.5px solid rgba({RGBcolor:link},0.4);
  580. }
  581.  
  582. .posts a:hover {
  583. color:{color:link hover};
  584. border-bottom:0.5px solid rgba({RGBcolor:link hover},0.4);
  585. }
  586.  
  587. .photos, .photos img {
  588. position:relative;
  589. overflow:hidden;
  590. width:{text:post width}px;
  591.  
  592. {block:PermalinkPage}
  593. width:{text:post width on permalink page}px;
  594. {/block:PermalinkPage}
  595.  
  596. {block:IndexPage}
  597. {block:ifphotofade}
  598. opacity:0.8;
  599. -webkit-transition: all 0.8s ease-in-out;
  600. -moz-transition: all 0.8s ease-in-out;
  601. -o-transition: all 0.8s ease-in-out;
  602. {/block:ifphotofade}
  603.  
  604. {block:ifmonochromeposts}
  605. -webkit-filter:grayscale(100%);
  606. filter:grayscale(100%);
  607. -webkit-transition: all 0.8s ease-in-out;
  608. -moz-transition: all 0.8s ease-in-out;
  609. -o-transition: all 0.8s ease-in-out;
  610. {/block:ifmonochromeposts}
  611. {/block:IndexPage}
  612. }
  613.  
  614. .posts:hover .photos {
  615. opacity:1;
  616. -webkit-filter:grayscale(0%);
  617. filter:grayscale(0%);
  618. }
  619.  
  620. .posts img {
  621. {block:IndexPage}
  622. {block:ifphotofade}
  623. opacity:0.8;
  624. -webkit-transition: all 0.8s ease-in-out;
  625. -moz-transition: all 0.8s ease-in-out;
  626. -o-transition: all 0.8s ease-in-out;
  627. {/block:ifphotofade}
  628.  
  629. {block:ifmonochromeposts}
  630. -webkit-filter:grayscale(100%);
  631. filter:grayscale(100%);
  632. -webkit-transition: all 0.8s ease-in-out;
  633. -moz-transition: all 0.8s ease-in-out;
  634. -o-transition: all 0.8s ease-in-out;
  635. {/block:ifmonochromeposts}
  636. {/block:IndexPage}
  637. }
  638.  
  639. .posts:hover img {
  640. opacity:1;
  641. -webkit-filter:grayscale(0%);
  642. filter:grayscale(0%);
  643. }
  644.  
  645. /*------- npf photoset image spacing-------*/
  646. :root {
  647. --NPF-Image-Spacing:{text:photoset gutter width}px; /* spacing value */
  648. }
  649.  
  650. .npf_row {
  651. display:flex!important;
  652. margin:calc(var(--NPF-Image-Spacing) / -2)!important;
  653. margin-bottom:calc(var(--NPF-Image-Spacing) / 2)!important;
  654. }
  655.  
  656. .npf_row:last-of-type {
  657. margin-bottom:calc(var(--NPF-Image-Spacing) / -2)!important;
  658. }
  659.  
  660. .tmblr-full {
  661. flex:1;
  662. margin:0!important;
  663. padding:calc(var(--NPF-Image-Spacing) / 2)!important;
  664. width:auto!important;
  665. height:auto!important;
  666. cursor:pointer;
  667. outline:none;
  668. }
  669.  
  670. .tmblr-full img {visibility:hidden;}
  671.  
  672. .posts img, .posts li, .posts blockquote {max-width:100%;height:auto;}
  673.  
  674. .posts iframe {max-width:100%;}
  675.  
  676. /*--------------------PERMALINK--------------------*/
  677. .permawrap {
  678. position:absolute;
  679. margin-top:{text:post padding}px;
  680.  
  681. {block:IndexPage}/*-----*/
  682. {block:ifpostborders}
  683. margin-left:calc(-{text:post padding}px - 1px);
  684. width:calc({text:post width}px + (({text:post padding}px - 15px) * 2) + 2px);
  685. {/block:ifpostborders}
  686.  
  687. {block:ifnotpostborders}
  688. margin-left:-{text:post padding}px;
  689. width:calc({text:post width}px + (({text:post padding}px - 15px) * 2));
  690. {/block:ifnotpostborders}
  691. {/block:IndexPage}/*-----*/
  692.  
  693.  
  694. {block:PermalinkPage}/*-----*/
  695. {block:ifpostborders}
  696. margin-left:calc(-{text:post padding}px - 1px);
  697. width:calc({text:post width on permalink page}px + (({text:post padding}px - 15px) * 2) + 2px);
  698. {/block:ifpostborders}
  699.  
  700. {block:ifnotpostborders}
  701. margin-left:-{text:post padding}px;
  702. width:calc({text:post width on permalink page}px + (({text:post padding}px - 15px) * 2));
  703. {/block:ifnotpostborders}
  704. {block:PermalinkPage}/*-----*/
  705.  
  706. padding:8px 15px;
  707. background-color:{color:permalink background};
  708. border-radius:0px 0px 5px 5px;
  709. }
  710.  
  711. .perma {
  712. font-family:Muli;
  713. text-transform:uppercase;
  714. letter-spacing:1px;
  715. font-size:calc({text:post font size}px - 3px);
  716. }
  717.  
  718. .perma a, .perma b {
  719. color:{color:permalink};
  720. -webkit-transition: all 0.4s ease-in-out;
  721. -moz-transition: all 0.4s ease-in-out;
  722. -o-transition: all 0.4s ease-in-out;
  723. }
  724.  
  725. .perma a {margin-right:15px;}
  726. .perma a:hover, .perma b:hover {color:{color:permalink hover};}
  727.  
  728. .tagsin {
  729. margin-top:5px;
  730. margin-right:-3px;
  731. font-family:muli;
  732. text-transform:uppercase;
  733. letter-spacing:1px;
  734. line-height:1.5em;
  735. font-size:calc({text:post font size}px - 3.5px);
  736. text-align:right;
  737. }
  738.  
  739. .tagsin a {
  740. display:inline-block;
  741. margin-right:3px;
  742. color:{color:tags};
  743. }
  744.  
  745. .tagsin a:hover {color:{color:tags hover};}
  746.  
  747. .vinegar {float:right;}
  748.  
  749. /* -- Like + Reblog buttons (1/2) -- */
  750. /* -- mikedidthis from StackOverflow: https://stackoverflow.com/users/2312574/mikedidthis -- */
  751. /* -- and tutorial by shythemes: //shythemes.tumblr.com/post/147903463743/custom-like-and-reblog-buttons -- */
  752. .controls {
  753. margin-right:calc(-5px + 15px); /*15 = perma pad*/
  754. margin-top:-18px;
  755. height:0px;
  756. }
  757.  
  758. .controls a {
  759. position:relative;
  760. display:inline-block;
  761. }
  762.  
  763. /* both svg colors */
  764. .controls .sf {color:rgba({RGBcolor:permalink},0.9);}
  765.  
  766. .controls .rb .sf {
  767. position:absolute;
  768. margin-top:calc(({text:post font size}px - 1px) * -1);
  769. font-size:calc({text:post font size}px - 1px);
  770. }
  771.  
  772. .controls .like .sf {
  773. position:absolute;
  774. margin-top:calc(({text:post font size}px - 2px) * -1);
  775. margin-left:calc(({text:post font size}px + 4px) * -1);
  776. font-size:calc({text:post font size}px + 1px);
  777. max-height:calc({text:post font size}px + 1px);
  778. }
  779.  
  780. .controls .like .liked + .sf {color:#ec5a5a;}
  781.  
  782. .controls .like .like_button {
  783. position:absolute;
  784. margin-top:calc(({text:post font size}px - 1px) * -1);
  785. margin-left:calc(({text:post font size}px + 5px) * -1);
  786. width:calc({text:post font size}px + 3px);
  787. height:calc({text:post font size}px + 3px);
  788. }
  789.  
  790. .controls .like .like_button iframe {
  791. position:absolute;
  792. top:0;
  793. left:0;
  794. bottom:0;
  795. right:0;
  796. width:100%;height:100%;
  797. z-index:2;
  798. opacity:0;
  799. }
  800. /*--------------------POST NOTES--------------------*/
  801. ol.notes {
  802. width:calc({text:post width on permalink page}px + ({text:post padding}px * 2));
  803. padding:0px;
  804. margin-top:calc({text:post margin}px + 37px);
  805. list-style-type:none;
  806. }
  807.  
  808. ol.notes li.note {
  809. padding:10px;
  810. }
  811.  
  812. ol.notes li.note img.avatar {
  813. vertical-align:-4px;
  814. margin-right:10px;
  815. width:16px;
  816. height:16px;
  817. }
  818.  
  819. ol.notes li.note span.action {
  820. font-weight:none;
  821. }
  822.  
  823. ol.notes li.note .answer_content {
  824. font-weight:normal;
  825. }
  826.  
  827. ol.notes li.note blockquote {
  828. padding:4px 10px;
  829. margin:10px 0px 0px 25px;
  830. }
  831.  
  832. ol.notes li.note blockquote a {
  833. text-decoration:none;
  834. }
  835.  
  836. /*---------------------------LIGHTBOXES---------------------------*/
  837. .vignette, #vignette {
  838. opacity:0;
  839. }
  840. .lightbox-image, #tumblr_lightbox img {
  841. z-index:99999999999999999999999999999 !important;
  842. box-shadow:none !important;
  843. border-radius:0px !important;
  844. max-width:none;
  845. padding:{text:post padding}px !important;
  846. background:{color:post} !important;
  847. border:1px solid rgba({RGBcolor:text},0.15) !important;
  848. }
  849.  
  850. .tmblr-lightbox, #tumblr_lightbox {
  851. background-color:rgba({RGBcolor:post},0.78) !important;
  852. z-index:99999999999999999999999999999 !important;
  853. }
  854.  
  855. /*---------------------------QUOTES---------------------------*/
  856. .quote {
  857. font-family:Quicksand;
  858. text-transform:uppercase;letter-spacing:1px;
  859. font-size:calc({text:post font size}px + 1px);
  860. font-weight:bold;
  861. text-align:center;
  862. }
  863.  
  864. .quotesource {
  865. text-align:center;
  866. margin-top:10px;
  867. }
  868.  
  869. /*---------------------------CHATS---------------------------*/
  870. .chat {
  871. line-height:2em;
  872. list-style:none;
  873. }
  874.  
  875. .line.odd {
  876. background-color:{color:post accent background};
  877. padding:5px;
  878. list-style:none;
  879. color:{color:post accent text};
  880. }
  881.  
  882. .line.even {
  883. background:{color:post};
  884. padding:5px;
  885. list-style:none;
  886. }
  887.  
  888. .label.odd, .label.even {
  889. padding-right:1px;
  890. text-transform:uppercase;
  891. font-weight:bold;
  892. }
  893.  
  894. .label.odd {color:{color:post accent text};}
  895. .label.even {color:{color:text};}
  896.  
  897. p.npf_chat { font-family:Courier; font-size:{text:post font size}px; }
  898.  
  899. /*---------------------------ASKS---------------------------*/
  900. .q-wrap {
  901. padding:10px;
  902. background-color:{color:post accent background};
  903. min-height:64px;
  904. }
  905.  
  906. .question {
  907. margin-left:75px;
  908. color:{color:post accent text};
  909. }
  910.  
  911. .askimg {
  912. position:absolute;
  913. width:64px;height:64px;
  914. }
  915.  
  916. .asker, .asker b, .asker a, .answer {
  917. text-transform:uppercase;color:{color:post accent text};
  918. }
  919.  
  920. .answer {
  921. margin:0px auto;
  922. text-transform:none;
  923. }
  924.  
  925. /*---------------------------AUDIO---------------------------*/
  926. .playerbutton {
  927. position:absolute;
  928. margin-top:18.5px;
  929. margin-left:18.5px;
  930. width:27px;
  931. height:27px;
  932. overflow:hidden;
  933. border-radius:100%;
  934. }
  935.  
  936. .trackdetails {
  937. width:auto;
  938. display:inline-block;
  939. margin-left:70px;
  940. padding:5px;
  941. line-height:1.7;
  942. }
  943.  
  944. .trackdetails b {
  945. font-weight:normal;
  946. }
  947.  
  948. .audiowrapper {
  949. position:relative;
  950. display:inline;
  951. height:0px;
  952. }
  953.  
  954. /*---------------------------VIDEO---------------------------*/
  955. .tumblr_video_container {
  956. width:{text:post width}px!important;
  957. height:auto!important;
  958. max-height:540px!important;
  959. overflow:hidden!important;
  960. {block:IndexPage}
  961. {block:ifphotofade}
  962. opacity:0.8;
  963. -webkit-transition: all 0.8s ease-in-out;
  964. -moz-transition: all 0.8s ease-in-out;
  965. -o-transition: all 0.8s ease-in-out;
  966. {/block:ifphotofade}
  967.  
  968. {block:ifmonochromeposts}
  969. -webkit-filter:grayscale(100%);
  970. filter:grayscale(100%);
  971. -webkit-transition: all 0.8s ease-in-out;
  972. -moz-transition: all 0.8s ease-in-out;
  973. -o-transition: all 0.8s ease-in-out;
  974. {/block:ifmonochromeposts}
  975. {/block:IndexPage}
  976. }
  977.  
  978. .posts:hover .tumblr_video_container {
  979. opacity:1;
  980. -webkit-filter:grayscale(0%);
  981. filter:grayscale(0%);
  982. }
  983.  
  984. /*------------------------SB PAGINATION------------------------*/
  985. .sbpagi {
  986. width:inherit;
  987. text-align:center;
  988. margin-top:17px;
  989. }
  990.  
  991. /* 'Current page' number */
  992. .sbpagi span {
  993. display:inline-block;
  994. margin-left:5px;
  995. padding:5px 9px;
  996. background-color:{color:post};
  997. border-radius:100%;
  998. border:1px solid rgba({RGBcolor:text},0.4);
  999. font-size:calc({text:post font size}px - 1px);
  1000. width:9px;
  1001. color:{color:text};
  1002. text-align:center;
  1003. }
  1004.  
  1005. /* Other page numbers */
  1006. .sbpagi a {
  1007. display:inline-block;
  1008. margin-left:5px;
  1009. padding:5px 9px;
  1010. background-color:{color:description background};
  1011. border-radius:100%;
  1012. font-size:calc({text:post font size}px - 1px);
  1013. width:9px;
  1014. color:{color:description text};
  1015. text-align:center;
  1016. }
  1017.  
  1018. /*-----------------CREDIT. PLEASE DO NOT REMOVE-----------------*/
  1019. #please-respect-theme-makers a {
  1020. position:fixed;
  1021. bottom:0;margin-bottom:15px;
  1022. right:0;margin-right:15px;
  1023. padding:9px;
  1024. background-color:{color:post};
  1025. border-radius:3px;
  1026. font-family:karla;
  1027. text-transform:uppercase;
  1028. line-height:1em;
  1029. text-align:center;
  1030. font-size:9px;
  1031. letter-spacing:1.3px;
  1032. color:{color:text};
  1033. z-index:99;
  1034. }
  1035.  
  1036. </style>
  1037.  
  1038. </head>
  1039.  
  1040. <body>
  1041. <!----PLEASE DO NOT REMOVE THE THEME CREDIT---->
  1042. <div id="please-respect-theme-makers"><a href="//glenthemes.tumblr.com" title="theme by glenthemes">glenthemes</a></div>
  1043.  
  1044. <div id="yorha">
  1045. <div id="park">
  1046. {block:ifnottopbartitle}
  1047. <div class="nines"><a href="/">{Title}</a></div>
  1048. {/block:ifnottopbartitle}
  1049.  
  1050. {block:iftopbartitle}
  1051. <div class="nines"><a href="/">{text:top bar title}</a></div>
  1052. {/block:iftopbartitle}
  1053. </div>
  1054. </div>
  1055.  
  1056. {block:ifmusicplayer}
  1057. <div id="yolk">
  1058. <div id="pearl">
  1059. <div class="playwrapper">
  1060. <div class="butts" onclick="initiate();">
  1061. <a title="play music"><div class="playy">►</div></a>
  1062. <a title="pause music"><div class="pausee">❚❚</div></a>
  1063. </div>
  1064.  
  1065. <div class="sonata">♫</div>
  1066. <div class="labeltext">{text:music name}</div>
  1067. </div><!--pwrapper-->
  1068. </div>
  1069. </div>
  1070. {/block:ifmusicplayer}
  1071.  
  1072. <audio id="yinyue" src="{text:music file URL}" onended="restart();" type="audio"></audio>
  1073.  
  1074. <!---- main shit ---->
  1075. <div id="lettuce">
  1076. <div id="container">
  1077.  
  1078. <div id="galaxy">
  1079.  
  1080. <div id="custard">
  1081. <a href="/" title="home"><div class="eggo"></div></a>
  1082. <a href="/ask" title="message"><div class="eggo"></div></a>
  1083. {block:ifLink1}<a href="{text:Link 1 URL}" title="{text:Link 1}"><div class="eggo"></div></a>{/block:ifLink1}
  1084. {block:ifLink2}<a href="{text:Link 2 URL}" title="{text:Link 2}"><div class="eggo"></div></a>{/block:ifLink2}
  1085. {block:ifLink3}<a href="{text:Link 3 URL}" title="{text:Link 3}"><div class="eggo"></div></a>{/block:ifLink3}
  1086. {block:ifLink4}<a href="{text:Link 4 URL}" title="{text:Link 4}"><div class="eggo"></div></a>{/block:ifLink4}
  1087. {block:ifLink5}<a href="{text:Link 5 URL}" title="{text:Link 5}"><div class="eggo"></div></a>{/block:ifLink5}
  1088. {block:ifLink6}<a href="{text:Link 6 URL}" title="{text:Link 6}"><div class="eggo"></div></a>{/block:ifLink6}
  1089.  
  1090. </div><!--custard-->
  1091.  
  1092. <div class="string1"></div>
  1093. <div class="string2"></div>
  1094. <img class="pepper" src="{image:sidebar image}">
  1095. <div class="desc">{Description}</div>
  1096.  
  1097. {block:Pagination}
  1098. <div class="sbpagi">
  1099. {block:PreviousPage}<a title="Previous Page" href="{PreviousPage}">«</a>{/block:PreviousPage}
  1100. {block:JumpPagination length="4"}
  1101. {block:CurrentPage}<span class="current_page">✗</span>{/block:CurrentPage}
  1102. {block:JumpPage}<a href="{URL}" title="page {PageNumber}">{PageNumber}</a> {/block:JumpPage}
  1103. {/block:JumpPagination}
  1104. {block:NextPage}<a title="Next Page" href="{NextPage}">»</a>{/block:NextPage}
  1105. </div>
  1106. {/block:Pagination}
  1107.  
  1108. </div><!--galaxy-->
  1109.  
  1110. <div id="nudge">
  1111.  
  1112. <div class="semicontainer">
  1113. {block:Posts}
  1114.  
  1115. <div class="posts" id="{PostID}">
  1116.  
  1117.  
  1118. {block:Text}
  1119. {block:Title}<h1>{Title}</h1>{/block:Title}
  1120. <div class="pp">{Body}</div>
  1121. {/block:Text}
  1122.  
  1123.  
  1124. {block:Photo}
  1125.  
  1126. <div class="photos">
  1127. <div class="non">{LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"></a>{LinkCloseTag}</div></div>
  1128.  
  1129. {block:Caption}{Caption}{/block:Caption}
  1130. {/block:Photo}
  1131.  
  1132.  
  1133. {block:Photoset}
  1134.  
  1135. <div class="photos">
  1136. <div class="non">
  1137. <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>
  1138. </div>
  1139. </div>
  1140.  
  1141. {block:Caption}{Caption}{/block:Caption}
  1142. {/block:Photoset}
  1143.  
  1144.  
  1145. {block:Quote}
  1146. <div class="quote">{Quote}</div>
  1147. {block:Source}<div class="quotesource"> — {Source}</div>
  1148. {/block:Source}{/block:Quote}
  1149.  
  1150.  
  1151. {block:Link}
  1152. <h1><div class="non"><a href="{URL}" {Target}>{Name} ⇾</a></div></h1>
  1153. {block:Description}{Description}{/block:Description}
  1154. {/block:Link}
  1155.  
  1156.  
  1157. {block:Chat}
  1158. {block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label {Alt}"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
  1159. {/block:Chat}
  1160.  
  1161.  
  1162. {block:Audio}
  1163. {block:AudioPlayer}
  1164. <div class="audiowrapper">
  1165. <div class="playerbutton">{AudioPlayer}</div>
  1166.  
  1167. <div class="trackdetails">
  1168. <b>TRACK:</b> {block:TrackName}{TrackName}{/block:TrackName}<br>
  1169.  
  1170. <b>ARTIST:</b> {block:Artist}{Artist}{/block:Artist}<br>
  1171.  
  1172. <b>PLAYS:</b> {FormattedPlayCount}</div>
  1173. </div><!--audiowrapper-->
  1174. {/block:AudioPlayer}
  1175.  
  1176. {block:Caption}
  1177. <div class="caption">{Caption}</div>
  1178. {/block:Caption}
  1179. {/block:Audio}
  1180.  
  1181.  
  1182. {block:Video}
  1183. <div class="video">{Video-500}</div>
  1184. {block:Caption}{Caption}{/block:Caption}
  1185. {/block:Video}
  1186.  
  1187.  
  1188. {block:Answer}
  1189. <div class="q-wrap">
  1190. <img class="askimg" src="{AskerPortraitURL-64}" ondragstart='return false;'>
  1191. <div class="question">
  1192. <div class="asker"><b>{Asker} asked:</b></div>
  1193. {Question}</div><!--question-->
  1194. </div><!--qwrap-->
  1195. <div class="answer">{Answer}</div><!--answer-->
  1196. {/block:Answer}
  1197.  
  1198. {block:IndexPage}
  1199. {block:ifshowtagsonfrontpage}
  1200. {block:HasTags}
  1201. <div class="tagsin nonn">
  1202. {block:Tags}
  1203. <a href="{TagURL}">#{Tag}</a>
  1204. {/block:Tags}
  1205. </div><!--tagsin-->
  1206. {/block:HasTags}
  1207. {/block:ifshowtagsonfrontpage}
  1208. {block:IndexPage}
  1209.  
  1210. {block:PermalinkPage}
  1211. {block:HasTags}
  1212. <div class="tagsin nonn">
  1213. {block:Tags}
  1214. <a href="{TagURL}">#{Tag}</a>
  1215. {/block:Tags}
  1216. </div><!--tagsin-->
  1217. {/block:HasTags}
  1218. {/block:PermalinkPage}
  1219.  
  1220.  
  1221. {block:IndexPage}
  1222. {block:Date}
  1223. <div class="permawrap">
  1224. <div class="perma nonn">
  1225. <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} {Year}</a>
  1226. <a href="{Permalink}">{NoteCountWithLabel}</a>
  1227. </div><!--perma-->
  1228.  
  1229.  
  1230. {Block:IndexPage}
  1231. <div class="vinegar non">
  1232.  
  1233. <!-- Like + Reblog buttons (2/2) -->
  1234. <div class="controls">
  1235.  
  1236. <a href="#" class="like" title="like this post?">{LikeButton}
  1237. <span class="sf sf-heart-2-o"></span>
  1238. </a>
  1239.  
  1240. <a href="{ReblogURL}" class="rb" title="reblog this post?" target="_blank" class="reblog">
  1241. <span class="sf sf-refresh-o"></span>
  1242. </a>
  1243.  
  1244. </div><!--controls-->
  1245. </div><!--vinegar-->
  1246. {/block:IndexPage}
  1247.  
  1248. </div><!--permawrap-->
  1249. {/block:Date}
  1250. {/block:IndexPage}
  1251.  
  1252.  
  1253.  
  1254.  
  1255. <!-----------PERMA ON PERMAPAGE----------->
  1256. {block:PermalinkPage}
  1257. {block:Date}
  1258. <div class="permawrap">
  1259.  
  1260. <div class="perma nonn">
  1261. <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} {Year}</a>
  1262. <a href="{Permalink}">{NoteCountWithLabel}</a>
  1263.  
  1264. {block:RebloggedFrom}
  1265. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1266. {block:ContentSource}
  1267. <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  1268. {/block:ContentSource}
  1269. {/block:RebloggedFrom}
  1270. </div><!--perma-->
  1271. </div><!--permawrap-->
  1272. {block:Date}
  1273. {block:PermalinkPage}
  1274.  
  1275.  
  1276.  
  1277. </div><!--posts-->
  1278.  
  1279.  
  1280. {block:PostNotes}
  1281. {PostNotes}
  1282. {/block:PostNotes}
  1283.  
  1284. {/block:Posts}
  1285.  
  1286. </div><!--semicontainer-->
  1287. </div><!--nudge-->
  1288. </div><!--cont-->
  1289. </div><!--lettuce-->
  1290.  
  1291. <script src="//dl.dropbox.com/s/m8mtje1avef2a2y/npf-styling.js"></script>
  1292. <script src="//cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1293.  
  1294. <script>
  1295. npfPhotosets(".posts", npfOptions); // .posts is your posts selector
  1296. </script>
  1297.  
  1298. </body>
  1299. </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!