API tools faq
paste
sexycullen

theme 221

sexycullen
Mar 16th, 2021 (edited)
3,762
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 70.12 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. maziekeen's theme #221
  4. https://maziekeen.tumblr.com/
  5.  
  6.  
  7. PLEASE DO NOT:
  8. remove the credits; claim as your own; use as a base, take parts
  9. of the theme, repost as your own
  10. YOU CAN:
  11. edit as much as you want for your own personal use only.
  12.  
  13.  
  14. CREDITS,
  15. base code: egg.design
  16.  
  17. captions and audio style by seyche
  18. css photosets by annasthms
  19. tumblr controls by cyantists
  20. smooth scroll by michael herf and balazs galambosi
  21. saturn icons by suiomi.com
  22. feathericons by github.com/feathericons/feather
  23. normalize reest html by necolas.github.io
  24. tippyjs tooltips by silbrigthemes
  25. short notecount, like and reblog, video resize by shythemes
  26. npf images readjustment v.02 by glenthemes
  27. post notes icons by arcaicas.tumblr.com
  28. dark mode by twan mulder at blog.prototypr.io/8b461864644b
  29. & ananya neogi at dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8
  30.  
  31. -->
  32.  
  33.  
  34. <!DOCTYPE html>
  35. <html>
  36. <head>
  37.  
  38. <link rel="shortcut icon" href="{Favicon}" />
  39. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  40. <title>{Title}</title>
  41. {block:Description}
  42. <meta name="description" content="{MetaDescription}" />
  43. {/block:Description}
  44. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  45.  
  46. <!-- stylesheets -->
  47. <link href="https://static.tumblr.com/0siu224/1Eaqd80d8/normalize.css" rel="stylesheet"> <!-- reset html code -->
  48. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet"> <!-- photosets -->
  49. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"> <!-- custom icons -->
  50. <script src="https://unpkg.com/feather-icons"></script> <!-- custom icons -->
  51.  
  52.  
  53. <!-- custom fonts -->
  54. <link href="https://fonts.googleapis.com/css2?family={text:Body Font Family}:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet" />
  55.  
  56. <!-- image options -->
  57. <meta name="image:Background Image" content="" />
  58. <meta name="image:Sidebar Icon Image" content="" />
  59.  
  60. <!-- light color options -->
  61. <meta name="color:Background Theme Color" content="#fcfcfc" />
  62. <meta name="color:Body Text Color" content="#1a1a1a" />
  63. <meta name="color:Body Link Color" content="#757575" />
  64. <meta name="color:Body Link Hover Color" content="#000000" />
  65. <meta name="color:Bold Color" content="#1a1a1a">
  66. <meta name="color:Italic Color" content="#525252">
  67. <meta name="color:Sidebar Title Color" content="#1a1a1a">
  68. <meta name="color:Sidebar Title Url Color" content="#979797">
  69. <meta name="color:Sidebar Links Icon And Font Color" content="#757575">
  70. <meta name="color:Sidebar Icon Image Border Separator" content="#ededed">
  71. <meta name="color:Sidebar Background Color" content="#ffffff">
  72. <meta name="color:Hover Text Background Color" content="#1a1a1a" />
  73. <meta name="color:Hover Text Color" content="#ffffff" />
  74. <meta name="color:Date Link Color" content="#1a1a1a">
  75. <meta name="color:Tags Link Color" content="#757575">
  76. <meta name="color:Liked Link Color" content="#6565b9">
  77. <meta name="color:Posts Background Color" content="#ffffff" />
  78. <meta name="color:Borders Color" content="#ededed" />
  79. <meta name="color:Scrollbar Color" content="#1a1a1a" />
  80. <meta name="color:Tumblr Controls Icon Color" content="#1a1a1a" />
  81.  
  82. <!-- dark color options -->
  83. <meta name="color:Dark Background Theme Color" content="#1a1e23" />
  84. <meta name="color:Dark Body Text Color" content="#ffffff" />
  85. <meta name="color:Dark Body Link Color" content="#adadeb" />
  86. <meta name="color:Dark Body Link Hover Color" content="#e182b5" />
  87. <meta name="color:Dark Bold Color" content="#c9c9e3">
  88. <meta name="color:Dark Italic Color" content="#adadad">
  89. <meta name="color:Dark Sidebar Title Color" content="#ffffff">
  90. <meta name="color:Dark Sidebar Title Url Color" content="#cecede">
  91. <meta name="color:Dark Sidebar Links Icon And Font Color" content="#c9c9e3">
  92. <meta name="color:Dark Sidebar Icon Image Border Separator" content="#2b3135">
  93. <meta name="color:Dark Sidebar Background Color" content="#21262c">
  94. <meta name="color:Dark Hover Text Background Color" content="#e182b5" />
  95. <meta name="color:Dark Hover Text Color" content="#ffffff" />
  96. <meta name="color:Dark Date Link Color" content="#c9c9e3">
  97. <meta name="color:Dark Tags Link Color" content="#adadeb">
  98. <meta name="color:Dark Liked Link Color" content="#e182b5">
  99. <meta name="color:Dark Posts Background Color" content="#21262c" />
  100. <meta name="color:Dark Borders Color" content="#2b3135" />
  101. <meta name="color:Dark Scrollbar Color" content="#c9c9e3" />
  102. <meta name="color:Dark Tumblr Controls Icon Color" content="#c9c9e3" />
  103.  
  104.  
  105. <!-- text, font style and sizes options -->
  106. <meta name="text:Body Font Family" content="Nunito" />
  107.  
  108. <meta name="select:Body Font Size" content="11px" />
  109. <meta name="select:Body Font Size" content="8px" />
  110. <meta name="select:Body Font Size" content="9px" />
  111. <meta name="select:Body Font Size" content="10px" />
  112. <meta name="select:Body Font Size" content="12px" />
  113. <meta name="select:Body Font Size" content="13px" />
  114. <meta name="select:Body Font Size" content="14px" />
  115. <meta name="select:Body Font Size" content="15px" />
  116. <meta name="select:Body Font Size" content="16px" />
  117. <meta name="select:Body Font Size" content="17px" />
  118. <meta name="select:Body Font Size" content="18px" />
  119.  
  120. <meta name="select:Bold Font Weight" content="bold" />
  121. <meta name="select:Bold Font Weight" content="normal" />
  122.  
  123. <meta name="select:Posts Text Position" content="left">
  124. <meta name="select:Posts Text Position" content="justify">
  125.  
  126. <!-- posts titles (h1, h2, h3...) -->
  127. <meta name="select:Posts Titles Font Size" content="15px" />
  128. <meta name="select:Posts Titles Font Size" content="10px" />
  129. <meta name="select:Posts Titles Font Size" content="11px" />
  130. <meta name="select:Posts Titles Font Size" content="12px" />
  131. <meta name="select:Posts Titles Font Size" content="13px" />
  132. <meta name="select:Posts Titles Font Size" content="14px" />
  133. <meta name="select:Posts Titles Font Size" content="16px" />
  134. <meta name="select:Posts Titles Font Size" content="17px" />
  135. <meta name="select:Posts Titles Font Size" content="18px" />
  136.  
  137. <meta name="select:Posts Titles Font Weight" content="bold">
  138. <meta name="select:Posts Titles Font Weight" content="normal">
  139.  
  140. <meta name="select:Posts Titles Font Style" content="normal">
  141. <meta name="select:Posts Titles Font Style" content="italic">
  142.  
  143. <meta name="select:Posts Titles Text Transform" content="none">
  144. <meta name="select:Posts Titles Text Transform" content="uppercase">
  145. <meta name="select:Posts Titles Text Transform" content="lowercase">
  146. <meta name="select:Posts Titles Text Transform" content="capitalize">
  147.  
  148. <meta name="select:Posts Titles Text Position" content="left">
  149. <meta name="select:Posts Titles Text Position" content="center">
  150. <meta name="select:Posts Titles Text Position" content="justify">
  151. <meta name="select:Posts Titles Text Position" content="right">
  152.  
  153.  
  154. <!-- sidebar title -->
  155. <meta name="select:Sidebar Title Font Size" content="11px" />
  156. <meta name="select:Sidebar Title Font Size" content="12px" />
  157. <meta name="select:Sidebar Title Font Size" content="13px" />
  158. <meta name="select:Sidebar Title Font Size" content="14px" />
  159. <meta name="select:Sidebar Title Font Size" content="15px" />
  160. <meta name="select:Sidebar Title Font Size" content="16px" />
  161.  
  162.  
  163. <meta name="select:Sidebar Title Font Style" content="normal">
  164. <meta name="select:Sidebar Title Font Style" content="italic">
  165.  
  166. <meta name="select:Sidebar Title Text Transform" content="none">
  167. <meta name="select:Sidebar Title Text Transform" content="uppercase">
  168. <meta name="select:Sidebar Title Text Transform" content="lowercase">
  169. <meta name="select:Sidebar Title Text Transform" content="capitalize">
  170.  
  171.  
  172. <!-- sidebar icons -->
  173. <meta name="select:Sidebar Icons and Font Size" content="14px" />
  174. <meta name="select:Sidebar Icons and Font Size" content="8px" />
  175. <meta name="select:Sidebar Icons and Font Size" content="9px" />
  176. <meta name="select:Sidebar Icons and Font Size" content="10px" />
  177. <meta name="select:Sidebar Icons and Font Size" content="11px" />
  178. <meta name="select:Sidebar Icons and Font Size" content="12px" />
  179. <meta name="select:Sidebar Icons and Font Size" content="13px" />
  180. <meta name="select:Sidebar Icons and Font Size" content="15px" />
  181. <meta name="select:Sidebar Icons and Font Size" content="16px" />
  182. <meta name="select:Sidebar Icons and Font Size" content="17px" />
  183. <meta name="select:Sidebar Icons and Font Size" content="18px" />
  184.  
  185.  
  186. <!-- sidebar links -->
  187. <meta name="select:Sidebar Links Font Weight" content="bold">
  188. <meta name="select:Sidebar Links Font Weight" content="normal">
  189.  
  190. <meta name="select:Sidebar Links Font Style" content="normal">
  191. <meta name="select:Sidebar Links Font Style" content="italic">
  192.  
  193. <meta name="select:Sidebar Links Text Transform" content="none">
  194. <meta name="select:Sidebar Links Text Transform" content="uppercase">
  195. <meta name="select:Sidebar Links Text Transform" content="lowercase">
  196. <meta name="select:Sidebar Links Text Transform" content="capitalize">
  197.  
  198. <!-- description -->
  199. <meta name="select:Description Font Size" content="11px" />
  200. <meta name="select:Description Font Size" content="8px" />
  201. <meta name="select:Description Font Size" content="9px" />
  202. <meta name="select:Description Font Size" content="10px" />
  203. <meta name="select:Description Font Size" content="12px" />
  204. <meta name="select:Description Font Size" content="13px" />
  205. <meta name="select:Description Font Size" content="14px" />
  206. <meta name="select:Description Font Size" content="15px" />
  207. <meta name="select:Description Font Size" content="16px" />
  208.  
  209. <meta name="select:Description Font Weight" content="normal" />
  210. <meta name="select:Description Font Weight" content="bold" />
  211.  
  212. <meta name="select:Description Font Style" content="normal" />
  213. <meta name="select:Description Font Style" content="italic" />
  214.  
  215. <meta name="select:Description Text Transform" content="lowercase" />
  216. <meta name="select:Description Text Transform" content="none" />
  217. <meta name="select:Description Text Transform" content="uppercase" />
  218. <meta name="select:Description Text Transform" content="capitalize" />
  219.  
  220.  
  221.  
  222. <!-- date / post info -->
  223. <meta name="select:Date Font Size" content="11px" />
  224. <meta name="select:Date Font Size" content="8px" />
  225. <meta name="select:Date Font Size" content="9px" />
  226. <meta name="select:Date Font Size" content="10px" />
  227. <meta name="select:Date Font Size" content="12px" />
  228. <meta name="select:Date Font Size" content="13px" />
  229. <meta name="select:Date Font Size" content="14px" />
  230. <meta name="select:Date Font Size" content="15px" />
  231. <meta name="select:Date Font Size" content="16px" />
  232.  
  233. <meta name="select:Date Font Weight" content="bold" />
  234. <meta name="select:Date Font Weight" content="normal" />
  235.  
  236. <meta name="select:Date Font Style" content="normal" />
  237. <meta name="select:Date Font Style" content="italic" />
  238.  
  239. <meta name="select:Date Text Transform" content="lowercase" />
  240. <meta name="select:Date Text Transform" content="none" />
  241. <meta name="select:Date Text Transform" content="uppercase" />
  242. <meta name="select:Date Text Transform" content="capitalize" />
  243.  
  244. <meta name="select:Date Text Position" content="left" />
  245. <meta name="select:Date Text Position" content="center" />
  246. <meta name="select:Date Text Position" content="right" />
  247.  
  248.  
  249. <!-- tags / post info -->
  250. <meta name="select:Tags Font Size" content="11px" />
  251. <meta name="select:Tags Font Size" content="8px" />
  252. <meta name="select:Tags Font Size" content="9px" />
  253. <meta name="select:Tags Font Size" content="10px" />
  254. <meta name="select:Tags Font Size" content="12px" />
  255. <meta name="select:Tags Font Size" content="13px" />
  256. <meta name="select:Tags Font Size" content="14px" />
  257. <meta name="select:Tags Font Size" content="15px" />
  258. <meta name="select:Tags Font Size" content="16px" />
  259.  
  260. <meta name="select:Tags Font Weight" content="normal" />
  261. <meta name="select:Tags Font Weight" content="bold" />
  262.  
  263. <meta name="select:Tags Font Style" content="normal" />
  264. <meta name="select:Tags Font Style" content="italic" />
  265.  
  266. <meta name="select:Tags Text Transform" content="none" />
  267. <meta name="select:Tags Text Transform" content="uppercase" />
  268. <meta name="select:Tags Text Transform" content="lowercase" />
  269. <meta name="select:Tags Text Transform" content="capitalize" />
  270.  
  271. <meta name="select:Tags Text Position" content="left" />
  272. <meta name="select:Tags Text Position" content="center" />
  273. <meta name="select:Tags Text Position" content="right" />
  274.  
  275. <!-- sidebar and posts borders -->
  276. <meta name="select:Borders Size" content="1px" />
  277. <meta name="select:Borders Size" content="0px" />
  278. <meta name="select:Borders Size" content="2px" />
  279. <meta name="select:Borders Size" content="3px" />
  280.  
  281. <meta name="select:Borders Style" content="solid" />
  282. <meta name="select:Borders Style" content="dotted" />
  283. <meta name="select:Borders Style" content="dashed" />
  284. <meta name="select:Borders Style" content="double" />
  285. <meta name="select:Borders Style" content="ridge" />
  286.  
  287. <!-- booleans -->
  288. <meta name="if:Posts size 540px" content="1"/>
  289. <meta name="if:Posts size 500px" content="0"/>
  290. <meta name="if:Posts size 400px" content="0"/>
  291.  
  292. <meta name="if:Sidebar Link 1" content="1" />
  293. <meta name="if:Sidebar Link 2" content="1" />
  294. <meta name="if:Sidebar Link 3" content="1" />
  295. <meta name="if:Sidebar Link 4" content="1" />
  296. <meta name="if:Sidebar Link 5" content="1" />
  297. <meta name="if:Sidebar Link 6" content="1" />
  298.  
  299. <meta name="if:Disable Switch Theme Color" content="0" />
  300. <meta name="if:Fix Sidebar on Top" content="1" />
  301. <meta name="if:Sidebar Title Url" content="1" />
  302. <meta name="if:Sidebar Icon Image Border Separator" content="1" />
  303. <meta name="if:Sidebar Icon Image" content="1" />
  304. <meta name="if:Sidebar Links Icons" content="1" />
  305. <meta name="if:Sidebar Border" content="0" />
  306. <meta name="if:Sidebar Box Shadow" content="0" />
  307. <meta name="if:Images Black and White" content="0" />
  308. <meta name="if:Links Underline Border" content="0" />
  309. <meta name="if:Tumblr Captions" content="1"/>
  310. <meta name="if:Custom Caption Icon" content="0" />
  311. <meta name="if:Box Shadow" content="0" />
  312. <meta name="if:Posts Borders" content="0" />
  313. <meta name="if:Custom Controls" content="1"/>
  314.  
  315. <meta name="text:Box Shadow Size" content="0px 4px 8px" />
  316. <meta name="text:Box Shadow Color" content="0, 0, 0, 0.1" />
  317.  
  318. <!-- sidebar links -->
  319. <meta name="text:Index URL" content="/" />
  320. <meta name="text:Index Text" content="Index" />
  321. <meta name="text:Index Icon" content="home" />
  322. <meta name="text:Ask URL" content="/ask" />
  323. <meta name="text:Ask Text" content="Ask" />
  324. <meta name="text:Ask Icon" content="mail" />
  325.  
  326. <meta name="text:Sidebar Link 1 URL" content="/" />
  327. <meta name="text:Sidebar Link 1 Text" content="Link 1" />
  328. <meta name="text:Sidebar Link 1 Icon" content="grid" />
  329. <meta name="text:Sidebar Link 2 URL" content="/" />
  330. <meta name="text:Sidebar Link 2 Text" content="Link 2" />
  331. <meta name="text:Sidebar Link 2 Icon" content="edit" />
  332. <meta name="text:Sidebar Link 3 URL" content="/" />
  333. <meta name="text:Sidebar Link 3 Text" content="Link 3" />
  334. <meta name="text:Sidebar Link 3 Icon" content="user" />
  335. <meta name="text:Sidebar Link 4 URL" content="/" />
  336. <meta name="text:Sidebar Link 4 Text" content="Link 4" />
  337. <meta name="text:Sidebar Link 4 Icon" content="file-text" />
  338. <meta name="text:Sidebar Link 5 URL" content="/" />
  339. <meta name="text:Sidebar Link 5 Text" content="Link 5" />
  340. <meta name="text:Sidebar Link 5 Icon" content="folder" />
  341. <meta name="text:Sidebar Link 6 URL" content="/" />
  342. <meta name="text:Sidebar Link 6 Text" content="Link 6" />
  343. <meta name="text:Sidebar Link 6 Icon" content="message-square" />
  344.  
  345.  
  346. <!-- custom fonts -->
  347. <link href="https://fonts.googleapis.com/css2?family={text:Body Font Family}:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet" />
  348.  
  349.  
  350. <style>
  351. :root {
  352. /* colors */
  353. --backgroundThemeColor: {color:Background Theme Color};
  354. --bodyTextColor: {color:Body Text Color};
  355. --bodyLinkColor: {color:Body Link Color};
  356. --bodyLinkHoverColor: {color:Body Link Hover Color};
  357. --boldColor: {color:Bold Color};
  358. --italicColor: {color:Italic Color};
  359. --sidebarTextColor: {color:Sidebar Text Color};
  360. --sidebarLinksIconAndFontColor: {color:Sidebar Links Icon And Font Color};
  361. --sidebarTitleColor: {color:Sidebar Title Color};
  362. --sidebarTitleUrlColor: {color:Sidebar Title Url Color};
  363. --sidebarIconImageBorderSeparator: {color:Sidebar Icon Image Border Separator};
  364. --sidebarBackgroundColor: {color:Sidebar Background Color};
  365. --hoverTextBackgroundColor: {color:Hover Text Background Color};
  366. --hoverTextColor: {color:Hover Text Color};
  367. --dateLinkColor:{color:Date Link Color};
  368. --tagsLinkColor: {color:Tags Link Color};
  369. --likedLinkColor: {color:Liked Link Color};
  370. --scrollbarColor: {color:Scrollbar Color};
  371. --bordersColor: {color:Borders Color};
  372. --postsBackgroundColor: {color:Posts Background Color};
  373. --tumblrControlsIconColor: {color:Tumblr Controls Icon Color};
  374.  
  375. /* fonts, sizes, styles */
  376. --bodyFontFamily: {text:Body Font Family};
  377.  
  378. --bodyFontSize: {select:Body Font Size};
  379. --postsTitlesFontSize: {select:Posts Titles Font Size};
  380. --sidebarTitleFontSize: {select:Sidebar Title Font Size};
  381. --sidebarIconsFontSize: {select:Sidebar Icons and Font Size};
  382. --descriptionFontSize: {select:Description Font Size};
  383. --dateFontSize:{select:Date Font Size};
  384. --tagsFontSize:{select:Tags Font Size};
  385.  
  386. --boldFontWeight: {select:Bold Font Weight};
  387. --postsTitlesFontWeight: {select:Posts Titles Font Weight};
  388. --sidebarTitleFontWeight: {select:Sidebar Title Font Weight};
  389. --sidebarLinksFontWeight: {select:Sidebar Links Font Weight};
  390. --bodyLineHeight: calc(var(--bodyFontSize) * 1.5);
  391. --postsTitlesLineHeight: calc(var(--postsTitlesFontSize) * 1.2);
  392. --sidebarTitleLineHeight: calc(var(--sidebarTitleFontSize) * 1.2);
  393. --descriptionFontWeight: {select:Description Font Weight};
  394. --dateFontWeight:{select:Date Font Weight};
  395. --tagsFontWeight:{select:Tags Font Weight};
  396.  
  397. --postsTitlesTextTransform: {select:Posts Titles Text Transform};
  398. --postsTitlesFontStyle: {select:Posts Titles Font Style};
  399. --sidebarTitleTextTransform: {select:Sidebar Title Text Transform};
  400. --sidebarTitleFontStyle: {select:Sidebar Title Font Style};
  401. --sidebarLinksTextTransform: {select:Sidebar Links Text Transform};
  402. --sidebarLinksFontStyle: {select:Sidebar Links Font Style};
  403. --descriptionTextTransform: {select:Description Text Transform};
  404. --descriptionFontStyle: {select:Description Font Style};
  405. --dateTextTransform:{select:Date Text Transform};
  406. --dateFontStyle:{select:Date Font Style};
  407. --tagsTextTransform:{select:Tags Text Transform};
  408. --tagsFontStyle:{select:Tags Font Style};
  409.  
  410. --postsTextPosition: {select:Posts Text Position};
  411. --postsTitlesTextPosition: {select:Posts Titles Text Position};
  412. --dateTextPosition:{select:Date Text Position};
  413. --tagsTextPosition:{select:Tags Text Position};
  414.  
  415.  
  416. /* other styles */
  417. --bordersStyle: {select:Borders Style};
  418. --bordersSize: {select:Borders Size};
  419. --boxShadowSize:{text:Box Shadow Size};
  420. --boxShadowColor:{text:Box Shadow Color};
  421. --sidebarContentPosition: {select:Sidebar Content Position};
  422. --transitions: all .3s ease;
  423.  
  424. /*npf images readjustment */
  425. --NPF-Image-Spacing:4px;
  426. --NPF-Bottom-Gap-From-Captions:1em;
  427. }
  428.  
  429. {block:ifNotDisableSwitchThemeColor}
  430. /* dark colors */
  431. [data-theme="dark"] {
  432. --backgroundThemeColor: {color:Dark Background Theme Color};
  433. --bodyTextColor: {color:Dark Body Text Color};
  434. --bodyLinkColor: {color:Dark Body Link Color};
  435. --bodyLinkHoverColor: {color:Dark Body Link Hover Color};
  436. --boldColor: {color:Dark Bold Color};
  437. --italicColor: {color:Dark Italic Color};
  438. --sidebarTextColor: {color:Dark Sidebar Text Color};
  439. --sidebarLinksIconAndFontColor: {color:Dark Sidebar Links Icon And Font Color};
  440. --sidebarTitleColor: {color:Dark Sidebar Title Color};
  441. --sidebarTitleUrlColor: {color:Dark Sidebar Title Url Color};
  442. --sidebarIconImageBorderSeparator: {color:Dark Sidebar Icon Image Border Separator};
  443. --sidebarBackgroundColor: {color:Dark Sidebar Background Color};
  444. --hoverTextBackgroundColor: {color:Dark Hover Text Background Color};
  445. --hoverTextColor: {color:Dark Hover Text Color};
  446. --dateLinkColor:{color:Dark Date Link Color};
  447. --tagsLinkColor: {color:Dark Tags Link Color};
  448. --likedLinkColor: {color:Dark Liked Link Color};
  449. --scrollbarColor: {color:Dark Scrollbar Color};
  450. --bordersColor: {color:Dark Borders Color};
  451. --postsBackgroundColor: {color:Dark Posts Background Color};
  452. --tumblrControlsIconColor: {color:Dark Tumblr Controls Icon Color};
  453. }
  454. {/block:ifNotDisableSwitchThemeColor}
  455.  
  456.  
  457. /* tumblr controls */
  458. {block:ifCustomControls}
  459. iframe.tmblr-iframe {
  460. z-index:99999999999999!important;
  461. top: 15px!important;
  462. right: 15px!important;
  463. opacity:0;
  464. padding-right:38px;
  465. -webkit-transform:scale(0.75);
  466. -ms-transform:scale(0.75);
  467. transform:scale(0.75);
  468. -webkit-transform-origin:100% 0;
  469. -ms-transform-origin:100% 0;
  470. transform-origin:100% 0;
  471. cursor: pointer;
  472. }
  473. iframe.tmblr-iframe:hover {
  474. opacity:1!important;
  475. }
  476. .hcontrols {
  477. position:fixed;
  478. top:23px;
  479. right:15px;
  480. z-index:999999999;
  481. cursor: pointer;
  482. }
  483. .hcontrols .feather {
  484. width:25px;
  485. height:25px;
  486. stroke-width: 2;
  487. stroke:var(--tumblrControlsIconColor);
  488. cursor: pointer;
  489. }
  490. .hcontrols .feather:hover {
  491. stroke: var(--bodyLinkHoverColor);
  492. }
  493. {/block:ifCustomControls}
  494.  
  495.  
  496. /* scrollbar */
  497. ::-webkit-scrollbar {
  498. width:7px;
  499. height:7px;
  500. }
  501. ::-webkit-scrollbar {
  502. background-color:var(--backgroundThemeColor);
  503. }
  504. ::-webkit-scrollbar-track {
  505. border:8px solid var(--backgroundThemeColor);
  506. background-color:var(--backgroundThemeColor);
  507. }
  508. ::-webkit-scrollbar-thumb {
  509. border:2.1px solid var(--backgroundThemeColor);
  510. background-color:var(--scrollbarColor);
  511. border-radius:10px;
  512. min-height:24px;
  513. min-width:24px;
  514. }
  515.  
  516. /* scroll to top */
  517. .scrolltop .feather {
  518. width:var(--bodyFontSize);
  519. height:var(--bodyFontSize);
  520.  
  521. }
  522.  
  523. .scrolltop {
  524. display: inline-block;
  525. vertical-align: middle;
  526. padding-top: 2.5px;
  527. margin-right: 5px;
  528. }
  529.  
  530. .pagination-content .scrolltop a {
  531. display: none;
  532. padding: 0;
  533. }
  534.  
  535.  
  536. .scrolltop:hover {
  537. color:var(--bodyLinkHoverColor);
  538. }
  539.  
  540.  
  541. html {
  542. -webkit-box-sizing: border-box;
  543. box-sizing: border-box;
  544. }
  545.  
  546.  
  547. *::after, *::before {
  548. -webkit-box-sizing: inherit;
  549. box-sizing: inherit;
  550. }
  551.  
  552. html, body {
  553. height: 100vh;
  554. }
  555.  
  556. body {
  557. margin:0;
  558. background:var(--backgroundThemeColor) url({image:Background Image});
  559. font-size:var(--bodyFontSize);
  560. line-height:var(--bodyLineHeight);
  561. background-attachment:fixed;
  562. font-family:var(--bodyFontFamily), Arial, sans-serif;
  563. word-wrap:break-word;
  564. color: var(--bodyTextColor);
  565. }
  566.  
  567.  
  568. a {
  569. text-decoration:none;
  570. color:var(--bodyLinkColor);
  571. transition:var(--transitions);
  572. }
  573.  
  574. a:hover {
  575. color:var(--bodyLinkHoverColor);
  576. }
  577.  
  578.  
  579. {block:IfLinksUnderlineBorder}
  580. .description a, .pagination a, .date-content a, .caption a, .caption-content a, .tumblr_blog a, .ask-user a {
  581. text-decoration:underline;
  582. }
  583. {/block:IfLinksUnderlineBorder}
  584.  
  585. blockquote {
  586. border-left:2px solid {color:blockquote border};
  587. padding-left:10px;
  588. }
  589.  
  590. p:first-child {
  591. margin-block-start: 0;
  592. margin-block-end: 0;
  593. }
  594.  
  595. p:last-child {
  596. margin-block-end: 0;
  597. }
  598.  
  599.  
  600. small, sup, sub {
  601. font-size:var(--bodyFontSize);
  602. }
  603.  
  604. pre {
  605. word-wrap:break-word!Important;
  606. white-space: pre-wrap;
  607. }
  608.  
  609. h1, h2 {
  610. margin: 15px 0;
  611. font-style:var(--postsTitlesFontStyle);
  612. font-weight:var(--postsTitlesFontWeight);
  613. color:var(--boldColor);
  614. text-transform:var(--postsTitlesTextTransform);
  615. font-size:var(--postsTitlesFontSize);
  616. text-align:var(--postsTitlesTextPosition);
  617. line-height:var(--postsTitlesLineHeight);
  618. }
  619.  
  620. bold, b, strong {
  621. color:var(--boldColor);
  622. font-weight:var(--boldFontWeight);
  623. }
  624.  
  625. italic, i, em {
  626. color:var(--italicColor);
  627. }
  628.  
  629.  
  630. hr {
  631. width:100px;
  632. margin:10px 0 10px 0;
  633. border-width: var(--bordersSize) 0px 0px 0px;
  634. border-style: var(--bordersStyle);
  635. border-color: var(--bordersColor);
  636. }
  637.  
  638.  
  639. img {
  640. border:0;
  641. max-width:100%;
  642. height:auto;
  643. display:block;
  644. margin: 0;
  645. padding: 0;
  646. {block:ifImagesBlackandWhite}
  647. -webkit-filter: grayscale(100%);
  648. filter: grayscale(100%);
  649. {/block:ifImagesBlackandWhite}
  650. transition:var(--transitions);
  651. }
  652.  
  653. img:hover {
  654. opacity:1;
  655. -webkit-filter: grayscale(0%);
  656. filter: grayscale(0%);
  657. }
  658.  
  659. .posts:hover img {
  660. -webkit-filter: grayscale(0%);
  661. filter: grayscale(0%);
  662. opacity:1;
  663. }
  664.  
  665. ::-moz-selection {
  666. background-color: var(--boldColor);
  667. color:var(--postsBackgroundColor);
  668. }
  669.  
  670. ::selection {
  671. background-color: var(--boldColor);
  672. color:var(--postsBackgroundColor);
  673. }
  674.  
  675. /* tooltips */
  676. .tippy-tooltip.custom-theme {
  677. text-align:center;
  678. font-size:var(--bodyFontSize);
  679. font-weight:var(--boldFontWeight);
  680. color:var(--hoverTextColor);
  681. background-color:var(--hoverTextBackgroundColor);
  682. {block:ifBoxShadow}
  683. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  684. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  685. {/block:ifBoxShadow}
  686. transition:var(--transitions);
  687. }
  688.  
  689.  
  690. /* custom icons */
  691. .feather:hover, .navigation ul li .feather:hover {
  692. color: var(--bodyLinkHoverColor);
  693. stroke: var(--bodyLinkHoverColor);
  694. }
  695.  
  696.  
  697. /* sidebar */
  698. .sidebar {
  699. position:relative;
  700. z-index:9999;
  701. margin-top: 50px;
  702. grid-area: header;
  703. width: 100%;
  704. color: var(--bodyTextColor);
  705. display: flex;
  706. justify-content:center;
  707. background: transparent;
  708. }
  709.  
  710. {block:ifFixSidebaronTop}
  711. @supports (position: sticky) {
  712. .sidebar {
  713. position: sticky;
  714. top: 0;
  715. }
  716. }
  717. {/block:ifFixSidebaronTop}
  718.  
  719.  
  720. .sidebar-content {
  721. width:100%;
  722. {block:ifPostsSize540px}
  723. max-width: 541px;
  724. {/block:ifPostsSize540px}
  725. {block:ifPostsSize500px}
  726. max-width: 501px;
  727. {/block:ifPostsSize500px}
  728. {block:ifPostsSize400px}
  729. max-width:400px;
  730. {/block:ifPostsSize400px}
  731.  
  732. display: flex;
  733. padding: 10px;
  734. background-color: var(--sidebarBackgroundColor);
  735. {block:ifSidebarBorder}
  736. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  737. {/block:ifSidebarBorder}
  738.  
  739. {block:ifSidebarBoxShadow}
  740. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  741. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  742. {/block:ifSidebarBoxShadow}
  743. }
  744.  
  745. .sidebar-content .sidebar-icon {
  746. flex: 1 1 25%;
  747. }
  748.  
  749.  
  750. .sidebar-content .sidebar-right-content {
  751. flex: 1 1 100%;
  752. }
  753.  
  754.  
  755. {block:IfSidebarIconImageBorderSeparator}
  756. .sidebar-icon::after {
  757. content: '';
  758. width:var(--bordersSize) ;
  759. height: 50%;
  760. background-color:var(--sidebarIconImageBorderSeparator);
  761. margin:0 0px 0 10px;
  762. }
  763. {/block:IfSidebarIconImageBorderSeparator}
  764.  
  765. .sidebar-icon {
  766. display: flex;
  767. justify-content: center;
  768. align-items:center;
  769. }
  770.  
  771. .sidebar-icon img {
  772. width:90px;
  773. height:90px;
  774. border-radius: 50%;
  775. object-fit: cover;
  776. }
  777.  
  778. {block:ifPostsSize400px}
  779. .sidebar-content .sidebar-icon {
  780. flex: 1 1 30%;
  781. }
  782.  
  783. .sidebar-icon img {
  784. width:70px;
  785. height:70px;
  786. border-radius: 50%;
  787. -o-object-fit: cover;
  788. object-fit: cover;
  789. }
  790. {/block:ifPostsSize400px}
  791.  
  792. .title {
  793. display:flex;
  794. align-items: center;
  795. }
  796.  
  797. .title span:nth-child(1) {
  798. font-weight:bold;
  799. color: var(--sidebarTitleColor);
  800. font-style:var(--sidebarTitleFontStyle);
  801. text-transform:var(--sidebarTitleTextTransform);
  802. font-size:var(--sidebarTitleFontSize);
  803. line-height:var(--sidebarTitleLineHeight);
  804. }
  805.  
  806. .title span:nth-child(2) {
  807. margin:0 0 0 4px;
  808. letter-spacing:0.5px;
  809. color: var(--sidebarTitleUrlColor);
  810. font-size: var(--sidebarTitleFontSize);
  811. }
  812.  
  813. .sidebar-right-content {
  814. {block:IfSidebarIconImage}
  815. padding: 0 0 0 10px;
  816. {/block:IfSidebarIconImage}
  817. display: flex;
  818. flex-direction: column;
  819. justify-content: center;
  820. }
  821.  
  822. .descr {
  823. display:block;
  824. font-weight:bold;
  825. font-size:13px;
  826. color: var(--boldColor);
  827. }
  828.  
  829. .descr small {
  830. font-size:10px;
  831. }
  832.  
  833. .description {
  834. max-height: 85px;
  835. overflow: hidden;
  836. padding: 5px 0;
  837. box-sizing: border-box;
  838. font-size:var(--descriptionFontSize);
  839. font-style:var(--descriptionFontStyle);
  840. font-weight:var(--descriptionFontWeight);
  841. text-transform:var(--descriptionTextTransform);
  842. }
  843.  
  844. .sidebar .description strong {
  845. color: var(--sidebarTextColor);
  846. }
  847.  
  848. .sidebar .description i {
  849. color: var(--sidebarTextColor);
  850. }
  851.  
  852. .description a:hover {
  853. color: var(--bodyLinkHoverColor);
  854. }
  855.  
  856. .navigation {
  857. width: 100%;
  858. }
  859.  
  860.  
  861. {block:IfSidebarLinksIcons}
  862. .navigation ul li a {
  863. display: inline-block;
  864. width: var(--sidebarIconsFontSize);
  865. height: var(--sidebarIconsFontSize);
  866. color: var(--sidebarLinksIconAndFontColor);
  867. }
  868.  
  869. .navigation ul li {
  870. list-style-type:none;
  871. margin: 0 25px 0 0;
  872. padding: 10px 3px 0;
  873. }
  874. {/block:IfSidebarLinksIcons}
  875.  
  876. {block:IfNotSidebarLinksIcons}
  877. .navigation ul li a {
  878. font-size: var(--sidebarIconsFontSize);
  879. color: var(--sidebarLinksIconAndFontColor);
  880. font-weight: var(--sidebarLinksFontWeight);
  881. font-style: var(--sidebarLinksFontStyle);
  882. text-transform:var(--sidebarLinksTextTransform);
  883. }
  884.  
  885. .navigation ul li {
  886. list-style-type:none;
  887. margin: 0 10px 0 0;
  888. padding: 0;
  889. }
  890. {/block:IfNotSidebarLinksIcons}
  891.  
  892. .navigation ul li a:hover {
  893. color: var(--bodyLinkHoverColor);
  894. }
  895.  
  896. .navigation ul {
  897. display:flex;
  898. align-items: center;
  899. flex-wrap: wrap;
  900. margin:0;
  901. padding:0;
  902. }
  903.  
  904.  
  905. .navigation ul li:before {
  906. content: '';
  907. width: 0px;
  908. height: 0px;
  909. margin:0px;
  910. background-color: none;
  911. display: none;
  912. }
  913.  
  914. .navigation ul li .feather {
  915. width: var(--sidebarIconsFontSize);
  916. height: var(--sidebarIconsFontSize);
  917. stroke: var(--sidebarLinksIconAndFontColor);
  918. }
  919.  
  920.  
  921. .navigation ul li:last-child {
  922. padding-right:0px;
  923. }
  924. .navigation ul li:first-child {
  925. padding-left:0px;
  926. }
  927.  
  928. /* pagination */
  929. .dot-separator {
  930. width: 3px;
  931. height: 3px;
  932. margin:2px;
  933. display:inline-block;
  934. border-radius: 50%;
  935. background-color: var(--boldColor);
  936. }
  937.  
  938. .pagination {
  939. width:90vw;
  940. position: fixed;
  941. bottom: 0;
  942. z-index: 99999;
  943. }
  944.  
  945. .pagination-content .toggle-theme .feather, .pagination-content .toggle-theme i, .pagination-content .toggle-theme svg {
  946. cursor: pointer;
  947. padding: 10px;
  948. }
  949.  
  950. .pagination-content .toggle-theme svg {
  951. width: calc(var(--bodyFontSize) + 2px);
  952. height: calc(var(--bodyFontSize) + 2px);
  953. stroke: var(--bodyTextColor);
  954. }
  955.  
  956.  
  957. .pagination-content {
  958. {block:ifPostsSize540px}
  959. max-width: 541px;
  960. {/block:ifPostsSize540px}
  961. {block:ifPostsSize500px}
  962. max-width: 501px;
  963. {/block:ifPostsSize500px}
  964. {block:ifPostsSize400px}
  965. max-width:400px;
  966. {/block:ifPostsSize400px}
  967.  
  968. background: var(--postsBackgroundColor);
  969. margin: 0 auto;
  970. padding: 10px;
  971. display: flex;
  972. justify-content: space-between;
  973. align-content: center;
  974.  
  975. {block:ifNotPostsBorders}
  976. border-top: var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  977. {/block:ifNotPostsBorders}
  978.  
  979. {block:ifPostsBorders}
  980. outline: var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  981. {/block:ifPostsBorders}
  982. transition:var(--transitions);
  983. }
  984.  
  985. .pagination-content a {
  986. font-weight: 600;
  987. padding:10px 0;
  988. color:var(--bodyLinkColor);
  989. font-size:var(--bodyFontSize);
  990. font-weight:var(--boldFontWeight);
  991. text-decoration:none;
  992. display: inline-block;
  993. }
  994.  
  995. .pagination-content a:hover {
  996. color:var(--bodyLinkHoverColor);
  997. }
  998.  
  999. /* posts */
  1000. .container {
  1001. width:90vw;
  1002. height: auto;
  1003. display:grid;
  1004. justify-items: center;
  1005. grid-template-columns: 1fr;
  1006. grid-template-rows: auto 1fr;
  1007. grid-template-areas:
  1008. "header"
  1009. "posts"
  1010. ;
  1011. margin:0 auto 15px;
  1012. }
  1013.  
  1014. .tumblr-posts {
  1015. margin-bottom:8px;
  1016. }
  1017.  
  1018. .tumblr-posts a {
  1019. color: var(--bodyLinkColor);
  1020. font-size: 13px;
  1021. display:inline-block;
  1022. margin:0 5px 0 0;
  1023. cursor: pointer;
  1024. font-weight:bold;
  1025. }
  1026.  
  1027. .tumblr-posts a:hover {
  1028. color:var(--bodyLinkHoverColor);
  1029. }
  1030.  
  1031.  
  1032. .posts-container {
  1033. {block:ifPostsSize540px}
  1034. width: 570px;
  1035. {/block:ifPostsSize540px}
  1036. {block:ifPostsSize500px}
  1037. width: 530px;
  1038. {/block:ifPostsSize500px}
  1039. {block:ifPostsSize400px}
  1040. width: 430px;
  1041. {/block:ifPostsSize400px}
  1042. grid-area: posts;
  1043. }
  1044.  
  1045. .posts {
  1046. background:var(--postsBackgroundColor);
  1047. {block:ifPostsSize540px}
  1048. width: 100%;
  1049. max-width: 541px;
  1050. {/block:ifPostsSize540px}
  1051. {block:ifPostsSize500px}
  1052. width: 100%;
  1053. max-width: 501px;
  1054. {/block:ifPostsSize500px}
  1055. {block:ifPostsSize400px}
  1056. width: 100%;
  1057. max-width:400px;
  1058. {/block:ifPostsSize400px}
  1059. margin:100px auto;
  1060. text-align:var(--postsTextPosition);
  1061. padding: 10px;
  1062.  
  1063. {block:ifPostsBorders}
  1064. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  1065. {/block:ifPostsBorders}
  1066.  
  1067. {block:ifBoxShadow}
  1068. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  1069. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  1070. {/block:ifBoxShadow}
  1071. }
  1072.  
  1073. .posts:first-child {
  1074. margin:50px auto 50px;
  1075. }
  1076.  
  1077. .posts img {
  1078. max-width:100%;
  1079. display:block;
  1080. height:auto;
  1081. }
  1082.  
  1083. .posts b, strong {
  1084. font-weight:var(--boldFontWeight);
  1085. }
  1086.  
  1087.  
  1088. /* photosets */
  1089. [photoset-layout] {
  1090. display: grid;
  1091. grid-template-columns: repeat(6, 1fr);
  1092. {block:ifPostsSize540px}
  1093. grid-gap: 4.5px;
  1094. {/block:ifPostsSize540px}
  1095. {block:ifPostsSize500px}
  1096. grid-gap: 9.5px;
  1097. {/block:ifPostsSize500px}
  1098. {block:ifPostsSize400px}
  1099. grid-gap: 4px;
  1100. {/block:ifPostsSize400px}
  1101. }
  1102.  
  1103. [photoset-layout] img {
  1104. display: block;
  1105. height: 100%;
  1106. width: 100%;
  1107. -o-object-fit: cover;
  1108. object-fit: cover;
  1109. }
  1110.  
  1111. .photoset-grid {
  1112. {block:ifPostsSize540px}
  1113. max-width: 540px;
  1114. {/block:ifPostsSize540px}
  1115. {block:ifPostsSize500px}
  1116. max-width: 500px;
  1117. {/block:ifPostsSize500px}
  1118. {block:ifPostsSize400px}
  1119. max-width:400px;
  1120. {/block:ifPostsSize400px}
  1121. }
  1122.  
  1123. .photoset-grid div {
  1124. cursor: pointer;
  1125. }
  1126.  
  1127.  
  1128. /* captions & blockquote */
  1129. .tumblr_blog {
  1130. display:inline-block;
  1131. line-height:var(--bodyLineHeight);
  1132. margin-right:2px;
  1133. text-transform:lowercase;
  1134. font-family: var(--bodyFont), Arial, sans-serif;
  1135. font-size:var(--bodyFontSize);
  1136. color:var(--bodyLinkColor);
  1137. font-weight:var(--boldFontWeight);
  1138. }
  1139.  
  1140. .tumblr_blog a {
  1141. color:var(--bodyLinkColor);
  1142. font-weight:var(--boldFontWeight);
  1143. vertical-align:bottom;
  1144.  
  1145. }
  1146.  
  1147. .tumblr_blog a:hover {
  1148. text-decoration:none;
  1149. color:var(--bodyLinkHoverColor);
  1150. }
  1151.  
  1152. /* old captions style */
  1153. {block:ifNotTumblrCaptions}
  1154. blockquote {
  1155. border-left:1px solid var(--bordersColor);
  1156. padding-left: 15px;
  1157. margin: 10px 10px;
  1158. }
  1159. {/block:ifNotTumblrCaptions}
  1160.  
  1161.  
  1162. /* tumblr's dashboad captions style */
  1163. {block:ifTumblrCaptions}
  1164. blockquote {
  1165. border-left:0px solid;
  1166. padding-left: 0px;
  1167. margin: 0px;
  1168. }
  1169. {/block:ifTumblrCaptions}
  1170.  
  1171.  
  1172. /* custom captions icons */
  1173. {block:ifCustomCaptionIcon}
  1174. .caption-user .feather {
  1175. display:inline-block;
  1176. vertical-align: middle;
  1177. width:var(--bodyFontSize);
  1178. height:var(--bodyFontSize);
  1179. margin-right: 5px;
  1180. }
  1181. {/block:ifCustomCaptionIcon}
  1182.  
  1183. .caption-user .feather {
  1184. {block:ifNotCustomCaptionIcon}
  1185. display:none;
  1186. {/block:ifNotCustomCaptionIcon}
  1187. transition:var(--transitions);
  1188. }
  1189.  
  1190. .caption-user {
  1191. display: inline-block;
  1192. vertical-align: middle;
  1193. font-weight:var(--boldFontWeight);
  1194. padding-bottom: 2px;
  1195. }
  1196.  
  1197. .caption-user a::after {
  1198. content:none;
  1199. }
  1200.  
  1201. .deactive::after {
  1202. content: '(deactivated)';
  1203. margin-left: 1em;
  1204. opacity: 0.75;
  1205. color: var(--bodyTextColor);
  1206. }
  1207.  
  1208.  
  1209. .caption-wrapper {
  1210. border:0px solid blue;
  1211. }
  1212.  
  1213. .caption, figcaption {
  1214. margin: 15px auto;
  1215. }
  1216.  
  1217. /* captions links */
  1218. .caption a, .caption-content a, figcaption a {
  1219. color:var(--bodyLinkColor);
  1220. }
  1221.  
  1222. .caption a:hover, .caption-content a:hover, figcaption a:hover {
  1223. color:var(--bodyLinkHoverColor);
  1224. }
  1225.  
  1226. figure {
  1227. display:block;
  1228. }
  1229.  
  1230. figure.tmblr-full {
  1231. margin-bottom:5px;
  1232. }
  1233.  
  1234. /* post info */
  1235. .date {
  1236. margin: 10px 0 0;
  1237. }
  1238.  
  1239. .date-content {
  1240. display:flex;
  1241. align-items:center;
  1242. flex-wrap: wrap;
  1243. justify-content:var(--dateTextPosition);
  1244. }
  1245.  
  1246. .date-links {
  1247. margin-right:15px;
  1248. font-weight:var(--dateFontWeight);
  1249. color:var(--bodyTextColor);
  1250. font-size:var(--dateFontSize);
  1251. text-transform: var(--dateTextTransform);
  1252. }
  1253.  
  1254. .date-links:last-child {
  1255. margin-right:0px;
  1256. }
  1257.  
  1258. .date-links a {
  1259. font-size:var(--dateFontSize);
  1260. font-style:var(--dateFontStyle);
  1261. color:var(--dateLinkColor);
  1262. }
  1263.  
  1264. .date-links a:hover {
  1265. color:var(--bodyLinkHoverColor);
  1266. }
  1267.  
  1268. /* like text */
  1269. .like-b {
  1270. position:relative;
  1271. display:inline-block;
  1272. height:1em;
  1273. line-height:1.5em;
  1274. padding: 0 1px;
  1275. }
  1276.  
  1277. .like-b .like_button iframe {
  1278. position:absolute;
  1279. top:0;
  1280. left:0;
  1281. bottom:0;
  1282. right:0;
  1283. z-index:2;
  1284. opacity:0;
  1285. }
  1286.  
  1287. .like-b .liked + .b {
  1288. color: var(--likedLinkColor);
  1289. font-weight:var(--boldFontWeight);
  1290. }
  1291.  
  1292. .like-b .liked + .b:after {
  1293. content:'d';
  1294. }
  1295.  
  1296. .like-b a:hover {
  1297. color:var(--bodyLinkHoverColor);
  1298.  
  1299. }
  1300.  
  1301. /* tags */
  1302. .tags {
  1303. text-align: var(--tagsTextPosition);
  1304. text-transform: var(--tagsTextTransform);
  1305. font-style:var(--tagsFontStyle);
  1306. font-size:var(--tagsFontSize);
  1307. word-wrap:break-word;
  1308. margin:3px 0 0;
  1309. }
  1310.  
  1311. .tags a {
  1312. font-weight:var(--tagsFontWeight);
  1313. color:var(--tagsLinkColor);
  1314. margin-right:10px;
  1315. }
  1316.  
  1317. .tags a:last-child{
  1318. margin-right:0px;
  1319. }
  1320.  
  1321. .tags a:first-child {
  1322. margin-left:0px;
  1323. }
  1324.  
  1325. .tags a:hover {
  1326. color:var(--bodyLinkHoverColor);
  1327. }
  1328.  
  1329. /* lists */
  1330. ul {
  1331. margin:15px 0;
  1332. padding: 0;
  1333. list-style:none;
  1334. }
  1335.  
  1336. ul li {
  1337. margin:5px 15px;
  1338. list-style:none;
  1339. }
  1340.  
  1341. ul li::before {
  1342. content: '\e08f';
  1343. font-family:'saturnicons';
  1344. font-size:calc(var(--bodyFontSize) - 50%);
  1345. bottom:0.5px;
  1346. margin-right:7px;
  1347. display:inline-block;
  1348. vertical-align:middle;
  1349. position:relative;
  1350. color: var(--bodyLinkColor);
  1351. }
  1352.  
  1353. ol {
  1354. padding: 0 30px;
  1355. }
  1356.  
  1357. ol li {
  1358. list-style-type: decimal;
  1359. }
  1360.  
  1361. /* quote */
  1362. .quote {
  1363. font-size:var(--postsTitlesFontSize);
  1364. text-transform:var(--postsTitlesTextTransform);
  1365. color:var(--boldColor);
  1366. font-weight:var(--boldFontWeight);
  1367. text-align:var(--postsTextPosition);
  1368. }
  1369.  
  1370. .quote-source::before {
  1371. content: '';
  1372. width: 15px;
  1373. height: 1px;
  1374. margin-right:10px;
  1375. display:inline-block;
  1376. vertical-align:middle;
  1377. position:relative;
  1378. background-color: var(--bordersColor);
  1379. }
  1380.  
  1381. /* link */
  1382. .link-image img {
  1383. -o-object-fit: cover;
  1384. object-fit: cover;
  1385. margin-bottom:5px;
  1386. }
  1387.  
  1388. .link {
  1389. font-weight:var(--boldFontWeight);
  1390. color:var(--boldColor);
  1391. font-size:var(--postsTitlesFontSize);
  1392. text-align:var(--postsTextPosition);
  1393. }
  1394.  
  1395. /* chat */
  1396. .label {
  1397. font-weight:var(--boldFontWeight);
  1398. color:var(--boldColor);
  1399. }
  1400.  
  1401. .line {
  1402. padding: 0px 0px 5px;
  1403. margin: 0px 0px 5px;
  1404. }
  1405.  
  1406.  
  1407. p.npf_chat {
  1408. font-size:var(--bodyFontSize);
  1409. font-family: var(--bodyFont), Arial, sans-serif;
  1410. list-style:none;
  1411. }
  1412.  
  1413. /* asks */
  1414. .clearfix::before, .clearfix::after{
  1415. content:'';
  1416. clear:both;
  1417. display:table;
  1418. }
  1419.  
  1420. .ask-user {
  1421. color:var(--bodyLinkColor);
  1422. font-weight:var(--boldFontWeight);
  1423. text-transform:lowercase;
  1424. }
  1425.  
  1426. .ask-user a {
  1427. color:var(--bodyLinkColor);
  1428. font-weight:var(--boldFontWeight);
  1429. }
  1430.  
  1431. .ask-user a:hover {
  1432. color:var(--bodyLinkHoverColor);
  1433. }
  1434.  
  1435. .ask-question {
  1436. position: relative;
  1437. }
  1438.  
  1439. .ask-question p {
  1440. margin: 0 0 5px;
  1441. }
  1442.  
  1443. .ask .feather {
  1444. width:var(--bodyFontSize);
  1445. height:var(--bodyFontSize);
  1446. stroke:var(--bodyLinkColor);
  1447. display:inline-block;
  1448. vertical-align: middle;
  1449. margin-right: 10px;
  1450. float:left;
  1451. margin-top: 2px;
  1452. }
  1453.  
  1454. .ask-answer.caption-content::after {
  1455. content: '';
  1456. height: 0px;
  1457. }
  1458.  
  1459. /* video */
  1460. .video {
  1461. {block:ifPostsSize540px}
  1462. width:540px;
  1463. {/block:ifPostsSize540px}
  1464. {block:ifPostsSize500px}
  1465. width:500px;
  1466. {/block:ifPostsSize500px}
  1467. {block:ifPostsSize400px}
  1468. width:400px;
  1469. {/block:ifPostsSize400px}
  1470. }
  1471.  
  1472.  
  1473. {block:if400pxposts}
  1474. iframe#youtube_iframe {
  1475. width: 400px;
  1476. height: 280px;
  1477. border-top-width: 0px;
  1478. border-right-width: 0px;
  1479. border-bottom-width: 0px;
  1480. border-left-width: 0px;
  1481. }
  1482. {/block:if400pxposts}
  1483.  
  1484. /*audio */
  1485. .audio {
  1486. display:flex;
  1487. {block:ifPostsBorders}
  1488. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  1489. {/block:ifPostsBorders}
  1490. align-items: center;
  1491. }
  1492.  
  1493.  
  1494. .album-art {
  1495. z-index: 1;
  1496. display: inline-block;
  1497. vertical-align: middle;
  1498. float: left;
  1499. width: 100px;
  1500. height: 100px;
  1501. }
  1502.  
  1503. .button {
  1504. width: 30px;
  1505. height: 30px;
  1506. overflow: hidden;
  1507. position: relative;
  1508. z-index: 2;
  1509. margin: 7px;
  1510. }
  1511.  
  1512. .audiobox {
  1513. background-color: #f2f2f2;
  1514. z-index: 3;
  1515. position: absolute;
  1516. margin: 28px;
  1517. border-radius: 50%;
  1518. }
  1519.  
  1520. .audio_trackinfo {
  1521. max-height: 74px;
  1522. min-height: 74px;
  1523. margin-left:15px;
  1524. display: flex;
  1525. flex: 4;
  1526. align-items: flex-start;
  1527. justify-content: center;
  1528. flex-direction: column;
  1529. padding: 5px;
  1530. background: var(--postsBackgroundColor);
  1531. color: var(--bodyTextColor);
  1532. }
  1533.  
  1534. .audio_trackname {
  1535. font-weight:var(--boldFontWeight);
  1536. color:var(--boldColor);
  1537. text-align:var(--postsTextPosition);
  1538. font-size:16px;
  1539. }
  1540.  
  1541.  
  1542. /* postnotes */
  1543. .post-notes {
  1544. {block:ifPostsSize540px}
  1545. width: 100%;
  1546. max-width: 540px;
  1547. {/block:ifPostsSize540px}
  1548. {block:ifPostsSize500px}
  1549. width: 100%;
  1550. max-width: 500px;
  1551. {/block:ifPostsSize500px}
  1552. {block:ifPostsSize400px}
  1553. width: 100%;
  1554. max-width:400px;
  1555. {/block:ifPostsSize400px}
  1556. margin-top:25px;
  1557. padding-top: 15px;
  1558. list-style-type: none;
  1559. font-family: var(--bodyFont), Arial, sans-serif;
  1560. font-size:var(--bodyFontSize);
  1561. color:var(--bodyTextColor);
  1562. background-color:var(--postsBackgroundColor);
  1563. border-top:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  1564. text-align:center;
  1565. }
  1566.  
  1567. .post-notes ol li, .post-notes ul li {
  1568. list-style-type: none;
  1569. margin:0;
  1570. line-height: calc(var(--bodyLineHeight) + 5px);
  1571. }
  1572.  
  1573. .post-notes ol li.like::before {
  1574. content: '\e12c';
  1575. font-family:'saturnicons';
  1576. font-size:calc(var(--bodyFontSize) - 40%);
  1577. bottom:0.5px;
  1578. margin-right:7px;
  1579. display:inline-block;
  1580. vertical-align:middle;
  1581. position:relative;
  1582. color: var(--bodyLinkColor);
  1583. }
  1584.  
  1585. .post-notes ol li.reblog::before {
  1586. content: '\e1f5';
  1587. font-family:'saturnicons';
  1588. font-size:calc(var(--bodyFontSize) - 40%);
  1589. bottom:0.5px;
  1590. margin-right:7px;
  1591. display:inline-block;
  1592. vertical-align:middle;
  1593. position:relative;
  1594. color: var(--bodyLinkColor);
  1595. }
  1596.  
  1597. .post-notes ol li.original_post::before {
  1598. content: '\e213';
  1599. font-family:'saturnicons';
  1600. font-size:calc(var(--bodyFontSize) - 40%);
  1601. bottom:0.5px;
  1602. margin-right:7px;
  1603. display:inline-block;
  1604. vertical-align:middle;
  1605. position:relative;
  1606. color: var(--bodyLinkColor);
  1607. }
  1608.  
  1609.  
  1610. .post-notes ol li:hover:before {
  1611. color:var(--bodyLinkHoverColor);
  1612. }
  1613.  
  1614. .post-notes ol li .more_notes_link a::before {
  1615. content: '';
  1616. }
  1617.  
  1618.  
  1619. ol.notes {
  1620. list-style:none;
  1621. color:var(--bodyTextColor);
  1622. padding:0;
  1623. }
  1624.  
  1625. ol.notes img {
  1626. display: none;
  1627. }
  1628.  
  1629. /* mobile */
  1630. @media only screen and (max-width: 720px) {
  1631.  
  1632. /*container // mobile */
  1633. .container {
  1634. width: 90%;
  1635. height: 100vh;
  1636. display:flex;
  1637. flex-wrap:wrap;
  1638. justify-content: space-around;
  1639. align-items: flex-start;
  1640. margin: auto;
  1641. }
  1642.  
  1643.  
  1644. /* sidebar // mobile */
  1645. .sidebar {
  1646. position:relative;
  1647. z-index:9999;
  1648. }
  1649.  
  1650.  
  1651. /* sidebar-icon // mobile */
  1652. .sidebar-icon {
  1653. display:none;
  1654. }
  1655.  
  1656.  
  1657. /* sidebar-content // mobile */
  1658. .sidebar-content {
  1659. width: 90%;
  1660. }
  1661.  
  1662.  
  1663. /* pagination // mobile */
  1664. .pagination{
  1665. width: 90%;
  1666. }
  1667.  
  1668. .pagination-content {
  1669. width: 90%;
  1670. }
  1671.  
  1672.  
  1673. /* posts-container // mobile */
  1674. .posts-container {
  1675. width:100%;
  1676. }
  1677.  
  1678. /* posts // mobile */
  1679. .posts {
  1680. width: 90%;
  1681. }
  1682.  
  1683. /* posts // mobile */
  1684. article {
  1685. margin:100px auto;
  1686. }
  1687. }
  1688. /* end mobile */
  1689.  
  1690.  
  1691.  
  1692.  
  1693. /* DO NOT REMOVE */
  1694. .mcredito {
  1695. position:fixed;
  1696. right:5px;
  1697. bottom:10px;
  1698. padding:8px 12px;
  1699. }
  1700.  
  1701. .mcredito a {
  1702. margin:0;
  1703. font-weight:var(--boldFontWeight);
  1704. text-transform:lowercase;
  1705. text-align:center;
  1706. color:var(--sidebarLinksIconAndFontColor);
  1707. }
  1708.  
  1709. .mcredito a:hover {
  1710. color:var(--bodyLinkHoverColor);
  1711. }
  1712.  
  1713.  
  1714.  
  1715. {block:ifNotDisableSwitchThemeColor}
  1716. /* css for dark theme */
  1717. .theme-switch-wrapper {
  1718. padding: 10px;
  1719. }
  1720.  
  1721. .theme-switch input {
  1722. display: none;
  1723. }
  1724.  
  1725. .slider svg {
  1726. position: absolute;
  1727. width: calc(var(--bodyFontSize) + 2px);
  1728. height: calc(var(--bodyFontSize) + 2px);
  1729. stroke: var(--bodyTextColor);
  1730. cursor: pointer;
  1731. }
  1732. {/block:ifNotDisableSwitchThemeColor}
  1733.  
  1734. {CustomCSS}
  1735. </style>
  1736. </head>
  1737.  
  1738.  
  1739. <body>
  1740.  
  1741. <!-- container -->
  1742. <div class="container">
  1743. <!-- sidebar -->
  1744. <header class="sidebar">
  1745. <div class="sidebar-content">
  1746. {block:IfSidebarIconImage}
  1747. <div class="sidebar-icon">
  1748. <img src="{image:Sidebar Icon Image}" />
  1749. </div>
  1750. {/block:IfSidebarIconImage}
  1751. <div class="sidebar-right-content">
  1752. <div class="title">
  1753. <span>{title}</span>
  1754.  
  1755. {block:IfSidebarTitleUrl}
  1756. <span>@{Name}</span>
  1757. {/block:IfSidebarTitleUrl}
  1758. </div>
  1759.  
  1760. <div class="description">
  1761. {Description}
  1762. </div>
  1763. <!-- navigation links -->
  1764. <nav class="navigation">
  1765. <ul>
  1766. <li>
  1767. {block:IfSidebarLinksIcons}
  1768. <a href="{text:Index URL}" title="{text:Index Text}">
  1769. <i data-feather="{text:Index Icon}" class="feather"></i>
  1770. </a>
  1771. {/block:IfSidebarLinksIcons}
  1772.  
  1773. {block:IfNotSidebarLinksIcons}
  1774. <a href="{text:Index URL}">
  1775. {text:Index Text}
  1776. </a>
  1777. {/block:IfNotSidebarLinksIcons}
  1778. </li>
  1779.  
  1780. <li>
  1781. {block:IfSidebarLinksIcons}
  1782. <a href="{text:Ask URL}" title="{text:Ask Text}">
  1783. <i data-feather="{text:Ask Icon}" class="feather"></i>
  1784. </a>
  1785. {/block:IfSidebarLinksIcons}
  1786.  
  1787. {block:IfNotSidebarLinksIcons}
  1788. <a href="{text:Ask URL}">
  1789. {text:Ask Text}
  1790. </a>
  1791. {/block:IfNotSidebarLinksIcons}
  1792. </li>
  1793.  
  1794. {block:ifSidebarLink1}
  1795. <li>
  1796. {block:IfSidebarLinksIcons}
  1797. <a href="{text:Sidebar Link 1 URL}" title="{text:Sidebar Link 1 Text}">
  1798. <i data-feather="{text:Sidebar Link 1 Icon}" class="feather"></i>
  1799. </a>
  1800. {/block:IfSidebarLinksIcons}
  1801.  
  1802. {block:IfNotSidebarLinksIcons}
  1803. <a href="{text:Sidebar Link 1 URL}">
  1804. {text:Sidebar Link 1 Text}
  1805. </a>
  1806. {/block:IfNotSidebarLinksIcons}
  1807. </li>
  1808. {/block:ifSidebarLink1}
  1809.  
  1810. {block:ifSidebarLink2}
  1811. <li>
  1812. {block:IfSidebarLinksIcons}
  1813. <a href="{text:Sidebar Link 2 URL}" title="{text:Sidebar Link 2 Text}">
  1814. <i data-feather="{text:Sidebar Link 2 Icon}" class="feather"></i>
  1815. </a>
  1816. {/block:IfSidebarLinksIcons}
  1817.  
  1818. {block:IfNotSidebarLinksIcons}
  1819. <a href="{text:Sidebar Link 2 URL}">
  1820. {text:Sidebar Link 2 Text}
  1821. </a>
  1822. {/block:IfNotSidebarLinksIcons}
  1823. </li>
  1824. {/block:ifSidebarLink2}
  1825.  
  1826. {block:ifSidebarLink3}
  1827. <li>
  1828. {block:IfSidebarLinksIcons}
  1829. <a href="{text:Sidebar Link 3 URL}" title="{text:Sidebar Link 3 Text}">
  1830. <i data-feather="{text:Sidebar Link 3 Icon}" class="feather"></i>
  1831. </a>
  1832. {/block:IfSidebarLinksIcons}
  1833.  
  1834. {block:IfNotSidebarLinksIcons}
  1835. <a href="{text:Sidebar Link 3 URL}">
  1836. {text:Sidebar Link 3 Text}
  1837. </a>
  1838. {/block:IfNotSidebarLinksIcons}
  1839. </li>
  1840. {/block:ifSidebarLink3}
  1841.  
  1842. {block:ifSidebarLink4}
  1843. <li>
  1844. {block:IfSidebarLinksIcons}
  1845. <a href="{text:Sidebar Link 4 URL}" title="{text:Sidebar Link 4 Text}">
  1846. <i data-feather="{text:Sidebar Link 4 Icon}" class="feather"></i>
  1847. </a>
  1848. {/block:IfSidebarLinksIcons}
  1849.  
  1850. {block:IfNotSidebarLinksIcons}
  1851. <a href="{text:Sidebar Link 4 URL}">
  1852. {text:Sidebar Link 4 Text}
  1853. </a>
  1854. {/block:IfNotSidebarLinksIcons}
  1855. </li>
  1856. {/block:ifSidebarLink4}
  1857.  
  1858. {block:ifSidebarLink5}
  1859. <li>
  1860. {block:IfSidebarLinksIcons}
  1861. <a href="{text:Sidebar Link 5 URL}" title="{text:Sidebar Link 5 Text}">
  1862. <i data-feather="{text:Sidebar Link 5 Icon}" class="feather"></i>
  1863. </a>
  1864. {/block:IfSidebarLinksIcons}
  1865.  
  1866. {block:IfNotSidebarLinksIcons}
  1867. <a href="{text:Sidebar Link 5 URL}">
  1868. {text:Sidebar Link 5 Text}
  1869. </a>
  1870. {/block:IfNotSidebarLinksIcons}
  1871. </li>
  1872. {/block:ifSidebarLink5}
  1873.  
  1874. {block:ifSidebarLink6}
  1875. <li>
  1876. {block:IfSidebarLinksIcons}
  1877. <a href="{text:Sidebar Link 6 URL}" title="{text:Sidebar Link 6 Text}">
  1878. <i data-feather="{text:Sidebar Link 6 Icon}" class="feather"></i>
  1879. </a>
  1880. {/block:IfSidebarLinksIcons}
  1881.  
  1882. {block:IfNotSidebarLinksIcons}
  1883. <a href="{text:Sidebar Link 6 URL}">
  1884. {text:Sidebar Link 6 Text}
  1885. </a>
  1886. {/block:IfNotSidebarLinksIcons}
  1887. </li>
  1888. {/block:ifSidebarLink6}
  1889. </ul>
  1890. </nav>
  1891. </div>
  1892. </div>
  1893. </header>
  1894.  
  1895. <section class="posts-container">
  1896. <!-- posts -->
  1897. {block:Posts}
  1898. <!-- {block:NoRebloggedFrom}
  1899. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1900. {/block:NoRebloggedFrom} -->
  1901. {block:ContentSource}<!-- {SourceURL}
  1902. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1903. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1904. {/block:ContentSource}
  1905.  
  1906. <article class="{posttype}post posts">
  1907. <!-- pinned post -->
  1908. {block:PinnedPostLabel}
  1909. <div class="tumblr-posts">
  1910. <!-- <a href="{Permalink}">{PinnedPostLabel}</a> -->
  1911. <a href="{Permalink}" title="{PinnedPostLabel}" class="sf sf-push-pin-o"></a>
  1912. </div>
  1913. {/block:PinnedPostLabel}
  1914.  
  1915. <!-- text posts -->
  1916. {block:Text}
  1917. {block:Title}
  1918. <h1>{Title}</h1>
  1919. {/block:Title}
  1920.  
  1921. <!-- captions -->
  1922. {block:ifTumblrCaptions}
  1923. {block:Notreblog}
  1924. <div class="caption-wrapper">
  1925. <div class="caption">
  1926. <div class="caption-content">{Body}</div>
  1927. </div>
  1928. </div>
  1929. {/block:Notreblog}
  1930. {block:Rebloggedfrom}
  1931. <div class="caption-wrapper">
  1932. {block:Reblogs}
  1933. <div class="caption">
  1934. <div class="caption-user {block:IsDeactivated}deactive{/block:IsDeactivated}">
  1935. <a target="_blank" href="{Permalink}"><i data-feather="user" class="feather"></i>{Username}</a>
  1936. </div>
  1937. <div class="caption-content">{Body}</div>
  1938. </div>
  1939. {/block:Reblogs}
  1940. </div>
  1941. {/block:RebloggedFrom}
  1942. {/block:ifTumblrCaptions}
  1943.  
  1944. {block:ifNotTumblrCaptions}
  1945. <div class="caption caption-content">
  1946. {Body}
  1947. </div>
  1948. {/block:ifNotTumblrCaptions}
  1949. {/block:Text}
  1950.  
  1951. <!-- photo posts -->
  1952. {block:Photo}
  1953. <img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
  1954. {block:Caption}
  1955. {block:ifTumblrCaptions}
  1956. {block:Notreblog}
  1957. <div class="caption-wrapper">
  1958. <div class="caption">
  1959. <div class="caption-content">{Caption}</div>
  1960. </div>
  1961. </div>
  1962. {/block:Notreblog}
  1963. {block:Rebloggedfrom}
  1964. <div class="caption-wrapper">
  1965. {block:Reblogs}
  1966. <div class="caption">
  1967. <div class="caption-user {block:IsDeactivated}deactive{/block:IsDeactivated}">
  1968. <a target="_blank" href="{Permalink}"><i data-feather="user" class="feather"></i>{Username}</a>
  1969. </div>
  1970. <div class="caption-content">{Body}</div>
  1971. </div>
  1972. {/block:Reblogs}
  1973. </div>
  1974. {/block:RebloggedFrom}
  1975. {/block:ifTumblrCaptions}
  1976.  
  1977. {block:ifNotTumblrCaptions}
  1978. <div class="caption caption-content">
  1979. {Caption}
  1980. </div>
  1981. {/block:ifNotTumblrCaptions}
  1982. {/block:Caption}
  1983. {/block:Photo}
  1984.  
  1985. <!-- photoset -->
  1986. {block:Photoset}
  1987. <div class="photoset">
  1988. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  1989. </div>
  1990. {block:Caption}
  1991. {block:ifTumblrCaptions}
  1992. {block:Notreblog}
  1993. <div class="caption-wrapper">
  1994. <div class="caption">
  1995. <div class="caption-content">{Caption}</div>
  1996. </div>
  1997. </div>
  1998. {/block:Notreblog}
  1999. {block:Rebloggedfrom}
  2000. <div class="caption-wrapper">
  2001. {block:Reblogs}
  2002. <div class="caption">
  2003. <div class="caption-user {block:IsDeactivated}deactive{/block:IsDeactivated}">
  2004. <a target="_blank" href="{Permalink}"><i data-feather="user" class="feather"></i>{Username}</a>
  2005. </div>
  2006. <div class="caption-content">{Body}</div>
  2007. </div>
  2008. {/block:Reblogs}
  2009. </div>
  2010. {/block:RebloggedFrom}
  2011. {/block:ifTumblrCaptions}
  2012.  
  2013. {block:ifNotTumblrCaptions}
  2014. <div class="caption caption-content">
  2015. {Caption}
  2016. </div>
  2017. {/block:ifNotTumblrCaptions}
  2018. {/block:Caption}
  2019. {/block:Photoset}
  2020.  
  2021. <!-- quote posts -->
  2022. {block:Quote}
  2023. <div class="quote">
  2024. "{Quote}"
  2025. </div>
  2026. {block:Source}
  2027. <div class="quote-source">
  2028. {Source}
  2029. </div>
  2030. {/block:Source}
  2031. {/block:Quote}
  2032.  
  2033. <!-- chat posts -->
  2034. {block:Chat}
  2035. {block:Title}
  2036. <h2>{Title}</h2>
  2037. {/block:Title}
  2038. <div class="chat">
  2039. {block:Lines}
  2040. {block:Label}
  2041. <div class="label">{Label}</div>
  2042. {/block:Label}
  2043. <div class="line">{Line}</div>
  2044. {/block:Lines}
  2045. </div>
  2046. {/block:Chat}
  2047.  
  2048. <!--Link posts-->
  2049. {block:Link}
  2050. {block:Thumbnail}
  2051. <div class="link-image">
  2052. <img src="{Thumbnail-HighRes}">
  2053. </div>
  2054. {/block:Thumbnail}
  2055. <div class="link-content">
  2056. <a href="{URL}" style="border:none" class="link" {Target}>{Name} </a>
  2057. {block:Excerpt}<div class="link-excerpt">{Excerpt}</div>{/block:Excerpt}
  2058. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  2059. </div>
  2060. {block:ifTumblrCaptions}
  2061. {block:Description}
  2062. {block:Notreblog}
  2063. <div class="caption-wrapper">
  2064. <div class="caption">
  2065. <div class="caption-content">{Description}</div>
  2066. </div>
  2067. </div>
  2068. {/block:Notreblog}
  2069. {/block:Description}
  2070. {block:Rebloggedfrom}
  2071. <div class="caption-wrapper">
  2072. {block:Reblogs}
  2073. <div class="caption">
  2074. <div class="caption-user {block:IsDeactivated}deactive{/block:IsDeactivated}">
  2075. <a target="_blank" href="{Permalink}"><i data-feather="user" class="feather"></i>{Username}</a>
  2076. </div>
  2077. <div class="caption-content">{Body}</div>
  2078. </div>
  2079. {/block:Reblogs}
  2080. </div>
  2081. {/block:RebloggedFrom}
  2082. {/block:ifTumblrCaptions}
  2083.  
  2084. {block:ifNotTumblrCaptions}
  2085. <div class="caption caption-content">
  2086. {Description}
  2087. </div>
  2088. {/block:ifNotTumblrCaptions}
  2089. {/block:Link}
  2090.  
  2091. <!-- video posts -->
  2092. {block:Video}
  2093. <div class="video">{Video-500}</div>
  2094. {block:Caption}
  2095. {block:ifTumblrCaptions}
  2096. {block:Notreblog}
  2097. <div class="caption-wrapper">
  2098. <div class="caption">
  2099. <div class="caption-content">{Caption}</div>
  2100. </div>
  2101. </div>
  2102. {/block:Notreblog}
  2103. {block:Rebloggedfrom}
  2104. <div class="caption-wrapper">
  2105. {block:Reblogs}
  2106. <div class="caption">
  2107. <div class="caption-user {block:IsDeactivated}deactive{/block:IsDeactivated}">
  2108. <a target="_blank" href="{Permalink}"><i data-feather="user" class="feather"></i>{Username}</a>
  2109. </div>
  2110. <div class="caption-content">{Body}</div>
  2111. </div>
  2112. {/block:Reblogs}
  2113. </div>
  2114. {/block:RebloggedFrom}
  2115. {/block:ifTumblrCaptions}
  2116.  
  2117. {block:ifNotTumblrCaptions}
  2118. <div class="caption caption-content">
  2119. {Caption}
  2120. </div>
  2121. {/block:ifNotTumblrCaptions}
  2122. {/block:Caption}
  2123. {/block:Video}
  2124.  
  2125. <!-- audio posts -->
  2126. {block:Audio}
  2127. <div class="audio">
  2128. <div class="audiobox"><div class="button">
  2129. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  2130. </div></div>
  2131. <div class="album-art">
  2132. {block:AlbumArt}
  2133. <img src="{AlbumArtURL}">
  2134. {/block:AlbumArt}
  2135. </div>
  2136.  
  2137. {block:TrackName}
  2138. <div class="audio_trackinfo">
  2139. <div class="audio_trackname">{TrackName}</div>
  2140. {block:Artist}<div class="audio_artist">{Artist}</div>{/block:Artist}
  2141. {block:Album}<div class="audio_album">{Album}</div>{/block:Album}
  2142. </div>
  2143. {/block:TrackName}
  2144. </div>
  2145.  
  2146. {block:Caption}
  2147. {block:ifTumblrCaptions}
  2148. {block:Notreblog}
  2149. <div class="caption-wrapper">
  2150. <div class="caption">
  2151. <div class="caption-content">{Caption}</div>
  2152. </div>
  2153. </div>
  2154. {/block:Notreblog}
  2155. {block:Rebloggedfrom}
  2156. <div class="caption-wrapper">
  2157. {block:Reblogs}
  2158. <div class="caption">
  2159. <div class="caption-user {block:IsDeactivated}deactive{/block:IsDeactivated}">
  2160. <a target="_blank" href="{Permalink}"><i data-feather="user" class="feather"></i>{Username}</a>
  2161. </div>
  2162. <div class="caption-content">{Body}</div>
  2163. </div>
  2164. {/block:Reblogs}
  2165. </div>
  2166. {/block:RebloggedFrom}
  2167. {/block:ifTumblrCaptions}
  2168.  
  2169. {block:ifNotTumblrCaptions}
  2170. <div class="caption caption-content">
  2171. {Caption}
  2172. </div>
  2173. {/block:ifNotTumblrCaptions}
  2174. {/block:Caption}
  2175. {/block:Audio}
  2176.  
  2177. <!-- ask posts -->
  2178. {block:Answer}
  2179. <div class="ask">
  2180. <i data-feather="mail" class="feather"></i>
  2181. <span class="ask-question">
  2182. {Question}
  2183. </span>
  2184. <span class="clearfix"></span>
  2185. <i data-feather="message-circle" class="feather"></i>
  2186. <span class="ask-user">
  2187. {lang:Asked by Asker 2}
  2188. </span>
  2189. </div>
  2190. <div class="caption-wrapper">
  2191. <div class="caption">
  2192. {block:Answerer}
  2193. {block:ifTumblrCaptions}
  2194. <div class="caption-user {block:IsDeactivated}deactive{/block:IsDeactivated}">
  2195. <a target="_blank" href="{Permalink}"><i data-feather="user" class="feather"></i>{Answerer}</a>
  2196. </div>
  2197. {/block:ifTumblrCaptions}
  2198. <div class="ask-answer caption-content">
  2199. {Answer}
  2200. </div>
  2201. {/block:Answerer}
  2202. </div>
  2203. </div>
  2204. {block:ifTumblrCaptions}
  2205. {block:NotReblog}
  2206. <div class="caption-wrapper">
  2207. <div class="caption">
  2208. <div class="caption-content">{Replies}</div>
  2209. </div>
  2210. </div>
  2211. {/block:NotReblog}
  2212. {block:Rebloggedfrom}
  2213. <div class="caption-wrapper">
  2214. {block:Reblogs}
  2215. <div class="caption">
  2216. <div class="caption-user {block:IsDeactivated}deactive{/block:IsDeactivated}">
  2217. <a target="_blank" href="{Permalink}"><i data-feather="user" class="feather"></i>{Username}</a>
  2218. </div>
  2219. <div class="caption-content">{Body}</div>
  2220. </div>
  2221. {/block:Reblogs}
  2222. </div>
  2223. {/block:RebloggedFrom}
  2224. {/block:ifTumblrCaptions}
  2225.  
  2226. {block:ifNotTumblrCaptions}
  2227. <div class="caption caption-content">
  2228. {Replies}
  2229. </div>
  2230. {/block:ifNotTumblrCaptions}
  2231. {/block:Answer}
  2232.  
  2233. <!-- post info -->
  2234. {block:Date}
  2235. <div class="date">
  2236. <div class="date-content">
  2237. <div class="date-links">
  2238. <a href="{Permalink}">
  2239. {timeago}
  2240. </a>
  2241. </div>
  2242.  
  2243. {block:NoteCount}
  2244. <div class="date-links">
  2245. <span class="notecount">{NoteCountWithLabel}</span>
  2246. </div>
  2247. {/block:NoteCount}
  2248.  
  2249. {block:Permalink}
  2250. {block:RebloggedFrom}
  2251. <div class="date-links">
  2252. <a target="_blank" href="{ReblogParentURL}" title="{lang:Reblogged from} {ReblogParentName}">
  2253. {ReblogParentName}
  2254. </a>
  2255. </div>
  2256. {/block:RebloggedFrom}
  2257. {/block:Permalink}
  2258.  
  2259. {block:ContentSource}
  2260. <div class="date-links">
  2261. <a target="_blank" href="{SourceURL}" title="{lang:Originally from ReblogRootName}">
  2262. {SourceTitle}
  2263. </a>
  2264. </div>
  2265. {/block:ContentSource}
  2266.  
  2267. <div class="date-links">
  2268. <a target="_blank" href="{ReblogURL}" target="_blank" class="details">
  2269. reblog
  2270. </a>
  2271. </div>
  2272.  
  2273. <div class="date-links">
  2274. <a class="like-b" href="#">
  2275. {LikeButton}<span class="b">like</span>
  2276. </a>
  2277. </div>
  2278. </div>
  2279.  
  2280. <!-- tags -->
  2281. {block:HasTags}
  2282. <div class="tags">
  2283. {block:Tags}
  2284. <a target="_blank" href="{TagURL}">
  2285. #{Tag}</a>
  2286. {/block:Tags}
  2287. </div>
  2288. {/block:HasTags}
  2289. </div>
  2290. {/block:Date}
  2291. <!-- end post info -->
  2292.  
  2293. <!-- post note list -->
  2294. {block:PostNotes}
  2295. <div class="post-notes">
  2296. {PostNotes}
  2297. </div>
  2298. {/block:PostNotes}
  2299. </article> <!-- end posts -->
  2300. {/block:Posts}
  2301. </section> <!-- end post section -->
  2302.  
  2303.  
  2304.  
  2305. <!-- pagination -->
  2306. <footer class="pagination">
  2307. <div class="pagination-content">
  2308. {block:Pagination}
  2309. <span>
  2310. {block:previouspage}
  2311. <a href="{previouspage}">{lang:Previous page}</a> <span class="dot-separator"></span>
  2312. {/block:previouspage}
  2313. {block:nextpage}
  2314. <a href="{nextpage}">{lang:Next page}</a>
  2315. {/block:nextpage}
  2316. </span>
  2317. {/block:pagination}
  2318.  
  2319. {block:ifNotDisableSwitchThemeColor}
  2320. <div class="theme-switch-wrapper">
  2321. <label class="theme-switch" for="checkbox">
  2322. <input type="checkbox" id="checkbox" />
  2323. <div class="slider" title="Change Theme Color">
  2324. <!-- <i data-feather="sun" class="feather featherIcon"></i>
  2325. <i data-feather="moon" class="feather"></i> -->
  2326. </div>
  2327. </label>
  2328. </div>
  2329. {/block:ifNotDisableSwitchThemeColor}
  2330. <span>
  2331. <div class="scrolltop">
  2332. <a href="javascript:;" id="scrollToTop" title="Scroll to top"><i data-feather="arrow-up" class="feather"></i></a>
  2333. </div>
  2334. <a href="http://maziekeen.tumblr.com/" target="_blank">maziekeen</a>
  2335. </span>
  2336. </div>
  2337. </footer>
  2338. </div> <!-- end container -->
  2339.  
  2340. <!-- top right icon for custom tumblr controls -->
  2341. {block:ifCustomControls}
  2342. <div class="hcontrols"><i data-feather="more-horizontal" class="feather"></i></div>
  2343. {/block:ifCustomControls}
  2344.  
  2345.  
  2346. {block:ifNotDisableSwitchThemeColor}
  2347. <!-- scripts for dark theme -->
  2348. <script type="text/javascript">
  2349. // The icons
  2350. const sunIcon = '<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>';
  2351.  
  2352. const moonIcon = '<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>';
  2353.  
  2354. // Get the div where the icons will be added
  2355. const themeIcon = document.querySelector('.slider');
  2356.  
  2357. // Get the current theme from local storage
  2358. const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
  2359.  
  2360. // Get the theme toggle input
  2361. const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
  2362.  
  2363.  
  2364. // Check for saved user preference and set the icons for the respective theme accordingly
  2365. if (currentTheme === 'dark') {
  2366. document.documentElement.setAttribute('data-theme', currentTheme);
  2367. toggleSwitch.checked = true;
  2368. themeIcon.innerHTML = sunIcon;
  2369. } else {
  2370. document.documentElement.setAttribute('data-theme', currentTheme);
  2371. toggleSwitch.checked = false;
  2372. themeIcon.innerHTML = moonIcon;
  2373. }
  2374.  
  2375.  
  2376. // Function that will switch the theme based on the if the theme toggle is checked or not
  2377. function switchTheme(e) {
  2378. if (e.target.checked) {
  2379. document.documentElement.setAttribute('data-theme', 'dark');
  2380. localStorage.setItem('theme', 'dark');
  2381. themeIcon.innerHTML = sunIcon;
  2382. toggleSwitch.checked = true;
  2383. } else {
  2384. document.documentElement.setAttribute('data-theme', 'light');
  2385. localStorage.setItem('theme', 'light');
  2386. themeIcon.innerHTML = moonIcon;
  2387. toggleSwitch.checked = false;
  2388. }
  2389. }
  2390.  
  2391. // Add an event listener to the theme toggle, which will switch the theme
  2392. toggleSwitch.addEventListener('change', switchTheme, false);
  2393. </script>
  2394. {/block:ifNotDisableSwitchThemeColor}
  2395.  
  2396. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- for tooltips -->
  2397. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  2398. <script src="https://unpkg.com/popper.js@1"></script> <!-- tooltips -->
  2399. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <!-- tooltips -->
  2400. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script> <!-- resize videos -->
  2401. <script src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  2402. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet"> <!-- npf images readjustment -->
  2403. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script> <!-- npf images readjustment -->
  2404. <script src="//dl.dropbox.com/s/aqo7pinjzfub4tn/npf-legacy.js"></script> <!-- npf images readjustment -->
  2405. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script> <!-- smooth scroll -->
  2406.  
  2407. <script type="text/javascript">
  2408.  
  2409. // feather icons (custom icons)
  2410. feather.replace();
  2411.  
  2412. // custom notecount
  2413. var $container = $('.posts-container');
  2414. $container.find('.notecount').each(function(){
  2415. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  2416. if (n > 999) {
  2417. n = Math.floor(n / 100) / 10;
  2418. $(this).text(n + 'k notes');
  2419. }
  2420. });
  2421.  
  2422. // photosets lightbox
  2423. function gatherData(images, arr) {
  2424. for (let i = 0; i < images.length; i++) {
  2425. let currentData = {
  2426. "width": images[i].getAttribute('data-width'),
  2427. "height": images[i].getAttribute('data-height'),
  2428. "low_res": images[i].getAttribute('data-lowres'),
  2429. "high_res": images[i].getAttribute('data-highres')
  2430. };
  2431. arr.push(currentData);
  2432. }
  2433. }
  2434. function getIndex(elem) {
  2435. let i = 0;
  2436. while( (elem = elem.previousElementSibling) != null ) i++;
  2437. return i;
  2438. }
  2439. function lightbox(elem) {
  2440. let currentPhotoset = elem.parentNode;
  2441. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  2442. let data = [];
  2443. gatherData(photosetPhotos, data);
  2444. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  2445. }
  2446.  
  2447. // tooltips
  2448. tippy('a[title], span[title], div[title]', {
  2449. theme: 'custom',
  2450. arrow: false,
  2451. zIndex: 9999999999,
  2452. maxWidth: 300,
  2453.  
  2454. content(reference) {
  2455. const title = reference.getAttribute('title');
  2456. reference.removeAttribute('title');
  2457. return title;
  2458. },
  2459. });
  2460.  
  2461. // remove tumblr redirects script by magnusthemes@tumblr
  2462. $('a[href*="t.umblr.com/redirect"]').each(function(){
  2463. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  2464. var replaceURL = decodeURIComponent(originalURL);
  2465. $(this).attr("href", replaceURL);
  2466. });
  2467.  
  2468.  
  2469. </script>
  2470. </body>
  2471. </html>
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!