API tools faq
paste
sexycullen

223 / vou terminar um dia :(

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