nicolas-sage

theme 28: strawberry (revamp)

Sep 15th, 2025 (edited)
173
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 83.37 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3. <head>
  4. <link rel="shortcut icon" href="{Favicon}" />
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  6. <title>{Title}</title>
  7. {block:Description}
  8. <meta name="description" content="{MetaDescription}" />
  9. {/block:Description}
  10. {NewPostStyles}
  11. <meta charset="utf-8">
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13.  
  14. <!----
  15. _________
  16. / \
  17. | __ __ | ** REVAMPED **
  18. | |__| |__| | STRAWBERYY THEME BY SAGE / PHANTOMCODES
  19. | | https://phantomcodes.tumblr.com
  20. | _ _ _ |
  21. |_| |_| |_| |_|
  22.  
  23.  
  24.  
  25. CREDITS:
  26. - tabler icons / https://tabler-icons.io/
  27. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  28. - bunny fonts / https://fonts.bunny.net/
  29. - pxu photosets by pixel union with modifications by bychloethemes / https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  30. - responsive videos by nouvae / https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
  31. - time ago plugin by chloethemes / https://bychloethemes.tumblr.com/plugins/timeago
  32. - notes shortener by shythemes / https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
  33. - day/night mode tutorial by eggdesign / https://egg.design/post/186889223257/day-night-mode-tutorial-after-featuring-a
  34. - dark mode guide by 22mm / https://22mm.tumblr.com/post/673476677544837120/a-dark-mode-guide-with-css-variables-and-js-this
  35. - npf images fix by glenthemes / https://github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md
  36. - npf audio player by glenthemes / https://glenthemes.tumblr.com/post/722160746171072512/npf-audio-player
  37. - unblue polls by glenthemes / https://glenthemes.tumblr.com/post/708014819571302400/unblue-polls
  38. - copy link to post tutorial by glenthemes / https://glenthemes.tumblr.com/post/173993578944/copy-link-to-post-button-tutorial
  39. - hide tutorial by lmthemes / https://lmthemes.tumblr.com/post/30046967698/tutorial-05-hide-stuff-tutorial-in-this
  40.  
  41. ---->
  42.  
  43. <!-- STYLESHEETS -->
  44.  
  45. <!--- JQUERY --->
  46. <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  47.  
  48. <!---- PHOTOSET ---->
  49. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  50. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  51.  
  52. <!----- BUNNY FONTS ---->
  53. <link href="https://fonts.bunny.net/css?family={text:body font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family={text:title font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  54.  
  55. <!---- ICONS ---->
  56. <script src="https://unpkg.com/phosphor-icons"></script>
  57. <script src="https://unpkg.com/[email protected]"></script>
  58.  
  59. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  60. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
  61.  
  62. <!---- TOOLTIPS ---->
  63. <script src="https://unpkg.com/popper.js@1"></script>
  64. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  65.  
  66. <!--- FLICKITY --->
  67. <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
  68.  
  69. <!---- VIDEOS ---->
  70. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  71.  
  72. <!---- COPY LINK ---->
  73. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  74. <script>
  75. $(document).ready(function(){
  76. var clipboard = new ClipboardJS("#copybutton");
  77. });
  78. </script>
  79.  
  80. <!---- TIME AGO ----->
  81. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  82. <script type="text/javascript">
  83. $(document).ready(function() {
  84. $(".time-ago").timeAgo({
  85. time: "short",
  86. spaces: true,
  87. words: false,
  88. prefix: "",
  89. suffix: "ago",
  90. });
  91. });
  92. </script>
  93.  
  94. <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  95. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  96.  
  97. <!--
  98. NPF images fix v3.0 by @glenthemes [2021]
  99. 💌 git.io/JRBt7
  100. --->
  101. <script src="//npf-images-v3.github.io/script.js"></script>
  102. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  103. <style tmblr-npf>
  104. :root {
  105. --NPF-Caption-Spacing:1em;
  106. --NPF-Image-Spacing:4px;
  107. }
  108. </style>
  109.  
  110. <!---- VARIABLES ---->
  111.  
  112. <meta name="image:Sidebar" content="" />
  113.  
  114. <meta name="color:Background" content="#eaeaea" />
  115. <meta name="color:Posts" content="#fff" />
  116. <meta name="color:Posts Two" content="#f8f8f8" />
  117. <meta name="color:Borders" content="#e5e5e5" />
  118. <meta name="color:Title" content="#333" />
  119. <meta name="color:Text" content="#666" />
  120. <meta name="color:Accent One" content="#d79194" />
  121. <meta name="color:Accent Two" content="#e29fa1" />
  122. <meta name="color:Accent Text" content="#ffe4e5" />
  123.  
  124. <meta name="color:Night Background" content="#333" />
  125. <meta name="color:Night Posts" content="#404040" />
  126. <meta name="color:Night Posts Two" content="#484848" />
  127. <meta name="color:Night Borders" content="#555" />
  128. <meta name="color:Night Title" content="#fff" />
  129. <meta name="color:Night Text" content="#ccc" />
  130. <meta name="color:Night Accent One" content="#ffcfcb" />
  131. <meta name="color:Night Accent Two" content="#f9ced0" />
  132. <meta name="color:Night Accent Text" content="#be7678"/>
  133.  
  134. <meta name="select:Corners" content="10px" title="round"/>
  135. <meta name="select:Corners" content="5px" title="less round"/>
  136. <meta name="select:Corners" content="15px" title="more round"/>
  137. <meta name="select:Corners" content="0px" title="sharp"/>
  138.  
  139. <meta name="select:Post Margin" content="75px" title="default"/>
  140. <meta name="select:Post Margin" content="105px" title="more"/>
  141. <meta name="select:Post Margin" content="45px" title="less"/>
  142.  
  143. <meta name="select:Tags" content="tags" title="default"/>
  144. <meta name="select:Tags" content="clicktags" title="on click"/>
  145.  
  146. <meta name="if:Right Sidebar" content="1"/>
  147. <meta name="if:Updates" content="1"/>
  148. <meta name="if:Music Player" content="0"/>
  149.  
  150. <meta name="text:Body Font" content="Quicksand"/>
  151. <meta name="text:Title Font" content="Montserrat"/>
  152. <meta name="text:Font Size" content="15"/>
  153. <meta name="text:Blog Name" content="your url here"/>
  154. <meta name="text:Custom Title" content="keep this short!"/>
  155. <meta name="text:Custom Description" content="custom description"/>
  156.  
  157. <meta name="text:Sidebar Link 1" content="link one"/>
  158. <meta name="text:Sidebar Link 1 URL" content="/"/>
  159. <meta name="text:Sidebar Link 1 Icon" content="cloud"/>
  160. <meta name="text:Sidebar Link 2" content=""/>
  161. <meta name="text:Sidebar Link 2 URL" content=""/>
  162. <meta name="text:Sidebar Link 2 Icon" content=""/>
  163. <meta name="text:Sidebar Link 3" content=""/>
  164. <meta name="text:Sidebar Link 3 URL" content=""/>
  165. <meta name="text:Sidebar Link 3 Icon" content=""/>
  166. <meta name="text:Sidebar Link 4" content=""/>
  167. <meta name="text:Sidebar Link 4 URL" content=""/>
  168. <meta name="text:Sidebar Link 4 Icon" content=""/>
  169. <meta name="text:Sidebar Link 5" content=""/>
  170. <meta name="text:Sidebar Link 5 URL" content=""/>
  171. <meta name="text:Sidebar Link 5 Icon" content=""/>
  172.  
  173. <meta name="text:Update 1" content="watching"/>
  174. <meta name="text:Update Icon 1" content="television"/>
  175. <meta name="text:Update 2" content="listening to"/>
  176. <meta name="text:Update Icon 2" content="headphones"/>
  177. <meta name="text:Update 3" content="reading"/>
  178. <meta name="text:Update Icon 3" content="book-open"/>
  179. <meta name="text:Update 4" content="playing"/>
  180. <meta name="text:Update Icon 4" content="game-controller"/>
  181. <meta name="text:Update 5" content="working on"/>
  182. <meta name="text:Update Icon 5" content="briefcase"/>
  183. <meta name="text:Update 6" content=""/>
  184. <meta name="text:Update Icon 6" content=""/>
  185.  
  186. <meta name="text:Song URL" content=""/>
  187. <meta name="text:Song Icon IMG" content=""/>
  188. <meta name="text:Song Name" content="song name"/>
  189. <meta name="text:Song Artist" content="song artist"/>
  190.  
  191. <!--- day/night --->
  192. <script>
  193. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  194. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  195. </script>
  196.  
  197. <!------- CSS -------->
  198. <style>
  199.  
  200. /* theme options - common */
  201. :root {
  202. --Spacing: 1rem;
  203. --Corners:{select:Corners};
  204. --PostMargin:{select:Post Margin};
  205. --TitleFont:{text:Title Font};
  206. --BodyFont:{text:Body Font};
  207.  
  208. --ColorOpaquePosts:rgb(from var(--ColorPosts) r g b / .85);
  209.  
  210. --ColorOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .3);
  211. --ColorOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .3);
  212. --ColorLessOpaqueAccentOne:rgb(from var(--ColorAccentOne) r g b / .75);
  213. --ColorLessOpaqueAccentTwo:rgb(from var(--ColorAccentTwo) r g b / .75);
  214. }
  215.  
  216. /* theme options - day/night */
  217. :root, html[data-theme='light'] {
  218. --LightOn: flex;
  219. --LightOff: none;
  220. --ColorBackground: {color:background};
  221. --ColorPosts: {color:posts};
  222. --ColorPostsTwo: {color:Posts Two};
  223. --ColorBorders: {color:borders};
  224. --ColorTitle: {color:title};
  225. --ColorText: {color:text};
  226. --ColorAccentOne: {color:accent one};
  227. --ColorAccentTwo: {color:accent two};
  228. --ColorAccentText: {color:accent text};
  229. --ColorOpacity: rgba(255,255,255,.2);
  230. --ColorReverseOpacity: rgba(0,0,0,.1);
  231. }
  232. html[data-theme='dark'] {
  233. --LightOn: none;
  234. --LightOff: flex;
  235. --ColorBackground: {color:night background};
  236. --ColorPosts: {color:night posts};
  237. --ColorPostsTwo: {color:night Posts Two};
  238. --ColorBorders: {color:night borders};
  239. --ColorTitle: {color:night title};
  240. --ColorText: {color:night text};
  241. --ColorAccentOne: {color:night accent one};
  242. --ColorAccentTwo: {color:night accent two};
  243. --ColorAccentText: {color:night accent text};
  244. --ColorOpacity: rgba(0,0,0,.1);
  245. --ColorReverseOpacity: rgba(255,255,255,.2);
  246. }
  247. html.theme-transition,
  248. html.theme-transition *,
  249. html.theme-transition *:before,
  250. html.theme-transition *:after {
  251. transition: 0s !important;
  252. transition-delay: 0 !important;
  253. }
  254.  
  255. .light-on{
  256. display: var(--LightOn);
  257. }
  258. .light-off{
  259. display: var(--LightOff);
  260. }
  261.  
  262. /*--- TOOLTIPS ---*/
  263. .tippy-tooltip.custom-theme {
  264. font-size:1em;
  265. font-weight:500;
  266. color:var(--ColorPosts);
  267. text-transform:lowercase;
  268. text-shadow:0 1px rgba(0,0,0,.1);
  269. text-align:center;
  270. background:var(--ColorAccentTwo);
  271. border-radius:5px;
  272. box-shadow:0 2px 8px -2px rgba(0,0,0,.2);
  273. }
  274. /* Right placement tooltip arrow (arrow will be on left side of tooltip) */
  275. .tippy-popper[x-placement^=right] .tippy-tooltip.custom-theme .tippy-arrow {
  276. border-right: 7px solid var(--ColorAccentTwo); /* your color here */
  277. }
  278.  
  279. /* Left placement tooltip arrow (arrow will be on right side of tooltip) */
  280. .tippy-popper[x-placement^=left] .tippy-tooltip.custom-theme .tippy-arrow {
  281. border-left: 7px solid var(--ColorAccentTwo); /* your color here */
  282. }
  283.  
  284. /* Top placement tooltip arrow (arrow will be on bottom side of tooltip) */
  285. .tippy-popper[x-placement^=top] .tippy-tooltip.custom-theme .tippy-arrow {
  286. border-top: 7px solid var(--ColorAccentTwo); /* your color here */
  287. }
  288.  
  289. /* Bottom placement tooltip arrow (arrow will be on top side of tooltip) */
  290. .tippy-popper[x-placement^=bottom] .tippy-tooltip.custom-theme .tippy-arrow {
  291. border-bottom: 7px solid var(--ColorAccentTwo); /* your color here */
  292. }
  293.  
  294. /*--- SCROLLBAR ---*/
  295. ::-webkit-scrollbar {
  296. width:4px;
  297. height:4px;
  298. background:var(--ColorBackground);
  299. }
  300. ::-webkit-scrollbar-track {
  301. margin-bottom:.5rem;
  302. background:var(--ColorBackground);
  303. border-radius: 5px;
  304. }
  305. ::-webkit-scrollbar-thumb {
  306. background:var(--ColorAccentTwo);
  307. border-radius: 5px;
  308. }
  309.  
  310. /*--- TEXT SELECTION ---*/
  311. ::-moz-selection { /* Code for Firefox */
  312. color:var(--ColorBackground);
  313. background:var(--ColorAccentTwo);
  314. }
  315.  
  316. ::selection {
  317. color:var(--ColorBackground);
  318. background:var(--ColorAccentTwo);
  319. }
  320.  
  321. * {box-sizing:border-box;}
  322.  
  323. body {
  324. font-family:'{text:body font}', sans-serif;
  325. font-size:{text:font size}px;
  326. color:var(--ColorText);
  327. line-height:150%;
  328. word-wrap:break-word;
  329. letter-spacing:.04em;
  330. margin:0;
  331. background-color:var(--ColorBackground);
  332. }
  333. body {
  334. opacity:1;
  335. transition:.75s opacity;
  336. }
  337.  
  338. body.fade-out {
  339. opacity:0;
  340. transition:none;
  341. }
  342. html {background-color:var(--ColorBackground); scrollbar-gutter:stable;}
  343.  
  344. a {
  345. color:var(--ColorAccentOne);
  346. text-decoration:none;
  347. -webkit-transition: all 0.4s;
  348. -moz-transition: all 0.4s;
  349. -ms-transition: all 0.4s;
  350. -o-transition: all 0.4s;
  351. transition: all 0.4s;
  352. }
  353.  
  354. a:hover {
  355. color:var(--ColorAccentTwo);
  356. -webkit-transition: all 0.4s;
  357. -moz-transition: all 0.4s;
  358. -ms-transition: all 0.4s;
  359. -o-transition: all 0.4s;
  360. transition: all 0.4s;
  361. }
  362.  
  363. blockquote {
  364. border-left:1.5px solid var(--ColorBorders);
  365. padding-left:.75rem;
  366. margin-left:1rem;
  367. margin-top:.5rem;
  368. margin-bottom:.5rem;
  369. }
  370. blockquote p {padding:0!important;}
  371.  
  372. ul {list-style-type:circle; margin:0 0 1rem 0; padding-right:.5rem;}
  373. ol {list-style-type:decimal-leading-zero; margin:0;}
  374. li::marker {color:var(--ColorAccentOne)}
  375.  
  376. small {font-size:.95em;}
  377. big {font-size:1.1em;}
  378.  
  379. h1 {font-size:1.35em; margin:0; color:var(--ColorTitle); display:inline-block;}
  380. h1 a {color:var(--ColorTitle);}
  381. h1 a:hover {color:var(--ColorAccentTwo);}
  382. h2 {font-size:1.25em; color:var(--ColorTitle);}
  383. h3 {font-size:1.15em; color:var(--ColorTitle);}
  384. h4 {font-size:1.1em; color:var(--ColorTitle);}
  385. h5 {font-size:1.05em; color:var(--ColorTitle);}
  386. h1, h1 a, h2, h3, h4, h5 {font-family:var(--TitleFont), sans-serif;}
  387.  
  388. button {font-size:1em;}
  389.  
  390. hr {
  391. height:1px;
  392. border:none;
  393. box-shadow:none;
  394. background:var(--ColorBorders);
  395. }
  396.  
  397. pre {
  398. word-wrap:break-word!important;
  399. white-space:pre-wrap;
  400. }
  401.  
  402. b, strong {
  403. color:var(--ColorTitle);
  404. font-weight:800;
  405. }
  406.  
  407. b a:hover {
  408. color:var(--ColorAccentTwo);
  409. -webkit-transition: all 0.4s;
  410. -moz-transition: all 0.4s;
  411. -ms-transition: all 0.4s;
  412. -o-transition: all 0.4s;
  413. transition: all 0.4s;
  414. }
  415.  
  416. /* common link effects */
  417. .description a, .updates-wrap a, .answercont a, .rbvia a {
  418. display:inline-block;
  419. position:relative;
  420. }
  421. .description a:after, .updates-wrap a:after, .answercont a:after, .rbvia a:after {
  422. content: '';
  423. position:absolute;
  424. bottom:0;
  425. left:0;
  426. width:100%;
  427. height:1.5px;
  428. background:var(--ColorAccentTwo);
  429. border-radius:5px;
  430. transform:scaleX(0);
  431. transform-origin:center;
  432. transition: transform 0.3s ease-out;
  433. }
  434. .description a:hover:after, .updates-wrap a:hover:after, .answercont a:hover:after, .rbvia a:hover:after {
  435. transform: scaleX(1);
  436. transform-origin:center;
  437. }
  438.  
  439. .sr-text {
  440. border: 0;
  441. clip: rect(1px, 1px, 1px, 1px);
  442. clip-path: inset(50%);
  443. height: 1px;
  444. margin: -1px;
  445. overflow: hidden;
  446. padding: 0;
  447. position: absolute;
  448. width: 1px;
  449. word-wrap: normal !important;
  450. }
  451.  
  452. /*--- HEADER ---*/
  453. header {
  454. position:fixed;
  455. top:0;
  456. width:100%;
  457. height:45px;
  458. display:flex;
  459. justify-content:space-between;
  460. align-items:center;
  461. gap:1rem;
  462. background:var(--ColorPostsTwo);
  463. box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
  464. z-index:99999;
  465. }
  466.  
  467. /* header left & right */
  468. .topleft {
  469. padding-left:.5rem;
  470. display:flex;
  471. justify-content:flex-start;
  472. align-items:center;
  473. gap:.5rem;
  474. }
  475. a.headericon {
  476. display:flex;
  477. justify-content:center;
  478. align-items:center;
  479. }
  480. a.headericon:hover {transform:scale(.95);}
  481. a.headericon img {
  482. width:28px;
  483. height:28px;
  484. padding:2px;
  485. background:var(--ColorAccentTwo);
  486. border-radius:100%;
  487. -webkit-transition: all 0.3s;
  488. -moz-transition: all 0.3s;
  489. -ms-transition: all 0.3s;
  490. -o-transition: all 0.3s;
  491. transition: all 0.3s;
  492. }
  493.  
  494. /* SEARCH BAR */
  495. #search {
  496. position:relative;
  497. display:flex;
  498. justify-content:flex-start;
  499. align-items:center;
  500. }
  501. .search {width:100%;}
  502. .search .query {
  503. border: 0;
  504. outline: 0;
  505. font-family:var(--BodyFont), sans-serif;
  506. font-weight:500;
  507. font-size:1em;
  508. color:var(--ColorTitle);
  509. letter-spacing:.05em;
  510. width:100%;
  511. height:100%;
  512. background:transparent;
  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. ::-webkit-input-placeholder {color: var(--ColorTitle); opacity:1;}
  521. :-moz-placeholder {color: var(--ColorTitle); opacity:1;}
  522. ::-moz-placeholder {color: var(--ColorTitle); opacity:1;}
  523. :-ms-input-placeholder {color: var(--ColorTitle); opacity:1;}
  524.  
  525. input:focus::-webkit-input-placeholder {color: var(--ColorText);}
  526. input:focus:-moz-placeholder {color: var(--ColorText);}
  527. input:focus::-moz-placeholder {color: var(--ColorText);}
  528. input:focus:-ms-input-placeholder { color: var(--ColorText);}
  529.  
  530. .topright {
  531. position:relative;
  532. padding-right:.5rem;
  533. height:100%;
  534. display:flex;
  535. justify-content:flex-end;
  536. align-items:center;
  537. gap:.5rem;
  538. line-height:100%;
  539. }
  540.  
  541. .topright a {
  542. display:flex;
  543. justify-content:center;
  544. align-items:center;
  545. }
  546.  
  547. .topright a i, .topright span i {
  548. font-size:1.4em;
  549. color:var(--ColorTitle);
  550. -webkit-transition: all 0.3s;
  551. -moz-transition: all 0.3s;
  552. -ms-transition: all 0.3s;
  553. -o-transition: all 0.3s;
  554. transition: all 0.3s;
  555. }
  556. .topright a:hover i, .topright span:hover i {color:var(--ColorAccentTwo);}
  557.  
  558. /* DAY/NIGHT */
  559. button#theme-toggle {
  560. outline:none;
  561. border:none;
  562. padding:0;
  563. line-height:100%;
  564. background:transparent;
  565. display:flex;
  566. justify-content:center;
  567. align-items:center;
  568. }
  569. button#theme-toggle span {
  570. position:relative;
  571. justify-content:center;
  572. align-items:center;
  573. -webkit-transition: all 0.3s;
  574. -moz-transition: all 0.3s;
  575. -ms-transition: all 0.3s;
  576. -o-transition: all 0.3s;
  577. transition: all 0.3s;
  578. cursor:help;
  579. }
  580.  
  581. button#theme-toggle span:hover i {
  582. -webkit-animation-duration: .75s;
  583. animation-duration: .75s;
  584. -webkit-animation-fill-mode: both;
  585. animation-fill-mode: both;
  586. -webkit-animation-timing-function: ease-in-out;
  587. animation-timing-function: ease-in-out;
  588. animation-iteration-count:1;
  589. -webkit-animation-iteration-count:1;
  590. animation-name:daynight;
  591. -moz-animation-name:daynight;
  592. }
  593.  
  594. @keyframes daynight {
  595. 50% {
  596. -webkit-transform: scaleX(-1);
  597. -ms-transform: scaleX(-1);
  598. transform: scaleX(-1);
  599. }
  600. }
  601.  
  602. /* sidebar button */
  603. a#sidebarbutton {display:none; cursor:help;}
  604. a#sidebarbutton:hover i {transform:scale(.95);}
  605. body.sidebar-click a#sidebarbutton i {color:var(--ColorAccentTwo);}
  606.  
  607. /* TUMBLR CONTROLS */
  608. a#controlsbutton {cursor:help;}
  609. a#controlsbutton:hover i {
  610. -webkit-animation-duration: 1.5s;
  611. animation-duration: 1.5s;
  612. -webkit-animation-fill-mode: both;
  613. animation-fill-mode: both;
  614. -webkit-animation-timing-function: ease-in-out;
  615. animation-timing-function: ease-in-out;
  616. animation-iteration-count:1;
  617. -webkit-animation-iteration-count:1;
  618. animation-name:tumblrcontrols;
  619. -moz-animation-name:tumblrcontrols;
  620. }
  621. body.controls-click a#controlsbutton i {color:var(--ColorAccentTwo);}
  622.  
  623. @keyframes tumblrcontrols {
  624. 45% {
  625. -webkit-transform: rotate(180deg);
  626. -ms-transform: rotate(180deg);
  627. transform: rotate(180deg);
  628. }
  629. 55% {
  630. -webkit-transform: rotate(180deg);
  631. -ms-transform: rotate(180deg);
  632. transform: rotate(180deg);
  633. }
  634. 100% {
  635. -webkit-transform: rotate(360deg);
  636. -ms-transform: rotate(360deg);
  637. transform: rotate(360deg);
  638. }
  639. }
  640.  
  641. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  642. transform:scale(.75);
  643. margin-top:45px;
  644. margin-right:-1rem;
  645. opacity:0;
  646. visibility:hidden;
  647. z-index:999999999!important;
  648. }
  649.  
  650. body.controls-click iframe.tmblr-iframe {
  651. opacity:1.0;
  652. visibility:visible;
  653. -webkit-transition: all 0.5s;
  654. -moz-transition: all 0.5s;
  655. -ms-transition: all 0.5s;
  656. -o-transition: all 0.5s;
  657. transition: all 0.5s;
  658. }
  659.  
  660. /* updates button */
  661. a#updatesbutton, a#updatesclose {cursor:help;}
  662. a#updatesclose {display:none;}
  663. a#updatesclose i {color:var(--ColorAccentTwo);}
  664. a#updatesbutton:hover i, a#updatesclose:hover i {
  665. -webkit-animation-duration: 1s;
  666. animation-duration: 1s;
  667. -webkit-animation-fill-mode: both;
  668. animation-fill-mode: both;
  669. -webkit-animation-timing-function: ease-in-out;
  670. animation-timing-function: ease-in-out;
  671. animation-iteration-count:1;
  672. -webkit-animation-iteration-count:1;
  673. animation-name: wiggle;
  674. -moz-animation-name: wiggle;
  675. }
  676.  
  677. @keyframes wiggle {
  678. 0% {
  679. -webkit-transform: translateX(0px);
  680. -ms-transform: translateX(0px);
  681. transform: translateX(0px)
  682. }
  683. 15% {
  684. -webkit-transform: translateX(0px);
  685. -ms-transform: translateX(0px);
  686. transform: translateX(0px)
  687. }
  688. 30% {
  689. -webkit-transform: rotate(10deg);
  690. -ms-transform: translateX(10deg);
  691. transform: translateX(10deg)
  692. }
  693. 45% {
  694. -webkit-transform: rotate(-10deg);
  695. -ms-transform: rotate(-10deg);
  696. transform: rotate(-10deg)
  697. }
  698. 60% {
  699. -webkit-transform: rotate(10deg);
  700. -ms-transform: rotate(10deg);
  701. transform: rotate(10deg)
  702. }
  703. 75% {
  704. -webkit-transform: rotate(-10deg);
  705. -ms-transform: rotate(-10deg);
  706. transform: rotate(-10deg)
  707. }
  708. 85% {
  709. -webkit-transform: rotate(10deg);
  710. -ms-transform: rotate(10deg);
  711. transform: rotate(10deg)
  712. }
  713. 100% {
  714. -webkit-transform: translateX(0px);
  715. -ms-transform: translateX(0px);
  716. transform: translateX(0px)
  717. }
  718. }
  719.  
  720. /* updates tab */
  721. .updates {
  722. position:absolute;
  723. top:calc(100% + .5rem);
  724. width:250px;
  725. display:none;
  726. flex-direction:column;
  727. box-shadow:-2px 2px 8px -2px rgba(0,0,0,.15);
  728. border-radius:var(--Corners);
  729. }
  730. .updates-title {
  731. width:100%;
  732. display:flex;
  733. justify-content:flex-start;
  734. align-items:center;
  735. padding:1rem;
  736. background:var(--ColorAccentTwo);
  737. border-radius:var(--Corners) var(--Corners) 0 0;
  738. }
  739. .updates-title b {font-family:var(--TitleFont), sans-serif; color:var(--ColorPosts); text-shadow:0 2px rgba(0,0,0,.1);}
  740. .updates-wrap {
  741. width:100%;
  742. display:flex;
  743. flex-direction:column;
  744. gap:.5rem;
  745. padding:1rem;
  746. background:var(--ColorPosts);
  747. border-radius:0 0 var(--Corners) var(--Corners);
  748. }
  749.  
  750. .updates-wrap li {
  751. width:100%;
  752. display:flex;
  753. justify-content:flex-start;
  754. align-items:center;
  755. gap:.5rem;
  756. }
  757.  
  758. .updates-wrap li i {
  759. font-size:1.3em;
  760. color:var(--ColorAccentTwo);
  761. }
  762.  
  763. /* music button */
  764. a#musicbutton, a#musichide {cursor:help;}
  765. a#musichide {display:none;}
  766. a#musichide i {color:var(--ColorAccentTwo);}
  767.  
  768. /* music player */
  769. .music-container {
  770. position:absolute;
  771. top:calc(100% + .5rem);
  772. width:275px;
  773. display:none;
  774. justify-content:space-between;
  775. align-items:center;
  776. gap:1rem;
  777. padding:.75rem;
  778. background:var(--ColorAccentTwo);
  779. box-shadow:-2px 2px 8px -2px rgba(0,0,0,.15);
  780. border-radius:var(--Corners);
  781. }
  782.  
  783. .audio-info {
  784. display:flex;
  785. justify-content:flex-start;
  786. align-items:center;
  787. gap:.5rem;
  788. }
  789.  
  790. .audio-img {
  791. display:flex;
  792. justify-content:center;
  793. align-items:center;
  794. padding:2px;
  795. background:linear-gradient(to top, var(--ColorAccentTwo), var(--ColorGradientTwo));
  796. border-radius:100%;
  797. }
  798. .audio-img img {
  799. width:40px;
  800. height:40px;
  801. object-fit:cover;
  802. padding:2px;
  803. background:var(--ColorAccentText);
  804. border-radius:100%;
  805. animation:rotate 5s linear infinite;
  806. animation-play-state:paused;
  807. }
  808.  
  809. .music-container.play .audio-img img {
  810. animation-play-state:running;
  811. }
  812.  
  813. @keyframes rotate {
  814. from {
  815. transform:rotate(0deg);
  816. }
  817. to {
  818. transform:rotate(360deg);
  819. }
  820. }
  821.  
  822. .audio-info li {
  823. display:flex;
  824. flex-direction:column;
  825. gap:.25rem;
  826. }
  827. .audio-info b {
  828. font-family:var(--TitleFont), sans-serif;
  829. color:var(--ColorPosts);
  830. text-shadow:0 2px rgba(0,0,0,.1);
  831. }
  832. .audio-info span {font-size:.95em; color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
  833.  
  834. .action-btn-big {
  835. position:relative;
  836. display:flex;
  837. justify-content:center;
  838. align-items:center;
  839. padding:.55rem;
  840. background:var(--ColorAccentText);
  841. border:none;
  842. border-radius:100%;
  843. cursor:pointer;
  844. -webkit-transition: all 0.3s;
  845. -moz-transition: all 0.3s;
  846. -ms-transition: all 0.3s;
  847. -o-transition: all 0.3s;
  848. transition: all 0.3s;
  849. }
  850. .action-btn-big:hover {transform:scale(.965);}
  851.  
  852. .action-btn-big i {
  853. font-size:1.3em;
  854. color:var(--ColorAccentTwo);
  855. text-shadow:none;
  856. -webkit-transition: all 0.3s;
  857. -moz-transition: all 0.3s;
  858. -ms-transition: all 0.3s;
  859. -o-transition: all 0.3s;
  860. transition: all 0.3s;
  861. }
  862. .action-btn:focus {outline:0;}
  863.  
  864. .fixedbuttons {
  865. position:fixed;
  866. right:1rem;
  867. bottom:1rem;
  868. display:flex;
  869. flex-direction:column;
  870. justify-content:flex-end;
  871. align-items:center;
  872. gap:.5rem;
  873. z-index:9999;
  874. }
  875.  
  876. .fixedbuttons a {
  877. color:var(--ColorAccentTwo);
  878. display:flex;
  879. justify-content:center;
  880. align-items:center;
  881. padding:.5rem;
  882. background:var(--ColorPosts);
  883. border-radius:var(--Corners);
  884. box-shadow:0 0 8px -2px rgba(0,0,0,.2);
  885. }
  886. .fixedbuttons a:hover {color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1); background:var(--ColorAccentTwo);}
  887. .fixedbuttons i {font-size:1.6em;}
  888.  
  889. /* SCROLL TO TOP */
  890. a#totop {
  891. display:none;
  892. cursor:help;
  893. }
  894. a#totop i {}
  895. a#totop:hover i {
  896. -webkit-animation-duration: 2.5s;
  897. animation-duration: 2.5s;
  898. -webkit-animation-fill-mode: both;
  899. animation-fill-mode: both;
  900. -webkit-animation-timing-function: ease-in-out;
  901. animation-timing-function: ease-in-out;
  902. animation-iteration-count:1;
  903. -webkit-animation-iteration-count:1;
  904. animation-name:totop;
  905. -moz-animation-name:totop;
  906. }
  907.  
  908. @keyframes totop {
  909. 0% {
  910. -webkit-transform: translateY(0px);
  911. -ms-transform: translateY(0px);
  912. transform: translateY(0px)
  913. }
  914. 10% {
  915. -webkit-transform: translateY(-3px);
  916. -ms-transform: translateY(-3px);
  917. transform: translateY(-3px)
  918. }
  919. 20% {
  920. -webkit-transform: translateY(0px);
  921. -ms-transform: translateY(0px);
  922. transform: translateY(0px)
  923. }
  924. 30% {
  925. -webkit-transform: translateY(-3px);
  926. -ms-transform: translateY(-3px);
  927. transform: translateY(-3px)
  928. }
  929. 40% {
  930. -webkit-transform: translateY(0px);
  931. -ms-transform: translateY(0px);
  932. transform: translateY(0px)
  933. }
  934. 50% {
  935. -webkit-transform: translateY(0px);
  936. -ms-transform: translateY(0px);
  937. transform: translateY(0px)
  938. }
  939. 60% {
  940. -webkit-transform: translateY(0px);
  941. -ms-transform: translateY(0px);
  942. transform: translateY(0px)
  943. }
  944. 70% {
  945. -webkit-transform: translateY(-3px);
  946. -ms-transform: translateY(-3px);
  947. transform: translateY(-3px)
  948. }
  949. 80% {
  950. -webkit-transform: translateY(0px);
  951. -ms-transform: translateY(0px);
  952. transform: translateY(0px)
  953. }
  954. 90% {
  955. -webkit-transform: translateY(-3px);
  956. -ms-transform: translateY(-3px);
  957. transform: translateY(-3px)
  958. }
  959. 100% {
  960. -webkit-transform: translateY(0px);
  961. -ms-transform: translateY(0px);
  962. transform: translateY(0px)
  963. }
  964. }
  965.  
  966. /*--- CREDIT: DO NOT TOUCH ---*/
  967. a.credit {}
  968. a.credit i {}
  969. a.credit:hover i {
  970. -webkit-animation-duration: 2s;
  971. animation-duration: 2s;
  972. -webkit-animation-fill-mode: both;
  973. animation-fill-mode: both;
  974. -webkit-animation-timing-function: ease-in-out;
  975. animation-timing-function: ease-in-out;
  976. animation-iteration-count:infinite;
  977. -webkit-animation-iteration-count:infinite;
  978. animation-name: bounce;
  979. -moz-animation-name: bounce;
  980. }
  981.  
  982. @keyframes bounce {
  983. 0% {
  984. -webkit-transform: translateY(0px);
  985. -ms-transform: translateY(0px);
  986. transform: translateY(0px)
  987. }
  988. 25% {
  989. -webkit-transform: translateY(-3px);
  990. -ms-transform: translateY(-3px);
  991. transform: translateY(-3px)
  992. }
  993. 50% {
  994. -webkit-transform: translateY(0px);
  995. -ms-transform: translateY(0px);
  996. transform: translateY(0px)
  997. }
  998. 75% {
  999. -webkit-transform: translateY(-3px);
  1000. -ms-transform: translateY(-3px);
  1001. transform: translateY(-3px)
  1002. }
  1003. 100% {
  1004. -webkit-transform: translateY(0px);
  1005. -ms-transform: translateY(0px);
  1006. transform: translateY(0px)
  1007. }
  1008. }
  1009.  
  1010. /*---- SIDEBARS ----*/
  1011. aside {width:calc(300px + 2rem + 2px);}
  1012. {block:ifRightSidebar}aside.left {display:none;}{/block:ifRightSidebar}
  1013.  
  1014. #sidebar {
  1015. position:sticky;
  1016. top:calc(45px + 3rem);
  1017. margin-top:calc(45px + 3rem);
  1018. width:calc(300px + 2rem + 2px);
  1019. display:flex;
  1020. flex-direction:column;
  1021. justify-content:space-between;
  1022. align-items:center;
  1023. gap:.5rem;
  1024. transition:ease-in-out .55s;
  1025. }
  1026.  
  1027. /*-- SIDEBAR --*/
  1028. .sidebar {
  1029. position:relative;
  1030. width:100%;
  1031. display:flex;
  1032. flex-direction:column;
  1033. align-items:flex-start;
  1034. background:var(--ColorPosts);
  1035. box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
  1036. border-radius:var(--Corners);
  1037. }
  1038.  
  1039. .side-title {
  1040. width:100%;
  1041. display:flex;
  1042. justify-content:flex-start;
  1043. align-items:center;
  1044. gap:.5rem;
  1045. padding:1rem;
  1046. background:var(--ColorPostsTwo);
  1047. border-radius:var(--Corners) var(--Corners) 0 0;
  1048. }
  1049. .side-title img {
  1050. display:flex;
  1051. justify-content:center;
  1052. align-items:center;
  1053. }
  1054. .side-title img {
  1055. width:55px;
  1056. height:55px;
  1057. border-radius:100%;
  1058. }
  1059. .side-title a {
  1060. width:fit-content;
  1061. display:flex;
  1062. flex-direction:column;
  1063. gap:.15rem;
  1064. }
  1065. .side-title b {
  1066. font-family:var(--TitleFont), sans-serif;
  1067. font-size:1.1em;
  1068. -webkit-transition: all 0.3s;
  1069. -moz-transition: all 0.3s;
  1070. -ms-transition: all 0.3s;
  1071. -o-transition: all 0.3s;
  1072. transition: all 0.3s;
  1073. }
  1074. .side-title a:hover b {color:var(--ColorAccentTwo);}
  1075. .side-title li {
  1076. display:flex;
  1077. align-items:center;
  1078. gap:.25rem;
  1079. }
  1080. .side-title li i {
  1081. font-size:1.2em;
  1082. color:var(--ColorAccentTwo);
  1083. }
  1084. .side-title li span {
  1085. color:var(--ColorText);
  1086. -webkit-transition: all 0.3s;
  1087. -moz-transition: all 0.3s;
  1088. -ms-transition: all 0.3s;
  1089. -o-transition: all 0.3s;
  1090. transition: all 0.3s;
  1091. }
  1092. .side-title a:hover li span {color:var(--ColorTitle);}
  1093.  
  1094. .side-img {
  1095. width:100%;
  1096. display:flex;
  1097. justify-content:center;
  1098. align-items:center;
  1099. }
  1100. .side-img img {
  1101. width:100%;
  1102. height:300px;
  1103. object-fit:cover;
  1104. }
  1105.  
  1106. .description {
  1107. width:100%;
  1108. padding:1rem;
  1109. }
  1110. .description p {margin-bottom:0;}
  1111.  
  1112. nav {
  1113. width:100%;
  1114. display:flex;
  1115. justify-content:space-evenly;
  1116. align-items:center;
  1117. gap:.5rem;
  1118. padding:1rem;
  1119. background:var(--ColorAccentTwo);
  1120. border-radius:0 0 var(--Corners) var(--Corners);
  1121. }
  1122.  
  1123. nav a {
  1124. color:var(--ColorPosts);
  1125. display:flex;
  1126. justify-content:center;
  1127. align-items:center;
  1128. }
  1129. nav a:hover {transform:scale(1.05); color:var(--ColorAccentText);}
  1130. nav a i {font-size:1.5em; text-shadow:0 1px rgba(0,0,0,.1);}
  1131.  
  1132. /*-- ask box --*/
  1133. #ask_form {margin-bottom:-6px; border-radius: 0 0 var(--Corners) var(--Corners);}
  1134. #submit_form {margin-bottom:-6px; border-radius: 0 0 var(--Corners) var(--Corners);}
  1135. /*-- read more --*/
  1136. a.read_more {font-size:.95em; text-transform:uppercase;}
  1137.  
  1138. /*--- MAIN STYLING ---*/
  1139.  
  1140. main {
  1141. position:relative;
  1142. width:100%;
  1143. height:100%;
  1144. display:flex;
  1145. flex-direction:column;
  1146. align-items:center;
  1147. }
  1148. section {
  1149. position:relative;
  1150. width:100%;
  1151. height:100%;
  1152. margin:auto;
  1153. display:flex;
  1154. justify-content:center;
  1155. gap:3rem;
  1156. transition:ease-in-out .55s;
  1157. }
  1158.  
  1159. .section-wrap {
  1160. position:relative;
  1161. width:calc(540px + 3.5rem);
  1162. margin-bottom:4rem;
  1163. padding-right:3.5rem;
  1164. {block:ifRightSidebar}
  1165. padding-right:0;
  1166. padding-left:3.5rem;
  1167. {/block:ifRightSidebar}
  1168. transition:ease-in-out .55s;
  1169. }
  1170.  
  1171. article {
  1172. position:relative;
  1173. width:100%;
  1174. margin:var(--PostMargin) auto auto auto;
  1175. }
  1176. article:first-of-type {margin-top:calc(45px + 3rem);}
  1177.  
  1178. .article-wrap {
  1179. position:relative;
  1180. width:100%;
  1181. background:var(--ColorPosts);
  1182. box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
  1183. border-radius:var(--Corners);
  1184. z-index:1;
  1185. }
  1186. .post-wrap {width:100%;}
  1187.  
  1188. /*--- FLOATING INFO ----*/
  1189. .floating {
  1190. position:absolute;
  1191. top:0;
  1192. left:calc(100% + .75rem);
  1193. {block:ifRightSidebar}
  1194. left:auto;
  1195. right:calc(100% + .75rem);
  1196. {/block:ifRightSidebar}
  1197. height:100%;
  1198. z-index:99;
  1199. }
  1200.  
  1201. .stickyfloat {
  1202. position:sticky;
  1203. top:calc(45px + .5rem);
  1204. display:flex;
  1205. flex-direction:column;
  1206. align-items:center;
  1207. gap:.75rem;
  1208. }
  1209. .stickyfloat a {
  1210. color:var(--ColorAccentTwo);
  1211. display:flex;
  1212. justify-content:center;
  1213. align-items:center;
  1214. padding:.5rem;
  1215. background:var(--ColorPostsTwo);
  1216. border-radius:var(--Corners);
  1217. box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
  1218. }
  1219. .stickyfloat a:hover {transform:scale(.965); color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1); background:var(--ColorAccentTwo);}
  1220. .stickyfloat a i {font-size:1.4em;}
  1221. .stickyfloat a.pinned i {transform:scaleX(1);}
  1222. {block:ifRightSidebar}.stickyfloat a.pinned i {transform:scaleX(-1);}{/block:ifRightSidebar}
  1223.  
  1224. /*--- TOP POST INFO ---*/
  1225. .topinfo {
  1226. position:relative;
  1227. width:100%;
  1228. display:flex;
  1229. justify-content:space-between;
  1230. align-items:center;
  1231. gap:.5rem;
  1232. padding:1rem;
  1233. background:var(--ColorPostsTwo);
  1234. border-radius:var(--Corners) var(--Corners) 0 0;
  1235. }
  1236.  
  1237. .topinfo-left {
  1238. display:flex;
  1239. justify-content:flex-start;
  1240. align-items:center;
  1241. gap:.5rem;
  1242. }
  1243. .topinfo-img {
  1244. display:flex;
  1245. justify-content:center;
  1246. align-items:center;
  1247. }
  1248. .topinfo-img img {
  1249. width:55px;
  1250. height:55px;
  1251. border-radius:100%;
  1252. }
  1253.  
  1254. .topinfo-text {
  1255. display:flex;
  1256. flex-direction:column;
  1257. gap:.15rem;
  1258. }
  1259.  
  1260. a.topinfo-title {
  1261. font-family:var(--TitleFont), sans-serif;
  1262. font-size:1.1em;
  1263. font-weight:bold;
  1264. color:var(--ColorTitle);
  1265. }
  1266. a.topinfo-title:hover {color:var(--ColorAccentTwo);}
  1267.  
  1268. /* top date */
  1269. .topdate {
  1270. display:flex;
  1271. justify-content:flex-start;
  1272. align-items:center;
  1273. gap:.25rem;
  1274. }
  1275. .topdate i {
  1276. font-size:1.2em;
  1277. color:var(--ColorAccentTwo);
  1278. }
  1279. .topdate i#smalldot {font-size:.5em; margin:.1rem .05rem 0 .05rem;}
  1280. .topdate span {font-size:.95em; color:var(--ColorText); text-transform:lowercase;}
  1281.  
  1282. /* top info right */
  1283. .topinfo-right {
  1284. position:relative;
  1285. display:flex;
  1286. justify-content:flex-end;
  1287. align-items:center;
  1288. gap:.5rem;
  1289. }
  1290.  
  1291. /*--- POST STUFF ---*/
  1292. article .caption p {
  1293. margin:0!important;
  1294. padding:.5rem 1rem .5rem 1rem;
  1295. }
  1296. .caption p {margin-top:0!important; margin-bottom:0;}
  1297. .caption p:first-of-type {padding-top:1rem;}
  1298. .caption p:last-of-type {padding-bottom:1rem;}
  1299.  
  1300. /*-- text posts --*/
  1301. .userlink {
  1302. display:flex;
  1303. justify-content:flex-start;
  1304. align-items:center;
  1305. gap:.5rem;
  1306. padding:0;
  1307. margin:1rem .5rem .5rem 1rem;
  1308. }
  1309. .userlink.first {display:none;}
  1310. .userlink img {
  1311. width:1.5em;
  1312. height:1.5em;
  1313. padding:2px;
  1314. background:var(--ColorAccentOne);
  1315. border-radius:100%;
  1316. }
  1317. .userlink a {color:var(--ColorTitle); font-weight:500;}
  1318. .userlink a:hover {color:var(--ColorAccentOne);}
  1319. .userlink a.deactive:after {
  1320. content:'(deactivated)';
  1321. margin-left:.5em;
  1322. font-size:.9em;
  1323. font-weight:normal;
  1324. color:var(--ColorText);
  1325. }
  1326.  
  1327. p:empty {display:none;}
  1328.  
  1329. article h1 {
  1330. margin:0;
  1331. padding:1rem 1rem .5rem 1rem;
  1332. font-family:var(--TitleFont), sans-serif;
  1333. font-size:1.3rem;
  1334. color:var(--ColorTitle);
  1335. }
  1336. article h2 {
  1337. margin:0;
  1338. padding:1rem 1rem .5rem 1rem;
  1339. }
  1340.  
  1341. article img {display:block;}
  1342. article iframe,
  1343. article img {max-width:100%;}
  1344.  
  1345. .vignette, #vignette {opacity:0;}
  1346. .tmblr-lightbox, #tumblr_lightbox {
  1347. backdrop-filter:blur(10px);
  1348. background-color:rgba(0,0,0,.25)!important;
  1349. z-index:9999999;
  1350. }
  1351. .lightbox-image, #tumblr_lightbox img {
  1352. box-shadow:none!important;
  1353. }
  1354. #tumblr_lightbox_caption, .lightbox-caption {
  1355. color:#fff!important;
  1356. font-family:inherit;
  1357. margin-top:1em!important;
  1358. z-index:9999999;
  1359. }
  1360.  
  1361. /*-- photo posts
  1362. .npf_inst > *:last-child {
  1363. border-radius:0 0 var(--Corners) var(--Corners);
  1364. }
  1365. .npf_inst > *:first-child {
  1366. border-radius:var(--Corners) var(--Corners) 0 0;
  1367. }
  1368. .npf_inst > *:only-child {
  1369. border-radius:var(--Corners);
  1370. }
  1371.  
  1372. /*-- poll posts --*/
  1373. .poll-post {padding:1rem 1rem 1rem 1rem!important;}
  1374. .poll-post p {padding-top:.5rem!important; padding-bottom:.5rem!important;}
  1375. .poll-post .poll-question {
  1376. font-size:1.2rem!important;
  1377. color:var(--ColorTitle);
  1378. padding:0!important;
  1379. margin:0!important;
  1380. }
  1381. .poll-post a.poll-row {}
  1382. .poll-post a.poll-row:hover {text-shadow:0 1px rgba(0,0,0,.1)!important;}
  1383. .poll-post .poll-see-results {
  1384. margin-top:.5rem;
  1385. font-weight:bold;
  1386. text-transform:uppercase;
  1387. color:var(--ColorTitle)!important;
  1388. }
  1389.  
  1390. /*-- quote posts --*/
  1391. .quotepost {width:100%;}
  1392. article .quote,
  1393. article .source {padding:1rem;}
  1394. .quote {
  1395. font-family:var(--TitleFont), sans-serif;
  1396. font-size:1.1em;
  1397. color:var(--ColorTitle);
  1398. }
  1399. .source {color:var(--ColorTitle);}
  1400.  
  1401. p.npf_quote {color:var(--ColorTitle);}
  1402. p.npf_quote + p {color:var(--ColorTitle);}
  1403.  
  1404. /*-- legacy link posts --*/
  1405. .linkpost {width:100%; background:var(--ColorAccentTwo);}
  1406. .linkpost a {
  1407. width:100%;
  1408. display:flex;
  1409. flex-direction:column;
  1410. }
  1411. .linktitle {
  1412. position:relative;
  1413. width:100%;
  1414. height:325px;
  1415. z-index:2;
  1416. }
  1417. .linkimage {
  1418. position:absolute;
  1419. left:0;
  1420. bottom:0;
  1421. width:100%;
  1422. height:100%;
  1423. display:flex;
  1424. justify-content:center;
  1425. align-items:center;
  1426. z-index:-1;
  1427. }
  1428. .linkimage img {
  1429. width:100%;
  1430. height:100%;
  1431. object-fit:cover;
  1432. }
  1433. .linktitle li {
  1434. position:relative;
  1435. width:100%;
  1436. height:100%;
  1437. padding:1rem;
  1438. display:flex;
  1439. justify-content:center;
  1440. align-items:center;
  1441. gap:1.5rem;
  1442. backdrop-filter: blur(2px);
  1443. z-index:2;
  1444. }
  1445. .linktitle li:after {
  1446. content:'';
  1447. position:absolute;
  1448. top:0;
  1449. left:0;
  1450. width:100%;
  1451. height:100%;
  1452. opacity:.65;
  1453. background:var(--ColorAccentTwo);
  1454. z-index:-1;
  1455. }
  1456. .linktitle b {
  1457. font-family:var(--TitleFont), sans-serif;
  1458. font-size:1.3em;
  1459. color:var(--ColorPosts);
  1460. text-shadow:0 2px rgba(0,0,0,.1);
  1461. text-transform:lowercase;
  1462. }
  1463. .linktitle i {
  1464. font-size:1.4em;
  1465. color:var(--ColorPosts);
  1466. text-shadow:0 2px rgba(0,0,0,.1);
  1467. -webkit-transition: all 0.3s;
  1468. -moz-transition: all 0.3s;
  1469. -ms-transition: all 0.3s;
  1470. -o-transition: all 0.3s;
  1471. transition: all 0.3s;
  1472. }
  1473. .linkpost a:hover .linktitle i {margin-left:1rem;}
  1474. .linktext {
  1475. width:100%;
  1476. padding:1rem;
  1477. color:var(--ColorPosts);
  1478. text-shadow:0 1px rgba(0,0,0,.1);
  1479. }
  1480.  
  1481. /* npf link posts */
  1482. .npf-link-block {
  1483. position:relative;
  1484. width:100%;
  1485. margin:0!important;
  1486. color:var(--ColorBackground)!important;
  1487. text-shadow:0 1px rgba(0,0,0,.1);
  1488. background:var(--ColorAccentTwo);
  1489. border:none!important;
  1490. border-radius:0!important;
  1491. z-index:1;
  1492. }
  1493.  
  1494. .npf-link-block .poster {border-bottom:none!important; border-radius:0!important;}
  1495.  
  1496. .npf-link-block .description {
  1497. padding:0;
  1498. overflow:hidden;
  1499. text-overflow:ellipsis;
  1500. font-weight:400;
  1501. color:var(--ColorPosts)!important;
  1502. text-shadow:0 1px rgba(0,0,0,.1);
  1503. transition:ease-in-out .5s;
  1504. }
  1505. .npf-link-block a:hover .description {color:var(--ColorAccentText)!important;}
  1506.  
  1507. .npf-link-block .title {
  1508. width:fit-content!important;
  1509. text-shadow:0 1px rgba(0,0,0,.1);
  1510. }
  1511.  
  1512. .npf-link-block .bottom .site-name {
  1513. color:var(--ColorTitle);
  1514. -webkit-transition: all 0.5s;
  1515. -moz-transition: all 0.5s;
  1516. -ms-transition: all 0.5s;
  1517. -o-transition: all 0.5s;
  1518. transition: all 0.5s;
  1519. }
  1520. .npf-link-block a:hover .bottom .site-name {opacity:1;}
  1521.  
  1522. /*-- answer posts --*/
  1523. .answer-post .caption:last-of-type {padding-top:0!important; padding-bottom:0!important;}
  1524. article .question {
  1525. position:relative;
  1526. width:100%;
  1527. padding:1rem;
  1528. display:flex;
  1529. flex-direction:column;
  1530. align-items:flex-start;
  1531. background:var(--ColorAccentTwo);
  1532. }
  1533. .qheader {
  1534. width:fit-content;
  1535. display:flex;
  1536. justify-content:flex-start;
  1537. align-items:center;
  1538. gap:.35rem;
  1539. }
  1540. .qicon {
  1541. width:2rem;
  1542. height:2rem;
  1543. padding:2px;
  1544. display:flex;
  1545. justify-content:center;
  1546. align-items:center;
  1547. background:var(--ColorAccentText);
  1548. border-radius:100%;
  1549. }
  1550. .qicon img {
  1551. width:100%;
  1552. height:100%;
  1553. border-radius:100%;
  1554. }
  1555. .qheader li {
  1556. position:relative;
  1557. color:var(--ColorPosts);
  1558. text-shadow:0 1px rgba(0,0,0,.1);
  1559. width:fit-content;
  1560. display:flex;
  1561. justify-content:center;
  1562. align-items:center;
  1563. gap:.25rem;
  1564. }
  1565. .qheader b {font-size:1.025em; font-weight:600; color:var(--ColorPosts); white-space:nowrap;}
  1566. .qheader a {color:var(--ColorPosts);}
  1567. .qheader a:hover {color:var(--ColorAccentText);}
  1568.  
  1569. .qcont {
  1570. position:relative;
  1571. width:100%;
  1572. color:var(--ColorPosts);
  1573. text-shadow:0 1px rgba(0,0,0,.1);
  1574. text-align:left;
  1575. }
  1576. .qcont a {color:var(--ColorAccentText);}
  1577. .qcont a:hover {color:var(--ColorPosts);}
  1578.  
  1579. /* answer */
  1580. article .replies {padding:0;}
  1581. article .answer {padding:1rem;}
  1582. .answerheader {
  1583. display:flex;
  1584. justify-content:flex-start;
  1585. align-items:center;
  1586. gap:.35rem;
  1587. }
  1588. .answerheader li {list-style-type:none;}
  1589. .answerheader li a {font-size:1.025em; font-weight:600; color:var(--ColorTitle);}
  1590. .answerheader li a:hover {color:var(--ColorAccentTwo);}
  1591. .answerheader .aicon {
  1592. width:2rem;
  1593. height:2rem;
  1594. display:flex;
  1595. justify-content:center;
  1596. align-items:center;
  1597. padding:2px;
  1598. background:var(--ColorAccentTwo);
  1599. border-radius:100%;
  1600. }
  1601. .answerheader .aicon img {
  1602. width:100%;
  1603. height:100%;
  1604. border-radius:100%;
  1605. }
  1606. .answerheader a {color:var(--ColorTitle);}
  1607. .answerheader a:hover {color:var(--ColorAccentTwo);}
  1608. .answercont {}
  1609. .answercont p:last-of-type {margin-bottom:0;}
  1610.  
  1611. /*--- AUDIO POSTS ---*/
  1612. .audiopost {
  1613. width:100%;
  1614. display:flex;
  1615. justify-content:space-between;
  1616. align-items:center;
  1617. background:var(--ColorAccentTwo);
  1618. }
  1619. .audiopost iframe {width:100%;}
  1620.  
  1621. .albumart {
  1622. display:flex;
  1623. justify-content:center;
  1624. align-items:center;
  1625. }
  1626.  
  1627. .albumart img {
  1628. width:5.5rem;
  1629. height:5.5rem;
  1630. object-fit:cover;
  1631. border-radius:0;
  1632. }
  1633.  
  1634. .audiotitle {
  1635. padding:.5rem 1rem .5rem 1rem;
  1636. display:flex;
  1637. justify-content:flex-start;
  1638. align-items:center;
  1639. gap:1rem;
  1640. }
  1641.  
  1642. .audioplay {
  1643. position:relative;
  1644. width:30px;
  1645. height:30px;
  1646. overflow:hidden;
  1647. z-index:1;
  1648. }
  1649. .audioplaybg {
  1650. transform:scale(.85);
  1651. display:flex;
  1652. justify-content:center;
  1653. align-items:center;
  1654. padding:8px 8px 5px 5px;
  1655. background:#f2f2f2;
  1656. border-radius:100%;
  1657. }
  1658.  
  1659. .audiotitle li {
  1660. display:flex;
  1661. flex-direction:column;
  1662. align-items:flex-start;
  1663. gap:.15em;
  1664. }
  1665.  
  1666. .audiotitle b {font-size:1.05em; color:var(--ColorBackground); text-shadow:0 1px rgba(0,0,0,.1);}
  1667.  
  1668. .audiotitle span {color:var(--ColorBackground); text-shadow:0 1px rgba(0,0,0,.1);}
  1669.  
  1670. .spotify_audio_player,
  1671. article iframe[src*='soundcloud'] {
  1672. max-height:calc(170px + 1rem);
  1673. border:0;
  1674. padding:1rem;
  1675. padding-bottom:0;
  1676. }
  1677.  
  1678. /*--- CHAT POSTS ---*/
  1679. .chatpost {padding:1rem 1rem 1rem 1rem;}
  1680. .chatpost li {
  1681. font-family:'Courier', sans-serif;
  1682. width:100%;
  1683. list-style-type:none;
  1684. }
  1685. .chatpost li b {text-transform:uppercase;}
  1686.  
  1687. .npf_chat {margin:0!important; padding:1rem 1rem 1rem 1rem!important;}
  1688.  
  1689. /*--- BOTTOM POST INFO ---*/
  1690. .bottominfo {
  1691. width:100%;
  1692. display:flex;
  1693. justify-content:space-between;
  1694. align-items:center;
  1695. gap:1rem;
  1696. padding:1rem;
  1697. background:var(--ColorPostsTwo);
  1698. border-radius:0 0 var(--Corners) var(--Corners);
  1699. }
  1700.  
  1701. .bottominfo-left {
  1702. display:flex;
  1703. justify-content:flex-start;
  1704. align-items:center;
  1705. gap:.5rem;
  1706. }
  1707. .rbvia {
  1708. display:flex;
  1709. justify-content:flex-start;
  1710. align-items:center;
  1711. z-index:2;
  1712. }
  1713. .rbvia img {
  1714. width:26px;
  1715. height:26px;
  1716. padding:2px;
  1717. background:var(--ColorAccentTwo);
  1718. border-radius:100%;
  1719. box-shadow:1px 0 var(--ColorPostsTwo);
  1720. }
  1721. .rbvia i {
  1722. font-size:1.1em;
  1723. width:26px;
  1724. height:26px;
  1725. margin-left:-8px;
  1726. color:var(--ColorAccentText);
  1727. text-shadow:0 1px rgba(0,0,0,.1);
  1728. display:flex;
  1729. justify-content:center;
  1730. align-items:center;
  1731. background:var(--ColorAccentTwo);
  1732. border-radius:100%;
  1733. z-index:-1;
  1734. }
  1735. .rbvia span {
  1736. margin-left:.35rem;
  1737. font-weight:500;
  1738. color:var(--ColorTitle);
  1739. }
  1740.  
  1741. .bottominfo-right {
  1742. position:relative;
  1743. display:flex;
  1744. justify-content:flex-end;
  1745. align-items:center;
  1746. gap:.5rem;
  1747. }
  1748. .bottominfo-right a {
  1749. display:flex;
  1750. justify-content:center;
  1751. align-items:center;
  1752. }
  1753.  
  1754. /* more info buttons */
  1755. a#morebutton, a#moreclose {
  1756. color:var(--ColorAccentTwo);
  1757. display:flex;
  1758. justify-content:center;
  1759. align-items:center;
  1760. cursor:help;
  1761. }
  1762. a#morebutton:hover, a#moreclose:hover {transform:scale(.95);}
  1763. a#moreclose {display:none; color:var(--ColorAccentTwo);}
  1764. a#morebutton i, a#moreclose i {font-size:1.5em;}
  1765.  
  1766. /* more info */
  1767. .moreinfo {
  1768. position:absolute;
  1769. bottom:calc(100% + .5rem);
  1770. width:200px;
  1771. overflow:hidden;
  1772. display:none;
  1773. flex-direction:column;
  1774. box-shadow:0 2px 8px -2px rgba(0,0,0,.2);
  1775. border-radius:var(--Corners);
  1776. z-index:9;
  1777. }
  1778. .moreinfo b {
  1779. width:100%;
  1780. padding:.75rem;
  1781. font-weight:normal;
  1782. text-align:center;
  1783. text-transform:lowercase;
  1784. background:var(--ColorPostsTwo);
  1785. }
  1786. .moreinfo a {
  1787. width:100%;
  1788. white-space:nowrap;
  1789. overflow:hidden;
  1790. text-overflow:ellipsis;
  1791. padding:.75rem;
  1792. display:flex;
  1793. justify-content:flex-start;
  1794. align-items:center;
  1795. gap:.5rem;
  1796. background:var(--ColorPosts);
  1797. }
  1798. .moreinfo a:hover {background:var(--ColorAccentTwo);}
  1799.  
  1800. .moreinfo a i {
  1801. font-size:1.2em;
  1802. color:var(--ColorAccentTwo);
  1803. -webkit-transition: all 0.3s;
  1804. -moz-transition: all 0.3s;
  1805. -ms-transition: all 0.3s;
  1806. -o-transition: all 0.3s;
  1807. transition: all 0.3s;
  1808. }
  1809. .moreinfo a span {
  1810. font-size:.975em;
  1811. color:var(--ColorText);
  1812. text-transform:lowercase;
  1813. white-space:nowrap;
  1814. overflow:hidden;
  1815. text-overflow:ellipsis;
  1816. -webkit-transition: all 0.3s;
  1817. -moz-transition: all 0.3s;
  1818. -ms-transition: all 0.3s;
  1819. -o-transition: all 0.3s;
  1820. transition: all 0.3s;
  1821. }
  1822. .moreinfo a:hover i, .moreinfo a:hover span {color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
  1823.  
  1824. .bottominfo-right span {
  1825. display:flex;
  1826. justify-content:center;
  1827. align-items:center;
  1828. }
  1829. a.like-button:hover, a.clicktagsbutton:hover {transform:scale(.95);}
  1830. a.like-button i, a.clicktagsbutton i {
  1831. font-size:1.45em;
  1832. color:transparent;
  1833. -webkit-text-stroke-width:1.35px;
  1834. -webkit-text-stroke-color:var(--ColorAccentTwo);
  1835. -webkit-transition: all 0.3s;
  1836. -moz-transition: all 0.3s;
  1837. -ms-transition: all 0.3s;
  1838. -o-transition: all 0.3s;
  1839. transition: all 0.3s;
  1840. }
  1841. .like-button {
  1842. position:relative;
  1843. display:inline-block;
  1844. }
  1845. .like-button .like_button iframe {
  1846. position:absolute;
  1847. top:0;
  1848. left:0;
  1849. bottom:0;
  1850. right:0;
  1851. z-index:2;
  1852. opacity:0;
  1853. }
  1854. .like_button iframe {width:100%!important; height:100%!important;}
  1855. .like-button .liked + .actual-button i {
  1856. color:var(--ColorAccentTwo);
  1857. }
  1858. a.clicktagsbutton.tags-click i {
  1859. color:var(--ColorAccentTwo);
  1860. }
  1861.  
  1862. /*--- TAGS ---*/
  1863. .tags, .clicktags {
  1864. position:relative;
  1865. width:100%;
  1866. display:flex;
  1867. justify-content:flex-start;
  1868. align-items:center;
  1869. flex-wrap:wrap;
  1870. gap:.5rem;
  1871. margin-top:1rem;
  1872. }
  1873.  
  1874. a.tagsbutton {display:none;}
  1875. a.clicktagsbutton {cursor:help;}
  1876.  
  1877. .tags a, .clicktags a {
  1878. font-size:.95em;
  1879. color:var(--ColorText);
  1880. padding:.35em .85em .35em .85em;
  1881. background:var(--ColorPosts);
  1882. box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
  1883. border-radius:var(--Corners);
  1884. }
  1885. .tags a:hover, .clicktags a:hover {color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1); background:var(--ColorAccentTwo);}
  1886.  
  1887. /*--- TAG AND DAY PAGES ---*/
  1888. .tdpage {
  1889. position:relative;
  1890. width:100%;
  1891. padding:1rem;
  1892. display:flex;
  1893. justify-content:flex-start;
  1894. align-items:center;
  1895. gap:.5rem;
  1896. background:var(--ColorPosts);
  1897. border-radius:var(--Corners);
  1898. box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
  1899. }
  1900. .td-icon {
  1901. width:1.85rem;
  1902. height:1.85rem;
  1903. display:flex;
  1904. justify-content:center;
  1905. align-items:center;
  1906. background:var(--ColorAccentTwo);
  1907. border-radius:var(--Corners);
  1908. }
  1909. .td-icon i {
  1910. font-size:1.3em;
  1911. color:var(--ColorAccentText);
  1912. text-shadow:0 1px rgba(0,0,0,.1);
  1913. display:flex;
  1914. justify-content:center;
  1915. align-items:center;
  1916. }
  1917. .td-text {text-transform:lowercase;}
  1918. .td-text b {}
  1919.  
  1920. /*--- PERMALINK PAGE ---*/
  1921. .permalinkpage {
  1922. width:100%;
  1923. margin-top:2rem;
  1924. background:var(--ColorPosts);
  1925. border-radius:var(--Corners);
  1926. box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
  1927. }
  1928.  
  1929. .permalink-info {
  1930. width:100%;
  1931. padding:1rem;
  1932. display:flex;
  1933. flex-direction:column;
  1934. justify-content:flex-start;
  1935. align-items:flex-start;
  1936. gap:1rem;
  1937. }
  1938. .permalink-info li {
  1939. display:flex;
  1940. justify-content:flex-start;
  1941. align-items:center;
  1942. gap:.5rem;
  1943. }
  1944. .permalink-info span {text-transform:lowercase;}
  1945. .permalink-info li i {
  1946. font-size:1.2em;
  1947. color:var(--ColorTitle);
  1948. }
  1949. .permalink-info a {font-weight:600; color:var(--ColorTitle);}
  1950. .permalink-info a:hover {color:var(--ColorAccentTwo);}
  1951. .permalink-info b {font-weight:600;}
  1952.  
  1953. /* post notes */
  1954. .postnotes {width:100%; padding:1rem; border-top:1px solid var(--ColorBorders);}
  1955. ol.notes {
  1956. max-width: 100%;
  1957. margin:0;
  1958. padding:0;
  1959. }
  1960.  
  1961. .more_notes_link {
  1962. width:100%!important;
  1963. }
  1964. a.more_notes_link {
  1965. font-size:.925em;
  1966. font-weight:normal;
  1967. color:var(--ColorTitle);
  1968. letter-spacing:.075em;
  1969. text-transform:uppercase!important;
  1970. }
  1971. a.more_notes_link:hover {color:var(--ColorAccentTwo);}
  1972.  
  1973. ol.notes li.note blockquote {
  1974. display:none;
  1975. }
  1976.  
  1977. ol.notes li.note {
  1978. padding:.5rem .75rem .5rem 0;
  1979. list-style-type:none;
  1980. display:flex;
  1981. align-items:center;
  1982. gap:.25rem;
  1983. font-size:.975em;
  1984. }
  1985. ol.notes li.note:first-of-type {border-top:none;}
  1986. ol.notes li.note a {text-transform:lowercase;}
  1987.  
  1988. ol.notes li.note img.avatar {
  1989. width:1.75em!important;
  1990. height:1.75em!important;
  1991. display:flex;
  1992. align-items:center;
  1993. margin-right:.25rem!important;
  1994. padding:2px;
  1995. background:var(--ColorAccentTwo);
  1996. border-radius:100%;
  1997. }
  1998.  
  1999. ol.notes li.note.reblog::after {
  2000. content: '\eb72';
  2001. color:var(--ColorAccentOne);
  2002. }
  2003.  
  2004. ol.notes li.note.like::after {
  2005. content: '\eabe';
  2006. color:var(--ColorAccentTwo);
  2007. }
  2008.  
  2009. ol.notes li.note.reply::after {
  2010. content:'\eaed';
  2011. color:var(--ColorAccentTwo);
  2012. }
  2013. ol.notes li.note.reply span {
  2014. width:calc(100% - 3rem);
  2015. color:var(--ColorText);
  2016. white-space:nowrap;
  2017. overflow:hidden;
  2018. text-overflow:ellipsis;
  2019. }
  2020. ol.notes li.note.reply span.action {
  2021. color:var(--ColorText);
  2022. }
  2023.  
  2024. ol.notes li.note.original_post::after {
  2025. content:'\eae8';
  2026. color:var(--ColorTitle);
  2027. }
  2028. ol.notes li.note.original_post {
  2029. font-weight:bold;
  2030. color:var(--ColorTitle);
  2031. }
  2032.  
  2033. ol.notes li.note.reblog, ol.notes li.note.like, ol.notes li.note.original_post, ol.notes li.note.reply, a.more_notes_link {
  2034. position:relative;
  2035. }
  2036. ol.notes li.note.reblog span, ol.notes li.note.like span, ol.notes li.note.original_post span, ol.notes li.note.reply span {margin-right:.3em; margin-left:.3em;}
  2037. ol.notes li.note.reblog::after, ol.notes li.note.like::after, ol.notes li.note.original_post::after, ol.notes li.note.reply::after, a.more_notes_link::after {
  2038. position:absolute;
  2039. right:0;
  2040. font-family:'tabler-icons';
  2041. }
  2042.  
  2043. /*--- PAGINATION ---*/
  2044. .pagination {
  2045. position:relative;
  2046. width:100%;
  2047. padding:1rem;
  2048. display:flex;
  2049. justify-content:space-between;
  2050. align-items:center;
  2051. gap:1rem;
  2052. background:var(--ColorPosts);
  2053. border-radius:var(--Corners);
  2054. box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
  2055. }
  2056.  
  2057. .pg-text {}
  2058. a.pg-prev, a.pg-next {
  2059. display:flex;
  2060. justify-content:center;
  2061. align-items:center;
  2062. padding:.5rem;
  2063. background:var(--ColorBackground);
  2064. border-radius:var(--Corners);
  2065. }
  2066. a.pg-prev:hover, a.pg-next:hover {background:var(--ColorAccentTwo);}
  2067.  
  2068. a.pg-prev i, a.pg-next i {
  2069. font-size:1.2em;
  2070. color:var(--ColorTitle);
  2071. -webkit-transition: all 0.4s;
  2072. -moz-transition: all 0.4s;
  2073. -ms-transition: all 0.4s;
  2074. -o-transition: all 0.4s;
  2075. transition: all 0.4s;
  2076. }
  2077. a.pg-prev:hover i, a.pg-next:hover i {color:var(--ColorBackground); text-shadow:0 1px rgba(0,0,0,.1);}
  2078.  
  2079. a#nobtn {opacity:.4; cursor:not-allowed;}
  2080. a#nobtn:hover {background:var(--ColorBackground)}
  2081. a#nobtn i {color:var(--ColorText);}
  2082. a#nobtn:hover i {color:var(--ColorText);}
  2083.  
  2084. .pagination-btns {
  2085. display:flex;
  2086. justify-content:center;
  2087. align-items:center;
  2088. gap:1rem;
  2089. }
  2090. .jumpination {
  2091. display:flex;
  2092. justify-content:center;
  2093. align-items:center;
  2094. gap:1rem;
  2095. }
  2096. .jumpination span.current-page {}
  2097. .jumpination span.current-page b {
  2098. font-size:1.025em;
  2099. color:var(--ColorAccentText);
  2100. text-shadow:0 1px rgba(0,0,0,.1);
  2101. width:2rem;
  2102. height:2rem;
  2103. display:flex;
  2104. justify-content:center;
  2105. align-items:center;
  2106. background:var(--ColorAccentTwo);
  2107. border-radius:var(--Corners);
  2108. box-shadow:0 1px rgba(0,0,0,.1);
  2109. cursor:default;
  2110. }
  2111. .jumpination a.jump-page {}
  2112. .jumpination a.jump-page b {
  2113. font-size:1.025em;
  2114. font-weight:500;
  2115. color:var(--ColorTitle);
  2116. width:2rem;
  2117. height:2rem;
  2118. display:flex;
  2119. justify-content:center;
  2120. align-items:center;
  2121. background:var(--ColorBackground);
  2122. border-radius:var(--Corners);
  2123. transition:ease-in-out .4s;
  2124. -webkit-transition: all 0.4s;
  2125. -moz-transition: all 0.4s;
  2126. -ms-transition: all 0.4s;
  2127. -o-transition: all 0.4s;
  2128. transition: all 0.4s;
  2129. }
  2130. .jumpination a.jump-page:hover b {color:var(--ColorBackground); text-shadow:0 1px rgba(0,0,0,.1); background:var(--ColorAccentTwo);}
  2131.  
  2132. /*--- RESPONSIVENESS ---*/
  2133. @media only screen and (max-width: 1000px) {
  2134. a#sidebarbutton {display:flex;}
  2135.  
  2136. aside.left {position:fixed; left:-100%; z-index:999; transition:ease-in .55s;}
  2137. body.sidebar-click aside.left {left:1em; transition:ease-out .55s;}
  2138. aside.right {position:fixed; right:-100%; z-index:999; transition:ease-in .55s;}
  2139. body.sidebar-click aside.right {right:1em; transition:ease-out .55s;}
  2140. }
  2141.  
  2142. @media only screen and (max-width: 750px) {
  2143. .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
  2144. }
  2145.  
  2146. {CustomCSS}
  2147. </style>
  2148.  
  2149. <!--✻✻✻✻✻✻ UN-BLUE POLLS by @glenthemes // POLL POSTS ✻✻✻✻✻✻-->
  2150. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  2151. <style>
  2152. .poll-post {
  2153. --Poll-Question-Font-Size:1.2em;
  2154.  
  2155. --Poll-Option-Background-Color:var(--ColorBackground);
  2156. --Poll-Option-Corner-Rounding:var(--Corners);
  2157. --Poll-Option-Border-Size:0;
  2158. --Poll-Option-Border-Color:var(--ColorBackground);
  2159. --Poll-Option-Padding:.25rem;
  2160. --Poll-Option-Font-Size:1em;
  2161. --Poll-Option-Spacing:.5rem;
  2162. --Poll-Option-Text-Color:var(--ColorText);
  2163.  
  2164. --Poll-Option-HOVER-Border-Color:var(--ColorAccentOne);
  2165. --Poll-Option-HOVER-Background-Color:var(--ColorAccentOne);
  2166. --Poll-Option-HOVER-Text-Color:var(--ColorBackground);
  2167. --Poll-Option-HOVER-Speed:0.4s;
  2168. }
  2169. </style>
  2170.  
  2171. </head>
  2172.  
  2173. <body class="{block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
  2174.  
  2175. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  2176. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  2177. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  2178. <script>
  2179. tumblr_npf_audio({
  2180. emptyTitleText: "untitled track",
  2181. emptyArtistText: "untitled artist",
  2182. emptyAlbumText: "",
  2183.  
  2184. titleLabel: "",
  2185. artistLabel: "",
  2186. albumLabel: ""
  2187. });
  2188. </script>
  2189. <style edit-npf-audio-player>
  2190. figcaption.audio-caption,
  2191. figcaption.audio-caption + audio[controls]{
  2192. display:none!important;
  2193. }
  2194. .npf-audio-wrapper {
  2195. --NPF-Audio-Buttons-Size: 1.4rem;
  2196. --NPF-Audio-Buttons-Color:var(--ColorBackground); /* color of play & pause buttons */
  2197. --NPF-Audio-Buttons-Spacing: 1.3rem; /* space between buttons and song info */
  2198. --NPF-Audio-Image-Size:85px;
  2199. --NPF-Audio-Image-Spacing:0px; /* gap between player info and cover image */
  2200. }
  2201. .npf-audio-image {border-radius:0;}
  2202.  
  2203. .npf-audio-background {
  2204. background:var(--ColorAccentTwo); /* background color of player (optional) */
  2205. padding:1.5rem;
  2206. border-radius:0;
  2207. }
  2208.  
  2209. .npf-audio-title-label,
  2210. .npf-audio-artist-label,
  2211. .npf-audio-album-label {
  2212. font-weight:bold;
  2213. }
  2214.  
  2215. .npf-audio-title,
  2216. .npf-audio-artist,
  2217. .npf-audio-album {
  2218. color:var(--ColorBackground); /* color of audio text (optional) */
  2219. text-shadow:0 1px rgba(0,0,0,.1);
  2220. }
  2221. .npf-audio-title {font-weight:bold;}
  2222. </style>
  2223.  
  2224. <!-- main container -->
  2225. <main>
  2226.  
  2227. <!-- HEADER --->
  2228. <header>
  2229. <div class="topleft">
  2230. <a class="headericon" title="home" href="/"><img src="{PortraitURL-128}"></a>
  2231. <!--- SEARCH BAR --->
  2232. <div id="search">
  2233. <form class="search" action="javascript:return false">
  2234. <input type="text" class="query" placeholder="search {Name}">
  2235. </form>
  2236. </div>
  2237. </div><!-- .topleft -->
  2238. <div class="topright">
  2239. <a id="sidebarbutton" title="toggle sidebar"><i class="ph-sidebar"></i></a>
  2240. {block:ifMusicPlayer}<a id="musicbutton" title="show music player"><i class="ph-microphone"></i></a><a id="musichide" title="hide music player"><i class="ph-microphone-slash"></i></a>{/block:ifMusicPlayer}
  2241. {block:ifUpdates}<a title="show updates" id="updatesbutton"><i class="ph-bell-simple"></i></a><a title="hide updates" id="updatesclose"><i class="ph-bell-simple-slash"></i></a>{/block:ifUpdates}
  2242. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  2243. <span class="light-on" title="turn off the lights"><i class="ph-moon"></i></span>
  2244. <span class="light-off" title="turn on the lights"><i class="ph-sun"></i></span>
  2245. </button>
  2246. <a title="toggle controls" id="controlsbutton"><i class="ph-gear"></i></a>
  2247.  
  2248. <!-- updates tab -->
  2249. {block:ifUpdates}<div class="updates">
  2250. <div class="updates-title"><b>updates</b></div>
  2251. <div class="updates-wrap">
  2252. <li><i class="ph-{text:Update Icon 1}"></i><span>{text:Update 1}</span></li>
  2253. {block:ifUpdate2}<li><i class="ph-{text:Update Icon 2}"></i><span>{text:Update 2}</span></li>{/block:ifUpdate2}
  2254. {block:ifUpdate3}<li><i class="ph-{text:Update Icon 3}"></i><span>{text:Update 3}</span></li>{/block:ifUpdate3}
  2255. {block:ifUpdate4}<li><i class="ph-{text:Update Icon 4}"></i><span>{text:Update 4}</span></li>{/block:ifUpdate4}
  2256. {block:ifUpdate5}<li><i class="ph-{text:Update Icon 5}"></i><span>{text:Update 5}</span></li>{/block:ifUpdate5}
  2257. {block:ifUpdate6}<li><i class="ph-{text:Update Icon 6}"></i><span>{text:Update 6}</span></li>{/block:ifUpdate6}
  2258. </div>
  2259. </div>{/block:ifUpdates}
  2260.  
  2261. <!-- music player -->
  2262. {block:ifMusicPlayer}<div class="music-container" id="music-container"><audio src="{text:Song URL}" id="audio"></audio>
  2263. <div class="audio-info">
  2264. <div class="audio-img"><img src="{text:Song Icon IMG}"></div>
  2265. <li><b>{text:Song Name}</b>
  2266. <span>{text:Song Artist}</span></li>
  2267. </div>
  2268. <button id="play" class="action-btn action-btn-big"><i class="ph-play-fill"></i></button>
  2269. </div>{/block:ifMusicPlayer}
  2270.  
  2271. </div>
  2272. </header>
  2273.  
  2274. <div class="fixedbuttons">
  2275. <a id="totop" title="back to top" href="#top" target="_self"><i class="ph-arrow-circle-up"></i></a>
  2276.  
  2277. <!--- CREDIT: DO NOT TOUCH --->
  2278. <a title="strawberry theme by sage" class="credit" href="//phantomcodes.tumblr.com"><i class="ph-ghost"></i></a>
  2279. </div>
  2280.  
  2281. <!-- main content -->
  2282. <section>
  2283.  
  2284. <!--- LEFT SIDEBAR --->
  2285. <aside class="left">
  2286. <div id="sidebar">
  2287. <div class="sidebar">
  2288. <div class="side-title">
  2289. <img src="{PortraitURL-128}">
  2290. <a href="/">
  2291. <b>{text:Custom Title}</b>
  2292. <li><i class="ph-arrow-bend-down-right"></i><span>@{Name}</span></li>
  2293. </a></div>
  2294. {block:ifSidebarImage}<div class="side-img"><img class="big" src="{image:Sidebar}"></div>{/block:ifSidebarImage}
  2295. <div class="description">{text:Custom Description}</div>
  2296. <nav>
  2297. <a title="home" href="/"><i class="ph-house"></i></a>
  2298. <a title="contact" href="/ask"><i class="ph-chat-circle"></i></a>
  2299. <a title="archive" href="/archive"><i class="ph-clock-counter-clockwise"></i></a>
  2300. {block:ifSidebarLink1}<a title="{text:Sidebar Link 1}" href="{text:Sidebar Link 1 URL}"><i class="ph-{text:Sidebar Link 1 Icon}"></i></a>{/block:ifSidebarLink1}
  2301. {block:ifSidebarLink2}<a title="{text:Sidebar Link 2}" href="{text:Sidebar Link 2 URL}"><i class="ph-{text:Sidebar Link 2 Icon}"></i></a>{/block:ifSidebarLink2}
  2302. {block:ifSidebarLink3}<a title="{text:Sidebar Link 3}" href="{text:Sidebar Link 3 URL}"><i class="ph-{text:Sidebar Link 3 Icon}"></i></a>{/block:ifSidebarLink3}
  2303. {block:ifSidebarLink4}<a title="{text:Sidebar Link 4}" href="{text:Sidebar Link 4 URL}"><i class="ph-{text:Sidebar Link 4 Icon}"></i></a>{/block:ifSidebarLink4}
  2304. {block:ifSidebarLink5}<a title="{text:Sidebar Link 5}" href="{text:Sidebar Link 5 URL}"><i class="ph-{text:Sidebar Link 5 Icon}"></i></a>{/block:ifSidebarLink5}
  2305. </nav>
  2306. </div>
  2307. </div><!--- #sidebar--->
  2308. </aside>
  2309.  
  2310. <div class="section-wrap"><!-- posts start -->
  2311.  
  2312. <!--- TAG AND DAY PAGES --->
  2313. {block:TagPage}<article>
  2314. <div class="tdpage">
  2315. <div class="td-icon"><i class="ph-tag"></i></div>
  2316. <div class="td-text">showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b></div>
  2317. </div>
  2318. </article>{/block:TagPage}
  2319.  
  2320. {block:DayPage}<article>
  2321. <div class="tdpage">
  2322. <div class="td-icon"><i class="ph-calendar-blank"></i></div>
  2323. <div class="td-text">showing posts made on <b>{Month} {DayOfMonth}{DayofMonthSuffix}, {Year}</b></div>
  2324. </div>
  2325. </article>{/block:DayPage}
  2326.  
  2327. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2328. <article class="posts" id="{PostID}" post-type="{PostType}">
  2329.  
  2330. <div class="article-wrap"><!-- article wrap -->
  2331.  
  2332. <!--- FLOATING INFO ---->
  2333. {block:Date}
  2334. <div class="floating">
  2335. <div class="stickyfloat">
  2336. {block:PinnedPostLabel}<a title="pinned" class="pinned" href="{Permalink}"><i class="ph-push-pin"></i></a>{/block:PinnedPostLabel}
  2337. <a href="{Permalink}" title="permalink" {block:PinnedPostLabel}style="display:none;"{/block:PinnedPostLabel}><i class="ph-arrow-square-out"></i></a>
  2338. <a title="reblog" href="{ReblogURL}" target="_blank"><i class="ph-arrows-clockwise"></i></a>
  2339. </div>
  2340. </div>
  2341.  
  2342. <!--- TOP POST INFO --->
  2343. <div class="topinfo">
  2344. <div class="topinfo-left">
  2345. {block:NotReblog}
  2346. <div class="topinfo-img"><img src="{PortraitURL-128}"></div>
  2347. <div class="topinfo-text">
  2348. <a class="topinfo-title" href="{Permalink}">{text:Blog Name}</a>
  2349. <div class="topdate"><i class="ph-arrow-bend-down-right"></i><span class="time-ago">{TimeStamp}</span>
  2350. {block:NoteCount}<i id="smalldot" class="ph-circle"></i><span class="notecount">{NoteCountWithLabel}</span>{/block:NoteCount}</div>
  2351. </div>
  2352. {/block:NotReblog}
  2353. {block:RebloggedFrom}
  2354. <div class="topinfo-img"><img src="{ReblogRootPortraitURL-128}"></div>
  2355. <div class="topinfo-text">
  2356. <a class="topinfo-title" target="_blank" href="{ReblogRootURL}">{ReblogRootName}</a>
  2357. <div class="topdate"><i class="ph-arrow-bend-down-right"></i><span class="time-ago">{TimeStamp}</span><i id="smalldot" class="ph-circle"></i><span class="notecount">{NoteCountWithLabel}</span></div>
  2358. </div><!-- .topinfo-name -->
  2359. {/block:RebloggedFrom}
  2360. </div>
  2361. <div class="topinfo-right">
  2362. </div>
  2363. </div><!--.topinfo-->
  2364. {/block:Date}
  2365.  
  2366. <div class="post-wrap"><!-- post wrap // posts start -->
  2367.  
  2368. {block:Photo}
  2369. <div class="photopost"><img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos"></div>
  2370. {/block:Photo}
  2371.  
  2372. {block:Photoset}
  2373. <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}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  2374. {/block:Photoset}
  2375.  
  2376. {block:Quote}<!-- quote posts -->
  2377. <div class="quotepost">
  2378. <div class="quote">
  2379. "{Quote}"
  2380. </div>
  2381. <div class="source">
  2382. -{Source}
  2383. </div>
  2384. </div>{/block:Quote}
  2385.  
  2386. {block:Chat}<!-- chat posts -->
  2387. <div class="chatpost">
  2388. {block:Lines}
  2389. <li>
  2390. {block:Label}<b>{Label}</b>{/block:Label}
  2391. <span>{Line}</span>
  2392. </li>
  2393. {/block:Lines}
  2394. </div>
  2395. {/block:Chat}
  2396.  
  2397. {block:Link}<!-- npf link posts -->
  2398. <div class="linkpost">
  2399. <a href="{URL}" target="_blank">
  2400. {Name}
  2401. </a>
  2402. </div>
  2403. {/block:Link}
  2404. {block:Link}<!-- legacy link posts -->
  2405. <div class="linkpost">
  2406. <a href="{URL}" target="_blank">
  2407. <div class="linktitle">
  2408. <li><b>{Name}</b><i class="ph-caret-right-bold"></i></li>
  2409. <div class="linkimage">{block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}</div>
  2410. </div>
  2411. {block:Excerpt}<div class="linktext"><span>{Excerpt}</span></div>{/block:Excerpt}
  2412. </a>
  2413. </div>
  2414. {/block:Link}
  2415.  
  2416. {block:Video}<!-- video posts -->
  2417. {Video-700}
  2418. {/block:Video}
  2419.  
  2420. {block:Audio}<!-- audio posts -->
  2421. <div class="audiopost">
  2422. <div class="audiotitle">
  2423. <div class="audioplaybg"><div class="audioplay">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div></div>
  2424. <li><b>{block:trackname}{Trackname}{/block:trackname}</b>
  2425. <span>{block:Artist}{Artist}{/block:Artist}</span></li>
  2426. </div><!-- audiotitle -->
  2427. <div class="albumart">{block:albumart}<img src="{AlbumArtURL}">{/block:albumart}</div>
  2428. </div>
  2429. {/block:Audio}
  2430.  
  2431. {block:Answer}<!-- answer posts -->
  2432. <div class="answer-post">
  2433. <div class="question">
  2434. <div class="qheader">
  2435. <div class="qicon"><img src="{AskerPortraitURL-128}"></div>
  2436. <li><b>{Asker}</b> sent:</li>
  2437. </div>
  2438. <div class="qcont">{Question}</div>
  2439. </div>
  2440. {block:Answerer}
  2441. <div class="answer">
  2442. <div class="answerheader"><div class="aicon"><img src="{AnswererPortraitURL-128}"></div><li><b>{Answerer}</b> replied:</li></div>
  2443. <div class="answercont">{Answer}</div>
  2444. </div>
  2445. {/block:Answerer}
  2446. {block:NotReblog}
  2447. <div class="answer">
  2448. <div class="answerheader"><div class="aicon"><img src="{PortraitURL-128}"></div><li><b><a href="/">{text:Blog Name}</a></b> replied:</li></div>
  2449. <div class="answercont">{Replies}</div>
  2450. </div>
  2451. {/block:NotReblog}
  2452. </div>{/block:Answer}
  2453.  
  2454. <!-- text posts -->
  2455. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  2456. {block:Text}
  2457. {block:Title}<h2>{Title}</h2>{/block:Title}
  2458. {/block:Text}
  2459. {block:NotReblog}
  2460. {block:Caption}{Caption}{/block:Caption}
  2461. {block:Text}{Body}{/block:Text}
  2462. {/block:NotReblog}
  2463. {block:Rebloggedfrom}
  2464. {block:Reblogs}
  2465. <div class="reblogs">
  2466. <div class="userlink source-head">
  2467. <a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}" alt="{username}'s avatar"></a>
  2468. <a href="{permalink}" target="_blank" {block:isdeactivated}class="deactive"{/block:isdeactivated}>{username}</a>
  2469. </div>
  2470. <div class="reblog-content">
  2471. {Body}
  2472. </div>
  2473. </div>
  2474. {/block:Reblogs}
  2475. {/block:RebloggedFrom}
  2476. </div><!-- caption -->
  2477.  
  2478. </div><!-- // .post-wrap -->
  2479.  
  2480. {block:Date}
  2481. <!--- BOTTOM POST INFO --->
  2482. <div class="bottominfo">
  2483. <div class="bottominfo-left">
  2484. <div class="rbvia">
  2485. {block:NotReblog}
  2486. <img src="{PortraitURL-128}">
  2487. <i class="ph-map-pin"></i>
  2488. <span>original post</span>
  2489. {/block:NotReblog}
  2490. {block:RebloggedFrom}
  2491. <img src="{ReblogParentPortraitURL-128}"></a>
  2492. <i class="ph-arrow-clockwise"></i>
  2493. <span>via <a href="{ReblogParentURL}">{ReblogParentName}</a></span>
  2494. {/block:RebloggedFrom}
  2495. </div>
  2496. </div>
  2497. <div class="bottominfo-right">
  2498. <a title="show more info" id="morebutton"><i class="ph-caret-circle-down"></i></a><a title="hide more info" id="moreclose"><i class="ph-caret-circle-up-fill"></i></a>
  2499. <div class="moreinfo"><!-- more info -->
  2500. <b>{DayofWeek} {12Hour}:{Minutes}{AMPM}</b>
  2501. <!-- date/day page link -->
  2502. <a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}"><i class="ph-clock"></i><span>{ShortMonth} {DayofMonth}{DayofMonthSuffix}, {Year}</span></a>
  2503. <!-- post types -->
  2504. {block:Text}<a target="_blank" href="/archive/filter-by/text"><i class="ph-article"></i><span>text post</span></a>{block:Text}
  2505. {block:Photo}<a target="_blank" href="/archive/filter-by/photo"><i class="ph-image"></i><span>photo post</span></a>{block:Photo}
  2506. {block:Photoset}<a target="_blank" href="/archive/filter-by/photo"><i class="ph-stack"></i><span>photoset post</span></a>{block:Photoset}
  2507. {block:Video}<a target="_blank" href="/archive/filter-by/video"><i class="ph-video-camera"></i><span>video post</span></a>{block:Video}
  2508. {block:Link}<a target="_blank" href="/archive/filter-by/link"><i class="ph-link-simple-horizontal"></i><span>link post</span></a>{block:Link}
  2509. {block:Audio}<a target="_blank" href="/archive/filter-by/audio"><i class="ph-music-notes"></i><span>audio post</span></a>{block:Audio}
  2510. {block:Quote}<a target="_blank" href="/archive/filter-by/quote"><i class="ph-quotes"></i><span>quote post</span></a>{block:Quote}
  2511. {block:Chat}<a target="_blank" href="/archive/filter-by/chat"><i class="ph-chats"></i><span>chat post</span></a>{block:Chat}
  2512. {block:Answer}<a target="_blank" href="/archive/filter-by/ask"><i class="ph-chat-teardrop-text"></i><span>ask post</span></a>{block:Answer}
  2513. <!-- source -->
  2514. {block:ContentSource}<a href="{SourceURL}"><i class="ph-git-fork"></i><span>source: {SourceTitle}</span></a>{/block:ContentSource}
  2515. </div>
  2516. <!-- tagsbutton -->
  2517. {block:HasTags}<a title="toggle tags" class="{select:tags}button"><i class="ph-tag-chevron-fill"></i></a>{/block:HasTags}
  2518. <a title="like" class="like-button" href="#">{LikeButton}<span class="actual-button"><i class="ph-heart-fill"></i></span></a>
  2519. </div>
  2520. </div><!-- // .bottominfo -->
  2521. {/block:Date}
  2522.  
  2523. </div><!-- // .article-wrap -->
  2524.  
  2525. <!--- TAGS --->
  2526. {block:HasTags}
  2527. <div class="{select:Tags}">
  2528. {block:Tags}<a href="{TagURL}"><span>#</span>{Tag}</a>{/block:Tags}
  2529. </div>
  2530. {/block:HasTags}
  2531.  
  2532.  
  2533. <!--- PERMALINK PAGE --->
  2534. {block:PermalinkPage}{block:Date}<div class="permalinkpage">
  2535. <div class="permalink-info">
  2536. {block:NotReblog}
  2537. <li><i class="ti ti-map-pin"></i><span>original post by <a href="{PostAuthorURL}">{PostAuthorName}</a></span></li>
  2538. {/block:NotReblog}
  2539. {block:RebloggedFrom}
  2540. <li><i class="ti ti-map-pin"></i><span>originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a></span></li>
  2541. <li><i class="ti ti-refresh"></i><span>reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a></span></li>
  2542. {/block:RebloggedFrom}
  2543. <li><i class="ti ti-calendar-heart"></i><span class="date"><b>{DayofWeek}, {Month} {DayofMonth}{DayofMonthSuffix} {Year}</b> at <b>{12Hour}:{Minutes}{AMPM}</b> with <b>{NoteCountWithLabel}</b></span></li>
  2544. </div>
  2545. {block:NoteCount}{block:PostNotes}<!-- post notes -->
  2546. <div class="postnotes">
  2547. {PostNotes-64}
  2548. </div>{/block:PostNotes}{/block:NoteCount}
  2549. </div>{/block:Date}{/block:PermalinkPage}
  2550.  
  2551. </article><!--- POSTS END --->
  2552. {/block:Posts}
  2553.  
  2554. {block:Pagination}<article><!-- PAGINATION -->
  2555. <div class="pagination">
  2556.  
  2557. {block:PreviousPage}
  2558. <a title="previous page" class="pg-prev" href="{PreviousPage}"><i class="ph-arrow-left"></i></a>
  2559. {/block:PreviousPage}
  2560. <a class="pg-prev" id="nobtn" {block:PreviousPage}style="display:none;"{/block:PreviousPage}><i class="ph-arrow-left"></i></a>
  2561.  
  2562. <div class="pagination-btns">
  2563. {block:JumpPagination length="5"}<div class="jumpination">
  2564. {block:CurrentPage}<span title="current page" class="current-page"><b>{PageNumber}</b></span>{/block:CurrentPage}
  2565. {block:JumpPage}<a title="jump to page {PageNumber}" class="jump-page" href="{URL}"><b>{PageNumber}</b></a>{/block:JumpPage}
  2566. </div>{/block:JumpPagination}
  2567. </div>
  2568.  
  2569. <a class="pg-next" id="nobtn" {block:NextPage}style="display:none;"{/block:NextPage}><i class="ph-arrow-right"></i></a>
  2570. {block:NextPage}
  2571. <a title="next page" class="pg-next" href="{NextPage}"><i class="ph-arrow-right"></i></a>
  2572. {/block:NextPage}
  2573. </div><!-- // .pagination -->
  2574. </article>{/block:Pagination}
  2575.  
  2576. </div><!-- // .section-wrap -->
  2577.  
  2578. <!--- RIGHT SIDEBAR --->
  2579. {block:ifRightSidebar}<aside class="right">
  2580. <div id="sidebar">
  2581. <div class="sidebar">
  2582. <div class="side-title">
  2583. <img src="{PortraitURL-128}">
  2584. <a href="/">
  2585. <b>{text:Custom Title}</b>
  2586. <li><i class="ph-arrow-bend-down-right"></i><span>@{Name}</span></li>
  2587. </a></div>
  2588. {block:ifSidebarImage}<div class="side-img"><img class="big" src="{image:Sidebar}"></div>{/block:ifSidebarImage}
  2589. <div class="description">{text:Custom Description}</div>
  2590. <nav>
  2591. <a title="home" href="/"><i class="ph-house"></i></a>
  2592. <a title="contact" href="/ask"><i class="ph-chat-circle"></i></a>
  2593. <a title="archive" href="/archive"><i class="ph-clock-counter-clockwise"></i></a>
  2594. {block:ifSidebarLink1}<a title="{text:Sidebar Link 1}" href="{text:Sidebar Link 1 URL}"><i class="ph-{text:Sidebar Link 1 Icon}"></i></a>{/block:ifSidebarLink1}
  2595. {block:ifSidebarLink2}<a title="{text:Sidebar Link 2}" href="{text:Sidebar Link 2 URL}"><i class="ph-{text:Sidebar Link 2 Icon}"></i></a>{/block:ifSidebarLink2}
  2596. {block:ifSidebarLink3}<a title="{text:Sidebar Link 3}" href="{text:Sidebar Link 3 URL}"><i class="ph-{text:Sidebar Link 3 Icon}"></i></a>{/block:ifSidebarLink3}
  2597. {block:ifSidebarLink4}<a title="{text:Sidebar Link 4}" href="{text:Sidebar Link 4 URL}"><i class="ph-{text:Sidebar Link 4 Icon}"></i></a>{/block:ifSidebarLink4}
  2598. {block:ifSidebarLink5}<a title="{text:Sidebar Link 5}" href="{text:Sidebar Link 5 URL}"><i class="ph-{text:Sidebar Link 5 Icon}"></i></a>{/block:ifSidebarLink5}
  2599. </nav>
  2600. </div>
  2601. </div><!--- #sidebar--->
  2602. </aside>{/block:ifRightSidebar}
  2603.  
  2604. </section>
  2605.  
  2606. </main>
  2607. </body>
  2608.  
  2609. <script>
  2610.  
  2611. // music player
  2612. {block:ifMusicPlayer}
  2613.  
  2614. const musicContainer = document.querySelector('.music-container');
  2615. const playBtn = document.querySelector('#play');
  2616. const audio = document.querySelector('#audio');
  2617. const title = document.querySelector('#title');
  2618. const cover = document.querySelector('#cover');
  2619.  
  2620. function playSong() {
  2621. musicContainer.classList.add('play');
  2622. playBtn.querySelector('#play i').classList.remove('ph-play-fill');
  2623. playBtn.querySelector('#play i').classList.add('ph-pause-fill');
  2624.  
  2625. audio.play();
  2626. }
  2627.  
  2628. function pauseSong() {
  2629. musicContainer.classList.remove('play')
  2630. playBtn.querySelector('#play i').classList.add('ph-play-fill')
  2631. playBtn.querySelector('#play i').classList.remove('ph-pause-fill')
  2632.  
  2633. audio.pause()
  2634. }
  2635.  
  2636. // event listeners
  2637. playBtn.addEventListener('click', () => {
  2638. const isPlaying = musicContainer.classList.contains('play');
  2639.  
  2640. if (isPlaying) {
  2641. pauseSong();
  2642. } else {
  2643. playSong();
  2644. }
  2645. });
  2646.  
  2647. document.getElementById("audio").loop = true;
  2648.  
  2649. // music button
  2650. $(document).ready(function(){
  2651. $('a#musicbutton').click(function(){
  2652. $(this).css('display', 'none');
  2653. $('a#musichide').css('display', 'flex');
  2654. $('.music-container').fadeIn(500);
  2655. $('.music-container').css('display', 'flex');
  2656. });
  2657.  
  2658. $('a#musichide').click(function() {
  2659. $(this).css('display', 'none');
  2660. $('a#musicbutton').css('display', 'flex');
  2661. $('.music-container').fadeOut(400);
  2662. });
  2663. });
  2664.  
  2665. {/block:ifMusicPlayer}
  2666.  
  2667.  
  2668. /// photoset
  2669. $(document).ready(function(){
  2670. $('.photo-slideshow').pxuPhotoset({
  2671. lightbox: true,
  2672. rounded: 'false',
  2673. gutter: '4px',
  2674. borderRadius: '0',
  2675. photoset: '.photo-slideshow',
  2676. photoWrap: '.photo-data',
  2677. photo: '.pxu-photo'
  2678. });
  2679. });
  2680.  
  2681. // tooltips
  2682. tippy('[title]', {
  2683. theme: 'custom',
  2684. arrow: false,
  2685. followCursor: true,
  2686. delay: 100,
  2687. placement: 'top',
  2688. offset: "0, 10",
  2689. zIndex: 9999999999,
  2690. maxWidth: 400,
  2691.  
  2692. content(reference) {
  2693. const title = reference.getAttribute('title');
  2694. reference.removeAttribute('title');
  2695. return title;
  2696. },
  2697. });
  2698.  
  2699. // videos
  2700. $(document).ready(function() {
  2701. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  2702. });
  2703.  
  2704. // notes shortener
  2705. var $container = $('article');
  2706. $container.find('.notecount').each(function(){
  2707. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  2708. if (n > 999) {
  2709. n = Math.floor(n / 100) / 10;
  2710. $(this).text(n + 'k notes');
  2711. }
  2712. });
  2713.  
  2714. // more info
  2715. $(document).ready(function(){
  2716. $('a#morebutton').click(function(){
  2717. $(this).closest('article').find('a#morebutton').css('display', 'none');
  2718. $(this).closest('article').find('a#moreclose').css('display', 'flex');
  2719. $(this).closest('article').find('.moreinfo').fadeIn(500);
  2720. $(this).closest('article').find('.moreinfo').css('display', 'flex');
  2721. });
  2722.  
  2723. $('a#moreclose').click(function() {
  2724. $(this).closest('article').find('a#moreclose').css('display', 'none');
  2725. $(this).closest('article').find('a#morebutton').css('display', 'flex');
  2726. $(this).closest('article').find('.moreinfo').fadeOut(400);
  2727. });
  2728. });
  2729.  
  2730. // toggle tags
  2731. $(document).ready(function(){
  2732. $('.clicktags').hide();
  2733. $('.clicktagsbutton').click(function() {
  2734. $(this).closest('article').find('.clicktags').slideToggle(0);
  2735. $(this).toggleClass('tags-click');
  2736. return false;
  2737. });
  2738. });
  2739.  
  2740. // toggle tags
  2741. $(document).ready(function(){
  2742. $('.actual-button').click(function() {
  2743. $(this).closest('article').find('span.actual-button i').toggleClass('ph-heart-fill');
  2744. return false;
  2745. });
  2746. });
  2747.  
  2748. // first userlink
  2749. $(document).ready(function(){
  2750. $('article').find('.userlink:first').addClass("first");
  2751. });
  2752.  
  2753. // tumblr controls
  2754. $(document).ready(function(){
  2755. $('a#controlsbutton').click(function(){
  2756. $('body').toggleClass('controls-click');
  2757. });
  2758. });
  2759.  
  2760. // sidebar popup
  2761. $(document).ready(function(){
  2762. $('a#sidebarbutton').click(function(){
  2763. $('body').toggleClass('sidebar-click');
  2764. });
  2765. });
  2766.  
  2767. // updates tab
  2768. $(document).ready(function(){
  2769. $('a#updatesbutton').click(function(){
  2770. $(this).css('display', 'none');
  2771. $('a#updatesclose').css('display', 'flex');
  2772. $('.updates').fadeIn(500);
  2773. $('.updates').css('display', 'flex');
  2774. });
  2775.  
  2776. $('a#updatesclose').click(function() {
  2777. $(this).css('display', 'none');
  2778. $('a#updatesbutton').css('display', 'flex');
  2779. $('.updates').fadeOut(400);
  2780. });
  2781. });
  2782.  
  2783. // explore popup
  2784. $(document).ready(function(){
  2785. $('a#explorebutton').click(function(){
  2786. $('body').toggleClass('explore-click');
  2787. });
  2788. });
  2789.  
  2790. // searchbar
  2791. $(document).ready(function(){
  2792. $('.search').submit(function(event){
  2793. var value = $('input:first').val();
  2794. location.replace('http://{Name}.tumblr.com/search/' + value);
  2795. });
  2796. });
  2797.  
  2798. // scroll to top
  2799. $(document).ready(function(){
  2800. $('a#totop').click(function(){
  2801. $('html, body').animate({scrollTop : 0},800);
  2802. return false;
  2803. });
  2804. });
  2805.  
  2806. var mybutton = document.getElementById("totop");
  2807. window.onscroll = function() {scrollFunction()};
  2808.  
  2809. function scrollFunction() {
  2810. if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
  2811. mybutton.style.display = "flex";
  2812. } else {
  2813. mybutton.style.display = "none";
  2814. }
  2815. }
  2816.  
  2817. // day/night mode
  2818. const toggle = document.getElementById("theme-toggle");
  2819.  
  2820. toggle.onclick = function () {
  2821. // add class to html and make transition snappy
  2822. document.documentElement.classList.add("theme-transition");
  2823. // alright lets retrive the info from data-theme
  2824. let currentTheme = document.documentElement.getAttribute("data-theme");
  2825. // if it's dark already, let's go into the light
  2826. let targetTheme = "light";
  2827. // but if it is light let's toggle dark mode
  2828. if (currentTheme === "light") {
  2829. targetTheme = "dark";
  2830. }
  2831. // ok now that theme has been toggled, get rid of snappy transition
  2832. window.setTimeout(function () {
  2833. document.documentElement.classList.remove("theme-transition");
  2834. }, 50);
  2835. // we're going to save our theme preference now
  2836. document.documentElement.setAttribute("data-theme", targetTheme);
  2837. localStorage.setItem("theme", targetTheme);
  2838. };
  2839.  
  2840. // remove empty p tags
  2841. for (const p of document.querySelectorAll('p')) {
  2842. if (p.innerHTML.trim() === '') {
  2843. p.remove()
  2844. }
  2845. }
  2846.  
  2847. </script>
  2848. </html>
Advertisement
Add Comment
Please, Sign In to add comment