API tools faq
paste
Advertisement
sexycullen

theme 217

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