sexycullen

225 - v2

Feb 3rd, 2026
173
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.63 KB | None | 0 0
  1. <!---
  2.  
  3.  
  4. --->
  5.  
  6.  
  7. <!DOCTYPE html>
  8. <html data-theme="">
  9. <head>
  10. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  11.  
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  15. <meta charset="utf-8">
  16. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  17.  
  18. <!----- VARIABLES AND OPTIONS ----->
  19. <meta name="image:Sidebar Image" content=""/>
  20. <meta name="image:Background Image" content=""/>
  21.  
  22. <meta name="color:Theme Background Color" content="#f9f9f9" />
  23. <meta name="color:Posts Background Color" content="#ffffff" />
  24. <meta name="color:Theme Link Color" content="#494848" />
  25. <meta name="color:Theme Text Color" content="#201f1f" />
  26. <meta name="color:Theme Link Hover Color" content="#3e3d3d" />
  27. <meta name="color:Borders Color" content="#eaeaea" />
  28.  
  29. <meta name="color:Dark Theme Background Color" content="#0f0f0f" />
  30. <meta name="color:Dark Posts Background Color" content="#151515" />
  31. <meta name="color:Dark Theme Link Color" content="#bbc56f" />
  32. <meta name="color:Dark Theme Text Color" content="#dad8d8" />
  33. <meta name="color:Dark Theme Link Hover Color" content="#a6b060" />
  34. <meta name="color:Dark Borders Color" content="#272727" />
  35.  
  36. <meta name="select:Post Width" content="540px" title="540px"/>
  37. <meta name="select:Post Width" content="400px" title="400px"/>
  38. <meta name="select:Post Width" content="500px" title="500px"/>
  39.  
  40. <!-- -------------- THEME: customizations -------------- -->
  41. <meta name="text:Theme Font Family" content="Arial" />
  42. <meta name="text:Theme Text Spacing" content="0px"/>
  43.  
  44. <!-- -------------- THEME: body styling -------------- -->
  45. <meta name="select:Theme Font Size" content="1.1rem" title="11px" />
  46. <meta name="select:Theme Font Size" content="1rem" title="10px" />
  47. <meta name="select:Theme Font Size" content="1.2rem" title="12px" />
  48. <meta name="select:Theme Font Size" content="1.3rem" title="13px" />
  49. <meta name="select:Theme Font Size" content="1.4rem" title="14px" />
  50.  
  51. <meta name="select:Date Font Size" content="1.2rem" title="12px" />
  52. <meta name="select:Date Font Size" content="1rem" title="10px" />
  53. <meta name="select:Date Font Size" content="1.1rem" title="11px" />
  54. <meta name="select:Date Font Size" content="1.3rem" title="13px" />
  55. <meta name="select:Date Font Size" content="1.4rem" title="14px" />
  56.  
  57. <meta name="select:Date Font Weight" content="700" title="bold" />
  58. <meta name="select:Date Font Weight" content="600" title="medium" />
  59. <meta name="select:Date Font Weight" content="400" title="normal" />
  60.  
  61. <meta name="select:Date Text Transform" content="lowercase" />
  62. <meta name="select:Date Text Transform" content="uppercase" />
  63. <meta name="select:Date Text Transform" content="capitalize" />
  64. <meta name="select:Date Text Transform" content="none" />
  65.  
  66. <meta name="text:Theme Container Size" content="140rem" />
  67. <meta name="text:Posts Margin" content="9.5rem" />
  68. <meta name="text:Posts Padding" content="1em" />
  69. <meta name="text:Sidebar Margin" content="22rem" />
  70. <meta name="text:Sidebar Posts Spacing Between" content="0rem" />
  71.  
  72. <meta name="select:Sidebar Content Position" content="flex-start" title="top">
  73. <meta name="select:Sidebar Content Position" content="center" title="center">
  74.  
  75.  
  76. <meta name="text:Box Shadow Color" content="234, 234, 234, 0.5" />
  77. <meta name="text:Dark Box Shadow Color" content="62, 62, 61.0.5" />
  78. <meta name="text:Box Shadow Size" content="0px 0.4rem 1rem" />
  79.  
  80. <meta name="select:Borders Size" content="0.1rem" title="1px" />
  81. <meta name="select:Borders Size" content="0rem" title="0px" />
  82. <meta name="select:Borders Size" content="0.2rem" title="2px" />
  83. <meta name="select:Borders Size" content="0.3rem" title="3px" />
  84. <meta name="select:Borders Size" content="0.4rem" title="4px" />
  85. <meta name="select:Borders Size" content="0.5rem" title="5px" />
  86.  
  87. <meta name="select:Borders Style" content="solid" />
  88. <meta name="select:Borders Style" content="dotted" />
  89. <meta name="select:Borders Style" content="dashed" />
  90. <meta name="select:Borders Style" content="double" />
  91. <meta name="select:Borders Style" content="ridge" />
  92.  
  93. <!-- -------------- SIDEBAR: conditionals -------------- -->
  94.  
  95. <meta name="if:Dark Theme Default" content="1"/>
  96. <meta name="if:Show Top Borders" content="1"/>
  97. <meta name="if:Show All Borders" content="0"/>
  98. <meta name="if:Show Box Shadow" content="1" />
  99. <meta name="if:Enable Font Smoothing" content="0" />
  100. <meta name="if:Show Theme Toggle" content="1" />
  101. <meta name="if:Show Theme Icon Toggle" content="1" />
  102. <meta name="if:Show Icon Pagination" content="1" />
  103. <meta name="if:Show Date Information" content="1" />
  104. <meta name="if:Right Sidebar Position" content="0" />
  105. <meta name="if:Sidebar Image" content="1"/>
  106. <meta name="if:Sidebar Title" content="1"/>
  107. <meta name="if:Sidebar Pages Link" content="1"/>
  108. <meta name="if:Sidebar Archive Link" content="1"/>
  109. <meta name="if:Sidebar Submit Link" content="1"/>
  110. <meta name="if:Sidebar Link 1" content="1" />
  111. <meta name="if:Sidebar Link 2" content="1" />
  112. <meta name="if:Sidebar Link 3" content="1" />
  113. <meta name="if:Sidebar Link 4" content="1" />
  114.  
  115. <!-- -------------- SIDEBAR: links -------------- -->
  116. <meta name="text:Home URL" content="/" />
  117. <meta name="text:Home Text" content="Home" />
  118.  
  119. <meta name="text:Ask URL" content="/ask" />
  120. <meta name="text:Ask Text" content="Ask" />
  121.  
  122. <meta name="text:Archive URL" content="archive"/>
  123. <meta name="text:Archive Text" content="Archive" />
  124.  
  125. <meta name="text:Submit URL" content="/submit"/>
  126. <meta name="text:Submit Text" content="Submit" />
  127.  
  128. <meta name="text:Sidebar Link 1 URL" content="/" />
  129. <meta name="text:Sidebar Link 1 Text" content="Link 1" />
  130.  
  131. <meta name="text:Sidebar Link 2 URL" content="/" />
  132. <meta name="text:Sidebar Link 2 Text" content="Link 2" />
  133.  
  134. <meta name="text:Sidebar Link 3 URL" content="/" />
  135. <meta name="text:Sidebar Link 3 Text" content="Link 3" />
  136.  
  137. <meta name="text:Sidebar Link 4 URL" content="/" />
  138. <meta name="text:Sidebar Link 4 Text" content="Link 4" />
  139.  
  140.  
  141. <!-- RESOURCES: custom font / by: https://fonts.google.com/ -->
  142. <link href="https://fonts.googleapis.com/css2?family={text:Theme Font Family}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
  143.  
  144. <!-- RESOURCES: jquery used for: tippyjs tooltips -->
  145. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  146.  
  147. <!-- RESOURCES: tippyjs tooltips / by: https://atomiks.github.io/tippyjs/
  148. uses: css/js -->
  149. <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  150. <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
  151. <script>
  152. // Check stored theme or system preference
  153. const storedTheme = localStorage.getItem("theme");
  154.  
  155. // Apply it immediately to <html> to avoid flash
  156. if (storedTheme) {
  157. document.documentElement.setAttribute("data-theme", storedTheme);
  158. }
  159. </script>
  160.  
  161. <style type="text/css">
  162. :root {
  163. /* -------------- THEME -------------- */
  164. --themeFontFamily: {text:Theme Font Family};
  165. --themeTextSpacing: {text:Theme Text Spacing};
  166.  
  167. --bordersStyle: {select:Borders Style};
  168. --bordersSize: {select:Borders Size};
  169. --boxShadowSize:{text:Box Shadow Size};
  170. --boxShadowOpacity:{select:Box Shadow Opacity};
  171.  
  172. --themeFontSize: {select:Theme Font Size};
  173. --themeFontLineHeight: calc(var(--themeFontSize) * 1.4);
  174.  
  175. --borderRadius: 0.4rem;
  176.  
  177. --themeContainerSize: {text:Theme Container Size};
  178.  
  179. --sidebarPostsSpacingGap: {text:Sidebar Margin};
  180. --sidebarContentPosition: {select:Sidebar Content Position};
  181.  
  182. --postsMargin: {text:Posts Margin};
  183. --postsPadding: {text:Posts Padding};
  184. --postWidth: {select:Post Width};
  185.  
  186. --dateFontSize:{select:Date Font Size};
  187. --dateFontWeight:{select:Date Font Weight};
  188. --dateTextTransform:{select:Date Text Transform};
  189. }
  190.  
  191.  
  192. {block:ifDarkThemeDefault}
  193. :root, html[data-theme='dark'] {
  194. {/block:ifDarkThemeDefault}
  195.  
  196. {block:ifNotDarkThemeDefault}
  197. html[data-theme='dark'] {
  198. {/block:ifNotDarkThemeDefault}
  199. --light-on: none;
  200. --light-off: block;
  201.  
  202. --themeBackgroundColor: {color:Dark Theme Background Color};
  203. --postsBackgroundColor: {color:Dark Posts Background Color};
  204. --themeLinkColor: {color:Dark Theme Link Color};
  205. --themeTextColor: {color:Dark Theme Text Color};
  206. --themeLinkHoverColor: {color:Dark Theme Link Hover Color};
  207. --bordersColor: {color:Dark Borders Color};
  208. --boxShadowColor:{text:Dark Box Shadow Color};
  209. }
  210.  
  211. {block:ifNotDarkThemeDefault}
  212. :root, html[data-theme='light'] {
  213. {/block:ifNotDarkThemeDefault}
  214.  
  215. {block:ifDarkThemeDefault}
  216. html[data-theme='light'] {
  217. {/block:ifDarkThemeDefault}
  218. --light-on: block;
  219. --light-off: none;
  220.  
  221. --themeBackgroundColor: {color:Theme Background Color};
  222. --postsBackgroundColor: {color:Posts Background Color};
  223. --themeLinkColor: {color:Theme Link Color};
  224. --themeLinkHoverColor: {color:Theme Link Hover Color};
  225. --themeTextColor: {color:Theme Text Color};
  226. --bordersColor: {color:Borders Color};
  227. --boxShadowColor:{text:Box Shadow Color};
  228. }
  229.  
  230. html.theme-transition,
  231. html.theme-transition * {
  232. transition: transform .3s cubic-bezier(0,2.18,.64,.69) !important;
  233. }
  234.  
  235. .light-on {
  236. display: var(--light-on);
  237. }
  238. .light-off {
  239. display: var(--light-off);
  240. }
  241.  
  242. .theme-toggle {
  243. cursor: pointer;
  244. font-weight: bold;
  245. color: var(--themeLinkColor);
  246. text-decoration: none;
  247. -webkit-transition: all 0.3s;
  248. -moz-transition: all 0.3s;
  249. -ms-transition: all 0.3s;
  250. -o-transition: all 0.3s;
  251. transition: all 0.3s;
  252. }
  253.  
  254. .theme-toggle svg,
  255. .pagination-links svg {
  256. padding: 0.5rem 0.5rem 0;
  257. width: 1.2em;
  258. height: 1.2em;
  259. }
  260.  
  261. * {
  262. margin: 0;
  263. padding: 0;
  264. -webkit-box-sizing: inherit;
  265. box-sizing: inherit;
  266. }
  267.  
  268. html {
  269. font-size: 62.5%;
  270. }
  271.  
  272. body {
  273. font-family: var(--themeFontFamily), sans-serif;
  274. font-size: var(--themeFontSize);
  275. line-height: var(--themeFontLineHeight);
  276. color: var(--themeTextColor);
  277. letter-spacing: var(--themeTextSpacing);
  278. background:var(--themeBackgroundColor) url({image:Background Image});
  279. background-color:var(--themeBackgroundColor);
  280. word-wrap: break-word;
  281. margin: 0;
  282. padding: 0;
  283.  
  284. {block:ifEnableFontSmoothing}
  285. -webkit-font-smoothing: antialiased;
  286. -moz-osx-font-smoothing: grayscale;
  287. {/block:ifEnableFontSmoothing}
  288. }
  289.  
  290. a {
  291. color: var(--themeLinkColor);
  292. text-decoration: none;
  293. -webkit-transition: all 0.3s;
  294. -moz-transition: all 0.3s;
  295. -ms-transition: all 0.3s;
  296. -o-transition: all 0.3s;
  297. transition: all 0.3s;
  298. }
  299.  
  300. a:hover {
  301. color: var(--themeLinkHoverColor);
  302. -webkit-transition: all 0.3s;
  303. -moz-transition: all 0.3s;
  304. -ms-transition: all 0.3s;
  305. -o-transition: all 0.3s;
  306. transition: all 0.3s;
  307. }
  308.  
  309. blockquote {
  310. padding: 0 0 0 1.5em;
  311. border-left:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  312. margin: 1.5em 0 1.5em 1.5em;
  313. }
  314.  
  315. h1, h2, h3, h4, h5 {
  316. line-height: 145%;
  317. font-weight: bold;
  318. }
  319.  
  320. h1 { font-size: 1.5em }
  321. h2 { font-size: 1.3em }
  322. h3 { font-size: 1.25em }
  323. h4 { font-size: 1.1em }
  324. h5 { font-size: 1em }
  325.  
  326. small {font-size: 0.9em;}
  327. big {font-size: 1.1em;}
  328. strong, b {
  329. color: var(--themeLinkColor);
  330. }
  331.  
  332. hr {
  333. width:16rem;
  334. height: 0.1rem;
  335. border: none;
  336. box-shadow: none;
  337. margin-block: 1em;
  338. background-color: var(--bordersColor);
  339. }
  340.  
  341. pre {
  342. line-height: inherit;
  343. font-size: monospace;
  344. white-space: pre-wrap;
  345. white-space: -moz-pre-wrap;
  346. white-space: -pre-wrap;
  347. white-space: -o-pre-wrap;
  348. word-wrap: break-word;
  349. }
  350.  
  351. ul, ul li {
  352. list-style: none;
  353. margin: 0;
  354. padding: 0;
  355. }
  356.  
  357. .posts ul, .posts ol {
  358. margin-block: 1em;
  359. }
  360.  
  361.  
  362. #scrollToTop {
  363. display: none;
  364. opacity: 0;
  365. transition: opacity 150ms ease;
  366. pointer-events: none;
  367. }
  368.  
  369. #scrollToTop.is-visible {
  370. display: block;
  371. opacity: 1;
  372. pointer-events: auto;
  373. line-height: 0;
  374. }
  375.  
  376. .feather {
  377. display: inline-block;
  378. width: 1.6em;
  379. height: 1.6em;
  380. }
  381.  
  382. /* tooltips */
  383. .tippy-box[data-theme~='custom'] {
  384. text-align: center;
  385. font-size: var(--themeFontSize);
  386. color: var(--themeBackgroundColor);
  387. background-color: var(--themeLinkColor);
  388. font-weight: bold;
  389. }
  390.  
  391. .theme-container {
  392. width: 100%;
  393. max-width: var(--themeContainerSize);
  394. display: grid;
  395. justify-content: left;
  396. grid-template-columns: calc(26.8rem + var(--postsPadding)) auto;
  397. grid-template-rows:1fr;
  398. grid-template-areas:
  399. "sidebar posts";
  400. {block:ifRightSidebarPosition}
  401. justify-content: right;
  402. grid-template-columns: auto calc(26.8rem + var(--postsPadding));
  403. grid-template-areas:
  404. "posts sidebar";
  405. {/block:ifRightSidebarPosition}
  406. gap: var(--sidebarPostsSpacingGap);
  407. margin: 5rem auto;
  408. }
  409.  
  410. .posts-container {
  411. grid-area: posts;
  412. display: flex;
  413. justify-content: flex-start;
  414. flex-direction: column;
  415. }
  416.  
  417. .posts, .posts-tag-page, .posts-day-page {
  418. width: var(--postWidth);
  419. padding: var(--postsPadding);
  420. text-align:var(--postsTextPosition);
  421. background-color: var(--postsBackgroundColor);
  422. border-radius: var(--borderRadius);
  423. {block:ifShowAllBorders}
  424. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  425. {/block:ifShowAllBorders}
  426.  
  427. {block:ifShowBoxShadow}
  428. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  429. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  430. {/block:ifShowBoxShadow}
  431. }
  432.  
  433. .posts-content {
  434. {block:ifShowBoxShadow}
  435. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  436. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  437. {/block:ifShowBoxShadow}
  438. }
  439.  
  440. .posts-content:not(:last-of-type),
  441. .posts-tag-page:not(:last-of-type),
  442. .posts-day-page:not(:last-of-type) {
  443. margin-bottom: var(--postsMargin);
  444. }
  445.  
  446. .posts-tag-page:not(:last-of-type),
  447. .posts-day-page:not(:last-of-type) {
  448. margin-bottom: 2rem;
  449. }
  450.  
  451. .posts-tag-page .posts-tag-item .tag,
  452. .posts-day-page .posts-tag-item .tag {
  453. font-weight: bold;
  454. color: var(--themeLinkColor);
  455. }
  456.  
  457. .posts-content p:not(last-child) {
  458. margin-block-end: 1em;
  459. }
  460.  
  461. .posts ul li, ol li {
  462. margin-bottom: 0.4em;
  463. }
  464.  
  465. .posts ul li::before {
  466. content: '';
  467. width: 0.4rem;
  468. height: 0.4rem;
  469. margin: 0em 1em;
  470. display:inline-block;
  471. border-radius: 50%;
  472. border: 1px solid var(--themeLinkColor);
  473. margin-right:0.8em;
  474. vertical-align:middle;
  475. color: var(--bordersColor);
  476. }
  477.  
  478. .posts ol {
  479. margin:1.5rem 0;
  480. padding: 0 3rem;
  481. }
  482.  
  483. .posts ol li {
  484. list-style-type: decimal;
  485. }
  486.  
  487. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  488.  
  489.  
  490. /*----- SIDEBAR -----*/
  491.  
  492. .sidebar-container {
  493. width: calc(26.8rem + var(--postsPadding) * 2);
  494. height: 100vh;
  495. display: flex;
  496. align-items: var(--sidebarContentPosition);
  497. {block:ifRightSidebarPosition}
  498. margin: 0 0 0 0;
  499. {/block:ifRightSidebarPosition}
  500. grid-area: sidebar;
  501. }
  502.  
  503. .sidebar-content {
  504. position: fixed;
  505. width: 26.8rem;
  506. background-color:var(--postsBackgroundColor);
  507. padding: var(--postsPadding);
  508. border-radius: var(--borderRadius);
  509.  
  510. {block:IfSidebarIconImage}
  511. margin-top: 4em;
  512. {/block:IfSidebarIconImage}
  513.  
  514. {block:ifShowAllBorders}
  515. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  516. {/block:ifShowAllBorders}
  517.  
  518. {block:ifShowBoxShadow}
  519. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  520. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  521. {/block:ifShowBoxShadow}
  522. }
  523.  
  524. .sidebar-title {
  525. margin-bottom: 1rem;
  526. font-weight: bold;
  527. text-transform: uppercase;
  528. font-size: 1.4em;
  529. line-height: calc(var(--themeFontSize) * 1.8);
  530. color: var(--themeLinkColor);
  531. }
  532.  
  533. .sidebar-navigation ul {
  534. display: flex;
  535. gap: 0.4em 1.2em;
  536. flex-wrap: wrap;
  537. }
  538.  
  539. .sidebar-content a {
  540. font-weight: bold;
  541. text-transform: lowercase;
  542. }
  543.  
  544. {block:ifSidebarImage}
  545. #side-img {margin-bottom: 1.25em;}
  546. {/block:ifSidebarImage}
  547.  
  548. .description {
  549. background-color: var(--postsBackgroundColor);
  550. border-radius: var(--borderRadius);
  551. padding: 1em;
  552.  
  553. {block:ifShowTopBorders}
  554. margin: 1em 0 0;
  555. border-top:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  556. {/block:ifShowTopBorders}
  557.  
  558. {block:ifShowAllBorders}
  559. margin: 1em 0 0;
  560. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  561. {/block:ifShowAllBorders}
  562. }
  563.  
  564. /*---- PAGINATION -----*/
  565.  
  566. #page-navigation {
  567. {block:ifShowAllBorders}
  568. margin: 1em 0 0;
  569. {/block:ifShowAllBorders}
  570. width: 100%;
  571. display: inline-flex;
  572. justify-content: space-between;
  573. gap: 0.4rem 0.8rem;
  574. flex-wrap: wrap;
  575. }
  576.  
  577. .pagination-links {
  578. display: flex;
  579. gap: 1em;
  580. }
  581.  
  582. /*----- POSTS -----*/
  583.  
  584. .posts {
  585. {block:ifShowTopBorders}
  586. border-top:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  587. {/block:ifShowTopBorders}
  588.  
  589. {block:ifShowAllBorders}
  590. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  591. {/block:ifShowAllBorders}
  592. }
  593.  
  594. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  595.  
  596. /*----- CAPTIONS -----*/
  597.  
  598. .caption {margin-top: 2em; list-style-type: none;}
  599. .text-caption:first-of-type {margin-top: 0;}
  600.  
  601. .npf-photos {
  602. margin-bottom: 2em;
  603. }
  604.  
  605. .user-icon, .ask-icon {
  606. display: inline-block;
  607. vertical-align: middle;
  608. width: 2em;
  609. height: 2em;
  610. margin-right: 1em;
  611. }
  612.  
  613. .username-content {
  614. margin-block-end: 1em;
  615. }
  616.  
  617. .username-content .username {
  618. display: inline-block;
  619. vertical-align: middle;
  620. font-weight: bold;
  621. }
  622.  
  623. .deactive::after {
  624. content: '(deactivated)';
  625. margin-left: 1em;
  626. opacity: 0.75;
  627. color: var(--themeTextColor);
  628. }
  629.  
  630. p.tmblr-attribution {margin-top: 1em !important;}
  631.  
  632.  
  633. h1.post-title {margin-top: 0;margin-bottom: 1em;}
  634.  
  635.  
  636. a.link-wrap {display: block; border: 1px solid color: var(--bordersColor);}
  637. .link {padding: 2em;}
  638. .link-host, .link-txt {margin-top: 1.5em;}
  639.  
  640. .npf-link-block {
  641. margin-top: 1.5em;
  642. background-color: inherit;
  643. border: 1px solid inherit;
  644. color: inherit;
  645. }
  646.  
  647. /*----- PHOTO -----*/
  648.  
  649. img {
  650. margin: 0;
  651. display: block;
  652. height: auto;
  653. max-width: 100%;
  654. border-radius: var(--borderRadius);
  655. }
  656.  
  657. .photo img {width: 100%;}
  658. .vignette, #vignette {opacity: 0;}
  659. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  660.  
  661. .lightbox-image, #tumblr_lightbox img {
  662. box-shadow: none !important;
  663. border-radius: 0 !important;
  664. max-width: none;
  665. }
  666.  
  667. #tumblr_lightbox_caption, .lightbox-caption {
  668. color: #fff !important;
  669. font-family: inherit;
  670. margin-top: 1em !important;
  671. }
  672.  
  673. /*----- PHOTOSET -----*/
  674.  
  675. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  676. margin-left: 0 !important;
  677. margin-right: 0 !important;
  678. }
  679.  
  680. /*----- QUOTE -----*/
  681.  
  682. .quote {line-height: 160%; font-size: 1.25em;}
  683.  
  684. .quote p:first-of-type {margin-top: 0;}
  685. .quote p:last-of-type {margin-bottom: 0;}
  686.  
  687. .source {margin-top: 1.5em;}
  688.  
  689. /*----- CHAT -----*/
  690.  
  691. .chat {padding: 0; margin: 0;}
  692. .chat li {list-style-type: none; margin-top: 1em;}
  693. .chat li:first-of-type {margin-top: 0;}
  694. .chatter {font-weight: bold;}
  695.  
  696. p.npf_chat, p.npf_chat b {font-family: inherit;}
  697.  
  698. /*----- ANSWER -----*/
  699.  
  700.  
  701. .question-wrapper {margin-top: 1em;}
  702. .question-wrapper p:first-of-type {margin-top: 0;}
  703. .question-wrapper p:last-of-type {margin-bottom: 0;}
  704.  
  705. .question-wrapper .question p {
  706. display: inline;
  707. }
  708.  
  709. .asker-wrapper {
  710. margin-bottom: 1em;
  711. }
  712.  
  713. .ask .replies
  714. { padding-top: 1em;}
  715.  
  716.  
  717. .ask-user {
  718. color:var(--themeLinkColor);
  719. font-weight:var(--boldFontWeight);
  720. text-transform:lowercase;
  721. margin-top: 0.5em;
  722. display: inline-block;
  723. }
  724.  
  725. .ask-user a {
  726. color:var(--themeLinkColor);
  727. font-weight:var(--boldFontWeight);
  728. }
  729.  
  730. .ask-user a:hover {
  731. color:var(--themeLinkHoverColor);
  732. }
  733.  
  734. .ask-question p {
  735. margin: 0 0 5px;
  736. }
  737.  
  738. .ask .feather {
  739. width:var(--themeFontSize);
  740. height:var(--themeFontSize);
  741. stroke:var(--themeLinkColor);
  742. display:inline-block;
  743. vertical-align: middle;
  744. margin-right: 10px;
  745. margin-top: 2px;
  746. }
  747.  
  748. .ask-answer.caption-content::after {
  749. content: '';
  750. height: 0px;
  751. }
  752.  
  753. /*----- AUDIO -----*/
  754.  
  755. .audiopost {padding: 2em; border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);}
  756.  
  757. .album-art {
  758. z-index: 1;
  759. display: inline-block;
  760. vertical-align: middle;
  761. float: left;
  762. width: 100px;
  763. height: 100px;
  764. }
  765.  
  766. .audio-player-wrap {
  767. width: 100px;
  768. height: 100px;
  769. display: inline-block;
  770. }
  771.  
  772. .button {
  773. width: 30px;
  774. height: 30px;
  775. overflow: hidden;
  776. position: relative;
  777. z-index: 2;
  778. margin: 7px;
  779. }
  780.  
  781. .audiobox {
  782. background-color: #f2f2f2;
  783. z-index: 3;
  784. position: absolute;
  785. margin: 28px 0 0 28px;
  786. border-radius: 50%;
  787. }
  788.  
  789. .audioinfo {
  790. display: inline-block;
  791. height: 100px;
  792. max-width: calc(100% - 100px);
  793. margin-left: 100px;
  794. display: flex;
  795. justify-content: center;
  796. flex-direction: column;
  797. box-sizing: border-box;
  798. padding-left: 2em;
  799. }
  800.  
  801. .audioinfo li {list-style-type: none;}
  802. .track {font-weight: bold;}
  803.  
  804. /*----- INFO -----*/
  805.  
  806. .info {
  807. font-size: var(--dateFontSize);
  808. text-transform: var(--dateTextTransform);
  809. display: flex;
  810. flex-direction: column;
  811. align-items: start;
  812. margin-top: 1.5em;
  813. border-radius: var(--borderRadius);
  814.  
  815. {block:ifShowTopBorders}
  816. padding: 1em 0 0;
  817. border-top:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  818. {/block:ifShowTopBorders}
  819.  
  820. {block:ifShowAllBorders}
  821. padding: 1em;
  822. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  823. {/block:ifShowAllBorders}
  824. }
  825.  
  826. .info a {
  827. display: inline-block; vertical-align: middle;}
  828. .info .date a {
  829. font-weight: var(--dateFontWeight);
  830.  
  831. .info-month {
  832. font-weight: 600;
  833. }
  834.  
  835. .info-hour {
  836. opacity: 60%;
  837. margin-left: 0.5rem;
  838. }
  839. }
  840.  
  841. .info .date {
  842. display: flex;
  843. }
  844.  
  845. .info a, .tags a {margin-right: 0.85em;}
  846.  
  847. .tags a {
  848. color: var(--themeLinkColor);
  849. }
  850.  
  851. .tags {
  852. text-transform: none;
  853. margin-top: 0.4em;
  854. -webkit-transition:0.7s ease;
  855. transition-behavior: allow-discrete;
  856. }
  857.  
  858.  
  859.  
  860. .posts:hover .tags {
  861. -webkit-transition: all 0.5s ease-out;
  862. -moz-transition: all 0.5s ease-out;
  863. transition: all 0.5s ease-out;
  864. }
  865.  
  866.  
  867. .tags a {
  868. opacity: 65%;
  869. }
  870.  
  871. .tags a:hover {
  872. opacity: 100%;
  873. color: var(--themeLinkHoverColor);
  874. }
  875.  
  876. a.pinned-post {font-weight: bold; color: var(--themeLinkColor);}
  877.  
  878. .likeb {
  879. position: relative;
  880. display: inline-block;
  881. margin-bottom: -1px;
  882. }
  883.  
  884. .likeb .like_button iframe {
  885. position: absolute;
  886. top: 0;
  887. left: 0;
  888. bottom: 0;
  889. right: 0;
  890. z-index: 2;
  891. opacity: 0;
  892. }
  893.  
  894. .like_button iframe {width: 100% !important; height: 100% !important;}
  895. .likeb .liked + .actual-button {color: var(--themeLinkColor);}
  896. .likeb .liked + .actual-button:after {content: 'd';}
  897.  
  898.  
  899. /*---- POST NOTES -----*/
  900.  
  901. .notes {margin: {text:post margin}px 0;}
  902.  
  903. ol.notes {
  904. max-width: 100%;
  905. padding: 0;
  906. margin: 2em 0 0 0;
  907. }
  908.  
  909. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  910.  
  911. ol.notes li.note img.avatar {
  912. margin-right: 1em;
  913. vertical-align: middle;
  914. display: inline-block;
  915. width: 1.25em;
  916. height: 1.25em;
  917. }
  918.  
  919.  
  920. /*---- CREDIT -----*/
  921.  
  922. .maziekeen {
  923. background-color: var(--postsBackgroundColor);
  924. position: fixed;
  925. bottom: 20px;
  926. right: 20px;
  927. font-weight: bold;
  928. border-radius: var(--borderRadius);
  929. color: var(--themeLinkColor);
  930. padding: 1rem;
  931. display: flex;
  932. gap: 1em;
  933. align-items: center;
  934. }
  935.  
  936.  
  937.  
  938. /* maziekeen's theme 221 - MASONRY NAVIGATION CSS PART */
  939. .masonry-navigation {
  940. width: 100%;
  941. border-bottom:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  942. margin-bottom:15px;
  943. }
  944.  
  945. .masonry-navigation:last-child {
  946. border:none;
  947. }
  948.  
  949. .masonry-navigation-item.one-column {
  950. width: 100%;
  951. padding: 0 5px;
  952. margin-bottom: 10px;
  953. }
  954.  
  955. .masonry-navigation-item.one-column ul {
  956. display: flex;
  957. flex-wrap: wrap;
  958. margin: 0;
  959. padding: 0;
  960. }
  961.  
  962. /* if you have any problem with one colum lists (ul li) you edit here */
  963. .masonry-navigation-item.one-column ul li {
  964. margin: 4px 15px;
  965. padding: 0;
  966. }
  967.  
  968. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  969. .masonry-navigation-item.two-columns {
  970. width: 240px;
  971. padding: 0 5px;
  972. margin-bottom: 10px;
  973. }
  974.  
  975. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  976. .masonry-navigation-item.three-columns {
  977. width: 160px;
  978. padding: 0 5px;
  979. margin-bottom: 10px;
  980. }
  981.  
  982. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  983. .masonry-navigation-item.scroll {
  984. height:215px;
  985. overflow-y: scroll;
  986. }
  987. /* maziekeen's theme 221 - MASONRY NAVIGATION CSS PART */
  988.  
  989. {CustomCSS}
  990.  
  991. </style>
  992. </head>
  993.  
  994. <body>
  995. <main class="theme-container">
  996. <aside class="sidebar-container">
  997. <div class="sidebar-content">
  998. {block:ifSidebarTitle}
  999. <div class="sidebar-title">{Title}</div>
  1000. {/block:ifSidebarTitle}
  1001.  
  1002. {block:ifSidebarImage}
  1003. <a href="/"><img src="https://static.tumblr.com/0siu224/bUqt4b10d/6-2.gif" id="side-img" alt="Sidebar image"/></a>
  1004. {/block:ifSidebarImage}
  1005.  
  1006. <nav class="sidebar-navigation">
  1007. <ul class="sidebar-links">
  1008. <li>
  1009. <a href="{text:Home URL}">
  1010. {text:Home Text}
  1011. </a>
  1012. </li>
  1013.  
  1014. <li>
  1015. <a href="{text:Ask URL}">
  1016. {text:Ask Text}
  1017. </a>
  1018. </li>
  1019.  
  1020. {block:ifSidebarArchiveLink}
  1021. <li>
  1022. <a href="{text:Archive URL}">
  1023. {text:Archive Text}
  1024. </a>
  1025. </li>
  1026. {/block:ifSidebarArchiveLink}
  1027.  
  1028. {block:ifSidebarSubmitLink}
  1029. <li>
  1030. <a href="{text:Submit URL}">
  1031. {text:Submit Text}
  1032. </a>
  1033. </li>
  1034. {/block:ifSidebarSubmitLink}
  1035.  
  1036. {block:ifSidebarPagesLink}
  1037. {block:HasPages}
  1038. {block:Pages}
  1039. <li>
  1040. <a href="{URL}">{Label}</a>
  1041. </li>
  1042. {/block:Pages}
  1043. {/block:HasPages}
  1044. {/block:ifSidebarPagesLink}
  1045.  
  1046. {block:ifSidebarLink1}
  1047. <li>
  1048. <a href="{text:Sidebar Link 1 URL}">
  1049. {text:Sidebar Link 1 Text}
  1050. </a>
  1051. </li>
  1052. {/block:ifSidebarLink1}
  1053.  
  1054. {block:ifSidebarLink2}
  1055. <li>
  1056. <a href="{text:Sidebar Link 2 URL}">
  1057. {text:Sidebar Link 2 Text}
  1058. </a>
  1059. </li>
  1060. {/block:ifSidebarLink2}
  1061.  
  1062. {block:ifSidebarLink3}
  1063. <li>
  1064. <a href="{text:Sidebar Link 3 URL}">
  1065. {text:Sidebar Link 3 Text}
  1066. </a>
  1067. </li>
  1068. {/block:ifSidebarLink3}
  1069.  
  1070. {block:ifSidebarLink4}
  1071. <li>
  1072. <a href="{text:Sidebar Link 4 URL}">
  1073. {text:Sidebar Link 4 Text}
  1074. </a>
  1075. </li>
  1076. {/block:ifSidebarLink4}
  1077. </ul>
  1078. </nav>
  1079.  
  1080. {block:Description}
  1081. <div id="description" class="description">
  1082. <strong>luciane. 30s. she/her. brazil.</strong> i don't come here often these days cause i'm in a forever hiatus, but enjoy this mess, always a new obsession from time to time.
  1083. </div>
  1084. {/block:Description}
  1085.  
  1086. <div id="page-navigation">
  1087.  
  1088. {block:Pagination}
  1089. <span class="pagination-links">
  1090. {block:ifShowIconPagination}
  1091. {block:PreviousPage}
  1092. <a href="{PreviousPage}" title="{lang:Previous page}">
  1093. <i class="feather" data-feather="chevron-left"></i>
  1094. </a>
  1095. {/block:PreviousPage}
  1096. {block:NextPage}
  1097. <a href="{NextPage}" title="{lang:Next page}">
  1098. <i class="feather" data-feather="chevron-right"></i>
  1099. </a>
  1100. {/block:NextPage}
  1101. {/block:ifShowIconPagination}
  1102.  
  1103. {block:ifNotShowIconPagination}
  1104. {block:PreviousPage}
  1105. <a href="{PreviousPage}">
  1106. {lang:Previous page}
  1107. </a>
  1108. {/block:PreviousPage}
  1109. {block:NextPage}
  1110. <a href="{NextPage}">
  1111. {lang:Next page}
  1112. </a>
  1113. {/block:NextPage}
  1114. {/block:ifNotShowIconPagination}
  1115. </span>
  1116. {/block:Pagination}
  1117. {block:ifShowThemeToggle}
  1118. <span class="navigation-toggle-theme">
  1119.  
  1120. {block:ifNotShowThemeIconToggle}
  1121. <div class="theme-toggle" aria-label="toggle dark & light mode" type="button" role="button">
  1122. <span class="light-on" title="toggle dark mode">dark</span>
  1123. <span class="light-off" title="toggle light mode">light</span>
  1124. </div>
  1125. {/block:ifNotShowThemeIconToggle}
  1126.  
  1127. {block:ifShowThemeIconToggle}
  1128. <div class="theme-toggle light-on" title="toggle dark mode" aria-label="toggle dark & light mode" type="button" role="button">
  1129. <i class="feather" data-feather="moon"></i>
  1130. </div>
  1131.  
  1132. <div class="theme-toggle light-off" title="toggle light mode" aria-label="toggle dark & light mode" type="button" role="button">
  1133. <i class="feather" data-feather="sun"></i>
  1134. </div>
  1135. </span>
  1136. {/block:ifShowThemeIconToggle}
  1137. {/block:ifShowThemeToggle}
  1138. </div>
  1139. </div>
  1140. </aside>
  1141.  
  1142. <section class="posts-container">
  1143. {block:SearchPage}
  1144. <article class="posts posts-day-page">
  1145. {block:SearchResults}
  1146. <p class="posts-tag-item">{lang:Search results for SearchQuery 2}</p>
  1147. {/block:SearchResults}
  1148.  
  1149. {block:NoSearchResults}
  1150. <p class="posts-tag-item">{lang:Sorry no results for SearchQuery 2}</p>
  1151. {/block:NoSearchResults}
  1152. </article>
  1153. {/block:SearchPage}
  1154.  
  1155. {block:TagPage}
  1156. <article class="posts posts-tag-page">
  1157. <p class="posts-tag-item">{lang:Showing TagResultCount posts tagged Tag 2}</p>
  1158. </article>
  1159. {/block:TagPage}
  1160.  
  1161. {block:Posts}
  1162. <article class="posts-content">
  1163. <article id="post-{PostID}" class="{posttype}-post posts">
  1164. {block:Photo}
  1165. <div class="legacy-photo"><img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos"></div>
  1166. {/block:Photo}
  1167.  
  1168. {block:Photoset}
  1169. <div class="legacy-photoset">{Photoset}</div>
  1170. {/block:Photoset}
  1171.  
  1172. {block:Panorama}
  1173. <div class="legacy-photo"><img src="{photourl-panorama}" alt="{photoalt}"></div>
  1174. {/block:Panorama}
  1175.  
  1176. {block:Quote}
  1177. <div class="quote">
  1178. "{Quote}"
  1179. </div>
  1180. <div class="source">
  1181. -{Source}
  1182. </div>
  1183. {/block:Quote}
  1184.  
  1185. {block:Chat}
  1186. <ul class="chat">
  1187. {block:Lines}
  1188. <li>
  1189. {block:Label}{Label}{/block:Label}
  1190. {Line}
  1191. </li>
  1192. {/block:Lines}
  1193. </ul>
  1194. {/block:Chat}
  1195. {block:link}
  1196. <div class="npf-link-block">
  1197. <a href="{URL}">
  1198. {Name}
  1199. </a>
  1200. </div>
  1201. {/block:link}
  1202. {block:Video}
  1203. {Video-500}
  1204. {/block:Video}
  1205. {block:Audio}
  1206. {audioembed}
  1207. {/block:Audio}
  1208. {block:Answer}
  1209. <div class="ask">
  1210. <div class="question-wrapper">
  1211. <i data-feather="mail" class="feather"></i>
  1212. <span class="question">
  1213. {Question}
  1214. </span>
  1215. </div>
  1216. <div class="asker-wrapper">
  1217. <i data-feather="message-circle"></i>
  1218. <span class="ask-user">
  1219. {lang:Asked by Asker 2}
  1220. </span>
  1221. </div>
  1222. {block:Answerer}
  1223. <div class="answer">
  1224. {Answerer} answered: {Answer}
  1225. </div>
  1226. {/block:Answerer}
  1227. {block:NotReblog}
  1228. <div class="replies">
  1229. {Replies}
  1230. </div>
  1231. {/block:NotReblog}
  1232. </div>
  1233. {/block:Answer}
  1234. <div class="captions {block:notreblog} original-post {/block:notreblog}">
  1235. {block:Text}
  1236. {block:Title}
  1237. <h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>
  1238. {/block:Title}
  1239.  
  1240. {block:NotReblog}
  1241. <li class="caption text-caption">
  1242. {Body}
  1243. </li>
  1244. {/block:NotReblog}
  1245.  
  1246. {block:RebloggedFrom}
  1247. {block:Reblogs}
  1248. <li class="caption text-caption">
  1249. <div class="username-content">
  1250. <img src="{PortraitURL-64}" class="user-icon">
  1251. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1252. </div>
  1253. {Body}
  1254. </li>
  1255. {/block:Reblogs}
  1256. {/block:RebloggedFrom}
  1257. {/block:Text}
  1258.  
  1259. {block:Caption}
  1260. {block:NotReblog}
  1261. <li class="caption">
  1262. {Caption}
  1263. </li>
  1264. {/block:NotReblog}
  1265.  
  1266. {block:RebloggedFrom}
  1267. {block:Reblogs}
  1268. <li class="caption">
  1269. <div class="username-content">
  1270. <img src="{PortraitURL-64}" class="user-icon">
  1271. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1272. </div>
  1273. {Body}
  1274. </li>
  1275. {/block:Reblogs}
  1276. {/block:RebloggedFrom}
  1277. {/block:Caption}
  1278. </div>
  1279. <div class="info">
  1280. {block:Date}
  1281. <div class="date">
  1282. {block:PinnedPostLabel}
  1283. <a href="{Permalink}" class="pinned-post">{PinnedPostLabel}</a>
  1284. {/block:PinnedPostLabel}
  1285. <a href="{Permalink}">
  1286. <span class="info-month" title="{DayOfMonthWithZero}{DayOfMonthSuffix}, {Year}">{ShortMonth}</span>
  1287. <span class="info-hour" title="{CapitalAmPm}">{12HourWithZero}:{Minutes}</span>
  1288. </a>
  1289. {block:PermalinkPage}
  1290. <div class="reblog-link">
  1291. {block:NotReblog}
  1292. <a target="_blank" href="{Permalink}" title="Original post">{Name}</a>
  1293. {/block:NotReblog}
  1294. {block:RebloggedFrom}
  1295. <a target="_blank" href="{ReblogParentURL}" title="{lang:Reblogged from} {ReblogParentName}">{ReblogParentName}</a>
  1296. {/block:RebloggedFrom}
  1297. <a target="_blank" href="{ReblogRootURL}" title="{lang:Originally from ReblogRootName}">{ReblogRootName}</a>
  1298. </div>
  1299. {block:ifNotShowDateInformation}
  1300. {block:NoteCount}
  1301. <a href="{Permalink}" class="notecount" title="{NoteCountWithLabel}">{NoteCount}</a>
  1302. {/block:NoteCount}
  1303. <a href="{ReblogURL}" target="_blank">reblog</a>
  1304. <a class="likeb" href="#">{LikeButton}<span class="actual-button">like</span></a>
  1305. {/block:ifNotShowDateInformation}
  1306. {/block:PermalinkPage}
  1307. {block:ifShowDateInformation}
  1308. {block:NoteCount}
  1309. <a href="{Permalink}" class="notecount" title="{NoteCountWithLabel}">{NoteCount}</a>
  1310. {/block:NoteCount}
  1311. <a href="{ReblogURL}" target="_blank">reblog</a>
  1312. <a class="likeb" href="#">{LikeButton}<span class="actual-button">like</span></a>
  1313. {/block:ifShowDateInformation}
  1314. </div>
  1315. {/block:Date}
  1316. {block:HasTags}
  1317. <div class="tags">
  1318. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1319. </div>
  1320. {/block:HasTags}
  1321. </div>
  1322. {PostNotes}
  1323. </article>
  1324. </article>
  1325. {/block:Posts}
  1326. <!-- end of posts container -->
  1327. </section>
  1328. </main>
  1329.  
  1330. <div class="maziekeen">
  1331. <a class="scrolltop" href="javascript:;" id="scrollToTop" title="Scroll to top">
  1332. <i data-feather="arrow-up" class="feather"></i>
  1333. </a>
  1334. <a href="/" title="theme 225 by maziekeen" id="credit">maziekeen</a>
  1335. </div>
  1336. </body>
  1337.  
  1338.  
  1339. <!-- RESOURCES: feather icons / by: https://github.com/feathericons/feather
  1340. uses: css/js -->
  1341.  
  1342. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  1343.  
  1344. <!-- RESOURCES: smooth scroll / by: https://github.com/gblazex/smoothscroll-for-websites
  1345. uses: js -->
  1346. <script
  1347. src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.5.1/SmoothScroll.min.js"></script>
  1348.  
  1349. <!-- RESOURCES: polyfill for css anchor positioning / by: https://github.com/oddbird/css-anchor-positioning
  1350. uses: css/js -->
  1351. <script
  1352. src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest"
  1353. crossorigin="anonymous"
  1354. defer
  1355. >
  1356. </script>
  1357.  
  1358. <!-- RESOURCES: photoset npf / by: eggdesign https://github.com/cornetespoir/npf-theme-base/tree/main
  1359. uses: html/css/js -->
  1360. <script defer src="https://maziecodes.github.io/tumblr/themes/scripts/vendors/eggdesign/eggdesign-npf-reverse.min.js"></script>
  1361.  
  1362. <!-- masonry navigation -->
  1363. <script defer src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  1364.  
  1365.  
  1366. <script defer src="https://maziecodes.github.io/tumblr/themes/scripts/resources/note-count/note-count.min.js"></script>
  1367.  
  1368.  
  1369. <script type="text/javascript">
  1370. /* RESOURCES: feather icons / by: https://github.com/feathericons/feather
  1371. uses: css/js */
  1372. feather.replace();
  1373.  
  1374. /* RESOURCES: tippyjs tooltips / by: https://atomiks.github.io/tippyjs/
  1375. uses: css/js */
  1376. tippy('a[title], span[title], button[title], div[title], i[title]', {
  1377. theme: 'custom',
  1378. arrow: false,
  1379. zIndex: 9999999999,
  1380. maxWidth: 300,
  1381. content(reference) {
  1382. const title = reference.getAttribute('title');
  1383. reference.removeAttribute('title');
  1384. return title;
  1385. },
  1386. });
  1387.  
  1388. const themeToggleButtons = document.querySelectorAll(".theme-toggle");
  1389.  
  1390. themeToggleButtons.forEach((btn) => {
  1391. // Determine initial theme
  1392. const storedTheme = localStorage.getItem("theme");
  1393.  
  1394. // Set initial ARIA attributes
  1395. btn.setAttribute("aria-label", storedTheme === "dark" ? "Enable light mode" : "Enable dark mode");
  1396. btn.setAttribute("aria-pressed", storedTheme === "dark");
  1397.  
  1398. // Set the initial theme on <html>
  1399. document.documentElement.setAttribute("data-theme", storedTheme);
  1400.  
  1401. // Click handler
  1402. btn.addEventListener("click", function () {
  1403. const currentTheme = document.documentElement.getAttribute("data-theme");
  1404. const targetTheme = currentTheme === "light" ? "dark" : "light";
  1405.  
  1406. // Snappy transition
  1407. document.documentElement.classList.add("theme-transition");
  1408. setTimeout(() => {
  1409. document.documentElement.classList.remove("theme-transition");
  1410. }, 50);
  1411.  
  1412. // Apply new theme and store preference
  1413. document.documentElement.setAttribute("data-theme", targetTheme);
  1414. localStorage.setItem("theme", targetTheme);
  1415.  
  1416. // Update ARIA attributes
  1417. btn.setAttribute("aria-label", targetTheme === "dark" ? "Enable light mode" : "Enable dark mode");
  1418. btn.setAttribute("aria-pressed", targetTheme === "dark");
  1419. });
  1420. });
  1421.  
  1422.  
  1423.  
  1424.  
  1425. document.addEventListener('DOMContentLoaded', function () {
  1426. var link = document.getElementById('scrollToTop');
  1427. var isVisible = false; // estado interno para evitar trabalho desnecessário
  1428. var isTransitioning = false; // evita conflitos durante transições
  1429.  
  1430. // Scroll suave para o topo
  1431. link.addEventListener('click', function (e) {
  1432. e.preventDefault();
  1433. window.scrollTo({ top: 0, behavior: 'smooth' });
  1434. });
  1435.  
  1436. // Função para mostrar com fade-in
  1437. function show() {
  1438. if (isVisible || isTransitioning) return;
  1439. isTransitioning = true;
  1440.  
  1441. // Garantir que o elemento entre no fluxo antes da transição
  1442. link.style.display = 'block';
  1443.  
  1444. // Forçar um reflow para o navegador aplicar o novo display
  1445. // e reconhecer a transição de opacity 0 -> 1
  1446. // eslint-disable-next-line no-unused-expressions
  1447. link.offsetHeight;
  1448.  
  1449. link.classList.add('is-visible');
  1450.  
  1451. var onEnd = function (e) {
  1452. if (e.propertyName === 'opacity') {
  1453. link.removeEventListener('transitionend', onEnd);
  1454. isVisible = true;
  1455. isTransitioning = false;
  1456. }
  1457. };
  1458. link.addEventListener('transitionend', onEnd, { once: false });
  1459. }
  1460.  
  1461. // Função para esconder com fade-out e depois remover do layout
  1462. function hide() {
  1463. if (!isVisible || isTransitioning) return;
  1464. isTransitioning = true;
  1465.  
  1466. link.classList.remove('is-visible');
  1467.  
  1468. var onEnd = function (e) {
  1469. if (e.propertyName === 'opacity') {
  1470. link.style.display = 'none';
  1471. link.removeEventListener('transitionend', onEnd);
  1472. isVisible = false;
  1473. isTransitioning = false;
  1474. }
  1475. };
  1476. link.addEventListener('transitionend', onEnd, { once: false });
  1477. }
  1478.  
  1479. function updateVisibility() {
  1480. var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  1481. if (scrolled <= 0) {
  1482. hide();
  1483. } else {
  1484. show();
  1485. }
  1486. }
  1487.  
  1488. // Estado inicial
  1489. // Caso a página carregue já rolada, ajusta corretamente
  1490. if ((window.pageYOffset || document.documentElement.scrollTop) > 0) {
  1491. link.style.display = 'block';
  1492. // Força estado final visível sem transição inicial
  1493. link.classList.add('is-visible');
  1494. isVisible = true;
  1495. }
  1496.  
  1497. window.addEventListener('scroll', updateVisibility, { passive: true });
  1498. });
  1499.  
  1500.  
  1501.  
  1502.  
  1503. document.addEventListener("DOMContentLoaded", () => {
  1504. initNoteCountFormatting();
  1505.  
  1506. // masonry navigation
  1507. var elements = document.getElementsByClassName('masonry-navigation');
  1508. var msnry;
  1509. var nElements = elements.length;
  1510. for(var i = 0; i < nElements; i++){
  1511. msnry = new Masonry( elements[i], {
  1512. // columnWidth: 268,
  1513. gutter: 10,
  1514. itemSelector: '.masonry-navigation-item',
  1515. });
  1516. }
  1517.  
  1518.  
  1519. /* RESOURCES: photoset npf / by: eggdesign https://github.com/cornetespoir/npf-theme-base/tree/main
  1520. uses: html/css/js */
  1521. let posts = []
  1522. {block:Posts}
  1523. posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
  1524. {/block:Posts}
  1525. });
  1526. </script>
  1527. </html>
Advertisement
Add Comment
Please, Sign In to add comment