API tools faq
paste
Advertisement
seiche

theme fourteen: camellia

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