sexycullen

theme 215

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