API tools faq
paste
Advertisement
amboise

mona lisa

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