API tools faq
paste
shampain

THE BATMAN theme one by lex

shampain
Mar 2nd, 2022 (edited)
4,709
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 57.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---
  6.  
  7.  
  8.  
  9.  
  10.  
  11. < THE BATMAN THEME >
  12. by lex @sharpay
  13.  
  14.  
  15.  
  16.  
  17.  
  18. < CREDITS >
  19. ? BASE CODE by seyche ily queen
  20. ? SHOW/HIDE TAGS by seyche
  21. ? SCROLL TO TOP by paulund (via seyche)
  22. ? ICONS by feathericons
  23. ? SHORTENED NOTES by shythemes
  24. ? SHOW/HIDECONTROLS by themesbytommy
  25. ? NEW TUMBLR CONTROLS by odeysseus
  26. ? FEATURED POSTS by fukuo.site (tysm deborahchow for this big brain idea)
  27. ? DAY/NIGHT SWITCH by egg.design
  28. ? UPDATES TAB by mistletoe
  29.  
  30. --->
  31.  
  32. <link href="https://fonts.googleapis.com/css?family=Poppins:500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  33.  
  34. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  35.  
  36. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  37.  
  38. <script src="https://static.tumblr.com/5ojoydj/Kzyp56cvt/jquery-2.2.0.min.js"></script>
  39. <script>
  40. $(document).ready(function() {
  41. var readData;
  42. var url = "https://{Name}.tumblr.com/api/read/json"; $.getScript(url, function() {
  43. readData = tumblr_api_read;
  44. console.log(readData);
  45. });
  46. });
  47. </script>
  48.  
  49. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  50.  
  51. <link rel="shortcut icon" href="{Favicon}">
  52. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  53. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  54. <meta charset="utf-8">
  55. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  56.  
  57. <!----- TYPEFACE ----->
  58.  
  59. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:400,400i,600,600i|Raleway:400,400i,700,700i|Quicksand:400,400i,700,700i">
  60.  
  61. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=EB+Garamond:400|Cormorant+Garamond:400|Playfair+Display:400|Gilda+Display">
  62.  
  63. <!----- VARIABLES AND OPTIONS ----->
  64.  
  65. <meta name="image:Sidebar" content=""/>
  66. <meta name="if:Show Title" content="1"/>
  67. <meta name="if:Show Updates" content="1"/>
  68. <meta name="if:Show Like Button" content="1"/>
  69. <meta name="if:Show Featured Posts" content="1"/>
  70.  
  71. <meta name="color:Background" content="#121212"/>
  72. <meta name="color:Background Night" content="#dfd7d4"/>
  73. <meta name="color:Icons Background" content="#1b1b1b"/>
  74. <meta name="color:Icons Background Night" content="#ccbeb9"/>
  75. <meta name="color:Text" content="#b9a49d"/>
  76. <meta name="color:Accent" content="#af4746"/>
  77. <meta name="color:Link" content="#d6beb6"/>
  78. <meta name="color:Borders" content="#af4746"/>
  79. <meta name="color:Borders Night" content="#af4746"/>
  80.  
  81. <meta name="select:Font Size" content="14px" title="14px"/>
  82. <meta name="select:Font Size" content="15px" title="15px"/>
  83. <meta name="select:Font Size" content="13px" title="13px"/>
  84. <meta name="select:Post Width" content="400px" title="400px"/>
  85. <meta name="select:Post Width" content="500px" title="500px"/>
  86. <meta name="select:Post Width" content="540px" title="540px"/>
  87.  
  88. <meta name="select:Cursor on Hover" content="help" title="question mark"/>
  89. <meta name="select:Cursor on Hover" content="pointer" title="pointer"/>
  90. <meta name="select:Cursor on Hover" content="crosshair" title="crosshair"/>
  91. <meta name="select:Cursor on Hover" content="none" title="disappear"/>
  92. <meta name="select:Title Font" content="Gilda Display" title="Gilda Display"/>
  93. <meta name="select:Title Font" content="Playfair Display" title="Playfair Display"/>
  94. <meta name="select:Title Font" content="EB Garamond" title="EB Garamond"/>
  95. <meta name="select:Title Font" content="Cormorant Garamond" title="Cormorant Garamond"/>
  96. <meta name="select:Title Font" content="Work Sans" title="Work Sans"/>
  97. <meta name="select:Title Font" content="Raleway" title="Raleway"/>
  98. <meta name="select:Title Font" content="Quicksand" title="Quicksand"/>
  99. <meta name="select:Body Font" content="Work Sans" title="Work Sans"/>
  100. <meta name="select:Body Font" content="Raleway" title="Raleway"/>
  101. <meta name="select:Body Font" content="Quicksand" title="Quicksand"/>
  102.  
  103.  
  104. <meta name="text:Post Margin" content="180"/>
  105.  
  106. <meta name="select:Tracking Tag Width" content="50%" title="50%"/>
  107. <meta name="select:Tracking Tag Width" content="30%" title="30%"/>
  108. <meta name="select:Tracking Tag Width" content="40%" title="40%"/>
  109. <meta name="select:Tracking Tag Width" content="60%" title="60%"/>
  110. <meta name="text:Desktop Description" content="if you want your desktop theme to have a different description from your mobile theme"/>
  111. <meta name="text:Updates Tab Content" content="basic html applies (p for paragraph, b for bold, i for italic, br for line break/next line with a gap smaller than p's)"/>
  112. <meta name="text:Creations Tag" content="*"/>
  113. <meta name="text:Reblog Hover Text" content="do it"/>
  114. <meta name="text:Tracking Tag or Blog Title" content="#userlex"/>
  115. <meta name="text:Ask" content="ask"/>
  116. <meta name="text:Link 1 URL" content=""/>
  117. <meta name="text:Link 1" content="about"/>
  118. <meta name="text:Link 2 URL" content=""/>
  119. <meta name="text:Link 2" content="creations"/>
  120. <meta name="text:Link 3 URL" content=""/>
  121. <meta name="text:Link 3" content="other blogs"/>
  122. <meta name="text:asked" content="sent this riddle:"/>
  123.  
  124. <script src="https://unpkg.com/feather-icons"></script>
  125.  
  126. <!----- CSS ----->
  127.  
  128. <style type="text/css">
  129.  
  130. /*----- CONTROLS -----*/
  131.  
  132. .tmblr-iframe {
  133. white-space:nowrap;
  134. -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
  135. transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;
  136. position:fixed!important;
  137. right:-20px!important;
  138. transform:scale(0.7,0.7);
  139. }
  140.  
  141. .tmblr-iframe--loaded{
  142. transition: all 0.2s ease;
  143. height: 0px !important;
  144. }
  145. .tmblr-iframe--loaded-active{
  146. height: 54px !important;
  147. }
  148. .tmblr-iframe-pushdown,
  149. .tmblr-iframe-themed{
  150. padding-top: 0px !important;
  151. padding: 0px !important;
  152. animation: none !important;
  153. -webkit-animation: none !important;
  154. }
  155. .tumblr-controls-btn-trigger{
  156. -webkit-transition: all 0.2s ease;
  157. -moz-transition: all 0.2s ease;
  158. transition: all 0.2s ease;
  159. position: fixed;
  160. top: 20px;
  161. right: 30px;
  162. height: 15px;
  163. width: 20px;
  164. cursor:{select:cursor on hover};
  165. z-index: 99999;
  166. }
  167. .tumblr-controls-btn-trigger span{
  168. -webkit-transition: all 0.2s ease;
  169. -moz-transition: all 0.2s ease;
  170. transition: all 0.2s ease;
  171. position: absolute;
  172. color: {color:borders}!important;
  173. }
  174. .tumblr-controls-btn-trigger span:hover {
  175. color:{color:text}!important;
  176. }
  177. .tumblr-controls-btn-trigger-active span{
  178. margin-top:20px;
  179. }
  180.  
  181. /*----- SCROLLBAR DAY -----*/
  182.  
  183. ::-webkit-scrollbar {
  184. width:2px;
  185. height:15px;
  186. }
  187. ::-webkit-scrollbar {
  188. background:{color:background};
  189. }
  190. ::-webkit-scrollbar-track {
  191. border:none;
  192. background:{color:background};
  193. }
  194. ::-webkit-scrollbar-thumb {
  195. border:none;
  196. background:{color:borders};
  197. min-height:24px;
  198. min-width:24px;
  199. }
  200.  
  201. /*----- SCROLLBAR NIGHT -----*/
  202.  
  203. body.night::-webkit-scrollbar {
  204. width:2px;
  205. height:15px;
  206. }
  207. body.night::-webkit-scrollbar {
  208. background:{color:background night};
  209. }
  210. body.night::-webkit-scrollbar-track {
  211. border:none;
  212. background:{color:background night};
  213. }
  214. body.night::-webkit-scrollbar-thumb {
  215. border:none;
  216. background:{color:borders night};
  217. min-height:24px;
  218. min-width:24px;
  219. }
  220.  
  221. /*----- I AM THE SHADOWS (night mode) -----*/
  222.  
  223. body.night {
  224. background:{color:background night};
  225. color:{color:background};
  226. transition:.6s;
  227. }
  228.  
  229. body.night article {
  230. border:1px solid {color:Borders Night};
  231. }
  232.  
  233. body.night #sidebar {
  234. border:1px solid {color:Borders night};
  235. }
  236.  
  237. body.night b, body.night i { color:{color:icons background}!important; }
  238.  
  239. body.night a {
  240. color: {color:accent};
  241. }
  242.  
  243. body.night a:hover {
  244. color: {color:icons background};
  245. }
  246.  
  247. body.night .caption a {color:{color:accent};}
  248.  
  249. body.night .caption a:hover {
  250. color:{color:icons background};
  251. border-bottom:1px solid {color:icons background};
  252. }
  253.  
  254. body.night .username a:hover{
  255. color:{color:icons background}!important;
  256. border-bottom:1px solid {color:icons background};
  257. }
  258.  
  259. body.night .chatline {
  260. border-bottom:1px solid {color:borders night};
  261. }
  262.  
  263. body.night article, body.night header, body.night footer { background:{color:background night}!important; }
  264.  
  265. body.night #topsidebar {
  266. background:{color:Icons Background Night};
  267. color:{color:Borders Night};
  268. border:1px solid {color:Borders night};
  269. }
  270.  
  271. body.night .tippy-tooltip.custom-theme {
  272. background:{color:Icons Background Night};
  273. color: {color:borders night};
  274. }
  275.  
  276. body.night .album-art-pic {
  277. opacity:60%;
  278. }
  279.  
  280. body.night .track {
  281. color:{color:background};
  282. }
  283.  
  284. body.night .audioinfo .artistname {
  285. color:{color:Icons Background};
  286. }
  287.  
  288. body.night .deactive::after {
  289. color: {color:background night};
  290. background:{color:icons background night};
  291. }
  292.  
  293. body.night a.read_more {
  294. background:{color:Borders Night};
  295. color:{color:Icons Background Night};
  296. border:1px solid {color:Borders Night};
  297. }
  298.  
  299. body.night a.read_more:hover {
  300. background: {color:Icons Background Night};
  301. border:1px solid {color:Borders night};
  302. color:{color:borders night};
  303. }
  304.  
  305. body.night .ask-wrap {
  306. background:{color:Icons Background Night};
  307. }
  308.  
  309. body.night .ask-icon {
  310. background:{color:Icons Background Night};
  311. }
  312.  
  313. body.night a svg {
  314. background:{color:Icons Background Night};
  315. color:{color:Borders Night};
  316. border:1px solid {color:Borders Night};
  317. }
  318.  
  319. body.night a svg:hover {
  320. color:{color:Icons Background night};
  321. background:{color:Borders night};
  322. border:1px solid {color:borders night};
  323. }
  324.  
  325. body.night #page-navigation a svg {
  326. background:{color:Icons Background night};
  327. border:1px solid {color:Borders night};
  328. color: {color:borders night};
  329. }
  330.  
  331. body.night #page-navigation a svg:hover {
  332. color:{color:Icons Background night};
  333. background:{color:Borders night};
  334. }
  335.  
  336. body.night .topnotes {
  337. background:{color:Icons Background night};
  338. border:1px solid {color:Borders night};
  339. color:{color:borders night};
  340. }
  341.  
  342. body.night .topnotes:hover {
  343. background:{color:Borders night} !important;
  344. color:{color:Icons Background night};
  345. -webkit-transition: all .5s;
  346. -moz-transition: all .5s;
  347. -ms-transition: all .5s;
  348. -o-transition: all .5s;
  349. transition: all .5s;
  350. }
  351.  
  352. body.night .rebloghighlight {
  353. background:{color:borders night};
  354. border:1px solid {color:borders night};
  355. color:{color:Icons Background night};
  356. padding:9px 10px;
  357. border-radius:50px;
  358. width:30%;
  359. -webkit-transition: all .5s;
  360. -moz-transition: all .5s;
  361. -ms-transition: all .5s;
  362. -o-transition: all .5s;
  363. transition: all .5s;
  364. }
  365.  
  366. body.night .rebloghighlight:hover {
  367. background:{color:background} !important;
  368. color:{color:borders night};
  369. border:1px solid {color:borders night};
  370. }
  371.  
  372. body.night .rebloghighlightlink:hover {color:{color:borders night};}
  373.  
  374. body.night a.tag-button.tag-clicked svg {
  375. color: {color:Icons Background night};
  376. background:{color:Borders night};
  377. }
  378.  
  379. body.night .perma-icon {
  380. background:{color:Icons Background night};
  381. border:1px solid {color:Borders night};
  382. }
  383.  
  384. body.night #wrapper_featured_posts{
  385. border:1px solid {color:Borders night};
  386. }
  387.  
  388. body.night .topfeatured {
  389. background:{color:Icons Background night};
  390. border:1px solid {color:Borders Night};
  391. color:{color:borders night};
  392. }
  393.  
  394. body.night .topfeatured:hover {
  395. background:{color:Borders night} !important;
  396. color:{color:Icons Background night};
  397. -webkit-transition: all .5s;
  398. -moz-transition: all .5s;
  399. -ms-transition: all .5s;
  400. -o-transition: all .5s;
  401. transition: all .5s;
  402. }
  403.  
  404. body.night .topfeaturedlink:hover {
  405. color:{color:background};
  406. }
  407.  
  408. body.night .topnoteslink:hover {
  409. color:{color:background};
  410. }
  411.  
  412. body.night #wrapper_featured_posts .inner_featured_posts>.grid_featured .btnMore{
  413. background-color:{color:Borders night};
  414. border:1px solid {color:Borders night};
  415. color:{color:Icons Background night}!important;
  416. }
  417.  
  418. body.night #wrapper_featured_posts .inner_featured_posts>.grid_featured .btnMore:hover {
  419. background-color: {color:icons background night};
  420. border:1px solid {color:Borders night};
  421. color:{color:borders night}!important;
  422. }
  423.  
  424. /*----- BASIC STYLING -----*/
  425.  
  426. .tippy-tooltip.custom-theme {
  427. font-family: '{select:body font}', helvetica, sans-serif;
  428. font-weight:400;
  429. background-color: {color:icons background};
  430. color: {color:text};
  431. text-align: center;
  432. font-family: inherit;
  433. text-transform: uppercase;
  434. letter-spacing: 0.15em;
  435. padding: 0.3em 0.28em 0.3em 0.3em;
  436. margin: 15px 0 0 0;
  437. font-size: calc({select:font size} - 1.5px);
  438. }
  439.  
  440. body {
  441. font-family: '{select:body font}', helvetica, sans-serif;
  442. font-weight:400;
  443. font-size: {select:font size};
  444. letter-spacing: 0.01em;
  445. color: {color:text};
  446. background-color: {color:background};
  447. line-height: 165%;
  448. word-wrap: break-word;
  449. margin: 0;
  450. padding: 0;
  451. }
  452.  
  453. a {
  454. color: {color:link};
  455. text-decoration: none;
  456. -webkit-transition: all 0.3s;
  457. -moz-transition: all 0.3s;
  458. -ms-transition: all 0.3s;
  459. -o-transition: all 0.3s;
  460. transition: all 0.3s;
  461. }
  462.  
  463. a:hover {
  464. color: {color:accent};
  465. -webkit-transition: all 0.3s;
  466. -moz-transition: all 0.3s;
  467. -ms-transition: all 0.3s;
  468. -o-transition: all 0.3s;
  469. transition: all 0.3s;
  470. cursor:{select:cursor on hover};
  471. }
  472.  
  473. blockquote {
  474. padding: 0;
  475. border:none;
  476. margin: 0.5em 1.5em;
  477. }
  478.  
  479. blockquote:before {
  480. content: '';
  481. background-color:{color:borders};
  482. display: block;
  483. margin: 1.5em 40%;
  484. height:1px;
  485. }
  486.  
  487. blockquote:after {
  488. content: '';
  489. background-color:{color:borders};
  490. display: block;
  491. margin: 1.5em 40%;
  492. height:1px;
  493. }
  494.  
  495. h1, h2, h3, h4, h5, .title {
  496. letter-spacing: 0.02em;
  497. line-height: 145%;
  498. }
  499.  
  500. h1, .title {font-size: 1.55em;font-family: '{select:title font}', garamond, georgia, serif;}
  501. h2 {font-size: 1.35em;}
  502. h3 {font-size: 1.3em;}
  503. h4 {font-size: 1.2em;}
  504. h5 {font-size: 1.1em;}
  505.  
  506. small {font-size: 1em;}
  507. big {font-size: 1.2em;}
  508.  
  509. hr {
  510. height: 1px;
  511. border: none;
  512. box-shadow: none;
  513. background-color: {color:borders};
  514. }
  515.  
  516. pre {
  517. line-height: inherit;
  518. font-size: inherit;
  519. white-space: pre-wrap;
  520. white-space: -moz-pre-wrap;
  521. white-space: -pre-wrap;
  522. white-space: -o-pre-wrap;
  523. word-wrap: break-word;
  524. }
  525.  
  526. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  527.  
  528. /*----- SIDEBAR -----*/
  529.  
  530. #sidebar {
  531. width: 230px;
  532. position: fixed;
  533. top: calc({text:post margin}px - 30px);
  534. text-align: center;
  535. border:1px solid {color:Borders};
  536. padding:0;
  537. border-radius:20px;
  538. }
  539.  
  540. {block:ifSidebarImage}
  541. #side-img {
  542. margin-bottom: 1.5em;
  543. border-top-left-radius:19px;
  544. border-top-right-radius:19px;
  545. }
  546. {/block:ifSidebarImage}
  547.  
  548. #description {
  549. margin-top: 0.2em;
  550. padding:0 15px 10px 15px;
  551. }
  552.  
  553. {block:ifShowTitle}
  554. #sidebar .title {
  555. margin: 0 1em 0.4em 1em;
  556. line-height:1.3;
  557. }
  558. {block:ifShowTitle}
  559.  
  560. nav {margin-top: 0.1em;}
  561. nav a {margin: 0 0.35em;}
  562. nav a svg {
  563. display: inline-block;
  564. vertical-align: middle;
  565. margin:auto;
  566. background:{color:Icons Background};
  567. border:1px solid {color:Borders};
  568. padding:9px;
  569. border-radius:50%;
  570. width: 18px;
  571. height: 18px;
  572. color: {color:borders};
  573. margin-bottom:-23px;
  574. -webkit-transition: all .5s;
  575. -moz-transition: all .5s;
  576. -ms-transition: all .5s;
  577. -o-transition: all .5s;
  578. transition: all .5s;
  579. }
  580.  
  581. nav a svg:hover {
  582. color:{color:Icons Background};
  583. background:{color:Borders};
  584. -webkit-transition: all .5s;
  585. -moz-transition: all .5s;
  586. -ms-transition: all.5s;
  587. -o-transition: all .5s;
  588. transition: all .5s;
  589. }
  590.  
  591. #topsidebar {
  592. left:0;
  593. right:0;
  594. margin-left:auto;
  595. margin-right:auto;
  596. position:absolute;
  597. margin-top:-23px;
  598. color:{color:borders};
  599. background:{color:Icons Background};
  600. border:1px solid {color:Borders};
  601. padding:9px;
  602. border-radius:50px;
  603. width:{select:tracking tag width};
  604. cursor:copy;
  605. }
  606.  
  607. /*----- POSTS -----*/
  608.  
  609. main {
  610. position: relative;
  611. width: calc(250px + {select:post width} + 150px);
  612. margin: auto;
  613. text-align:center;
  614. }
  615.  
  616. section {
  617. position: relative;
  618. width: {select:post width};
  619. margin-left: 370px;
  620. }
  621.  
  622. article {
  623. width: 100%;
  624. position: relative;
  625. margin: {text:post margin}px auto;
  626. border:1px solid {color:Borders};
  627. padding:25px;
  628. border-radius:20px;
  629. }
  630.  
  631. article:first-of-type {
  632. margin-top: calc({text:post margin}px - 30px);
  633. }
  634.  
  635. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  636.  
  637. /*----- CAPTIONS -----*/
  638.  
  639. .caption {
  640. margin-top: 2em;
  641. list-style-type: none;
  642. }
  643.  
  644. .caption img {
  645. margin-bottom:5px;
  646. text-align:center;
  647. max-width:100%;
  648. }
  649.  
  650. .text-caption:first-of-type {margin-top: 0;}
  651.  
  652. .caption ul {
  653. list-style-type: none;
  654. margin:0;
  655. padding:0;
  656. }
  657.  
  658. .caption ol {
  659. list-style-type: none;
  660. margin:0;
  661. padding:0;
  662. }
  663.  
  664. .caption a {color:{color:link};}
  665.  
  666. .caption a:hover {
  667. color:{color:link};
  668. border-bottom:1px solid {color:link};
  669. padding-bottom:0.1em;
  670. -webkit-transition: all 0.3s;
  671. -moz-transition: all 0.3s;
  672. -ms-transition: all 0.3s;
  673. -o-transition: all 0.3s;
  674. transition: all 0.3s;
  675. }
  676.  
  677. .user-icon {
  678. display: inline-block;
  679. border-radius:50%;
  680. border:1px solid {color:borders};
  681. vertical-align: middle;
  682. width: 1.5em;
  683. height: 1.5em;
  684. margin-right: 0.6em;
  685. }
  686.  
  687. .username {
  688. margin-top:-0.2em;
  689. display: inline-block;
  690. vertical-align: middle;
  691. font-size: 1em;
  692. font-family: '{select:body font}', helvetica, sans-serif;
  693. font-weight:bold;
  694. letter-spacing:0.1px;
  695. }
  696.  
  697. .username a:hover{
  698. text-decoration:none!important;
  699. color:{color:link}!important;
  700. border-bottom:1px solid {color:link};
  701. padding-bottom:0.2em;
  702. -webkit-transition: all 0.3s;
  703. -moz-transition: all 0.3s;
  704. -ms-transition: all 0.3s;
  705. -o-transition: all 0.3s;
  706. transition: all 0.3s;
  707. }
  708.  
  709. .deactive::after {
  710. content: 'deactivated';
  711. margin-left: 0.5em;
  712. opacity: 0.75;
  713. color: {color:text};
  714. opacity:90%;
  715. background:{color:icons background};
  716. padding:3px 5px;
  717. border-radius:10px;
  718. font-size:0.8em;
  719. text-transform:uppercase;
  720. letter-spacing:0.5px;
  721. font-weight:normal;
  722. }
  723.  
  724. a.read_more {
  725. background:{color:Borders};
  726. color:{color:Icons Background};
  727. border:1px solid {color:Borders};
  728. font-size:calc({select:font size} - 1px);
  729. box-sizing: border-box;
  730. padding:0.7em 1.7em;
  731. border-radius:50px;
  732. width:30%;
  733. height:auto;
  734. }
  735.  
  736. a.read_more:hover {
  737. background-color: {color:icons background};
  738. border:1px solid {color:Borders};
  739. color:{color:borders};
  740. padding:0.7em 1.7em;
  741. border-radius:50px;
  742. width:30%;
  743. height:auto;
  744. -webkit-transition: all .5s;
  745. -moz-transition: all .5s;
  746. -ms-transition: all .5s;
  747. -o-transition: all .5s;
  748. transition: all .5s;
  749. }
  750.  
  751. p.read_more_container {margin-top: 2em;margin-bottom:2.5em;}
  752.  
  753. p.tmblr-attribution {margin-top: 1em !important;}
  754.  
  755. /*----- TEXT -----*/
  756.  
  757. h1.post-title {margin-top: 0;}
  758.  
  759. /*----- LINK -----*/
  760.  
  761. a.link-wrap {display: block; border: none;}
  762. .link {padding: 2em;}
  763. .link-host, .link-txt {margin-top: 1.5em;}
  764.  
  765. .npf-link-block {
  766. margin-top: 1.5em;
  767. background-color: {color:borders};
  768. border-radius:10px;
  769. border: none;
  770. }
  771.  
  772. .npf-link-block a {
  773. color: {color:text};!important;
  774. }
  775.  
  776. .npf-link-block a:hover {
  777. color: {color:background};
  778. border:none;
  779. padding:0;
  780. }
  781.  
  782. /*----- PHOTO -----*/
  783.  
  784. img {
  785. margin: 0;
  786. display: block;
  787. height: auto;
  788. max-width: 100%;
  789. text-align:center;
  790. }
  791.  
  792. .photo img {width: 100%;}
  793. .vignette, #vignette {opacity: 0;}
  794. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(27,27,27, 0.8) !important;}
  795.  
  796. .lightbox-image, #tumblr_lightbox img {
  797. box-shadow: none !important;
  798. border-radius: 0 !important;
  799. max-width: none;
  800. }
  801.  
  802. #tumblr_lightbox_caption, .lightbox-caption {
  803. color: #fff !important;
  804. font-family: inherit;
  805. margin-top: 1em !important;
  806. }
  807.  
  808. /*----- PHOTOSET -----*/
  809.  
  810. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  811. margin-left: 0 !important;
  812. margin-right: 0 !important;
  813. }
  814.  
  815. /*----- QUOTE -----*/
  816.  
  817. .quote {
  818. padding:5px 10px 0 10px;
  819. line-height: 130%;
  820. font-size: 2em;
  821. font-family: '{select:title font}', garamond, georgia, serif;
  822. }
  823.  
  824. .quote p:first-of-type {margin-top: 0;}
  825. .quote p:last-of-type {margin-bottom: 0;}
  826.  
  827. .source {margin-top: 1.5em;font-size:calc({select:font size} - 1.3px);}
  828.  
  829. /*----- CHAT -----*/
  830.  
  831. .chat {padding: 0; margin: 0;}
  832. .chat li {list-style-type: none; margin-top: 2em;}
  833.  
  834. .chatline {
  835. border-bottom:1px solid {color:borders};
  836. display: block;
  837. position:relative;
  838. text-align: center;
  839. padding-bottom:2em;
  840. margin-left: auto;
  841. margin-right: auto;
  842. width:20%;
  843. }
  844.  
  845. .chat li:first-of-type {margin-top: 0;}
  846. .chat li:last-of-type {padding-bottom: 0;border-bottom:0;}
  847. .chatter {
  848. color:{color:accent};
  849. font-size:calc({select:font size} + 1px);
  850. font-family: '{select:title font}', garamond, georgia, serif;
  851. }
  852.  
  853. p.npf_chat, p.npf_chat b {font-family: inherit;}
  854.  
  855. /*----- ANSWER -----*/
  856.  
  857. .ask-wrap {
  858. background:{color:icons background};
  859. border-radius:13px;
  860. margin-top:3.8em;
  861. padding: 2em;
  862. }
  863.  
  864. .ask-icon {
  865. display: block;
  866. margin:-49px auto 17px auto;
  867. text-align:center;
  868. position:relative;
  869. display: block;
  870. border-radius:50%;
  871. background:{color:icons background};
  872. vertical-align: middle;
  873. width: 2.6em;
  874. height:2.6em;
  875. }
  876.  
  877. .ask-wrap .asking {
  878. display: inline-block;
  879. margin-left: 0;
  880. font-weight: bold;
  881. }
  882.  
  883. .question {margin-top: 1em;}
  884. .question p:first-of-type {margin-top: 0;}
  885. .question p:last-of-type {margin-bottom: 0;}
  886.  
  887. /*----- AUDIO -----*/
  888.  
  889. .audiopost {padding: 0em; border: none;}
  890.  
  891. .album-art-pic {
  892. border-radius:15px;
  893. margin:auto;
  894. text-align:center;
  895. z-index: 1;
  896. display: block;
  897. vertical-align: middle;
  898. float: left;
  899. width: 100%;
  900. height:150px;
  901. object-fit:cover;
  902. opacity:30%;
  903. margin-bottom:20px;
  904. }
  905.  
  906. .audio-player-wrap {
  907. width: 100px;
  908. height: 100px;
  909. display: inline-block;
  910. }
  911.  
  912. .button {
  913. width: 31px;
  914. height: 31px;
  915. overflow: hidden;
  916. position: relative;
  917. z-index: 2;
  918. margin: 10px;
  919. }
  920.  
  921. .audiobox {
  922. background-color: #f2f2f2;
  923. z-index: 3;
  924. position: absolute;
  925. margin: 50px 0 0 5%;
  926. border-radius: 50%;
  927. }
  928.  
  929. .audioinfo {
  930. position:absolute;
  931. display: block;
  932. width: 85%;
  933. padding: 50px 0;
  934. text-align: right;
  935. margin:auto;
  936. }
  937. .audioinfo li {list-style-type: none;}
  938.  
  939. .track {
  940. font-family: '{select:title font}', garamond, georgia, serif;
  941. color:{color:link};
  942. font-size:calc({select:font size} + 3px);
  943. }
  944.  
  945. /*----- TOP INFO -----*/
  946.  
  947. .topinfo {
  948. width:100%;
  949. margin:-48px auto 25px auto;
  950. }
  951.  
  952. .topinfo a {margin-right: 1.5em;}
  953. .topinfo a:last-of-type {margin-right:0;}
  954.  
  955. .topinfo a svg {
  956. display: inline-block;
  957. vertical-align: middle;
  958. margin:auto;
  959. background:{color:Icons Background};
  960. border:1px solid {color:Borders};
  961. padding:10px;
  962. border-radius:50%;
  963. width: 20px;
  964. height: 20px;
  965. color: {color:borders};
  966. margin-top:2px;
  967. -webkit-transition: all .5s;
  968. -moz-transition: all .5s;
  969. -ms-transition: all .5s;
  970. -o-transition: all .5s;
  971. transition: all .5s;
  972. }
  973.  
  974. .topinfo a svg:hover {
  975. color:{color:Icons Background};
  976. background:{color:Borders};
  977. -webkit-transition: all .5s;
  978. -moz-transition: all .5s;
  979. -ms-transition: all .5s;
  980. -o-transition: all .5s;
  981. transition: all .5s;
  982. }
  983.  
  984. .topnotes {
  985. display: inline-block;
  986. vertical-align: middle;
  987. background:{color:Icons Background};
  988. border:1px solid {color:Borders};
  989. color:{color:borders};
  990. padding:9px 10px;
  991. border-radius:50px;
  992. width:30%;
  993. -webkit-transition: all .5s;
  994. -moz-transition: all .5s;
  995. -ms-transition: all .5s;
  996. -o-transition: all .5s;
  997. transition: all .5s;
  998. }
  999.  
  1000. .topnotes:hover {
  1001. background:{color:Borders} !important;
  1002. color:{color:Icons Background};
  1003. -webkit-transition: all .5s;
  1004. -moz-transition: all .5s;
  1005. -ms-transition: all .5s;
  1006. -o-transition: all .5s;
  1007. transition: all .5s;
  1008. }
  1009.  
  1010. .topnoteslink:hover {color:{color:link};}
  1011.  
  1012. .rebloghighlight {
  1013. display: inline-block;
  1014. vertical-align: middle;
  1015. background:{color:borders};
  1016. border:1px solid {color:borders};
  1017. color:{color:Icons Background};
  1018. padding:9px 10px;
  1019. border-radius:50px;
  1020. width:30%;
  1021. -webkit-transition: all .5s;
  1022. -moz-transition: all .5s;
  1023. -ms-transition: all .5s;
  1024. -o-transition: all .5s;
  1025. transition: all .5s;
  1026. }
  1027.  
  1028. .rebloghighlight:hover {
  1029. background:{color:text} !important;
  1030. color:{color:background};
  1031. border:1px solid {color:borders};
  1032. font-weight:bold;
  1033. -webkit-transition: all .5s;
  1034. -moz-transition: all .5s;
  1035. -ms-transition: all .5s;
  1036. -o-transition: all .5s;
  1037. transition: all .5s;
  1038. }
  1039.  
  1040. .rebloghighlightlink:hover {color:{color:borders};}
  1041.  
  1042. /*----- INFO -----*/
  1043.  
  1044. {block:ifShowLikeButton}
  1045. .info {
  1046. width:100%;
  1047. margin-top:2.3em;
  1048. margin-bottom: -52px!important;
  1049. }
  1050. {block:ifShowLikeButton}
  1051.  
  1052. .info {
  1053. width:100%;
  1054. margin-top:2em;
  1055. margin-bottom: -47px;
  1056. }
  1057.  
  1058. .perma-icon {
  1059. display: inline-block;
  1060. vertical-align: middle;
  1061. background:{color:Icons Background};
  1062. border:1px solid {color:Borders};
  1063. border-radius:50%;
  1064. padding:0.48em;
  1065. width: 2em;
  1066. height: 2em;
  1067. color: {color:borders};
  1068. margin-top:2px;
  1069. -webkit-transition: all .5s;
  1070. -moz-transition: all .5s;
  1071. -ms-transition: all .5s;
  1072. -o-transition: all .5s;
  1073. transition: all .5s;
  1074. }
  1075.  
  1076. .info a svg {
  1077. display: inline-block;
  1078. vertical-align: middle;
  1079. margin:auto;
  1080. background:{color:Icons Background};
  1081. border:1px solid {color:Borders};
  1082. padding:10px;
  1083. border-radius:50%;
  1084. width: 20px;
  1085. height: 20px;
  1086. color: {color:borders};
  1087. margin-top:2px;
  1088. -webkit-transition: all .5s;
  1089. -moz-transition: all .5s;
  1090. -ms-transition: all .5s;
  1091. -o-transition: all .5s;
  1092. transition: all .5s;
  1093. }
  1094.  
  1095. .info a svg:hover {
  1096. color:{color:Icons Background};
  1097. background:{color:Borders};
  1098. -webkit-transition: all .5s;
  1099. -moz-transition: all .5s;
  1100. -ms-transition: all .5s;
  1101. -o-transition: all .5s;
  1102. transition: all .5s;
  1103. }
  1104.  
  1105. .likeb {
  1106. position: relative;
  1107. display: inline-block;
  1108. height: 1.8em;
  1109. margin-bottom: 25px;
  1110. }
  1111.  
  1112. .likeb .like_button iframe {
  1113. position: absolute;
  1114. top: 0;
  1115. left: 0;
  1116. bottom: 0;
  1117. right: 0;
  1118. z-index: 2;
  1119. opacity: 0;
  1120. }
  1121.  
  1122. .like_button iframe {width: 100% !important; height: 100% !important;}
  1123. .likeb .liked + .actual-button svg:hover {color: #6aa9cf;}
  1124. .likeb .liked + .actual-button svg:after {color:#6aa9cf !important;}
  1125.  
  1126. .info a {margin-right: 1.5em;}
  1127. .info a:last-of-type {margin-right:0;}
  1128.  
  1129. .tags a {margin-right: 0.85em;}
  1130. .tags a:last-of-type {margin-right:0;}
  1131.  
  1132. /*---- HIDDEN TAGS -----*/
  1133.  
  1134. a.tag-button {
  1135. cursor:help;
  1136. display: inline-block;
  1137. vertical-align: middle;
  1138. }
  1139.  
  1140. a.tag-button.tag-clicked svg {
  1141. color: {color:Icons Background};
  1142. background:{color:Borders};
  1143. }
  1144.  
  1145. .tags {
  1146. display: none;
  1147. margin-top:70px;
  1148. }
  1149.  
  1150. /*---- POST NOTES -----*/
  1151.  
  1152. .notes {margin-top: calc({text:post margin}px - 50px);}
  1153.  
  1154. ol.notes {
  1155. max-width: 100%;
  1156. padding: 0;
  1157. margin: 2em 0 0 0;
  1158. border-top:1px solid {color:icons background};
  1159. padding-top:2.5em;
  1160. }
  1161.  
  1162. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  1163.  
  1164. ol.notes li.note img.avatar {
  1165. margin-right: 0.5em;
  1166. vertical-align: middle;
  1167. display: inline-block;
  1168. width: 1.5em;
  1169. height: 1.5em;
  1170. }
  1171.  
  1172. img.avatar {
  1173. border-radius:50%;
  1174. border:1px solid {color:borders};
  1175. margin-top:-0.1em;
  1176. }
  1177.  
  1178. /*---- PAGINATION -----*/
  1179.  
  1180. #page-navigation {
  1181. text-align: center;
  1182. margin-left:3%;
  1183. width:93%;
  1184. font-size:calc({select:font size} + 1px);
  1185. margin-bottom: 80px;
  1186. }
  1187.  
  1188. #page-navigation a svg {
  1189. display: inline-block;
  1190. vertical-align: middle;
  1191. margin:auto;
  1192. background:{color:Icons Background};
  1193. border:1px solid {color:Borders};
  1194. padding:10px;
  1195. border-radius:50%;
  1196. width: 20px;
  1197. height: 20px;
  1198. color: {color:borders};
  1199. margin-top:2px;
  1200. -webkit-transition: all .5s;
  1201. -moz-transition: all .5s;
  1202. -ms-transition: all .5s;
  1203. -o-transition: all .5s;
  1204. transition: all .5s;
  1205. }
  1206.  
  1207. #page-navigation a svg:hover {
  1208. color:{color:Icons Background};
  1209. background:{color:Borders};
  1210. -webkit-transition: all .5s;
  1211. -moz-transition: all .5s;
  1212. -ms-transition: all .5s;
  1213. -o-transition: all .5s;
  1214. transition: all .5s;
  1215. }
  1216.  
  1217. .prevpage {
  1218. position:relative;
  1219. float:left;
  1220. vertical-align: middle;
  1221. margin-left:-60px;
  1222. margin-top:-11px;
  1223. }
  1224. .nxtpage {
  1225. position:relative;
  1226. float:right;
  1227. vertical-align: middle;
  1228. margin-right:-60px;
  1229. margin-top:-11px;
  1230. }
  1231.  
  1232. #page-navigation a, .current-page {margin: 0 1em;}
  1233. .current-page {font-weight: bold; color: {color:borders};}
  1234.  
  1235. /*---- UPDATES 2 ----*/
  1236.  
  1237. #updates{
  1238. position:fixed;
  1239. z-index:1001;
  1240. top:30px;
  1241. left:30px;
  1242. }
  1243.  
  1244. #updates a{text-decoration:none;color:#656565}
  1245.  
  1246. #updates svg {
  1247. display: inline-block;
  1248. vertical-align: middle;
  1249. margin:auto;
  1250. background:{color:Icons Background};
  1251. border:1px solid {color:Borders};
  1252. padding:9px;
  1253. border-radius:50%;
  1254. width: 18px;
  1255. height: 18px;
  1256. color: {color:borders};
  1257. -webkit-transition: all .5s;
  1258. -moz-transition: all .5s;
  1259. -ms-transition: all .5s;
  1260. -o-transition: all .5s;
  1261. transition: all .5s;
  1262. }
  1263.  
  1264. #updates svg:hover {
  1265. color:{color:background}!important;
  1266. background:{color:borders};
  1267. -webkit-transition: all .5s;
  1268. -moz-transition: all .5s;
  1269. -ms-transition: all .5s;
  1270. -o-transition: all .5s;
  1271. transition: all .5s;
  1272. }
  1273.  
  1274. #updates .updatet{
  1275. display:block;
  1276. width:15px;
  1277. height:15px;
  1278. padding:0px;
  1279. line-height:15px;
  1280. font-size:15px;
  1281. background-color:none;
  1282. border-radius:100%;
  1283. margin-top:0px;
  1284. }
  1285.  
  1286. #updates .updateu{
  1287. text-align:center!important;
  1288. width:150px;
  1289. padding:20px 20px 18px 21px;
  1290. border:1px solid {color:borders};
  1291. border-radius:15px;
  1292. font-family: '{select:body font}', helvetica, sans-serif;
  1293. margin-top:0px;
  1294. margin-left:17px;
  1295. color:{color:text};
  1296. background:{color:background};
  1297. }
  1298.  
  1299. #updates b {color:{color:accent};letter-spacing:0.06em;}
  1300.  
  1301. /*---- DAYNIGHT ----*/
  1302.  
  1303. .daynight {
  1304. position: fixed;
  1305. bottom: 30px;
  1306. left: 30px;
  1307. cursor:{select:cursor on hover};
  1308. }
  1309.  
  1310. .daynight svg {
  1311. display: inline-block;
  1312. vertical-align: middle;
  1313. margin:auto;
  1314. background:{color:Icons Background};
  1315. border:1px solid {color:Borders};
  1316. padding:9px;
  1317. border-radius:50%;
  1318. width: 18px;
  1319. height: 18px;
  1320. color: {color:borders};
  1321. -webkit-transition: all .5s;
  1322. -moz-transition: all .5s;
  1323. -ms-transition: all .5s;
  1324. -o-transition: all .5s;
  1325. transition: all .5s;
  1326. }
  1327.  
  1328. .daynight svg:hover {
  1329. color:{color:background}!important;
  1330. background:{color:borders};
  1331. -webkit-transition: all .5s;
  1332. -moz-transition: all .5s;
  1333. -ms-transition: all .5s;
  1334. -o-transition: all .5s;
  1335. transition: all .5s;
  1336. }
  1337.  
  1338. /*---- SCROLL TO TOP -----*/
  1339.  
  1340. .scrolltotop {
  1341. position: fixed;
  1342. bottom: 90px;
  1343. right: 30px;
  1344. border-radius:50%;
  1345. }
  1346.  
  1347. .scrolltotop svg {
  1348. display: inline-block;
  1349. vertical-align: middle;
  1350. margin:auto;
  1351. background:{color:Icons Background};
  1352. border:1px solid {color:Borders};
  1353. padding:9px;
  1354. border-radius:50%;
  1355. width: 18px;
  1356. height: 18px;
  1357. color: {color:borders};
  1358. -webkit-transition: all .5s;
  1359. -moz-transition: all .5s;
  1360. -ms-transition: all .5s;
  1361. -o-transition: all .5s;
  1362. transition: all .5s;
  1363. }
  1364.  
  1365. .scrolltotop svg:hover {
  1366. color:{color:background}!important;
  1367. background:{color:borders};
  1368. -webkit-transition: all .5s;
  1369. -moz-transition: all .5s;
  1370. -ms-transition: all .5s;
  1371. -o-transition: all .5s;
  1372. transition: all .5s;
  1373. }
  1374.  
  1375. /*--- CREDITS
  1376. if you are making changes to the credits, pls do NOT make it so small that even people with good eyesight have to squint to see it ty for understanding xoxo
  1377. ----*/
  1378.  
  1379. #credit {
  1380. position: fixed;
  1381. bottom: 30px;
  1382. right: 30px;
  1383. border-radius:50%;
  1384. }
  1385.  
  1386. #credit svg {
  1387. display: inline-block;
  1388. vertical-align: middle;
  1389. margin:auto;
  1390. background:{color:Icons Background};
  1391. border:1px solid {color:Borders};
  1392. padding:9px;
  1393. border-radius:50%;
  1394. width: 18px;
  1395. height: 18px;
  1396. color: {color:borders};
  1397. -webkit-transition: all .5s;
  1398. -moz-transition: all .5s;
  1399. -ms-transition: all .5s;
  1400. -o-transition: all .5s;
  1401. transition: all .5s;
  1402. }
  1403.  
  1404. #credit svg:hover {
  1405. color:{color:background}!important;
  1406. background:{color:borders};
  1407. -webkit-transition: all .5s;
  1408. -moz-transition: all .5s;
  1409. -ms-transition: all .5s;
  1410. -o-transition: all .5s;
  1411. transition: all .5s;
  1412. }
  1413.  
  1414. /* night */
  1415.  
  1416. body.night .tumblr-controls-btn-trigger span{color: {color:borders night}!important;}
  1417. body.night .tumblr-controls-btn-trigger span:hover {color:{color:background}!important;}
  1418.  
  1419. body.night #credit svg {
  1420. background:{color:Icons Background night};
  1421. border:1px solid {color:Borders night};
  1422. color:{color:borders night}!important;
  1423. }
  1424.  
  1425. body.night #credit svg:hover {
  1426. color:{color:background night}!important;
  1427. background:{color:borders night};
  1428. }
  1429.  
  1430. body.night .scrolltotop svg {
  1431. background:{color:Icons Background night};
  1432. border:1px solid {color:Borders night};
  1433. color:{color:borders night}!important;
  1434. }
  1435.  
  1436. body.night .scrolltotop svg:hover {
  1437. color:{color:background night}!important;
  1438. background:{color:borders night};
  1439. }
  1440.  
  1441. body.night .daynight svg {
  1442. background:{color:Icons Background night};
  1443. border:1px solid {color:Borders night};
  1444. color:{color:borders night}!important;
  1445. }
  1446.  
  1447. body.night .daynight svg:hover {
  1448. color:{color:background night}!important;
  1449. background:{color:borders night};
  1450. }
  1451.  
  1452. body.night #updates svg {
  1453. background:{color:Icons Background night};
  1454. border:1px solid {color:Borders night};
  1455. color:{color:borders night}!important;
  1456. }
  1457.  
  1458. body.night #updates svg:hover {
  1459. color:{color:background night}!important;
  1460. background:{color:borders night};
  1461. }
  1462.  
  1463. body.night #updates .updateu{
  1464. border:1px solid {color:borders night};
  1465. color:{color:background};
  1466. background:{color:background night};
  1467. }
  1468.  
  1469. body.night #updates b{color:{color:accent}!important;}
  1470.  
  1471.  
  1472. /*---- RESPONSIVENESS -----*/
  1473.  
  1474. @media only screen and (max-width: 1100px) {
  1475. main {width: {select:post width};}
  1476.  
  1477. #sidebar {
  1478. position: relative;
  1479. margin: {text:post margin}px auto;
  1480. width: 300px;
  1481. top: auto;
  1482. left:25px;
  1483. }
  1484.  
  1485. {block:ifShowTitle}
  1486. #sidebar .title {
  1487. margin-top: 1.8em;
  1488. margin-bottom:-1.3em!important;
  1489. }
  1490. {block:ifShowTitle}
  1491.  
  1492. #description {
  1493. margin-top:2.5em;
  1494. margin-bottom:0.2em;
  1495. }
  1496.  
  1497. {block:ifSidebarImage}
  1498. #side-img {display:none;}
  1499. {/block:ifSidebarImage}
  1500.  
  1501. section {margin-left: 0px;}
  1502. }
  1503.  
  1504. @media only screen and (max-width: 700px) {
  1505. html, body {overflow-x: hidden;}
  1506. main {margin-left:-25px;}
  1507. article {margin: 80px auto;}
  1508. main, section, article, #wrapper_featured_posts, .posts video, iframe, .video, .video iframe {width: 100%!important;}
  1509.  
  1510. .caption p {padding-left:11px;padding-right:11px;}
  1511. .caption ul {padding-left:11px;padding-right:11px;}
  1512. .caption ol {padding-left:11px;padding-right:11px;}
  1513. .caption img {max-width:100%!important;padding-left:0px;padding-right:0px;}
  1514. .tags {padding-left:11px;padding-right:11px;}
  1515.  
  1516. #sidebar {margin:50px auto 0px auto;}
  1517.  
  1518. #wrapper_featured_posts{margin-top:70px!important;margin-bottom:-90px!important;}
  1519. .inner_featured_posts{grid-gap:.3rem!important;}
  1520.  
  1521. #page-navigation {width:100%;margin-bottom:110px;border-radius:0!important;}
  1522. #page-navigation a {margin: 0 2.2em;}
  1523. .current-page {margin: 0 2.2em;}
  1524. .prevpage, .nxtpage {display:none;}
  1525.  
  1526. .tumblr-controls-btn-trigger{display:none;}
  1527.  
  1528. .scrolltotop {bottom: 30px;margin-right:60px;}
  1529. }
  1530.  
  1531. {CustomCSS}
  1532.  
  1533. /*---- LATEST GIFS -----*/
  1534.  
  1535. #wrapper_featured_posts{
  1536. position: relative;
  1537. width: {select:post width};
  1538. margin:calc({text:post margin}px - 30px) auto calc({text:post margin}px - 20px) auto;
  1539. text-align:center;
  1540. border:1px solid {color:Borders};
  1541. padding:25px 25px 37px 25px;
  1542. border-radius:20px;
  1543. }
  1544.  
  1545. #wrapper_featured_posts .inner_featured_posts{
  1546. font-size:.9em;
  1547. font-family: '{select:body font}', helvetica, sans-serif;
  1548. font-weight:400;
  1549. letter-spacing: 0.01em;
  1550. line-height: 165%;
  1551. display:grid;
  1552. grid-template-columns:repeat(3,1fr);
  1553. grid-gap:.8rem;
  1554. }
  1555.  
  1556. #wrapper_featured_posts .inner_featured_posts img{
  1557. width:100%;
  1558. height:100%;
  1559. object-fit: cover;
  1560. border-radius:15px;
  1561. text-align:center;
  1562. }
  1563.  
  1564. .topfeatured {
  1565. margin:-48px auto 20px auto;
  1566. display: inline-block;
  1567. vertical-align: middle;
  1568. background:{color:Icons Background};
  1569. border:1px solid {color:Borders};
  1570. color:{color:borders};
  1571. padding:9px 10px;
  1572. border-radius:50px;
  1573. width:30%;
  1574. -webkit-transition: all .5s;
  1575. -moz-transition: all .5s;
  1576. -ms-transition: all .5s;
  1577. -o-transition: all .5s;
  1578. transition: all .5s;
  1579. }
  1580.  
  1581. .topfeatured:hover {
  1582. background:{color:Borders} !important;
  1583. color:{color:Icons Background};
  1584. -webkit-transition: all .5s;
  1585. -moz-transition: all .5s;
  1586. -ms-transition: all .5s;
  1587. -o-transition: all .5s;
  1588. transition: all .5s;
  1589. }
  1590.  
  1591. .topfeaturedlink:hover {
  1592. color:{color:link};
  1593. }
  1594.  
  1595. #wrapper_featured_posts .inner_featured_posts>.grid_featured{
  1596. text-align:center;
  1597. position:relative;
  1598. width: 100%;
  1599. height:150px;
  1600. background-color:{color:icons background};
  1601. border-radius:15px;
  1602. }
  1603.  
  1604. #wrapper_featured_posts .inner_featured_posts>.grid_featured .body_caption{display:none;}
  1605.  
  1606. #wrapper_featured_posts .inner_featured_posts>.grid_featured h3{
  1607. font-size:3em;
  1608. padding:1em 1.2em;
  1609. word-break:break-all;
  1610. margin:0;
  1611. }
  1612.  
  1613. #wrapper_featured_posts .inner_featured_posts>.grid_featured h3 a{color:#fff}#wrapper_featured_posts .inner_featured_posts>.grid_featured a{color:{color:link}}#wrapper_featured_posts .inner_featured_posts a.tumblr_blog{text-decoration:none;color:{color:link};font-weight:700;margin-bottom:-1.4em}#wrapper_featured_posts .inner_featured_posts>.grid_featured .body_caption blockquote{margin:0}#wrapper_featured_posts .inner_featured_posts>.grid_featured .body_caption blockquote:before {display: none!important;}#wrapper_featured_posts .inner_featured_posts>.grid_featured .body_caption blockquote:after {display: none!important;}
  1614. #wrapper_featured_posts .inner_featured_posts>.grid_featured .body_caption h2{font-size:1.2em;margin:.4em 0 0}
  1615. #wrapper_featured_posts .inner_featured_posts>.grid_featured .body_caption {color:{color:text};!important;}
  1616.  
  1617. #wrapper_featured_posts .inner_featured_posts>.grid_featured .btnMore{
  1618. position:absolute;
  1619. bottom:-17px;
  1620. left:50%;
  1621. transform:translateX(-50%);
  1622. z-index:999;
  1623. text-decoration:none;
  1624. display:block;
  1625. font-size:calc({select:font size} - 1px);
  1626. background-color:{color:Borders};
  1627. border:1px solid {color:Borders};
  1628. color:{color:Icons Background}!important;
  1629. padding:0.5em 1.8em;
  1630. border-radius:50px;
  1631. }
  1632.  
  1633. #wrapper_featured_posts .inner_featured_posts>.grid_featured .btnMore:hover {
  1634. background-color: {color:text};
  1635. border:1px solid {color:Borders};
  1636. color:{color:borders}!important;
  1637. padding:0.5em 1.8em;
  1638. border-radius:50px;
  1639. -webkit-transition: all .5s;
  1640. -moz-transition: all .5s;
  1641. -ms-transition: all .5s;
  1642. -o-transition: all .5s;
  1643. transition: all .5s;
  1644. }
  1645.  
  1646. </style>
  1647.  
  1648. </head>
  1649.  
  1650. <!----- HTML ----->
  1651.  
  1652. <body>
  1653.  
  1654. <div class="tumblr-controls-btn-trigger" title="click for controls">
  1655. <span><i data-feather="plus-circle"></i></span>
  1656. </div>
  1657.  
  1658. <main>
  1659.  
  1660. <!----- SIDEBAR ----->
  1661.  
  1662. <aside id="sidebar">
  1663. <div id="topsidebar" title="tag me">{text:Tracking Tag or Blog Title}</div></a>
  1664. {block:ifSidebarImage}<a href="/"><img src="{image:Sidebar}" id="side-img" title="home" alt="Sidebar image"/></a>{/block:ifSidebarImage}
  1665. {block:ifShowTitle}<div class="title"><a href="/">{Title}</a></div>{/block:ifShowTitle}
  1666. {block:Description}<div id="description">{text:Desktop Description}</div>{/block:Description}
  1667. <nav>
  1668. <a href="/ask" title="{text:Ask}"><i data-feather="help-circle"></i></a>
  1669. {block:ifLink1}<a href="{text:Link 1 URL}" title="{text:Link 1}"><i data-feather="smile"></i></a>{/block:ifLink1}
  1670. {block:ifLink2}<a href="{text:Link 2 URL}" title="{text:Link 2}"><i data-feather="star"></i></a>{/block:ifLink2}
  1671. {block:ifLink3}<a href="{text:Link 3 URL}" title="{text:Link 3}"><i data-feather="wind"></i></a>{/block:ifLink3}
  1672. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  1673. </nav>
  1674. </aside>
  1675.  
  1676. <section>
  1677.  
  1678. {block:TagPage}
  1679. <article>
  1680. <div class="topinfo"><a href="/" title="return home"><i data-feather="hash"></i></a></div>
  1681. Posts under the tag<br><b>{Tag}</b>
  1682. </article>
  1683. {/block:TagPage}
  1684.  
  1685. {block:DayPage}
  1686. <article>
  1687. Viewing posts made on {Month} {DayOfMonth}, {Year}
  1688. </article>
  1689. {/block:DayPage}
  1690.  
  1691. {block:HomePage}
  1692. {block:ifShowFeaturedPosts}
  1693. <div id="wrapper_featured_posts">
  1694. <a class="topfeaturedlink" href="/tagged/*" title="view all gifs" target="_blank"><div class="topfeatured">latest gifs</div></a>
  1695. <div class="inner_featured_posts">
  1696.  
  1697. </div>
  1698. </div>
  1699. {/block:ifShowFeaturedPosts}
  1700. {/block:HomePage}
  1701.  
  1702. {block:Posts}
  1703. <article class="posts" id="{PostID}">
  1704. {block:Date}
  1705. <div class="topinfo">
  1706. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post" title="pinned post"><i data-feather="map-pin"></i></a>{/block:PinnedPostLabel}
  1707. <a href="{Permalink}" title="posted {TimeAgo}"><i data-feather="clock"></i></a>
  1708.  
  1709. {block:NoteCount}<a class="topnoteslink" href="{Permalink}" title="open post" target="_blank"><div class="topnotes">{NoteCountWithLabel}</div></a>{/block:NoteCount}
  1710. {block:RebloggedFrom}
  1711. <a href="{ReblogParentURL}" title="reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-64}" class="perma-icon"></a>
  1712. {/block:RebloggedFrom}
  1713. </div>
  1714. {/block:Date}
  1715. {block:Text}
  1716. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1717. {block:NotReblog}
  1718. <li class="caption text-caption">
  1719. {Body}
  1720. </li>
  1721. {/block:NotReblog}
  1722. {block:RebloggedFrom}
  1723. {block:Reblogs}
  1724. <li class="caption text-caption">
  1725. <img src="{PortraitURL-64}" class="user-icon">
  1726. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1727. {Body}
  1728. </li>
  1729. {/block:Reblogs}
  1730. {/block:RebloggedFrom}
  1731. {/block:Text}
  1732.  
  1733. {block:Link}
  1734. <a href="{URL}" class="link-wrap">
  1735. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1736. <div class="link">
  1737. <div class="title">{Name}</div>
  1738. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1739. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1740. </div>
  1741. </a>
  1742. {block:Description}
  1743. {block:NotReblog}
  1744. <li class="caption">
  1745. {Description}
  1746. </li>
  1747. {/block:NotReblog}
  1748. {/block:Description}
  1749. {block:RebloggedFrom}
  1750. {block:Reblogs}
  1751. <li class="caption">
  1752. <img src="{PortraitURL-64}" class="user-icon">
  1753. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1754. {Body}
  1755. </li>
  1756. {/block:Reblogs}
  1757. {/block:RebloggedFrom}
  1758. {/block:Link}
  1759.  
  1760. {block:Photo}
  1761. <div class="photo">
  1762. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  1763. </div>
  1764. {block:Caption}
  1765. {block:NotReblog}
  1766. <li class="caption">
  1767. {Caption}
  1768. </li>
  1769. {/block:NotReblog}
  1770. {block:RebloggedFrom}
  1771. {block:Reblogs}
  1772. <li class="caption">
  1773. <img src="{PortraitURL-64}" class="user-icon">
  1774. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1775. {Body}
  1776. </li>
  1777. {/block:Reblogs}
  1778. {/block:RebloggedFrom}
  1779. {/block:Caption}
  1780. {/block:Photo}
  1781.  
  1782. {block:Photoset}
  1783. <div class="photo">{Photoset-700}</div>
  1784. {block:Caption}
  1785. {block:NotReblog}
  1786. <li class="caption">
  1787. {Caption}
  1788. </li>
  1789. {/block:NotReblog}
  1790. {block:RebloggedFrom}
  1791. {block:Reblogs}
  1792. <li class="caption">
  1793. <img src="{PortraitURL-64}" class="user-icon">
  1794. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1795. {Body}
  1796. </li>
  1797. {/block:Reblogs}
  1798. {/block:RebloggedFrom}
  1799. {/block:Caption}
  1800. {/block:Photoset}
  1801.  
  1802. {block:Video}
  1803. <div class="video">{Video-500}</div>
  1804. {block:Caption}
  1805. {block:NotReblog}
  1806. <li class="caption">
  1807. {Caption}
  1808. </li>
  1809. {/block:NotReblog}
  1810. {block:RebloggedFrom}
  1811. {block:Reblogs}
  1812. <li class="caption">
  1813. <img src="{PortraitURL-64}" class="user-icon">
  1814. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1815. {Body}
  1816. </li>
  1817. {/block:Reblogs}
  1818. {/block:RebloggedFrom}
  1819. {/block:Caption}
  1820. {/block:Video}
  1821.  
  1822. {block:Quote}
  1823. <div class="quote">“{Quote}”</div>
  1824. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1825. {/block:Quote}
  1826.  
  1827. {block:Chat}
  1828. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1829. <ul class="chat">{block:Lines}
  1830. <li>
  1831. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1832. {Line}
  1833. <div class="chatline"></div>
  1834. </li>
  1835. {/block:Lines}</ul>
  1836. {/block:Chat}
  1837.  
  1838. {block:Answer}
  1839. <div class="ask-wrap">
  1840. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1841. <div class="asking">{Asker}</div> {text:asked}
  1842. <div class="question">{Question}</div>
  1843. </div>
  1844. {block:Answerer}
  1845. <li class="caption">
  1846. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1847. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div> answered:
  1848. {Answer}
  1849. </li>
  1850. {/block:Answerer}
  1851. {block:NotReblog}
  1852. <li class="caption">
  1853. {Replies}
  1854. </li>
  1855. {/block:NotReblog}
  1856. {block:RebloggedFrom}
  1857. {block:Reblogs}
  1858. <li class="caption">
  1859. <img src="{PortraitURL-64}" class="user-icon">
  1860. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1861. {Body}
  1862. </li>
  1863. {/block:Reblogs}
  1864. {/block:RebloggedFrom}
  1865. {/block:Answer}
  1866.  
  1867. {block:Audio}
  1868. <div class="audiopost">
  1869. {block:AlbumArt}
  1870. <div class="album-art"><img src="{AlbumArtURL}" class="album-art-pic"></div>
  1871. {/block:AlbumArt}
  1872. <div class="audiobox">
  1873. <div class="button">
  1874. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1875. </div>
  1876. </div>
  1877. <div class="audioinfo">
  1878. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1879. {block:Artist}<li class="artistname">by {Artist}</li>{/block:Artist}
  1880. {block:Album}<li class="artistname">from {Album}</li>{/block:Album}
  1881. </div>
  1882. </div>
  1883.  
  1884. {block:Caption}
  1885. {block:NotReblog}
  1886. <li class="caption">
  1887. {Caption}
  1888. </li>
  1889. {/block:NotReblog}
  1890. {block:RebloggedFrom}
  1891. {block:Reblogs}
  1892. <li class="caption">
  1893. <img src="{PortraitURL-64}" class="user-icon">
  1894. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1895. {Body}
  1896. </li>
  1897. {/block:Reblogs}
  1898. {/block:RebloggedFrom}
  1899. {/block:Caption}
  1900. {/block:Audio}
  1901.  
  1902. {block:Date}
  1903. <div class="info">
  1904.  
  1905. {block:PermalinkPage}
  1906.  
  1907. {block:RebloggedFrom}
  1908. <a href="{ReblogRootURL}" title="original poster"><img src="{ReblogRootPortraitURL-64}" class="perma-icon"></a>
  1909. {/block:RebloggedFrom}
  1910. {block:ContentSource}<a href="{SourceURL}" title="{ReblogRootName}">{lang:Source}</a>{/block:ContentSource}
  1911.  
  1912. {/block:PermalinkPage}
  1913.  
  1914. {block:HasTags}<a class="tag-button" title="view tags"><i data-feather="hash"></i></a>{/block:HasTags}
  1915.  
  1916. <a class="rebloghighlightlink" href="{ReblogURL}" target="_blank" title="{text:Reblog Hover Text}"><div class="rebloghighlight">reblog</div></a>
  1917.  
  1918. {block:ifShowLikeButton}
  1919. <a class="likeb" href="#" title="click to like">{LikeButton}<span class="actual-button"><i data-feather="heart"></i></span></a>
  1920. {/block:ifShowLikeButton}
  1921.  
  1922. </div>
  1923. {/block:Date}
  1924.  
  1925. {block:HasTags}
  1926. <div class="tags">
  1927. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1928. </div>
  1929. {/block:HasTags}
  1930.  
  1931. {block:PermalinkPage}{block:Date}
  1932. {block:NoteCount}{block:PostNotes}
  1933. <div class="notes">
  1934. {PostNotes-64}
  1935. </div>
  1936. {/block:PostNotes}{/block:NoteCount}
  1937. {/block:Date}{/block:PermalinkPage}
  1938.  
  1939. </article>
  1940. {/block:Posts}
  1941.  
  1942. {block:Pagination}
  1943. <article id="page-navigation">
  1944. {block:PreviousPage}<div class="prevpage"><a href="{PreviousPage}" title="back"><i data-feather="arrow-left"></i></a></div>{/block:PreviousPage}
  1945. {block:JumpPagination length="5"}
  1946. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1947. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1948. {/block:JumpPagination}
  1949. {block:NextPage}<div class="nxtpage"><a href="{NextPage}" title="next"><i data-feather="arrow-right"></i></a></div>{/block:NextPage}
  1950. </article>
  1951. {/block:Pagination}
  1952.  
  1953. </section>
  1954.  
  1955. </main>
  1956.  
  1957. {block:ifShowUpdates}
  1958. <div id="updates">
  1959. <a href="#" title="updates"><div class="updatet"><i data-feather="bell"></i></div></a>
  1960. <div class="updateu">{text:updates tab content}</div>
  1961. </div>
  1962. {/block:ifShowUpdates}
  1963.  
  1964. <div class="daynight" title="change mode"><i data-feather="moon"></i></div>
  1965.  
  1966. <a href="#" class="scrolltotop" title="scroll to top"><i data-feather="arrow-up"></i></a>
  1967.  
  1968. <!---- do NOT delete please ty ---->
  1969.  
  1970. <a href="https://sharpay.tumblr.com" title="theme by lex"><div id="credit"><i data-feather="x"></i></div></a>
  1971.  
  1972. <!---- SCRIPTS ---->
  1973.  
  1974. <script src="https://unpkg.com/popper.js@1"></script>
  1975. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1976.  
  1977. <script>
  1978. feather.replace()
  1979. </script>
  1980.  
  1981. <script>
  1982.  
  1983. /// updates tab 01 by mistletoe
  1984.  
  1985. $(document).ready(function () {
  1986. $('.updateu').hide();
  1987. $('.updatet').click(function () {
  1988. // .parent() selects the A tag, .next() selects the P tag
  1989. $(this).parent().next().slideToggle(400);
  1990. });
  1991. $('.text').slideUp(400);
  1992. });
  1993.  
  1994. /// daynight by eggthemes
  1995.  
  1996. $(document).ready(function(){
  1997. $('.daynight').click(function(){
  1998. $('body').toggleClass('night');
  1999. $('.daynight span').toggleClass('fa-sun');
  2000. });
  2001. });
  2002.  
  2003. /// scroll to top by paulund
  2004.  
  2005. $(document).ready(function(){
  2006.  
  2007. $(window).scroll(function(){
  2008. if ($(this).scrollTop() > 100) {
  2009. $('.scrolltotop').fadeIn();
  2010. } else {
  2011. $('.scrolltotop').fadeOut();
  2012. }
  2013. });
  2014.  
  2015. $('.scrolltotop').click(function(){
  2016. $('html, body').animate({scrollTop : 0},800);
  2017. return false;
  2018. });
  2019.  
  2020. });
  2021.  
  2022. /// tooltips by atomiks
  2023.  
  2024. tippy('[title]',
  2025. {
  2026. theme: 'custom',
  2027. animation: 'fade',
  2028. arrow: false,
  2029. followCursor: true,
  2030. delay: 100,
  2031. placement: 'bottom',
  2032. zIndex: 999893275999,
  2033. maxWidth: 300,
  2034.  
  2035. content(reference) {
  2036. const title = reference.getAttribute('title');
  2037. reference.removeAttribute('title');
  2038. return title;
  2039. },
  2040. });
  2041.  
  2042. /// showhide tags by tuser @seyche
  2043.  
  2044. $(document).ready(function(){
  2045. $('.tags').hide();
  2046. $('.tag-button').click(function() {
  2047. $(this).closest('article').find('.tags').slideToggle(500);
  2048. $(this).toggleClass('tag-clicked');
  2049. return false;
  2050. });
  2051. });
  2052.  
  2053. /// notecount shortener by tuser @shythemes
  2054.  
  2055. var $container = $('article');
  2056. $container.find('.topnotes').each(function(){
  2057. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  2058. if (n > 999) {
  2059. n = Math.floor(n / 100) / 10;
  2060. $(this).text(n + 'k notes');
  2061. }
  2062. });
  2063.  
  2064. </script>
  2065.  
  2066. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  2067.  
  2068. <script type="text/javascript">
  2069. /// showhide controls by tuser @themesbytommy
  2070. $(".tumblr-controls-btn-trigger").click(function(){
  2071. $(".tumblr-controls-btn-trigger").toggleClass("tumblr-controls-btn-trigger-active");
  2072. $(".tmblr-iframe--loaded").toggleClass("tmblr-iframe--loaded-active");
  2073. });
  2074. </script>
  2075.  
  2076. <script src="https://static.tumblr.com/5ojoydj/Kzyp56cvt/jquery-2.2.0.min.js"></script>
  2077. <script>
  2078. /// featured posts by fukuo.site
  2079. $(document).ready(function() {
  2080. var readData, insert;
  2081. var url = "https://{Name}.tumblr.com/api/read/json?&tagged={text:Creations Tag}";
  2082. $.getScript(url, function() {
  2083. readData = tumblr_api_read;
  2084. console.log(readData);
  2085.  
  2086. /*
  2087. replace "2" below with your desired number
  2088. of posts to show under "latest gifs".
  2089. i recommend sticking to 2 (3) or 5 (6), keep it even
  2090. */
  2091. for (var i = 0; i <= 2; i++) {
  2092. var posts = readData.posts[i];
  2093. var link = posts["url"];
  2094.  
  2095. var img = posts["photo-url-1280"];
  2096.  
  2097. var captionPhotos = posts["photo-caption"];
  2098.  
  2099. var titleText = posts["regular-title"];
  2100. var captionText = posts["regular-body"];
  2101.  
  2102.  
  2103. if (img === undefined) {
  2104. insert = '<div class="grid_featured">';
  2105. insert += '<h3><a href="' + link + '">' + titleText + '</a></h3>';
  2106. insert += '<div class="body_caption">' + captionText + '</div>';
  2107. insert += '<a class="btnMore" href="' + link + '">open</a>';
  2108. insert += '</div>';
  2109.  
  2110. $('h3').filter(function () {
  2111. return $(this).text() == 'null';
  2112. }).remove();
  2113. $('.inner_featured_posts').append(insert);
  2114.  
  2115. } else {
  2116. insert = '<div class="grid_featured">';
  2117. insert += '<img src="' + img + '">';
  2118. insert += '<div class="body_caption">' + captionPhotos + '</div>';
  2119. insert += '<a class="btnMore" href="' + link + '">open</a>';
  2120. insert += '</div>';
  2121. $('.inner_featured_posts').append(insert);
  2122.  
  2123. }
  2124.  
  2125. }
  2126.  
  2127. });
  2128.  
  2129. });
  2130. </script>
  2131.  
  2132. </body>
  2133. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!