mhango

Grapefruit Theme

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