API tools faq
paste
sexycullen

theme 223 / atualizado

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