API tools faq
paste
seiche

theme eleven: rosemary

seiche
Oct 27th, 2020 (edited)
17,720
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 62.84 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. ROSEMARY THEME BY SEYCHE.TUMBLR.COM
  15.  
  16. CREDITS:
  17. -PXU photosets by pixelunion
  18. -npf photosets by codematurgy
  19. -tippy.js tooltips by atomiks
  20. -notecount shortening by shythemes
  21. -responsive videos by nouvae
  22. -remove redirects by magnusthemes
  23. (full list of credits @ seyche.tumblr.com/credits)
  24.  
  25. --->
  26.  
  27. <link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Be+Vietnam:ital,wght@0,400;0,700;1,400;1,700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Overpass:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  28.  
  29. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat:wght@900&family=Playfair+Display:wght@900&family=Yeseva+One&display=swap" rel="stylesheet">
  30.  
  31. <!----- PHOTOSETS ----->
  32.  
  33. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  34.  
  35. <link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  36.  
  37. <!----- VARIABLES ----->
  38.  
  39. <meta name="image:Profile" content=""/>
  40.  
  41. <meta name="color:Background" content="#ffffff"/>
  42. <meta name="color:Text" content="#575757"/>
  43. <meta name="color:Link" content="#8c8c8c"/>
  44. <meta name="color:Accent" content="#aec189"/>
  45. <meta name="color:Borders" content="#e0e0e0"/>
  46. <meta name="color:Title" content="#111111"/>
  47. <meta name="color:Icon Background" content="#f5f5f5"/>
  48. <meta name="color:Post Content Background" content="#f5f5f5"/>
  49. <meta name="color:Post Content Text" content="#575757"/>
  50. <meta name="color:Dot One" content="#212121"/>
  51. <meta name="color:Dot Two" content="#aec189"/>
  52. <meta name="color:Dot Three" content="#e0e0e0"/>
  53. <meta name="color:Photo Border" content="#f5f5f5"/>
  54.  
  55. <meta name="select:Body Font" content="ABeeZee" title="ABeeZee"/>
  56. <meta name="select:Body Font" content="Be Vietnam" title="Be Vietnam"/>
  57. <meta name="select:Body Font" content="Spectral" title="Spectral"/>
  58. <meta name="select:Body Font" content="Karla" title="Karla"/>
  59. <meta name="select:Body Font" content="Lato" title="Lato"/>
  60. <meta name="select:Body Font" content="Lora" title="Lora"/>
  61. <meta name="select:Body Font" content="Nunito" title="Nunito"/>
  62. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  63. <meta name="select:Body Font" content="Overpass" title="Overpass"/>
  64. <meta name="select:Body Font" content="Poppins" title="Poppins"/>
  65. <meta name="select:Body Font" content="Public Sans" title="Public Sans"/>
  66.  
  67. <meta name="select:Title Font" content="Yeseva One" title="Yeseva One"/>
  68. <meta name="select:Title Font" content="Abril Fatface" title="Abril Fatface"/>
  69. <meta name="select:Title Font" content="Montserrat" title="Montserrat"/>
  70. <meta name="select:Title Font" content="Playfair Display" title="Playfair Display"/>
  71.  
  72. <meta name="select:Blog Info" content="sidebar" title="Sidebar"/>
  73. <meta name="select:Blog Info" content="main-header" title="Header"/>
  74.  
  75. <meta name="select:Font Size" content="15px" title="15px"/>
  76. <meta name="select:Font Size" content="12px" title="12px"/>
  77. <meta name="select:Font Size" content="13px" title="13px"/>
  78. <meta name="select:Font Size" content="14px" title="14px"/>
  79. <meta name="select:Font Size" content="16px" title="16px"/>
  80. <meta name="select:Font Size" content="17px" title="17px"/>
  81. <meta name="select:Font Size" content="18px" title="18px"/>
  82.  
  83. <meta name="select:Post Width" content="540px" title="540px"/>
  84. <meta name="select:Post Width" content="400px" title="400px"/>
  85. <meta name="select:Post Width" content="450px" title="450px"/>
  86. <meta name="select:Post Width" content="500px" title="500px"/>
  87. <meta name="select:Post Width" content="600px" title="600px"/>
  88.  
  89. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  90. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  91. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  92. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  93.  
  94. <meta name="select:Tags" content="show-tags" title="Show tags"/>
  95. <meta name="select:Tags" content="hover-tags" title="Hover tags"/>
  96. <meta name="select:Tags" content="hide-tags" title="Hide tags"/>
  97.  
  98. <meta name="if:Centered Text" content="0"/>
  99. <meta name="if:Show Blog Icon" content="0"/>
  100. <meta name="if:Show Date" content="0"/>
  101. <meta name="if:Minimal Post Info" content="0"/>
  102. <meta name="if:Photo Border" content="0"/>
  103. <meta name="if:Hide Caption" content="0"/>
  104.  
  105. <meta name="text:Post Margin" content="200"/>
  106.  
  107. <meta name="text:Stat 1 Icon" content="heart"/>
  108. <meta name="text:Stat 1" content=""/>
  109. <meta name="text:Stat 2 Icon" content="moon"/>
  110. <meta name="text:Stat 2" content=""/>
  111.  
  112. <meta name="text:Home Link" content="home"/>
  113. <meta name="text:Ask Link" content="ask"/>
  114. <meta name="text:Archive Link" content="archive"/>
  115. <meta name="text:Submit Link" content=""/>
  116. <meta name="text:Link 1 URL" content=""/>
  117. <meta name="text:Link 1" content=""/>
  118. <meta name="text:Link 2 URL" content=""/>
  119. <meta name="text:Link 2" content=""/>
  120. <meta name="text:Link 3 URL" content=""/>
  121. <meta name="text:Link 3" content=""/>
  122. <meta name="text:Link 4 URL" content=""/>
  123. <meta name="text:Link 4" content=""/>
  124. <meta name="text:Link 5 URL" content=""/>
  125. <meta name="text:Link 5" content=""/>
  126. <meta name="text:Link 6 URL" content=""/>
  127. <meta name="text:Link 6" content=""/>
  128.  
  129. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  130.  
  131. <script src="https://unpkg.com/feather-icons"></script>
  132.  
  133. <!----- LOAD IN ----->
  134.  
  135. <script>
  136. $(document).ready(function(){
  137. $(function() {
  138. $('body').removeClass('load-in');
  139. });
  140. });
  141. </script>
  142.  
  143. <style type="text/css">
  144.  
  145. body {
  146. font-family: '{select:body font}', sans-serif;
  147. font-size: {select:font size};
  148. color: {color:text};
  149. background-color: {color:background};
  150. {block:ifCenteredText}text-align: center;{/block:ifCenteredText}
  151. {block:ifNotCenteredText}text-align: left;{/block:ifNotCenteredText}
  152. line-height: 160%;
  153. word-wrap: break-word;
  154. letter-spacing: 0.05em;
  155. margin: 0;
  156. padding: 0;
  157. overflow-x: hidden;
  158. -webkit-transition: 2s opacity;
  159. -moz-transition: 2s opacity;
  160. -ms-transition: 2s opacity;
  161. -o-transition: 2s opacity;
  162. transition: 2s opacity;
  163. }
  164.  
  165. body.load-in {
  166. opacity: 0;
  167. -webkit-transition: none;
  168. -moz-transition: none;
  169. -ms-transition: none;
  170. -o-transition: none;
  171. transition: none;
  172. }
  173.  
  174. a {
  175. color: {color:link};
  176. text-decoration: none;
  177. -webkit-transition: all 0.3s;
  178. -moz-transition: all 0.3s;
  179. -ms-transition: all 0.3s;
  180. -o-transition: all 0.3s;
  181. transition: all 0.3s;
  182. }
  183.  
  184. a:hover {
  185. color: {color:accent};
  186. -webkit-transition: all 0.3s;
  187. -moz-transition: all 0.3s;
  188. -ms-transition: all 0.3s;
  189. -o-transition: all 0.3s;
  190. transition: all 0.3s;
  191. }
  192.  
  193. p a, li a {box-shadow: inset 0 -2px 0 {color:accent};}
  194. p a:hover, li a:hover {box-shadow: inset 0 -1.25em 0 {color:accent}; color: {color:background};}
  195.  
  196. blockquote {
  197. padding: 1.25em;
  198. background-color: {color:post content background};
  199. color: {color:post content text};
  200. border: 1px solid {color:borders};
  201. box-sizing: border-box;
  202. margin: 1.25em;
  203. text-align: left;
  204. }
  205.  
  206. blockquote p:first-of-type {margin-top: 0;}
  207.  
  208. h1, h2, h3, h4, h5, .title {
  209. color: {color:title};
  210. font-family: '{select:title font}', serif;
  211. letter-spacing: 0.2em;
  212. line-height: 150%;
  213. font-weight: normal;
  214. text-transform: uppercase;
  215. text-align: center;
  216. }
  217.  
  218. h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: {color:title};}
  219. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: {color:accent}}
  220. h1, .title {font-size: 1.75em;}
  221. h2 {font-size: 1.65em;}
  222. h3 {font-size: 1.5em;}
  223. h4 {font-size: 1.25em;}
  224. h5 {font-size: 1.15em;}
  225.  
  226. small {font-size: 0.9em;}
  227. big {font-size: 1.1em;}
  228. b, bold, strong, b a, bold a, strong a {color: {color:title};}
  229. b a:hover, bold a:hover, strong a:hover {color: {color:accent};}
  230. p b a:hover, p bold a:hover, p strong a:hover {color: {color:background};}
  231.  
  232. ul {list-style-type: circle;}
  233. ol {list-style-type: decimal;}
  234. li {max-width: 100%;}
  235.  
  236. .tippy-tooltip.custom-theme {
  237. background-color: {color:background};
  238. color: {color:title};
  239. text-align: center;
  240. font-family: inherit;
  241. font-weight: normal;
  242. text-transform: uppercase;
  243. letter-spacing: 0.12em;
  244. padding: 0.25em;
  245. margin: 20px auto auto 10px;
  246. font-size: 0.8em;
  247. border: 1px solid {color:borders};
  248. border-radius: 0;
  249. }
  250.  
  251. ::-webkit-scrollbar {
  252. width: 17px;
  253. height: 17px;
  254. background-color: {color:background};
  255. }
  256.  
  257. ::-webkit-scrollbar-track {border: 8px solid {color:background}; background-color: {color:borders};}
  258.  
  259. ::-webkit-scrollbar-thumb {
  260. border: 6px solid {color:background};
  261. background-color: {color:title};
  262. min-height: 24px;
  263. min-width: 24px;
  264. }
  265.  
  266. #controls-icon svg {
  267. position: fixed;
  268. top: 20px;
  269. width: 1.5em;
  270. height: 1.5em;
  271. color: {color:accent};
  272. right: 20px;
  273. z-index: 50;
  274. }
  275.  
  276. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  277. z-index: 999999999!important;
  278. opacity: 0;
  279. transform: scale(0.9);
  280. transform-origin: 100% 0;
  281. margin-top: 0.65em;
  282. padding-right: calc(35px + 1.5em);
  283. -webkit-transform: scale(0.9);
  284. -webkit-transform-origin: 100% 0;
  285. -o-transform: scale(0.9);
  286. -o-transform-origin: 100% 0;
  287. -moz-transform: scale(0.9);
  288. -moz-transform-origin: 100% 0;
  289. -ms-transform: scale(0.9);
  290. -ms-transform-origin: 100% 0;
  291. -webkit-transition: all 0.5s;
  292. -moz-transition: all 0.5s;
  293. -ms-transition: all 0.5s;
  294. -o-transition: all 0.5s;
  295. transition: all 0.5s;
  296. }
  297.  
  298. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  299. opacity: 1.0;
  300. -webkit-transition: all 0.5s;
  301. -moz-transition: all 0.5s;
  302. -ms-transition: all 0.5s;
  303. -o-transition: all 0.5s;
  304. transition: all 0.5s;
  305. }
  306.  
  307. .iframe-controls--phone-mobile {display: none!important;}
  308. .tmblr-iframe-pushdown {padding-top: 0!important;}
  309. .tmblr-iframe--app-cta-button {display: none!important;}
  310.  
  311. /*----- SIDEBAR / HEADER STYLING -----*/
  312.  
  313. aside {
  314. text-align: center;
  315. box-sizing: border-box;
  316. }
  317.  
  318. {block:ifProfileImage}
  319. #side-img {
  320. width: 100%;
  321. {block:ifNotShowBlogIcon}
  322. margin: 0 auto 2em auto;
  323. {/block:ifNotShowBlogIcon}
  324. object-fit: cover;
  325. {block:ifPhotoBorder}
  326. border: 14px solid {color:photo border};
  327. {/block:ifPhotoBorder}
  328. }
  329. {/block:ifProfileImage}
  330.  
  331. #blog-info .icon {
  332. width: 66px;
  333. height: 66px;
  334. padding: 8px;
  335. {block:ifNotProfileImage}
  336. margin-bottom: 1em;
  337. {/block:ifNotProfileImage}
  338. {block:ifProfileImage}
  339. margin: -34px auto 1em auto;
  340. {block:ifPhotoBorder}
  341. margin: -40px auto 1em 14px;
  342. {/block:ifPhotoBorder}
  343. {/block:ifProfileImage}
  344. }
  345.  
  346. #blog-info .title {text-align: center; font-size: 1.75em;}
  347.  
  348. #blog-info .dots {margin: 0.5em auto 1em auto;}
  349.  
  350. #desc-stats {margin-top: 0.75em; color: {color:link};}
  351. #desc-stats li {list-style-type: none; display: inline-block;}
  352. #desc-stats li:nth-child(odd) {margin-right: 0.5em;}
  353. #desc-stats li:nth-child(even) {margin-left: 0.5em;}
  354.  
  355. #desc-stats li svg {
  356. display: inline-block;
  357. vertical-align: middle;
  358. width: 1.25em;
  359. height: 1.25em;
  360. margin-right: 0.5em;
  361. }
  362.  
  363. #description {font-style: italic;}
  364.  
  365. /*----- SIDEBAR -----*/
  366.  
  367. .sidebar aside {
  368. position: fixed;
  369. width: 250px;
  370. top: 0;
  371. bottom: 0;
  372. height: 100%;
  373. display: flex;
  374. flex-direction: column;
  375. align-items: center;
  376. justify-content: center;
  377. }
  378.  
  379. {block:ifProfileImage}
  380. .sidebar #side-img {max-height: 400px;}
  381. {/block:ifProfileImage}
  382.  
  383. .sidebar #blog-info {width: 250px; flex: initial;}
  384.  
  385. /*----- HEADER -----*/
  386.  
  387. .main-header aside {position: relative; margin-top: 100px;}
  388.  
  389. /*----- MENU BUTTONS -----*/
  390.  
  391. #button-wrap {
  392. position: fixed;
  393. height: 100%;
  394. width: 80px;
  395. top: 0;
  396. left: 0;
  397. bottom: 0;
  398. text-align: center;
  399. box-sizing: border-box;
  400. padding: 20px 0;
  401. background-color: {color:background};
  402. z-index: 7;
  403. display: flex;
  404. flex-direction: column;
  405. justify-content: space-between;
  406. align-items: center;
  407. }
  408.  
  409. .menu-button {cursor: help;}
  410.  
  411. .menu-button svg {
  412. width: 44px;
  413. height: 44px;
  414. background: rgba({RGBcolor:accent}, 0.2);
  415. color: {color:accent};
  416. padding: 0.25em;
  417. border-radius: 50%;
  418. stroke-width: 3;
  419. -webkit-transition: all 0.75s;
  420. -moz-transition: all 0.75s;
  421. -ms-transition: all 0.75s;
  422. -o-transition: all 0.75s;
  423. transition: all 0.75s;
  424. }
  425.  
  426. .menu-button:hover svg {background-color: rgba({RGBcolor:accent}, 1.0); color: {color:background};}
  427.  
  428. .menu-button.menu-click svg {
  429. color: {color:background};
  430. background-color: {color:title};
  431. -webkit-transform: rotate(225deg);
  432. -moz-transform: rotate(225deg);
  433. -ms-transition: rotate(225deg);
  434. -o-transition: rotate(225deg);
  435. transform: rotate(225deg);
  436. -webkit-transition: all 0.75s;
  437. -moz-transition: all 0.75s;
  438. -ms-transition: all 0.75s;
  439. -o-transition: all 0.75s;
  440. transition: all 0.75s;
  441. }
  442.  
  443. .vertical-dots {margin-top: 10px;}
  444.  
  445. .vertical-dots span {
  446. display: block;
  447. width: 6px;
  448. height: 6px;
  449. border-radius: 50%;
  450. margin: 5px auto 10px auto !important;
  451. z-index: -1;
  452. }
  453.  
  454. .vertical-dots span:nth-child(3n) {background-color: {color:dot three};}
  455. .vertical-dots span:nth-child(3n + 1) {background-color: {color:dot one};}
  456. .vertical-dots span:nth-child(3n + 2) {background-color: {color:dot two};}
  457.  
  458. .dots.menu-dots {
  459. display: inline-block;
  460. position: fixed;
  461. left: 80px;
  462. top: calc(28px + 0.25em);
  463. }
  464.  
  465. .dots.menu-dots span {
  466. width: 6px;
  467. height: 6px;
  468. margin: auto 10px auto auto !important;
  469. }
  470.  
  471. #btop a svg {
  472. width: 1.5em;
  473. height: 1.5em;
  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. #btop a:hover svg {
  482. color: {color:title};
  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. /*----- NAV MENU -----*/
  491.  
  492. .menu-fade {
  493. position: fixed;
  494. top: 0;
  495. left: 0;
  496. right: 0;
  497. bottom: 0;
  498. width: 100%;
  499. height: 100%;
  500. z-index: 5;
  501. display: none;
  502. cursor: help;
  503. background-color: rgba({RGBcolor:post content background}, 0.75);
  504. }
  505.  
  506. #menu {
  507. background-color: {color:background};
  508. border-right: 1px solid {color:borders};
  509. border-left: 1px solid {color:borders};
  510. width: 320px;
  511. height: 100%;
  512. position: fixed;
  513. top: 0;
  514. bottom: 0;
  515. left: -400px;
  516. z-index: 6;
  517. text-align: left;
  518. box-sizing: border-box;
  519. overflow-y: auto;
  520. overflow-x: hidden;
  521. -webkit-transition: ease-in-out 0.75s;
  522. -moz-transition: ease-in-out 0.75s;
  523. -ms-transition: ease-in-out 0.75s;
  524. -o-transition: ease-in-out 0.75s;
  525. transition: ease-in-out 0.75s;
  526. }
  527.  
  528. #menu.show {
  529. left: 80px;
  530. -webkit-transition: ease-in-out 0.75s;
  531. -moz-transition: ease-in-out 0.75s;
  532. -ms-transition: ease-in-out 0.75s;
  533. -o-transition: ease-in-out 0.75s;
  534. transition: ease-in-out 0.75s;
  535. }
  536.  
  537. #menu .title {
  538. text-align: left;
  539. border-bottom: 1px solid {color:borders};
  540. box-sizing: border-box;
  541. padding: calc(20px + 0.25em) 1.75em;
  542. font-size: 1.5em;
  543. }
  544.  
  545. #menu-content {
  546. display: flex;
  547. flex-direction: column;
  548. justify-content: space-between;
  549. flex-wrap: no-wrap;
  550. height: calc(100% - 3.5em - 40px);
  551. }
  552.  
  553. #menu nav {
  554. padding: 1.75em 1.75em 1.75em 1.25em;
  555. box-sizing: border-box;
  556. list-style-type: none;
  557. font-size: 1.5em;
  558. text-transform: lowercase;
  559. letter-spacing: 0.06em;
  560. }
  561.  
  562. #menu nav li {margin-bottom: 0.5em;}
  563.  
  564. #menu nav li a::before {
  565. content: '';
  566. width: 0;
  567. height: 4px;
  568. background: {color:accent};
  569. border-radius: 4px;
  570. display: inline-block;
  571. margin: auto 0.5em 0.2em auto;
  572. vertical-align: middle;
  573. -webkit-transition: all 0.3s;
  574. -moz-transition: all 0.3s;
  575. -ms-transition: all 0.3s;
  576. -o-transition: all 0.3s;
  577. transition: all 0.3s;
  578. }
  579.  
  580. #menu nav li a:hover::before {
  581. width: 0.75em;
  582. -webkit-transition: all 0.3s;
  583. -moz-transition: all 0.3s;
  584. -ms-transition: all 0.3s;
  585. -o-transition: all 0.3s;
  586. transition: all 0.3s;
  587. }
  588.  
  589. #menu nav li a, #menu nav li a:hover {box-shadow: none;}
  590. #menu nav li a:hover {color: {color:title};}
  591.  
  592. .find {
  593. border-top: 1px solid {color:borders};
  594. box-sizing: border-box;
  595. padding: 1.5em;
  596. }
  597.  
  598. .find svg {
  599. width: 1.25em;
  600. height: 1.25em;
  601. vertical-align: middle;
  602. display: inline-block;
  603. margin-right: 0.75em;
  604. }
  605.  
  606. .find input {
  607. border: none;
  608. outline: none;
  609. display: inline-block;
  610. background: inherit;
  611. margin: 0;
  612. padding: 0;
  613. color: {color:text};
  614. font-family: inherit;
  615. font-size: inherit;
  616. }
  617.  
  618. .find input[type=text] {color: {color:text};}
  619. input::-webkit-input-placeholder {color: {color:text};}
  620. input::-moz-placeholder {color: {color:text};}
  621. input:-moz-placeholder {color: {color:text};}
  622. input:-ms-input-placeholder {color: {color:text};}
  623.  
  624. /*----- POSTS -----*/
  625.  
  626. #container {position: relative; margin: auto;}
  627. #container.sidebar {width: calc({select:post width} + 400px);}
  628. #container.main-header {width: {select:post width};}
  629.  
  630. #posts-container {position: relative;}
  631. .sidebar #posts-container {margin: 80px auto 80px 400px;}
  632. .main-header #posts-container {margin: {text:post margin}px auto;}
  633.  
  634. article {
  635. width: {select:post width};
  636. position: relative;
  637. margin: {text:post margin}px auto;
  638. }
  639.  
  640. article:first-of-type {margin-top: 0;}
  641.  
  642. .tumblr_video_container {max-height: {select:post width}!important; overflow: hidden!important;
  643. }
  644. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
  645.  
  646. /*----- COMMON STYLES -----*/
  647.  
  648. .subtitle {
  649. font-family: '{select:title font}', serif;
  650. color: {color:title};
  651. text-transform: uppercase;
  652. letter-spacing: 0.15em;
  653. }
  654.  
  655. .subtitle a {color: {color:title};}
  656. .subtitle a:hover {color: {color:accent};}
  657.  
  658. .upper {
  659. font-size: 0.9em;
  660. text-transform: uppercase;
  661. letter-spacing: 0.12em;
  662. }
  663.  
  664. .icon {
  665. display: inline-block;
  666. border-radius: 50%;
  667. vertical-align: middle;
  668. padding: 5px;
  669. box-sizing: border-box;
  670. background-color: {color:icon background};
  671. }
  672.  
  673. .dots span {
  674. width: 4px;
  675. height: 4px;
  676. border-radius: 50%;
  677. margin: auto 2px !important;
  678. display: inline-block;
  679. }
  680.  
  681. .dots span:nth-child(3n + 1) {background-color: {color:dot one};}
  682. .dots span:nth-child(3n + 2) {background-color: {color:dot two};}
  683. .dots span:nth-child(3n) {background-color: {color:dot three};}
  684.  
  685. svg {color: {color:accent};}
  686.  
  687. .posts svg {
  688. display: inline-block;
  689. width: 1.25em;
  690. height: 1.25em;
  691. vertical-align: middle;
  692. }
  693.  
  694. /*----- CAPTION -----*/
  695.  
  696. .caption {
  697. list-style-type: none;
  698. border-bottom: 1px solid {color:borders};
  699. padding: 2.5em 0;
  700. }
  701.  
  702. .caption:last-of-type {border-bottom: none; padding-bottom: 0;}
  703. .caption li {text-align: left;}
  704.  
  705. .caption p {margin: 1em 0;}
  706. .caption p:last-of-type {margin-bottom: 0;}
  707. .ogcap p:first-of-type {margin-top: 0;}
  708. .body:first-of-type {padding-top: 0;}
  709. .caption iframe, .caption img {max-width: 100%;}
  710.  
  711. {block:ifCenteredText}
  712. .captext img {margin: 0 auto;}
  713. {/block:ifCenteredText}
  714.  
  715. .capicon {width: 2.5em; height: 2.5em;}
  716.  
  717. .username {
  718. font-size: 1em;
  719. {block:ifNotCenteredText}
  720. display: inline-block;
  721. margin-left: 0.75em;
  722. {/block:ifNotCenteredText}
  723. {block:ifCenteredText}
  724. margin-top: 0.75em;
  725. {block:ifCenteredText}
  726. }
  727.  
  728. .username a, .username a:hover {box-shadow: none;}
  729. .username a {color: {color:title};}
  730. .username a:hover {color: {color:accent};}
  731.  
  732. .deactive::after {
  733. content: '(deactivated)';
  734. margin-left: 1em;
  735. opacity: 0.75;
  736. color: {color:text};
  737. }
  738.  
  739. p.tmblr-attribution {margin-top: 1em !important;}
  740.  
  741. {block:ifHideCaption}{block:IndexPage}
  742. .hide-cap {display: none;}
  743. {/block:IndexPage}{/block:ifHideCaption}
  744.  
  745. /*----- TEXT -----*/
  746.  
  747. pre {
  748. line-height: inherit;
  749. font-size: inherit;
  750. white-space: pre-wrap;
  751. white-space: -moz-pre-wrap;
  752. white-space: -pre-wrap;
  753. white-space: -o-pre-wrap;
  754. word-wrap: break-word;
  755. }
  756.  
  757. a.read_more {
  758. text-transform: uppercase;
  759. letter-spacing: 0.15em;
  760. font-family: '{select:title font}', serif;
  761. color: {color:title};
  762. font-size: 1.15em;
  763. }
  764.  
  765. a.read_more:hover {color: {color:accent}}
  766. a.read_more, a.read_more:hover {box-shadow: none;}
  767.  
  768. p.read_more_container {margin: 2.5em 0; text-align: center;}
  769.  
  770. @font-face {
  771. font-family: Calluna;
  772. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  773. 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");
  774. font-weight: 700;
  775. font-style: italic
  776. }
  777.  
  778. @font-face {
  779. font-family: Fairwater;
  780. 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");
  781. font-weight: 400;
  782. font-style: normal
  783. }
  784.  
  785. p.npf_quirky {font-family: Fairwater; font-size: 1.75em;}
  786.  
  787. .npf_color_joey {color: #e57373;}
  788. .npf_color_monica {color: #ff8a65;}
  789. .npf_color_phoebe {color: #ffee58;}
  790. .npf_color_ross {color: #81c784;}
  791. .npf_color_rachel {color: #4fc3f7;}
  792. .npf_color_chandler {color: #9575cd;}
  793. .npf_color_niles {color: #f06292;}
  794.  
  795. #k {
  796. position: fixed;
  797. bottom: 20px;
  798. right: 20px;
  799. font-size: 15px;
  800. background-color: {color:background};
  801. color: {color:accent};
  802. padding: 5px 10px;
  803. border-radius: 3px;
  804. }
  805.  
  806. #k:hover {background-color: {color:accent}; color: {color:background};}
  807.  
  808. #m {
  809. text-align: center;
  810. display: none;
  811. margin-bottom: 50px;
  812. }
  813.  
  814. /*----- LINK -----*/
  815.  
  816. .linkp {
  817. color: {color:post content text};
  818. border: 1px solid {color:borders};
  819. -webkit-transition: all 0.5s;
  820. -moz-transition: all 0.5s;
  821. -ms-transition: all 0.5s;
  822. -o-transition: all 0.5s;
  823. transition: all 0.5s;
  824. }
  825.  
  826. .link {
  827. padding: 1.5em;
  828. background-color: {color:post content background};
  829. color: {color:post content text};
  830. -webkit-transition: all 0.5s;
  831. -moz-transition: all 0.5s;
  832. -ms-transition: all 0.5s;
  833. -o-transition: all 0.5s;
  834. transition: all 0.5s;
  835. }
  836.  
  837. {block:ifNotCenteredText}
  838. .linkp .title {text-align: left;}
  839. {/block:ifNotCenteredText}
  840. .link-txt {margin-top: 1.5em;}
  841.  
  842. .link-host {
  843. border-top: 1px solid {color:borders};
  844. background-color: {color:background};
  845. padding: 1.5em;
  846. -webkit-transition: all 0.5s;
  847. -moz-transition: all 0.5s;
  848. -ms-transition: all 0.5s;
  849. -o-transition: all 0.5s;
  850. transition: all 0.5s;
  851. }
  852.  
  853. .link-host svg {margin-right: 0.75em;}
  854.  
  855. .linkp:hover .link, .npf-link-block:hover {
  856. background-color: rgba({RGBcolor:accent}, 0.3);
  857. -webkit-transition: all 0.5s;
  858. -moz-transition: all 0.5s;
  859. -ms-transition: all 0.5s;
  860. -o-transition: all 0.5s;
  861. transition: all 0.5s;
  862. }
  863.  
  864. .linkp:hover .link-host {
  865. color: {color:title};
  866. background-color: {color:post content background};
  867. -webkit-transition: all 0.5s;
  868. -moz-transition: all 0.5s;
  869. -ms-transition: all 0.5s;
  870. -o-transition: all 0.5s;
  871. transition: all 0.5s;
  872. }
  873.  
  874. .npf-link-block {
  875. margin-top: 1.25em;
  876. border-radius: 0px;
  877. box-shadow: none;
  878. -webkit-transition: all 0.5s;
  879. -moz-transition: all 0.5s;
  880. -ms-transition: all 0.5s;
  881. -o-transition: all 0.5s;
  882. transition: all 0.5s;
  883. }
  884.  
  885. .npf-link-block {background-color: initial;}
  886. .npf-link-block .poster .title {background-color: initial; padding: 1.5em;}
  887. .npf-link-block.no-poster .title {padding: 1.5em 1.5em 0 1.5em;}
  888. .npf-link-block .title {font-size: 1.25em; border-bottom: none;}
  889. .npf-link-block .bottom {padding: 1.5em !important; color: {color:text};}
  890.  
  891. .npf-link-block .bottom .site-name {
  892. font-size: 0.9em;
  893. color: {color:text};
  894. font-weight: normal;
  895. letter-spacing: 0.12em;
  896. }
  897.  
  898. /*----- PHOTO -----*/
  899.  
  900. img {
  901. margin: 0;
  902. display: block;
  903. height: auto;
  904. max-width: 100%;
  905. }
  906.  
  907. .photo img {width: 100%;}
  908.  
  909. .vignette, #vignette {opacity: 0;}
  910. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba({RGBcolor:post content background}, 0.75) !important;}
  911.  
  912. .lightbox-image, #tumblr_lightbox img {
  913. box-shadow: none !important;
  914. border-radius: 0 !important;
  915. max-width: none;
  916. background-color: {color:background} !important;
  917. }
  918.  
  919. /*----- PHOTOSET -----*/
  920.  
  921. {block:ifPhotoBorder}
  922. .photo-border {
  923. background-color: {color:photo border};
  924. padding: 25px;
  925. box-sizing: border-box;
  926. }
  927. {/block:ifPhotoBorder}
  928.  
  929. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  930. margin-left: 0 !important;
  931. margin-right: 0 !important;
  932. }
  933.  
  934. .captext figure {margin: 1em 0;}
  935. .captext figure .tmblr-full {margin-top: {select:photoset gutter}px;}
  936. .tmblr-full:hover {cursor: pointer;}
  937. .npf_image, .tmblr-full {border: none; outline: none;}
  938.  
  939. .text-post .photo-slideshow.processed {margin-bottom: 2.5em;}
  940.  
  941. /*----- QUOTE -----*/
  942.  
  943. .quote, p.npf_quote {
  944. color: {color:title};
  945. font-family: '{select:title font}', serif;
  946. font-size: 1.5em;
  947. line-height: 140%;
  948. letter-spacing: 0.05em;
  949. }
  950.  
  951. .quote {margin-bottom: 0.5em;}
  952. .quote p:first-of-type {margin-top: 0;}
  953. .quote p:last-of-type {margin-bottom: 0;}
  954. .quote-wrap {text-align: center;}
  955.  
  956. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  957.  
  958. .source {margin-top: 1.25em;}
  959.  
  960. /*----- CHAT -----*/
  961.  
  962. .chat {padding: 0; margin: 0;}
  963. .chat li {list-style-type: none;}
  964.  
  965. .line {border: 1px solid {color:borders}; margin-top: 1em;}
  966. .line:first-of-type {margin-top: 0;}
  967. .line .subtitle {padding: 1em; border-bottom: 1px solid {color:borders};}
  968. .line .subtitle svg {margin-right: 0.75em;}
  969.  
  970. .line .chattxt {
  971. background-color: {color:post content background};
  972. padding: 1.5em;
  973. color: {color:post content text};
  974. }
  975.  
  976. .line .subtitle, .line .chattxt {box-sizing: border-box;}
  977.  
  978. p.npf_chat {font-family: inherit; margin-top: 1em;}
  979.  
  980. p.npf_chat b {
  981. color: {color:title};
  982. text-transform: uppercase;
  983. letter-spacing: 0.12em;
  984. font-family: '{select:title font}', serif;
  985. font-size: 0.9em;
  986. font-weight: normal;
  987. }
  988.  
  989. /*----- ANSWER -----*/
  990.  
  991. .askpost {border: 1px solid {color:borders};}
  992.  
  993. .question {
  994. box-sizing: border-box;
  995. border-top: 1px solid {color:borders};
  996. padding: 2em;
  997. }
  998.  
  999. .question p:first-of-type {margin-top: 0;}
  1000. .question p:last-of-type {margin-bottom: 0;}
  1001.  
  1002. .asker-wrap {
  1003. background-color: {color:post content background};
  1004. text-align: left;
  1005. color: {color:post content text};
  1006. }
  1007.  
  1008. .askpost .askicon {
  1009. width: 6em;
  1010. height: 6em;
  1011. box-sizing: border-box;
  1012. background-color: {color:background};
  1013. border-right: 1px solid {color:borders};
  1014. padding: 0.75em;
  1015. display: inline-block;
  1016. vertical-align: middle;
  1017. }
  1018.  
  1019. .asker-info {
  1020. display: inline-block;
  1021. padding: 1em 1.5em;
  1022. vertical-align: middle;
  1023. }
  1024.  
  1025. .askpost svg {margin-right: 0.75em;}
  1026.  
  1027. /*----- AUDIO -----*/
  1028.  
  1029. .audio-wrap {border: 1px solid {color:borders}; text-align: left;}
  1030.  
  1031. .album-art {
  1032. float: left;
  1033. display: inline-block;
  1034. width: 150px;
  1035. height: 150px;
  1036. }
  1037.  
  1038. .album-art img {
  1039. z-index: 1;
  1040. width: 150px;
  1041. height: 150px;
  1042. box-sizing: border-box;
  1043. padding: 1em;
  1044. border-right: 1px solid {color:borders};
  1045. }
  1046.  
  1047. .audioinfo {
  1048. position: relative;
  1049. height: 150px;
  1050. width: calc(100% - 150px);
  1051. text-align: center;
  1052. display: flex;
  1053. justify-content: center;
  1054. flex-direction: column;
  1055. box-sizing: border-box;
  1056. padding: 0 1.5em;
  1057. color: {color:post content text};
  1058. background-color: {color:post content background};
  1059. overflow: auto;
  1060. }
  1061.  
  1062. .button {
  1063. width: 30px;
  1064. height: 30px;
  1065. overflow: hidden;
  1066. position: relative;
  1067. z-index: 2;
  1068. margin: calc(60px - 1em);
  1069. }
  1070.  
  1071. .audiobox {
  1072. background-color: #f2f2f2;
  1073. z-index: 3;
  1074. position: absolute;
  1075. display: inline-block;
  1076. margin: 1em 0 0 1em;
  1077. padding: 0;
  1078. border: 1px solid {color:borders};
  1079. width: calc(150px - 2em - 2px);
  1080. height: calc(150px - 2em - 2px);
  1081. opacity: 0.2;
  1082. -webkit-transition: all 0.5s;
  1083. -moz-transition: all 0.5s;
  1084. -ms-transition: all 0.5s;
  1085. -o-transition: all 0.5s;
  1086. transition: all 0.5s;
  1087. }
  1088.  
  1089. .audiopost:hover .audiobox {
  1090. opacity: 0.9;
  1091. -webkit-transition: all 0.5s;
  1092. -moz-transition: all 0.5s;
  1093. -ms-transition: all 0.5s;
  1094. -o-transition: all 0.5s;
  1095. transition: all 0.5s;
  1096. }
  1097.  
  1098. .audioinfo li {list-style-type: none;}
  1099. .audioinfo .subtitle {font-size: 1.1em; margin-bottom: 0.25em;}
  1100.  
  1101. /*----- INFO -----*/
  1102.  
  1103. .info {margin-top: 2.5em; text-align: center; }
  1104.  
  1105. .main-info {
  1106. display: flex;
  1107. flex-direction: row;
  1108. align-items: center;
  1109. {block:IndexPage}
  1110. justify-content: space-between;
  1111. {/block:IndexPage}
  1112. {block:PermalinkPage}
  1113. justify-content: center;
  1114. {/block:PermalinkPage}
  1115. }
  1116.  
  1117. .main-info::before {
  1118. content: '';
  1119. display: block;
  1120. position: absolute;
  1121. width: 100%;
  1122. height: 1px;
  1123. background-color: {color:borders};
  1124. z-index: -1;
  1125. }
  1126.  
  1127. .info li {list-style-type: none; box-sizing: border-box;}
  1128. .main-info li a, .main-info li a:hover {box-shadow: none;}
  1129. .main-info li a:hover {color: {color:accent};}
  1130.  
  1131. .info .subtitle {font-size: 1em;}
  1132.  
  1133. .info-controls a, .permalinks {
  1134. display: inline-block;
  1135. background-color: {color:background};
  1136. box-sizing: border-box;
  1137. }
  1138.  
  1139. .permalinks {padding: 0 1.5em;}
  1140. .reblog-button {padding: 0 1.5em 0 0;}
  1141. .like-b {padding: 0 0 0 1.5em;}
  1142. .mid-icon a {padding: 0 1.5em;}
  1143.  
  1144. .info-controls a svg {
  1145. width: 1.5em;
  1146. height: 1.5em;
  1147. display: inline-block;
  1148. vertical-align: middle;
  1149. -webkit-transition: all 0.3s;
  1150. -moz-transition: all 0.3s;
  1151. -ms-transition: all 0.3s;
  1152. -o-transition: all 0.3s;
  1153. transition: all 0.3s;
  1154. }
  1155.  
  1156. .info-controls a:hover svg {
  1157. color: {color:title};
  1158. -webkit-transition: all 0.3s;
  1159. -moz-transition: all 0.3s;
  1160. -ms-transition: all 0.3s;
  1161. -o-transition: all 0.3s;
  1162. transition: all 0.3s;
  1163. }
  1164.  
  1165. .like-b {
  1166. position: relative;
  1167. display: inline-block;
  1168. height: 1em;
  1169. margin-bottom: -1px;
  1170. cursor: pointer;
  1171. }
  1172.  
  1173. .like-b .like_button iframe {
  1174. position: absolute;
  1175. top: 0;
  1176. left: 0;
  1177. bottom: 0;
  1178. right: 0;
  1179. z-index: 2;
  1180. opacity: 0.000001;
  1181. cursor: pointer;
  1182. }
  1183.  
  1184. .like_button iframe {width: 100% !important; height: 100% !important;}
  1185. .like-b .liked + .b {color: #d32f2f;}
  1186. .like-b .liked + .b .feather {fill: #d32f2f; color: #d32f2f;}
  1187.  
  1188. .reblog-info {text-transform: lowercase;}
  1189.  
  1190. .tags {
  1191. text-align: center;
  1192. font-style: italic;
  1193. text-transform: lowercase;
  1194. }
  1195.  
  1196. .tags .dots {margin: 0.5em auto 0.75em auto;}
  1197. .tags .dots span {margin: 0 3px !important;}
  1198.  
  1199. .tags a {margin-right: 1em; opacity: 0.9;}
  1200.  
  1201. .tags a svg {
  1202. width: 1em;
  1203. height: 1em;
  1204. margin-right: 0.15em;
  1205. vertical-align: middle;
  1206. -webkit-transform: rotate(5deg);
  1207. -moz-transform: rotate(5deg);
  1208. -ms-transition: rotate(5deg);
  1209. -o-transition: rotate(5deg);
  1210. transform: rotate(5deg);
  1211. }
  1212.  
  1213. .show-tags {display: block;}
  1214. .hide-tags {display: none;}
  1215.  
  1216. .hover-tags {
  1217. opacity: 0;
  1218. -webkit-transition: all 0.5s;
  1219. -moz-transition: all 0.5s;
  1220. -ms-transition: all 0.5s;
  1221. -o-transition: all 0.5s;
  1222. transition: all 0.5s;
  1223. }
  1224.  
  1225. .posts:hover .hover-tags {
  1226. opacity: 1.0;
  1227. -webkit-transition: all 0.5s;
  1228. -moz-transition: all 0.5s;
  1229. -ms-transition: all 0.5s;
  1230. -o-transition: all 0.5s;
  1231. transition: all 0.5s;
  1232. }
  1233.  
  1234. .pin-post {text-align: center; margin-bottom: 2.5em;}
  1235.  
  1236. .pin-post .subtitle {
  1237. font-size: 1.15em;
  1238. -webkit-transition: all 0.3s;
  1239. -moz-transition: all 0.3s;
  1240. -ms-transition: all 0.3s;
  1241. -o-transition: all 0.3s;
  1242. transition: all 0.3s;
  1243. }
  1244.  
  1245. .pin-post a:hover .subtitle {
  1246. color: {color:accent};
  1247. -webkit-transition: all 0.3s;
  1248. -moz-transition: all 0.3s;
  1249. -ms-transition: all 0.3s;
  1250. -o-transition: all 0.3s;
  1251. transition: all 0.3s;
  1252. }
  1253.  
  1254. .pin-post svg {
  1255. width: 1.5em;
  1256. height: 1.5em;
  1257. margin-right: 0.5em;
  1258. }
  1259.  
  1260. /*---- POST NOTES -----*/
  1261.  
  1262. .notes {margin: 100px 0;}
  1263.  
  1264. .notes .title {
  1265. border-bottom: 1px solid {color:borders};
  1266. padding-bottom: 1.5em;
  1267. font-size: 1.25em;
  1268. }
  1269.  
  1270. ol.notes {
  1271. list-style-type: none;
  1272. max-width: 100%;
  1273. padding: 0;
  1274. margin: 2em 0 0 0;
  1275. }
  1276.  
  1277. ol.notes li.note {padding: 0.15em; display: block;}
  1278. ol.notes li.note img.avatar {display: none;}
  1279.  
  1280. a.more_notes_link {
  1281. color: {color:title};
  1282. text-transform: uppercase;
  1283. letter-spacing: 0.15em;
  1284. font-family: '{select:title font}', serif;
  1285. }
  1286.  
  1287. a.more_notes_link, a.more_notes_link:hover {box-shadow: none;}
  1288. a.more_notes_link:hover {color: {color:accent};}
  1289. ol.notes li.note.more_notes_link_container {display: block; margin-top: 0.75em;}
  1290.  
  1291. /*---- PAGINATION -----*/
  1292.  
  1293. #pg {text-align: center;}
  1294.  
  1295. #pg a {margin: auto 0.75em; display: inline-block;}
  1296.  
  1297. #pg a svg {
  1298. width: 2em;
  1299. height: 2em;
  1300. display: inline-block;
  1301. vertical-align: middle;
  1302. background-color: rgba({RGBcolor:accent}, 0.2);
  1303. padding: 0.5em;
  1304. border-radius: 50%;
  1305. -webkit-transition: all 0.3s;
  1306. -moz-transition: all 0.3s;
  1307. -ms-transition: all 0.3s;
  1308. -o-transition: all 0.3s;
  1309. transition: all 0.3s;
  1310. }
  1311.  
  1312. #pg a:hover svg {
  1313. color: {color:background};
  1314. background-color: {color:accent};
  1315. -webkit-transition: all 0.3s;
  1316. -moz-transition: all 0.3s;
  1317. -ms-transition: all 0.3s;
  1318. -o-transition: all 0.3s;
  1319. transition: all 0.3s;
  1320. }
  1321.  
  1322. .slash {
  1323. color: {color:borders};
  1324. margin: auto 0.75em;
  1325. font-size: 1.5em;
  1326. display: inline-block;
  1327. vertical-align: middle;
  1328. }
  1329.  
  1330. #pg .dots {margin: 0.5em auto 1em auto;}
  1331. #pg .dots span {margin: 0 3px !important;}
  1332.  
  1333. .td-page .subtitle {color: {color:accent};}
  1334. .td-page .upper {color: {color:title};}
  1335.  
  1336. .td-page {
  1337. border-bottom: 1px solid {color:borders};
  1338. padding-bottom: 2em;
  1339. margin-bottom: 3em;
  1340. text-align: center;
  1341. }
  1342.  
  1343. .mobile-controls a {margin-left: 0.5em;}
  1344.  
  1345. /*---- RESPONSIVENESS -----*/
  1346.  
  1347. @media only screen and (max-width: 1279px) {
  1348. .sidebar aside {
  1349. position: relative;
  1350. height: auto;
  1351. width: 100%;
  1352. margin: 100px auto {text:post margin}px auto;
  1353. }
  1354.  
  1355. .sidebar aside #blog-info {width: 100%;}
  1356.  
  1357. #container.sidebar {
  1358. width: {select:post width};
  1359. }
  1360.  
  1361. .sidebar #posts-container {
  1362. margin: auto;
  1363. }
  1364. }
  1365.  
  1366. @media only screen and (max-width: 850px) {
  1367. #button-wrap {
  1368. height: 80px;
  1369. width: 100%;
  1370. text-align: left;
  1371. padding: 15px 20px;
  1372. border-bottom: 1px solid {color:borders};
  1373. border-right: none;
  1374. z-index: 50;
  1375. flex-direction: row;
  1376. }
  1377.  
  1378. .menu-button {padding-bottom: 0; display: inline-block;}
  1379.  
  1380. .dots.menu-dots {display: none;}
  1381. #button-wrap .vertical-dots {margin-left: 5px;}
  1382.  
  1383. #button-wrap .vertical-dots span, #button-wrap .vertical-dots {
  1384. display: inline-block;
  1385. }
  1386.  
  1387. #button-wrap .vertical-dots span {
  1388. margin: auto auto auto 5px;
  1389. }
  1390.  
  1391. #button-wrap .menu-button svg {
  1392. display: inline-block;
  1393. vertical-align: middle;
  1394. margin-top: 0;
  1395. }
  1396.  
  1397. #menu {
  1398. margin-top: 80px;
  1399. left: -100vw;
  1400. width: 100vw;
  1401. height: calc(100% - 80px);
  1402. }
  1403.  
  1404. #menu.show {left: 0;}
  1405.  
  1406. .sidebar aside, .main-header aside {margin-top: 150px;}
  1407.  
  1408. #container.sidebar, #container.main-header {width: 85vw;}
  1409.  
  1410. article {width: 100%;}
  1411.  
  1412. #btop {display: none;}
  1413. .mobile-controls {display: inline-block;}
  1414.  
  1415. #k {display: none;}
  1416. #m {display: block;}
  1417. }
  1418.  
  1419. @media only screen and (min-width: 851px) {
  1420. .mobile-controls {display: none;}
  1421. }
  1422.  
  1423. {CustomCSS}
  1424.  
  1425. </style>
  1426. </head>
  1427.  
  1428. <body class="load-in">
  1429.  
  1430. <!----- TUMBLR CONTROLS ----->
  1431.  
  1432. <div id="controls-icon">
  1433. <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-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
  1434. </div>
  1435.  
  1436. <!----- NAV MENU SIDEBAR ----->
  1437.  
  1438. <div class="dots menu-dots">
  1439. <span></span><span></span><span></span>
  1440. </div>
  1441.  
  1442. <div id="button-wrap">
  1443. <a class="menu-button" title="navigate">
  1444. <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-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
  1445. <div class="vertical-dots">
  1446. <span></span>
  1447. <span></span>
  1448. <span></span>
  1449. </div>
  1450. </a>
  1451.  
  1452. <div id="btop">
  1453. <a href="#top" title="back to top" target="_self">
  1454. <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-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
  1455. </a>
  1456. </div>
  1457.  
  1458. <div class="mobile-controls">
  1459. <a href="https://www.tumblr.com/follow/{Name}" title="follow"><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-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
  1460. <a href="https://www.tumblr.com/message/{Name}" title="message">
  1461. <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-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></a>
  1462. <a href="https://www.tumblr.com/dashboard" title="dashboard"><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-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg></a>
  1463. </div>
  1464.  
  1465. </div>
  1466.  
  1467. <!----- NAV MENU ----->
  1468.  
  1469. <div class="menu-fade"></div>
  1470.  
  1471. <div id="menu">
  1472. <div id="menu-heading">
  1473. <div class="title">navigation</div>
  1474. </div>
  1475.  
  1476. <div id="menu-content">
  1477. <nav>
  1478. {block:ifHomeLink}<li><a href="/">{text:Home Link}</a></li>{/block:ifHomeLink}
  1479. {block:AskEnabled}{block:ifAskLink}<li><a href="/ask">{text:Ask Link}</a></li>{/block:ifAskLink}{/block:AskEnabled}
  1480. {block:ifArchiveLink}<li><a href="/archive">{text:Archive Link}</li></a>{/block:ifArchiveLink}
  1481. {block:SubmissionsEnabled}{block:ifSubmitLink}<li><a href="/submit">{text:Submit Link}</a></li>{/block:ifSubmitLink}{/block:SubmissionsEnabled}
  1482. {block:ifLink1}<li><a href="{text:Link 1 URL}">{text:Link 1}</a></li>{/block:ifLink1}
  1483. {block:ifLink2}<li><a href="{text:Link 2 URL}">{text:Link 2}</a></li>{/block:ifLink2}
  1484. {block:ifLink3}<li><a href="{text:Link 3 URL}">{text:Link 3}</a></li>{/block:ifLink3}
  1485. {block:ifLink4}<li><a href="{text:Link 4 URL}">{text:Link 4}</a></li>{/block:ifLink4}
  1486. {block:ifLink5}<li><a href="{text:Link 5 URL}">{text:Link 5}</a></li>{/block:ifLink5}
  1487. {block:ifLink6}<li><a href="{text:Link 6 URL}">{text:Link 6}</a></li>{/block:ifLink6}
  1488. {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
  1489. </nav>
  1490.  
  1491. <form action="/search" method="get" class="find" name="sform">
  1492. <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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
  1493. <input type="text" name="q" placeholder="search" value="{SearchQuery}" value autocomplete="off" class="upper"/>
  1494. </form>
  1495. </div>
  1496.  
  1497. </div>
  1498.  
  1499. <!----- CONTAINER ----->
  1500.  
  1501. <section id="container" class="{select:Blog Info}">
  1502.  
  1503. <!----- SIDEBAR ----->
  1504.  
  1505. <aside>
  1506.  
  1507. <div id="blog-info">
  1508. {block:ifProfileImage}<a href="/"><img src="{image:Profile}" id="side-img"></a>{/block:ifProfileImage}
  1509. {block:ifShowBlogIcon}<img src="{PortraitURL-64}" class="icon">{/block:ifShowBlogIcon}
  1510. <div class="title"><a href="/">{Title}</a></div>
  1511.  
  1512. <div id="desc-stats" class="upper">
  1513. {block:ifStat1}<li><i data-feather="{text:Stat 1 Icon}"></i>{text:Stat 1}</li>{/block:ifStat1}
  1514. {block:ifStat2}<li><i data-feather="{text:Stat 2 Icon}"></i>{text:Stat 2}</li>{/block:ifStat2}
  1515. </div>
  1516.  
  1517. <div class="dots">
  1518. <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  1519. </div>
  1520. {block:Description}<div id="description">{Description}</div>{/block:Description}
  1521. </div>
  1522.  
  1523. </aside>
  1524.  
  1525. <!----- POSTS ----->
  1526.  
  1527. <div id="posts-container">
  1528.  
  1529. {block:TagPage}
  1530. <div class="td-page">
  1531. <span class="upper">{TotalPages} pages</span> of posts filed under <span class="subtitle">#{Tag}</span>
  1532. </div>
  1533. {/block:TagPage}
  1534.  
  1535. {block:DayPage}
  1536. <div class="td-page">
  1537. Viewing posts made on <span class="subtitle">{Month} {DayOfMonth}, {Year}</span>
  1538. </div>
  1539. {/block:DayPage}
  1540.  
  1541. {block:SearchPage}
  1542. <article class="tag-page">
  1543. {lang:Found SearchResultCount results for SearchQuery}
  1544. </article>
  1545. {/block:SearchPage}
  1546.  
  1547. {block:Posts inlineMediaWidth="1280"}
  1548. <article class="posts {block:Audio}audiopost{/block:Audio}" id="{PostID}">
  1549.  
  1550. {block:PinnedPostLabel}
  1551. <div class="pin-post">
  1552. <a href="{Permalink}">
  1553. <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>
  1554. <span class="subtitle">{PinnedPostLabel}</span>
  1555. </a>
  1556. </div>
  1557. {/block:PinnedPostLabel}
  1558.  
  1559. <!----- POST TYPES ----->
  1560.  
  1561. {block:Text}
  1562. <div class="text-post">
  1563. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1564. {block:NotReblog}
  1565. <li class="caption ogcap body">
  1566. <div class="captext">{Body}</div>
  1567. </li>
  1568. {/block:NotReblog}
  1569. {block:RebloggedFrom}{block:Reblogs}
  1570. <li class="caption rbcap body">
  1571. <img src="{PortraitURL-64}" class="capicon icon">
  1572. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1573. <div class="captext">{Body}</div>
  1574. </li>
  1575. {/block:Reblogs}{/block:RebloggedFrom}
  1576. </div>
  1577. {/block:Text}
  1578.  
  1579. {block:Link}
  1580. <a href="{URL}"><div class="linkp">
  1581. <div class="link">
  1582. <div class="title">{Name}</div>
  1583. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1584. </div>
  1585. {block:Host}<div class="link-host upper"><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-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>{Host}</div>{/block:Host}
  1586. </div></a>
  1587. {block:Description}
  1588. {block:NotReblog}
  1589. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1590. <div class="captext">{Description}</div>
  1591. </li>
  1592. {/block:NotReblog}
  1593. {/block:Description}
  1594. {block:RebloggedFrom}
  1595. {block:Reblogs}
  1596. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1597. <img src="{PortraitURL-64}" class="capicon icon">
  1598. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1599. <div class="captext">{Body}</div>
  1600. </li>
  1601. {/block:Reblogs}
  1602. {/block:RebloggedFrom}
  1603. {/block:Link}
  1604.  
  1605. {block:Photo}
  1606. <div class="photo photo-border">
  1607. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  1608. </div>
  1609. {block:Caption}
  1610. {block:NotReblog}
  1611. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1612. <div class="captext">{Caption}</div>
  1613. </li>
  1614. {/block:NotReblog}
  1615. {block:Reblogs}
  1616. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1617. <img src="{PortraitURL-64}" class="capicon icon">
  1618. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1619. <div class="captext">{Body}</div>
  1620. </li>
  1621. {/block:Reblogs}
  1622. {/block:Caption}
  1623. {/block:Photo}
  1624.  
  1625. {block:Panorama}
  1626. <div class="photo">
  1627. {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">{LinkCloseTag}
  1628. </div>
  1629. {block:Caption}
  1630. {block:NotReblog}
  1631. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1632. <div class="captext">{Caption}</div>
  1633. </li>
  1634. {/block:NotReblog}
  1635. {block:Reblogs}
  1636. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1637. <img src="{PortraitURL-64}" class="capicon icon">
  1638. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1639. <div class="captext">{Body}</div>
  1640. </li>
  1641. {/block:Reblogs}
  1642. {/block:Caption}
  1643. {/block:Panorama}
  1644.  
  1645. {block:Photoset}
  1646. <div class="photo-border">
  1647. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" alt="{PhotoAlt}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1648. </div>
  1649. {block:Caption}
  1650. {block:NotReblog}
  1651. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1652. <div class="captext">{Caption}</div>
  1653. </li>
  1654. {/block:NotReblog}
  1655. {block:Reblogs}
  1656. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1657. <img src="{PortraitURL-64}" class="capicon icon">
  1658. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1659. <div class="captext">{Body}</div>
  1660. </li>
  1661. {/block:Reblogs}
  1662. {/block:Caption}
  1663. {/block:Photoset}
  1664.  
  1665. {block:Video}
  1666. <div class="video">{Video-700}</div>
  1667. {block:Caption}
  1668. {block:NotReblog}
  1669. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1670. <div class="captext">{Caption}</div>
  1671. </li>
  1672. {/block:NotReblog}
  1673. {block:Reblogs}
  1674. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1675. <img src="{PortraitURL-64}" class="capicon icon">
  1676. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1677. <div class="captext">{Body}</div>
  1678. </li>
  1679. {/block:Reblogs}
  1680. {/block:Caption}
  1681. {/block:Video}
  1682.  
  1683. {block:Quote}
  1684. <div class="quote-wrap">
  1685. <div class="quote">{Quote}</div>
  1686. <div class="dots">
  1687. <span></span>
  1688. <span></span>
  1689. <span></span>
  1690. <span></span>
  1691. <span></span>
  1692. </div>
  1693. {block:Source}<div class="source upper">{Source}</div>{/block:Source}
  1694. </div>
  1695. {/block:Quote}
  1696.  
  1697. {block:Chat}
  1698. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1699. <ul class="chat">{block:Lines}
  1700. <li class="line">
  1701. {block:Label}<div class="subtitle"><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-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>{Label}</div>{/block:Label}
  1702. <div class="chattxt">{Line}</div>
  1703. </li>
  1704. {/block:Lines}</ul>
  1705. {/block:Chat}
  1706.  
  1707. {block:Answer}
  1708. <div class="askpost">
  1709. <div class="asker-wrap upper">
  1710. <img src="{AskerPortraitURL-96}" class="askicon">
  1711. <div class="asker-info">
  1712. <div class="subtitle">{Asker}</div>
  1713. <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-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
  1714. sent a message
  1715. </div>
  1716. </div>
  1717. <div class="question">{Question}</div>
  1718. </div>
  1719. {block:Answerer}
  1720. <li class="caption rbcap">
  1721. <img src="{AnswererPortraitURL-64}" class="capicon icon">
  1722. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1723. <div class="captext">{Answer}</div>
  1724. </li>
  1725. {/block:Answerer}
  1726. {block:NotReblog}
  1727. <li class="caption ogcap">
  1728. <div class="captext">{Replies}</div>
  1729. </li>
  1730. {/block:NotReblog}
  1731. {block:RebloggedFrom}{block:Reblogs}
  1732. <li class="caption rbcap">
  1733. <img src="{PortraitURL-64}" class="capicon icon">
  1734. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1735. <div class="captext">{Body}</div>
  1736. </li>
  1737. {/block:Reblogs}{/block:RebloggedFrom}
  1738. {/block:Answer}
  1739.  
  1740. {block:Audio}
  1741. <div class="audio-wrap">
  1742. <div class="album-art">
  1743. <div class="audiobox"><div class="button">
  1744. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1745. </div></div>
  1746. {block:AlbumArt}
  1747. <img src="{AlbumArtURL}">
  1748. {/block:AlbumArt}
  1749. </div>
  1750. <div class="audioinfo">
  1751. {block:TrackName}<li class="subtitle">{TrackName}</li>{/block:TrackName}
  1752. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1753. </div>
  1754. </div>
  1755. {block:Caption}
  1756. {block:NotReblog}
  1757. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1758. <div class="captext">{Caption}</div>
  1759. </li>
  1760. {/block:NotReblog}
  1761. {block:Reblogs}
  1762. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1763. <img src="{PortraitURL-64}" class="capicon icon">
  1764. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1765. <div class="captext">{Body}</div>
  1766. </li>
  1767. {/block:Reblogs}
  1768. {/block:Caption}
  1769. {/block:Audio}
  1770.  
  1771. <!----- INFO ----->
  1772.  
  1773. {block:Date}
  1774. <div class="info">
  1775.  
  1776. <div class="main-info">
  1777. {block:IndexPage}<div class="info-controls"><a href="{ReblogURL}" title="reblog" target="_blank" class="reblog-button"><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-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg></a></div>{/block:IndexPage}
  1778.  
  1779. {block:ifNotMinimalPostInfo}
  1780. {block:IndexPage}<div class="permalinks">
  1781. <li><a href="{Permalink}" class="notecount subtitle">{NoteCountWithLabel}</a></li>
  1782. {block:ifShowDate}<li><a href="{Permalink}" class="upper">{Month} {DayOfMonth}{DayOfMonthSuffix}</a></li>{/block:ifShowDate}
  1783. </div>{/block:IndexPage}
  1784. {/block:ifNotMinimalPostInfo}
  1785.  
  1786. {block:ifMinimalPostInfo}
  1787. {block:IndexPage}
  1788. {block:ifShowDate}<div class="info-controls mid-icon">
  1789. <a href="{Permalink}" title="{Month} {DayOfMonth}{DayOfMonthSuffix}"><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-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></a>
  1790. </div>{/block:ifShowDate}
  1791. <div class="info-controls mid-icon">
  1792. <a href="{Permalink}" title="{NoteCountWithLabel}"><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-bookmark"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg></a>
  1793. </div>
  1794. {/block:IndexPage}
  1795. {/block:ifMinimalPostInfo}
  1796.  
  1797. {block:PermalinkPage}<div class="permalinks">
  1798. <li class="subtitle">{TimeAgo} on {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</li>
  1799. </div>{/block:PermalinkPage}
  1800.  
  1801. {block:IndexPage}<div class="info-controls"><a class="like-b" href="#" title="like">{LikeButton}<span class="b"><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-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></span></a></div>{/block:IndexPage}
  1802. </div>
  1803.  
  1804. <div class="reblog-info">
  1805. {block:PermalinkPage}
  1806. {block:RebloggedFrom}
  1807. <li>{lang:Reblogged from} <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
  1808. <li>{lang:Originally from ReblogRootName 2}</li>
  1809. {/block:RebloggedFrom}
  1810. {block:ContentSource}<li>{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
  1811. {/block:PermalinkPage}
  1812. </div>
  1813. </div>
  1814. {/block:Date}
  1815.  
  1816. {block:HasTags}
  1817. <div class="tags {block:IndexPage}{select:tags}{/block:IndexPage}">
  1818. <div class="dots">
  1819. <span></span><span></span><span></span>
  1820. </div>
  1821. {block:Tags}<a href="{TagURL}"><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-hash"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>{Tag}</a>{/block:Tags}
  1822. </div>
  1823. {/block:HasTags}
  1824.  
  1825. <!----- POST NOTES ----->
  1826.  
  1827. {block:PermalinkPage}{block:Date}{block:PostNotes}
  1828. <div class="notes">
  1829. {block:NoteCount}<div class="title">{NoteCountWithLabel}</div>{/block:NoteCount}
  1830. {PostNotes}
  1831. </div>
  1832. {/block:PostNotes}{/block:Date}{/block:PermalinkPage}
  1833.  
  1834. </article>
  1835. {/block:Posts}
  1836.  
  1837. <!----- PAGINATION ----->
  1838.  
  1839. {block:Pagination}
  1840. <article id="pg">
  1841. {block:PreviousPage}<a href="{PreviousPage}" title="previous page"><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-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>{/block:PreviousPage}
  1842. {block:PreviousPage}<div class="slash">/</div>{/block:PreviousPage}
  1843. {block:NextPage}<a href="{NextPage}" title="next page"><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-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>{/block:NextPage}
  1844. <div class="dots">
  1845. <span></span><span></span><span></span>
  1846. </div>
  1847. <div class="upper">
  1848. on page {CurrentPage} of {TotalPages}
  1849. </div>
  1850. </article>
  1851. {/block:Pagination}
  1852.  
  1853. </div>
  1854.  
  1855. </section>
  1856.  
  1857. <a href="https://seyche.tumblr.com" title="rosemary theme by seyche" id="k">&.</a>
  1858.  
  1859. <a href="https://seyche.tumblr.com" id="m" class="upper">rosemary theme by seyche</a>
  1860.  
  1861. <!----- PHOTOSETS ----->
  1862.  
  1863. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1864. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1865.  
  1866. <!----- TOOLTIPS ----->
  1867.  
  1868. <script src="https://unpkg.com/popper.js@1"></script>
  1869. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1870.  
  1871. <!----- VIDEO RESIZING ----->
  1872.  
  1873. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  1874.  
  1875. <!----- NOTECOUNT ----->
  1876.  
  1877. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  1878.  
  1879. <!----- SCRIPTS ----->
  1880.  
  1881. <script>
  1882.  
  1883. /// PHOTOSETS
  1884.  
  1885. $(document).ready(function(){
  1886. $('.photo-slideshow').pxuPhotoset({
  1887. lightbox: true,
  1888. rounded: false,
  1889. gutter: '{select:photoset gutter}px',
  1890. photoset: '.photo-slideshow',
  1891. photoWrap: '.photo-data',
  1892. photo: '.pxu-photo'
  1893. });
  1894.  
  1895. npfPhotosets(".posts", {
  1896. rowClass:"npf_row",
  1897. imageContainerClass:"tmblr-full",
  1898. generatedPhotosetContainerClass:"npf_photoset",
  1899. imageClass:"npf_image",
  1900. includeCommonPhotosets: false,
  1901. useTumblrLightbox: true,
  1902. insertGalleryIndicator: false,
  1903. galleryIndicatorClass: "npf_gallery_indicator",
  1904. galleryIndicatorContent: "<img src='image_url'>",
  1905. photosetMargins:"{select:photoset gutter}"
  1906. });
  1907.  
  1908. /// SLIDE-IN NAV
  1909.  
  1910. $('.menu-fade').hide();
  1911. $('.menu-button, .menu-fade').click(function(event) {
  1912. $('#menu').toggleClass('show')
  1913. event.preventDefault();
  1914. $('.menu-button').toggleClass('menu-click');
  1915. $('.menu-fade').fadeToggle(750);
  1916. });
  1917.  
  1918. /// NOTECOUNT
  1919.  
  1920. $('.posts').find('.notecount').each(function(){
  1921. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1922. if (n > 999) {
  1923. n = Math.floor(n / 100) / 10;
  1924. $(this).text(n + 'k notes');
  1925. }
  1926. });
  1927.  
  1928. /// SCROLL TO TOP
  1929.  
  1930. $('#btop').click(function(){
  1931. $('html, body').animate({scrollTop : 0},800);
  1932. return false;
  1933. });
  1934.  
  1935. /// REMOVE REDIRECTS
  1936.  
  1937. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1938. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1939. var replaceURL = decodeURIComponent(originalURL);
  1940. $(this).attr("href", replaceURL);
  1941. });
  1942.  
  1943. });
  1944.  
  1945. /// TOOLTIPS
  1946.  
  1947. tippy('[title]', {
  1948. theme: 'custom',
  1949. arrow: false,
  1950. followCursor: true,
  1951. delay: 100,
  1952. placement: 'bottom-start',
  1953. zIndex: 9999999999,
  1954. maxWidth: 400,
  1955.  
  1956. content(reference) {
  1957. const title = reference.getAttribute('title');
  1958. reference.removeAttribute('title');
  1959. return title;
  1960. },
  1961. });
  1962.  
  1963. /// RESPONSIVE VIDEOS
  1964.  
  1965. function flexFrame() {
  1966. $(".caption").each(function() {
  1967. $(this).find(".embed_iframe").wrap("<div class='capframe'></div>");
  1968. flexibleFrames($(".capframe"));
  1969. });
  1970. flexibleFrames($(".video"));
  1971. }
  1972. $(document).ready(flexFrame);
  1973.  
  1974. feather.replace()
  1975.  
  1976. </script>
  1977.  
  1978.  
  1979. </body>
  1980. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!