API tools faq
paste
sexycullen

225 - v1

sexycullen
May 31st, 2025 (edited)
71
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 81.00 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. maziekeen's theme ###
  4. https://maziekeen.tumblr.com/
  5.  
  6. PLEASE DO NOT:
  7. remove the credits; claim as your own; use as a base,
  8. take parts of the theme, repost as your own
  9. YOU CAN:
  10. edit as much as you want for your own personal use only.
  11.  
  12.  
  13. CREDITS,
  14. captions, audio style, toggle controls and tags by seyche
  15. css photosets by annasthms
  16. npf images readjustment v.03 by glenthemes
  17. smooth scroll by michael herf and balazs galambosi
  18. feathericons by github.com/feathericons/feather
  19. tippyjs tooltips by eossa
  20.  
  21. ------------------------------------------------------------------------>
  22.  
  23. <!DOCTYPE html>
  24.  
  25. <!-- RESOURCES: dark mode / by: mournstera.tumblr.com/post/724742111455592448
  26. uses: html/css/js -->
  27.  
  28. {block:ifNotDarkThemeDefaultColor}
  29. <html data-theme="light">
  30. {/block:ifNotDarkThemeDefaultColor}
  31.  
  32. {block:ifDarkThemeDefaultColor}
  33. <html data-theme="dark">
  34. {/block:ifDarkThemeDefaultColor}
  35.  
  36. <head>
  37. <title>{Title}</title>
  38. <link rel="shortcut icon" href="{Favicon}">
  39. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  40. {block:Description}
  41. <meta name="description" content="{MetaDescription}" />
  42. {/block:Description}
  43.  
  44.  
  45. {block:Hidden}
  46.  
  47.  
  48. <!-- -------------- LIGHT THEME CUSTOMIZATION -------------- -->
  49. <meta name="color:Background Theme Color" content="#ffffff" />
  50. <meta name="color:Body Link Color" content="#7a7a7a" />
  51. <meta name="color:Body Text Color" content="#404040" />
  52. <meta name="color:Body Link Hover Color" content="#131313" />
  53. <meta name="color:Hover Text Background Color" content="#212121" />
  54. <meta name="color:Hover Text Color" content="#ffffff" />
  55. <meta name="color:Post Detail Link Color" content="#222222">
  56. <meta name="color:Post Detail Text Color" content="#959595">
  57. <meta name="color:Tags Link Color" content="#222222">
  58. <meta name="color:Borders Color" content="#ececec" />
  59. <meta name="color:Posts Background Color" content="#ffffff" />
  60.  
  61. <!--<meta name="color:Sidebar Background Color" content="#ffffff">-->
  62.  
  63. <!-- -------------- DARK THEME CUSTOMIZATION -------------- -->
  64. <meta name="color:Dark Background Theme Color" content="#0e0e0e" />
  65. <meta name="color:Dark Body Link Color" content="#f7f7f7" />
  66. <meta name="color:Dark Body Text Color" content="#959595" />
  67. <meta name="color:Dark Body Link Hover Color" content="#f6cf6a" />
  68. <meta name="color:Dark Hover Text Background Color" content="#212121" />
  69. <meta name="color:Dark Hover Text Color" content="#ffffff" />
  70. <meta name="color:Dark Post Detail Link Color" content="#f7f7f7">
  71. <meta name="color:Dark Post Detail Text Color" content="#959595">
  72. <meta name="color:Dark Tags Link Color" content="#f7f7f7">
  73. <meta name="color:Dark Borders Color" content="#202020" />
  74. <meta name="color:Dark Posts Background Color" content="#191919" />
  75.  
  76. <!--<meta name="color:Dark Sidebar Background Color" content="#ffffff">-->
  77.  
  78.  
  79.  
  80. <!-- -------------- POSTS: sizes -------------- -->
  81. <meta name="select:Post Width" content="54rem" title="540px" />
  82. <meta name="select:Post Width" content="50rem" title="500px" />
  83. <meta name="select:Post Width" content="40rem" title="400px" />
  84.  
  85. <meta name="select:Photoset Gutter" content="0.44rem" title="For 540px" />
  86. <meta name="select:Photoset Gutter" content="1rem" title="For 500px" />
  87. <meta name="select:Photoset Gutter" content="0.2rem" title="For 400px" />
  88.  
  89. <!-- -------------- THEME: sidebar and posts borders -------------- -->
  90. <meta name="select:Borders Size" content="0.1rem" title="1px" />
  91. <meta name="select:Borders Size" content="0rem" title="0px" />
  92. <meta name="select:Borders Size" content="0.2rem" title="2px" />
  93. <meta name="select:Borders Size" content="0.3rem" title="3px" />
  94. <meta name="select:Borders Size" content="0.4rem" title="4px" />
  95. <meta name="select:Borders Size" content="0.5rem" title="5px" />
  96.  
  97. <meta name="select:Borders Style" content="solid" />
  98. <meta name="select:Borders Style" content="dotted" />
  99. <meta name="select:Borders Style" content="dashed" />
  100. <meta name="select:Borders Style" content="double" />
  101. <meta name="select:Borders Style" content="ridge" />
  102.  
  103.  
  104. <!-- -------------- THEME: body styling -------------- -->
  105. <meta name="select:Body Font Size" content="1.3rem" title="13px" />
  106. <meta name="select:Body Font Size" content="0.8rem" title="8px" />
  107. <meta name="select:Body Font Size" content="0.9rem" title="9px" />
  108. <meta name="select:Body Font Size" content="1rem" title="10px" />
  109. <meta name="select:Body Font Size" content="1.1rem" title="11px" />
  110. <meta name="select:Body Font Size" content="1.2rem" title="12px" />
  111. <meta name="select:Body Font Size" content="1.4rem" title="14px" />
  112. <meta name="select:Body Font Size" content="1.5rem" title="15px" />
  113. <meta name="select:Body Font Size" content="1.6rem" title="16px" />
  114. <meta name="select:Body Font Size" content="1.7rem" title="17px" />
  115. <meta name="select:Body Font Size" content="1.8rem" title="18px" />
  116.  
  117. <meta name="select:Body Font Letter Spacing" content="normal" title="none" />
  118. <meta name="select:Body Font Letter Spacing" content="0.015rem" title="0.15px" />
  119. <meta name="select:Body Font Letter Spacing" content="0.025rem" title="0.25px" />
  120. <meta name="select:Body Font Letter Spacing" content="0.075rem" title="0.75px" />
  121. <meta name="select:Body Font Letter Spacing" content="0.08rem" title="0.80px" />
  122. <meta name="select:Body Font Letter Spacing" content="0.085rem" title="0.85px" />
  123. <meta name="select:Body Font Letter Spacing" content="0.09rem" title="0.90px" />
  124. <meta name="select:Body Font Letter Spacing" content="0.095rem" title="0.95px" />
  125. <meta name="select:Body Font Letter Spacing" content="0.1rem" title="1px" />
  126. <meta name="select:Body Font Letter Spacing" content="0.2rem" title="2px" />
  127. <meta name="select:Body Font Letter Spacing" content="0.3rem" title="3px" />
  128.  
  129. <meta name="select:Body Font Weight" content="400" title="normal" />
  130. <meta name="select:Body Font Weight" content="700" title="bold" />
  131. <meta name="select:Body Font Weight" content="300" title="light" />
  132. <meta name="select:Body Font Weight" content="500" title="medium" />
  133. <meta name="select:Body Font Weight" content="600" title="semi-bold" />
  134.  
  135. <meta name="select:Bold Font Weight" content="700" title="bold" />
  136. <meta name="select:Bold Font Weight" content="300" title="light" />
  137. <meta name="select:Bold Font Weight" content="400" title="normal" />
  138. <meta name="select:Bold Font Weight" content="500" title="medium" />
  139. <meta name="select:Bold Font Weight" content="600" title="semi-bold" />
  140.  
  141. <meta name="select:Link Decoration Line" content="wavy underline" title="Wavy" />
  142. <meta name="select:Link Decoration Line" content="none" title="None" />
  143. <meta name="select:Link Decoration Line" content="underline" title="Underline" />
  144. <meta name="select:Link Decoration Line" content="double underline" title="Double" />
  145. <meta name="select:Link Decoration Line" content="dotted underline" title="Dotted" />
  146. <meta name="select:Link Decoration Line" content="dashed underline" title="Dashed" />
  147. <meta name="select:Link Decoration Line" content="line-through" title="Line Through" />
  148. <meta name="select:Link Decoration Line" content="underline overline" title="Underline Overline" />
  149. <meta name="select:Link Decoration Line" content="underline line-through" title="Underline Line Through" />
  150.  
  151. <meta name="select:Link Decoration Line Hover" content="wavy underline" title="Wavy" />
  152. <meta name="select:Link Decoration Line Hover" content="none" title="None" />
  153. <meta name="select:Link Decoration Line Hover" content="underline" title="Underline" />
  154. <meta name="select:Link Decoration Line Hover" content="double underline" title="Double" />
  155. <meta name="select:Link Decoration Line Hover" content="dotted underline" title="Dotted" />
  156. <meta name="select:Link Decoration Line Hover" content="dashed underline" title="Dashed" />
  157. <meta name="select:Link Decoration Line Hover" content="line-through underline" title="Line Through" />
  158. <meta name="select:Link Decoration Line Hover" content="underline overline" title="Underline Overline" />
  159. <meta name="select:Link Decoration Line Hover" content="underline line-through" title="Underline Line Through" />
  160.  
  161. <!-- -------------- THEME: posts h1, h2, h3, h4, h5, h6 styling -------------- -->
  162. <meta name="select:Posts Titles Font Size" content="1.6rem" title="16px" />
  163. <meta name="select:Posts Titles Font Size" content="1rem" title="10px" />
  164. <meta name="select:Posts Titles Font Size" content="1.1rem" title="11px" />
  165. <meta name="select:Posts Titles Font Size" content="1.2rem" title="12px" />
  166. <meta name="select:Posts Titles Font Size" content="1.3rem" title="13px" />
  167. <meta name="select:Posts Titles Font Size" content="1.4rem" title="14px" />
  168. <meta name="select:Posts Titles Font Size" content="1.5rem" title="15px" />
  169. <meta name="select:Posts Titles Font Size" content="1.7rem" title="17px" />
  170. <meta name="select:Posts Titles Font Size" content="1.8rem" title="18px" />
  171.  
  172. <meta name="select:Posts Titles Font Letter Spacing" content="normal" title="none" />
  173. <meta name="select:Posts Titles Font Letter Spacing" content="0.015rem" title="0.15px" />
  174. <meta name="select:Posts Titles Font Letter Spacing" content="0.025rem" title="0.25px" />
  175. <meta name="select:Posts Titles Font Letter Spacing" content="0.075rem" title="0.75px" />
  176. <meta name="select:Posts Titles Font Letter Spacing" content="0.08rem" title="0.80px" />
  177. <meta name="select:Posts Titles Font Letter Spacing" content="0.085rem" title="0.85px" />
  178. <meta name="select:Posts Titles Font Letter Spacing" content="0.09rem" title="0.90px" />
  179. <meta name="select:Posts Titles Font Letter Spacing" content="0.095rem" title="0.95px" />
  180. <meta name="select:Posts Titles Font Letter Spacing" content="0.1rem" title="1px" />
  181. <meta name="select:Posts Titles Font Letter Spacing" content="0.2rem" title="2px" />
  182. <meta name="select:Posts Titles Font Letter Spacing" content="0.3rem" title="3px" />
  183.  
  184. <meta name="select:Posts Titles Font Weight" content="700" title="bold" />
  185. <meta name="select:Posts Titles Font Weight" content="300" title="light" />
  186. <meta name="select:Posts Titles Font Weight" content="400" title="normal" />
  187. <meta name="select:Posts Titles Font Weight" content="500" title="medium" />
  188. <meta name="select:Posts Titles Font Weight" content="600" title="semi-bold" />
  189.  
  190. <meta name="select:Posts Titles Font Style" content="normal">
  191. <meta name="select:Posts Titles Font Style" content="italic">
  192.  
  193. <meta name="select:Posts Titles Text Transform" content="uppercase">
  194. <meta name="select:Posts Titles Text Transform" content="none">
  195. <meta name="select:Posts Titles Text Transform" content="lowercase">
  196. <meta name="select:Posts Titles Text Transform" content="capitalize">
  197.  
  198. <meta name="select:Posts Titles Text Position" content="left">
  199. <meta name="select:Posts Titles Text Position" content="center">
  200. <meta name="select:Posts Titles Text Position" content="justify">
  201. <meta name="select:Posts Titles Text Position" content="right">
  202.  
  203. <!-- -------------- POSTS: date styling -------------- -->
  204. <meta name="select:Post Detail Font Size" content="12px" />
  205. <meta name="select:Post Detail Font Size" content="8px" />
  206. <meta name="select:Post Detail Font Size" content="9px" />
  207. <meta name="select:Post Detail Font Size" content="10px" />
  208. <meta name="select:Post Detail Font Size" content="11px" />
  209. <meta name="select:Post Detail Font Size" content="13px" />
  210. <meta name="select:Post Detail Font Size" content="14px" />
  211. <meta name="select:Post Detail Font Size" content="15px" />
  212. <meta name="select:Post Detail Font Size" content="16px" />
  213.  
  214. <meta name="select:Post Detail Font Weight" content="bold" />
  215. <meta name="select:Post Detail Font Weight" content="normal" />
  216.  
  217. <meta name="select:Post Detail Font Style" content="normal" />
  218. <meta name="select:Post Detail Font Style" content="italic" />
  219.  
  220. <meta name="select:Post Detail Text Transform" content="uppercase" />
  221. <meta name="select:Post Detail Text Transform" content="none" />
  222. <meta name="select:Post Detail Text Transform" content="lowercase" />
  223. <meta name="select:Post Detail Text Transform" content="capitalize" />
  224.  
  225. <meta name="select:Post Detail Text Position" content="left" />
  226. <meta name="select:Post Detail Text Position" content="center" />
  227. <meta name="select:Post Detail Text Position" content="justify" />
  228. <meta name="select:Post Detail Text Position" content="right" />
  229.  
  230.  
  231. <!-- -------------- POSTS: tags styling -------------- -->
  232. <meta name="select:Tags Font Size" content="13px" />
  233. <meta name="select:Tags Font Size" content="8px" />
  234. <meta name="select:Tags Font Size" content="9px" />
  235. <meta name="select:Tags Font Size" content="10px" />
  236. <meta name="select:Tags Font Size" content="11px" />
  237. <meta name="select:Tags Font Size" content="12px" />
  238. <meta name="select:Tags Font Size" content="14px" />
  239. <meta name="select:Tags Font Size" content="15px" />
  240. <meta name="select:Tags Font Size" content="16px" />
  241.  
  242. <meta name="select:Tags Font Weight" content="normal" />
  243. <meta name="select:Tags Font Weight" content="bold" />
  244.  
  245. <meta name="select:Tags Font Style" content="normal" />
  246. <meta name="select:Tags Font Style" content="italic" />
  247.  
  248. <meta name="select:Tags Text Transform" content="none" />
  249. <meta name="select:Tags Text Transform" content="uppercase" />
  250. <meta name="select:Tags Text Transform" content="lowercase" />
  251. <meta name="select:Tags Text Transform" content="capitalize" />
  252.  
  253. <meta name="select:Tags Text Position" content="left" />
  254. <meta name="select:Tags Text Position" content="center" />
  255. <meta name="select:Tags Text Position" content="justify" />
  256. <meta name="select:Tags Text Position" content="right" />
  257.  
  258.  
  259. <!-- -------------- SIDEBAR: position -------------- -->
  260. <meta name="select:Sidebar Position" content="center" title="center">
  261. <meta name="select:Sidebar Position" content="flex-start" title="top">
  262.  
  263. <!-- -------------- SIDEBAR: links styling -------------- -->
  264. <meta name="select:Sidebar Link Font Size" content="1.1rem" title="11px" />
  265. <meta name="select:Sidebar Link Font Size" content="0.8rem" title="8px" />
  266. <meta name="select:Sidebar Link Font Size" content="0.9rem" title="9px" />
  267. <meta name="select:Sidebar Link Font Size" content="1rem" title="10px" />
  268. <meta name="select:Sidebar Link Font Size" content="1.2rem" title="12px" />
  269. <meta name="select:Sidebar Link Font Size" content="1.3rem" title="13px" />
  270. <meta name="select:Sidebar Link Font Size" content="1.4rem" title="14px" />
  271. <meta name="select:Sidebar Link Font Size" content="1.5rem" title="15px" />
  272. <meta name="select:Sidebar Link Font Size" content="1.6rem" title="16px" />
  273. <meta name="select:Sidebar Link Font Size" content="1.7rem" title="17px" />
  274. <meta name="select:Sidebar Link Font Size" content="1.8rem" title="18px" />
  275.  
  276. <meta name="select:Sidebar Link Font Letter Spacing" content="normal" title="none" />
  277. <meta name="select:Sidebar Link Font Letter Spacing" content="0.015rem" title="0.15px" />
  278. <meta name="select:Sidebar Link Font Letter Spacing" content="0.025rem" title="0.25px" />
  279. <meta name="select:Sidebar Link Font Letter Spacing" content="0.075rem" title="0.75px" />
  280. <meta name="select:Sidebar Link Font Letter Spacing" content="0.08rem" title="0.80px" />
  281. <meta name="select:Sidebar Link Font Letter Spacing" content="0.085rem" title="0.85px" />
  282. <meta name="select:Sidebar Link Font Letter Spacing" content="0.09rem" title="0.90px" />
  283. <meta name="select:Sidebar Link Font Letter Spacing" content="0.095rem" title="0.95px" />
  284. <meta name="select:Sidebar Link Font Letter Spacing" content="0.1rem" title="1px" />
  285. <meta name="select:Sidebar Link Font Letter Spacing" content="0.2rem" title="2px" />
  286. <meta name="select:Sidebar Link Font Letter Spacing" content="0.3rem" title="3px" />
  287.  
  288. <meta name="select:Sidebar Link Font Weight" content="400" title="normal" />
  289. <meta name="select:Sidebar Link Font Weight" content="700" title="bold" />
  290. <meta name="select:Sidebar Link Font Weight" content="300" title="light" />
  291. <meta name="select:Sidebar Link Font Weight" content="500" title="medium" />
  292. <meta name="select:Sidebar Link Font Weight" content="600" title="semi-bold" />
  293.  
  294. <meta name="select:Sidebar Link Font Style" content="normal" />
  295. <meta name="select:Sidebar Link Font Style" content="italic" />
  296.  
  297. <meta name="select:Sidebar Link Text Transform" content="none">
  298. <meta name="select:Sidebar Link Text Transform" content="uppercase">
  299. <meta name="select:Sidebar Link Text Transform" content="lowercase">
  300. <meta name="select:Sidebar Link Text Transform" content="capitalize">
  301.  
  302. <meta name="select:Sidebar Link Text Position" content="left" title="left" />
  303. <meta name="select:Sidebar Link Text Position" content="center" title="center" />
  304. <meta name="select:Sidebar Link Text Position" content="right" title="right" />
  305.  
  306.  
  307.  
  308. <!-- -------------- THEME: conditionals -------------- -->
  309. <meta name="if:Images Black and White" content="0" />
  310. <meta name="if:Show Box Shadow" content="0" />
  311. <meta name="if:Show Borders" content="0" />
  312. <meta name="if:Enable Font Smoothing" content="0" />
  313. <meta name="if:Links Underline Border" content="1" />
  314. <meta name="if:Disable Switch Theme Color" content="0" />
  315. <meta name="if:Dark Theme Default Color" content="0" />
  316.  
  317.  
  318. <!-- -------------- SIDEBAR: conditionals -------------- -->
  319. <meta name="if:Sidebar Image" content="1"/>
  320. <meta name="if:Sidebar Title" content="1"/>
  321. <meta name="if:Sidebar Pages Link" content="0"/>
  322. <meta name="if:Sidebar Description" content="1"/>
  323. <meta name="if:Right Sidebar Position" content="0" />
  324. <meta name="if:Sidebar Link 1" content="1" />
  325. <meta name="if:Sidebar Link 2" content="1" />
  326. <meta name="if:Sidebar Link 3" content="1" />
  327. <meta name="if:Sidebar Link 4" content="1" />
  328.  
  329.  
  330.  
  331. <!-- -------------- POSTS: size, padding, margin -------------- -->
  332. <meta name="text:Theme Container Size" content="140rem" />
  333. <meta name="text:Posts Between Margin" content="9.5rem" />
  334. <meta name="text:Posts and Sidebar Padding" content="1rem" />
  335.  
  336.  
  337. <!-- -------------- THEME: customizations -------------- -->
  338. <meta name="text:Body Font Family" content="Arial" />
  339. <meta name="text:Posts Title Font Family" content="Rubik" />
  340. <meta name="text:Post Detail Font Family" content="Rubik" />
  341.  
  342.  
  343. <!-- -------------- SIDEBAR: size, padding, margin -------------- -->
  344. <meta name="text:Sidebar Posts Spacing Gap" content="22rem" />
  345. <meta name="text:Sidebar Posts Spacing Between" content="0rem" />
  346.  
  347.  
  348. <!-- -------------- SIDEBAR: links -------------- -->
  349. <meta name="text:Home URL" content="/" />
  350. <meta name="text:Home Text" content="Home" />
  351.  
  352. <meta name="text:Ask URL" content="/ask" />
  353. <meta name="text:Ask Text" content="Ask" />
  354.  
  355. <meta name="text:Sidebar Link 1 URL" content="/" />
  356. <meta name="text:Sidebar Link 1 Text" content="Link 1" />
  357.  
  358. <meta name="text:Sidebar Link 2 URL" content="/" />
  359. <meta name="text:Sidebar Link 2 Text" content="Link 2" />
  360.  
  361. <meta name="text:Sidebar Link 3 URL" content="/" />
  362. <meta name="text:Sidebar Link 3 Text" content="Link 3" />
  363.  
  364. <meta name="text:Sidebar Link 4 URL" content="/" />
  365. <meta name="text:Sidebar Link 4 Text" content="Link 4" />
  366.  
  367.  
  368. {/block:Hidden}
  369.  
  370.  
  371. <!-- RESOURCES: dark mode / by: mournstera.tumblr.com/post/724742111455592448
  372. uses: html/css/js -->
  373. <script>
  374. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  375. if (storedTheme) {
  376. document.documentElement.setAttribute("data-theme", storedTheme);
  377. }
  378. </script>
  379.  
  380.  
  381. <!-- RESOURCES: NPF images / by: glenthemes.tumblr.com/post/638038350689976320
  382. uses: html/css/js -->
  383. <script async src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  384. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  385. <script async src="//npf-images-v3.github.io/script.js"></script>
  386. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  387.  
  388.  
  389.  
  390. <!--RESOURCES: css photosets / by: annasthms.github.io/photosets
  391. uses: html/css/js -->
  392. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  393.  
  394.  
  395. <!-- RESOURCES: custom font
  396. - by: https://fonts.google.com/ -->
  397. <link href="https://fonts.googleapis.com/css2?family={text:Body 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" />
  398. <link href="https://fonts.googleapis.com/css2?family={text:Posts Title 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" />
  399. <link href="https://fonts.googleapis.com/css2?family={text:Post Detail 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" />
  400.  
  401.  
  402. <!-- RESOURCES: NPF images / by: glenthemes.tumblr.com/post/638038350689976320
  403. "tmblr-npf" attribute & NPF variables on root -->
  404. <style tmblr-npf>
  405. :root {
  406. --NPF-Caption-Spacing:1rem;
  407. --NPF-Image-Spacing: {select:Photoset Gutter};
  408.  
  409. /* -------------- THEME: fonts -------------- */
  410. --bodyFontFamily: {text:Body Font Family};
  411. --postsTitleFontFamily: {text:Posts Title Font Family};
  412. --postDetailFontFamily: {text:Post Detail Font Family};
  413. --bodyFontSize: {select:Body Font Size};
  414. --bodyFontLetterSpacing: {select:Body Font Letter Spacing};
  415. --bodyFontWeight: {select:Body Font Weight};
  416. --boldFontWeight: {select:Bold Font Weight};
  417. --postsLineHeight: calc(var(--bodyFontSize) * 1.3);
  418. --postsParagraphBetween: calc(var(--bodyFontSize) * 1);
  419. --postsTextPosition: {select:Posts Text Position};
  420. --postsTitlesLineHeight: calc(var(--postsTitlesFontSize) * 1.2);
  421. --postsTitlesFontSize: {select:Posts Titles Font Size};
  422. --postsTitlesFontWeight: {select:Posts Titles Font Weight};
  423. --postsTitlesFontLetterSpacing: {select:Posts Titles Font Letter Spacing};
  424. --postsTitlesTextTransform: {select:Posts Titles Text Transform};
  425. --postsTitlesFontStyle: {select:Posts Titles Font Style};
  426. --postsTextPosition: {select:Posts Text Position};
  427. --postsTitlesTextPosition: {select:Posts Titles Text Position};
  428.  
  429. /* -------------- THEME: borders, box shadow and others -------------- */
  430. --bordersStyle: {select:Borders Style};
  431. --bordersSize: {select:Borders Size};
  432. --boxShadowSize:{text:Box Shadow Size};
  433. --linkDecorationLine: {select:Link Decoration Line};
  434. --linkDecorationLineHover: {select:Link Decoration Line Hover};
  435.  
  436.  
  437. /* -------------- POSTS -------------- */
  438. --postFixWidth: 1px;
  439. --themeContainerSize: {text:Theme Container Size};
  440. --postWidth: {select:Post Width};
  441. --postsBetweenMargin: {text:Posts Between Margin};
  442. --postsSidebarPadding:{text:Posts and Sidebar Padding};
  443. --sidebarPostsSpacingGap:{text:Sidebar Posts Spacing Gap};
  444. --sidebarPostsSpacingBetween:{text:Sidebar Posts Spacing Between};
  445.  
  446. --postDetailFontSize:{select:Post Detail Font Size};
  447. --postDetailFontLetterSpacing: {select:Post Detail Font Letter Spacing};
  448. --postDetailFontWeight:{select:Post Detail Font Weight};
  449. --postDetailTextTransform:{select:Post Detail Text Transform};
  450. --postDetailFontStyle:{select:Post Detail Font Style};
  451.  
  452. --tagsFontSize:{select:Tags Font Size};
  453. --tagsFontLetterSpacing: {select:Tags Font Letter Spacing};
  454. --tagsFontWeight:{select:Tags Font Weight};
  455. --tagsTextTransform:{select:Tags Text Transform};
  456. --tagsFontStyle:{select:Tags Font Style};
  457. --tagsTextPosition: {select:Tags Text Position};
  458.  
  459.  
  460. /* -------------- SIDEBAR -------------- */
  461. --sidebarContentPosition: {select:Sidebar Position};
  462.  
  463. --sidebarLinkFontSize: {select:Sidebar Link Font Size};
  464. --sidebarLinkFontLetterSpacing: {select:Sidebar Link Font Letter Spacing};
  465. --sidebarLinkFontWeight: {select:Sidebar Link Font Weight};
  466. --sidebarLinkTextTransform: {select:Sidebar Link Text Transform};
  467. --sidebarLinkFontStyle: {select:Sidebar Link Font Style};
  468. --sidebarLinkTextPosition: {select:Sidebar Link Text Position};
  469.  
  470. --sidebarLinkLineHeight: calc(var(--sidebarLinkFontSize) * 1.3);
  471.  
  472.  
  473. /* -------------- OTHERS -------------- */
  474. --transitions: all .3s ease;
  475. }
  476.  
  477.  
  478. /* RESOURCES: dark mode / by: mournstera.tumblr.com/post/724742111455592448 */
  479. :root, html[data-theme='light'] {
  480. --LightOn: block;
  481. --LightOff: none;
  482.  
  483. --backgroundThemeColor: {color:Background Theme Color};
  484. --bodyLinkColor: {color:Body Link Color};
  485. --bodyTextColor: {color:Body Text Color};
  486. --bodyLinkHoverColor: {color:Body Link Hover Color};
  487. --hoverTextBackgroundColor: {color:Hover Text Background Color};
  488. --hoverTextColor: {color:Hover Text Color};
  489. --bordersColor: {color:Borders Color};
  490. --postDetailLinkColor:{color:Post Detail Link Color};
  491. --postDetailTextColor: {color:Post Detail Text Color};
  492.  
  493. --boxShadowColor:{text:Box Shadow Color};
  494.  
  495. --postsBackgroundColor: {color:Posts Background Color};
  496. }
  497.  
  498. html[data-theme='dark'] {
  499. --LightOn: none;
  500. --LightOff: block;
  501.  
  502. --backgroundThemeColor: {color:Dark Background Theme Color};
  503. --bodyLinkColor: {color:Dark Body Link Color};
  504. --bodyTextColor: {color:Dark Body Text Color};
  505. --bodyLinkHoverColor: {color:Dark Body Link Hover Color};
  506. --hoverTextBackgroundColor: {color:Dark Hover Text Background Color};
  507. --hoverTextColor: {color:Dark Hover Text Color};
  508. --bordersColor: {color:Dark Borders Color};
  509. --postDetailLinkColor:{color:Dark Post Detail Link Color};
  510. --postDetailTextColor: {color:Dark Post Detail Text Color};
  511.  
  512. --boxShadowColor:{text:Dark Box Shadow Color};
  513.  
  514. --postsBackgroundColor: {color:Dark Posts Background Color};
  515. }
  516.  
  517. html.theme-transition,
  518. html.theme-transition *,
  519. html.theme-transition *:before,
  520. html.theme-transition *:after {
  521. transition: 0s !important;
  522. transition-delay: 0 !important;
  523. }
  524.  
  525.  
  526.  
  527. *,
  528. *:before,
  529. *:after {
  530. margin: 0;
  531. padding: 0;
  532. box-sizing: border-box;
  533. }
  534.  
  535.  
  536. /* RESOURCES: dark mode / by: mournstera.tumblr.com/post/724742111455592448 */
  537. .light-on {
  538. display: var(--LightOn);
  539. }
  540.  
  541. .light-off {
  542. display: var(--LightOff);
  543. }
  544.  
  545. button.theme-toggle {
  546. outline: none;
  547. border: 0;
  548. padding: 0;
  549. background: transparent;
  550. cursor: pointer;
  551. text-decoration: none;
  552. color:var(--postDetailLinkColor);
  553. font-style:var(--postDetailFontStyle);
  554. font-size:var(--postDetailFontSize);
  555. text-transform: var(--postDetailTextTransform);
  556. letter-spacing: var(--postDetailFontLetterSpacing);
  557. font-weight:var(--postDetailFontWeight);
  558. line-height:var(--postDetailLineHeight);
  559. font-family: var(--postDetailFontFamily), Arial, sans-serif;
  560. }
  561.  
  562. button.theme-toggle span svg {
  563. width:var(--bodyFontSize);
  564. height:var(--bodyFontSize);
  565. stroke: var(--bodyLinkColor);
  566. }
  567.  
  568.  
  569.  
  570. html {
  571. font-size: 62.5%;
  572. }
  573.  
  574. body {
  575. background:var(--backgroundThemeColor) url({image:Background Image});
  576. background-color:var(--backgroundThemeColor);
  577. color: var(--bodyTextColor);
  578. font-family: var(--bodyFontFamily), Arial, sans-serif;
  579. font-size:var(--bodyFontSize);
  580. font-weight: var(--bodyFontWeight);
  581. letter-spacing: var(--bodyFontLetterSpacing);
  582. line-height:var(--postsLineHeight);
  583. {block:ifEnableFontSmoothing}
  584. -webkit-font-smoothing: antialiased;
  585. -moz-osx-font-smoothing: grayscale;
  586. {/block:ifEnableFontSmoothing}
  587. }
  588.  
  589. a {
  590. color: var(--bodyLinkColor);
  591. }
  592.  
  593. {block:IfLinksUnderlineBorder}
  594. .sidebar-navigation ul li a,
  595. .sidebar-description a,
  596. .sidebar-pagination .pagination a,
  597. .post .reblog-list .reblog-body a,
  598. .post .reblog-list .reblog-header a,
  599. .post.info-date .info a,
  600. .answer-question .answer-user a {
  601. text-decoration: var(--linkDecorationLine);
  602. text-decoration-color: var(--bodyLinkColor);
  603. text-decoration-thickness: 0.1rem;
  604. text-decoration-skip-ink: none;
  605. text-underline-offset: 0.2rem;
  606. transition: var(--transitions);
  607. }
  608. {/block:IfLinksUnderlineBorder}
  609.  
  610. a:hover,
  611. .sidebar-navigation ul li a:hover,
  612. .sidebar-description a:hover,
  613. .sidebar-pagination .pagination a:hover,
  614. .post .reblog-list .reblog-body a:hover,
  615. .post .reblog-list .reblog-header a:hover,
  616. .post.info-date .info a:hover,
  617. .post.tags a:hover,
  618. .answer-question .answer-user a:hover {
  619. color: var(--bodyLinkHoverColor);
  620. text-decoration-color: var(--bodyLinkHoverColor);
  621. text-decoration: var(--linkDecorationLineHover);
  622. text-decoration-thickness: 0.1rem;
  623. }
  624.  
  625. strong, bold, b {
  626. font-weight: var(--boldFontWeight);
  627. }
  628.  
  629. p:first-child {
  630. margin-block-start: 0;
  631. margin-block-end: 0;
  632. }
  633.  
  634. p:last-child {
  635. margin-block-end: 0;
  636. }
  637.  
  638. p:not(:last-child) {
  639. margin-bottom: var(--postsParagraphBetween);
  640. }
  641.  
  642. pre {
  643. word-wrap:break-word!Important;
  644. white-space: pre-wrap;
  645. }
  646.  
  647. h1, h2, h3, h4, h5, h6 {
  648. padding: 1rem 0 0.5rem;
  649. margin: 0;
  650. font-family:var(--postsTitleFontFamily);
  651. font-style:var(--postsTitlesFontStyle);
  652. font-weight:var(--postsTitlesFontWeight);
  653. letter-spacing: var(--postsTitlesFontLetterSpacing);
  654. color:var(--postDetailTextColor);
  655. text-transform:var(--postsTitlesTextTransform);
  656. font-size:var(--postsTitlesFontSize);
  657. text-align:var(--postsTitlesTextPosition);
  658. line-height:var(--postsTitlesLineHeight);
  659. }
  660.  
  661. ul {
  662. list-style: none;
  663. margin: 0;
  664. padding: 0;
  665. }
  666.  
  667. /* lists style for posts */
  668. .reblog-body ul,
  669. .reblog-body ol {
  670. margin:1rem 0;
  671. padding: 0;
  672. list-style:none;
  673. }
  674.  
  675. .reblog-body ul li {
  676. margin:0rem 1rem;
  677. list-style:none;
  678. }
  679.  
  680. .reblog-body ul li::before {
  681. content: 'â­˜';
  682. font-size: calc(var(--bodyFontSize) - 40%);
  683. margin-right: 0.8rem;
  684. display:inline-block;
  685. vertical-align:middle;
  686. color: var(--bodyLinkColor);
  687. }
  688.  
  689. .reblog-body ol {
  690. padding: 0 2.5rem;
  691. }
  692.  
  693. .reblog-body ol li {
  694. list-style-type: decimal;
  695. }
  696.  
  697.  
  698. hr {
  699. width:10rem;
  700. margin:1rem 0 1rem 0;
  701. border-width: var(--bordersSize) 0px 0px 0px;
  702. border-style: var(--bordersStyle);
  703. border-color: var(--bordersColor);
  704. }
  705.  
  706. img {
  707. max-width:100%;
  708. height:auto;
  709. display:block;
  710. margin: 0;
  711. padding: 0;
  712. transition:var(--transitions);
  713. {block:ifImagesBlackandWhite}
  714. -webkit-filter: grayscale(100%);
  715. filter: grayscale(100%);
  716. {/block:ifImagesBlackandWhite}
  717. }
  718.  
  719. img:hover,
  720. .posts-wrapper:hover img,
  721. .sidebar-content:hover img {
  722. opacity:1;
  723. -webkit-filter: grayscale(0%);
  724. filter: grayscale(0%);
  725. }
  726.  
  727. ::-moz-selection {
  728. background-color: var(--bodyTextColor);
  729. color:var(--postsBackgroundColor);
  730. }
  731.  
  732. ::selection {
  733. background-color: var(--bodyTextColor);
  734. color:var(--postsBackgroundColor);
  735. }
  736.  
  737.  
  738.  
  739. /* -------------- DETAILS -------------- */
  740.  
  741. /* RESOURCES: tippy tooltip / by: eossa.studio/post/190447242880 */
  742. .tippy-tooltip.custom-theme {
  743. text-align:center;
  744. font-size:var(--bodyFontSize);
  745. font-weight:var(--boldFontWeight);
  746. color:var(--hoverTextColor);
  747. background-color:var(--hoverTextBackgroundColor);
  748. transition:var(--transitions);
  749. {block:ifShowBoxShadow}
  750. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  751. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  752. {/block:ifShowBoxShadow}
  753. }
  754.  
  755. .separator-detail {
  756. width: 0.3rem;
  757. height: 0.3rem;
  758. border-radius: 50%;
  759. display: inline-block;
  760. vertical-align: middle;
  761. /*background-color: var(--bodyLinkColor);*/
  762. border:1px solid var(--bodyLinkColor);
  763. }
  764.  
  765. .icon {
  766. width: var(--bodyFontSize);
  767. height: var(--bodyFontSize);
  768. }
  769.  
  770. .clearfix::before, .clearfix::after{
  771. content:'';
  772. clear:both;
  773. display:table;
  774. }
  775.  
  776.  
  777. /* -------------- MAIN CONTAINER -------------- */
  778. .theme-container {
  779. width: 100%;
  780. max-width: var(--themeContainerSize);
  781. display: grid;
  782. grid-template-columns: calc(26.8rem + var(--postsSidebarPadding) + var(--postsSidebarPadding) + var(--bordersSize)) auto;
  783. grid-template-rows:1fr;
  784. grid-template-areas:
  785. "sidebar posts";
  786. gap: var(--sidebarPostsSpacingGap);
  787. margin: 5rem auto;
  788. justify-content: var(--themeContentPosition);
  789.  
  790. {block:ifRightSidebarPosition}
  791. grid-template-columns: auto 27rem;
  792. grid-template-areas:
  793. "posts sidebar";
  794. {/block:ifRightSidebarPosition}
  795. }
  796.  
  797.  
  798.  
  799.  
  800. /* -------------- SIDEBAR -------------- */
  801. .sidebar-container {
  802. width: calc(26.8rem + var(--postsSidebarPadding) + var(--postsSidebarPadding) + var(--bordersSize));
  803.  
  804. color:var(--bodyTextColor);
  805. height: 100vh;
  806. display: flex;
  807. align-items: var(--sidebarContentPosition);
  808. margin: 0 0 0 var(--sidebarPostsSpacingBetween);
  809. {block:ifRightSidebarPosition}
  810. margin: 0 0 0 0;
  811. {/block:ifRightSidebarPosition}
  812. grid-area: sidebar;
  813. }
  814.  
  815.  
  816. .sidebar-content_wrapper {
  817. position: fixed;
  818. width: calc(26.8rem + var(--postsSidebarPadding) + var(--postsSidebarPadding) + var(--bordersSize));
  819. background-color:var(--postsBackgroundColor);
  820. padding: var(--postsSidebarPadding);
  821.  
  822. {block:ifShowBorders}
  823. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  824. {/block:ifShowBorders}
  825.  
  826. {block:ifShowBoxShadow}
  827. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  828. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  829. {/block:ifShowBoxShadow}
  830. }
  831.  
  832. .sidebar-title {
  833. margin: 0.5rem 0 1rem;
  834. font-family:var(--postsTitleFontFamily);
  835. font-style:var(--postsTitlesFontStyle);
  836. font-weight:var(--postsTitlesFontWeight);
  837. letter-spacing: var(--postsTitlesFontLetterSpacing);
  838. color:var(--postDetailTextColor);
  839. text-transform:var(--postsTitlesTextTransform);
  840. font-size:var(--postsTitlesFontSize);
  841. text-align:var(--postsTitlesTextPosition);
  842. line-height:var(--postsTitlesLineHeight);
  843. }
  844.  
  845. .sidebar-navigation {
  846. position: relative;
  847. font-size:var(--sidebarLinkFontSize);
  848. font-style:var(--sidebarLinkFontStyle);
  849. font-weight:var(--sidebarLinkFontWeight);
  850. letter-spacing: var(--sidebarLinkFontLetterSpacing);
  851. line-height: var(--sidebarLinkLineHeight);
  852. text-transform:var(--sidebarLinkTextTransform);
  853. text-align:var(--sidebarLinkTextPosition);
  854. }
  855.  
  856. .sidebar-description, .sidebar-navigation {
  857. margin: 1rem 0;
  858. }
  859.  
  860. .sidebar-navigation ul {
  861. display:flex;
  862. align-items: center;
  863. width:100%;
  864. gap: 0 0.8rem;
  865. flex-wrap: wrap;
  866. }
  867.  
  868. .sidebar-pagination,
  869. .sidebar-pagination .pagination {
  870. position: relative;
  871. display: flex;
  872. gap: 1rem;
  873. justify-content: space-between;
  874. }
  875.  
  876. .sidebar-pagination {
  877. text-decoration: none;
  878. color:var(--postDetailLinkColor);
  879. font-style:var(--postDetailFontStyle);
  880. font-size:var(--postDetailFontSize);
  881. text-transform: var(--postDetailTextTransform);
  882. letter-spacing: var(--postDetailFontLetterSpacing);
  883. font-weight:var(--postDetailFontWeight);
  884. line-height:var(--postDetailLineHeight);
  885. font-family: var(--postDetailFontFamily), Arial, sans-serif;
  886. }
  887.  
  888. .sidebar-search {
  889. width: 100%;
  890. box-sizing: border-box;
  891. margin: 0.5rem 0;
  892. padding: 0 1rem 0 0;
  893. flex: 1;
  894. }
  895.  
  896. .sidebar-search input {
  897. width: 100%;
  898. background-color: inherit;
  899. color: inherit;
  900. border: none;
  901. }
  902.  
  903. .sidebar-search input:placeholder {
  904. font-size: inherit;
  905. font-style: inherit;
  906. font-weight: inherit;
  907. letter-spacing: inherit;
  908. text-transform: inherit;
  909. color: inherit;
  910. }
  911.  
  912. .sidebar-search input::focus {
  913. border:none;
  914. outline:none;
  915. color: inherit;
  916. }
  917.  
  918.  
  919.  
  920. /* -------------- POSTS -------------- */
  921.  
  922. .search-results {
  923. margin-bottom: 2rem;
  924. padding: var(--postsSidebarPadding);
  925. background-color:var(--postsBackgroundColor);
  926. color:var(--postDetailLinkColor);
  927. font-style:var(--postDetailFontStyle);
  928. font-size:var(--postDetailFontSize);
  929. text-transform: var(--postDetailTextTransform);
  930. letter-spacing: var(--postDetailFontLetterSpacing);
  931. font-weight:var(--postDetailFontWeight);
  932. line-height:var(--postDetailLineHeight);
  933. font-family: var(--postDetailFontFamily), Arial, sans-serif;
  934. }
  935.  
  936. .posts-container {
  937. grid-area: posts;
  938. display: flex;
  939. align-items: center;
  940. flex-direction: column;
  941. }
  942.  
  943. .posts-wrapper,
  944. .search-results_wrapper {
  945. padding: var(--postsSidebarPadding);
  946. background-color:var(--postsBackgroundColor);
  947.  
  948. {block:ifShowBorders}
  949. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  950. {/block:ifShowBorders}
  951.  
  952. {block:ifShowBoxShadow}
  953. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  954. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  955. {/block:ifShowBoxShadow}
  956. }
  957.  
  958. .posts-wrapper:not(:last-of-type) {
  959. margin-bottom: var(--postsBetweenMargin);
  960. text-align:var(--postsTextPosition);
  961. }
  962.  
  963. .post,
  964. .search-results_wrapper {
  965. width: calc(var(--postWidth));
  966. height: auto;
  967. }
  968.  
  969.  
  970. /* RESOURCES: photoset css / by: annasthms.github.io/photosets */
  971. .photoset-grid {
  972. width:100%;
  973. max-width: var(--postWidth);
  974. grid-gap: {select:Photoset Gutter};
  975. margin: 0 auto;
  976. }
  977.  
  978. .post.info-date {
  979. display: inline-flex;
  980. margin-top: 1.4rem;
  981. flex-direction: column;
  982. gap: 0.6rem;
  983. padding: 1rem;
  984. }
  985.  
  986. .post.info-date .info {
  987. display: inline-flex;
  988. width: 100%;
  989. justify-content: space-between;
  990. color:var(--postDetailTextColor);
  991. font-style:var(--postDetailFontStyle);
  992. font-size:var(--postDetailFontSize);
  993. text-transform: var(--postDetailTextTransform);
  994. letter-spacing: var(--postDetailFontLetterSpacing);
  995. font-weight:var(--postDetailFontWeight);
  996. line-height:var(--postDetailLineHeight);
  997. font-family: var(--postDetailFontFamily), Arial, sans-serif;
  998. }
  999.  
  1000.  
  1001. .post.info-date .info a {
  1002. color:var(--postDetailLinkColor);
  1003. }
  1004.  
  1005. .post.info-date .info .date, .reblogged {
  1006. display: inline-flex;
  1007. align-items: center;
  1008. gap: 1rem;
  1009. }
  1010.  
  1011. .post.tags {
  1012. display: inline-block;
  1013. width: 100%;
  1014. }
  1015.  
  1016. .post.tags a {
  1017. text-decoration: none;
  1018. color:var(--tagsLinkColor);
  1019. text-align: var(--tagsTextPosition);
  1020. text-transform: var(--tagsTextTransform);
  1021. font-style:var(--tagsFontStyle);
  1022. font-size:var(--tagsFontSize);
  1023. letter-spacing: var(--tagsFontLetterSpacing);
  1024. font-weight:var(--tagsFontWeight);
  1025. line-height:var(--tagsLineHeight);
  1026. }
  1027.  
  1028. .post.tags a:not(:last-child) {
  1029. margin-right: 1rem;
  1030. }
  1031.  
  1032.  
  1033. .answer-question {
  1034. padding-bottom: 1rem;
  1035. border-bottom :var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  1036. }
  1037.  
  1038. .question {
  1039. position: relative;
  1040. }
  1041.  
  1042. .question p {
  1043. margin: 0 0 0.4rem;
  1044. }
  1045.  
  1046. .answer .feather {
  1047. width:var(--bodyFontSize);
  1048. height:var(--bodyFontSize);
  1049. stroke:var(--bodyLinkColor);
  1050. display:inline-block;
  1051. vertical-align: middle;
  1052. margin-right: 10px;
  1053. float:left;
  1054. margin-top: 2px;
  1055. }
  1056.  
  1057. .answer-user {
  1058. text-decoration: none;
  1059. display: block;
  1060. padding-bottom: 0.7rem;
  1061. color:var(--postDetailLinkColor);
  1062. font-style:var(--postDetailFontStyle);
  1063. font-size:var(--postDetailFontSize);
  1064. text-transform: var(--postDetailTextTransform);
  1065. letter-spacing: var(--postDetailFontLetterSpacing);
  1066. font-weight:var(--postDetailFontWeight);
  1067. line-height:var(--postDetailLineHeight);
  1068. font-family: var(--postDetailFontFamily), Arial, sans-serif;
  1069. }
  1070.  
  1071. .answer-user a {
  1072. color:var(--bodyLinkColor);
  1073. font-weight:var(--boldFontWeight);
  1074. }
  1075.  
  1076. .answer-user a:hover {
  1077. color:var(--bodyLinkHoverColor);
  1078. }
  1079.  
  1080.  
  1081.  
  1082. /* RESOURCES: spotify e iframe / by: mournstera.tumblr.com/post/738991321693487104 */
  1083. .posts iframe:not(iframe.bandcamp_audio_player,
  1084. .spotify_audio_player,
  1085. iframe.soundcloud_audio_player,
  1086. iframe.tumblr_audio_player) {
  1087. max-width: 100%;
  1088. aspect-ratio: 16/9;
  1089. height: auto;
  1090. }
  1091.  
  1092. iframe.soundcloud_audio_player,
  1093. .tumblr_video_container {
  1094. width: 100%!important;
  1095. height: auto!important;
  1096. }
  1097.  
  1098. figure iframe.spotify_audio_player,
  1099. iframe.spotify_audio_player {
  1100. max-height: 90px;
  1101. width: 100%;
  1102. }
  1103.  
  1104. .posts iframe[src*='soundcloud'] {
  1105. max-height: 130px;
  1106. width: 100%;
  1107. }
  1108.  
  1109. figure iframe.bandcamp_audio_player {
  1110. max-height: 120px;
  1111. width: 100%;
  1112. }
  1113.  
  1114. iframe.tumblr_audio_player {
  1115. max-height: 85px;
  1116. width: 100%;
  1117. }
  1118.  
  1119.  
  1120. /* RESOURCES: like text / by: shythemes.tumblr.com/post/154249052918 */
  1121. .post-date_like {
  1122. position:relative;
  1123. display:inline-block;
  1124. padding: 0 1px;
  1125. }
  1126.  
  1127. .post-date_like .like_button iframe {
  1128. position:absolute;
  1129. top:0;
  1130. left:0;
  1131. bottom:0;
  1132. right:0;
  1133. z-index:2;
  1134. opacity:0;
  1135. visibility: hidden;
  1136. }
  1137.  
  1138. .post-date_like .liked + .post-date_time-likeb {
  1139. color: var(--likedLinkColor);
  1140. font-weight:var(--boldFontWeight);
  1141. }
  1142.  
  1143. .post-date_like .liked + .post-date_time-likeb:after {
  1144. content:'d';
  1145. }
  1146.  
  1147. .post-date_like a:hover, .toggle-tags:hover {
  1148. color:var(--bodyLinkHoverColor);
  1149. transition:var(--transitions);
  1150. }
  1151.  
  1152.  
  1153. .notes {
  1154. float: left;
  1155. margin: 30px -10px;
  1156. padding:10px;
  1157. background-color:{color:Posts Background};
  1158. }
  1159.  
  1160. .notes ol, .notes-bottom ul {
  1161. margin: 5px;
  1162. padding: 0;
  1163. list-style: none;
  1164. }
  1165.  
  1166. .notes li:not(:last-of-type) {
  1167. width:45%;
  1168. letter-spacing:{text:Body Font Letter Spacing};
  1169. padding: 2px 0 5px 10px;
  1170. margin:2px;
  1171. font-size: {select:Body Font Size};
  1172. font-family: {select:Body Font};
  1173. float:left;
  1174. text-align:center;
  1175. }
  1176.  
  1177. .notes li img.avatar {
  1178. border:none;
  1179. margin:;
  1180. width:0;
  1181. padding:0;
  1182. }
  1183.  
  1184. .notes .note .action {
  1185. }
  1186.  
  1187. .notes .note .retags {
  1188. display:none;
  1189. visibility:hidden;
  1190. }
  1191.  
  1192. .notes blockquote {
  1193. display:none;
  1194. }
  1195.  
  1196.  
  1197. .more_notes_link {
  1198. list-style: none;
  1199. margin-top:10px;
  1200. padding:3px;
  1201. position:relative;
  1202. float:left;
  1203. text-decoration: none;
  1204. color:var(--postDetailLinkColor);
  1205. font-style:var(--postDetailFontStyle);
  1206. font-size:var(--postDetailFontSize);
  1207. text-transform: var(--postDetailTextTransform);
  1208. letter-spacing: var(--postDetailFontLetterSpacing);
  1209. font-weight:var(--postDetailFontWeight);
  1210. line-height:var(--postDetailLineHeight);
  1211. font-family: var(--postDetailFontFamily), Arial, sans-serif;
  1212. }
  1213.  
  1214.  
  1215. /* -------------- CAPTIONS -------------- */
  1216. .reblog-list {
  1217. margin-top: 1rem;
  1218. }
  1219.  
  1220. .reblog-list .reblog-header {
  1221. display: inline-flex;
  1222. align-items: center;
  1223. gap: 1rem;
  1224. padding: 1rem;
  1225. }
  1226.  
  1227. .reblog-list .reblog-header .reblog-img {
  1228. width: 2.4rem;
  1229. height: 2.4rem;
  1230. border-radius: 0.4rem;
  1231. }
  1232.  
  1233. .reblog-list .reblog-header a {
  1234. text-decoration: none;
  1235. color:var(--postDetailLinkColor);
  1236. font-style:var(--postDetailFontStyle);
  1237. font-size:var(--postDetailFontSize);
  1238. text-transform: var(--postDetailTextTransform);
  1239. letter-spacing: var(--postDetailFontLetterSpacing);
  1240. font-weight:var(--postDetailFontWeight);
  1241. line-height:var(--postDetailLineHeight);
  1242. font-family: var(--postDetailFontFamily), Arial, sans-serif;
  1243. }
  1244.  
  1245. .reblog-list .reblog-body {
  1246. padding: 0 1rem 1rem;
  1247. }
  1248.  
  1249. .reblog-list .reblog-body p {
  1250. line-height:var(--postsLineHeight);
  1251. }
  1252.  
  1253. .reblog-list .reblog-body:not(:last-of-type) {
  1254. margin-bottom: 1.4rem;
  1255. }
  1256.  
  1257. </style>
  1258. </head>
  1259.  
  1260. <body>
  1261. <div class="theme-container">
  1262. <aside class="sidebar-container">
  1263. <div class="sidebar-content_wrapper">
  1264. {block:ifSidebarImage}
  1265. <div class="sidebar-image">
  1266. <img src="https://static.tumblr.com/0siu224/B3wr52f96/7.gif" />
  1267. </div>
  1268. {/block:ifSidebarImage}
  1269.  
  1270. {block:ifSidebarTitle}
  1271. <h2 class="sidebar-title">
  1272. {Title}
  1273. </h2>
  1274. {/block:ifSidebarTitle}
  1275.  
  1276. <nav class="sidebar-navigation">
  1277. <ul>
  1278. <li>
  1279. <a href="{text:Home URL}">
  1280. {text:Home Text}
  1281. </a>
  1282. </li>
  1283.  
  1284. <li>
  1285. <a href="{text:Ask URL}">
  1286. {text:Ask Text}
  1287. </a>
  1288. </li>
  1289. {block:ifSidebarLink1}
  1290. <li>
  1291. <a href="{text:Sidebar Link 1 URL}">
  1292. {text:Sidebar Link 1 Text}
  1293. </a>
  1294. </li>
  1295. {/block:ifSidebarLink1}
  1296.  
  1297. {block:ifSidebarLink2}
  1298. <li>
  1299. <a href="{text:Sidebar Link 2 URL}">
  1300. {text:Sidebar Link 2 Text}
  1301. </a>
  1302. </li>
  1303. {/block:ifSidebarLink2}
  1304.  
  1305. {block:ifSidebarLink3}
  1306. <li>
  1307. <a href="{text:Sidebar Link 3 URL}">
  1308. {text:Sidebar Link 3 Text}
  1309. </a>
  1310. </li>
  1311. {/block:ifSidebarLink3}
  1312.  
  1313. {block:ifSidebarLink4}
  1314. <li>
  1315. <a href="{text:Sidebar Link 4 URL}">
  1316. {text:Sidebar Link 4 Text}
  1317. </a>
  1318. </li>
  1319. {/block:ifSidebarLink4}
  1320. </ul>
  1321. </nav>
  1322.  
  1323. {block:ifSidebarDescription}
  1324. <div class="sidebar-description">
  1325. <strong>luciane. 30. she/her.</strong> i don't come here often these days cause i'm in a forever semi-hiatus, but enjoy this mess.
  1326. </div>
  1327. {/block:ifSidebarDescription}
  1328.  
  1329. <div class="sidebar-pagination">
  1330. <div class="pagination">
  1331. {block:PreviousPage}<a href="{PreviousPage}">{lang:Previous page}</a>{/block:PreviousPage}
  1332. {block:NextPage}<a href="{NextPage}">{lang:Next page}</a>{/block:NextPage}
  1333. </div>
  1334. <button class="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1335. <span class="light-on" title="Change to Dark Theme">
  1336. <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
  1337. </span>
  1338. <span class="light-off" title="Change to Light Theme">
  1339. <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
  1340. </span>
  1341. </button>
  1342. </div>
  1343.  
  1344. <!--<div class="sidebar-search-input">-->
  1345. <!-- <form action="/search" method="get" id="search" class="search sidebar-search">-->
  1346. <!-- <input type="text" name="input-search" value="{SearchQuery}" placeholder="{lang:Search}" />-->
  1347. <!-- </form>-->
  1348. <!--</div>-->
  1349. </div>
  1350. </aside>
  1351.  
  1352. <main class="posts-container">
  1353. <section class="search-results">
  1354. {block:SearchPage}
  1355. <div class="search-results_wrapper">
  1356. {block:SearchResults}
  1357. <p class="search-results_item">{lang:Search results for SearchQuery 2}</p>
  1358. {/block:SearchResults}
  1359.  
  1360. {block:NoSearchResults}
  1361. <p class="search-results_item">{lang:Sorry no results for SearchQuery 2}</p>
  1362. {/block:NoSearchResults}
  1363. </div>
  1364. {/block:SearchPage}
  1365.  
  1366. {block:TagPage}
  1367. <div class="search-results_wrapper">
  1368. <p class="search-results_item">{lang:Showing TagResultCount posts tagged Tag 2}</p>
  1369. </div>
  1370. {/block:TagPage}
  1371. </section>
  1372.  
  1373. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1374.  
  1375. <!-- post article -->
  1376. <article class="posts posts-wrapper">
  1377.  
  1378. <!-- post content -->
  1379. <div class="post {PostType}" post-type="{PostType}" id="post-{PostID}">
  1380.  
  1381. <!--NPF & Legacy Text Posts-->
  1382. {block:Text}
  1383. {block:Title}
  1384. <h3><a href="{Permalink}">{Title}</a></h3>
  1385. {/block:Title}
  1386. <!--Original Post-->
  1387. {block:NotReblog}
  1388. <div class="reblog-list">
  1389. <div class="reblog-body">
  1390. {Body}
  1391. </div>
  1392. </div>
  1393. {/block:NotReblog}
  1394.  
  1395. {block:RebloggedFrom}
  1396. <div class="reblog-list">
  1397. {block:Reblogs}
  1398. <div class="reblog-header source-head">
  1399. <img src="{PortraitURL-64}" class="reblog-img" alt="{Username}'s avatar">
  1400. {block:IsActive}
  1401. <a href="{Permalink}">{Username}</a>
  1402. {/block:IsActive}
  1403. {block:IsDeactivated}
  1404. <span>{Username}</span>
  1405. {/block:IsDeactivated}
  1406. </div>
  1407. <div class="reblog-body">{Body}</div>
  1408. {/block:Reblogs}
  1409. </div>
  1410. {/block:RebloggedFrom}
  1411. {/block:Text}
  1412.  
  1413. <!--All Answer posts including NPF-->
  1414. {block:Answer}
  1415. <div class="answer-question">
  1416. <i data-feather="message-circle" class="icon feather"></i>
  1417. <span class="answer-user">
  1418. {lang:Asked by Asker 2}
  1419. </span>
  1420. <span class="clearfix"></span>
  1421. <i data-feather="mail" class="icon feather"></i>
  1422. <span class="question">
  1423. {Question}
  1424. </span>
  1425. </div>
  1426.  
  1427. {block:Answerer}
  1428. <div class="reblog-list">
  1429. <div class="reblog-body">
  1430. {Answer}
  1431. </div>
  1432. </div>
  1433. {/block:Answerer}
  1434.  
  1435. <!--Original Post-->
  1436. {block:NotReblog}
  1437. <div class="reblog-list">
  1438. <div class="reblog-body">
  1439. {Replies}
  1440. </div>
  1441. </div>
  1442. {/block:NotReblog}
  1443.  
  1444. {block:RebloggedFrom}
  1445. <div class="reblog-list">
  1446. {block:Reblogs}
  1447. <div class="reblog-header">
  1448. <img src="{PortraitURL-64}" class="reblog-img" alt="{Username}'s avatar">
  1449. {block:IsActive}
  1450. <a href="{Permalink}">{Username}</a>
  1451. {/block:IsActive}
  1452. {block:IsDeactivated}
  1453. <span>{Username}</span>
  1454. {/block:IsDeactivated}
  1455. </div>
  1456. <div class="reblog-body">{Body}</div>
  1457. {/block:Reblogs}
  1458. </div>
  1459. {/block:RebloggedFrom}
  1460. {/block:Answer}
  1461.  
  1462. <!--Legacy Photo Posts-->
  1463. {block:Photo}
  1464. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1465. <!--Original Post-->
  1466. {block:NotReblog}
  1467. <div class="reblog-list">
  1468. <div class="reblog-body">
  1469. {Caption}
  1470. </div>
  1471. </div>
  1472. {/block:NotReblog}
  1473.  
  1474. {block:RebloggedFrom}
  1475. <div class="reblog-list">
  1476. {block:Reblogs}
  1477. <div class="reblog-header source-head">
  1478. <img src="{PortraitURL-64}" class="reblog-img" alt="{Username}'s avatar">
  1479. {block:IsActive}
  1480. <a href="{Permalink}">{Username}</a>
  1481. {/block:IsActive}
  1482. {block:IsDeactivated}
  1483. <span>{Username}</span>
  1484. {/block:IsDeactivated}
  1485. </div>
  1486. <div class="reblog-body">{Body}</div>
  1487. {/block:Reblogs}
  1488. </div>
  1489. {/block:RebloggedFrom}
  1490. {/block:Photo}
  1491.  
  1492. <!--Legacy Photoset Posts-->
  1493. {block:Photoset}
  1494. <!-- RESOURCES: photoset css / by: annasthms.github.io/photosets -->
  1495. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  1496. {block:Photos}
  1497. <div data-width="{PhotoWidth-HighRes}"
  1498. data-height="{PhotoHeight-HighRes}"
  1499. data-lowres="{PhotoURL-500}"
  1500. data-highres="{PhotoURL-HighRes}"
  1501. onclick="lightbox(this)">
  1502. <img src="{PhotoURL-HighRes}" />
  1503. </div>
  1504. {/block:Photos}
  1505. </div>
  1506. <!--Original Post-->
  1507. {block:NotReblog}
  1508. <div class="reblog-list">
  1509. <div class="reblog-body">
  1510. {Caption}
  1511. </div>
  1512. </div>
  1513. {/block:NotReblog}
  1514.  
  1515. {block:RebloggedFrom}
  1516. <div class="reblog-list">
  1517. {block:Reblogs}
  1518. <div class="reblog-header source-head">
  1519. <img src="{PortraitURL-64}" class="reblog-img" alt="{Username}'s avatar">
  1520. {block:IsActive}
  1521. <a href="{Permalink}">{Username}</a>
  1522. {/block:IsActive}
  1523. {block:IsDeactivated}
  1524. <span>{Username}</span>
  1525. {/block:IsDeactivated}
  1526. </div>
  1527. <div class="reblog-body">{Body}</div>
  1528. {/block:Reblogs}
  1529. </div>
  1530. {/block:RebloggedFrom}
  1531. {/block:Photoset}
  1532.  
  1533. <!--Legacy Quote Posts-->
  1534. {block:Quote}
  1535. "{Quote}"
  1536. {block:Source}
  1537. <div class="source">{Source}</div>
  1538. {/block:Source}
  1539. {/block:Quote}
  1540.  
  1541. <!--Legacy Link Posts-->
  1542. {block:Link}
  1543. <a href="{URL}" class="link" {Target}>{Name}</a>
  1544. <!--Original Post-->
  1545. {block:NotReblog}
  1546. <div class="reblog-list">
  1547. <div class="reblog-body">
  1548. {Description}
  1549. </div>
  1550. </div>
  1551. {/block:NotReblog}
  1552.  
  1553. {block:RebloggedFrom}
  1554. <div class="reblog-list">
  1555. {block:Reblogs}
  1556. <div class="reblog-header source-head">
  1557. <img src="{PortraitURL-64}" class="reblog-img" alt="{Username}'s avatar">
  1558. {block:IsActive}
  1559. <a href="{Permalink}">{Username}</a>
  1560. {/block:IsActive}
  1561. {block:IsDeactivated}
  1562. <span>{Username}</span>
  1563. {/block:IsDeactivated}
  1564. </div>
  1565. <div class="reblog-body">{Body}</div>
  1566. {/block:Reblogs}
  1567. </div>
  1568. {/block:RebloggedFrom}
  1569. {/block:Link}
  1570.  
  1571. <!--Legacy Chat Posts-->
  1572. {block:Chat}
  1573. {block:Title}
  1574. <h3><a href="{Permalink}">{Title}</a></h3>
  1575. {/block:Title}
  1576.  
  1577. <ul class="chat">
  1578. {block:Lines}
  1579. <li class="{Alt} user_{UserNumber}">
  1580. {block:Label}
  1581. <span class="label">{Label}</span>
  1582. {/block:Label}{Line}
  1583. </li>
  1584. {/block:Lines}
  1585. </ul>
  1586. {/block:Chat}
  1587.  
  1588. <!--Legacy Video Posts-->
  1589. {block:Video}
  1590. {Video-700}
  1591. <!--Original Post-->
  1592. {block:NotReblog}
  1593. <div class="reblog-list">
  1594. <div class="reblog-body">
  1595. {Description}
  1596. </div>
  1597. </div>
  1598. {/block:NotReblog}
  1599.  
  1600. {block:RebloggedFrom}
  1601. <div class="reblog-list">
  1602. {block:Reblogs}
  1603. <div class="reblog-header source-head">
  1604. <img src="{PortraitURL-64}" class="reblog-img" alt="{Username}'s avatar">
  1605. {block:IsActive}
  1606. <a href="{Permalink}">{Username}</a>
  1607. {/block:IsActive}
  1608. {block:IsDeactivated}
  1609. <span>{Username}</span>
  1610. {/block:IsDeactivated}
  1611. </div>
  1612. <div class="reblog-body">{Body}</div>
  1613. {/block:Reblogs}
  1614. </div>
  1615. {/block:RebloggedFrom}
  1616. {/block:Video}
  1617.  
  1618. <!--Legacy Audio Posts-->
  1619. {block:Audio}
  1620. {AudioEmbed}
  1621. <!--Original Post-->
  1622. {block:NotReblog}
  1623. <div class="reblog-list">
  1624. <div class="reblog-body">
  1625. {Description}
  1626. </div>
  1627. </div>
  1628. {/block:NotReblog}
  1629.  
  1630. {block:RebloggedFrom}
  1631. <div class="reblog-list">
  1632. {block:Reblogs}
  1633. <div class="reblog-header source-head">
  1634. <img src="{PortraitURL-64}" class="reblog-img" alt="{Username}'s avatar">
  1635. {block:IsActive}
  1636. <a href="{Permalink}">{Username}</a>
  1637. {/block:IsActive}
  1638. {block:IsDeactivated}
  1639. <span>{Username}</span>
  1640. {/block:IsDeactivated}
  1641. </div>
  1642. <div class="reblog-body">{Body}</div>
  1643. {/block:Reblogs}
  1644. </div>
  1645. {/block:RebloggedFrom}
  1646. {/block:Audio}
  1647. </div>
  1648. <!-- post-content end -->
  1649.  
  1650. {block:Date}
  1651. <article class="post info-date">
  1652. <div class="info">
  1653. <div class="date">
  1654. <a href="{Permalink}" class="date-time" title="{timeago}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a>
  1655.  
  1656. {block:NoteCount}
  1657. <span title="{NoteCountWithLabel}">{NoteCount}</span>
  1658. {/block:NoteCount}
  1659.  
  1660. </div>
  1661. <div class="reblogged">
  1662. <a class="post-date_like" href="#" title="Like">
  1663. {LikeButton}<span class="post-date_time-likeb">like</span>
  1664. </a>
  1665. <a target="_blank" href="{ReblogURL}" target="_blank" title="Reblog">reblog</a>
  1666.  
  1667. {block:Permalink}
  1668. {block:RebloggedFrom}
  1669. <a target="_blank" href="{ReblogParentURL}" title="{lang:Reblogged from} {ReblogParentName}">{ReblogParentName}</a>
  1670. <i data-feather="corner-up-right" class="date-icon icon"></i>
  1671. <a target="_blank" href="{ReblogRootURL}" title="{lang:Originally from ReblogRootName}">{ReblogRootName}</a>
  1672. {/block:RebloggedFrom}
  1673. {/block:Permalink}
  1674. </div>
  1675. </div>
  1676. {block:HasTags}
  1677. <ul class="post tags">
  1678. {block:Tags}
  1679. <a href="{TagURL}">#{Tag}</a>
  1680. {/block:Tags}
  1681. </ul>
  1682. {/block:HasTags}
  1683. </article>
  1684. {/block:Date}
  1685.  
  1686. </article>
  1687.  
  1688. {block:PostNotes}
  1689. <div class="post notes">
  1690. {PostNotes}
  1691. </div>
  1692. {/block:PostNotes}
  1693.  
  1694. {/block:Posts}
  1695. </div>
  1696. </div>
  1697.  
  1698. <!-- RESOURCES: smoothscroll / by: https://github.com/gblazex/smoothscroll-for-websites michael herf, balazs galambosi -->
  1699. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.5.1/SmoothScroll.min.js"></script>
  1700.  
  1701. <!-- RESOURCES: feather icons / by: github.com/feathericons/feather -->
  1702. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  1703.  
  1704. <!-- RESOURCES: tippy tooltip / by: eossa.studio/post/190447242880 -->
  1705. <script src="https://unpkg.com/popper.js@1"></script>
  1706. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1707.  
  1708. <script>
  1709.  
  1710. // RESOURCES: dark mode / by: mournstera.tumblr.com/post/724742111455592448
  1711. const themeToggleButtons = document.querySelectorAll(".theme-toggle");
  1712.  
  1713. themeToggleButtons.forEach((btn) => {
  1714. btn.addEventListener("click", function () {
  1715.  
  1716. // Add theme-transition class for smooth transitions
  1717. document.documentElement.classList.add("theme-transition");
  1718.  
  1719. // Retrieve the current theme and determine the target theme
  1720. let currentTheme = document.documentElement.getAttribute("data-theme");
  1721. let targetTheme = (currentTheme === "light") ? "dark" : "light";
  1722.  
  1723. // Remove theme-transition class after a short delay
  1724. window.setTimeout(function () {
  1725. document.documentElement.classList.remove("theme-transition");
  1726. }, 50);
  1727.  
  1728. // Set the data-theme attribute and store in local storage
  1729. document.documentElement.setAttribute("data-theme", targetTheme);
  1730. localStorage.setItem("theme", targetTheme);
  1731. });
  1732. });
  1733.  
  1734.  
  1735. // RESOURCES: css photoset - by: annasthms.github.io/photosets
  1736. function gatherData(images, arr) {
  1737. for (let i = 0; i < images.length; i++) {
  1738. let currentData = {
  1739. "width": images[i].getAttribute('data-width'),
  1740. "height": images[i].getAttribute('data-height'),
  1741. "low_res": images[i].getAttribute('data-lowres'),
  1742. "high_res": images[i].getAttribute('data-highres')
  1743. };
  1744. arr.push(currentData);
  1745. }
  1746. }
  1747.  
  1748. function getIndex(elem) {
  1749. let i = 0;
  1750. while( (elem = elem.previousElementSibling) != null ) i++;
  1751. return i;
  1752. }
  1753.  
  1754. function lightbox(elem) {
  1755. let currentPhotoset = elem.parentNode;
  1756. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1757. let data = [];
  1758. gatherData(photosetPhotos, data);
  1759. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1760. }
  1761.  
  1762. // RESOURCES: remove empty p tags - by: github.com/flipsewtf/Tumblr-basecode/blob/main/jquery-free-basecode.html
  1763. // for (const p of document.querySelectorAll('p')) {
  1764. // if (p.innerHTML.trim() === '') {
  1765. // p.remove()
  1766. // }
  1767. // }
  1768.  
  1769.  
  1770. // RESOURCES: feather icons - by: github.com/feathericons/feather
  1771. feather.replace();
  1772.  
  1773.  
  1774. // RESOURCES: tippy tooltip - by: eossa.studio/post/190447242880
  1775. tippy('a[title], span[title], div[title], i[title]', {
  1776. theme: 'custom',
  1777. arrow: false,
  1778. zIndex: 9999999999,
  1779. maxWidth: 300,
  1780.  
  1781. content(reference) {
  1782. const title = reference.getAttribute('title');
  1783. reference.removeAttribute('title');
  1784. return title;
  1785. },
  1786. });
  1787. </script>
  1788. </body>
  1789. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!