API tools faq
paste
mhango

Grapefruit Theme (OLD VERSION)

mhango
Jun 14th, 2023
227
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="https://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5. <!--
  6.  
  7. Theme: Grapefruit by @mhango | @themesbyeva
  8. Version 1 (9th July 2021)
  9. This is the old version without the NPF / Text Post - Image Fix.
  10. Rules:
  11.  
  12. > don't alter / remove any credit
  13. > don't copy parts of this theme or use as a base code
  14. > don't edit this theme and redistribute
  15. > don't claim as your own
  16.  
  17. Credits / Resources:
  18.  
  19. > Base Code
  20. @shythemes
  21. > No.Js Photosets
  22. https://annasthms.github.io/photosets
  23. > Infinite Scroll
  24. https://infinite-scroll.com
  25. > Masonry
  26. https://masonry.desandro.com
  27. > Icons
  28. https://feathericons.com
  29. > Fonts
  30. https://fonts.google.com
  31. > Custom Tooltips
  32. https://manos.malihu.gr
  33. > Scroll To Top
  34. @painthemes
  35. > Hide / Show Effect
  36. @sophiasthemage
  37. > Un-nested Captions
  38. @neothm, @magnusthemes
  39. > Custom Like Button, Search Script, Load More
  40. @shythemes
  41. -->
  42.  
  43. <title>{Title}</title>
  44. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  45. <link rel="shortcut icon" href="{Favicon}">
  46. {block:Description}
  47. <meta name="description" content="{MetaDescription}">
  48. {/block:Description}
  49. <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  50.  
  51. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.7.2/jquery.smooth-scroll.min.js"></script>
  52.  
  53. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js">
  54. </script>
  55.  
  56. <meta name="viewport" content="width=device-width, initial-scale=1">
  57.  
  58. <meta name="image:Background" content="" />
  59. <meta name="image:Sidebar Icon" content="" />
  60.  
  61. <meta name="color:Background" content="#ffffff" />
  62. <meta name="color:Text" content="#000000" />
  63. <meta name="color:Link" content="#f69075" />
  64. <meta name="color:Link Hover" content="#ca6145" />
  65. <meta name="color:Accent" content="#ffcca7" />
  66. <meta name="color:Blockquote" content="#ffcca7" />
  67. <meta name="color:Blogtitle" content="#000000" />
  68. <meta name="color:Text Post Background" content="#fdefd2" />
  69. <meta name="color:Text Post Borders" content="#fdefd2" />
  70. <meta name="color:Text Post Icons" content="#000000" />
  71. <meta name="color:Photo Post Overlay" content="#000000" />
  72. <meta name="color:Photo Post Icons" content="#ffffff" />
  73. <meta name="color:Footer Background" content="#fdefd2" />
  74. <meta name="color:Sidebar Background" content="#fdefd2" />
  75. <meta name="color:Sidebar Borders" content="#fdefd2" />
  76. <meta name="color:Sidebar Text" content="#000000" />
  77. <meta name="color:Sidebar Icons" content="#000000" />
  78. <meta name="color:Tooltip Background" content="#000000" />
  79. <meta name="color:Tooltip Borders" content="#000000" />
  80. <meta name="color:Tooltip Text" content="#ffffff" />
  81. <meta name="color:Scrollbar" content="#ffcca7" />
  82. <meta name="color:Text Highlight" content="#ffcca7" />
  83.  
  84. <meta name="if:Infinite Scroll" content="1">
  85. <meta name="if:Manual Load" content="0">
  86. <meta name="if:Large Blogtitle" content="1">
  87. <meta name="if:Two Columns" content="0">
  88. <meta name="if:Three Columns" content="1">
  89. <meta name="if:Four Columns" content="0">
  90. <meta name="if:Dark Tumblr Controls" content="0">
  91. <meta name="if:Photo Captions On Hover" content="0">
  92. <meta name="if:Show Sidebar Icon" content="0"/>
  93. <meta name="if:Show Updates Tab" content="1"/>
  94.  
  95. <meta name="if:News Tab" content="1"/>
  96. <meta name="if:Stats Tab" content="1"/>
  97. <meta name="if:Blogs Tab" content="1"/>
  98. <meta name="if:Groups Tab" content="1"/>
  99. <meta name="if:Search Tab" content="1"/>
  100.  
  101. <meta name="text:News Title" content="NEWS" />
  102. <meta name="text:News Icon" content="info" />
  103. <meta name="text:News Text" content="your news go here" />
  104. <meta name="text:Stats Title" content="STATS" />
  105. <meta name="text:Stats Icon" content="bar-chart" />
  106. <meta name="text:Stats Text" content="your stats go here" />
  107. <meta name="text:Blogs Title" content="BLOGS" />
  108. <meta name="text:Blogs Icon" content="folder" />
  109. <meta name="text:Blog 1 Username" content="" />
  110. <meta name="text:Blog 2 Username" content="" />
  111. <meta name="text:Blog 3 Username" content="" />
  112. <meta name="text:Blog 4 Username" content="" />
  113. <meta name="text:Blog 5 Username" content="" />
  114. <meta name="text:Groups Title" content="GROUPS" />
  115. <meta name="text:Groups Icon" content="users" />
  116. <meta name="text:Group 1 Badge Code" content="badge code" />
  117. <meta name="text:Group 2 Badge Code" content="badge code" />
  118. <meta name="text:Group 3 Badge Code" content="badge code" />
  119. <meta name="text:Group 4 Badge Code" content="badge code" />
  120. <meta name="text:Group 5 Badge Code" content="badge code" />
  121. <meta name="text:Search Title" content="SEARCH" />
  122. <meta name="text:Search Icon" content="search" />
  123.  
  124. <meta name="text:Home Title" content="home">
  125. <meta name="text:Icons Info" content="Visit feathericons.com, find the icon of your choice and copy the name. Paste it below where you want it to be.">
  126. <meta name="text:Home Icon" content="home">
  127. <meta name="text:Ask Title" content="ask">
  128. <meta name="text:Ask Link" content="/ask">
  129. <meta name="text:Ask Icon" content="message-circle">
  130. <meta name="text:Submit Title" content="">
  131. <meta name="text:Submit Icon" content="upload">
  132. <meta name="text:Archive Title" content="past">
  133. <meta name="text:Archive Icon" content="archive">
  134. <meta name="text:Link 1 Title" content="" />
  135. <meta name="text:Link 1" content="" />
  136. <meta name="text:Link 1 Icon" content="star" />
  137. <meta name="text:Link 2 Title" content="" />
  138. <meta name="text:Link 2" content="" />
  139. <meta name="text:Link 2 Icon" content="paperclip" />
  140. <meta name="text:Link 3 Title" content="" />
  141. <meta name="text:Link 3" content="" />
  142. <meta name="text:Link 3 Icon" content="more-horizontal" />
  143. <meta name="text:Link 4 Title" content="" />
  144. <meta name="text:Link 4" content="" />
  145. <meta name="text:Link 4 Icon" content="user" />
  146. <meta name="text:Link 5 Title" content="" />
  147. <meta name="text:Link 5" content="" />
  148. <meta name="text:Link 5 Icon" content="info" />
  149. <meta name="text:Link 6 Title" content="" />
  150. <meta name="text:Link 6" content="" />
  151. <meta name="text:Link 6 Icon" content="grid" />
  152. <meta name="text:Link 7 Title" content="" />
  153. <meta name="text:Link 7" content="" />
  154. <meta name="text:Link 7 Icon" content="camera" />
  155.  
  156. <meta name="select:Body Font" content="'Avalon', Helvetica, Arial, sans-serif" title="Avalon">
  157. <meta name="select:Body Font" content="'Karla', Helvetica, Arial, sans-serif" title="Karla">
  158. <meta name="select:Body Font" content="'Lato', Helvetica, Arial, sans-serif" title="Lato">
  159. <meta name="select:Body Font" content="'Lora', Times New Roman, Times, serif" title="Lora">
  160. <meta name="select:Body Font" content="'Quicksand', Helvetica, Arial, sans-serif" title="Quicksand">
  161. <meta name="select:Body Font" content="'Raleway', Helvetica, Arial, sans-serif" title="Raleway">
  162. <meta name="select:Body Font" content="'Roboto', Helvetica, Arial, sans-serif" title="Roboto">
  163. <meta name="select:Body Font" content="'Roboto Condensed', Helvetica, Arial, sans-serif" title="Roboto Condensed">
  164. <meta name="select:Body Font" content="'Rubik', Helvetica, Arial, sans-serif" title="Rubik">
  165. <meta name="select:Body Font" content="'Source Serif Pro', Times New Roman, Times, serif" title="Source Serif Pro">
  166.  
  167. <meta name="select:Title Font" content="'Bilbo', cursive" title="Bilbo">
  168. <meta name="select:Title Font" content="'Liu Jian Mao Cao', cursive" title="Liu Jian Mao Cao">
  169. <meta name="select:Title Font" content="'Lexend Deca', Helvetica, Arial, sans-serif" title="Lexend Deca">
  170. <meta name="select:Title Font" content="'Ma Shan Zheng', cursive" title="Ma Shan Zheng">
  171. <meta name="select:Title Font" content="'Montserrat', Helvetica, Arial, sans-serif" title="Montserrat">
  172. <meta name="select:Title Font" content="'Nixie One', Helvetica, Arial, sans-serif" title="Nixie One">
  173. <meta name="select:Title Font" content="'Playfair Display', Helvetica, Arial, sans-serif" title="Playfair Display">
  174. <meta name="select:Title Font" content="'Poiret One', Helvetica, Arial, sans-serif" title="Poiret One">
  175. <meta name="select:Title Font" content="'Roboto Slab', Helvetica, Arial, sans-serif" title="Roboto Slab">
  176.  
  177. <meta name="select:Heading Font" content="'Lexend Deca', Helvetica, Arial, sans-serif" title="Lexend Deca">
  178. <meta name="select:Heading Font" content="'Montserrat', Helvetica, Arial, sans-serif" title="Montserrat">
  179. <meta name="select:Heading Font" content="'Nixie One', Helvetica, Arial, sans-serif" title="Nixie One">
  180. <meta name="select:Heading Font" content="'Playfair Display', Helvetica, Arial, sans-serif" title="Playfair Display">
  181. <meta name="select:Heading Font" content="'Poiret One', Helvetica, Arial, sans-serif" title="Poiret One">
  182. <meta name="select:Heading Font" content="'Roboto Slab', Helvetica, Arial, sans-serif" title="Roboto Slab">
  183.  
  184. <!-- google fonts -->
  185.  
  186. <link rel="preconnect" href="https://fonts.googleapis.com">
  187. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  188. <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Lato:wght@400;700&family=Lora:wght@400;700&family=Quicksand:wght@400;700&family=Raleway:wght@400;700&family=Roboto+Condensed:wght@400;700&family=Roboto:wght@400;700&family=Rubik:wght@400;700&family=Source+Serif+Pro:wght@400;700&display=swap" rel="stylesheet">
  189.  
  190. <link rel="preconnect" href="https://fonts.googleapis.com">
  191. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  192. <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&family=Montserrat:wght@400;700&family=Nixie+One&family=Playfair+Display:wght@400;700&family=Poiret+One&family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet">
  193.  
  194. <link rel="preconnect" href="https://fonts.googleapis.com">
  195. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  196. <link href="https://fonts.googleapis.com/css2?family=Bilbo&family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
  197.  
  198. <link rel="stylesheet" type="text/css" href="https://assets.tumblr.com/fonts/avalon/stylesheet.css?v=1">
  199.  
  200. <!-- jquery library -->
  201.  
  202. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  203.  
  204. <script>
  205. $(document).ready(function(){
  206. $("#newsclick").click(function(){
  207. $("#newsshow").slideToggle("slow");
  208. $("#statsshow").slideUp("fast");
  209. $("#blogsshow").slideUp("fast");
  210. $("#groupsshow").slideUp("fast");
  211. $("#searchshow").slideUp("fast");
  212. });
  213. });
  214. $(document).ready(function(){
  215. $("#statsclick").click(function(){
  216. $("#statsshow").slideToggle("slow");
  217. $("#newsshow").slideUp("fast");
  218. $("#blogsshow").slideUp("fast");
  219. $("#groupsshow").slideUp("fast");
  220. $("#searchshow").slideUp("fast");
  221. });
  222. });
  223. $(document).ready(function(){
  224. $("#blogsclick").click(function(){
  225. $("#blogsshow").slideToggle("slow");
  226. $("#statsshow").slideUp("fast");
  227. $("#newsshow").slideUp("fast");
  228. $("#groupsshow").slideUp("fast");
  229. $("#searchshow").slideUp("fast");
  230. });
  231. });
  232. $(document).ready(function(){
  233. $("#groupsclick").click(function(){
  234. $("#groupsshow").slideToggle("slow");
  235. $("#statsshow").slideUp("fast");
  236. $("#blogsshow").slideUp("fast");
  237. $("#newsshow").slideUp("fast");
  238. $("#searchshow").slideUp("fast");
  239. });
  240. });
  241. $(document).ready(function(){
  242. $("#searchclick").click(function(){
  243. $("#searchshow").slideToggle("slow");
  244. $("#statsshow").slideUp("fast");
  245. $("#blogsshow").slideUp("fast");
  246. $("#groupsshow").slideUp("fast");
  247. $("#newsshow").slideUp("fast");
  248. });
  249. });
  250. </script>
  251.  
  252. <style type="text/css">
  253.  
  254. body {
  255. background: {color:Background} url('{image:Background}');
  256. background-attachment:fixed;
  257. background-repeat:repeat;
  258. color: {color:text};
  259. font-family: {select:body font};
  260. font-size: 12px;
  261. margin: 0;
  262. padding: 0;
  263. -moz-osx-font-smoothing:grayscale;
  264. -webkit-font-smoothing:antialiased;
  265. font-smoothing:antialiased;
  266. }
  267.  
  268. a:link, a:active, a:visited {
  269. color: {color:link};
  270. text-decoration: none;
  271. outline: none;
  272. -webkit-transition: all 0.5s ease-in-out;
  273. -moz-transition: all 0.5s ease-in-out;
  274. -o-transition: all 0.5s ease-in-out;
  275. -ms-transition: all 0.5s ease-in-out;
  276. transition: all 0.5s ease-in-out;
  277. }
  278.  
  279. a:hover{
  280. color:{color:link hover};
  281. -webkit-transition: all 0.5s ease-in-out;
  282. -moz-transition: all 0.5s ease-in-out;
  283. -o-transition: all 0.5s ease-in-out;
  284. -ms-transition: all 0.5s ease-in-out;
  285. transition: all 0.5s ease-in-out;
  286.  
  287. }
  288.  
  289. i.cp, span.cp {
  290. font-weight:200;
  291. }
  292.  
  293. small, sub {
  294. font-size:1em;
  295. vertical-align:baseline;
  296. }
  297.  
  298. cite {
  299. font-style:normal;
  300. }
  301.  
  302. blockquote {
  303. margin: 0;
  304. padding-left: 0%;
  305. padding-right:0%;
  306. border-left:0px solid {color:blockquote};
  307. }
  308.  
  309. blockquote, ol, ul, pre {
  310. margin:0 0 .6em;
  311. }
  312.  
  313. h1, h2, h3, h4, h5, h6 {
  314. padding-top:0px;
  315. padding-bottom:5px;
  316. margin:0;
  317. font-size:1.5em;
  318. font-weight:normal;
  319. font-family:{select:Heading Font};
  320. }
  321.  
  322. .tumblr_video_container {
  323. max-width: 100%!important;
  324. height:auto;
  325. }
  326.  
  327. iframe, img, embed, object, video {
  328. max-width: 100%;
  329. }
  330.  
  331. img {
  332. border:0;
  333. max-width:100%;
  334. height:auto;
  335. }
  336.  
  337. hr {
  338. margin:1em 0;
  339. border:0;
  340. height:1px;
  341. -moz-box-sizing:border-box;
  342. box-sizing:border-box;
  343. background-color:{color:blockquote};
  344. }
  345.  
  346. ::-webkit-scrollbar-thumb{
  347. background-color: {color:scrollbar};
  348. border: 2px solid {color:background};
  349. height:auto;
  350. -moz-border-radius: 20%;
  351. border-radius: 20%;
  352. }
  353.  
  354. ::-webkit-scrollbar {
  355. height:auto;
  356. width:8px;
  357. background-color: {color:background};
  358. border: 4px solid {color:background};
  359. }
  360.  
  361. ::-moz-selection {
  362. background: {color:Text highlight};
  363. color: {color:text};
  364. }
  365.  
  366. ::selection {
  367. background: {color:Text highlight};
  368. color: {color:text};
  369. }
  370.  
  371.  
  372. #scroll:link, #scroll:visited {
  373. display: none;
  374. position: fixed;
  375. bottom: 20px;
  376. right: 20px;
  377. z-index:999999;
  378. }
  379.  
  380. #scroll i, #scroll svg {
  381. color:{color:text};
  382. width:20px;
  383. }
  384.  
  385. #s-m-t-tooltip {
  386. font-family: {select:body font};
  387. font-size:0.8em;
  388. color: {color:tooltip text};
  389. background-color:{color:tooltip background};
  390. text-align: center;
  391. max-width:150px;
  392. border: 1px solid {color:tooltip borders};
  393. overflow:auto;
  394. text-transform:uppercase;
  395. letter-spacing:0.028em;
  396. position: absolute;
  397. z-index: 999999999999;
  398. padding: .33em .66em .33em .66em;
  399. box-shadow:0 0 rgba(0,0,0,0.2);
  400. -webkit-transition: all 0.2s ease-in-out;
  401. -moz-transition: all 0.2s ease-in-out;
  402. transition: all 0.2s ease-in-out;
  403. margin:20px 0 15px 10px;
  404. }
  405.  
  406. #content {
  407. margin-top:50px;
  408. z-index:9998;
  409. position:absolute;
  410. float:center;
  411. background:{color:background};
  412. {block:indexpage}
  413. margin-left: 50%;
  414. transform: translate(-50%);
  415. width: min(28%,500px);
  416. {block:iftwocolumns}
  417. margin-left: 50%;
  418. transform: translate(-50%);
  419. width: min(37%,1070px);
  420. {/block:iftwocolumns}
  421. {block:ifthreecolumns}
  422. margin-left: 55%;
  423. transform: translate(-50%);
  424. width: min(55%,1640px);
  425. {/block:ifthreecolumns}
  426. {block:iffourcolumns}
  427. margin-left: 58%;
  428. transform: translate(-50%);
  429. width: min(70%,2150px);
  430. {/block:iffourcolumns}
  431. {/block:indexpage}
  432. {block:permalinkpage}
  433. width:min(28%,500px);
  434. margin-left: 50%;
  435. transform: translate(-50%);
  436. {/block:permalinkpage}
  437. }
  438.  
  439. @-webkit-keyframes cssAnimation {
  440. from{
  441. -webkit-transform: scale(0.871);}
  442. to{
  443. -webkit-transform:scale(1); }
  444. }
  445.  
  446. @-moz-keyframes cssAnimation {
  447. from{
  448. -moz-transform:scale(0.871);}
  449. to{
  450. -moz-transform: scale(1); }
  451. }
  452.  
  453. @-o-keyframes cssAnimation {
  454. from{
  455. -o-transform: scale(0.871);
  456. }
  457.  
  458. to{
  459. -o-transform: scale(1);}
  460. }
  461.  
  462. .entry {
  463. position:relative;
  464. background: {color:Background};
  465. border:none;
  466. height:auto;
  467. margin: 22px 0;
  468. {block:indexpage}
  469. padding: 0;
  470. -webkit-animation: cssAnimation 1s 1 ease-in-out;
  471. -moz-animation: cssAnimation 1s 1 ease-in-out;
  472. -o-animation: cssAnimation 1s 1 ease-in-out;
  473. {/block:indexpage}
  474. {block:PermalinkPage}
  475. width:100%;
  476. height:auto;
  477. padding: 0;
  478. {/block:PermalinkPage}
  479. }
  480. {block:indexpage}
  481.  
  482. .gutter-sizer {
  483. width: 0px;
  484. }
  485.  
  486. .grid-sizer, .entry {
  487. width: 100%;
  488. }
  489.  
  490. {block:iftwocolumns}
  491. .gutter-sizer {
  492. width: 70px;
  493. }
  494.  
  495. .grid-sizer, .entry {
  496. width: calc((100% - 70px)/2);
  497. }
  498. {/block:iftwocolumns}
  499.  
  500. {block:ifthreecolumns}
  501. .gutter-sizer {
  502. width: 70px;
  503. }
  504.  
  505. .grid-sizer, .entry {
  506. width: calc((100% - 140px)/3);
  507. }
  508. {/block:ifthreecolumns}
  509.  
  510. {block:iffourcolumns}
  511. .gutter-sizer {
  512. width: 50px;
  513. }
  514.  
  515. .grid-sizer, .entry {
  516. width: calc((100% - 150px)/4);
  517. }
  518. {/block:iffourcolumns}
  519.  
  520. {/block:indexpage}
  521. .entry:last-child {
  522. margin-bottom:5px;
  523. }
  524.  
  525. .entry img {
  526. display:block;
  527. }
  528.  
  529. .entry b {
  530. color:{color:accent};
  531. }
  532.  
  533. .pinned {
  534. text-align:center;
  535. position:absolute;
  536. margin-top:-5%;
  537. margin-left: 50%;
  538. transform: translate(-50%);
  539. z-index:9999999999999999999999999999999;
  540. }
  541.  
  542. .pinned svg {
  543. width:24px;
  544. fill:{color:background};
  545. z-index:9999999999999999999999999999999;
  546. }
  547.  
  548. #overlay{
  549. position:absolute;
  550. left:0px;
  551. top:0px;
  552. height:100%;
  553. width:100%;
  554. background: rgba({RGBcolor:Photo Post Overlay}, 0);
  555. box-sizing:border-box;
  556. z-index:999;
  557. -webkit-transition: all .5s ease-in-out;
  558. -moz-transition: all .5s ease-in-out;
  559. -ms-transition: all .5s ease-in-out;
  560. -o-transition: all .5s ease-in-out;
  561. transition: all .5s ease-in-out;
  562. }
  563.  
  564. .entry:hover #overlay {
  565. {block:indexpage}
  566. background: rgba({RGBcolor:Photo Post Overlay}, 0.4);
  567. -webkit-transition: all .5s ease-in-out;
  568. -moz-transition: all .5s ease-in-out;
  569. -ms-transition: all .5s ease-in-out;
  570. -o-transition: all .5s ease-in-out;
  571. transition: all .5s ease-in-out;
  572. {/block:indexpage}
  573. }
  574.  
  575. .permabutton, .reblogbutton, .heartbutton {
  576. {block:indexpage}
  577. position:absolute;
  578. width:auto;
  579. display:inline-block;
  580. z-index:999999;
  581. -webkit-transition: all 0.5s ease-in-out;
  582. -moz-transition: all 0.5s ease-in-out;
  583. -o-transition: all 0.5s ease-in-out;
  584. -ms-transition: all 0.5s ease-in-out;
  585. transition: all 0.5s ease-in-out;
  586. text-transform:uppercase;
  587. margin:8px;
  588. opacity:0;
  589. {/block:indexpage}
  590. }
  591.  
  592. .permabutton {
  593. bottom:2px;
  594. right:2px;
  595. }
  596.  
  597. .reblogbutton {
  598. bottom:27px;
  599. right:2px;
  600. }
  601.  
  602. .heartbutton {
  603. bottom:52px;
  604. right:2px;
  605. }
  606.  
  607. .permabutton svg, .reblogbutton svg, .heartbutton svg {
  608. width:18px;
  609. vertical-align:middle;
  610. }
  611.  
  612. .permabutton a, .permabutton a:visited,
  613. .reblogbutton a, .reblogbutton a:visited,
  614. .heartbutton a, .heartbutton a:visited{
  615. color: {color:photo post icons};
  616. text-decoration: none;
  617. -webkit-transition: all 0.5s ease-in-out;
  618. -moz-transition: all 0.5s ease-in-out;
  619. -o-transition: all 0.5s ease-in-out;
  620. -ms-transition: all 0.5s ease-in-out;
  621. transition: all 0.5s ease-in-out;
  622. }
  623.  
  624. .permabutton a:hover, .reblogbutton a:hover, .heartbutton a:hover {
  625. color: {color:link hover};
  626. -webkit-transition: all 0.5sease-in-out;
  627. -moz-transition: all 0.5s ease-in-out;
  628. -o-transition: all 0.5s ease-in-out;
  629. -ms-transition: all 0.5s ease-in-out;
  630. transition: all 0.5s ease-in-out;
  631. }
  632.  
  633. .blogcaption {
  634. {block:indexpage}
  635. opacity:0;
  636. padding:10px;
  637. max-height:100%;
  638. max-width:100%;
  639. overflow:auto;
  640. color: {color:photo post icons};
  641. -webkit-transition: all 0.5s ease-in-out;
  642. -moz-transition: all 0.5s ease-in-out;
  643. -o-transition: all 0.5s ease-in-out;
  644. -ms-transition: all 0.5s ease-in-out;
  645. transition: all 0.5s ease-in-out;
  646. {/block:indexpage}
  647. }
  648.  
  649. .blogcaption a {
  650. {block:indexpage}
  651. color: {color:photo post icons};
  652. text-decoration:underline;
  653. -webkit-transition: all 0.5s ease-in-out;
  654. -moz-transition: all 0.5s ease-in-out;
  655. -o-transition: all 0.5s ease-in-out;
  656. -ms-transition: all 0.5s ease-in-out;
  657. transition: all 0.5s ease-in-out;
  658. {/block:indexpage}
  659. }
  660.  
  661. .blogcaption a:hover {
  662. {block:indexpage}
  663. color: {color:link hover};
  664. text-decoration:underline;
  665. -webkit-transition: all 0.5s ease-in-out;
  666. -moz-transition: all 0.5s ease-in-out;
  667. -o-transition: all 0.5s ease-in-out;
  668. -ms-transition: all 0.5s ease-in-out;
  669. transition: all 0.5s ease-in-out;
  670. {/block:indexpage}
  671. }
  672.  
  673.  
  674.  
  675.  
  676. .entry:hover .permabutton, .entry:hover .reblogbutton, .entry:hover .heartbutton, .entry:hover .blogcaption {
  677. {block:indexpage}
  678. opacity:1;
  679. -webkit-transition: all 0.5s ease-in-out;
  680. -moz-transition: all 0.5s ease-in-out;
  681. -o-transition: all 0.5s ease-in-out;
  682. -ms-transition: all 0.5s ease-in-out;
  683. transition: all 0.5s ease-in-out;
  684. {/block:indexpage}
  685.  
  686. }
  687.  
  688. .permatext, .reblogtext, .hearttext {
  689. {block:indexpage}
  690. background:{color:text post background};
  691. position:absolute;
  692. width:auto;
  693. display:inline-block;
  694. z-index:999999;
  695. -webkit-transition: all 0.5s ease-in-out;
  696. -moz-transition: all 0.5s ease-in-out;
  697. -o-transition: all 0.5s ease-in-out;
  698. -ms-transition: all 0.5s ease-in-out;
  699. transition: all 0.5s ease-in-out;
  700. text-transform:uppercase;
  701. margin:8px;
  702. opacity:0;
  703. -moz-border-radius: 20%;
  704. border-radius:20%;
  705. {/block:indexpage}
  706. }
  707.  
  708. .permatext {
  709. bottom:2px;
  710. right:2px;
  711. }
  712.  
  713. .reblogtext {
  714. bottom:27px;
  715. right:2px;
  716. }
  717.  
  718. .hearttext {
  719. bottom:52px;
  720. right:2px;
  721. }
  722.  
  723. .permatext svg, .reblogtext svg, .hearttext svg, .notebox svg {
  724. width:16px;
  725. vertical-align:middle;
  726. }
  727.  
  728. .permatext a, .permatext a:visited,
  729. .reblogtext a, .reblogtext a:visited,
  730. .hearttext a, .hearttext a:visited,
  731. .notebox a, .notebox a:visited {
  732. color: {color:text post icons};
  733. text-decoration: none;
  734. -webkit-transition: all 0.5s ease-in-out;
  735. -moz-transition: all 0.5s ease-in-out;
  736. -o-transition: all 0.5s ease-in-out;
  737. -ms-transition: all 0.5s ease-in-out;
  738. transition: all 0.5s ease-in-out;
  739. }
  740.  
  741. .permatext a:hover, .reblogtext a:hover, .hearttext a:hover, .notebox a:hover {
  742. color: {color:link hover};
  743. -webkit-transition: all 0.5s ease-in-out;
  744. -moz-transition: all 0.5s ease-in-out;
  745. -o-transition: all 0.5s ease-in-out;
  746. -ms-transition: all 0.5s ease-in-out;
  747. transition: all 0.5s ease-in-out;
  748. }
  749.  
  750. .entry:hover .permatext, .entry:hover .reblogtext, .entry:hover .hearttext {
  751. {block:indexpage}
  752. opacity:1;
  753. -webkit-transition: all 0.5s ease-in-out;
  754. -moz-transition: all 0.5s ease-in-out;
  755. -o-transition: all 0.5s ease-in-out;
  756. -ms-transition: all 0.5s ease-in-out;
  757. transition: all 0.5s ease-in-out;
  758. {/block:indexpage}
  759.  
  760. }
  761.  
  762. .notebox {
  763. background:{color:Text Post Background};
  764. width:auto;
  765. height:auto;
  766. text-align:center;
  767. }
  768.  
  769. .notebox svg {
  770. display:inline-block;
  771. padding: 10px;
  772. }
  773.  
  774. .controls i, .controls svg {
  775. height:auto;
  776. overflow:visible;
  777. }
  778. .controls a {
  779. position:relative;
  780. overflow:hidden;
  781. /*padding:5px;
  782. width:12px;
  783. height:12px;*/
  784. }
  785.  
  786. .controls .like .liked + svg {
  787. color:#ec5a5a;
  788. }
  789. .controls .like .like_button {
  790. position:relative;
  791. }
  792. .controls .like .like_button iframe {
  793. position:absolute;
  794. top:0;
  795. left:0;
  796. bottom:0;
  797. right:0;
  798. z-index:2;
  799. opacity:0;
  800. }
  801.  
  802. {block:permalinkpage}
  803.  
  804. .details {
  805. background:{color:footer background};
  806. border-top:1px solid {color:footer background};
  807. border-bottom:1px solid {color:Text Post Borders};
  808. border-left:1px solid {color:Text Post Borders};
  809. border-right:1px solid {color:Text Post Borders};
  810. padding-bottom:10px;
  811. }
  812.  
  813. {/block:permalinkpage}
  814.  
  815. #sidebar {
  816. background:{color:sidebar background};
  817. padding: 1.2%;
  818. color: {color:sidebar text};
  819. height:auto;
  820. width:12%;
  821. top:72px;
  822. left: 5%;
  823. position:fixed;
  824. margin:auto;
  825. text-align:center;
  826. border:1px solid {color:sidebar Borders};
  827. z-index:99999;
  828. }
  829.  
  830. .sideicon {
  831. width:70px;
  832. height:70px;
  833. margin:-60px auto 0px auto;
  834. }
  835.  
  836. .sideicon img {
  837. width:70px;
  838. height:70px;
  839. border:1px solid {color:Sidebar Borders};
  840. -moz-border-radius: 100%;
  841. border-radius:100%;
  842. }
  843.  
  844. .blogtitle {
  845. position:relative;
  846. text-align:center;
  847. display:inline-block;
  848. margin:5px;
  849. margin-bottom:8px;
  850. letter-spacing:.8px;
  851. }
  852.  
  853. .blogtitle a, .blogtitle a:visited {
  854. {block:iflargeblogtitle}
  855. font-size:2.2em;
  856. {/block:iflargeblogtitle}
  857. {block:ifnotlargeblogtitle}
  858. font-size:1.8em;
  859. {/block:ifnotlargeblogtitle}
  860. font-weight:400;
  861. font-family:{select:title font};
  862. color: {color:blogtitle};
  863. -webkit-transition: all 0.5s ease-in-out;
  864. -moz-transition: all 0.5s ease-in-out;
  865. -o-transition: all 0.5s ease-in-out;
  866. -ms-transition: all 0.5s ease-in-out;
  867. transition: all 0.5s ease-in-out;
  868. }
  869.  
  870. .blogtitle a:hover{
  871. color: {color:link hover};
  872. -webkit-transition: all 0.5s ease-in-out;
  873. -moz-transition: all 0.5s ease-in-out;
  874. -o-transition: all 0.5s ease-in-out;
  875. -ms-transition: all 0.5s ease-in-out;
  876. transition: all 0.5s ease-in-out;
  877. }
  878.  
  879. .description {
  880. margin:5px;
  881.  
  882. }
  883.  
  884. .navigation {
  885. text-align:center;
  886. position:relative;
  887. margin-bottom:-5px;
  888. }
  889.  
  890. .navi {
  891. background:{color:sidebar background};
  892. display:inline-block;
  893. margin:5px;
  894. padding:5px;
  895. }
  896.  
  897. .navi a {
  898. color: {color:sidebar icons};
  899. font-size:1.33em;
  900. -webkit-transition: all 0.5s ease-in-out;
  901. -moz-transition: all 0.5s ease-in-out;
  902. -o-transition: all 0.5s ease-in-out;
  903. -ms-transition: all 0.5s ease-in-out;
  904. transition: all 0.5s ease-in-out;
  905. }
  906.  
  907. .navi a:hover {
  908. color: {color:link hover};
  909. font-size:1.33em;
  910. -webkit-transition: all 0.5s ease-in-out;
  911. -moz-transition: all 0.5s ease-in-out;
  912. -o-transition: all 0.5s ease-in-out;
  913. -ms-transition: all 0.5s ease-in-out;
  914. transition: all 0.5s ease-in-out;
  915. }
  916.  
  917. .navi svg {
  918. width:18px;
  919. }
  920.  
  921. nav li {
  922. display:inline;
  923. }
  924.  
  925. .search .query {
  926. border: 1px solid {color:sidebar icons};
  927. -moz-border-radius: 5%;
  928. border-radius:5%;
  929. outline: 0;
  930. padding: 5px;
  931. font-family: inherit;
  932. font-size: inherit;
  933. color: inherit;
  934. background-color: transparent;
  935. }
  936.  
  937. ::-webkit-input-placeholder {color: inherit;}
  938. :-moz-placeholder {color: inherit; opacity:1;}
  939. ::-moz-placeholder {color: inherit; opacity:1;}
  940. :-ms-input-placeholder {color: inherit;}
  941.  
  942. input:focus::-webkit-input-placeholder {color: transparent;}
  943. input:focus:-moz-placeholder {color: transparent;}
  944. input:focus::-moz-placeholder {color: transparent;}
  945. input:focus:-ms-input-placeholder { color: transparent;}
  946.  
  947. /* text post styles */
  948.  
  949. .title {
  950. padding-top:0px;
  951. padding-bottom:5px;
  952. font-size:1.35em;
  953. font-weight:normal;
  954. font-family:{select:Heading Font};
  955. }
  956.  
  957. .title a {
  958. color:{color:text};
  959. text-decoration: none;
  960. -webkit-transition: all 0.5s ease-in-out;
  961. -moz-transition: all 0.5s ease-in-out;
  962. -o-transition: all 0.5s ease-in-out;
  963. -ms-transition: all 0.5s ease-in-out;
  964. transition: all 0.5s ease-in-out;
  965. }
  966.  
  967. .title a:hover {
  968. color:{color:link hover};
  969. -webkit-transition: all 0.5s ease-in-out;
  970. -moz-transition: all 0.5s ease-in-out;
  971. -o-transition: all 0.5s ease-in-out;
  972. -ms-transition: all 0.5s ease-in-out;
  973. transition: all 0.5s ease-in-out;
  974. }
  975.  
  976. .title img {
  977. width:15px;
  978. }
  979.  
  980. .accent,
  981. .tumblr_blog {
  982. color:{color:accent};
  983. }
  984.  
  985. .text {
  986. background:{color:Text Post Background};
  987. padding: 10px;
  988. border:1px solid {color:Text Post Borders};
  989. }
  990.  
  991. .text a, .text img {
  992. max-width:100%;
  993. }
  994.  
  995. .text img {
  996. text-align:center;
  997. margin:auto;
  998. }
  999.  
  1000. [photoset-layout] {
  1001. grid-gap: 2px;
  1002. }
  1003.  
  1004. .npf_row {
  1005. max-width:100%;
  1006. height:auto;
  1007. transform:translate(20px);
  1008. }
  1009.  
  1010. .ask {
  1011. padding-bottom:7px;
  1012. border-bottom: 1px solid {color:blockquote};
  1013. }
  1014.  
  1015. .asker, .asker a {
  1016. color:{color:link};
  1017. font-weight:700;
  1018. margin-bottom:5px;
  1019. }
  1020.  
  1021. .quotetext, p.npf_quote {
  1022. font-size:1.1em;
  1023. font-weight:700;
  1024. font-family: {select:Heading Font};
  1025. }
  1026.  
  1027. .quotesource, p.npf_quote+p {
  1028. padding-top:5px;
  1029. padding-bottom:5px;
  1030. }
  1031.  
  1032. .chat {
  1033. background:{color:Text Post Background};
  1034. padding: 10px;
  1035. border:1px solid {color:Text Post Borders};
  1036. }
  1037.  
  1038. .chat .label, p.npf_chat b {
  1039. font-weight:700;
  1040. }
  1041.  
  1042. .chat span {
  1043. float: left;
  1044. margin-right: 1%;
  1045. }
  1046.  
  1047. .npf_chat {
  1048. font-family:{select:body font};
  1049. }
  1050.  
  1051. .spotify_audio_player, .soundcloud_audio_player {
  1052. margin-bottom:-3px;
  1053. }
  1054.  
  1055. .spotify_audio_player {
  1056. height:80px!important;
  1057. width:100%!important;
  1058. }
  1059.  
  1060. .soundcloud_audio_player {
  1061. height:150px!important;
  1062. width:100%!important;
  1063. }
  1064.  
  1065. #notes {
  1066. margin-top:5px;
  1067. display:inline-block;
  1068. }
  1069.  
  1070. #notes img {
  1071. display:inline-block;
  1072. }
  1073.  
  1074. .notes {
  1075. clear: both;
  1076. padding: 0;
  1077. }
  1078.  
  1079. ol.notes {
  1080. list-style-type:none;
  1081. line-height:150%;
  1082. padding:0;
  1083. margin 0 0;
  1084. border-bottom:solid 1px {color:blockquote};
  1085. }
  1086.  
  1087. ol.notes li.note {
  1088. border-top:1px solid {color:blockquote};
  1089. padding:5px;
  1090. }
  1091.  
  1092. ol.notes li.note img {
  1093. padding:0 !important;
  1094. }
  1095.  
  1096. ol.notes li.note img.avatar {
  1097. vertical-align:-4px;
  1098. margin-right:5px;
  1099. width:16px;
  1100. height:16px;
  1101. }
  1102.  
  1103. #tags {
  1104. text-align:left;
  1105. opacity: 1;
  1106. }
  1107.  
  1108. #tags, nav ul, .chat ul {
  1109. list-style: none;
  1110. list-style-image: none;
  1111. margin: 0;
  1112. padding: 0;
  1113. }
  1114.  
  1115. #tags li {
  1116. float: left;
  1117. margin-right: 1%;
  1118. }
  1119.  
  1120. .caption {
  1121. margin:10px 20px;
  1122. }
  1123.  
  1124. .caption ul {
  1125. margin: 0;
  1126. padding: 0;
  1127. line-height:150%;
  1128. }
  1129.  
  1130. .blogcaption ul {
  1131. list-style: disc outside none;
  1132. margin: 0 0 10px 20px;
  1133. padding: 0;
  1134. }
  1135.  
  1136. .tagsandmore ul {
  1137. list-style:none;
  1138. list-style-type:none;
  1139. }
  1140.  
  1141. .infoheading {
  1142. font-weight:700;
  1143. color:{color:text};
  1144. }
  1145.  
  1146. .media {
  1147. position:relative;
  1148. display:inline-block;
  1149. width:100%;
  1150. }
  1151.  
  1152. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  1153. position:fixed!important;
  1154. opacity:.67!important;
  1155. padding:4px;
  1156. z-index:99999999999999999999999;
  1157. {block:ifdarktumblrcontrols}
  1158. -webkit-filter:invert(100%);
  1159. -moz-filter:invert(100%);
  1160. -o-filter:invert(100%);
  1161. -ms-filter:invert(100%);
  1162. filter:invert(100%);
  1163. {/block:ifdarktumblrcontrols}
  1164. }
  1165.  
  1166. .tmblr-iframe--controls-phone-container,
  1167. .iframe-controls--phone-mobile,
  1168. .tmblr-iframe--app-cta-button {
  1169. z-index:999999999999999999999999999999999999999999999999999999!important;
  1170. position:fixed!important;
  1171. margin:0!important;
  1172. }
  1173.  
  1174.  
  1175. {block:ifInfiniteScroll}
  1176. .pagination,
  1177. #infscr-loading {
  1178. display:none!important;
  1179. }
  1180. {/block:ifInfiniteScroll}
  1181.  
  1182. {block:ifManualLoad}
  1183.  
  1184. .load-more {
  1185. position:fixed;
  1186. bottom:5px;
  1187. text-align:center;
  1188. background:{color:blockquote};
  1189. border:1px solid {color:blockquote};
  1190. padding:10px;
  1191. margin-left: 50%;
  1192. transform: translate(-50%);
  1193. font-size:1.2em;
  1194. text-transform:uppercase;
  1195. color:{color:text};
  1196. }
  1197.  
  1198. .load-more a , .load-more a:active , .load-more a:visited {
  1199. color:{color:text};
  1200. }
  1201.  
  1202. {/block:ifManualLoad}
  1203.  
  1204. {block:ifnotManualLoad}
  1205.  
  1206. .load-more {
  1207. display:none;
  1208. }
  1209.  
  1210. {/block:ifnotManualLoad}
  1211.  
  1212.  
  1213. {block:ifnotInfiniteScroll}
  1214. .pagination {
  1215. margin-bottom:0;
  1216. text-align:center;
  1217. width:auto;
  1218. z-index:9999999999999999999999999999;
  1219. }
  1220.  
  1221. .pagination img, .pagination i, .pagination svg {
  1222. width:18px;
  1223. font-size:1.5em;
  1224. display:inline-block;
  1225. padding:10px 10px 0 10px;
  1226. color:{color:text};
  1227. }
  1228. {/block:ifnotInfiniteScroll}
  1229.  
  1230. #hovertab {
  1231. color: {color:sidebar text};
  1232. height:auto;
  1233. width:14.4%;
  1234. left: 5%;
  1235. position:fixed;
  1236. margin:auto;
  1237. text-align:left;
  1238. margin-top:30px;
  1239. z-index:99999;
  1240. transition: all .5s ease-in-out;
  1241. -webkit-transition: all .5s ease-in-out;
  1242. -moz-transition: all .5s ease-in-out;
  1243. -o-transition: all .5s ease-in-out;
  1244. -ms-transition: all .5s ease-in-out;
  1245. }
  1246.  
  1247. .hovertitle {
  1248. font-weight:700;
  1249. margin-bottom:5px;
  1250. }
  1251.  
  1252. .pluginbuttons {
  1253. text-align:center;
  1254. }
  1255.  
  1256. .pluginbutton {
  1257. background:{color:sidebar background};
  1258. display:inline-block;
  1259. margin:5px;
  1260. padding:2px 5px 8px 5px;
  1261. border:1px solid {color:sidebar borders};
  1262. width:18px;
  1263. height:18px;
  1264. -webkit-transition: all 0.5s ease-in-out;
  1265. -moz-transition: all 0.5s ease-in-out;
  1266. -o-transition: all 0.5s ease-in-out;
  1267. -ms-transition: all 0.5s ease-in-out;
  1268. transition: all 0.5s ease-in-out;
  1269. }
  1270.  
  1271. .pluginbutton svg {
  1272. width:18px;
  1273. color:{color:sidebar icons};
  1274. }
  1275.  
  1276. .pluginbody {
  1277. width:calc(100% - 20px);
  1278. height:auto;
  1279. background:{color:sidebar background};
  1280. padding:10px;
  1281. margin-top:10px;
  1282. border:1px solid {color:sidebar borders};
  1283. color:{color:sidebar icons};
  1284. }
  1285.  
  1286. .pluginbody img {
  1287. width:28px;
  1288. height:auto;
  1289. border-radius:100%;
  1290. -moz-border-radius: 100%;
  1291. display:inline-block;
  1292. padding:0 2px;
  1293. }
  1294.  
  1295. #statsclick,#blogsclick, #newsclick, #groupsclick, #searchclick {cursor:help;}
  1296. #statsshow, #blogsshow, #newsshow, #groupsshow, #searchshow {display:none;}
  1297.  
  1298.  
  1299.  
  1300. #important, #important i, #important svg {
  1301. bottom:2px;
  1302. left:5px;
  1303. width:15px;
  1304. font-size:1.1em;
  1305. position:fixed;
  1306. z-index:9999999999999999999999999999;
  1307. color:{color:text};
  1308. }
  1309.  
  1310. @media only screen and (max-width:1024px) {
  1311.  
  1312. body {
  1313. max-width:100vw;
  1314. overflow-x:hidden;
  1315. }
  1316.  
  1317. #content {
  1318. max-width:100%;
  1319. width:min(80%,500px);
  1320. margin-top:25px;
  1321. background:{color:background};
  1322. height:auto;
  1323. margin-left: 50%;
  1324. transform: translate(-50%);
  1325. }
  1326.  
  1327. .gutter-sizer {
  1328. width: 0px;
  1329. }
  1330.  
  1331. .grid-sizer, .entry {
  1332. width: calc((100% - 0px));
  1333. }
  1334.  
  1335. #sidebar {
  1336. padding:1%;
  1337. top:0;
  1338. left:0;
  1339. width:100%;
  1340. height:auto;
  1341. max-width:100vw;
  1342. overflow-x:hidden;
  1343. position:relative;
  1344. margin-top:auto;
  1345. }
  1346.  
  1347. .sideicon {
  1348. display:none;
  1349. }
  1350.  
  1351. .navigation {
  1352. padding: 0 5%;
  1353. }
  1354.  
  1355. #scroll:link, #scroll:visited {
  1356. bottom:10px;
  1357. right:5px;
  1358. }
  1359.  
  1360. #important {
  1361. bottom:10px;
  1362. left:5px;
  1363. }
  1364.  
  1365. #hovertab {
  1366. display:none;
  1367. }
  1368.  
  1369. }
  1370.  
  1371. </style>
  1372.  
  1373. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  1374.  
  1375. </head>
  1376.  
  1377. <body>
  1378.  
  1379. <div id="sidebar">
  1380.  
  1381. {block:ifShowSidebarIcon}<div class="sideicon"><img src="{image:Sidebar icon}"></div>{/block:ifShowSidebarIcon}
  1382.  
  1383. <div class="navigation">
  1384.  
  1385. <div class="blogtitle"><a href="/">{Title}</a></div>
  1386.  
  1387. <div class="description">{Description}</div>
  1388.  
  1389. <div class="navi"><a href="/" title="{text:home title}"><i data-feather="{text:home icon}"></i></a></div>
  1390. {block:ifasktitle}<div class="navi"><a href="{text:ask link}" title="{text:ask title}"><i data-feather="{text:ask icon}"></i></a></div>{/block:ifasktitle}
  1391. {block:ifsubmittitle}
  1392. <div class="navi"><a href="/submit" title="{text:submit title}"><i data-feather="{text:submit icon}"></i></a></div>{/block:ifsubmittitle}
  1393. <div class="navi"><a href="/archive" title="{text:archive title}"><i data-feather="{text:archive icon}"></i></div>
  1394.  
  1395. {block:iflink1}<div class="navi"><a href="{text:link 1}" title="{text:link 1 title}"><i data-feather="{text:link 1 icon}"></i></a></div>{/block:iflink1}
  1396. {block:iflink2}<div class="navi"><a href="{text:link 2}" title="{text:link 2 title}"><i data-feather="{text:link 2 icon}"></i></a></div>{/block:iflink2}
  1397. {block:iflink3}<div class="navi"><a href="{text:link 3}" title="{text:link 3 title}"><i data-feather="{text:link 3 icon}"></i></a></div>{/block:iflink3}
  1398. {block:iflink4}<div class="navi"><a href="{text:link 4}" title="{text:link 4 title}"><i data-feather="{text:link 4 icon}"></i></a></div>{/block:iflink4}
  1399. {block:iflink5}<div class="navi"><a href="{text:link 5}" title="{text:link 5 title}"><i data-feather="{text:link 5 icon}"></i></a></div>{/block:iflink5}
  1400. {block:iflink6}<div class="navi"><a href="{text:link 6}" title="{text:link 6 title}"><i data-feather="{text:link 6 icon}"></i></a></div>{/block:iflink6}
  1401. {block:iflink7}<div class="navi"><a href="{text:link 7}" title="{text:link 7 title}"><i data-feather="{text:link 7 icon}"></i></a></div>{/block:iflink7}
  1402.  
  1403.  
  1404. <div class="navi"><a href="https://mhango.tumblr.com" title="theme" target="_blank"><i data-feather="code"></i></a></div>
  1405.  
  1406. <!-- {block:HasPages}
  1407. {block:Pages}
  1408. <div class="nav"><a href="{URL}">{Label}</a>
  1409. {/block:Pages}
  1410. {/block:HasPages}-->
  1411.  
  1412. </div>
  1413.  
  1414.  
  1415. {block:Pagination}<div class="pagination">{block:PreviousPage}<a class="prev" href="{PreviousPage}" title="previous"><i data-feather="chevron-left"></i></a>{/block:PreviousPage} {block:NextPage}<a class="next" href="{NextPage}" title="next"><i data-feather="chevron-right"></i></a>{/block:NextPage}</div>{/block:Pagination}
  1416.  
  1417. {block:ifshowupdatestab}
  1418. <div id="hovertab">
  1419. <div class="pluginbuttons">
  1420. <div id="newsclick" class="pluginbutton" title="{text:news title}"><i data-feather="{text:news icon}"></i></div>
  1421. <div id="statsclick" class="pluginbutton" title="{text:stats title}"><i data-feather="{text:stats icon}"></i></div>
  1422. <div id="blogsclick" class="pluginbutton" title="{text:blogs title}"><i data-feather="{text:blogs icon}"></i></div>
  1423. <div id="groupsclick" class="pluginbutton" title="{text:groups title}"><i data-feather="{text:groups icon}"></i></div>
  1424. <div id="searchclick" class="pluginbutton" title="{text:search title}"><i data-feather="{text:search icon}"></i></div></div>
  1425. {block:ifnewstab}
  1426. <div id="newsshow" class="pluginbody">
  1427. <div class="hovertitle">{text:news title}</div>
  1428. {text:news text}
  1429. </div>
  1430. {/block:ifnewstab}
  1431. {block:ifstatstab}
  1432. <div id="statsshow" class="pluginbody">
  1433. <div class="hovertitle">{text:stats title}</div>
  1434. {text:stats text}
  1435. </div>
  1436. {/block:ifstatstab}
  1437. {block:ifblogstab}
  1438. <div id="blogsshow" class="pluginbody">
  1439. <div class="hovertitle">{text:blogs title}</div>
  1440. <center>
  1441. {block:ifblog1username}<a href="https://{text:blog 1 username}.tumblr.com" title="{text:blog 1 username}" target="_blank"><img src="https://api.tumblr.com/v2/blog/{text:blog 1 username}.tumblr.com/avatar/512"></a>{/block:ifblog1username}
  1442. {block:ifblog2username}<a href="https://{text:blog 2 username}.tumblr.com" title="{text:blog 2 username}" target="_blank"><img src="https://api.tumblr.com/v2/blog/{text:blog 2 username}.tumblr.com/avatar/512"></a>{/block:ifblog2username}
  1443. {block:ifblog3username}<a href="https://{text:blog 3 username}.tumblr.com" title="{text:blog 3 username}" target="_blank"><img src="https://api.tumblr.com/v2/blog/{text:blog 3 username}.tumblr.com/avatar/512"></a>{/block:ifblog3username}
  1444. {block:ifblog4username}<a href="https://{text:blog 4 username}.tumblr.com" title="{text:blog 4 username}" target="_blank"><img src="https://api.tumblr.com/v2/blog/{text:blog 4 username}.tumblr.com/avatar/512"></a>{/block:ifblog4username}
  1445. {block:ifblog5username}<a href="https://{text:blog 5 username}.tumblr.com" title="{text:blog 5 username}" target="_blank"><img src="https://api.tumblr.com/v2/blog/{text:blog 5 username}.tumblr.com/avatar/512"></a>{/block:ifblog5username}
  1446. </center>
  1447. </div>
  1448. {/block:ifblogstab}
  1449. {block:ifgroupstab}
  1450. <div id="groupsshow" class="pluginbody">
  1451. <div class="hovertitle">{text:groups title}</div>
  1452. <center>
  1453. {block:ifGroup1badgecode}{text:Group 1 Badge Code}{/block:ifGroup1badgecode}
  1454. {block:ifGroup2badgecode}{text:Group 2 Badge Code}{/block:ifGroup2badgecode}
  1455. {block:ifGroup3badgecode}{text:Group 3 Badge Code}{/block:ifGroup3badgecode}
  1456. {block:ifGroup4badgecode}{text:Group 4 Badge Code}{/block:ifGroup4badgecode}
  1457. {block:ifGroup5badgecode}{text:Group 5 Badge Code}{/block:ifGroup5badgecode}
  1458. </center>
  1459. </div>
  1460. {/block:ifgroupstab}
  1461. {block:ifsearchtab}
  1462. <div id="searchshow" class="pluginbody">
  1463. <div class="hovertitle">{text:search title}</div>
  1464. <form class="search" action="javascript:return false">
  1465. <input type="text" class="query" placeholder="&nbsp;">
  1466. </form>
  1467. </div>
  1468. {/block:ifsearchtab}
  1469. </div>
  1470. {/block:ifshowupdatestab}
  1471.  
  1472. </div>
  1473.  
  1474.  
  1475.  
  1476. <div id="content">
  1477.  
  1478. {block:Posts}
  1479.  
  1480. {block:ContentSource}<!-- {SourceURL}
  1481. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1482. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1483. {/block:ContentSource}
  1484.  
  1485. <!-- {block:NoRebloggedFrom}
  1486. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1487. {/block:NoRebloggedFrom} -->
  1488.  
  1489. <div class="entry" id="{PostID}">
  1490.  
  1491. <div class="grid-sizer"></div>
  1492. <div class="gutter-sizer"></div>
  1493.  
  1494. {block:indexpage}
  1495. {block:PinnedPostLabel}<div class="pinned" title="pinned"><i data-feather="hexagon"></i></div>{/block:PinnedPostLabel}
  1496. {/block:indexpage}
  1497.  
  1498. {block:Text}
  1499.  
  1500. <div class="text">
  1501. <div class="textpost">
  1502. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}<div class="textbody">
  1503. {Body}</div></div>
  1504. {block:indexpage}<div class="controls"><div class="permatext"><a href="{Permalink}" title="{notecountwithlabel}"><i data-feather="link-2"></i></a></div><div class="reblogtext"><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a></div><div class="hearttext">
  1505. <a href="#" class="like" title="like">{LikeButton} <i data-feather="heart"></i></a></div>
  1506. </div>
  1507. {/block:indexpage}
  1508. </div>
  1509. {/block:Text}
  1510.  
  1511. {block:Photo}
  1512.  
  1513. <div class="photo">
  1514. {LinkOpenTag}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>{LinkCloseTag}
  1515. {block:indexpage}
  1516. <div id="overlay">{block:ifphotocaptionsonhover}<div class="blogcaption"><div class="textbody">{block:caption}{Caption}{/block:caption}</div></div>{/block:ifphotocaptionsonhover}</div><div class="controls">
  1517. <div class="permabutton"><a href="{Permalink}" title="{notecountwithlabel}"><i data-feather="link-2"></i></a></div><div class="reblogbutton"><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a></div><div class="heartbutton"><a href="#" class="like" title="like">{LikeButton} <i data-feather="heart"></i></a></div></div>{/block:indexpage}
  1518.  
  1519. </div>
  1520. {/block:Photo}
  1521.  
  1522. {block:Photoset}
  1523. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  1524. {block:indexpage}
  1525. <div id="overlay">{block:ifphotocaptionsonhover}<div class="blogcaption"><div class="textbody">{block:caption}{Caption}{/block:caption}</div></div>{/block:ifphotocaptionsonhover}</div><div class="controls">
  1526. <div class="permabutton"><a href="{Permalink}" title="{notecountwithlabel}"><i data-feather="link-2"></i></a></div><div class="reblogbutton"><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a></div><div class="heartbutton"><a href="#" class="like" title="like">{LikeButton} <i data-feather="heart"></i></a></div></div>{/block:indexpage}
  1527. {/block:Photoset}
  1528.  
  1529. {block:Quote}
  1530.  
  1531. <div class="text">
  1532. <div class="textpost">
  1533. <div class="quotetext">{Quote}</div>
  1534. <div class="quotesource">{block:Source}<cite>{Source}</cite>{/block:Source}</div></div>
  1535. {block:indexpage}<div class="controls"><div class="permatext"><a href="{Permalink}" title="{notecountwithlabel}"><i data-feather="link-2"></i></a></div><div class="reblogtext"><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a></div><div class="hearttext">
  1536. <a href="#" class="like" title="like">{LikeButton} <i data-feather="heart"></i></a></div>
  1537. </div>
  1538. {/block:indexpage}
  1539. </div>
  1540. {/block:Quote}
  1541.  
  1542. {block:Link}
  1543.  
  1544. <div class="text">
  1545. <div class="textpost">
  1546. <div class="title"><a href="{URL}">{Name}</div>
  1547. <div class="textbody">{block:Description}{Description}{/block:Description}</div></div>
  1548. {block:indexpage}<div class="controls"><div class="permatext"><a href="{Permalink}" title="{notecountwithlabel}"><i data-feather="link-2"></i></a></div><div class="reblogtext"><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a></div><div class="hearttext">
  1549. <a href="#" class="like" title="like">{LikeButton} <i data-feather="heart"></i></a></div>
  1550. </div>
  1551. {/block:indexpage}
  1552. </div>
  1553. {/block:Link}
  1554.  
  1555. {block:Chat}
  1556.  
  1557. <div class="chat">
  1558. <div class="textpost">
  1559. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1560. <ul>
  1561. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  1562. </ul></div>
  1563. {block:indexpage}<div class="controls"><div class="permatext"><a href="{Permalink}" title="{notecountwithlabel}"><i data-feather="link-2"></i></a></div><div class="reblogtext"><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a></div><div class="hearttext">
  1564. <a href="#" class="like" title="like">{LikeButton} <i data-feather="heart"></i></a></div>
  1565. </div>
  1566. {/block:indexpage}
  1567. </div>
  1568. {/block:Chat}
  1569.  
  1570. {block:Audio}
  1571.  
  1572. <div class="audio">
  1573. <div class="textpost">
  1574. {block:TrackName}{TrackName} by{/block:TrackName} {block:Artist}{Artist} <br><br>{/block:Artist}
  1575. {AudioPlayerGrey}</div>
  1576. {block:indexpage}<div class="notebox"><div class="controls"><a href="{Permalink}" title="{notecountwithlabel}"><i data-feather="link-2"></i></a><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a></div></div>
  1577. {/block:indexpage}
  1578. </div>
  1579. {/block:Audio}
  1580.  
  1581. {block:Video}
  1582.  
  1583. <div class="video">
  1584. <div class="video-player">{Video-500}</div>
  1585. {block:indexpage}<div class="notebox"><div class="controls"><a href="{Permalink}" title="{notecountwithlabel}"><i data-feather="link-2"></i></a><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a></div></div>
  1586. {/block:indexpage}
  1587. </div>
  1588. {/block:Video}
  1589.  
  1590. {block:Answer}
  1591.  
  1592. <div class="text">
  1593. <div class="ask"><div class="asker">{Asker} said:&nbsp;</div>{Question}</div>
  1594. <div class="answer"><div class="textbody">{Answer}</div></div>
  1595. {block:indexpage}<div class="controls"><div class="permatext"><a href="{Permalink}" title="{notecountwithlabel}"><i data-feather="link-2"></i></a></div><div class="reblogtext"><a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a></div><div class="hearttext">
  1596. <a href="#" class="like" title="like">{LikeButton} <i data-feather="heart"></i></a></div>
  1597. </div>
  1598. {/block:indexpage}
  1599. </div>
  1600. {/block:Answer}
  1601.  
  1602. {block:Date}
  1603. <div class="details">
  1604. {block:PermalinkPage}
  1605. <div class="caption">
  1606. <div class="blogcaption"><div class="textbody">{block:caption}{Caption}{/block:caption}</div></div>
  1607. <div class="tagsandmore">
  1608. <ul>
  1609. {block:HasTags}<li><div id="tags"><span class="infoheading">Tags:</span> {block:Tags}<a href="{TagURL}">#{Tag} </a> {/block:Tags}</div></li>{/block:HasTags}
  1610. <li><span class="infoheading">Posted:</span> {timeago}</li>
  1611. {block:NoteCount}<li><span class="infoheading">Notecount:</span> {notecount}</li>{/block:NoteCount}
  1612. {block:RebloggedFrom}<li><span class="infoheading">Via:</span> <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a></li>{/block:RebloggedFrom}
  1613. {block:ContentSource}<li><span class="infoheading">Source:</span> <a href="{SourceURL}" target="_blank">{SourceTitle}</a></li>{/block:ContentSource}
  1614. </ul>
  1615. {block:PostNotes}<div id="notes">{PostNotes-16}</div>{/block:PostNotes}
  1616. </div></div>
  1617. {/block:PermalinkPage}
  1618. </div>{/block:Date}
  1619.  
  1620. </div>
  1621.  
  1622. {/block:Posts}
  1623.  
  1624.  
  1625. {block:Pagination}<a href="#" class="load-more" style="color:{color:text}">load more</a>{/block:Pagination}
  1626.  
  1627.  
  1628. </div>
  1629.  
  1630. <!-- Codes for Infinite Scroll, Masonry, etc. -->
  1631. <script src="https://static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  1632. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1633.  
  1634. {block:IndexPage}
  1635. <script src="https://static.tumblr.com/lrtkpti/68fqnfrtl/masonry.pkgd.min.js"></script>
  1636. <script src="https://static.tumblr.com/lrtkpti/RGIqnfs0v/imagesloaded.pkgd.min.js"></script>
  1637. {block:ifInfiniteScroll}
  1638. <script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1639. {/block:ifInfiniteScroll}
  1640. {/block:IndexPage}
  1641.  
  1642. <!-- unnested captions -->
  1643.  
  1644. <script>
  1645. $('.entry').unnest({
  1646. yourCaption: ".textbody", {Caption}
  1647. wrapName: ".tumblr_parent",
  1648. newCaptionUsername: false,
  1649. originalPostCaptionUsername: false,
  1650. tumblrAvatars: false,
  1651. tumblrAvatarClass: ".tumblr_avatar",
  1652. usernameColon: false
  1653. });
  1654. </script>
  1655.  
  1656.  
  1657. <script>
  1658. $(document).ready(function(){
  1659. {block:IndexPage}
  1660. var $container = $('#content');
  1661. $container.masonry({
  1662. itemSelector: '.entry',
  1663. columnWidth: '.grid-sizer',
  1664. gutter: '.gutter-sizer',
  1665. percentPosition: true,
  1666. horizontalOrder: true
  1667. });
  1668. $container.imagesLoaded(function(){
  1669. $container.masonry({
  1670. itemSelector: '.entry',
  1671. columnWidth: '.grid-sizer',
  1672. gutter: '.gutter-sizer',
  1673. percentPosition: true,
  1674. horizontalOrder: true
  1675. });
  1676. //$container.find('.entry').animate({ opacity: 1, zIndex: 1 });
  1677. });
  1678. {block:ifInfiniteScroll}
  1679. $container.infinitescroll({
  1680. itemSelector: '.entry',
  1681. navSelector: '.pagination',
  1682. nextSelector: '.next',
  1683. loadingImg: '',
  1684. loadingText: '<em></em>',
  1685. bufferPx: 2000,
  1686. errorCallback: function(){
  1687. $('.load-more').hide();
  1688. }
  1689. },
  1690. function( newElements ) {
  1691. var $newElems = $( newElements )
  1692.  
  1693. $newElems.css({ opacity:0, zIndex:-1 });
  1694. /*startlike*/
  1695. var $newElemsIDs = $newElems.map(function(){
  1696. return this.id;
  1697. }).get();
  1698. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);/*endlike*/
  1699. feather.replace({'stroke-width': 1 })
  1700. $newElems.imagesLoaded(function(){
  1701. $container.masonry( 'appended', $newElems );
  1702. $newElems.animate({ opacity:1, zIndex:1, border:none, background:transparent });
  1703. });
  1704. $newElems.unnest();
  1705. resizeVideos();
  1706. });
  1707. {block:ifManualload}
  1708. $(window).unbind('.infscr');
  1709. $('.load-more').click(function(){
  1710. $container.infinitescroll('retrieve');
  1711. return false
  1712. });{/block:ifManualload}
  1713. {/block:ifInfiniteScroll}
  1714. {/block:IndexPage}
  1715. });
  1716. </script>
  1717.  
  1718. <!-- scroll to top code 1 -->
  1719.  
  1720. <script type="text/javascript">
  1721.  
  1722. $(function(){$window=$(window);$link=$("#scroll");$link.click(function(){$("html, body").animate({scrollTop:0},"slow")});$window.scroll(function(){if($window.scrollTop()<=0){$link.fadeOut("slow")}else{$link.fadeIn("fast")}})});
  1723.  
  1724. </script>
  1725.  
  1726.  
  1727. <!-- tooltip script -->
  1728.  
  1729. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1730.  
  1731. <script>
  1732.  
  1733. (function($){
  1734.  
  1735. $(document).ready(function(){
  1736.  
  1737. $("[title]").style_my_tooltips({
  1738.  
  1739. tip_follows_cursor:true,
  1740.  
  1741. tip_delay_time:100,
  1742.  
  1743. tip_fade_speed:250,
  1744.  
  1745. attribute:"title"
  1746.  
  1747. });
  1748.  
  1749. });
  1750.  
  1751. })(jQuery);
  1752.  
  1753. </script>
  1754.  
  1755. <!-- search form script -->
  1756.  
  1757. <script>
  1758. $(document).ready(function(){
  1759. $('.search').submit(function(event){
  1760. var value = $('input:first').val();
  1761. location.replace('http://{Name}.tumblr.com/tagged/' + value);
  1762. });
  1763. });
  1764. </script>
  1765.  
  1766. <!-- theme credit -->
  1767.  
  1768. <div id="important"><a href="https://mhango.tumblr.com" target="_blank" title="theme by mhango"><i data-feather="cloud"></i></a></div>
  1769.  
  1770.  
  1771. </body>
  1772.  
  1773. <!-- scroll to top code 3 -->
  1774.  
  1775. <a href="javascript:;" id="scroll" rel="nofollow" title="scroll to top"><i data-feather="chevron-up"></i></a>
  1776.  
  1777. <!-- end of scroll to top code 3 -->
  1778.  
  1779. <script>
  1780. feather.replace({'stroke-width': 1 })
  1781. </script>
  1782.  
  1783. </html>
Advertisement
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!