API tools faq
paste
Advertisement
seiche

theme thirteen: zinnia

seiche
Sep 30th, 2021 (edited)
11,475
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 63.13 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. ZINNIA THEME BY SEYCHE.TUMBLR.COM
  15.  
  16. CREDITS:
  17. -material icons by Google: https://fonts.google.com/icons?selected=Material+Icons
  18. -pxu photosets by pixel union / with modifications by bychloethemes: https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  19. -tippy.js tooltips by atomiks: https://atomiks.github.io/tippyjs/
  20. -notecount shortening by shythemes: https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
  21. -responsive videos by nouvae: https://www.tumblr.com/blog/view/nouvae/176815415055
  22. -npf photosets by codematurgy: https://codematurgy.tumblr.com/post/179837255439/npfphotosets-plugin
  23. (full list of credits @ seyche.tumblr.com/credits
  24.  
  25. --->
  26.  
  27. <link rel="preconnect" href="https://fonts.googleapis.com">
  28. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  29. <link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Barlow:ital,wght@0,400;0,700;1,400;1,700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Mulish: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=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Spectral:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  30.  
  31. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  32.  
  33. <!----- PHOTOSETS ----->
  34.  
  35. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  36.  
  37. <link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  38.  
  39. <!----- VARIABLES ----->
  40.  
  41. <meta name="image:Sidebar" content=""/>
  42.  
  43. <meta name="color:Background" content="#f2f2f2"/>
  44. <meta name="color:Posts" content="#fff"/>
  45. <meta name="color:Text" content="#555555"/>
  46. <meta name="color:Link" content="#848484"/>
  47. <meta name="color:Link Hover" content="#212121"/>
  48. <meta name="color:Accent" content="#83bfe4"/>
  49. <meta name="color:Borders" content="#e0e0e0"/>
  50. <meta name="color:Drop Shadow" content="#e5e5e5"/>
  51. <meta name="color:Title" content="#121212"/>
  52. <meta name="color:Nav Background" content="#212121"/>
  53. <meta name="color:Nav Links" content="#d5d5d5"/>
  54. <meta name="color:Nav Title" content="#fff"/>
  55.  
  56. <meta name="select:Body Font" content="Overpass" title="Overpass"/>
  57. <meta name="select:Body Font" content="Karla" title="Karla"/>
  58. <meta name="select:Body Font" content="Mulish" title="Mulish"/>
  59. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  60. <meta name="select:Body Font" content="Roboto" title="Roboto"/>
  61. <meta name="select:Body Font" content="ABeeZee" title="ABeeZee"/>
  62. <meta name="select:Body Font" content="Barlow" title="Barlow"/>
  63. <meta name="select:Body Font" content="Work Sans" title="Work Sans"/>
  64. <meta name="select:Body Font" content="Lora" title="Lora"/>
  65. <meta name="select:Body Font" content="Spectral" title="Spectral"/>
  66.  
  67. <meta name="select:Title Font" content="Montserrat" title="Montserrat"/>
  68. <meta name="select:Title Font" content="Playfair Display" title="Playfair Display"/>
  69. <meta name="select:Title Font" content="Libre Baskerville" title="Libre Baskerville"/>
  70. <meta name="select:Title Font" content="Lora" title="Lora"/>
  71. <meta name="select:Title Font" content="Roboto" title="Roboto"/>
  72.  
  73. <meta name="select:Sidebar Position" content="left-sidebar" title="Left"/>
  74. <meta name="select:Sidebar Position" content="right-sidebar" title="Right"/>
  75.  
  76. <meta name="select:Font Size" content="15px" title="15px"/>
  77. <meta name="select:Font Size" content="12px" title="12px"/>
  78. <meta name="select:Font Size" content="13px" title="13px"/>
  79. <meta name="select:Font Size" content="14px" title="14px"/>
  80. <meta name="select:Font Size" content="16px" title="16px"/>
  81. <meta name="select:Font Size" content="17px" title="17px"/>
  82. <meta name="select:Font Size" content="18px" title="18px"/>
  83.  
  84. <meta name="select:Post Width" content="540px" title="540px"/>
  85. <meta name="select:Post Width" content="400px" title="400px"/>
  86. <meta name="select:Post Width" content="450px" title="450px"/>
  87. <meta name="select:Post Width" content="500px" title="500px"/>
  88. <meta name="select:Post Width" content="600px" title="600px"/>
  89. <meta name="select:Post Width" content="650px" title="650px"/>
  90.  
  91. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  92. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  93. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  94. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  95.  
  96. <meta name="if:Show Icon" content="0"/>
  97. <meta name="if:Updates Tab" content="0"/>
  98. <meta name="if:Solid Posts" content="0"/>
  99. <meta name="if:Rounded Corners" content="1"/>
  100. <meta name="if:Tags On Click" content="0"/>
  101. <meta name="if:Show Reblog Info" content="0"/>
  102. <meta name="if:Hide Caption" content="0"/>
  103.  
  104. <meta name="text:Post Margin" content="150"/>
  105.  
  106. <meta name="text:Home Link" content="home"/>
  107. <meta name="text:Ask Link" content="ask"/>
  108. <meta name="text:Archive Link" content="archive"/>
  109. <meta name="text:Link 1 URL" content="" />
  110. <meta name="text:Link 1" content="" />
  111. <meta name="text:Link 2 URL" content="" />
  112. <meta name="text:Link 2" content="" />
  113. <meta name="text:Link 3 URL" content="" />
  114. <meta name="text:Link 3" content="" />
  115. <meta name="text:Link 4 URL" content="" />
  116. <meta name="text:Link 4" content="" />
  117.  
  118. <meta name="text:Update Text" content=""/>
  119. <meta name="text:Watching" content=""/>
  120. <meta name="text:Reading" content=""/>
  121. <meta name="text:Listening To" content=""/>
  122. <meta name="text:Playing" content=""/>
  123.  
  124. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  125.  
  126. <!----- LOAD IN ----->
  127.  
  128. <script>
  129. $(document).ready(function(){
  130. $(function() {
  131. $('body').removeClass('load-in');
  132. });
  133. });
  134. </script>
  135.  
  136. <style type="text/css">
  137.  
  138. body {
  139. font-family: '{select:body font}', sans-serif;
  140. font-size: {select:font size};
  141. color: {color:text};
  142. background-color: {color:background};
  143. text-align: left;
  144. line-height: 160%;
  145. word-wrap: break-word;
  146. letter-spacing: 0.04em;
  147. overflow-x: hidden;
  148. opacity: 1.0;
  149. -webkit-transition: 2s opacity;
  150. -moz-transition: 2s opacity;
  151. -ms-transition: 2s opacity;
  152. -o-transition: 2s opacity;
  153. transition: 2s opacity;
  154. }
  155.  
  156. body.load-in {
  157. opacity: 0;
  158. -webkit-transition: none;
  159. -moz-transition: none;
  160. -ms-transition: none;
  161. -o-transition: none;
  162. transition: none;
  163. }
  164.  
  165. a {
  166. color: {color:link};
  167. text-decoration: none;
  168. cursor: pointer;
  169. -webkit-transition: all 0.3s;
  170. -moz-transition: all 0.3s;
  171. -ms-transition: all 0.3s;
  172. -o-transition: all 0.3s;
  173. transition: all 0.3s;
  174. }
  175.  
  176. a:hover {
  177. color: {color:accent};
  178. -webkit-transition: all 0.3s;
  179. -moz-transition: all 0.3s;
  180. -ms-transition: all 0.3s;
  181. -o-transition: all 0.3s;
  182. transition: all 0.3s;
  183. }
  184.  
  185. p a, .posts li a {
  186. border-bottom: 2px solid rgba({RGBcolor:accent}, 0.75);
  187. display: inline-block;
  188. position: relative;
  189. padding: 2px 2px 0 2px;
  190. z-index: 1;
  191. -webkit-transition: all 0.4s;
  192. -moz-transition: all 0.4s;
  193. -ms-transition: all 0.4s;
  194. -o-transition: all 0.4s;
  195. transition: all 0.4s;
  196. }
  197.  
  198. p a::before, .posts li a::before {
  199. content: '';
  200. position: absolute;
  201. top: 0;
  202. left: 0;
  203. height: 100%;
  204. width: 100%;
  205. box-sizing: border-box;
  206. padding: 2px 2px 0 2px;
  207. background-color: rgba({RGBcolor:accent}, 0.3);
  208. z-index: -1;
  209. transform: scaleX(0) scaleY(1);
  210. transform-origin: left center;
  211. -webkit-transition: all 0.4s;
  212. -moz-transition: all 0.4s;
  213. -ms-transition: all 0.4s;
  214. -o-transition: all 0.4s;
  215. transition: all 0.4s;
  216. }
  217.  
  218. p a:hover::before, .posts li a:hover::before {transform: scaleX(1) scaleY(1);}
  219. p a:hover, .posts li a:hover {color: {color:title}; border-bottom: 2px solid rgba({RGBcolor:accent}, 1.0);}
  220.  
  221. blockquote {
  222. padding: 0 0 0 1.25em;
  223. border-left: 1px solid {color:borders};
  224. margin: 1.25em 0 1.25em 1.25em;
  225. }
  226.  
  227. h1, h2, h3, h4, h5 {
  228. color: {color:title};
  229. letter-spacing: 0.1em;
  230. line-height: 140%;
  231. font-family: '{select:title font}', serif;
  232. font-weight: bold;
  233. text-transform: uppercase;
  234. }
  235.  
  236. h1 a, h2 a, h3 a, h4 a, h5 a {color: {color:title};}
  237. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {color: {color:accent}}
  238. h1 {font-size: 1.5em;}
  239. h2 {font-size: 1.3em;}
  240. h3 {font-size: 1.25em;}
  241. h4 {font-size: 1.1em;}
  242. h5 {font-size: 1em;}
  243.  
  244. small {font-size: 0.9em;}
  245. big {font-size: 1.1em;}
  246. b, bold, strong {color: {color:title};}
  247. b a, bold a, strong a {color: {color:link};}
  248. b a:hover, bold a:hover, strong a:hover {color: {color:accent};}
  249.  
  250. .tippy-tooltip.custom-theme {
  251. background-color: {color:posts};
  252. color: {color:title};
  253. {block:ifRoundedCorners}border-radius: 6px;{/block:ifRoundedCorners}
  254. {block:ifNotRoundedCorners}border-radius: 0;{/block:ifNotRoundedCorners}
  255. {block:ifSolidPosts}box-shadow: 1px 1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75), -1px -1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75);{/block:ifSolidPosts}
  256. {block:ifNotSolidPosts}border: 1px solid {color:borders};{/block:ifNotSolidPosts}
  257. text-align: center;
  258. font-family: inherit;
  259. font-weight: normal;
  260. text-transform: uppercase;
  261. letter-spacing: 0.1em;
  262. font-style: normal;
  263. padding: 0.25em;
  264. margin: 20px auto auto 10px;
  265. font-size: 0.8em;
  266. }
  267.  
  268. ::-webkit-scrollbar {
  269. width: 8px;
  270. height: 20px;
  271. background-color: {color:background};
  272. }
  273.  
  274. ::-webkit-scrollbar-track {background-color: {color:background}; border-radius: 20px;}
  275.  
  276. ::-webkit-scrollbar-thumb {
  277. background-color: {color:title};
  278. min-height: 35px;
  279. min-width: 35px;
  280. border-radius: 10px;
  281. }
  282.  
  283. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  284. z-index: 999999999!important;
  285. opacity: 0;
  286. transform: scale(0.9);
  287. transform-origin: 100% 0;
  288. margin-top: 0.25em;
  289. padding-right: 2.75em;
  290. -webkit-transform: scale(0.9);
  291. -webkit-transform-origin: 100% 0;
  292. -o-transform: scale(0.9);
  293. -o-transform-origin: 100% 0;
  294. -moz-transform: scale(0.9);
  295. -moz-transform-origin: 100% 0;
  296. -ms-transform: scale(0.9);
  297. -ms-transform-origin: 100% 0;
  298. -webkit-transition: all 0.5s;
  299. -moz-transition: all 0.5s;
  300. -ms-transition: all 0.5s;
  301. -o-transition: all 0.5s;
  302. transition: all 0.5s;
  303. }
  304.  
  305. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  306. opacity: 1.0;
  307. -webkit-transition: all 0.5s;
  308. -moz-transition: all 0.5s;
  309. -ms-transition: all 0.5s;
  310. -o-transition: all 0.5s;
  311. transition: all 0.5s;
  312. }
  313.  
  314. .iframe-controls--phone-mobile {display: none!important;}
  315. .tmblr-iframe-pushdown {padding-top: 0!important;}
  316. .tmblr-iframe--app-cta-button {display: none!important;}
  317.  
  318. /*----- COMMON -----*/
  319.  
  320. .title {
  321. font-family: '{select:title font}', serif;
  322. font-size: 1.75em;
  323. text-transform: uppercase;
  324. letter-spacing: 0.1em;
  325. line-height: 150%;
  326. color: {color:title};
  327. font-weight: bold;
  328. }
  329.  
  330. .title a {color: {color:title};}
  331. .title a:hover {color: {color:accent};}
  332.  
  333. .icon {
  334. display: inline-block;
  335. vertical-align: middle;
  336. {block:ifRoundedCorners}border-radius: 6px;{/block:ifRoundedCorners}
  337. }
  338.  
  339. .upper {
  340. text-transform: uppercase;
  341. letter-spacing: 0.1em;
  342. font-size: 0.9em;
  343. }
  344.  
  345. .subtitle {
  346. text-transform: uppercase;
  347. letter-spacing: 0.1em;
  348. font-size: 0.9em;
  349. font-family: '{select:title font}', serif;
  350. font-weight: bold;
  351. }
  352.  
  353. .navbg {
  354. box-sizing: border-box;
  355. padding: 2em;
  356. background-color: {color:nav background};
  357. color: {color:nav links};
  358. {block:ifNotSolidPosts}
  359. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  360. {/block:ifNotSolidPosts}
  361. }
  362.  
  363. .navbg a {color: {color:nav links};}
  364. .navbg a:hover {color: {color:accent};}
  365.  
  366. .navbg .title, .navbg .subtitle, .navbg.subtitle {color: {color:nav title};}
  367.  
  368. {block:ifSolidPosts}
  369. .infobg {
  370. box-sizing: border-box;
  371. padding: 2em;
  372. background-color: {color:nav background};
  373. color: {color:nav links};
  374. }
  375.  
  376. .infobg a {color: {color:nav links};}
  377. .infobg a:hover {color: {color:accent};}
  378. {/block:ifSolidPosts}
  379.  
  380. .padding {padding: 2em;}
  381.  
  382. .align-flex {
  383. display: flex;
  384. flex-direction: row;
  385. justify-content: space-between;
  386. align-items: center;
  387. }
  388.  
  389. a svg {
  390. -webkit-transition: all 0.3s;
  391. -moz-transition: all 0.3s;
  392. -ms-transition: all 0.3s;
  393. -o-transition: all 0.3s;
  394. transition: all 0.3s;
  395. }
  396.  
  397. a:hover svg {
  398. -webkit-transition: all 0.3s;
  399. -moz-transition: all 0.3s;
  400. -ms-transition: all 0.3s;
  401. -o-transition: all 0.3s;
  402. transition: all 0.3s;
  403. }
  404.  
  405. /*----- SIDEBAR -----*/
  406.  
  407. aside {
  408. position: fixed;
  409. top: 125px;
  410. width: 225px;
  411. }
  412.  
  413. .right-sidebar aside {margin-left: calc({select:post width} + 125px);}
  414.  
  415. .sidebar {
  416. width: 100%;
  417. overflow: hidden;
  418. {block:ifSolidPosts}
  419. background-color: {color:posts};
  420. box-shadow: 1px 1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75), -1px -1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75);
  421. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  422. {/block:ifSolidPosts}
  423. }
  424.  
  425. aside .icon {
  426. width: 75px;
  427. height: 75px;
  428. background-color: {color:posts};
  429. padding: 10px;
  430. {block:ifSolidPosts}box-shadow: 1px 1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75), -1px -1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75);{/block:ifSolidPosts}
  431. {block:ifNotSolidPosts}border: 1px solid {color:borders};{/block:ifNotSolidPosts}
  432. border-radius: 50%;
  433. margin: auto auto 1em auto;
  434. {block:ifSidebarImage}display: none;{/block:ifSidebarImage}
  435. }
  436.  
  437. {block:ifNotSolidPosts}
  438. {block:ifSidebarImage}
  439. #side-img {
  440. margin-bottom: 2em;
  441. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  442. }
  443. {/block:ifSidebarImage}
  444. {/block:ifNotSolidPosts}
  445.  
  446. #description {border-bottom: 1px solid {color:borders};}
  447.  
  448. {block:ifSolidPosts}
  449. #description, nav {padding: 1.5em; box-sizing: border-box;}
  450. {/block:ifSolidPosts}
  451.  
  452. {block:ifNotSolidPosts}
  453. #description {padding-bottom: 1.5em; margin-top: 1em;}
  454. nav {margin-top: 1.5em;}
  455. {/block:ifNotSolidPosts}
  456.  
  457. nav {
  458. text-align: left;
  459. width: 100%;
  460. counter-reset: links-counter;
  461. }
  462.  
  463. nav li {list-style-type: none;}
  464. nav a {display: inline-block; color: {color:nav links};}
  465.  
  466. nav a::before {
  467. counter-increment: links-counter;
  468. content: '0'counter(links-counter);
  469. font-family: '{select:title font}', serif;
  470. font-weight: bold;
  471. {block:ifSolidPosts}color: {color:nav title};{/block:ifSolidPosts}
  472. {block:ifNotSolidPosts}color: {color:title};{/block:ifNotSolidPosts}
  473. margin-right: 0.75em;
  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. nav a:hover {
  482. {block:ifSolidPosts}color: {color:nav title} !important;{/block:ifSolidPosts}
  483. {block:ifNotSolidPosts}color: {color:title};{/block:ifNotSolidPosts}
  484. }
  485.  
  486. nav a:hover::before {
  487. color: {color:accent};
  488. -webkit-transition: all 0.3s;
  489. -moz-transition: all 0.3s;
  490. -ms-transition: all 0.3s;
  491. -o-transition: all 0.3s;
  492. transition: all 0.3s;
  493. }
  494.  
  495. nav li::before {
  496. content: '';
  497. width: 0;
  498. height: 3px;
  499. background: {color:accent};
  500. display: inline-block;
  501. border-radius: 3px;
  502. margin: auto 0.5em 0.2em auto;
  503. vertical-align: middle;
  504. -webkit-transition: all 0.3s;
  505. -moz-transition: all 0.3s;
  506. -ms-transition: all 0.3s;
  507. -o-transition: all 0.3s;
  508. transition: all 0.3s;
  509. }
  510.  
  511. nav li:hover::before {
  512. width: 1em;
  513. -webkit-transition: all 0.3s;
  514. -moz-transition: all 0.3s;
  515. -ms-transition: all 0.3s;
  516. -o-transition: all 0.3s;
  517. transition: all 0.3s;
  518. }
  519.  
  520. /*----- HEADER -----*/
  521.  
  522. header {
  523. position: fixed;
  524. background-color: {color:posts};
  525. top: 0;
  526. left: 0;
  527. right: 0;
  528. width: 100%;
  529. padding: 1em;
  530. box-sizing: border-box;
  531. text-align: center;
  532. {block:ifSolidPosts}box-shadow: 1px 1px 3px rgba({RGBcolor:drop shadow}), -1px -1px 3px rgba({RGBcolor:drop shadow});{/block:ifSolidPosts}
  533. {block:ifNotSolidPosts}border-bottom: 1px solid {color:borders};{/block:ifNotSolidPosts}
  534. z-index: 10;
  535. }
  536.  
  537. header .title {font-size: 1.25em;}
  538.  
  539. header svg, header a svg {
  540. width: 1.5em;
  541. height: 1.5em;
  542. display: inline-block;
  543. vertical-align: middle;
  544. fill: {color:link};
  545. }
  546.  
  547. header a:hover svg {fill: {color:accent};}
  548. .updates-button-wrap {width: 1.5em; height: 1.5em;}
  549. .updates-clicked svg {fill: {color:accent};}
  550. .close-icon {display: none;}
  551. .updates-clicked .bell-icon {display: none;}
  552. .updates-clicked .close-icon {display: block;}
  553.  
  554. /*----- UPDATES TAB -----*/
  555.  
  556. #updates-tab {
  557. width: 200px;
  558. position: fixed;
  559. z-index: 10;
  560. top: 4.75em;
  561. left: 15px;
  562. display: none;
  563. }
  564.  
  565. #updates-tab .navbg {
  566. padding: 0.75em 1em;
  567. border-bottom: 1px solid {color:borders};
  568. {block:ifNotSolidPosts}
  569. {block:ifRoundedCorners}border-radius: 0;{/block:ifRoundedCorners}
  570. {/block:ifNotSolidPosts}
  571. }
  572.  
  573. .updates-container {
  574. background-color: {color:posts};
  575. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  576. overflow: hidden;
  577. {block:ifSolidPosts}box-shadow: 1px 1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75), -1px -1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75);{/block:ifSolidPosts}
  578. {block:ifNotSolidPosts}border: 1px solid {color:borders};{/block:ifNotSolidPosts}
  579. margin-bottom: 10px;
  580. }
  581.  
  582. .updates-text {padding: 1em;}
  583. #currently li {list-style-type: none;}
  584. #currently .upper {color: {color:title}; margin-right: 0.25em;}
  585.  
  586. /*----- POSTS -----*/
  587.  
  588. main {
  589. width: calc(225px + 125px + {select:post width});
  590. margin: auto;
  591. position: relative;
  592. }
  593.  
  594. #posts-container {
  595. width: {select:post width};
  596. position: relative;
  597. }
  598.  
  599. .left-sidebar #posts-container {margin: 125px 0 125px 350px;}
  600. .right-sidebar #posts-container {margin: 125px 0;}
  601.  
  602. article {
  603. width: 100%;
  604. margin: {text:post margin}px auto;
  605. position: relative;
  606. }
  607.  
  608. article:first-of-type {margin-top: 0;}
  609.  
  610. .posts {
  611. box-sizing: border-box;
  612. {block:ifSolidPosts}
  613. box-shadow: 1px 1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75), -1px -1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75);
  614. background-color: {color:posts};
  615. {block:ifRoundedCorners}
  616. border-radius: 8px;
  617. overflow: hidden;
  618. {/block:ifRoundedCorners}
  619. {/block:ifSolidPosts}
  620. }
  621.  
  622. .tumblr_video_container {max-height: 540px!important; overflow: hidden!important;}
  623. .posts li, .posts blockquote, .posts img, figure, video, .video {max-width: 100%;}
  624.  
  625. /*----- CAPTION -----*/
  626.  
  627. .caption {
  628. {block:ifSolidPosts}padding: 2em;{/block:ifSolidPosts}
  629. {block:ifNotSolidPosts}padding: 2em 0;{/block:ifNotSolidPosts}
  630. border-bottom: 1px solid {color:borders};
  631. list-style-type: none;
  632. }
  633.  
  634. {block:ifNotSolidPosts}
  635. .text-cap:first-of-type {padding-top: 0;}
  636. {/block:ifNotSolidPosts}
  637.  
  638. .caption p {margin: 1em 0;}
  639. .caption p:last-of-type {margin-bottom: 0;}
  640. .ogcap p:first-of-type {margin-top: 0;}
  641. .caption iframe, .caption img {max-width: 100%;}
  642. {block:ifSolidPosts}.captop:first-of-type {border-top: 1px solid {color:borders};}{/block:ifSolidPosts}
  643.  
  644. {block:ifHideCaption}{block:IndexPage}
  645. .hide-cap {display: none;}
  646. {/block:IndexPage}{/block:ifHideCaption}
  647.  
  648. .user-wrap {
  649. display: flex;
  650. flex-direction: row;
  651. align-items: center;
  652. justify-content: flex-start;
  653. }
  654.  
  655. .user-wrap .icon {
  656. width: 2em;
  657. height: 2em;
  658. margin-right: 0.25em;
  659. }
  660.  
  661. .username {
  662. display: inline-block;
  663. vertical-align: middle;
  664. line-height: 1em;
  665. }
  666.  
  667. .posts .username a {
  668. color: {color:nav title};
  669. background-color: {color:nav background};
  670. padding: 0.6em 0.75em;
  671. {block:ifRoundedCorners}border-radius: 6px;{/block:ifRoundedCorners}
  672. box-sizing: border-box;
  673. margin-left: 0.25em;
  674. }
  675.  
  676. .posts .username a, .posts .username a:hover {border-bottom: none; transform: none;}
  677. .posts .username a::before {display: none;}
  678. .posts .username a:hover {background-color: {color:accent}; color: #fff;}
  679.  
  680. .deactive::after {
  681. content: '(deactivated)';
  682. margin-left: 1em;
  683. color: {color:text};
  684. opacity: 0.9;
  685. }
  686.  
  687. /*----- TEXT -----*/
  688.  
  689. h1.post-title {
  690. {block:ifSolidPosts}
  691. padding: 1.25em 1.25em 0 1.25em;
  692. margin: 0;
  693. {/block:ifSolidPosts}
  694. {block:ifNotSolidPosts}
  695. margin-top: 0;
  696. {/block:ifNotSolidPosts}
  697. }
  698.  
  699. article .posts a.read_more, a.more_notes_link {
  700. text-transform: uppercase;
  701. letter-spacing: 0.1em;
  702. font-family: '{select:title font}', serif;
  703. color: #fff;
  704. background-color: {color:accent};
  705. padding: 0.5em 0.75em;
  706. {block:ifRoundedCorners}border-radius: 6px;{/block:ifRoundedCorners}
  707. border-bottom: none;
  708. font-weight: bold;
  709. }
  710.  
  711. article .posts a.read_more:hover, a.more_notes_link:hover {background-color: {color:title}}
  712. a.read_more::before, a.more_notes_link::before {display: none;}
  713.  
  714. pre {
  715. line-height: inherit;
  716. font-size: inherit;
  717. white-space: pre-wrap;
  718. white-space: -moz-pre-wrap;
  719. white-space: -pre-wrap;
  720. white-space: -o-pre-wrap;
  721. word-wrap: break-word;
  722. background-color: {color:nav background};
  723. color: {color:nav links};
  724. padding: 1.5em;
  725. {block:ifRoundedCorners}border-radius: 6px;{/block:ifRoundedCorners}
  726. }
  727.  
  728. @font-face {
  729. font-family: Calluna;
  730. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  731. 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");
  732. font-weight: 700;
  733. font-style: italic
  734. }
  735.  
  736. @font-face {
  737. font-family: Fairwater;
  738. 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");
  739. font-weight: 400;
  740. font-style: normal
  741. }
  742.  
  743. p.npf_quirky {font-family: Fairwater; font-size: 20px;}
  744.  
  745. .npf_color_joey {color: #e57373;}
  746. .npf_color_monica {color: #ff8a65;}
  747. .npf_color_phoebe {color: #ffee58;}
  748. .npf_color_ross {color: #81c784;}
  749. .npf_color_rachel {color: #4fc3f7;}
  750. .npf_color_chandler {color: #9575cd;}
  751. .npf_color_niles {color: #f06292;}
  752.  
  753. #k {
  754. position: fixed;
  755. bottom: 20px;
  756. right: 20px;
  757. font-size: 15px;
  758. background-color: {color:background};
  759. color: {color:link};
  760. padding: 5px 10px;
  761. border-radius: 3px;
  762. }
  763.  
  764. #k:hover {background-color: {color:accent}; color: #fff;}
  765.  
  766. #m {
  767. text-align: center;
  768. display: none;
  769. margin-bottom: 50px;
  770. }
  771.  
  772. /*----- LINK -----*/
  773.  
  774. a.link-wrap {
  775. display: block;
  776. color: {color:nav links};
  777. background-color: {color:nav background};
  778. {block:ifNotSolidPosts}
  779. {block:ifRoundedCorners}
  780. border-radius: 8px;
  781. overflow: hidden;
  782. {/block:ifRoundedCorners}
  783. {/block:ifNotSolidPosts}
  784. -webkit-transition: all 0.5s;
  785. -moz-transition: all 0.5s;
  786. -ms-transition: all 0.5s;
  787. -o-transition: all 0.5s;
  788. transition: all 0.5s;
  789. }
  790.  
  791. a.link-wrap:hover .link-host, .npf-link-block:hover {
  792. background-color: rgba({RGBcolor:accent}, 0.35);
  793. color: #fff;
  794. -webkit-transition: all 0.5s;
  795. -moz-transition: all 0.5s;
  796. -ms-transition: all 0.5s;
  797. -o-transition: all 0.5s;
  798. transition: all 0.5s;
  799. }
  800.  
  801. a.link-wrap:hover .link-host {padding-left: 3em; background-color: {color:accent};}
  802. a.link-wrap:hover .link-host svg {fill: #fff;}
  803.  
  804. .link {
  805. -webkit-backdrop-filter: blur(10px);
  806. -moz-backdrop-filter: blur(10px);
  807. -ms-backdrop-filter: blur(10px);
  808. -o-backdrop-filter: blur(10px);
  809. backdrop-filter: blur(10px);
  810. background-color: rgba(0, 0, 0, 0.25);
  811. }
  812.  
  813. a.link-wrap .title {
  814. color: #fff;
  815. text-align: center;
  816. padding: 1.25em;
  817. }
  818.  
  819. .link-host {
  820. background-color: rgba({RGBcolor:nav background}, 0.75);
  821. color: {color:nav links};
  822. padding: 2em;
  823. -webkit-transition: all 0.5s;
  824. -moz-transition: all 0.5s;
  825. -ms-transition: all 0.5s;
  826. -o-transition: all 0.5s;
  827. transition: all 0.5s;
  828. }
  829.  
  830. .link-host svg {
  831. display: inline-block;
  832. vertical-align: middle;
  833. width: 1.5em;
  834. height: 1.5em;
  835. fill: {color:nav links};
  836. margin-right: 0.5em;
  837. }
  838.  
  839. .npf-link-block {
  840. margin-top: 1.25em;
  841. {block:ifRoundedCorners}border-radius: 6px;{/block:ifRoundedCorners}
  842. {block:ifNotRoundedCorners}border-radius: 0;{/block:ifNotRoundedCorners}
  843. border: 1px solid {color:borders};
  844. -webkit-transition: all 0.5s;
  845. -moz-transition: all 0.5s;
  846. -ms-transition: all 0.5s;
  847. -o-transition: all 0.5s;
  848. transition: all 0.5s;
  849. }
  850.  
  851. .npf-link-block .poster .title {background-color: initial; padding: 1.5em;}
  852. .npf-link-block.no-poster .title {padding: 1.5em 1.5em 0 1.5em;}
  853. .npf-link-block .title {font-size: 1.25em; border-bottom: none;}
  854. .npf-link-block .bottom {padding: 1.5em !important; color: {color:text};}
  855.  
  856. .npf-link-block .bottom .site-name {
  857. font-size: 0.9em;
  858. color: {color:text};
  859. font-weight: normal;
  860. letter-spacing: 0.1em;
  861. }
  862.  
  863. /*----- PHOTO -----*/
  864.  
  865. img {
  866. margin: 0;
  867. display: block;
  868. height: auto;
  869. max-width: 100%;
  870. }
  871.  
  872. .photo img {
  873. width: 100%;
  874. {block:ifNotSolidPosts}
  875. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  876. {/block:ifNotSolidPosts}
  877. }
  878.  
  879. .vignette, #vignette {opacity: 0;}
  880. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(60, 60, 60, 0.75) !important;}
  881.  
  882. .lightbox-image, #tumblr_lightbox img {
  883. box-shadow: none !important;
  884. border-radius: 0 !important;
  885. max-width: none;
  886. }
  887.  
  888. /*----- PHOTOSET -----*/
  889.  
  890. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  891. margin-left: 0 !important;
  892. margin-right: 0 !important;
  893. }
  894.  
  895. {block:ifNotSolidPosts}
  896. .photo-slideshow, .npf_photoset {
  897. {block:ifRoundedCorners}
  898. border-radius: 8px;
  899. overflow: hidden;
  900. {/block:ifRoundedCorners}
  901. }
  902. {/block:ifNotSolidPosts}
  903.  
  904. {block:ifSolidPosts}
  905. .npf_photoset {margin: 1.5em -2em;}
  906. {/block:ifSolidPosts}
  907.  
  908. {block:ifNotSolidPosts}
  909. .npf_photoset {margin: 1.5em 0;}
  910. {/block:ifNotSolidPosts}
  911.  
  912. .captext figure {margin: 1em 0;}
  913. .captext figure .tmblr-full {margin-top: {select:photoset gutter}px;}
  914. .tmblr-full:hover {cursor: pointer;}
  915. .npf_image, .tmblr-full {border: none; outline: none;}
  916.  
  917. figure.tmblr-full a, figure.tmblr-full a:hover {border-bottom: none;}
  918. figure.tmblr-full a::before, figure.tmblr-full a:hover::before {display: none;}
  919.  
  920. /*----- QUOTE -----*/
  921.  
  922. .quote, p.npf_quote {
  923. font-family: '{select:title font}', serif;
  924. font-size: 1.5em;
  925. line-height: 160%;
  926. font-weight: bold;
  927. }
  928.  
  929. .quote.navbg {padding: 1.5em;}
  930. .quote {color: {color:nav title};}
  931.  
  932. .quote p:first-of-type {margin-top: 0;}
  933. .quote p:last-of-type {margin-bottom: 0;}
  934. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  935.  
  936. .source {
  937. {block:ifSolidPosts}padding: 2em;{/block:ifSolidPosts}
  938. {block:ifNotSolidPosts}margin-top: 2em;{/block:ifNotSolidPosts}
  939. text-align: right;
  940. }
  941.  
  942. /*----- CHAT -----*/
  943.  
  944. .chat {padding: 0; margin: 0;}
  945. .chat li {list-style-type: none;}
  946.  
  947. .line {
  948. {block:ifSolidPosts}padding: 2em;{/block:ifSolidPosts}
  949. {block:ifNotSolidPosts}padding: 2em 0;{/block:ifNotSolidPosts}
  950. border-bottom: 1px solid {color:borders};
  951. }
  952.  
  953. p.npf_chat {font-family: inherit; margin-top: 0.5em;}
  954. p.npf_chat:first-of-type {margin-top: 1.25em;}
  955.  
  956. p.npf_chat b {
  957. font-family: '{select:title font}', serif;
  958. text-transform: uppercase;
  959. letter-spacing: 0.1em;
  960. font-size: 0.9em;
  961. }
  962.  
  963. .chatter {color: {color:title}; letter-spacing: 0.1em; font-weight: bold;}
  964.  
  965. /*----- ASK -----*/
  966.  
  967. .asker-wrap {
  968. display: flex;
  969. flex-direction: row;
  970. justify-content: flex-start;
  971. align-items: center;
  972. }
  973.  
  974. .asker-wrap .icon {
  975. width: 3em;
  976. height: 3em;
  977. margin-right: 1.5em;
  978. }
  979.  
  980. .question {margin-top: 1em;}
  981. .question p:first-of-type {margin-top: 0;}
  982. .question p:last-of-type {margin-bottom: 0;}
  983.  
  984. .asker-wrap a {color: {color:nav links};}
  985. .asker-wrap a:hover {color: {color:accent};}
  986. .question a {color: {color:accent};}
  987. .question a:hover {color: {color:nav links};}
  988.  
  989. /*----- AUDIO -----*/
  990.  
  991. {block:ifNotSolidPosts}
  992. {block:ifRoundedCorners}
  993. .audiopost {border-radius: 8px; overflow: hidden;}
  994. {/block:ifRoundedCorners}
  995. {/block:ifNotSolidPosts}
  996.  
  997. .audio-wrap {
  998. -webkit-backdrop-filter: blur(10px);
  999. -moz-backdrop-filter: blur(10px);
  1000. -ms-backdrop-filter: blur(10px);
  1001. -o-backdrop-filter: blur(10px);
  1002. backdrop-filter: blur(10px);
  1003. background-color: rgba(0, 0, 0, 0.25);
  1004. }
  1005.  
  1006. .audio-content {padding: 2em;}
  1007.  
  1008. .albumart {
  1009. z-index: 5;
  1010. width: 100px;
  1011. height: 100px;
  1012. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  1013. margin: auto;
  1014. }
  1015.  
  1016. .audioinfo {
  1017. text-align: center;
  1018. color: rgba(255, 255, 255, 0.85);
  1019. margin-top: 1em;
  1020. }
  1021.  
  1022. .audioinfo .subtitle {color: #fff;}
  1023.  
  1024. .audio-button-wrap {
  1025. box-sizing: border-box;
  1026. display: flex;
  1027. flex-direction: row;
  1028. align-items: center;
  1029. justify-content: space-evenly;
  1030. width: 100%;
  1031. padding: 1.5em 2em;
  1032. background-color: rgba({RGBcolor:nav background}, 0.75);
  1033. }
  1034.  
  1035. .button {
  1036. width: 30px;
  1037. height: 30px;
  1038. overflow: hidden;
  1039. position: relative;
  1040. z-index: 1;
  1041. margin: 8px 7px 6px 7px;
  1042. }
  1043.  
  1044. .audiobox {
  1045. background-color: #f2f2f2;
  1046. z-index: 2;
  1047. position: relative;
  1048. border-radius: 50%;
  1049. display: inline-block;
  1050. margin: 0 10px;
  1051. }
  1052.  
  1053. .audio-button-wrap svg {
  1054. fill: {color:nav links};
  1055. width: 1.75em;
  1056. height: 1.75em;
  1057. }
  1058.  
  1059. .audio-button-wrap svg:first-of-type, .audio-button-wrap svg:last-of-type {width: 1.5em; height: 1.5em;}
  1060.  
  1061. /*----- INFO -----*/
  1062.  
  1063. {block:ifNotSolidPosts}
  1064. .info {margin-top: 2em;}
  1065. {/block:ifNotSolidPosts}
  1066.  
  1067. .info-left a {margin-right: 1em; display: inline-block;}
  1068. .info li {list-style-type: none;}
  1069.  
  1070. .type a {
  1071. background-color: {color:accent};
  1072. color: #fff;
  1073. padding: 0.5em 1em;
  1074. {block:ifRoundedCorners}border-radius: 6px;{/block:ifRoundedCorners}
  1075. }
  1076.  
  1077. .type a:hover {background-color: {color:title}; color: #fff;}
  1078.  
  1079. {block:ifShowReblogInfo}
  1080. .viasrc {
  1081. position: absolute;
  1082. width: 25px;
  1083. margin-left: calc({select:post width} + 10px);
  1084. z-index: 5;
  1085. {block:IndexPage}
  1086. opacity: 0;
  1087. -webkit-transition: all 0.5s;
  1088. -moz-transition: all 0.5s;
  1089. -ms-transition: all 0.5s;
  1090. -o-transition: all 0.5s;
  1091. transition: all 0.5s;
  1092. {/block:IndexPage}
  1093. }
  1094.  
  1095. .left-sidebar .viasrc {margin-left: calc({select:post width} + 10px);}
  1096. .right-sidebar .viasrc {margin-left: -35px;}
  1097.  
  1098. article:hover .viasrc {
  1099. opacity: 1.0;
  1100. -webkit-transition: all 0.5s;
  1101. -moz-transition: all 0.5s;
  1102. -ms-transition: all 0.5s;
  1103. -o-transition: all 0.5s;
  1104. transition: all 0.5s;
  1105. }
  1106.  
  1107. .viasrc a {display: block; margin-bottom: 10px; }
  1108.  
  1109. .viasrc a img {
  1110. width: 25px;
  1111. height: 25px;
  1112. {block:ifSolidPosts}box-shadow: 1px 1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75), -1px -1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75);{/block:ifSolidPosts}
  1113. -webkit-transition: all 0.3s;
  1114. -moz-transition: all 0.3s;
  1115. -ms-transition: all 0.3s;
  1116. -o-transition: all 0.3s;
  1117. transition: all 0.3s;
  1118. }
  1119.  
  1120. .viasrc a:hover img {
  1121. -webkit-filter: grayscale(100%);
  1122. -moz-filter: grayscale(100%);
  1123. -ms-filter: grayscale(100%);
  1124. -o-filter: grayscale(100%);
  1125. filter: grayscale(100%);
  1126. -webkit-transition: all 0.3s;
  1127. -moz-transition: all 0.3s;
  1128. -ms-transition: all 0.3s;
  1129. -o-transition: all 0.3s;
  1130. transition: all 0.3s;
  1131. }
  1132.  
  1133. {/block:ifShowReblogInfo}
  1134.  
  1135. .info-controls {
  1136. flex-shrink: 0;
  1137. {block:ifTagsOnClick}min-width: 6.5em;{/block:ifTagsOnClick}
  1138. }
  1139.  
  1140. .info-controls a {margin-left: 1em;}
  1141.  
  1142. .info-controls a svg {
  1143. width: 1.5em;
  1144. height: 1.5em;
  1145. fill: {color:nav links};
  1146. display: inline-block;
  1147. vertical-align: middle;
  1148. }
  1149.  
  1150. .info-controls a:hover svg {fill: {color:accent};}
  1151.  
  1152. {block:PermalinkPage}{block:ifSolidPosts}
  1153. .info-left li a:hover {color: {color:nav title};}
  1154. {/block:ifSolidPosts}{/block:PermalinkPage}
  1155.  
  1156. .like-wrap {
  1157. position: relative;
  1158. display: inline-block;
  1159. vertical-align: top;
  1160. width: 1.5em;
  1161. height: 1.5em;
  1162. cursor: pointer;
  1163. }
  1164.  
  1165. .like_button {
  1166. position: absolute;
  1167. top: 0;
  1168. left: 0;
  1169. right: 0;
  1170. bottom: 0;
  1171. width: 100%;
  1172. height: 100%;
  1173. opacity: 0;
  1174. z-index: 2;
  1175. }
  1176.  
  1177. .new-button {
  1178. position: absolute;
  1179. top: 0;
  1180. left: 0;
  1181. right: 0;
  1182. bottom: 0;
  1183. width: 100%;
  1184. height: 100%;
  1185. z-index: 1;
  1186. }
  1187.  
  1188. .like_button iframe {width: 100% !important; height: 100% !important;}
  1189. .like_button.liked + .new-button svg {fill: #d32f2f;}
  1190.  
  1191. .pin-post {
  1192. text-align: center;
  1193. {block:ifNotSolidPosts}margin-bottom: 2em;{/block:ifNotSolidPosts}
  1194. {block:ifSolidPosts}
  1195. padding: 1.5em;
  1196. border-bottom: 1px solid {color:borders};
  1197. {/block:ifSolidPosts}
  1198. }
  1199.  
  1200. .pin-post svg {
  1201. width: 1.5em;
  1202. height: 1.5em;
  1203. fill: {color:accent};
  1204. display: inline-block;
  1205. vertical-align: middle;
  1206. margin-right: 0.5em;
  1207. }
  1208.  
  1209. /*----- TAGS -----*/
  1210.  
  1211. .tags {margin-top: 1.25em; font-size: 0.8em;}
  1212.  
  1213. .tags a {
  1214. background-color: {color:posts};
  1215. color: {color:text};
  1216. padding: 0.5em 1em;
  1217. display: inline-block;
  1218. margin: 0 1em 0.75em 0;
  1219. {block:ifSolidPosts}box-shadow: 1px 1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75), -1px -1px 5px 1px rgba({RGBcolor:drop shadow}, 0.75);{/block:ifSolidPosts}
  1220. {block:ifNotSolidPosts}border: 1px solid {color:borders};{/block:ifNotSolidPosts}
  1221. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  1222. }
  1223.  
  1224. .tags a:hover {
  1225. background-color: {color:accent};
  1226. color: {color:posts};
  1227. {block:ifNotSolidPosts}
  1228. border: 1px solid {color:accent};
  1229. {/block:ifNotSolidPosts}
  1230. }
  1231.  
  1232. a.tag-button.tag-clicked svg {fill: {color:accent};}
  1233.  
  1234. .td-page {
  1235. {block:ifSolidPosts}
  1236. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  1237. {/block:ifSolidPosts}
  1238. overflow: hidden;
  1239. }
  1240.  
  1241. .td-page span {
  1242. color: {color:accent};
  1243. font-family: '{select:title font}', serif;
  1244. font-weight: bold;
  1245. text-transform: uppercase;
  1246. letter-spacing: 0.1em;
  1247. font-size: 0.9em;
  1248. }
  1249.  
  1250. /*----- POST NOTES -----*/
  1251.  
  1252. {block:ifNotSolidPosts}
  1253. .post-notes .navbg {
  1254. background-color: {color:background};
  1255. color: {color:text};
  1256. padding: 0 0 2em 0;
  1257. }
  1258. {/block:ifNotSolidPosts}
  1259.  
  1260. #notetitle {
  1261. {block:ifSolidPosts}color: {color:nav title};{/block:ifSolidPosts}
  1262. font-size: 1.25em;
  1263. }
  1264.  
  1265. ol.notes {
  1266. list-style-type: none;
  1267. max-width: 100%;
  1268. padding: 0;
  1269. margin: 0;
  1270. }
  1271.  
  1272. ol.notes li.note {
  1273. display: block;
  1274. border-top: 1px solid {color:borders};
  1275. {block:ifSolidPosts}padding: 1.5em;{/block:ifSolidPosts}
  1276. {block:ifNotSolidPosts}padding: 1.5em 0;{/block:ifNotSolidPosts}
  1277. }
  1278.  
  1279. ol.notes a {
  1280. text-transform: uppercase;
  1281. letter-spacing: 0.1em;
  1282. font-size: 0.9em;
  1283. }
  1284.  
  1285. ol.notes a, ol.notes a:hover {border-bottom: none;}
  1286.  
  1287. ol.notes li.note img.avatar {
  1288. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  1289. margin-right: 1em;
  1290. display: inline-block;
  1291. vertical-align: middle;
  1292. width: 1.5em;
  1293. height: 1.5em;
  1294. }
  1295.  
  1296. ol.notes a.avatar_frame {border-bottom: none;}
  1297. ol.notes a.avatar_frame::before {display: none;}
  1298.  
  1299. /*----- MOBILE CONTROLS -----*/
  1300.  
  1301. .mobile-controls {display: none;}
  1302. .mobile-controls a {margin-left: 0.75em;}
  1303.  
  1304. /*----- PAGINATION -----*/
  1305.  
  1306. .pg {
  1307. {block:ifSolidPosts}padding: 2em;{/block:ifSolidPosts}
  1308. {block:ifNotSolidPosts}
  1309. border-top: 1px solid {color:borders};
  1310. padding-top: 2em;
  1311. {/block:ifNotSolidPosts}
  1312. }
  1313.  
  1314. /*----- MEDIA QUERIES -----*/
  1315.  
  1316. @media only screen and (max-width: 1024px) {
  1317. main {width: {select:post width};}
  1318. .left-sidebar #posts-container, .right-sidebar #posts-container {width: 100%; margin: 125px auto;}
  1319.  
  1320. .left-sidebar aside, .right-sidebar aside {
  1321. position: static;
  1322. width: 100%;
  1323. margin: 125px auto {text:post margin}px auto;
  1324. }
  1325.  
  1326. aside nav li {display: inline-block; margin-right: 0.75em;}
  1327. }
  1328.  
  1329. @media only screen and (max-width: 700px) {
  1330. main {
  1331. {block:ifSolidPosts}width: 100vw;{/block:ifSolidPosts}
  1332. {block:ifNotSolidPosts}width: 85vw;{/block:ifNotSolidPosts}
  1333. }
  1334.  
  1335. .viasrc {display: none;}
  1336.  
  1337. header .title {display: none;}
  1338. .controls-icon, .tmblr-iframe-compact .tmblr-iframe--unified-controls {display: none;}
  1339. .mobile-controls {display: block;}
  1340.  
  1341. #k {display: none;}
  1342. #m {display: block;}
  1343. }
  1344.  
  1345. @media only screen and (max-height: 760px) {
  1346. aside nav {max-height: 175px; overflow-y: auto;}
  1347. }
  1348.  
  1349. {CustomCSS}
  1350.  
  1351. </style>
  1352. </head>
  1353.  
  1354. <body class="load-in">
  1355.  
  1356. <!----- HEADER ----->
  1357.  
  1358. <header class="align-flex">
  1359. <div id="updates-button-wrap">
  1360. {block:ifUpdatesTab}<a class="updates-button" title="updates">
  1361. <svg xmlns="https://www.w3.org/2000/svg" class="bell-icon" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg>
  1362. <svg xmlns="https://www.w3.org/2000/svg" class="close-icon" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>
  1363. </a>{/block:ifUpdatesTab}
  1364. </div>
  1365. <div class="title"><a href="/">{Title}</a></div>
  1366. <div class="controls-icon"><svg xmlns="https://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg></div>
  1367.  
  1368. <div class="mobile-controls">
  1369. <a href="https://www.tumblr.com/message/{Name}" title="message"><svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg></a>
  1370. <a href="https://www.tumblr.com/dashboard" title="dashboard"><svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/></svg></a>
  1371. <a href="https://www.tumblr.com/follow/{Name}" title="follow"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></a>
  1372. </div>
  1373. </header>
  1374.  
  1375. <!----- UPDATES TAB ----->
  1376.  
  1377. {block:ifUpdatesTab}
  1378. <div id="updates-tab">
  1379. <div class="updates-container">
  1380. <div class="subtitle navbg">Updates</div>
  1381. {block:ifUpdateText}<div class="updates-text">{text:Update Text}</div>{/block:ifUpdateText}
  1382. </div>
  1383. <div class="updates-container" id="currently">
  1384. <div class="subtitle navbg">Currently</div>
  1385. <div class="updates-text">
  1386. {block:ifWatching}<li>
  1387. <span class="upper">watching:</span>
  1388. {text:Watching}
  1389. </li>{/block:ifWatching}
  1390. {block:ifReading}<li>
  1391. <span class="upper">reading:</span>
  1392. {text:Reading}
  1393. </li>{/block:ifReading}
  1394. {block:ifListeningTo}<li>
  1395. <span class="upper">listening to:</span>
  1396. {text:Listening To}
  1397. </li>{/block:ifListeningTo}
  1398. {block:ifPlaying}<li>
  1399. <span class="upper">playing:</span>
  1400. {text:Playing}
  1401. </li>{/block:ifPlaying}
  1402. </div>
  1403. </div>
  1404. </div>
  1405. {/block:ifUpdatesTab}
  1406.  
  1407. <main class="{select:sidebar position}">
  1408.  
  1409. <!----- SIDEBAR ----->
  1410.  
  1411. <aside>
  1412. {block:ifShowIcon}<img src="{PortraitURL-128}" class="icon">{/block:ifShowIcon}
  1413. <div class="sidebar">
  1414. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img">{/block:ifSidebarImage}
  1415. <div id="description">{Description}</div>
  1416. <nav class="upper infobg">
  1417. {block:ifHomeLink}<li><a href="/">{text:Home Link}</a></li>{/block:ifHomeLink}
  1418. {block:AskEnabled}{block:ifAskLink}<li><a href="/ask">{text:Ask Link}</a></li>{/block:ifAskLink}{/block:AskEnabled}
  1419. {block:ifArchiveLink}<li><a href="/archive">{text:Archive Link}</a></li>{/block:ifArchiveLink}
  1420. {block:SubmissionsEnabled}{block:ifSubmitLink}<li><a href="/submit">{text:Submit Link}</a></li>{/block:ifSubmitLink}{/block:SubmissionsEnabled}
  1421. {block:ifLink1}<li><a href="{text:Link 1 URL}">{text:Link 1}</a></li>{/block:ifLink1}
  1422. {block:ifLink2}<li><a href="{text:Link 2 URL}">{text:Link 2}</a></li>{/block:ifLink2}
  1423. {block:ifLink3}<li><a href="{text:Link 3 URL}">{text:Link 3}</a></li>{/block:ifLink3}
  1424. {block:ifLink4}<li><a href="{text:Link 4 URL}">{text:Link 4}</a></li>{/block:ifLink4}
  1425. {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
  1426. </nav>
  1427. </div>
  1428. </aside>
  1429.  
  1430. <!----- POST CONTAINERS ----->
  1431.  
  1432. <section id="posts-container">
  1433.  
  1434. {block:TagPage}
  1435. <article class="td-page navbg">
  1436. {TotalPages} pages of posts tagged with <span>#{Tag}</span>
  1437. </article>
  1438. {/block:TagPage}
  1439.  
  1440. {block:DayPage}
  1441. <article class="td-page navbg">
  1442. Viewing posts made on <span>{Month} {DayOfMonth}, {Year}</span>
  1443. </article>
  1444. {/block:DayPage}
  1445.  
  1446. {block:SearchPage}
  1447. <article class="td-page navbg">
  1448. {lang:Showing SearchResultCount results for SearchQuery 2}
  1449. </article>
  1450. {/block:SearchPage}
  1451.  
  1452. <!----- POSTS ----->
  1453.  
  1454. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1455. <article>
  1456.  
  1457. <!-- top post info -->
  1458.  
  1459. {block:ifShowReblogInfo}
  1460. {block:RebloggedFrom}<div class="viasrc">
  1461. <a href="{ReblogParentURL}" title="via {ReblogParentName}"><img src="{ReblogParentPortraitURL-64}" class="icon"/></a>
  1462. <a href="{ReblogRootURL}" title="originally {ReblogRootName}"><img src="{ReblogRootPortraitURL-64}" class="icon"/></a>
  1463. </div>{/block:RebloggedFrom}
  1464. {/block:ifShowReblogInfo}
  1465.  
  1466. <!----- MAIN POST CONTENT ----->
  1467.  
  1468. <div class="posts main">
  1469.  
  1470. {block:PinnedPostLabel}
  1471. <div class="pin-post">
  1472. <a href="{Permalink}">
  1473. <svg xmlns="https://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="48px" viewBox="0 0 20 20" width="48px" fill="#000000"><g><rect fill="none" height="20" width="20" x="0"/></g><g><path d="M15,10c-1.1,0-2-0.9-2-2V4h0.5C13.78,4,14,3.78,14,3.5C14,3.22,13.78,3,13.5,3h-7C6.22,3,6,3.22,6,3.5C6,3.78,6.22,4,6.5,4 H7v4c0,1.1-0.9,2-2,2v1h4.5v5.5L10,17l0.5-0.5V11H15V10z M7.23,10C7.71,9.47,8,8.77,8,8V4h4v4c0,0.77,0.29,1.47,0.77,2H7.23z"/></g></svg>
  1474. <span class="upper">{PinnedPostLabel}</span>
  1475. </a>
  1476. </div>
  1477. {/block:PinnedPostLabel}
  1478.  
  1479. {block:Text}
  1480. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1481. {block:NotReblog}
  1482. <li class="caption ogcap text-cap">
  1483. <div class="captext">{Body}</div>
  1484. </li>
  1485. {/block:NotReblog}
  1486. {block:RebloggedFrom}{block:Reblogs}
  1487. <li class="caption rbcap text-cap">
  1488. <div class="user-wrap">
  1489. <img src="{PortraitURL-64}" class="capicon icon">
  1490. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1491. </div>
  1492. <div class="captext">{Body}</div>
  1493. </li>
  1494. {/block:Reblogs}{/block:RebloggedFrom}
  1495. {/block:Text}
  1496.  
  1497. {block:Link}
  1498. <a href="{URL}" class="link-wrap" style="background:url({block:Thumbnail}{Thumbnail-HighRes}{/block:Thumbnail}); background-position: center; background-size: cover;">
  1499. <div class="link">
  1500. <div class="title">{Name}</div>
  1501. {block:Host}<div class="link-host upper"><svg xmlns="https://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z"/></svg>{Host}</div>{/block:Host}
  1502. </div>
  1503. </a>
  1504. {block:Description}
  1505. {block:NotReblog}
  1506. <li class="caption captop ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1507. <div class="captext">{Description}</div>
  1508. </li>
  1509. {/block:NotReblog}
  1510. {/block:Description}
  1511. {block:RebloggedFrom}{block:Reblogs}
  1512. <li class="caption rbcap captop {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1513. <div class="user-wrap">
  1514. <img src="{PortraitURL-64}" class="capicon icon">
  1515. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1516. </div>
  1517. <div class="captext">{Body}</div>
  1518. </li>
  1519. {/block:Reblogs}{/block:RebloggedFrom}
  1520. {/block:Link}
  1521.  
  1522. {block:Photo}
  1523. <div class="photo">
  1524. {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}" loading="lazy"></a>{LinkCloseTag}
  1525. </div>
  1526. {block:Caption}
  1527. {block:NotReblog}
  1528. <li class="caption captop ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1529. <div class="captext">{Caption}</div>
  1530. </li>
  1531. {/block:NotReblog}
  1532. {block:Reblogs}
  1533. <li class="caption captop rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1534. <div class="user-wrap">
  1535. <img src="{PortraitURL-64}" class="capicon icon">
  1536. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1537. </div>
  1538. <div class="captext">{Body}</div>
  1539. </li>
  1540. {/block:Reblogs}
  1541. {/block:Caption}
  1542. {/block:Photo}
  1543.  
  1544. {block:Panorama}
  1545. <div class="photo">
  1546. {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">{LinkCloseTag}
  1547. </div>
  1548. {block:Caption}
  1549. {block:NotReblog}
  1550. <li class="caption captop ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1551. <div class="captext">{Caption}</div>
  1552. </li>
  1553. {/block:NotReblog}
  1554. {block:Reblogs}
  1555. <li class="caption captop rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1556. <div class="user-wrap">
  1557. <img src="{PortraitURL-64}" class="capicon icon">
  1558. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1559. </div>
  1560. <div class="captext">{Body}</div>
  1561. </li>
  1562. {/block:Reblogs}
  1563. {/block:Caption}
  1564. {/block:Panorama}
  1565.  
  1566. {block:Photoset}
  1567. <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}" loading="lazy"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1568. {block:Caption}
  1569. {block:NotReblog}
  1570. <li class="caption captop ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1571. <div class="captext">{Caption}</div>
  1572. </li>
  1573. {/block:NotReblog}
  1574. {block:Reblogs}
  1575. <li class="caption captop rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1576. <div class="user-wrap">
  1577. <img src="{PortraitURL-64}" class="capicon icon">
  1578. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1579. </div>
  1580. <div class="captext">{Body}</div>
  1581. </li>
  1582. {/block:Reblogs}
  1583. {/block:Caption}
  1584. {/block:Photoset}
  1585.  
  1586. {block:Video}
  1587. <div class="video">{Video-700}</div>
  1588. {block:Caption}
  1589. {block:NotReblog}
  1590. <li class="caption captop ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1591. <div class="captext">{Caption}</div>
  1592. </li>
  1593. {/block:NotReblog}
  1594. {block:Reblogs}
  1595. <li class="caption captop rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1596. <div class="user-wrap">
  1597. <img src="{PortraitURL-64}" class="capicon icon">
  1598. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1599. </div>
  1600. <div class="captext">{Body}</div>
  1601. </li>
  1602. {/block:Reblogs}
  1603. {/block:Caption}
  1604. {/block:Video}
  1605.  
  1606. {block:Quote}
  1607. <div class="quote navbg">{Quote}</div>
  1608. {block:Source}<div class="source upper">{Source}</div>{/block:Source}
  1609. {/block:Quote}
  1610.  
  1611. {block:Chat}
  1612. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1613. <ul class="chat">{block:Lines}
  1614. <li class="line">
  1615. {block:Label}<span class="subtitle chatter">{Label}</span>{/block:Label}
  1616. {Line}
  1617. </li>
  1618. {/block:Lines}</ul>
  1619. {/block:Chat}
  1620.  
  1621. {block:Answer}
  1622. <div class="ask-post navbg">
  1623. <div class="asker-wrap">
  1624. <img src="{AskerPortraitURL-128}" class="askicon icon">
  1625. <div class="asker">
  1626. <div class="subtitle">{Asker}</div>
  1627. <div class="upper">sent a message</div>
  1628. </div>
  1629. </div>
  1630. <div class="question">{Question}</div>
  1631. </div>
  1632. {block:Answerer}
  1633. <li class="caption rbcap">
  1634. <div class="user-wrap">
  1635. <img src="{AnswererPortraitURL-64}" class="capicon icon">
  1636. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}">{Answerer}</div>
  1637. </div>
  1638. <div class="captext">{Answer}</div>
  1639. </li>
  1640. {/block:Answerer}
  1641. {block:NotReblog}
  1642. <li class="caption ogcap captop">
  1643. <div class="captext">{Replies}</div>
  1644. </li>
  1645. {/block:NotReblog}
  1646. {block:RebloggedFrom}{block:Reblogs}
  1647. <li class="caption captop rbcap">
  1648. <div class="user-wrap">
  1649. <img src="{PortraitURL-64}" class="capicon icon">
  1650. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1651. </div>
  1652. <div class="captext">{Body}</div>
  1653. </li>
  1654. {/block:Reblogs}{/block:RebloggedFrom}
  1655. {/block:Answer}
  1656.  
  1657. {block:Audio}
  1658. <div class="audiopost" style="background: url({block:AlbumArt}{AlbumArtURL}{/block:AlbumArt}); background-position: center; background-size: cover;">
  1659. <div class="audio-wrap">
  1660. <div class="audio-content">
  1661. {block:AlbumArt}
  1662. <img src="{AlbumArtURL}" class="albumart">
  1663. {/block:AlbumArt}
  1664. <div class="audioinfo">
  1665. {block:TrackName}<div class="subtitle">{TrackName}</div>{/block:TrackName}
  1666. {block:Artist}{Artist}{/block:Artist}
  1667. {block:Album}<br>{Album}{/block:Album}
  1668. </div>
  1669. </div>
  1670.  
  1671. <div class="audio-button-wrap">
  1672. <svg xmlns="https://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="none"><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><g/><path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z"/></g></svg>
  1673. <svg xmlns="https://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="none"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 6h2v12H6zm3.5 6l8.5 6V6l-8.5 6zm6.5 2.14L12.97 12 16 9.86v4.28z"/></svg>
  1674. <div class="audiobox"><div class="button">
  1675. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1676. </div></div>
  1677. <svg xmlns="https://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="none"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z"/></svg>
  1678. <svg xmlns="https://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>
  1679. </div>
  1680. </div>
  1681. </div>
  1682. {block:Caption}
  1683. {block:NotReblog}
  1684. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1685. <div class="captext">{Caption}</div>
  1686. </li>
  1687. {/block:NotReblog}
  1688. {block:Reblogs}
  1689. <li class="caption rbcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1690. <div class="user-wrap">
  1691. <img src="{PortraitURL-64}" class="capicon icon">
  1692. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1693. </div>
  1694. <div class="captext">{Body}</div>
  1695. </li>
  1696. {/block:Reblogs}
  1697. {/block:Caption}
  1698. {/block:Audio}
  1699.  
  1700. <!----- INFO ----->
  1701.  
  1702. {block:Date}
  1703. <div class="info infobg upper align-flex">
  1704. <div class="info-left">
  1705. {block:IndexPage}
  1706. <span class="type"><a href="{Permalink}" class="subtitle" title="{TimeAgo}">{ShortMonth} {DayOfMonth}</a></span>
  1707. {block:NoteCount}<a href="{Permalink}" class="notecount">{NoteCountWithLabel}</a>{/block:NoteCount}
  1708. {/block:IndexPage}
  1709. {block:PermalinkPage}
  1710. <li>{TimeAgo} on {Month} {DayOfMonth}, {Year}</li>
  1711. {block:RebloggedFrom}
  1712. <li>{lang:Reblogged from} <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
  1713. <li>{lang:Originally from ReblogRootName 2}</li>
  1714. {/block:RebloggedFrom}
  1715. {block:ContentSource}<li>{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
  1716. {/block:PermalinkPage}
  1717. </div>
  1718.  
  1719. <div class="info-controls">
  1720. {block:HasTags}{block:ifTagsOnClick}{block:IndexPage}<a class="tag-button" title="show tags"><svg xmlns="https://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M21.41,11.41l-8.83-8.83C12.21,2.21,11.7,2,11.17,2H4C2.9,2,2,2.9,2,4v7.17c0,0.53,0.21,1.04,0.59,1.41l8.83,8.83 c0.78,0.78,2.05,0.78,2.83,0l7.17-7.17C22.2,13.46,22.2,12.2,21.41,11.41z M12.83,20L4,11.17V4h7.17L20,12.83L12.83,20z"/><circle cx="6.5" cy="6.5" r="1.5"/></g></g></svg></a>{/block:IndexPage}{/block:ifTagsOnClick}{/block:HasTags}
  1721. <a href="{ReblogURL}" title="reblog" target="_blank" class="reblog-button"><svg xmlns="https://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000"><path d="M7 7h10v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79c-.31-.31-.85-.09-.85.36V5H6c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1V7zm10 10H7v-1.79c0-.45-.54-.67-.85-.35l-2.79 2.79c-.2.2-.2.51 0 .71l2.79 2.79c.31.31.85.09.85-.36V19h11c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v3z"/></svg></a>
  1722. <a class="like-wrap" title="like">{LikeButton}<span class="new-button"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg></span></a>
  1723. </div>
  1724. </div>
  1725. {/block:Date}
  1726.  
  1727. </div>
  1728.  
  1729. <!----- TAGS ----->
  1730.  
  1731. {block:HasTags}
  1732. <div class="tags upper">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>
  1733. {/block:HasTags}
  1734.  
  1735. </article>
  1736.  
  1737. <!----- POST NOTES ----->
  1738.  
  1739. {block:PermalinkPage}{block:Date}
  1740. {block:NoteCount}{block:PostNotes}
  1741. <div class="post-notes posts">
  1742. <div class="navbg">
  1743. <div class="title" id="notetitle">{NoteCountWithLabel}</div>
  1744. </div>
  1745. {PostNotes-64}
  1746. </div>
  1747. {/block:PostNotes}{/block:NoteCount}
  1748. {/block:Date}{/block:PermalinkPage}
  1749.  
  1750. {/block:Posts}
  1751.  
  1752. <!----- PAGINATION ----->
  1753.  
  1754. {block:Pagination}
  1755. <article class="pg posts upper align-flex">
  1756. <span>
  1757. {block:PreviousPage}
  1758. <a href="{PreviousPage}">backwards</a>
  1759. /
  1760. {/block:PreviousPage}
  1761. {block:NextPage}
  1762. <a href="{NextPage}">forwards</a>
  1763. {/block:NextPage}
  1764. </span>
  1765.  
  1766. <div id="currentpg" class="subtitle">
  1767. {CurrentPage} of {TotalPages}
  1768. </div>
  1769. </article>
  1770. {/block:Pagination}
  1771.  
  1772. </section>
  1773.  
  1774. </main>
  1775.  
  1776. <a href="https://seyche.tumblr.com" title="zinnia theme by seyche" id="k">&.</a>
  1777.  
  1778. <a href="https://seyche.tumblr.com" id="m" class="upper">zinnia theme by seyche</a>
  1779.  
  1780. <!----- PHOTOSETS ----->
  1781.  
  1782. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1783. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1784.  
  1785. <!----- TOOLTIPS ----->
  1786.  
  1787. <script src="https://unpkg.com/popper.js@1"></script>
  1788. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1789.  
  1790. <!----- VIDEO RESIZING ----->
  1791.  
  1792. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  1793.  
  1794. <!----- JQUERY ----->
  1795.  
  1796. <script>
  1797.  
  1798. $(document).ready(function(){
  1799.  
  1800. /// PHOTOSET
  1801.  
  1802. $('.photo-slideshow').pxuPhotoset({
  1803. lightbox: true,
  1804. rounded: false,
  1805. gutter: '{select:photoset gutter}px',
  1806. borderRadius: '0px',
  1807. photoset: '.photo-slideshow',
  1808. photoWrap: '.photo-data',
  1809. photo: '.pxu-photo'
  1810. });
  1811.  
  1812. npfPhotosets(".posts", {
  1813. rowClass:"npf_row",
  1814. imageContainerClass:"tmblr-full",
  1815. generatedPhotosetContainerClass:"npf_photoset",
  1816. imageClass:"npf_image",
  1817. includeCommonPhotosets: false,
  1818. useTumblrLightbox: true,
  1819. insertGalleryIndicator: false,
  1820. galleryIndicatorClass: "npf_gallery_indicator",
  1821. galleryIndicatorContent: "<img src='image_url'>",
  1822. photosetMargins:"{select:photoset gutter}"
  1823. });
  1824.  
  1825. /// NOTECOUNT
  1826.  
  1827. $('article').find('.notecount').each(function(){
  1828. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1829. if (n > 999) {
  1830. n = Math.floor(n / 100) / 10;
  1831. $(this).text(n + 'k notes');
  1832. }
  1833. });
  1834.  
  1835. /// TAGS ON CLICK
  1836.  
  1837. {block:ifTagsOnClick}{block:IndexPage}
  1838. $('.tags').hide();
  1839. $('.tag-button').click(function() {
  1840. $(this).closest('article').find('.tags').slideToggle(500);
  1841. $(this).toggleClass('tag-clicked');
  1842. return false;
  1843. });
  1844. {/block:IndexPage}{/block:ifTagsOnClick}
  1845.  
  1846. /// UPDATES TAB
  1847.  
  1848. {block:ifUpdatesTab}
  1849. $('#updates-tab').hide();
  1850. $('.updates-button').click(function() {
  1851. $('#updates-tab').slideToggle(500);
  1852. $(this).toggleClass('updates-clicked');
  1853. return false;
  1854. });
  1855. {/block:ifUpdatesTab}
  1856.  
  1857. /// TOOLTIPS
  1858.  
  1859. tippy('[title]', {
  1860. theme: 'custom',
  1861. arrow: false,
  1862. followCursor: true,
  1863. delay: 100,
  1864. placement: 'bottom-start',
  1865. zIndex: 9999999999,
  1866. maxWidth: 400,
  1867.  
  1868. content(reference) {
  1869. const title = reference.getAttribute('title');
  1870. reference.removeAttribute('title');
  1871. return title;
  1872. },
  1873. });
  1874.  
  1875. });
  1876.  
  1877. /// RESPONSIVE VIDEOS
  1878.  
  1879. function flexFrame() {
  1880. $(".caption").each(function() {
  1881. $(this).find("iframe").wrap("<div class='capframe'></div>");
  1882. flexibleFrames($(".capframe"));
  1883. });
  1884. flexibleFrames($(".video"));
  1885. }
  1886. $(document).ready(flexFrame);
  1887.  
  1888. feather.replace()
  1889.  
  1890. </script>
  1891.  
  1892.  
  1893. </body>
  1894. </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!