API tools faq
paste
Advertisement
amboise

odisea

amboise
Jan 17th, 2020
4,245
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.93 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. theme odisea by amboise
  5. please be cool and don't steal nor copy n.n
  6.  
  7. base code by sorrism
  8. custom tumblr controls by cyantists
  9. timeago plugin by bychloethemes
  10. photosets by pixel union
  11. shortening notes, lightboxes, tumblr controls by shythemes
  12. flexible frames script by nouvae
  13. remove tumblr redirects script by magnusthemes
  14. feather icons by cole demis
  15. tooltips by malihu
  16.  
  17. full credits at https://amboise.tumblr.com/credits
  18.  
  19.  
  20. -->
  21.  
  22. <!DOCTYPE html>
  23. <head>
  24.  
  25. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  26.  
  27. <link rel="shortcut icon" href="{favicon}">
  28.  
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  31. <meta name="viewport" content="width=device-width, initial-scale=1">
  32.  
  33. <!--Default Variables-->
  34.  
  35. <meta name="color:Background" content="#eeeeee"/>
  36. <meta name="color:Top Bar Text" content="#ffffff"/>
  37. <meta name="color:Top Bar Background" content="#2e2d2c"/>
  38. <meta name="color:Post" content="#ffffff"/>
  39. <meta name="color:Post Accent" content="#e2dfd8"/>
  40. <meta name="color:Post Accent Text" content="#ffffff"/>
  41. <meta name="color:Text" content="#666666"/>
  42. <meta name="color:Info" content="#a4a3a3"/>
  43. <meta name="color:Accent" content="#000000"/>
  44. <meta name="color:Link Hover" content="#000000"/>
  45. <meta name="color:Borders" content="#eeeeee"/>
  46. <meta name="color:Tooltip Text" content="#ffffff"/>
  47. <meta name="color:Tooltip Background" content="#2e2d2c"/>
  48. <meta name="color:Scrollbar" content="#d5d5d5"/>
  49. <meta name="color:Text Selection" content="#000000"/>
  50. <meta name="color:Text Selection Background" content="#fbfbfb"/>
  51.  
  52. <meta name="select:Font" content="Lato" title="Lato">
  53. <meta name="select:Font" content="Fira Sans" title="Fira Sans">
  54. <meta name="select:Font" content="Nunito Sans" title="Nunito Sans">
  55. <meta name="select:Font" content="Open Sans" title="Open Sans">
  56. <meta name="select:Font" content="Karla" title="Karla">
  57. <meta name="select:Font" content="PT Sans" title="PT Sans">
  58.  
  59. <meta name="select:Font Size" content="13px" title="13px"/>
  60. <meta name="select:Font Size" content="14px" title="14px"/>
  61.  
  62. <meta name="select:Posts" content="500px" title="500px"/>
  63. <meta name="select:Posts" content="540px" title="540px"/>
  64.  
  65. <meta name="if:Show Avatar" content=""/>
  66. <meta name="if:Show Captions" content=""/>
  67. <meta name="if:Show Tags" content=""/>
  68. <meta name="if:Show Search Bar" content=""/>
  69. <meta name="if:Dark Tumblr Controls" content=""/>
  70.  
  71. <meta name="text:Subtitle" content="stay"/>
  72. <meta name="text:Search Placeholder" content="search">
  73.  
  74. <meta name="text:Link 1" content=""/>
  75. <meta name="text:Link 1 URL" content=""/>
  76. <meta name="text:Link 2" content=""/>
  77. <meta name="text:Link 2 URL" content=""/>
  78. <meta name="text:Link 3" content=""/>
  79. <meta name="text:Link 3 URL" content=""/>
  80. <meta name="text:Link 4" content=""/>
  81. <meta name="text:Link 4 URL" content=""/>
  82. <meta name="text:Link 5" content=""/>
  83. <meta name="text:Link 5 URL" content=""/>
  84. <meta name="text:Link 6" content=""/>
  85. <meta name="text:Link 6 URL" content=""/>
  86.  
  87. <meta name="image:Icon" content=""/>
  88.  
  89. <!-- fonts and icons ------------------------------------------------------->
  90.  
  91. <link href="https://fonts.googleapis.com/css?family={select:font}:400,400i,600,700,700i|Inconsolata&display=swap" rel="stylesheet">
  92. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  93. <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
  94.  
  95. <!-- CSS customization ----------------------------------------------------->
  96.  
  97. <style type="text/css">
  98.  
  99. /* lightbox */
  100.  
  101. #tumblr_lightbox, .tmblr-lightbox {
  102. background-color:rgba(0,0,0,.75)!important;
  103. }
  104. #vignette, .vignette {
  105. opacity:0;
  106. }
  107. #tumblr_lightbox img, .lightbox-image {
  108. box-shadow:none!important;
  109. border-radius:0!important;
  110. -moz-box-sizing:border-box;
  111. box-sizing:border-box;
  112. max-width:none;
  113. }
  114. #tumblr_lightbox_caption, .lightbox-caption {
  115. visibility:hidden;
  116. }
  117.  
  118. /* tumblr controls by@cyantists */
  119.  
  120. iframe.tmblr-iframe {
  121. position:fixed;
  122. z-index:1000;
  123. top:6px;
  124. opacity:0;
  125. padding-right:75px;
  126. {block:IfDarkTumblrControls}
  127. filter:invert(1) contrast(150%);
  128. -webkit-filter:invert(1) contrast(150%);
  129. -o-filter:invert(1) contrast(150%);
  130. -moz-filter:invert(1) contrast(150%);
  131. -ms-filter:invert(1) contrast(150%);
  132. {/block:IfDarkTumblrControls}
  133. transform:scale(0.65);
  134. transform-origin:100% 0;
  135. -webkit-transform:scale(0.65);
  136. -webkit-transform-origin:100% 0;
  137. -o-transform:scale(0.65);
  138. -o-transform-origin:100% 0;
  139. -moz-transform:scale(0.65);
  140. -moz-transform-origin:100% 0;
  141. -ms-transform:scale(0.65);
  142. -ms-transform-origin:100% 0;}
  143.  
  144. iframe.tmblr-iframe:hover {
  145. opacity:1!important;
  146. transition:all .3s linear;
  147. -o-transition:all .3s linear;
  148. -moz-transition:all .3s linear;
  149. -webkit-transition:all .3s linear;
  150. }
  151.  
  152. .hcontrols {
  153. position:fixed;
  154. top:16px;
  155. right:15px;
  156. z-index:999;
  157. }
  158.  
  159. .hcontrols svg {
  160. width:15px;
  161. height:15px;
  162. margin-right:10px;
  163. overflow:hidden;
  164. color:{color:top bar text};
  165. }
  166.  
  167. /* text selection color */
  168.  
  169. ::selection {
  170. background:{color:text selection background};
  171. color:{color:text selection};
  172. }
  173.  
  174. ::moz-selection {
  175. background:{color:text selection background};
  176. color:{color:text selection};
  177. }
  178.  
  179. ::webkit-selection {
  180. background:{color:text selection background};
  181. color:{color:text selection};
  182. }
  183.  
  184. /* scrollbar */
  185.  
  186. ::-webkit-scrollbar {
  187. width:.4em;
  188. background:{color:background};
  189. }
  190.  
  191. ::-webkit-scrollbar,
  192. ::-webkit-scrollbar-thumb {
  193. overflow:visible;
  194. border-radius:0;
  195. }
  196.  
  197. ::-webkit-scrollbar-thumb {
  198. background:{color:scrollbar};
  199. }
  200.  
  201. /* tooltips */
  202.  
  203. #s-m-t-tooltip {
  204. max-width:300px;
  205. z-index:1000;
  206. margin:0 14px 0 12px;
  207. padding:7.5px 12.5px 7.5px 12.5px;
  208. background-color:{color:tooltip background};
  209. color:{color:tooltip text};
  210. font-size:calc({select:font size} - 2px);
  211. font-family: 'Inconsolata', monospace;
  212. text-transform:uppercase;
  213. letter-spacing:2px;
  214. line-height:16px;
  215. }
  216.  
  217. /* main structure */
  218.  
  219. body {
  220. color:{color:text};
  221. background:{color:background};
  222. line-height:1.6em;
  223. letter-spacing:.75px;
  224. font-size:{select:font size};
  225. font-family:{select:font};
  226. font-weight:400;
  227. word-wrap:break-word;
  228. text-align:left;
  229. margin:0;
  230. overflow-x:hidden!important;
  231. }
  232.  
  233. body.overflow {overflow:hidden!important;}
  234.  
  235. b, strong {font-weight:700;}
  236.  
  237. a {
  238. color:inherit;
  239. text-decoration:none;
  240. transition:all .3s linear;
  241. -webkit-transition:all .3s linear;
  242. -o-transition:all .3s linear;
  243. -moz-transition:all .3s linear;
  244. }
  245.  
  246. a, a img {cursor:pointer;}
  247.  
  248. a:hover {
  249. text-decoration:none;
  250. }
  251.  
  252. img {
  253. opacity:1;
  254. border:0;
  255. text-decoration:none;
  256. max-width:100%;
  257. height:auto;
  258. display:block;
  259. }
  260.  
  261. blockquote {
  262. padding:0 0 0 15px;
  263. margin:.75em 0;
  264. border-left:2px solid #eee;
  265. }
  266.  
  267. pre {
  268. padding:0;
  269. margin:0;
  270. line-height:inherit!important;
  271. background:transparent;
  272. font-family:inherit!Important;
  273. font-size:inherit!important;
  274. white-space:pre-wrap;
  275. white-space:-moz-pre-wrap;
  276. white-space:-pre-wrap;
  277. white-space:-o-pre-wrap;
  278. word-wrap:break-word;
  279. }
  280.  
  281. p {margin:.5em 0;}
  282.  
  283. p:first-of-type {margin-top:0;}
  284.  
  285. p:last-of-type {margin-bottom:.5em;}
  286.  
  287. small, big, sub, pre {
  288. font-size:1em!important;
  289. line-height:1.4em!important;
  290. vertical-align:baseline!important;
  291. }
  292.  
  293. h1, h2, h3, h4 {
  294. margin:.5em 0;
  295. font-size:{select:font size};
  296. padding:0;
  297. color:{color:text};
  298. font-weight:700;
  299. }
  300.  
  301. .posts h1:first-child, .posts h2:first-child, .posts h3:first-child, .posts h4:first-child {margin-top:0;}
  302.  
  303. hr {
  304. border:none;
  305. box-shadow:0;
  306. margin:2em auto;
  307. width:75px;
  308. border-top:1px solid {color:borders};
  309. }
  310.  
  311. ul {
  312. margin-left:-30px;
  313. list-style-type:none;
  314. }
  315.  
  316. /* hdr */
  317.  
  318. .ttt {
  319. top:0;
  320. left:0;
  321. right:0;
  322. padding:15px 25px 15px 25px;
  323. width:calc(100% - 50px);
  324. height:25px;
  325. position:fixed;
  326. font-size:calc({select:font size} - 1px);
  327. font-family: 'Inconsolata', monospace;
  328. text-transform:uppercase;
  329. letter-spacing:2px;
  330. z-index:999;
  331. color:{color:top bar text};
  332. background:{color:top bar background};
  333. }
  334.  
  335. .inff {
  336. margin:0 auto 0 auto;
  337. width:calc(({select:posts} - 50px) + 277px);
  338. }
  339.  
  340. /* search bar */
  341.  
  342. .sfm input {
  343. border:0;
  344. margin:0;
  345. padding:0;
  346. text-align:left;
  347. font-size:{select:font size};
  348. font-family:{select:font};
  349. letter-spacing:.75px;
  350. color:{color:text};
  351. background:{color:post};
  352. }
  353.  
  354. .sfm input::placeholder {
  355. color:{color:text};
  356. }
  357.  
  358. /* sidebar */
  359.  
  360. header {
  361. margin:0 0 50px 0;
  362. float:right;
  363. width:195px;
  364. }
  365.  
  366. .icon, .icon img {
  367. width:50px;
  368. height:50px;
  369. display:block;
  370. margin-top:-50px;
  371. }
  372.  
  373. .icon {
  374. float:right;
  375. margin:0 0 -190px 2px;
  376. }
  377.  
  378. .pum {
  379. width:195px;
  380. margin-bottom:6px;
  381. }
  382.  
  383. .name {
  384. display:block;
  385. width:calc(100% - 106px);
  386. background:{color:post};
  387. padding:15px 25px 15px 25px;
  388. height:20px;
  389. font-size:calc({select:font size} - 2px);
  390. font-weight:700;
  391. text-transform:uppercase;
  392. }
  393.  
  394. .name b {
  395. overflow:hidden;
  396. white-space:nowrap;
  397. text-overflow:ellipsis;
  398. }
  399.  
  400. .desc, nav li {
  401. background:{color:post};
  402. padding:15px 25px 15px 25px;
  403. width:145px;
  404. }
  405.  
  406. .desc {
  407. margin:5px 0 5px 0;
  408. padding:25px;
  409. }
  410.  
  411. nav li {
  412. width:110px;
  413. padding:10px 20px 10px 20px;
  414. margin-top:6px;
  415. list-style-type:none;
  416. counter-increment:numbs;
  417. margin-left:45px;
  418. white-space:nowrap;
  419. text-overflow:ellipsis;
  420. overflow:hidden;
  421. }
  422.  
  423. nav li:before {
  424. content:counters(numbs, '.', decimal-leading-zero);
  425. position:absolute;
  426. margin-top:-10px;
  427. margin-left:-65px;
  428. width:calc({select:font size} + 2px);
  429. height:calc({select:font size} + 2px);
  430. margin-right:2px;
  431. background:{color:post};
  432. padding:10px 11px 14px 13px;
  433. font-size:calc({select:font size} - 2px);
  434. font-family: 'Inconsolata', monospace;
  435. text-transform:uppercase;
  436. letter-spacing:2px;
  437. }
  438.  
  439. /* dropdown menu - https://codepen.io/pedronauck/pen/fcaDw */
  440.  
  441. .menus {
  442. z-index:99999;
  443. position:fixed;
  444. top:15px;
  445. right:50px;
  446. }
  447.  
  448. .dropdown {
  449. width:160px;
  450. right:50px;
  451. font-family: 'Inconsolata', monospace;
  452. text-transform:uppercase;
  453. letter-spacing:2px;
  454. font-size:calc({select:font size} - 1px)!important;
  455. }
  456.  
  457. .dropdown a:hover {cursor:default;}
  458. .dropdown-menu a {cursor:pointer!important;}
  459. .dropdown svg:hover {cursor:pointer;}
  460.  
  461. .dropdown svg {
  462. width:19px;
  463. height:19px;
  464. float:right;
  465. margin:0;
  466. color:{color:top bar text};
  467. }
  468.  
  469. .dropdown b {
  470. font-weight:400;
  471. }
  472.  
  473. .dropdown [data-toggle="dropdown"] {
  474. position:relative;
  475. display:block;
  476. color:{color:text};
  477. min-height:20px;
  478. max-height:20px;
  479. }
  480.  
  481. .dropdown .dropdown-menu {
  482. overflow:hidden;
  483. position:relative;
  484. max-height:0;
  485. padding:0;
  486. margin:50px 0 0 0;
  487. text-align:left;
  488. }
  489.  
  490. .dropdown .dropdown-menu svg {
  491. float:right;
  492. width:12px;
  493. height:12px;
  494. color:{color:top bar text};
  495. margin-top:4px;
  496. background:transparent;
  497. }
  498.  
  499. .dropdown ul {
  500. margin-left:-24px;
  501. list-style-type:none;
  502. }
  503.  
  504. .dropdown ul li:before {
  505. content:'';
  506. margin-right:10px;
  507. }
  508.  
  509. .dropdown .dropdown-menu li {
  510. padding:0;
  511. margin:calc(-8px - {select:font size}) 0 0 0;
  512. }
  513.  
  514. .dropdown .dropdown-menu li a {
  515. display:block;
  516. color:{color:top bar text};
  517. background:{color:top bar background};
  518. margin:0;
  519. padding:12.5px 15px 0px 15px;
  520. max-width:100%;
  521. overflow:hidden;
  522. white-space:nowrap;
  523. text-overflow:ellipsis;
  524. }
  525.  
  526. .dropdown .dropdown-menu li:first-child a {
  527. padding-top:12.5px;
  528. }
  529.  
  530. .dropdown .dropdown-menu li:last-child a {
  531. padding-bottom:12.5px;
  532. }
  533.  
  534. .dropdown .show, .dropdown .hide {
  535. -moz-transform-origin: 50% 0%;
  536. -ms-transform-origin: 50% 0%;
  537. -webkit-transform-origin: 50% 0%;
  538. transform-origin: 50% 0%;
  539. }
  540.  
  541. .dropdown .show {
  542. display: block;
  543. max-height: 9999px;
  544. -moz-transform: scaleY(1);
  545. -ms-transform: scaleY(1);
  546. -webkit-transform: scaleY(1);
  547. transform: scaleY(1);
  548. animation: showAnimation 0.5s ease-in-out;
  549. -moz-animation: showAnimation 0.5s ease-in-out;
  550. -webkit-animation: showAnimation 0.5s ease-in-out;
  551. -moz-transition: max-height .75s ease-in-out;
  552. -o-transition: max-height .75s ease-in-out;
  553. -webkit-transition: max-height .75s ease-in-out;
  554. transition: max-height .75s ease-in-out;
  555. }
  556.  
  557. .dropdown .hide {
  558. max-height: 0;
  559. -moz-transform: scaleY(0);
  560. -ms-transform: scaleY(0);
  561. -webkit-transform: scaleY(0);
  562. transform: scaleY(0);
  563. animation: hideAnimation 0.4s ease-out;
  564. -moz-animation: hideAnimation 0.4s ease-out;
  565. -webkit-animation: hideAnimation 0.4s ease-out;
  566. -moz-transition: max-height 0.5s ease-out;
  567. -o-transition: max-height 0.5s ease-out;
  568. -webkit-transition: max-height 0.5s ease-out;
  569. transition: max-height 0.5s ease-out;
  570. }
  571.  
  572. @keyframes showAnimation {
  573. 0% {
  574. -moz-transform: scaleY(0.1);
  575. -ms-transform: scaleY(0.1);
  576. -webkit-transform: scaleY(0.1);
  577. transform: scaleY(0.1);
  578. }
  579. 40% {
  580. -moz-transform: scaleY(1.04);
  581. -ms-transform: scaleY(1.04);
  582. -webkit-transform: scaleY(1.04);
  583. transform: scaleY(1.04);
  584. }
  585. 60% {
  586. -moz-transform: scaleY(0.98);
  587. -ms-transform: scaleY(0.98);
  588. -webkit-transform: scaleY(0.98);
  589. transform: scaleY(0.98);
  590. }
  591. 80% {
  592. -moz-transform: scaleY(1.04);
  593. -ms-transform: scaleY(1.04);
  594. -webkit-transform: scaleY(1.04);
  595. transform: scaleY(1.04);
  596. }
  597. 100% {
  598. -moz-transform: scaleY(0.98);
  599. -ms-transform: scaleY(0.98);
  600. -webkit-transform: scaleY(0.98);
  601. transform: scaleY(0.98);
  602. }
  603. 80% {
  604. -moz-transform: scaleY(1.02);
  605. -ms-transform: scaleY(1.02);
  606. -webkit-transform: scaleY(1.02);
  607. transform: scaleY(1.02);
  608. }
  609. 100% {
  610. -moz-transform: scaleY(1);
  611. -ms-transform: scaleY(1);
  612. -webkit-transform: scaleY(1);
  613. transform: scaleY(1);
  614. }
  615. }
  616. @-moz-keyframes showAnimation {
  617. 0% {
  618. -moz-transform: scaleY(0.1);
  619. -ms-transform: scaleY(0.1);
  620. -webkit-transform: scaleY(0.1);
  621. transform: scaleY(0.1);
  622. }
  623. 40% {
  624. -moz-transform: scaleY(1.04);
  625. -ms-transform: scaleY(1.04);
  626. -webkit-transform: scaleY(1.04);
  627. transform: scaleY(1.04);
  628. }
  629. 60% {
  630. -moz-transform: scaleY(0.98);
  631. -ms-transform: scaleY(0.98);
  632. -webkit-transform: scaleY(0.98);
  633. transform: scaleY(0.98);
  634. }
  635. 80% {
  636. -moz-transform: scaleY(1.04);
  637. -ms-transform: scaleY(1.04);
  638. -webkit-transform: scaleY(1.04);
  639. transform: scaleY(1.04);
  640. }
  641. 100% {
  642. -moz-transform: scaleY(0.98);
  643. -ms-transform: scaleY(0.98);
  644. -webkit-transform: scaleY(0.98);
  645. transform: scaleY(0.98);
  646. }
  647. 80% {
  648. -moz-transform: scaleY(1.02);
  649. -ms-transform: scaleY(1.02);
  650. -webkit-transform: scaleY(1.02);
  651. transform: scaleY(1.02);
  652. }
  653. 100% {
  654. -moz-transform: scaleY(1);
  655. -ms-transform: scaleY(1);
  656. -webkit-transform: scaleY(1);
  657. transform: scaleY(1);
  658. }
  659. }
  660. @-webkit-keyframes showAnimation {
  661. 0% {
  662. -moz-transform: scaleY(0.1);
  663. -ms-transform: scaleY(0.1);
  664. -webkit-transform: scaleY(0.1);
  665. transform: scaleY(0.1);
  666. }
  667. 40% {
  668. -moz-transform: scaleY(1.04);
  669. -ms-transform: scaleY(1.04);
  670. -webkit-transform: scaleY(1.04);
  671. transform: scaleY(1.04);
  672. }
  673. 60% {
  674. -moz-transform: scaleY(0.98);
  675. -ms-transform: scaleY(0.98);
  676. -webkit-transform: scaleY(0.98);
  677. transform: scaleY(0.98);
  678. }
  679. 80% {
  680. -moz-transform: scaleY(1.04);
  681. -ms-transform: scaleY(1.04);
  682. -webkit-transform: scaleY(1.04);
  683. transform: scaleY(1.04);
  684. }
  685. 100% {
  686. -moz-transform: scaleY(0.98);
  687. -ms-transform: scaleY(0.98);
  688. -webkit-transform: scaleY(0.98);
  689. transform: scaleY(0.98);
  690. }
  691. 80% {
  692. -moz-transform: scaleY(1.02);
  693. -ms-transform: scaleY(1.02);
  694. -webkit-transform: scaleY(1.02);
  695. transform: scaleY(1.02);
  696. }
  697. 100% {
  698. -moz-transform: scaleY(1);
  699. -ms-transform: scaleY(1);
  700. -webkit-transform: scaleY(1);
  701. transform: scaleY(1);
  702. }
  703. }
  704. @keyframes hideAnimation {
  705. 0% {
  706. -moz-transform: scaleY(1);
  707. -ms-transform: scaleY(1);
  708. -webkit-transform: scaleY(1);
  709. transform: scaleY(1);
  710. }
  711. 60% {
  712. -moz-transform: scaleY(0.98);
  713. -ms-transform: scaleY(0.98);
  714. -webkit-transform: scaleY(0.98);
  715. transform: scaleY(0.98);
  716. }
  717. 80% {
  718. -moz-transform: scaleY(1.02);
  719. -ms-transform: scaleY(1.02);
  720. -webkit-transform: scaleY(1.02);
  721. transform: scaleY(1.02);
  722. }
  723. 100% {
  724. -moz-transform: scaleY(0);
  725. -ms-transform: scaleY(0);
  726. -webkit-transform: scaleY(0);
  727. transform: scaleY(0);
  728. }
  729. }
  730. @-moz-keyframes hideAnimation {
  731. 0% {
  732. -moz-transform: scaleY(1);
  733. -ms-transform: scaleY(1);
  734. -webkit-transform: scaleY(1);
  735. transform: scaleY(1);
  736. }
  737. 60% {
  738. -moz-transform: scaleY(0.98);
  739. -ms-transform: scaleY(0.98);
  740. -webkit-transform: scaleY(0.98);
  741. transform: scaleY(0.98);
  742. }
  743. 80% {
  744. -moz-transform: scaleY(1.02);
  745. -ms-transform: scaleY(1.02);
  746. -webkit-transform: scaleY(1.02);
  747. transform: scaleY(1.02);
  748. }
  749. 100% {
  750. -moz-transform: scaleY(0);
  751. -ms-transform: scaleY(0);
  752. -webkit-transform: scaleY(0);
  753. transform: scaleY(0);
  754. }
  755. }
  756. @-webkit-keyframes hideAnimation {
  757. 0% {
  758. -moz-transform: scaleY(1);
  759. -ms-transform: scaleY(1);
  760. -webkit-transform: scaleY(1);
  761. transform: scaleY(1);
  762. }
  763. 60% {
  764. -moz-transform: scaleY(0.98);
  765. -ms-transform: scaleY(0.98);
  766. -webkit-transform: scaleY(0.98);
  767. transform: scaleY(0.98);
  768. }
  769. 80% {
  770. -moz-transform: scaleY(1.02);
  771. -ms-transform: scaleY(1.02);
  772. -webkit-transform: scaleY(1.02);
  773. transform: scaleY(1.02);
  774. }
  775. 100% {
  776. -moz-transform: scaleY(0);
  777. -ms-transform: scaleY(0);
  778. -webkit-transform: scaleY(0);
  779. transform: scaleY(0);
  780. }
  781. }
  782.  
  783. /* sectioned */
  784.  
  785. .top {
  786. background:{color:post};
  787. padding:15px 25px 15px 25px;
  788. color:{color:info};
  789. font-size:calc({select:font size} - 2px);
  790. font-weight:700;
  791. text-transform:uppercase;
  792. max-height:20px;
  793. min-height:20px;
  794. border-bottom:1px solid {color:borders};
  795. }
  796.  
  797. .rbg {
  798. max-width:calc(100% - 50px);
  799. overflow:hidden;
  800. white-space:nowrap;
  801. text-overflow:ellipsis;
  802. }
  803.  
  804. .top .rbg {
  805. float:left;
  806. }
  807.  
  808. .top .ago {
  809. float:right;
  810. }
  811.  
  812. .top img {
  813. position:absolute;
  814. margin:-15px 0 0 -80px;
  815. width:50px;
  816. height:50px;
  817. {block:IfNotShowAvatar}display:none;{/block:IfNotShowAvatar}
  818. }
  819.  
  820. /* posts */
  821.  
  822. section {
  823. /*width:calc(({select:posts} - 50px) + 247px);*/
  824. width:calc(({select:posts} - 50px) + 150px);
  825. min-height:calc(100vh - 350px);
  826. margin:150px auto 250px auto;
  827. }
  828.  
  829. .blogtitle {
  830. width:{select:posts};
  831. margin-left:calc(50% - ({select:posts} - 50px));
  832. background:transparent;
  833. overflow:hidden;
  834. white-space:nowrap;
  835. text-overflow:ellipsis;
  836. }
  837.  
  838. .stuff {
  839. width:{select:posts};
  840. min-width:500px;
  841. max-width:540px;
  842. padding:0 0 150px 0;
  843. margin-left:calc(50% - ({select:posts} - 50px));
  844. }
  845.  
  846. .stuff:last-of-type {
  847. padding-bottom:50px;
  848. }
  849.  
  850. .posts {
  851. width:100%;
  852. overflow:hidden;
  853. background:{color:post};
  854. }
  855.  
  856. .ph {
  857. position:relative;
  858. overflow:hidden;
  859. }
  860.  
  861. .ph img {
  862. width:100%;
  863. display:block;
  864. }
  865.  
  866. .tmblr-full, .npf_photoset {
  867. margin:-25px -25px 25px -25px;
  868. }
  869.  
  870. .tmblr-full img, .npf_photoset img {
  871. min-width:100%;
  872. }
  873.  
  874. .tex img {
  875. width:auto;
  876. }
  877.  
  878. /* titles */
  879.  
  880. .title {
  881. font-size:calc({select:font size} + 2px);
  882. font-weight:700;
  883. padding:25px 25px 0 25px;
  884. }
  885.  
  886. .line {
  887. background:{color:accent};
  888. height:2px;
  889. width:10%;
  890. margin:25px 25px 0 25px;
  891. display:block;
  892. }
  893.  
  894. .lul {
  895. height:1px;
  896. width:100%;
  897. background:{color:borders};
  898. }
  899.  
  900. /* captions */
  901.  
  902. .cap {
  903. {block:IndexPage}{block:IfNotShowCaptions}display:none;{/block:IfNotShowCaptions}{/block:IndexPage}
  904. }
  905.  
  906. .comment {
  907. padding:25px 25px 0 25px;
  908. list-style:none;
  909. }
  910.  
  911. .comment:first-of-type .user {
  912. display:none;
  913. }
  914.  
  915. {block:PermalinkPage}
  916. .comment:last-of-type {
  917. padding-bottom:25px;
  918. }
  919. {/block:PermalinkPage}
  920.  
  921. .tex a {
  922. border-bottom:2px solid {color:accent};
  923. }
  924.  
  925. .tex a:hover {
  926. color:{color:link hover};
  927. }
  928.  
  929. .tex li, .tex blockquote {text-align:left;}
  930.  
  931. .tex li {
  932. margin-left:30px;
  933. }
  934.  
  935. .tex li:before {
  936. content:'—';
  937. position:absolute;
  938. margin:-1px 0 0 -25px;
  939. }
  940.  
  941. .user {
  942. font-weight:700;
  943. display:inline-block;
  944. line-height:1em;
  945. margin-bottom:.75em;
  946. text-transform:lowercase;
  947. }
  948.  
  949. .user img {
  950. float:left;
  951. margin:-5px 15px 0 0;
  952. width:24px;
  953. height:24px;
  954. }
  955.  
  956. /* quote */
  957.  
  958. .quote {
  959. font-size:calc({select:font size} + 2px);
  960. font-weight:700;
  961. font-style:italic;
  962. padding:25px 25px 15px 25px;
  963. }
  964.  
  965. .source {
  966. padding:0 25px 0 25px;
  967. text-transform:lowercase;
  968. }
  969.  
  970. /* audio */
  971.  
  972. .spotify_audio_player {
  973. max-height:80px!important;
  974. width:100%!important;
  975. }
  976.  
  977. iframe.tumblr_audio_player {
  978. height:85px;
  979. }
  980.  
  981. .box {
  982. padding:25px 50px 25px 25px;
  983. color:{color:post accent text};
  984. background:{color:post accent};
  985. border-bottom:1px solid {color:borders};
  986. min-height:50px;
  987. max-height:50px;
  988. }
  989.  
  990. .box-p {
  991. position:absolute;
  992. margin-left:calc(100% - 50px);
  993. top:35px;
  994. width:30px;
  995. height:30px;
  996. overflow:hidden;
  997. }
  998.  
  999. .track {
  1000. font-weight:700;
  1001. margin:2.5px 0 5px 0;
  1002. }
  1003.  
  1004. .track, .artist {
  1005. max-width:100%;
  1006. overflow:hidden;
  1007. white-space:nowrap;
  1008. text-overflow:ellipsis;
  1009. margin-left:100px;
  1010. }
  1011.  
  1012. .cover {
  1013. margin:-25px 0 0 -25px;
  1014. width:100px;
  1015. height:100px;
  1016. position:absolute;
  1017. }
  1018.  
  1019. .cover svg {
  1020. float:left;
  1021. width:40px;
  1022. height:40px;
  1023. padding:30px;
  1024. margin-top:-100px;
  1025. color:{color:post accent text};
  1026. background:{color:post accent};
  1027. }
  1028.  
  1029. /* asks */
  1030.  
  1031. .q {
  1032. padding:25px;
  1033. color:{color:post accent text};
  1034. background:{color:post accent};
  1035. }
  1036.  
  1037. .q .user {
  1038. line-height:10px;
  1039. }
  1040.  
  1041. .user b {
  1042. font-weight:400;
  1043. }
  1044.  
  1045. /*chat*/
  1046.  
  1047. .chat {
  1048. text-align:left;
  1049. margin:0;
  1050. padding:25px 25px 0 25px;
  1051. list-style:none;
  1052. }
  1053.  
  1054. .l {
  1055. padding:7.5px 0;
  1056. }
  1057.  
  1058. .label {
  1059. font-weight:700;
  1060. border-bottom:2px solid {color:accent};
  1061. display:inline-block;
  1062. }
  1063.  
  1064. /* permalink and notes */
  1065.  
  1066. .when {
  1067. padding:15px 25px 15px 25px;
  1068. color:{color:info};
  1069. min-height:20px;
  1070. }
  1071.  
  1072. input:focus,
  1073. select:focus,
  1074. textarea:focus,
  1075. button:focus {
  1076. outline:none;
  1077. }
  1078.  
  1079. .button {
  1080. float:right;
  1081. background-color:transparent;
  1082. padding:0;
  1083. border:none;
  1084. text-decoration:none;
  1085. display:inline-block;
  1086. cursor:pointer;
  1087. margin-top:1px;
  1088. }
  1089.  
  1090. .button svg {
  1091. width:12px;
  1092. height:12px;
  1093. padding:0;
  1094. margin-top:3px;
  1095. color:{color:info};
  1096. }
  1097.  
  1098. .notecount, .tags {
  1099. font-size:calc({select:font size} - 1px);
  1100. font-weight:700;
  1101. text-transform:uppercase;
  1102. }
  1103.  
  1104. .tags {
  1105. {block:IndexPage}{block:IfNotShowTags}display:none;{/block:IfNotShowTags}{/block:IndexPage}
  1106. }
  1107.  
  1108. .tags a {
  1109. margin-right:15px;
  1110. }
  1111.  
  1112. .post-controls {
  1113. float:right;
  1114. width:75px;
  1115. height:20px;
  1116. margin-top:2px;
  1117. }
  1118.  
  1119. .more, .post-controls, .notecount, .reblog, .like {
  1120. display:inline-block;
  1121. }
  1122.  
  1123. .post-controls svg {
  1124. width:12px;
  1125. height:12px;
  1126. margin-right:10px;
  1127. }
  1128.  
  1129. .post-controls .like .liked + svg {
  1130. opacity:.8;
  1131. }
  1132.  
  1133. .post-controls .like .liked + svg path {
  1134. fill:#ec5a5a;
  1135. }
  1136.  
  1137. .post-controls .like .like_button {
  1138. position:relative;
  1139. }
  1140.  
  1141. .post-controls .like .like_button iframe {
  1142. position:absolute;
  1143. top:0;
  1144. left:0;
  1145. bottom:0;
  1146. right:0;
  1147. z-index:2;
  1148. opacity:0;
  1149. }
  1150.  
  1151. /* post notes */
  1152.  
  1153. .pagenotes {
  1154. max-width:100%;
  1155. width:calc(100% - 50px);
  1156. padding:25px;
  1157. margin-top:50px;
  1158. }
  1159.  
  1160. .ss1 {
  1161. margin-bottom:5px;
  1162. }
  1163.  
  1164. ol.notes {
  1165. list-style:none;
  1166. padding:0px;
  1167. margin:0px;
  1168. }
  1169.  
  1170. ol.notes li.note {
  1171. display:block;
  1172. padding:0;
  1173. margin:5px 0;
  1174. }
  1175.  
  1176. li.note.reblog:before, li.note.reply:before, li.note.like:before, li.note.original_post:before, .ss1:before, .ss2:before {
  1177. float:right;
  1178. margin:1px 0 0 25px;
  1179. }
  1180.  
  1181. li.note.reblog:before, .ss1:before {
  1182. content:url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http%3A%2F%2Fwww.w3.org/2000/svg" width="calc({select:font size} - 2px)" height="calc({select:font size} - 2px)" viewBox="0 0 24 24" fill="none" stroke="rgba({RGBcolor:info})" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>');
  1183. }
  1184.  
  1185. li.note.reply:before {
  1186. content:url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http%3A%2F%2Fwww.w3.org/2000/svg" width="calc({select:font size} - 2px)" height="calc({select:font size} - 2px)" viewBox="0 0 24 24" fill="none" stroke="rgba({RGBcolor:info})" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>');
  1187. }
  1188.  
  1189. li.note.like:before {
  1190. content:url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http%3A%2F%2Fwww.w3.org/2000/svg" width="calc({select:font size} - 2px)" height="calc({select:font size} - 2px)" viewBox="0 0 24 24" fill="none" stroke="rgba({RGBcolor:info})" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>');
  1191. }
  1192.  
  1193. li.note.original_post:before {
  1194. content:url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http%3A%2F%2Fwww.w3.org/2000/svg" width="calc({select:font size} - 1px)" height="calc({select:font size} - 1px)" viewBox="0 0 24 24" fill="none" stroke="rgba({RGBcolor:info})" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>');
  1195. }
  1196.  
  1197. .ss2:before {
  1198. content:url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http%3A%2F%2Fwww.w3.org/2000/svg" width="calc({select:font size} - 1px)" height="calc({select:font size} - 1px)" viewBox="0 0 24 24" fill="none" stroke="rgba({RGBcolor:info})" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>');
  1199. }
  1200.  
  1201. li.note blockquote {
  1202. margin-right:10px;
  1203. }
  1204.  
  1205. ol.notes li.note img.avatar {display:none!important;}
  1206.  
  1207. a.more_notes_link {
  1208. display:block;
  1209. text-transform:lowercase;
  1210. text-align:left;
  1211. font-weight:700;
  1212. }
  1213.  
  1214. /* paginaion */
  1215.  
  1216. footer {
  1217. width:100%;
  1218. text-align:center;
  1219. margin:-155px auto 120px auto;
  1220. font-size:calc({select:font size} - 2px);
  1221. text-transform:uppercase;
  1222. }
  1223.  
  1224. .pagination a {
  1225. margin:0 10px 0 10px;
  1226. padding:5px 9px 5px 9px;
  1227. display:inline-block;
  1228. background:{color:post};
  1229. }
  1230.  
  1231. .pagination svg {
  1232. margin-bottom:-2px!important;
  1233. width:12px;
  1234. height:12px;
  1235. }
  1236.  
  1237. /* scroll to top */
  1238.  
  1239. .scrollup {
  1240. display:none;
  1241. position:fixed;
  1242. bottom:53px;
  1243. right:20px;
  1244. z-index:7;
  1245. }
  1246.  
  1247. .scrollup svg, .credit svg {
  1248. color:{color:text};
  1249. padding:9px;
  1250. width:12px;
  1251. height:12px;
  1252. background:{color:post};
  1253. }
  1254.  
  1255. .credit {
  1256. position:fixed;
  1257. bottom:15px;
  1258. right:20px;
  1259. z-index:7;
  1260. }
  1261.  
  1262. /* media q's */
  1263.  
  1264. @media (max-width:1100px) {
  1265. header {
  1266. width:calc(40% - 105px);
  1267. margin-right:35px;
  1268. }
  1269.  
  1270. section, .inff, .info {
  1271. width:100%;
  1272. }
  1273.  
  1274. .stuff, .blogtitle {
  1275. width:calc(60% - 75px);
  1276. margin-left:100px;
  1277. }
  1278.  
  1279. .posts {
  1280. width:100%;
  1281. margin-left:0;
  1282. }
  1283.  
  1284. .pagenotes {
  1285. width:calc(100% - 50px);
  1286. }
  1287.  
  1288. .trig {
  1289. margin-left:0;
  1290. }
  1291.  
  1292. .extra {
  1293. margin:10px 0 0 -55px;
  1294. }
  1295. }
  1296.  
  1297. @media (min-width:901px) {
  1298. .menus {display:none!important;}
  1299.  
  1300. .blogtitle {
  1301. text-align:right;
  1302. }
  1303.  
  1304. .cr {
  1305. margin-left:-47px;
  1306. }
  1307. }
  1308.  
  1309. @media (max-width:900px) {
  1310. .hcontrols, .top img, header nav {display:none!important;}
  1311.  
  1312. header {
  1313. float:none;
  1314. margin-bottom:100px;
  1315. }
  1316.  
  1317. .pum {width:100%;margin-bottom:5px;}
  1318. .name {width:calc(100% - 105px);}
  1319. .desc {width:calc(100% - 50px);}
  1320.  
  1321. nav li {
  1322. width:auto;
  1323. display:inline-block;
  1324. margin:0;
  1325. }
  1326.  
  1327. nav li:before {
  1328. display:none;
  1329. }
  1330.  
  1331. header, .stuff, .blogtitle {
  1332. width:calc(100% - 100px);
  1333. min-width:calc(100% - 100px);
  1334. max-width:calc(100% - 100px);
  1335. margin-left:50px;
  1336. }
  1337.  
  1338. .blogtitle {
  1339. margin-left:25px;
  1340. }
  1341.  
  1342. .sfm input {
  1343. font-family: 'Inconsolata', monospace;
  1344. text-transform:uppercase;
  1345. letter-spacing:2px;
  1346. font-size:calc({select:font size} - 1px)!important;
  1347. color:{color:top bar text};
  1348. background:{color:top bar background};
  1349. }
  1350.  
  1351. .sfm input::placeholder {
  1352. color:{color:top bar text};
  1353. }
  1354. }
  1355.  
  1356. @media (max-width:568px) {
  1357. .menus {
  1358. right:37px;
  1359. }
  1360.  
  1361. header, .stuff {
  1362. width:calc(100% - 25px);
  1363. max-width:calc(100% - 25px);
  1364. min-width:calc(100% - 25px);
  1365. margin-left:calc(25px / 2);
  1366. }
  1367.  
  1368. .blogtitle {
  1369. width:calc(100% - 75px);
  1370. margin-left:calc(25px / 2);
  1371. }
  1372.  
  1373. .stuff {
  1374. padding-bottom:50px;
  1375. }
  1376. }
  1377.  
  1378.  
  1379.  
  1380. {CustomCSS}
  1381.  
  1382. </style>
  1383.  
  1384. </head>
  1385.  
  1386. <div class="ttt">
  1387.  
  1388. <div class="inff">
  1389. <div class="blogtitle">{Title}</div></div>
  1390.  
  1391. </div>
  1392.  
  1393.  
  1394. <section id="entries">
  1395.  
  1396. <header>
  1397.  
  1398. <div class="pum">
  1399. <div class="name"><b>{text:subtitle}</b></div>
  1400. <div class="icon">
  1401. {block:IfNotIconImage}
  1402. <img src="{PortraitURL-64}">
  1403. {/block:IfNotIconImage}
  1404. {block:IfIconImage}
  1405. <img src="{image:Icon}">
  1406. {/block:IfIconImage}
  1407. </div>
  1408. </div>
  1409. <div class="desc">{Description}</div>
  1410.  
  1411. <nav>
  1412. {block:ifLink1}<li><a href="{text:Link 1 URL}">{text:Link 1}</a></li>{/block:ifLink1}
  1413. {block:ifLink2}<li><a href="{text:Link 2 URL}">{text:Link 2}</a></li>{/block:ifLink2}
  1414. {block:ifLink3}<li><a href="{text:Link 3 URL}">{text:Link 3}</a></li>{/block:ifLink3}
  1415. {block:ifLink4}<li><a href="{text:Link 4 URL}">{text:Link 4}</a></li>{/block:ifLink4}
  1416. {block:ifLink5}<li><a href="{text:Link 5 URL}">{text:Link 5}</a></li>{/block:ifLink5}
  1417. {block:ifLink6}<li><a href="{text:Link 6 URL}">{text:Link 6}</a></li>{/block:ifLink6}
  1418.  
  1419. {block:IfShowSearchBar}
  1420. <li><a>
  1421. <script language="javascript">
  1422. function send()
  1423. {document.theform.submit()}
  1424. </script>
  1425.  
  1426. <form action="/search" method="get" class="sfm" name="theform">
  1427. <input type="text" name="q" placeholder="{text:search placeholder}" id="sf"/></form>
  1428. </a></li>
  1429. {/block:IfShowSearchBar}
  1430.  
  1431. </nav>
  1432.  
  1433. </header>
  1434.  
  1435. <div class="menus">
  1436. <div class="dropdown linked">
  1437. <a data-toggle="dropdown" href="javascript:void();">
  1438. <b> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg> </b></a>
  1439. <ul class="dropdown-menu">
  1440. {block:ifLink1}<li><a href="{text:Link 1 URL}">{text:Link 1}</a></li>{/block:ifLink1}
  1441. {block:ifLink2}<li><a href="{text:Link 2 URL}">{text:Link 2}</a></li>{/block:ifLink2}
  1442. {block:ifLink3}<li><a href="{text:Link 3 URL}">{text:Link 3}</a></li>{/block:ifLink3}
  1443. {block:ifLink4}<li><a href="{text:Link 4 URL}">{text:Link 4}</a></li>{/block:ifLink4}
  1444. {block:ifLink5}<li><a href="{text:Link 5 URL}">{text:Link 5}</a></li>{/block:ifLink5}
  1445. {block:ifLink6}<li><a href="{text:Link 6 URL}">{text:Link 6}</a></li>{/block:ifLink6}
  1446.  
  1447. {block:IfShowSearchBar}
  1448. <li><a>
  1449. <script language="javascript">
  1450. function send()
  1451. {document.theform.submit()}
  1452. </script>
  1453.  
  1454. <form action="/search" method="get" class="sfm" name="theform">
  1455. <input type="text" name="q" placeholder="{text:search placeholder}" id="sf"/></form>
  1456. </a></li>
  1457. {/block:IfShowSearchBar}
  1458.  
  1459. </ul>
  1460. </div>
  1461. </div>
  1462.  
  1463. {block:Posts}
  1464. <div class="stuff" data-aos="fade-up">
  1465. <article class="posts {block:caption}captioned{/block:caption}">
  1466.  
  1467. <div class="top">
  1468. {block:RebloggedFrom}
  1469. {block:IfShowAvatar}
  1470. <img src="{ReblogRootPortraitURL-64}">
  1471. {/block:IfShowAvatar}
  1472. <div class="rbg"><a href="{ReblogRootURL}">{ReblogRootName}</a></div>
  1473. {/block:RebloggedFrom}
  1474. {block:NotReblog}
  1475. {block:IfShowAvatar}
  1476. <img src="{PortraitURL-64}">
  1477. {/block:IfShowAvatar}
  1478. <div class="rbg"><a href="{Permalink}">{Name}</a></div>
  1479. {/block:NotReblog}
  1480. {block:Date}
  1481. <a href="{Permalink}" class="ago">{TimeStamp}</a>
  1482. {/block:Date}
  1483. </div>
  1484.  
  1485. <!-- quote ----------------------------------------------------------------->
  1486. {block:Quote}
  1487. <div class="quote">{quote}</div>
  1488. {block:Source}<div class="source">{source}</div>{/block:Source}
  1489. {/block:Quote}
  1490.  
  1491. <!-- text ------------------------------------------------------------------>
  1492. {block:Text}
  1493. {block:Title}
  1494. <div class="title">{title}</div>
  1495. <div class="line"></div>
  1496. {/block:Title}
  1497. {block:RebloggedFrom}
  1498. {block:Reblogs}
  1499. {block:IsActive}
  1500. <li class="comment {block:Title}ted{/block:Title}">
  1501. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  1502. <div class="tex">{body}</div>
  1503. </li>
  1504. {/block:IsActive}
  1505. {block:IsDeactivated}
  1506. <li class="comment {block:Title}ted{/block:Title}">
  1507. <span class="user inactive deactivated">{username}</span>
  1508. <div class="tex">{body}</div>
  1509. </li>
  1510. {/block:IsDeactivated}
  1511. {/block:Reblogs}
  1512. {/block:RebloggedFrom}
  1513. {block:NotReblog}
  1514. <li class="comment {block:Title}ted{/block:Title}">
  1515. <div class="tex">{body}</div>
  1516. </li>
  1517. {/block:NotReblog}
  1518. {/block:Text}
  1519.  
  1520. <!-- link ------------------------------------------------------------------>
  1521. {block:Link}
  1522. <div class="title"><a href="{URL}">{Name}</a>
  1523. <div class="line" style="margin-left:0;"></div>
  1524. </div>
  1525. {block:Description}
  1526. {block:NotReblog}
  1527. <li class="comment ted">
  1528. <div class="tex">{description}</div>
  1529. </li>
  1530. {/block:NotReblog}
  1531. {/block:Description}
  1532. {block:RebloggedFrom}
  1533. {block:Reblogs}
  1534. {block:IsActive}
  1535. <li class="comment">
  1536. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  1537. <div class="tex">{body}</div>
  1538. </li>
  1539. {/block:IsActive}
  1540. {block:IsDeactivated}
  1541. <li class="comment">
  1542. <span class="user inactive deactivated">{username}</span>
  1543. <div class="tex">{body}</div>
  1544. </li>
  1545. {/block:IsDeactivated}
  1546. {/block:Reblogs}
  1547. {/block:RebloggedFrom}
  1548. {/block:Link}
  1549.  
  1550. <!-- chat ------------------------------------------------------------------>
  1551. {block:Chat}
  1552. {block:Title}<div class="title">{title}</div>{/block:Title}
  1553. <ol class="chat {block:Title}ted{/block:Title}">
  1554. {block:lines}
  1555. <li class="l {Alt}">
  1556. {block:label}<span class="label">{label}</span>{/block:label} {line}
  1557. </li>
  1558. {/block:lines}
  1559. </ol>
  1560. {/block:Chat}
  1561.  
  1562. <div class="ph">
  1563.  
  1564. <!-- photo ----------------------------------------------------------------->
  1565. {block:Photo}
  1566. <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">
  1567. <img src="{PhotoURL-HighRes}">
  1568. </a>
  1569. <div class="lul"></div>
  1570. {/block:Photo}
  1571.  
  1572. <!-- photoset -------------------------------------------------------------->
  1573. {block:Photoset}
  1574. <div class="photoset">
  1575. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1576. </div>
  1577. <div class="lul"></div>
  1578. {/block:Photoset}
  1579.  
  1580. <!-- video ----------------------------------------------------------------->
  1581. {block:Video}
  1582. <div class="video">{Video-500}</div>
  1583. {/block:Video}
  1584.  
  1585. <!-- audio ----------------------------------------------------------------->
  1586. {block:Audio}
  1587. <div class="audio">
  1588. {block:AudioPlayer}
  1589. <div class="box">
  1590. <div class="cover">
  1591. {block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}
  1592. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music"><path d="M9 17H5a2 2 0 0 0-2 2 2 2 0 0 0 2 2h2a2 2 0 0 0 2-2zm12-2h-4a2 2 0 0 0-2 2 2 2 0 0 0 2 2h2a2 2 0 0 0 2-2z"></path><polyline points="9 17 9 5 21 3 21 15"></polyline></svg>
  1593. </div>
  1594. <div class="track">{block:TrackName}{TrackName}{/block:TrackName}</div>
  1595. <div class="artist">{block:Artist}{Artist}{/block:Artist}</div>
  1596. </div>
  1597. <div class="box-p">{AudioPlayer}</div>
  1598. {/block:AudioPlayer}
  1599.  
  1600. {block:AudioEmbed}
  1601. <div class="embed">{AudioEmbed-500}</div>
  1602. {/block:AudioEmbed}
  1603.  
  1604. </div>
  1605. {/block:Audio}
  1606.  
  1607. <!-- captions ------------------------------------------------------------->
  1608. {block:Caption}
  1609. <div class="cap">
  1610. {block:Reblogs}
  1611. {block:IsActive}
  1612. <li class="comment">
  1613. {block:IsOriginalEntry}
  1614. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank"></span>{username}</a>
  1615. <div class="tex">{body}</div>
  1616. {/block:IsOriginalEntry}
  1617. {block:IsNotOriginalEntry}
  1618. <span class="user">{username}</span>{Body}
  1619. {/block:IsNotOriginalEntry}
  1620. </li>
  1621. {/block:IsActive}
  1622. {block:IsDeactivated}
  1623. <li class="comment">
  1624. {block:IsOriginalEntry}
  1625. <span class="user inactive deactivated">{username}</span>
  1626. <div class="tex">{body}</div>
  1627. {/block:IsOriginalEntry}
  1628. {block:IsNotOriginalEntry}
  1629. <span class="user inactive deactivated">{username}</span>{Body}
  1630. {/block:IsNotOriginalEntry}
  1631. </li>
  1632. {/block:IsDeactivated}
  1633. {/block:Reblogs}
  1634. {block:NotReblog}
  1635. <li class="comment">
  1636. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{name}</a>
  1637. <div class="tex">{caption}</div>
  1638. </li>
  1639. {/block:NotReblog}
  1640. </div>
  1641. {/block:Caption}
  1642.  
  1643. </div>
  1644.  
  1645. <!-- answers --------------------------------------------------------------->
  1646. {block:Answer}
  1647. <div class="q">
  1648. <div class="user">{Asker} <b>sent:</b></div>
  1649. <div class="ques">{Question}</div>
  1650. </div>
  1651. {block:Answerer}
  1652. <li class="comment">
  1653. <div class="user">{Answerer}</div>
  1654. <div class="tex">{Answer}</div>
  1655. </li>
  1656. {/block:Answerer}
  1657. {block:NotReblog}
  1658. <li class="comment">
  1659. <div class="tex">{Replies}</div>
  1660. </li>
  1661. {/block:NotReblog}
  1662. {block:RebloggedFrom}
  1663. {block:Reblogs}
  1664. <li class="comment" style="border-top:1px solid {color:borders};margin-top:25px">
  1665. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{Username} <b>commented:</b></a>
  1666. <div class="tex">{Body}</div>
  1667. </li>
  1668. {/block:Reblogs}
  1669. {/block:RebloggedFrom}
  1670. {/block:Answer}
  1671.  
  1672. <!-- date ------------------------------------------------------------------>
  1673. {block:Date}
  1674.  
  1675. <div class="when">
  1676.  
  1677. <a href="{Permalink}">
  1678. <div class="notecount">{NoteCountWithLabel}</div>
  1679. </a>
  1680.  
  1681. <button class="button"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></button>
  1682.  
  1683. <div class="post-controls">
  1684.  
  1685. <a href="{Permalink}" title="see post"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg></a>
  1686.  
  1687. <a href="{ReblogURL}" title="reblog" class="reblog"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shuffle"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg></a>
  1688.  
  1689. <a href="#" title="like" class="like">{LikeButton}<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
  1690. </a>
  1691. </div>
  1692.  
  1693. {block:HasTags}
  1694. <div class="tags">
  1695. {block:Tags}<a href="{TagUrl}">{block:IndexPage}#{/block:IndexPage}{Tag}</a>{/block:Tags}
  1696. </div>
  1697. {/block:HasTags}
  1698.  
  1699. </div>
  1700. {/block:Date}
  1701.  
  1702. </article>
  1703.  
  1704. <!-- post notes ------------------------------------------------------------>
  1705. {block:PostNotes}
  1706.  
  1707. <article class="posts pagenotes">
  1708.  
  1709. {block:RebloggedFrom}
  1710. {block:ContentSource}
  1711. <div class="ss1">
  1712. reblogged from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a></div>
  1713. {/block:ContentSource}
  1714. <div class="ss2">posted by <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></div></br>
  1715. {/block:RebloggedFrom}
  1716.  
  1717. <div class="postnotes">{PostNotes}</div>
  1718.  
  1719. </article>
  1720.  
  1721. {/block:PostNotes}
  1722. </div>
  1723. {/block:Posts}
  1724.  
  1725. </section>
  1726.  
  1727. <!-- pagination ------------------------------------------------------------>
  1728. <footer>
  1729. {block:Pagination}
  1730. <div class="pagination">
  1731. <a {block:PreviousPage}class="active prev" href="{PreviousPage}"{/block:PreviousPage}><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
  1732. <a {block:NextPage}class="active next" href="{NextPage}"{/block:NextPage}><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
  1733. </div>
  1734. {/block:Pagination}
  1735.  
  1736. {block:PermalinkPagination}
  1737. <div class="pagination">
  1738. <a class="prev" {block:NextPost}href="{NextPost}"{/block:NextPost}><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
  1739. <a class="next" {block:PreviousPost}href="{PreviousPost}"{/block:PreviousPost}><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
  1740. </div>
  1741. {/block:PermalinkPagination}
  1742. </footer>
  1743.  
  1744. <!-- scroll up -->
  1745. <a href="#" class="scrollup">
  1746. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
  1747. </a>
  1748.  
  1749. <!-- don't trouch credit please -->
  1750. <div class="credit">
  1751. <a href="https://amboise.tumblr.com/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-power"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg></a>
  1752. </div>
  1753.  
  1754.  
  1755. <!-- jquery -->
  1756. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1757. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1758. <script src="//static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  1759. <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  1760. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script><link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  1761. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  1762. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  1763. <script type="text/javascript" src="https://static.tumblr.com/cqvi50o/VSzox2ncv/style-my-tooltips.js"></script>
  1764. <script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
  1765. <script src="https://static.tumblr.com/2b2izpj/cB7ogqs8l/jquery.initialize.js"></script>
  1766. <script src="https://dl.dropbox.com/s/kv0uhouv863u82t/menus.js"></script>
  1767.  
  1768. <script>
  1769. // aos
  1770. AOS.init({offset: 25,duration: 800});
  1771. // sticky
  1772. $(window).load(function(){
  1773. $('header').stick_in_parent({offset_top: 110,});
  1774. var window_width = jQuery( window ).width();
  1775. if (window_width < 900) {
  1776. jQuery('header').trigger('sticky_kit:detach');
  1777. } else {make_sticky();}
  1778.  
  1779. jQuery( window ).resize(function() {
  1780. window_width = jQuery( window ).width();
  1781. if (window_width < 900) {
  1782. jQuery('header').trigger('sticky_kit:detach');
  1783. } else {make_sticky();}
  1784. });
  1785.  
  1786. function make_sticky() {
  1787. jQuery('header').stick_in_parent({parent: 'section'});
  1788. }
  1789. });
  1790.  
  1791. $(document).ready(function(){
  1792. // npf plugin by codematurgy
  1793. npfPhotosets(".posts", {
  1794. rowClass:"npf_row",
  1795. imageContainerClass:"tmblr-full",
  1796. generatedPhotosetContainerClass:"npf_photoset",
  1797. imageClass:"npf_image",
  1798. includeSingleRowImagesInPhotosets: true,
  1799. insertGalleryIndicator: false,
  1800. galleryIndicatorClass: "npf_gallery_indicator",
  1801. galleryIndicatorContent: "<img src='image_url'>",
  1802. photosetMargins:"2"
  1803. });
  1804. // photosets
  1805. $('.photo-slideshow').pxuPhotoset({
  1806. lightbox: true,
  1807. rounded: false,
  1808. gutter: '2px',
  1809. photoset: '.photo-slideshow',
  1810. photoWrap: '.photo-data',
  1811. photo: '.pxu-photo'
  1812. });
  1813. // controls
  1814. $('.post-controls').hide();
  1815. $('button').click(function(){
  1816. var div = $(this).closest('.when').find('.post-controls');
  1817. div.animate({width: 'toggle'}, 'slow');
  1818. div.animate({right: '40px'}, 'slow');
  1819. });
  1820. // timeago
  1821. $(".ago").timeAgo({
  1822. time: "letter",
  1823. });
  1824. // short notes
  1825. var $container = $('.when');
  1826. $container.find('.notecount').each(function(){
  1827. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1828. if (n > 999) {
  1829. n = Math.floor(n / 100) / 10;
  1830. $(this).text(n + 'k notes');
  1831. }
  1832. });
  1833. // audio player
  1834. var $audio = $('iframe.tumblr_audio_player');
  1835. $audio.load(function() {
  1836. $(this).contents().find('head').append('<style type="text/css">' +
  1837. '.audio-player {background:{color:post accent};transform:scale(0.85);color:{color:post accent text};max-width:30px!important;}' +
  1838. '.audio-player .progress, .audio-player .audio-info {display:none;}' +
  1839. '</style>');
  1840. });
  1841. // soundcloud
  1842. var color = '{color:Post Accent}'; // color of play button (hex)
  1843. $('.soundcloud_audio_player').each(function(){
  1844. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=false&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 116, width: '100%' });
  1845. });
  1846. // flexible frames by nouvae
  1847. function flexFrame() {
  1848. $(".comment").each(function() {
  1849. $(this).find("iframe").wrap("<div class='iframe-flex'></div>");
  1850. flexibleFrames($(".iframe-flex"));
  1851. });
  1852. flexibleFrames($(".video"));}
  1853. //remove tumblr redirects script by magnusthemes@tumblr
  1854. $('a[href*="t.umblr.com/redirect"]').initialize(function(){
  1855. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1856. var replaceURL = decodeURIComponent(originalURL);
  1857. $(this).attr("href", replaceURL);
  1858. });
  1859. // tooltips
  1860. $("[title]").style_my_tooltips({
  1861. tip_follows_cursor: false,
  1862. tip_delay_time: 100,
  1863. tip_fade_speed: 300
  1864. });
  1865. // scroll to top
  1866. $(window).scroll(function(){
  1867. if ($(this).scrollTop() > 100) {
  1868. $('.scrollup').fadeIn();} else {
  1869. $('.scrollup').fadeOut();}
  1870. });
  1871. $('.scrollup').click(function(){
  1872. $("html, body").animate({ scrollTop: 0 }, 2500);
  1873. return false;
  1874. });
  1875. });
  1876. </script>
  1877.  
  1878. <div class="hcontrols"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></div>
  1879.  
  1880. {block:ContentSource}
  1881. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1882. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1883. {/block:SourceLogo}
  1884. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1885. {/block:ContentSource}
  1886. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!