API tools faq
paste
Advertisement
seiche

theme two: cherry blossom

seiche
Aug 1st, 2019 (edited)
22,461
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 45.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!---
  13.  
  14. CHERRY BLOSSOM THEME BY SEYCHE.TUMBLR.COM
  15.  
  16. CREDITS:
  17. -outicons by Anton Saputro
  18. -css photosets by annasthms and espoirthemes
  19. -tippy.js tooltips by atomiks
  20. -notecount shortening by shythemes
  21. -responsive videos by nouvae
  22. -remove redirects by magnusthemes
  23. -npf photosets by codematurgy
  24. (full list of credits @ seyche.tumblr.com/credits)
  25.  
  26. --->
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=ABeeZee:400,400i|Barlow:400,400i,700,700i|Cabin:400,400i,700,700i|Inconsolata:400,700|Karla:400,400i,700,700i|Lato:400,400i,700,700i|Libre+Franklin:400,400i,700,700i|Literata:400,400i,700,700i|Lora:400,400i,700,700i|Muli:400,400i,700,700i|Open+Sans:400,400i,700,700i|PT+Sans:400,400i,700,700i|PT+Serif:400,400i,700,700i|Poppins:400,400i,700,700i|Public+Sans:400,400i,700,700i&display=swap" rel="stylesheet">
  29.  
  30. <!----- PHOTOSETS ----->
  31.  
  32. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  33.  
  34. <link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  35.  
  36. <!----- VARIABLES ----->
  37.  
  38. <meta name="image:Sidebar" content=""/>
  39.  
  40. <meta name="color:Background" content="#ffffff"/>
  41. <meta name="color:Text" content="#707070"/>
  42. <meta name="color:Link" content="#4c4c4c"/>
  43. <meta name="color:Accent" content="#da8da9"/>
  44. <meta name="color:Borders" content="#e0e0e0"/>
  45. <meta name="color:Title" content="#212121"/>
  46.  
  47. <meta name="select:Font" content="Libre Franklin" title="Libre Franklin"/>
  48. <meta name="select:Font" content="Public Sans" title="Public Sans"/>
  49. <meta name="select:Font" content="Karla" title="Karla"/>
  50. <meta name="select:Font" content="Lato" title="Lato"/>
  51. <meta name="select:Font" content="ABeeZee" title="ABeeZee"/>
  52. <meta name="select:Font" content="Muli" title="Muli"/>
  53. <meta name="select:Font" content="Open Sans" title="Open Sans"/>
  54. <meta name="select:Font" content="PT Sans" title="PT Sans"/>
  55. <meta name="select:Font" content="Barlow" title="Barlow"/>
  56. <meta name="select:Font" content="Poppins" title="Poppins"/>
  57. <meta name="select:Font" content="Cabin" title="Cabin"/>
  58. <meta name="select:Font" content="Inconsolata" title="Inconsolata"/>
  59. <meta name="select:Font" content="Lora" title="Lora"/>
  60. <meta name="select:Font" content="Literata" title="Literata"/>
  61. <meta name="select:Font" content="PT Serif" title="PT Serif"/>
  62.  
  63. <meta name="select:Font Size" content="13px" title="13px"/>
  64. <meta name="select:Font Size" content="12px" title="12px"/>
  65. <meta name="select:Font Size" content="14px" title="14px"/>
  66. <meta name="select:Font Size" content="15px" title="15px"/>
  67. <meta name="select:Font Size" content="16px" title="16px"/>
  68.  
  69. <meta name="select:Post Width" content="540px" title="540px"/>
  70. <meta name="select:Post Width" content="350px" title="350px"/>
  71. <meta name="select:Post Width" content="400px" title="400px"/>
  72. <meta name="select:Post Width" content="450px" title="450px"/>
  73. <meta name="select:Post Width" content="500px" title="500px"/>
  74.  
  75. <meta name="select:Sidebar Position" content="right" title="Right"/>
  76. <meta name="select:Sidebar Position" content="left" title="Left"/>
  77.  
  78. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  79. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  80. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  81. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  82.  
  83. <meta name="select:Tags" content="show-tags" title="Show Tags"/>
  84. <meta name="select:Tags" content="hide-tags" title="Hide Tags"/>
  85. <meta name="select:Tags" content="hover-tags" title="Hover Tags"/>
  86.  
  87. <meta name="if:Show Icon" content="0"/>
  88. <meta name="if:Show Blog URL" content="1"/>
  89. <meta name="if:Search Bar" content="1"/>
  90. <meta name="if:Hide Caption" content="0"/>
  91. <meta name="if:Rounded Photo Corners" content="0"/>
  92.  
  93. <meta name="text:Post Margin" content="225"/>
  94.  
  95. <meta name="text:Home Link" content="home"/>
  96. <meta name="text:Ask Link" content="ask"/>
  97. <meta name="text:Archive Link" content="archive"/>
  98. <meta name="text:Link 1 URL" content="" />
  99. <meta name="text:Link 1" content="" />
  100. <meta name="text:Link 2 URL" content="" />
  101. <meta name="text:Link 2" content="" />
  102. <meta name="text:Link 3 URL" content="" />
  103. <meta name="text:Link 3" content="" />
  104. <meta name="text:Link 4 URL" content="" />
  105. <meta name="text:Link 4" content="" />
  106. <meta name="text:Link 5 URL" content="" />
  107. <meta name="text:Link 5" content="" />
  108. <meta name="text:Link 6 URL" content="" />
  109. <meta name="text:Link 6" content="" />
  110.  
  111. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  112.  
  113. <!----- PHOTOSETS ----->
  114.  
  115. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  116.  
  117. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  118.  
  119. <!----- LOAD IN ----->
  120.  
  121. <script>
  122. $(document).ready(function(){
  123. $(function() {
  124. $('body').removeClass('load-in');
  125. });
  126. });
  127. </script>
  128.  
  129. <style type="text/css">
  130.  
  131. body {
  132. font-family: '{select:font}', sans-serif;
  133. font-size: {select:font size};
  134. color: {color:text};
  135. background-color: {color:background};
  136. text-align: left;
  137. line-height: 160%;
  138. word-wrap: break-word;
  139. letter-spacing: 0.2px;
  140. margin: 0;
  141. opacity: 1.0;
  142. -webkit-transition: 2s opacity;
  143. -moz-transition: 2s opacity;
  144. -ms-transition: 2s opacity;
  145. -o-transition: 2s opacity;
  146. transition: 2s opacity;
  147. }
  148.  
  149. body.load-in {
  150. opacity: 0;
  151. -webkit-transition: none;
  152. -moz-transition: none;
  153. -ms-transition: none;
  154. -o-transition: none;
  155. transition: none;
  156. }
  157.  
  158. a {
  159. color: {color:link};
  160. text-decoration: none;
  161. -webkit-transition: all 0.3s;
  162. -moz-transition: all 0.3s;
  163. -ms-transition: all 0.3s;
  164. -o-transition: all 0.3s;
  165. transition: all 0.3s;
  166. }
  167.  
  168. a:hover {
  169. color: {color:accent};
  170. -webkit-transition: all 0.3s;
  171. -moz-transition: all 0.3s;
  172. -ms-transition: all 0.3s;
  173. -o-transition: all 0.3s;
  174. transition: all 0.3s;
  175. }
  176.  
  177. p a, li a {border-bottom: 2px solid rgba({RGBcolor:accent}, 0.6);}
  178. p a:hover, li a:hover {border-bottom: 2px solid rgba({RGBcolor:accent}, 1.0);}
  179.  
  180. blockquote {
  181. padding: 0 0 0 1.25em;
  182. border-left: 1px solid {color:borders};
  183. margin: 1.25em 0 1.25em 1.25em;
  184. }
  185.  
  186. h1, h2, h3, h4, h5, .title {
  187. color: {color:title};
  188. letter-spacing: 1px;
  189. line-height: 160%;
  190. font-weight: bold;
  191. }
  192.  
  193. h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: {color:title};}
  194. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: {color:accent}}
  195. h1, .title {font-size: 1.5em;}
  196. h2 {font-size: 1.3em;}
  197. h3 {font-size: 1.25em;}
  198. h4 {font-size: 1.1em;}
  199. h5 {font-size: 1em;}
  200.  
  201. small {font-size: 0.9em;}
  202. big {font-size: 1.1em;}
  203. b, strong {color: {color:title};}
  204. b a, strong a {color: {color:link};}
  205. b a:hover, strong a:hover {color: {color:accent};}
  206.  
  207. ul {list-style-type: circle;}
  208. ol {list-style-type: decimal;}
  209. li {max-width: 100%;}
  210.  
  211. .tippy-tooltip.custom-theme {
  212. background-color: {color:background};
  213. color: {color:title};
  214. text-align: center;
  215. font-family: '{select:font}', sans-serif;
  216. font-weight: normal;
  217. text-transform: uppercase;
  218. letter-spacing: 1px;
  219. border-radius: 0;
  220. font-style: normal;
  221. padding: 0.25em;
  222. margin: 20px auto auto 10px;
  223. font-size: 0.8em;
  224. border: 1px solid {color:borders};
  225. }
  226.  
  227. ::-webkit-scrollbar {
  228. width: 17px;
  229. height: 17px;
  230. background-color: {color:background};
  231. }
  232.  
  233. ::-webkit-scrollbar-track {border: 8px solid {color:background}; background-color: {color:borders};}
  234.  
  235. ::-webkit-scrollbar-thumb {
  236. border: 6px solid {color:background};
  237. background-color: {color:title};
  238. min-height: 24px;
  239. min-width: 24px;
  240. }
  241.  
  242. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  243. z-index: 999999999!important;
  244. opacity: 0.6;
  245. transform: scale(0.8);
  246. transform-origin: 100% 0;
  247. -webkit-transform: scale(0.8);
  248. -webkit-transform-origin: 100% 0;
  249. -o-transform: scale(0.8);
  250. -o-transform-origin: 100% 0;
  251. -moz-transform: scale(0.8);
  252. -moz-transform-origin: 100% 0;
  253. -ms-transform: scale(0.8);
  254. -ms-transform-origin: 100% 0;
  255. -webkit-transition: all 0.4s;
  256. -moz-transition: all 0.4s;
  257. -ms-transition: all 0.4s;
  258. -o-transition: all 0.4s;
  259. transition: all 0.4s;
  260. }
  261.  
  262. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  263. opacity: 1.0;
  264. -webkit-transition: all 0.4s;
  265. -moz-transition: all 0.4s;
  266. -ms-transition: all 0.4s;
  267. -o-transition: all 0.4s;
  268. transition: all 0.4s;
  269. }
  270.  
  271. .tmblr-iframe--app-cta-button {display: none !important;}
  272.  
  273. /*----- COMMON -----*/
  274.  
  275. .border::after, nav::before {
  276. content: '';
  277. display: block;
  278. height: 1px;
  279. width: 50px;
  280. background: {color:borders};
  281. margin: 2em 0;
  282. }
  283.  
  284. .upper {
  285. text-transform: uppercase;
  286. letter-spacing: 1px;
  287. font-size: 0.85em;
  288. }
  289.  
  290. .subtitle {font-weight: bold; color: {color:title};}
  291. .subtitle a {color: {color:title};}
  292. .subtitle a:hover {color: {color:accent};}
  293.  
  294. .icon {
  295. width: 20px;
  296. height: 20px;
  297. display: inline;
  298. vertical-align: middle;
  299. fill: {color:accent};
  300. float: left;
  301. }
  302.  
  303. .bullet a::before {
  304. content: '';
  305. display: inline-block;
  306. vertical-align: middle;
  307. background: rgba({RGBcolor:accent}, 0.6);
  308. width: 5px;
  309. height: 5px;
  310. border-radius: 50%;
  311. margin: auto 8px;
  312. }
  313.  
  314. /*----- SIDEBAR -----*/
  315.  
  316. .sidebar {
  317. position: fixed;
  318. width: 250px;
  319. height: auto;
  320. top: 100px;
  321. }
  322.  
  323. .right .sidebar {margin-left: calc({select:post width} + 150px);}
  324.  
  325. .sidebar .title {
  326. text-transform: uppercase;
  327. letter-spacing: 2px;
  328. font-size: 1.25em;
  329. display: block;
  330. }
  331.  
  332. {block:ifSidebarImage}
  333. #side-img {
  334. margin: 0 0 20px 0;
  335. {block:ifShowIcon}margin: 0 0 40px 0;{/block:ifShowIcon}
  336. max-width: 100%;
  337. height: auto;
  338. {block:ifRoundedPhotoCorners}
  339. border-radius: 5px;
  340. {/block:ifRoundedPhotoCorners}
  341. }
  342. {/block:ifSidebarImage}
  343.  
  344. {block:ifShowIcon}
  345. .side-icon {
  346. border-radius: 50%;
  347. width: 64px;
  348. height: 64px;
  349. {block:ifSidebarImage}
  350. position: absolute;
  351. margin: -86px 0 0 10px;
  352. border: 5px solid {color:background};
  353. {/block:ifSidebarImage}
  354. {block:ifNotSidebarImage}
  355. margin-bottom: 20px;
  356. {/block:ifNotSidebarImage}
  357. }
  358. {/block:ifShowIcon}
  359.  
  360. {block:ifShowBlogURL}
  361. #blogurl::before {content: '@'; color: {color:accent};}
  362. {/block:ifShowBlogURL}
  363.  
  364. .dot {
  365. width: 6px;
  366. height: 6px;
  367. display: inline-block;
  368. vertical-align: middle;
  369. border-radius: 50%;
  370. margin: 2em 5px 2em 0;
  371. }
  372.  
  373. .d-one {background-color: rgba({RGBcolor:accent}, 1.0);}
  374. .d-two {background-color: rgba({RGBcolor:accent}, 0.8);}
  375. .d-three {background-color: rgba({RGBcolor:accent}, 0.6);}
  376. .d-four {background-color: rgba({RGBcolor:accent}, 0.4);}
  377. .d-five {background-color: rgba({RGBcolor:accent}, 0.3);}
  378.  
  379. .find {
  380. background-color: inherit;
  381. margin-top: 0.75em;
  382. }
  383.  
  384. .find svg {margin-top: 2px;}
  385.  
  386. .find input {
  387. border: none;
  388. outline: none;
  389. display: inline-block;
  390. background: inherit;
  391. margin: 0 0 0 0.5em;
  392. padding: 0;
  393. color: {color:link};
  394. text-align: left;
  395. width: calc(100% - 40px);
  396. font-family: inherit;
  397. font-size: 0.85em;
  398. }
  399.  
  400. .find input[type=text] {color: {color:link};}
  401. input::-webkit-input-placeholder {color: {color:link};}
  402. input::-moz-placeholder {color: {color:link};}
  403. input:-moz-placeholder {color: {color:link};}
  404. input:-ms-input-placeholder {color: {color:link};}
  405.  
  406. nav {font-style: italic;}
  407. nav a:first-of-type::before {display: none;}
  408.  
  409. /*----- POSTS -----*/
  410.  
  411. #container {
  412. position: relative;
  413. margin: auto;
  414. width: calc({select:post width} + 400px);
  415. }
  416.  
  417. article {
  418. position: relative;
  419. width: {select:post width};
  420. }
  421.  
  422. .right article {margin: {text:post margin}px 0;}
  423. .left article {margin: {text:post margin}px 0 {text:post margin}px 400px;}
  424. .right article:first-of-type {margin: 100px 0 {text:post margin}px 0;}
  425. .left article:first-of-type {margin: 100px 0 {text:post margin}px 400px;}
  426.  
  427. .tumblr_video_container {max-height: {select:post width}!important; overflow: hidden!important; max-width: 100%;}
  428. .posts li, .posts blockquote, .posts img, figure, video, .video, .video iframe {max-width: 100%;}
  429. .postsource {display: none;}
  430.  
  431. /*----- CAPTION -----*/
  432.  
  433. .caption {margin: 2em 0 0 0; list-style-type: none;}
  434. .caption p {margin: 1em 0;}
  435. .caption p:last-of-type {margin: 1em 0 0 0;}
  436. .ogcap p:first-of-type {margin-top: 0;}
  437. .body:first-of-type {margin-top: 0;}
  438.  
  439. .caption iframe, .caption img {max-width: 100%;}
  440.  
  441. .username::before {
  442. content: '';
  443. display: inline-block;
  444. vertical-align: middle;
  445. background: rgba({RGBcolor:accent}, 0.6);
  446. width: 8px;
  447. height: 8px;
  448. border-radius: 50%;
  449. margin-right: 10px;
  450. -webkit-transition: all 0.3s;
  451. -moz-transition: all 0.3s;
  452. -ms-transition: all 0.3s;
  453. -o-transition: all 0.3s;
  454. transition: all 0.3s;
  455. }
  456.  
  457. .username:hover::before {
  458. background: rgba({RGBcolor:accent}, 1.0);
  459. -webkit-transition: all 0.3s;
  460. -moz-transition: all 0.3s;
  461. -ms-transition: all 0.3s;
  462. -o-transition: all 0.3s;
  463. transition: all 0.3s;
  464. }
  465.  
  466. .username a, .username a:hover {border-bottom: none;}
  467.  
  468. .deactive:hover {color: {color:link};}
  469.  
  470. .deactive::after {
  471. content: '(deactivated blog)';
  472. margin-left: 0.75em;
  473. opacity: 0;
  474. -webkit-transition: all 0.3s;
  475. -moz-transition: all 0.3s;
  476. -ms-transition: all 0.3s;
  477. -o-transition: all 0.3s;
  478. transition: all 0.3s;
  479. }
  480.  
  481. .deactive:hover::after {
  482. opacity: 0.7;
  483. -webkit-transition: all 0.3s;
  484. -moz-transition: all 0.3s;
  485. -ms-transition: all 0.3s;
  486. -o-transition: all 0.3s;
  487. transition: all 0.3s;
  488. }
  489.  
  490. .tmblr-attribution {margin-top: 0.75em;}
  491.  
  492. {block:ifHideCaption}{block:IndexPage}
  493. .hide-cap {display: none;}
  494. {/block:IndexPage}{/block:ifHideCaption}
  495.  
  496. /*----- TEXT -----*/
  497.  
  498. pre {
  499. line-height: inherit;
  500. font-size: inherit;
  501. white-space: pre-wrap;
  502. white-space: -moz-pre-wrap;
  503. white-space: -pre-wrap;
  504. white-space: -o-pre-wrap;
  505. word-wrap: break-word;
  506. font-family: 'Inconsolata', monospace;
  507. }
  508.  
  509. @font-face {
  510. font-family: Calluna;
  511. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  512. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3%3F=&v=f685dc881c60c298ea22a73fe505b88a#iefix") format("embedded-opentype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.woff?3=&v=760a50f4d098e59aebaf0f0e58ae2cc8") format("woff"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.ttf?3=&v=5ace789439bff3b27f8d4112725531da") format("truetype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.svg?3=&v=5b95c481dd7411c6e112143d6646bd9b#_.regular") format("svg");
  513. font-weight: 700;
  514. font-style: italic
  515. }
  516.  
  517. @font-face {
  518. font-family: Fairwater;
  519. src: url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45") format("woff2"),url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff?v=96e975b7468359e6f67086305577e43e") format("woff");
  520. font-weight: 400;
  521. font-style: normal
  522. }
  523.  
  524. p.npf_quirky {font-family: Fairwater; font-size: 20px;}
  525.  
  526. .npf_color_joey {color: #e57373;}
  527. .npf_color_monica {color: #ff8a65;}
  528. .npf_color_phoebe {color: #ffee58;}
  529. .npf_color_ross {color: #81c784;}
  530. .npf_color_rachel {color: #4fc3f7;}
  531. .npf_color_chandler {color: #9575cd;}
  532. .npf_color_niles {color: #f06292;}
  533.  
  534. #k {
  535. position: fixed;
  536. bottom: 30px;
  537. right: 30px;
  538. font-size: 15px;
  539. background-color: {color:background};
  540. padding: 5px 8px;
  541. border-radius: 3px;
  542. }
  543.  
  544. #k:hover {background-color: {color:accent}; color: {color:background};}
  545.  
  546. /*----- LINK -----*/
  547.  
  548. .linkp {
  549. border: 1px solid {color:borders};
  550. color: {color:link};
  551. -webkit-transition: all 0.3s;
  552. -moz-transition: all 0.3s;
  553. -ms-transition: all 0.3s;
  554. -o-transition: all 0.3s;
  555. transition: all 0.3s;
  556. }
  557.  
  558. .linkp:hover {
  559. border: 1px solid {color:accent};
  560. -webkit-transition: all 0.3s;
  561. -moz-transition: all 0.3s;
  562. -ms-transition: all 0.3s;
  563. -o-transition: all 0.3s;
  564. transition: all 0.3s;
  565. }
  566.  
  567. .thumbnail {max-width: 100%;}
  568. .link {padding: 2em;}
  569. .linktxt, .linkhost {margin-top: 1.25em;}
  570. .linkhost {font-style: italic;}
  571. .link svg {margin: 1.25em 0.75em 0 0;}
  572.  
  573. .npf-link-block {
  574. margin-top: 1em;
  575. border-radius: 0;
  576. -webkit-transition: all 0.3s;
  577. -moz-transition: all 0.3s;
  578. -ms-transition: all 0.3s;
  579. -o-transition: all 0.3s;
  580. transition: all 0.3s;
  581. }
  582.  
  583. .npf-link-block:hover {
  584. border: 1px solid {color:accent};
  585. -webkit-transition: all 0.3s;
  586. -moz-transition: all 0.3s;
  587. -ms-transition: all 0.3s;
  588. -o-transition: all 0.3s;
  589. transition: all 0.3s;
  590. }
  591.  
  592. .npf-link-block .bottom {
  593. padding: 25px !important;
  594. color: {color:link};
  595. }
  596.  
  597. .npf-link-block .bottom .site-name {
  598. text-transform: uppercase;
  599. letter-spacing: 1px;
  600. font-size: 0.9em;
  601. font-weight: normal;
  602. color: {color:link};
  603. }
  604.  
  605. /*----- PHOTO -----*/
  606.  
  607. img {
  608. margin: 0;
  609. display: block;
  610. height: auto;
  611. }
  612.  
  613. .photo img {
  614. width: 100%;
  615. {block:ifRoundedPhotoCorners}
  616. border-radius: 5px;
  617. {/block:ifRoundedPhotoCorners}
  618. }
  619.  
  620. .vignette, #vignette {opacity: 0;}
  621. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(60, 60, 60, .8) !important;}
  622.  
  623. .lightbox-image, #tumblr_lightbox img {
  624. box-shadow: none !important;
  625. border-radius: 0 !important;
  626. max-width: none;
  627. }
  628.  
  629. /*----- PHOTOSET -----*/
  630.  
  631. [photoset-layout] {
  632. grid-gap: {select:photoset gutter}px;
  633. {block:ifNotRoundedPhotoCorners}
  634. border-radius: 0;
  635. {/block:ifNotRoundedPhotoCorners}
  636. {block:ifRoundedPhotoCorners}
  637. border-radius: 5px;
  638. {/block:ifRoundedPhotoCorners}
  639. overflow: hidden;
  640. grid-template-columns: repeat(6, auto);
  641. }
  642.  
  643. [photoset-layout] div {
  644. padding: 0;
  645. border: none;
  646. cursor: pointer;
  647. }
  648.  
  649. [photoset-layout] img {
  650. border: none;
  651. border-radius: 0;
  652. }
  653.  
  654. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  655. margin-left: 0 !important;
  656. margin-right: 0 !important;
  657. }
  658.  
  659. .captext figure {margin: 1em 0;}
  660. .captext figure .tmblr-full {margin-top: {select:photoset gutter}px;}
  661. .tmblr-full:hover {cursor: pointer;}
  662. .npf_image, .tmblr-full {border: none; outline: none;}
  663.  
  664. .npf_photoset {
  665. {block:ifRoundedPhotoCorners}
  666. border-radius: 5px;
  667. overflow: hidden;
  668. {/block:ifRoundedPhotoCorners}
  669. }
  670.  
  671. .text-post [photoset-layout] {margin-bottom: 2em;}
  672.  
  673. /*----- QUOTE -----*/
  674.  
  675. .quote, p.npf_quote {
  676. font-size: 1.25em;
  677. line-height: 160%;
  678. font-style: italic;
  679. color: {color:title};
  680. }
  681.  
  682. .quote p:first-of-type {margin-top: 0;}
  683. .quote p:last-of-type {margin-bottom: 0;}
  684. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  685.  
  686. /*----- CHAT -----*/
  687.  
  688. .chat {padding: 0; margin: 0;}
  689. .chat li {list-style-type: none;}
  690. .line {padding-top: 2em;}
  691. .line:first-of-type, p.npf_chat:first-of-type {padding-top: 0;}
  692. .chat svg {margin-right: 0.75em;}
  693.  
  694. p.npf_chat {font-family: inherit;}
  695. p.npf_chat b {color: {color:title};}
  696.  
  697. /*----- ASK -----*/
  698.  
  699. .askpost {border: 1px solid {color:borders};}
  700.  
  701. .q-asker {
  702. color: {color:title};
  703. font-weight: bold;
  704. border-bottom: 1px solid {color:borders};
  705. padding: 10px 10px 10px 50px;
  706. }
  707.  
  708. .askpost svg {border-right: 1px solid {color:borders}; padding: 10px;}
  709. .question {padding: 2em;}
  710. .question p:first-of-type {margin-top: 0;}
  711. .question p:last-of-type {margin-bottom: 0;}
  712.  
  713. /*----- AUDIO -----*/
  714.  
  715. .audiopost {
  716. border: 1px solid {color:borders};
  717. padding: 2em;
  718. display: flex;
  719. align-items: center;
  720. justify-content: space-between;
  721. }
  722.  
  723. .player-wrap, .albumart, .audioinfo {flex: initial;}
  724. .player-wrap {width: 60px;}
  725. .albumart {width: 100px;}
  726.  
  727. .albumart img {
  728. width: 100px;
  729. height: 100px;
  730. {block:ifRoundedPhotoCorners}
  731. border-radius: 5px;
  732. {/block:ifRoundedPhotoCorners}
  733. overflow: hidden;
  734. }
  735.  
  736. .button {
  737. width: 30px;
  738. height: 30px;
  739. overflow: hidden;
  740. position: relative;
  741. z-index: 10;
  742. margin: 11px 10px;
  743. }
  744.  
  745. .audiobox {
  746. background-color: #f2f2f2;
  747. z-index: 50;
  748. width: 50px;
  749. height: 50px;
  750. margin: 0;
  751. border-radius: 50%;
  752. display: inline-block;
  753. }
  754.  
  755. .audioinfo {
  756. padding: 0 2em;
  757. display: inline-block;
  758. text-align: center;
  759. max-width: calc(100% - 4em - 205px);
  760. flex: initial;
  761. }
  762.  
  763. .track {font-size: 1.2em; font-weight: bold;}
  764.  
  765. /*----- INFO -----*/
  766.  
  767. .info-left::before, .lirb::before, .pinfo::before {
  768. content: '';
  769. display: block;
  770. height: 1px;
  771. width: 50px;
  772. background: {color:borders};
  773. margin: 2.25em 0 2em 0;
  774. }
  775.  
  776. .lirb::before {margin: 2.25em 0 2em 5em;}
  777.  
  778. {block:IndexPage}
  779. .flexing {
  780. display: flex;
  781. align-items: center;
  782. justify-content: space-between;
  783. }
  784. {/block:IndexPage}
  785.  
  786. .ibullet::after {
  787. content: '';
  788. display: inline-block;
  789. vertical-align: middle;
  790. background: rgba({RGBcolor:accent}, 0.6);
  791. width: 5px;
  792. height: 5px;
  793. border-radius: 50%;
  794. margin: auto 0.75em 0.25em 0.75em;
  795. }
  796.  
  797. .likeb {
  798. position: relative;
  799. display: inline-block;
  800. height: 1em;
  801. line-height: 1em;
  802. margin-bottom: -2px;
  803. }
  804.  
  805. .likeb .like_button iframe {
  806. position: absolute;
  807. top: 0;
  808. left: 0;
  809. bottom: 0;
  810. right: 0;
  811. z-index: 2;
  812. opacity: 0;
  813. }
  814.  
  815. .lirb {text-align: right;}
  816. .like_button iframe {width: 100% !important; height: 100% !important;}
  817. .likeb .liked + .lb {color: {color:accent};}
  818. .likeb .liked + .lb:after {content: 'd';}
  819.  
  820. .tags {font-style: italic;}
  821.  
  822. .tags a::before {
  823. content: '#';
  824. color: rgba({RGBcolor:accent}, 0.6);
  825. font-weight: bold;
  826. display: inline;
  827. vertical-align: middle;
  828. font-style: normal;
  829. margin-right: 0.15em;
  830. }
  831.  
  832. .tags a {margin-right: 0.75em;}
  833. #perma-tags a::after {content: ',';}
  834. #perma-tags a:last-of-type::after {display: none;}
  835. #taghead {text-align: center;}
  836. .tagname {color: {color:accent};}
  837.  
  838. .show-tags {display: block;}
  839. .hide-tags {display: none;}
  840.  
  841. .hover-tags {
  842. opacity: 0;
  843. -webkit-transition: all 0.5s;
  844. -moz-transition: all 0.5s;
  845. -ms-transition: all 0.5s;
  846. -o-transition: all 0.5s;
  847. transition: all 0.5s;
  848. }
  849.  
  850. .posts:hover .hover-tags {
  851. opacity: 1.0;
  852. -webkit-transition: all 0.5s;
  853. -moz-transition: all 0.5s;
  854. -ms-transition: all 0.5s;
  855. -o-transition: all 0.5s;
  856. transition: all 0.5s;
  857. }
  858.  
  859. .pin-post {text-align: center; margin-bottom: 2em; font-size: 1.15em;}
  860.  
  861. .pin-post svg {
  862. width: 1.5em;
  863. height: 1.5em;
  864. vertical-align: middle;
  865. display: inline-block;
  866. fill: {color:accent};
  867. margin-right: 0.5em;
  868. }
  869.  
  870. /*----- POST NOTES -----*/
  871.  
  872. #notetitle {
  873. margin-top: 50px;
  874. color: {color:title};
  875. font-size: 1.1em;
  876. }
  877.  
  878. ol.notes {
  879. list-style-type: none;
  880. max-width: 100%;
  881. padding: 0;
  882. margin: 0;
  883. }
  884.  
  885. ol.notes li.note {display: block; line-height: 180%;}
  886. ol.notes li.note img.avatar {display: none;}
  887.  
  888. /*----- PAGINATION -----*/
  889.  
  890. .pg {
  891. margin: auto auto 200px auto;
  892. text-align: center;
  893. color: {color:title};
  894. }
  895.  
  896. .pg svg {
  897. width: 30px;
  898. height: 30px;
  899. display: inline;
  900. vertical-align: middle;
  901. fill: {color:accent};
  902. margin: 0 7px;
  903. -webkit-transition: all 0.3s;
  904. -moz-transition: all 0.3s;
  905. -ms-transition: all 0.3s;
  906. -o-transition: all 0.3s;
  907. transition: all 0.3s;
  908. }
  909.  
  910. .pg svg:hover {
  911. fill: {color:link};
  912. -webkit-transition: all 0.3s;
  913. -moz-transition: all 0.3s;
  914. -ms-transition: all 0.3s;
  915. -o-transition: all 0.3s;
  916. transition: all 0.3s;
  917. }
  918.  
  919. #m {
  920. text-align: center;
  921. display: none;
  922. margin-bottom: 50px;
  923. }
  924.  
  925. /*----- MOBILE CONTROLS -----*/
  926.  
  927. .mobile-controls {
  928. top: 20px;
  929. right: 20px;
  930. z-index: 9999999;
  931. position: fixed;
  932. display: none;
  933. }
  934.  
  935. .mobile-controls a {margin-left: 8px;}
  936.  
  937. .mobile-controls a svg {
  938. width: 24px;
  939. height: 24px;
  940. fill: {color:link};
  941. -webkit-transition: all 0.3s;
  942. -moz-transition: all 0.3s;
  943. -ms-transition: all 0.3s;
  944. -o-transition: all 0.3s;
  945. transition: all 0.3s;
  946. }
  947.  
  948. .mobile-controls a:hover svg {
  949. fill: {color:accent};
  950. -webkit-transition: all 0.3s;
  951. -moz-transition: all 0.3s;
  952. -ms-transition: all 0.3s;
  953. -o-transition: all 0.3s;
  954. transition: all 0.3s;
  955. }
  956.  
  957. /*----- RESPONSIVE -----*/
  958.  
  959. @media only screen and (max-width: 1023px) {
  960. .mobile-controls {display: block;}
  961. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display: none;}
  962. }
  963.  
  964. @media only screen and (max-width: 1023px) and (min-width: 601px) {
  965. .right .sidebar, .left .sidebar {
  966. margin: 100px auto {text:post margin}px auto;
  967. position: static;
  968. width: {select:post width};
  969. }
  970.  
  971. #container {width: {select:post width};}
  972. .left article, .left article:first-of-type {margin: {text:post margin}px 0;}
  973. }
  974.  
  975. @media only screen and (max-width: 600px) {
  976. #container {
  977. width: 70vw;
  978. }
  979.  
  980. .right .sidebar, .left .sidebar {
  981. width: 70vw;
  982. display: block;
  983. position: static;
  984. margin: 150px auto;
  985. }
  986.  
  987. .right article, .left article {
  988. width: 70vw;
  989. margin: 150px auto;
  990. }
  991.  
  992. .right article:first-of-type, .left article:first-of-type {margin: 150px auto;}
  993.  
  994. .albumart {display: none;}
  995. .audioinfo {text-align: right; padding: 0;}
  996. #k {display: none;}
  997. #m {display: block;}
  998. }
  999.  
  1000. @media only screen and (max-width: 390px) {
  1001. .notecount {display: none;}
  1002. }
  1003.  
  1004. {CustomCSS}
  1005.  
  1006. </style>
  1007. </head>
  1008.  
  1009. <body class="load-in">
  1010.  
  1011. <div class="mobile-controls">
  1012. <a href="https://www.tumblr.com/follow/{Name}" title="follow"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M57,114h45v45c0,3.3,2.7,6,6,6s6-2.7,6-6v-45h45c3.3,0,6-2.7,6-6s-2.7-6-6-6h-45V57c0-3.3-2.7-6-6-6s-6,2.7-6,6v45H57c-3.3,0-6,2.7-6,6S53.7,114,57,114z"/><path d="M108,196.1c48.6,0,88.1-39.5,88.1-88.1S156.6,19.9,108,19.9S19.9,59.4,19.9,108S59.4,196.1,108,196.1z M108,31.9c42,0,76.1,34.1,76.1,76.1S150,184.1,108,184.1S31.9,150,31.9,108S66,31.9,108,31.9z"/></svg></a>
  1013. <a href="https://www.tumblr.com/message/{Name}" title="message"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M51.6,144.6l-6,34.1c-0.4,2.3,0.5,4.6,2.4,5.9c1,0.8,2.3,1.1,3.5,1.1c1,0,2-0.2,2.8-0.7l44.3-23.8c3.2,0.3,6.3,0.4,9.4,0.4c46.3,0,83.9-29.5,83.9-65.7c0-36.2-37.6-65.7-83.9-65.7S24.1,59.7,24.1,95.9C24.1,114.6,34.1,132.2,51.6,144.6z M108,42.3c39.6,0,71.9,24.1,71.9,53.7c0,29.6-32.3,53.7-71.9,53.7c-3.2,0-6.6-0.2-10-0.5c-1.2-0.1-2.4,0.1-3.5,0.7l-35,18.8l4.5-25.7c0.4-2.4-0.6-4.8-2.7-6.1c-16.1-10.3-25.3-25.1-25.3-40.8C36.1,66.4,68.4,42.3,108,42.3z"/></svg></a>
  1014. <a href="https://www.tumblr.com/dashboard" title="dashboard"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M113.7,20.4c-2.3,0.9-3.7,3.1-3.7,5.6v39.1c-6.2,0.3-16.3,1.2-27.1,3.7c-20.4,4.9-34.6,13.6-42.3,26c-8.7,14.1-1.3,35.4,22.2,63.5c16.4,19.6,34.7,35.5,35.4,36.2c1.1,1,2.5,1.5,3.9,1.5c0,0,0,0,0,0c3.3,0,6-2.7,6-6c0-1.2-0.4-2.3-1-3.3c-1.2-2.1-7-13-12.4-25.3c-10.5-23.9-10.6-32.7-10.1-35.3c1-5.6,11.1-6.5,17.1-6.5c3.6,0,7.1,0.3,9.7,0.6l2,36.1c0.1,2.3,1.5,4.3,3.6,5.2c2.1,0.9,4.5,0.5,6.3-1l67.2-58c1.3-1.1,2-2.6,2.1-4.3s-0.6-3.3-1.7-4.5l-70.7-72C118.6,20.1,116,19.5,113.7,20.4z M122,40.7l55.9,57l-53.2,45.9l-1.6-28.8c-0.2-2.7-2.1-5-4.8-5.5c-0.3-0.1-7.9-1.5-16.6-1.5c-21.5,0-27.6,8.9-28.9,16.4c-1.4,7.7,1.6,20.2,9.1,37.9c-3.3-3.6-6.7-7.4-10-11.3c-19.2-23-26.7-40.5-21.1-49.4C65.4,77.7,110.2,77,115.3,77c0.3,0,0.5,0,0.6,0c1.6,0,3.2-0.6,4.3-1.7c1.2-1.1,1.8-2.7,1.8-4.3V40.7z"/></svg></a>
  1015. </div>
  1016.  
  1017. <section id="container" class="{select:sidebar position}">
  1018.  
  1019. <!----- SIDEBAR ----->
  1020.  
  1021. <aside class="sidebar">
  1022. {block:ifSidebarImage}<a href="/"><img src="{image:Sidebar}" id="side-img"/></a>{/block:ifSidebarImage}
  1023. {block:ifShowIcon}<img src="{PortraitURL-64}" class="side-icon">{/block:ifShowIcon}
  1024. <a href="/" class="title">{Title}</a>
  1025. {block:ifShowBlogURL}<div id="blogurl">{Name}</div>{/block:ifShowBlogURL}
  1026.  
  1027. <div class="dot d-one"></div>
  1028. <div class="dot d-two"></div>
  1029. <div class="dot d-three"></div>
  1030. <div class="dot d-four"></div>
  1031. <div class="dot d-five"></div>
  1032.  
  1033. <div id="description">{Description}</div>
  1034. {block:ifSearchBar}
  1035. <form action="/search" method="get" class="find" name="sform">
  1036. <svg class="icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M140,134.2c10.9-11.8,17.7-27.6,17.7-45c0-36.5-29.7-66.3-66.3-66.3S25.1,52.7,25.1,89.2s29.7,66.3,66.3,66.3c14.9,0,28.6-4.9,39.7-13.2l49.3,49.3c1.2,1.2,2.7,1.8,4.2,1.8c1.5,0,3.1-0.6,4.2-1.8c2.3-2.3,2.3-6.1,0-8.5L140,134.2z M37.1,89.2c0-29.9,24.3-54.3,54.3-54.3c29.9,0,54.3,24.3,54.3,54.3s-24.3,54.3-54.3,54.3C61.4,143.5,37.1,119.1,37.1,89.2z"/></svg>
  1037. <input type="text" name="q" placeholder="search this blog..." value="{SearchQuery}" value autocomplete="off" class="upper"/>
  1038. </form>
  1039. {/block:ifSearchBar}
  1040.  
  1041. <nav class="bullet">
  1042. {block:ifHomeLink}<a href="/">{text:Home Link}</a>{/block:ifHomeLink}{block:ifAskLink}<a href="/ask">{text:Ask Link}</a>{/block:ifAskLink}{block:ifArchiveLink}<a href="/archive">{text:Archive Link}</a>{/block:ifArchiveLink}{block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}{block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}{block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}{block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}{block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}{block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}
  1043. </nav>
  1044. </aside>
  1045.  
  1046. <!----- POSTS ----->
  1047.  
  1048. {block:TagPage}
  1049. <article id="taghead">
  1050. showing posts tagged with <span class="tagname upper">#{Tag}</span>
  1051. </article>
  1052. {/block:TagPage}
  1053.  
  1054. {block:Posts inlineMediaWidth="1280"}
  1055. <article class="posts" id="{PostID}">
  1056.  
  1057. {block:IndexPage}
  1058. {block:PinnedPostLabel}<div class="pin-post"><a href="{Permalink}" class="upper"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M134.1,11c-1.7-1.7-4.2-2.2-6.4-1.4c-2.2,0.8-3.7,2.9-3.9,5.3l-1.5,25.8L90.1,73.1l-39.2-4.7c-2.5-0.3-5,1-6.1,3.3c-1.1,2.3-0.7,5.1,1.2,6.9l28.8,28.8l-49.9,67.8c-1.7,2.3-1.5,5.6,0.5,7.7c1.2,1.2,2.7,1.8,4.3,1.8c1.2,0,2.3-0.3,3.3-1l70.6-47.4l29,29c1.2,1.2,2.7,1.8,4.2,1.8c0.9,0,1.8-0.2,2.6-0.6c2.3-1.1,3.7-3.5,3.4-6l-3.9-38.4l32.2-32.2l26.4-1.3c2.4-0.1,4.5-1.6,5.3-3.8c0.9-2.2,0.3-4.7-1.4-6.4L134.1,11z M55,154.5L83.3,116L95,127.6L55,154.5z M168.2,77.9c-1.5,0.1-2.9,0.7-4,1.8l-35.9,35.9c-1.3,1.3-1.9,3.1-1.7,4.9l2.5,24.5L66.7,82.3l24.9,3c1.8,0.2,3.7-0.4,5-1.7l36-36c1-1,1.7-2.4,1.7-3.9l0.8-14.7l48.2,48.2L168.2,77.9z"/></svg>{PinnedPostLabel}</a></div>{/block:PinnedPostLabel}
  1059. {/block:IndexPage}
  1060.  
  1061. {block:Text}
  1062. <div class="text-post" id="{PostID}">
  1063. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1064. {block:NotReblog}
  1065. <li class="caption ogcap body">
  1066. <div class="captext">{Body}</div>
  1067. </li>
  1068. {/block:NotReblog}
  1069. {block:RebloggedFrom}{block:Reblogs}
  1070. <li class="caption rbcap body">
  1071. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1072. <div class="captext">{Body}</div>
  1073. </li>
  1074. {/block:Reblogs}{/block:RebloggedFrom}
  1075. </div>
  1076. {/block:Text}
  1077.  
  1078. {block:Link}
  1079. <a href="{URL}"><div class="linkp">
  1080. {block:Thumbnail}<img src="{Thumbnail-HighRes}" class="thumbnail">{/block:Thumbnail}
  1081. <div class="link">
  1082. <div class="linktitle title">{Name}</div>
  1083. {block:Excerpt}<div class="linktxt">{Excerpt}</div>{/block:Excerpt}
  1084. {block:Host}<svg class="icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"> <path d="M47.9,66h82.1c4.5,0,7.9,5.4,7.9,12.5v24.3c0,8.8-4.9,16.2-7.9,16.2H98c-3.3,0-6,2.7-6,6s2.7,6,6,6h32.1 c11.9,0,19.9-14.6,19.9-28.2V78.5c0-14-8.6-24.5-19.9-24.5H47.9C36.4,54,27,65,27,78.5v24.3c0,13,8.5,27.4,20.6,27.4c3.3,0,6-2.7,6-6s-2.7-6-6-6c-3.4,0-8.6-6.9-8.6-15.4V78.5C39,70.8,43.6,66,47.9,66z"/><path d="M86,164h82.1c9.1,0,18.9-9.7,18.9-27.6v-24.3c0-14.5-8.3-25.4-19.3-25.4c-3.3,0-6,2.7-6,6s2.7,6,6,6c4.1,0,7.3,6,7.3,13.4v24.3c0,8.6-3.7,15.6-6.9,15.6H86c-3.5,0-9-7.1-9-15.6v-24.3c0-7.5,4.8-13.1,9-13.1h32c3.3,0,6-2.7,6-6s-2.7-6-6-6H86c-11.6,0-21,11.3-21,25.1v24.3C65,149.4,74,164,86,164z"/><div class="linkhost">by {Host}</div>{/block:Host}
  1085. </div>
  1086. </div></a>
  1087. {block:Description}
  1088. {block:NotReblog}
  1089. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1090. <div class="captext">{Description}</div>
  1091. </li>
  1092. {/block:NotReblog}
  1093. {/block:Description}
  1094. {block:RebloggedFrom}{block:Reblogs}
  1095. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1096. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1097. <div class="captext">{Body}</div>
  1098. </li>
  1099. {/block:Reblogs}{/block:RebloggedFrom}
  1100. {/block:Link}
  1101.  
  1102. {block:Photo}
  1103. <div class="photo">
  1104. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}"></a>{LinkCloseTag}
  1105. </div>
  1106. {block:Caption}
  1107. {block:NotReblog}
  1108. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1109. <div class="captext">{Caption}</div>
  1110. </li>
  1111. {/block:NotReblog}
  1112. {block:Reblogs}
  1113. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1114. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1115. <div class="captext">{Body}</div>
  1116. </li>
  1117. {/block:Reblogs}
  1118. {/block:Caption}
  1119. {/block:Photo}
  1120.  
  1121. {block:Photoset}
  1122. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /></div>{/block:Photos}</div>
  1123. {block:Caption}
  1124. {block:NotReblog}
  1125. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1126. <div class="captext">{Caption}</div>
  1127. </li>
  1128. {/block:NotReblog}
  1129. {block:Reblogs}
  1130. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1131. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1132. <div class="captext">{Body}</div>
  1133. </li>
  1134. {/block:Reblogs}
  1135. {/block:Caption}
  1136. {/block:Photoset}
  1137.  
  1138. {block:Video}
  1139. <div class="video">{Video-500}</div>
  1140. {block:Caption}
  1141. {block:NotReblog}
  1142. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1143. <div class="captext">{Caption}</div>
  1144. </li>
  1145. {/block:NotReblog}
  1146. {block:Reblogs}
  1147. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1148. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1149. <div class="captext">{Body}</div>
  1150. </li>
  1151. {/block:Reblogs}
  1152. {/block:Caption}
  1153. {/block:Video}
  1154.  
  1155. {block:Quote}
  1156. <div class=" quote border">{Quote}</div>
  1157. {block:Source}<div class="source upper">{Source}</div>{/block:Source}
  1158. {/block:Quote}
  1159.  
  1160. {block:Chat}
  1161. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1162. <ul class="chat">{block:Lines}
  1163. <li class="line">
  1164. {block:Label}<svg class="icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M51.6,144.6l-6,34.1c-0.4,2.3,0.5,4.6,2.4,5.9c1,0.8,2.3,1.1,3.5,1.1c1,0,2-0.2,2.8-0.7l44.3-23.8c3.2,0.3,6.3,0.4,9.4,0.4c46.3,0,83.9-29.5,83.9-65.7c0-36.2-37.6-65.7-83.9-65.7S24.1,59.7,24.1,95.9C24.1,114.6,34.1,132.2,51.6,144.6z M108,42.3c39.6,0,71.9,24.1,71.9,53.7c0,29.6-32.3,53.7-71.9,53.7c-3.2,0-6.6-0.2-10-0.5c-1.2-0.1-2.4,0.1-3.5,0.7l-35,18.8l4.5-25.7c0.4-2.4-0.6-4.8-2.7-6.1c-16.1-10.3-25.3-25.1-25.3-40.8C36.1,66.4,68.4,42.3,108,42.3z"/></svg><div class="label subtitle">{Label}</div>{/block:Label}
  1165. {Line}
  1166. </li>
  1167. {/block:Lines}</ul>
  1168. {/block:Chat}
  1169.  
  1170. {block:Answer}
  1171. <div class="askpost">
  1172. <svg class="icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M37.1,171h141.9c3.3,0,6-2.7,6-6V74.7c0,0,0-0.1,0-0.1V50.7c0-3.3-2.7-6-6-6H37.1c-3.3,0-6,2.7-6,6v25.1c0,0,0,0,0,0.1V165C31.1,168.3,33.8,171,37.1,171z M43.1,56.7h129.9v15.2l-65.5,55.5L43.1,73V56.7z M43.1,88.7l60.5,51.1c2.2,1.9,5.5,1.9,7.7,0l61.6-52.2V159H43.1V88.7z"/></svg>
  1173. <div class="q-asker upper">{Asker} sent a message</div>
  1174. <div class="question">{Question}</div>
  1175. </div>
  1176. {block:NotReblog}
  1177. <li class="caption ogcap">
  1178. <div class="captext">{Replies}</div>
  1179. </li>
  1180. {/block:NotReblog}
  1181. {block:Answerer}
  1182. <li class="caption rbcap">
  1183. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1184. <div class="captext">{Answer}</div>
  1185. </li>
  1186. {/block:Answerer}
  1187. {block:RebloggedFrom}{block:Reblogs}
  1188. <li class="caption">
  1189. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1190. <div class="captext">{Body}</div>
  1191. </li>
  1192. {/block:Reblogs}{/block:RebloggedFrom}
  1193. {/block:Answer}
  1194.  
  1195. {block:Audio}
  1196. <div class="audiopost">
  1197. <div class="player-wrap">
  1198. <div class="audiobox"><div class="button">
  1199. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1200. </div></div>
  1201. </div>
  1202. <div class="audioinfo">
  1203. {block:TrackName}<div class="subtitle track">{TrackName}</div>{/block:TrackName}
  1204. {block:Artist}<div class="upper">by {Artist}</div>{/block:Artist}
  1205. </div>
  1206. {block:AlbumArt}
  1207. <div class="albumart"><img src="{AlbumArtURL}"></div>
  1208. {/block:AlbumArt}
  1209. </div>
  1210. {block:Caption}
  1211. {block:NotReblog}
  1212. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1213. <div class="captext">{Caption}</div>
  1214. </li>
  1215. {/block:NotReblog}
  1216. {block:Reblogs}
  1217. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1218. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1219. <div class="captext">{Body}</div>
  1220. </li>
  1221. {/block:Reblogs}
  1222. {/block:Caption}
  1223. {/block:Audio}
  1224.  
  1225. <!----- INFO ----->
  1226.  
  1227. {block:Date}
  1228. <div class="info flexing">
  1229. {block:IndexPage}
  1230. <div class="info-left upper">
  1231. <a href="{Permalink}" {block:NoteCount}class="ibullet"{/block:NoteCount} title="{TimeAgo}">{DayOfWeek}</a>{block:NoteCount}<a href="{Permalink}" class="notecount">{NoteCount}</a>{/block:NoteCount}
  1232. </div>
  1233. <div class="lirb upper">
  1234. <a href="{ReblogURL}" target="_blank" class="ibullet">reblog</a><a class="likeb" href="#">{LikeButton}<span class="lb">like</span></a>
  1235. </div>
  1236. {/block:IndexPage}
  1237. </div>
  1238.  
  1239. {block:PermalinkPage}
  1240. <div class="pinfo">
  1241. {TimeAgo} on {DayOfWeek}, {DayOfMonth} {Month} {Year}<br>
  1242. {block:RebloggedFrom}
  1243. reblogged via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a><br>
  1244. original post by <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
  1245. {/block:RebloggedFrom}
  1246. </div>
  1247. {/block:PermalinkPage}
  1248.  
  1249. {block:HasTags}
  1250. <div class="tags {block:IndexPage}{select:tags}{/block:IndexPage}" {block:PermalinkPage}id="perma-tags"{/block:PermalinkPage}>
  1251. {block:Tags}
  1252. <a href="{TagURL}">{Tag}</a>
  1253. {/block:Tags}
  1254. </div>
  1255. {/block:HasTags}
  1256. {/block:Date}
  1257.  
  1258. <!----- POST NOTES ----->
  1259.  
  1260. {block:Date}{block:PermalinkPage}
  1261. <div class="notes">
  1262. {block:PostNotes}
  1263. <div class="upper border" id="notetitle">{NoteCountWithLabel}</div>
  1264. <div id="pnotes">{PostNotes}</div>
  1265. {/block:PostNotes}
  1266. </div>
  1267. {/block:PermalinkPage}{/block:Date}
  1268.  
  1269. <!----- SOURCE ----->
  1270.  
  1271. <div class="postsource">
  1272. {block:ContentSource}<a href="{SourceURL}">{lang:Source}:{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a>{/block:ContentSource}
  1273. </div>
  1274.  
  1275. </article>
  1276. {/block:Posts}
  1277.  
  1278. <!----- PAGINATION ----->
  1279.  
  1280. {block:Pagination}
  1281. <article class="pg upper">
  1282. {block:PreviousPage}
  1283. <a href="{PreviousPage}"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M137.3,43.2c-2.5-2.1-6.3-1.8-8.5,0.7L78,104.1c-1.9,2.2-1.9,5.5,0,7.7l50.8,60.3c1.2,1.4,2.9,2.1,4.6,2.1c1.4,0,2.7-0.5,3.9-1.4c2.5-2.1,2.9-5.9,0.7-8.5L90.4,108L138,51.6C140.1,49.1,139.8,45.3,137.3,43.2z"/></svg></a>
  1284. {/block:PreviousPage}
  1285. page {CurrentPage} of {TotalPages}
  1286. {block:NextPage}
  1287. <a href="{NextPage}"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M78.7,172.8c1.1,0.9,2.5,1.4,3.9,1.4c1.7,0,3.4-0.7,4.6-2.1l50.8-60.3c1.9-2.2,1.9-5.5,0-7.7L87.2,43.9c-2.1-2.5-5.9-2.9-8.5-0.7c-2.5,2.1-2.9,5.9-0.7,8.5l47.5,56.4L78,164.4C75.9,166.9,76.2,170.7,78.7,172.8z"/></svg></a>
  1288. {/block:NextPage}
  1289. </article>
  1290. {/block:Pagination}
  1291.  
  1292. </section>
  1293.  
  1294. <a href="https://seyche.tumblr.com" title="cherry blossom theme by seyche" id="k">&.</a>
  1295.  
  1296. <a href="https://seyche.tumblr.com" id="m" class="upper">cherry blossom theme by seyche</a>
  1297.  
  1298. <!----- VIDEO RESIZING ----->
  1299.  
  1300. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  1301.  
  1302. <!----- TOOLTIPS ----->
  1303.  
  1304. <script src="https://unpkg.com/popper.js@1"></script>
  1305. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1306.  
  1307. <!----- SCRIPTS ----->
  1308.  
  1309. <script>
  1310.  
  1311. /// PHOTOSETS
  1312.  
  1313. $(document).ready(function(){
  1314. initPhotosets();
  1315.  
  1316. npfPhotosets(".posts", {
  1317. rowClass:"npf_row",
  1318. imageContainerClass:"tmblr-full",
  1319. generatedPhotosetContainerClass:"npf_photoset",
  1320. imageClass:"npf_image",
  1321. includeCommonPhotosets: false,
  1322. useTumblrLightbox: true,
  1323. insertGalleryIndicator: false,
  1324. galleryIndicatorClass: "npf_gallery_indicator",
  1325. galleryIndicatorContent: "<img src='image_url'>",
  1326. photosetMargins:"{select:photoset gutter}"
  1327. });
  1328.  
  1329. /// TOOLTIPS
  1330.  
  1331. tippy('[title]', {
  1332. theme: 'custom',
  1333. arrow: false,
  1334. followCursor: true,
  1335. delay: 100,
  1336. placement: 'bottom-start',
  1337. zIndex: 9999999999,
  1338. maxWidth: 400,
  1339.  
  1340. content(reference) {
  1341. const title = reference.getAttribute('title');
  1342. reference.removeAttribute('title');
  1343. return title;
  1344. },
  1345. });
  1346.  
  1347. /// NOTECOUNT
  1348.  
  1349. $('article').find('.notecount').each(function(){
  1350. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1351. if (n > 999) {
  1352. n = Math.floor(n / 100) / 10;
  1353. $(this).text(n + 'k n');
  1354. }
  1355. });
  1356. });
  1357.  
  1358. /// REMOVE REDIRECTS
  1359.  
  1360. $(document).ready(function(){
  1361. //remove tumblr redirects script by magnusthemes@tumblr
  1362. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1363. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1364. var replaceURL = decodeURIComponent(originalURL);
  1365. $(this).attr("href", replaceURL);
  1366. });
  1367. });
  1368.  
  1369. /// RESPONSIVE VIDEOS
  1370.  
  1371. function flexFrame() {
  1372. $(".caption").each(function() {
  1373. $(this).find("iframe").wrap("<div class='capframe'></div>");
  1374. flexibleFrames($(".capframe"));
  1375. });
  1376. flexibleFrames($(".video"));
  1377. }
  1378. $(document).ready(flexFrame);
  1379.  
  1380. </script>
  1381.  
  1382. </body>
  1383. </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!