API tools faq
paste
plutoniumthm

Theme 04 - Vulcan

plutoniumthm
Aug 17th, 2019 (edited)
1,834
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!---
  5.  
  6. Vulcan
  7. astrocodes @ tumblr.com
  8.  
  9. -->
  10.  
  11. <meta name="viewport" content="width=device-width; initial-scale=1.0">
  12.  
  13. <meta name="color:Accent" content="#56beff">
  14. <meta name="color:Gradient 1" content="#56beff">
  15. <meta name="color:Gradient 2" content="#ba6ddf">
  16. <meta name="color:Dark Mode Text" content="#fff">
  17.  
  18. <meta name="if:Dark Mode" content="1">
  19. <meta name="if:Show Header Icon" content="1">
  20. <meta name="if:Footer Social Media Links" content="1">
  21.  
  22. <meta name="text:Your URL" content="yoururlhere">
  23. <meta name="text:Link One URL" content="/">
  24. <meta name="text:Link One Name" content="Link one">
  25. <meta name="text:Link Two URL" content="/">
  26. <meta name="text:Link Two Name" content="Link two">
  27. <meta name="text:Link Three URL" content="/">
  28. <meta name="text:Link Three Name" content="Link three">
  29. <meta name="text:Link Four URL" content="/">
  30. <meta name="text:Link Four Name" content="Link four">
  31. <meta name="text:Footer Social Link One URL" content="/">
  32. <meta name="text:Footer Social Link Two URL" content="/">
  33. <meta name="text:Footer Social Link Three URL" content="/">
  34. <meta name="text:Footer Social Link Four URL" content="/">
  35.  
  36. <meta name="select:Font" content="Overpass" title="Overpass">
  37. <meta name="select:Font" content="Nunito" title="Nunito">
  38. <meta name="select:Font" content="Fira Sans" title="Fira Sans">
  39. <meta name="select:Font" content="Roboto" title="Roboto">
  40. <meta name="select:Font" content="Open Sans" title="Open Sans">
  41. <meta name="select:Font" content="Barlow" title="Barlow">
  42. <meta name="select:Font" content="Share Tech Mono" title="Share Tech Mono">
  43. <meta name="select:Font" content="Roboto Mono" title="Roboto Mono">
  44.  
  45.  
  46. <meta name="select:Header Icon" content="fas fa-volcano" title="Volcano">
  47. <meta name="select:Header Icon" content="fas fa-apple-alt" title="Apple">
  48. <meta name="select:Header Icon" content="fal fa-atom" title="Atom">
  49. <meta name="select:Header Icon" content="fal fa-atom-alt" title="Atom 2">
  50. <meta name="select:Header Icon" content="fad fa-bacon" title="Bacon">
  51. <meta name="select:Header Icon" content="fad fa-bomb" title="Bomb">
  52. <meta name="select:Header Icon" content="fad fa-bong" title="Bong">
  53. <meta name="select:Header Icon" content="fas fa-bug" title="Bug">
  54. <meta name="select:Header Icon" content="fad fa-burrito" title="Burrito">
  55. <meta name="select:Header Icon" content="fad fa-campfire" title="Campfire">
  56. <meta name="select:Header Icon" content="fas fa-candy-cane" title="Candy Cane">
  57. <meta name="select:Header Icon" content="fad fa-carrot" title="Carrot">
  58. <meta name="select:Header Icon" content="fas fa-cat" title="Cat">
  59. <meta name="select:Header Icon" content="fad fa-cauldron" title="Cauldron">
  60. <meta name="select:Header Icon" content="fad fa-cheeseburger" title="Cheeseburger">
  61. <meta name="select:Header Icon" content="fad fa-cloud-drizzle" title="Drizzle">
  62. <meta name="select:Header Icon" content="fad fa-crow" title="Crow">
  63. <meta name="select:Header Icon" content="fal fa-egg-fried" title="Fried Egg">
  64. <meta name="select:Header Icon" content="fad fa-flask-potion" title="Potion">
  65. <meta name="select:Header Icon" content="far fa-flower-tulip" title="Flower">
  66. <meta name="select:Header Icon" content="fad fa-french-fries" title="French Fries">
  67. <meta name="select:Header Icon" content="fas fa-heart" title="Heart">
  68. <meta name="select:Header Icon" content="fad fa-hotdog" title="Hotdog">
  69. <meta name="select:Header Icon" content="fad fa-leaf-heart" title="Heart Leaf">
  70. <meta name="select:Header Icon" content="fas fa-lemon" title="Lemon">
  71. <meta name="select:Header Icon" content="fad fa-magic" title="Magic">
  72. <meta name="select:Header Icon" content="fad fa-meteor" title="Meteor">
  73. <meta name="select:Header Icon" content="fad fa-moon-stars" title="Moon and Stars">
  74. <meta name="select:Header Icon" content="fad fa-mountains" title="Mountains">
  75. <meta name="select:Header Icon" content="fad fa-narwhal" title="Narwhal">
  76. <meta name="select:Header Icon" content="far fa-paper-plane" title="Paper Plane">
  77. <meta name="select:Header Icon" content="far fa-pumpkin" title="Pumpkin">
  78. <meta name="select:Header Icon" content="far fa-rocket" title="Rocket">
  79. <meta name="select:Header Icon" content="fad fa-seedling" title="Seedling">
  80. <meta name="select:Header Icon" content="fal fa-space-shuttle" title="Space Shuttle">
  81. <meta name="select:Header Icon" content="fas fa-star" title="Star">
  82. <meta name="select:Header Icon" content="fas fa-stars" title="Stars">
  83. <meta name="select:Header Icon" content="fad fa-trees" title="Trees">
  84. <meta name="select:Header Icon" content="far fa-wheat" title="Wheat">
  85.  
  86.  
  87. <meta name="select:Link One Icon" content="far fa-user" title="User">
  88. <meta name="select:Link One Icon" content="far fa-ellipsis-h" title="Ellipsis">
  89. <meta name="select:Link One Icon" content="far fa-address-card" title="Info Card">
  90. <meta name="select:Link One Icon" content="far fa-bookmark" title="Bookmark">
  91. <meta name="select:Link One Icon" content="far fa-images" title="Photos">
  92. <meta name="select:Link One Icon" content="far fa-list-alt" title="List">
  93. <meta name="select:Link One Icon" content="far fa-paragraph" title="Paragraph">
  94. <meta name="select:Link One Icon" content="far fa-pen-fancy" title="Pen">
  95. <meta name="select:Link One Icon" content="far fa-pen-nib" title="Pen Nib">
  96. <meta name="select:Link One Icon" content="far fa-pencil-alt" title="Pencil">
  97. <meta name="select:Link One Icon" content="far fa-highlighter" title="Highlighter">
  98. <meta name="select:Link One Icon" content="far fa-sticky-note" title="Sticky Note">
  99.  
  100.  
  101. <meta name="select:Link Two Icon" content="far fa-user" title="User">
  102. <meta name="select:Link Two Icon" content="far fa-ellipsis-h" title="Ellipsis">
  103. <meta name="select:Link Two Icon" content="far fa-address-card" title="Info Card">
  104. <meta name="select:Link Two Icon" content="far fa-bookmark" title="Bookmark">
  105. <meta name="select:Link Two Icon" content="far fa-images" title="Photos">
  106. <meta name="select:Link Two Icon" content="far fa-list-alt" title="List">
  107. <meta name="select:Link Two Icon" content="far fa-paragraph" title="Paragraph">
  108. <meta name="select:Link Two Icon" content="far fa-pen-fancy" title="Pen">
  109. <meta name="select:Link Two Icon" content="far fa-pen-nib" title="Pen Nib">
  110. <meta name="select:Link Two Icon" content="far fa-pencil-alt" title="Pencil">
  111. <meta name="select:Link Two Icon" content="far fa-highlighter" title="Highlighter">
  112. <meta name="select:Link Two Icon" content="far fa-sticky-note" title="Sticky Note">
  113.  
  114.  
  115. <meta name="select:Link Three Icon" content="far fa-user" title="User">
  116. <meta name="select:Link Three Icon" content="far fa-ellipsis-h" title="Ellipsis">
  117. <meta name="select:Link Three Icon" content="far fa-address-card" title="Info Card">
  118. <meta name="select:Link Three Icon" content="far fa-bookmark" title="Bookmark">
  119. <meta name="select:Link Three Icon" content="far fa-images" title="Photos">
  120. <meta name="select:Link Three Icon" content="far fa-list-alt" title="List">
  121. <meta name="select:Link Three Icon" content="far fa-paragraph" title="Paragraph">
  122. <meta name="select:Link Three Icon" content="far fa-pen-fancy" title="Pen">
  123. <meta name="select:Link Three Icon" content="far fa-pen-nib" title="Pen Nib">
  124. <meta name="select:Link Three Icon" content="far fa-pencil-alt" title="Pencil">
  125. <meta name="select:Link Three Icon" content="far fa-highlighter" title="Highlighter">
  126. <meta name="select:Link Three Icon" content="far fa-sticky-note" title="Sticky Note">
  127.  
  128.  
  129. <meta name="select:Link Four Icon" content="far fa-user" title="User">
  130. <meta name="select:Link Four Icon" content="far fa-ellipsis-h" title="Ellipsis">
  131. <meta name="select:Link Four Icon" content="far fa-address-card" title="Info Card">
  132. <meta name="select:Link Four Icon" content="far fa-bookmark" title="Bookmark">
  133. <meta name="select:Link Four Icon" content="far fa-images" title="Photos">
  134. <meta name="select:Link Four Icon" content="far fa-list-alt" title="List">
  135. <meta name="select:Link Four Icon" content="far fa-paragraph" title="Paragraph">
  136. <meta name="select:Link Four Icon" content="far fa-pen-fancy" title="Pen">
  137. <meta name="select:Link Four Icon" content="far fa-pen-nib" title="Pen Nib">
  138. <meta name="select:Link Four Icon" content="far fa-pencil-alt" title="Pencil">
  139. <meta name="select:Link Four Icon" content="far fa-highlighter" title="Highlighter">
  140. <meta name="select:Link Four Icon" content="far fa-sticky-note" title="Sticky Note">
  141.  
  142.  
  143. <meta name="select:Back to Top Arrow" content="fas fa-arrow-up" title="Arrow 1">
  144. <meta name="select:Back to Top Arrow" content="fas fa-chevron-up" title="Arrow 2">
  145. <meta name="select:Back to Top Arrow" content="fas fa-caret-up" title="Arrow 3">
  146. <meta name="select:Back to Top Arrow" content="fas fa-long-arrow-up" title="Arrow 4">
  147. <meta name="select:Back to Top Arrow" content="fas fa-hand-point-up" title="Arrow 5">
  148. <meta name="select:Back to Top Arrow" content="far fa-chevron-square-up" title="Arrow 6">
  149. <meta name="select:Back to Top Arrow" content="fas fa-chevron-double-up" title="Arrow 7">
  150. <meta name="select:Back to Top Arrow" content="far fa-chevron-circle-up" title="Arrow 8">
  151. <meta name="select:Back to Top Arrow" content="far fa-arrow-square-up" title="Arrow 9">
  152. <meta name="select:Back to Top Arrow" content="far fa-arrow-circle-up" title="Arrow 10">
  153. <meta name="select:Back to Top Arrow" content="far fa-arrow-alt-up" title="Arrow 11">
  154. <meta name="select:Back to Top Arrow" content="far fa-arrow-to-top" title="Arrow 12">
  155.  
  156.  
  157. <meta name="select:Footer Social Link One Icon" content="fab fa-deviantart" title="DeviantArt">
  158. <meta name="select:Footer Social Link One Icon" content="fab fa-twitter" title="Twitter">
  159. <meta name="select:Footer Social Link One Icon" content="fab fa-reddit-alien" title="Reddit">
  160. <meta name="select:Footer Social Link One Icon" content="fab fa-github-alt" title="Github">
  161. <meta name="select:Footer Social Link One Icon" content="fab fa-behance" title="Behance">
  162. <meta name="select:Footer Social Link One Icon" content="fab fa-dribbble" title="Dribbble">
  163. <meta name="select:Footer Social Link One Icon" content="fab fa-ello" title="Ello">
  164. <meta name="select:Footer Social Link One Icon" content="fab fa-facebook" title="Facebook">
  165. <meta name="select:Footer Social Link One Icon" content="fab fa-etsy" title="Etsy">
  166. <meta name="select:Footer Social Link One Icon" content="fab fa-flickr" title="Flickr">
  167. <meta name="select:Footer Social Link One Icon" content="fab fa-instagram" title="Instagram">
  168. <meta name="select:Footer Social Link One Icon" content="fab fa-pinterest" title="Pinterest">
  169. <meta name="select:Footer Social Link One Icon" content="fab fa-steam" title="Steam">
  170. <meta name="select:Footer Social Link One Icon" content="fab fa-tumblr" title="Tumblr">
  171. <meta name="select:Footer Social Link One Icon" content="fab fa-twitch" title="Twitch">
  172. <meta name="select:Footer Social Link One Icon" content="fab fa-vimeo" title="Vimeo">
  173.  
  174.  
  175. <meta name="select:Footer Social Link Two Icon" content="fab fa-deviantart" title="DeviantArt">
  176. <meta name="select:Footer Social Link Two Icon" content="fab fa-twitter" title="Twitter">
  177. <meta name="select:Footer Social Link Two Icon" content="fab fa-reddit-alien" title="Reddit">
  178. <meta name="select:Footer Social Link Two Icon" content="fab fa-github-alt" title="Github">
  179. <meta name="select:Footer Social Link Two Icon" content="fab fa-behance" title="Behance">
  180. <meta name="select:Footer Social Link Two Icon" content="fab fa-dribbble" title="Dribbble">
  181. <meta name="select:Footer Social Link Two Icon" content="fab fa-ello" title="Ello">
  182. <meta name="select:Footer Social Link Two Icon" content="fab fa-facebook" title="Facebook">
  183. <meta name="select:Footer Social Link Two Icon" content="fab fa-etsy" title="Etsy">
  184. <meta name="select:Footer Social Link Two Icon" content="fab fa-flickr" title="Flickr">
  185. <meta name="select:Footer Social Link Two Icon" content="fab fa-instagram" title="Instagram">
  186. <meta name="select:Footer Social Link Two Icon" content="fab fa-pinterest" title="Pinterest">
  187. <meta name="select:Footer Social Link Two Icon" content="fab fa-steam" title="Steam">
  188. <meta name="select:Footer Social Link Two Icon" content="fab fa-tumblr" title="Tumblr">
  189. <meta name="select:Footer Social Link Two Icon" content="fab fa-twitch" title="Twitch">
  190. <meta name="select:Footer Social Link Two Icon" content="fab fa-vimeo" title="Vimeo">
  191.  
  192.  
  193. <meta name="select:Footer Social Link Three Icon" content="fab fa-deviantart" title="DeviantArt">
  194. <meta name="select:Footer Social Link Three Icon" content="fab fa-twitter" title="Twitter">
  195. <meta name="select:Footer Social Link Three Icon" content="fab fa-reddit-alien" title="Reddit">
  196. <meta name="select:Footer Social Link Three Icon" content="fab fa-github-alt" title="Github">
  197. <meta name="select:Footer Social Link Three Icon" content="fab fa-behance" title="Behance">
  198. <meta name="select:Footer Social Link Three Icon" content="fab fa-dribbble" title="Dribbble">
  199. <meta name="select:Footer Social Link Three Icon" content="fab fa-ello" title="Ello">
  200. <meta name="select:Footer Social Link Three Icon" content="fab fa-facebook" title="Facebook">
  201. <meta name="select:Footer Social Link Three Icon" content="fab fa-etsy" title="Etsy">
  202. <meta name="select:Footer Social Link Three Icon" content="fab fa-flickr" title="Flickr">
  203. <meta name="select:Footer Social Link Three Icon" content="fab fa-instagram" title="Instagram">
  204. <meta name="select:Footer Social Link Three Icon" content="fab fa-pinterest" title="Pinterest">
  205. <meta name="select:Footer Social Link Three Icon" content="fab fa-steam" title="Steam">
  206. <meta name="select:Footer Social Link Three Icon" content="fab fa-tumblr" title="Tumblr">
  207. <meta name="select:Footer Social Link Three Icon" content="fab fa-twitch" title="Twitch">
  208. <meta name="select:Footer Social Link Three Icon" content="fab fa-vimeo" title="Vimeo">
  209.  
  210.  
  211. <meta name="select:Footer Social Link Four Icon" content="fab fa-deviantart" title="DeviantArt">
  212. <meta name="select:Footer Social Link Four Icon" content="fab fa-twitter" title="Twitter">
  213. <meta name="select:Footer Social Link Four Icon" content="fab fa-reddit-alien" title="Reddit">
  214. <meta name="select:Footer Social Link Four Icon" content="fab fa-github-alt" title="Github">
  215. <meta name="select:Footer Social Link Four Icon" content="fab fa-behance" title="Behance">
  216. <meta name="select:Footer Social Link Four Icon" content="fab fa-dribbble" title="Dribbble">
  217. <meta name="select:Footer Social Link Four Icon" content="fab fa-ello" title="Ello">
  218. <meta name="select:Footer Social Link Four Icon" content="fab fa-facebook" title="Facebook">
  219. <meta name="select:Footer Social Link Four Icon" content="fab fa-etsy" title="Etsy">
  220. <meta name="select:Footer Social Link Four Icon" content="fab fa-flickr" title="Flickr">
  221. <meta name="select:Footer Social Link Four Icon" content="fab fa-instagram" title="Instagram">
  222. <meta name="select:Footer Social Link Four Icon" content="fab fa-pinterest" title="Pinterest">
  223. <meta name="select:Footer Social Link Four Icon" content="fab fa-steam" title="Steam">
  224. <meta name="select:Footer Social Link Four Icon" content="fab fa-tumblr" title="Tumblr">
  225. <meta name="select:Footer Social Link Four Icon" content="fab fa-twitch" title="Twitch">
  226. <meta name="select:Footer Social Link Four Icon" content="fab fa-vimeo" title="Vimeo">
  227.  
  228.  
  229. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  230. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  231.  
  232. <script> $(function(){ $('article').unnest({
  233. yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
  234. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  235. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  236. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  237. tumblrAvatars: false, //”dashboard style” caption, have the avatar of the blog next to the username
  238. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  239. usernameColon: false //if turned to false, removes the colon at the end of usernames
  240. }); }); </script>
  241.  
  242. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  243. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  244.  
  245. <script src="https://kit.fontawesome.com/c2d255a331.js" crossorigin="anonymous"></script>
  246.  
  247. <link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i,800,800i,900,900i|Overpass:400,400i,600,600i,700,700i,800,800i,900,900i|Roboto:400,400i,500,500i,700,700i,900,900i|Fira+Sans:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Open+Sans:400,400i,600,600i,700,700i,800,800i|Roboto+Mono:400,400i,500,500i,700,700i|Barlow:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Share+Tech+Mono|Roboto+Mono:400,500,700&display=swap" rel="stylesheet">
  248.  
  249. <style>
  250.  
  251. @import url('https://rsms.me/inter/inter.css');
  252.  
  253. body {
  254. font-family:{select:font}, sans-serif;
  255. margin:0;
  256. background-color:#f5f5f5;
  257. {block:ifdarkmode}
  258. background-color:#14151a;
  259. {/block:ifdarkmode}
  260. animation: fadein 2s;
  261. }
  262.  
  263. a {
  264. color:{color:accent};
  265. text-decoration:none;
  266. font-weight:700;
  267. transition:0.4s;
  268. }
  269.  
  270. a:hover {
  271. color:#222;
  272. {block:ifdarkmode}
  273. color:{color:dark mode text};
  274. {/block:ifdarkmode}
  275. transition:0.4s;
  276. }
  277.  
  278. ::selection {
  279. background:rgba(0,0,0,0.1);
  280. color:#111;
  281. {block:ifdarkmode}
  282. background:rgba(255,255,255,0.1);
  283. color:#999;
  284. {/block:ifdarkmode}
  285. }
  286.  
  287. @keyframes fadein {
  288. from {
  289. opacity:0;
  290. }
  291. to {
  292. opacity:1;
  293. }
  294. }
  295.  
  296.  
  297.  
  298. /* ---- HEADER ---- */
  299.  
  300. .header {
  301. width:500px;
  302. padding:50px;
  303. padding-bottom:0px;
  304. background-color:#fff;
  305. {block:ifdarkmode}
  306. background-color:#1b1c21;
  307. color:{color:dark mode text};
  308. {/block:ifdarkmode}
  309. top:0;
  310. margin-top:150px;
  311. text-align:center;
  312. border-radius:10px;
  313. padding-top:60px;
  314. transition:0.4s;
  315. }
  316.  
  317. .header-title {
  318. font-size:28px;
  319. letter-spacing:0.5px;
  320. font-weight:900;
  321. color:#333;
  322. {block:ifdarkmode}
  323. color:{color:dark mode text};
  324. {/block:ifdarkmode}
  325. padding-bottom:20px;
  326. text-transform:capitalize;
  327. line-height:25px;
  328. margin-top:10px;
  329. {block:ifnotshowheadericon}
  330. margin-top:0px;
  331. {/block:ifnotshowheadericon}
  332. }
  333.  
  334. .header-subtitle {
  335. font-size:12px;
  336. font-weight:700;
  337. color:#111;
  338. {block:ifdarkmode}
  339. color:{color:dark mode text};
  340. {/block:ifdarkmode}
  341. font-style:italic;
  342. text-transform:lowercase;
  343. opacity:0.5;
  344. letter-spacing:1px;
  345. }
  346.  
  347. .description {
  348. font-size:12px;
  349. font-weight:500;
  350. text-transform:none;
  351. line-height:20px;
  352. margin-top:10px;
  353. letter-spacing:0.3px;
  354. }
  355.  
  356. .header-icon {
  357. width:70px;
  358. height:70px;
  359. padding:20px;
  360. background:#fff;
  361. {block:ifdarkmode}
  362. background-color:#1b1c21;
  363. box-shadow:none;
  364. {/block:ifdarkmode}
  365. border-radius:100%;
  366. position:absolute;
  367. margin-top:-105px;
  368. margin-left:195px;
  369. transition:0.4s;
  370. text-align:center;
  371. transition-delay:0.3s;
  372. }
  373.  
  374. .header:hover .header-icon {
  375. transform:scale(1.1) translateY(-7px);
  376. transition:0.4s;
  377. transition-delay:0.5s;
  378. }
  379.  
  380. .fa-volcano, .fa-apple-alt, .fa-atom, .fa-atom-alt, .fa-bacon, .fa-bomb, .fa-bong, .fa-bug, .fa-burrito, .fa-campfire, .fa-candy-cane, .fa-carrot, .fa-cat, .fa-cauldron, .fa-cheeseburger, .fa-cloud-drizzle, .fa-crow, .fa-egg-fried, .fa-flask-potion, .fa-flower-tulip, .fa-french-fries, .fa-heart, .fa-hotdog, .fa-leaf-heart, .fa-lemon, .fa-magic, .fa-meteor, .fa-moon-stars, .fa-mountains, .fa-narwhal, .fa-paper-plane, .fa-pumpkin, .fa-rocket, .fa-seedling, .fa-space-shuttle, .fa-star, .fa-stars, .fa-trees, .fa-wheat {
  381. font-size:38px;
  382. vertical-align:middle;
  383. margin-top:3px;
  384. color:{color:gradient 2};
  385. }
  386.  
  387. .header-bottom {
  388. padding:10px;
  389. padding-bottom:20px;
  390. padding-top:20px;
  391. width:580px;
  392. color:#fff;
  393. border-bottom-left-radius:10px;
  394. border-bottom-right-radius:10px;
  395. margin-left:-50px;
  396. margin-top:10px;
  397. background-color: #21D4FD;
  398. background-image: linear-gradient(19deg, {color:gradient 1} 0%, {color:gradient 2} 100%);
  399. }
  400.  
  401. .header-bottom a {
  402. display:inline-block;
  403. text-transform:capitalize;
  404. color:rgba(255,255,255,0.55);
  405. {block:ifdarkmode}
  406. color:rgba(27,28,33,0.65);
  407. {/block:ifdarkmode}
  408. font-weight:600;
  409. font-size:12.5px;
  410. letter-spacing:0.5px;
  411. padding:5px;
  412. margin-left:15px;
  413. margin-right:15px;
  414. transition-delay:none;
  415. border-radius:5px;
  416. }
  417.  
  418. .header-bottom a:hover {
  419. transition-delay:none;
  420. background-color:rgba(255,255,255,0.15);
  421. {block:ifdarkmode}
  422. background-color:rgba(27,28,33,0.1);
  423. {/block:ifdarkmode}
  424. }
  425.  
  426. .header:hover .header-bottom a {
  427. color:rgba(255,255,255,0.85);
  428. {block:ifdarkmode}
  429. color:rgba(27,28,33,0.95);
  430. {/block:ifdarkmode}
  431. }
  432.  
  433.  
  434.  
  435. /* ---- SIDEBAR ---- */
  436.  
  437. .navigation {
  438. width:560px;
  439. padding:50px;
  440. background-color:#fff;
  441. {block:ifdarkmode}
  442. background-color:#1b1c21;
  443. {/block:ifdarkmode}
  444. top:0;
  445. margin-top:30px;
  446. border-radius:10px;
  447. transition:0.4s;
  448. padding:20px;
  449. text-align:center;
  450. }
  451.  
  452. .nav-title {
  453. float:left;
  454. position:absolute;
  455. margin-top:-55px;
  456. margin-left:0px;
  457. font-weight:800;
  458. font-size:18px;
  459. }
  460.  
  461. .navigation a {
  462. text-align:center;
  463. display:inline-block;
  464. padding:18px;
  465. border-radius:10px;
  466. width:85px;
  467. margin-right:7px;
  468. color:#222;
  469. {block:ifdarkmode}
  470. color:{color:dark mode text};
  471. {/block:ifdarkmode}
  472. font-weight:700;
  473. font-size:12px;
  474. letter-spacing:0.5px;
  475. }
  476.  
  477. .navigation a:hover {
  478. color:{color:Accent};
  479. transform:scale(1.1);
  480. }
  481.  
  482. .fa-envelope, .fa-calendar-alt, .fa-user, .fa-ellipsis-h, .fa-address-card, .fa-bookmark, .fa-deviantart, .fa-ello, .fa-facebook, .fa-facebook-f, .fa-github, .fa-github-alt, .fa-images, .fa-instagram, .fa-list-alt, .fa-paragraph, .fa-pen-fancy, .fa-pen-nib, .fa-pencil-alt, .fa-pinterest-p, .fa-reddit-alien, .fa-sticky-note, .fa-tumblr, .fa-highlighter {
  483. margin-bottom:10px;
  484. font-size:18px;
  485. }
  486.  
  487.  
  488.  
  489.  
  490. /* ---- POSTS ---- */
  491.  
  492. .wrapper {
  493. width:600px;
  494. height:100%;
  495. padding:30px;
  496. margin-top:100px;
  497. }
  498.  
  499. article {
  500. width:500px;
  501. padding:50px;
  502. margin-bottom:100px;
  503. color:#222;
  504. transition:.4s;
  505. border-radius:10px;
  506. font-size:13px;
  507. text-align:left;
  508. line-height:22px;
  509. background-color:#fff;
  510. {block:ifdarkmode}
  511. background-color:#1b1c21;
  512. color:{color:dark mode text};
  513. {/block:ifdarkmode}
  514. }
  515.  
  516. article img {
  517. width:500px;
  518. border-radius:5px;
  519. }
  520.  
  521. .caption {
  522. margin-left:0px;
  523. padding-top:10px;
  524. text-align:left;
  525. line-height:25px;
  526. }
  527.  
  528. .caption img {
  529. max-width:500px;
  530. margin-top:10px;
  531. }
  532.  
  533. /* reblogs */
  534. blockquote.tumblr_parent {
  535. padding-left:20px;
  536. padding-top:00px;
  537. padding-bottom:10px;
  538. padding-right:20px;
  539. width:500px;
  540. margin-left:-20px;
  541. word-break:break-word;
  542. color:#222;
  543. {block:ifdarkmode}
  544. color:{color:dark mode text};
  545. {/block:ifdarkmode}
  546. margin-top:0px;
  547. font-size:12px;
  548. line-height:25px;
  549. text-align:left;
  550. }
  551.  
  552. /* non-reblogged original post */
  553. .originalpost blockquote.tumblr_parent {
  554. width:480px;
  555. margin:0;
  556. color:#222;
  557. {block:ifdarkmode}
  558. color:{color:dark mode text};
  559. {/block:ifdarkmode}
  560. border:none;
  561. background:transparent!important;
  562. padding-left:0px;
  563. font-size:12px;
  564. padding-top:10px;
  565. }
  566.  
  567. /* non-reblogged original post */
  568. .caption.originalpost {
  569. margin:-5px 0;
  570. line-height:30px;
  571. background:transparent!important;
  572. border:none;
  573. font-size:12px;
  574. padding-top:10px;
  575. }
  576.  
  577. /* reblogs; tumblr user icons */
  578. img.tumblr_avatar {
  579. margin-right:10px;
  580. margin-top:0px!important;
  581. height:30px;
  582. width:30px;
  583. margin-left:0px;
  584. float:left;
  585. border-radius:100%!important;
  586. vertical-align:middle!important;
  587. color:#fff;
  588. }
  589.  
  590. /* reblogs; tumblr user names */
  591. .caption a.tumblr_blog {
  592. font-size:13px;
  593. text-decoration:none;
  594. line-height:20px;
  595. color:#222;
  596. {block:ifdarkmode}
  597. color:{color:dark mode text};
  598. {/block:ifdarkmode}
  599. display:block;
  600. padding:5px;
  601. padding-bottom:10px;
  602. padding-left:0px;
  603. text-align:left;
  604. font-weight:700;
  605. background:transparent;
  606. margin-top:2px;
  607. margin-bottom:0px;
  608. transition:.3s;
  609. border-radius:0px;
  610. }
  611.  
  612. /* reblogs; tumblr user names hover */
  613. .caption a:hover.tumblr_blog {
  614. color:{color:accent};
  615. transition:.3s;
  616. }
  617.  
  618. .text_title {
  619. font-size:20px;
  620. font-weight:800;
  621. border-bottom:1px solid rgba(255,255,255,0.1);
  622. {block:ifdarkmode}
  623. border-bottom:none;
  624. {/block:ifdarkmode}
  625. padding-bottom:20px;
  626. margin-bottom:0px;
  627. }
  628.  
  629. .fa-pen-alt {
  630. float:left;
  631. color:{color:accent};
  632. margin-right:10px;
  633. }
  634.  
  635. iframe.tumblr_audio_player {
  636. height:85px;!important
  637. }
  638.  
  639. .quote {
  640. font-weight:900;
  641. font-size:25px;
  642. line-height:27px;
  643. padding-left:20px;
  644. margin-left:50px;
  645. }
  646.  
  647. .fa-quote-left {
  648. float:left;
  649. font-size:30px;
  650. background:linear-gradient(19deg, {color:gradient 1} 0%, {color:gradient 2} 100%);
  651. border-radius:10px;
  652. padding:10px;
  653. color:#fff;
  654. {block:ifdarkmode}
  655. color:#1b1c21;
  656. {/block:ifdarkmode}
  657. }
  658.  
  659. .quote_source {
  660. text-align:right;
  661. font-size:12px;
  662. font-weight:400;
  663. margin-top:15px;
  664. }
  665.  
  666. .link {
  667. text-align:center;
  668. }
  669.  
  670. .link a {
  671. display:inline-block;
  672. background:{color:accent};
  673. width:100%;
  674. padding:10px;
  675. padding-top:20px;
  676. padding-bottom:20px;
  677. border-radius:5px;
  678. color:#fff;
  679. {block:ifdarkmode}
  680. color:#222;
  681. {/block:ifdarkmode}
  682. font-size:18px;
  683. }
  684.  
  685. .link a:hover {
  686. opacity:0.6;
  687. }
  688.  
  689. .link_description {
  690. width:100%;
  691. background:rgba(0,0,0,0.05);
  692. {block:ifdarkmode}
  693. background:rgba(255,255,255,0.05);
  694. {/block:ifdarkmode}
  695. padding:10px;
  696. border-radius:5px;
  697. margin-top:15px;
  698. }
  699.  
  700. .question {
  701. background:{color:accent};
  702. padding:10px;
  703. padding-top:20px;
  704. padding-bottom:20px;
  705. border-radius:5px;
  706. color:#fff;
  707. {block:ifdarkmode}
  708. color:#222;
  709. {/block:ifdarkmode}
  710. }
  711.  
  712. .answer {
  713. background:rgba(0,0,0,0.05);
  714. {block:ifdarkmode}
  715. background:rgba(255,255,255,0.05);
  716. {/block:ifdarkmode}
  717. padding:10px;
  718. border-radius:5px;
  719. margin-top:15px;
  720. text-align:right;
  721. }
  722.  
  723. .asker {
  724. margin-bottom:10px;
  725. }
  726.  
  727. .asker a {
  728. color:#fff;
  729. {block:ifdarkmode}
  730. color:#222;
  731. {/block:ifdarkmode}
  732. }
  733.  
  734. .fa-comment-smile {
  735. font-size:18px;
  736. vertical-align:middle;
  737. margin-right:5px;
  738. }
  739.  
  740.  
  741.  
  742.  
  743. /* ---- PHOTOSETS ---- */
  744.  
  745. .photo-slideshow {
  746. visibility: hidden;
  747. }
  748.  
  749. .photo-slideshow.processed {
  750. visibility: visible;
  751. }
  752.  
  753. .photo-slideshow .row {
  754. clear: both;
  755. width: 100%;
  756. }
  757.  
  758. .photo-slideshow .pxu-photo {
  759. display: block;
  760. float: left;
  761. margin-right:5px;
  762. width: 100%;
  763. overflow: hidden;
  764. }
  765.  
  766. .photo-slideshow .pxu-photo img {
  767. display: block;
  768. border:none;
  769. }
  770.  
  771. .photo-slideshow.processed .pxu-photo img {
  772. width: 100%;
  773. height: auto;
  774. border:none;
  775. }
  776.  
  777. .photo-slideshow .pxu-photo:first-child img {
  778. margin-left: 0;
  779. border:none;
  780. }
  781.  
  782. .photo-slideshow .count-1 {
  783. width: 100%;
  784. }
  785.  
  786. .photo-slideshow .count-2 {
  787. width: 50%;
  788. }
  789.  
  790. .photo-slideshow .count-3 {
  791. width: 33.33%;
  792. }
  793.  
  794. .photo-slideshow .count-4 {
  795. width: 25%;
  796. }
  797.  
  798. .photo-slideshow .count-5 {
  799. width: 20%;
  800. }
  801.  
  802. .photo-slideshow .info {
  803. display: none;
  804. }
  805.  
  806.  
  807.  
  808.  
  809. /* ---- POST INFO ---- */
  810.  
  811. .postinfo {
  812. padding:30px;
  813. padding-left:0px;
  814. padding-right:0px;
  815. border-bottom:1px solid rgba(0,0,0,0.1);
  816. {block:ifdarkmode}
  817. border-bottom:1px solid rgba(255,255,255,0.1);
  818. {/block:ifdarkmode}
  819. margin-bottom:30px;
  820. }
  821.  
  822. .postinfo img {
  823. width:40px;
  824. height:40px;
  825. background:{color:theme};
  826. border-radius:100%;
  827. vertical-align:middle;
  828. float:left;
  829. margin-top:-30px;
  830. {block:ifdarkmode}
  831. opacity:0.6;
  832. {/block:ifdarkmode}
  833. transition:0.3s;
  834. }
  835.  
  836. {block:ifdarkmode}
  837. article:hover .postinfo img {
  838. opacity:1;
  839. transition:0.3s;
  840. }
  841. {/block:ifdarkmode}
  842.  
  843. .postinfo_reblogged {
  844. float:left;
  845. margin-top:-30px;
  846. margin-left:10px;
  847. font-size:12px;
  848. }
  849.  
  850. .postinfo_reblogged_name {
  851. font-weight:600;
  852. }
  853.  
  854. .postinfo_reblogged_url {
  855. opacity:0.7;
  856. font-style:italic;
  857. color:{color:accent};
  858. }
  859.  
  860. .postinfo_links {
  861. float:right;
  862. margin-top:-10px;
  863. }
  864.  
  865. .postinfo_links a {
  866. display:inline-block;
  867. color:rgba(0,0,0,0.6);
  868. margin-left:15px;
  869. {block:ifdarkmode}
  870. color:rgba(255,255,255,0.6);
  871. {/block:ifdarkmode}
  872. }
  873.  
  874. .postinfo_links a:hover {
  875. color:{color:accent};
  876. }
  877.  
  878. .fa-sync-alt {
  879. vertical-align:middle;
  880. margin-right:5px;
  881. }
  882.  
  883.  
  884.  
  885.  
  886. /* ---- FOOTER ---- */
  887.  
  888. .footer {
  889. bottom:0;
  890. width:calc(100% - 120px);
  891. padding:60px;
  892. color:#111;
  893. border-radius:10px;
  894. font-size:13px;
  895. line-height:22px;
  896. background-color:#fff;
  897. {block:ifdarkmode}
  898. background-color:#1b1c21;
  899. color:{color:dark mode text};
  900. {/block:ifdarkmode}
  901. text-align:center;
  902. }
  903.  
  904. .footer a {
  905. color:#222;
  906. {block:ifdarkmode}
  907. color:{color:dark mode text};
  908. {/block:ifdarkmode}
  909. }
  910.  
  911. .footer a:hover {
  912. opacity:0.5;
  913. }
  914.  
  915. .footer_nav {
  916. text-align:center;
  917. margin-bottom:10px;
  918. }
  919.  
  920. .footer_nav a {
  921. display:inline-block;
  922. font-weight:normal;
  923. font-size:18px;
  924. margin-left:10px;
  925. margin-right:10px;
  926. }
  927.  
  928. .footer_nav a:hover {
  929. color:{color:accent};
  930. opacity:1;
  931. }
  932.  
  933. .divider {
  934. margin-bottom:10px;
  935. color:#222;
  936. {block:ifdarkmode}
  937. color:{color:dark mode text};
  938. {/block:ifdarkmode}
  939. }
  940.  
  941. #button {
  942. position:fixed;
  943. text-align:center;
  944. border-radius:4px;
  945. bottom:30px;
  946. right:30px;
  947. transition: background-color .3s, opacity .5s, visibility .5s;
  948. opacity:0;
  949. visibility:hidden;
  950. z-index:1000;
  951. transition:0.3s;
  952. font-size:30px;
  953. }
  954.  
  955. #button:hover {
  956. cursor:pointer;
  957. color:#222;
  958. {block:ifdarkmode}
  959. color:{color:dark mode text};
  960. {/block:ifdarkmode}
  961. transition:0.3s;
  962. }
  963.  
  964. #button.show {
  965. opacity:1;
  966. visibility:visible;
  967. }
  968.  
  969.  
  970.  
  971.  
  972. /* ---- PAGINATION ---- */
  973.  
  974. .pagination {
  975. width:500px;
  976. padding:50px;
  977. margin-bottom:100px;
  978. background-color:#fff;
  979. border-radius:10px;
  980. {block:ifdarkmode}
  981. background-color:#1b1c21;
  982. color:{color:dark mode text};
  983. {/block:ifdarkmode}
  984. font-size:13px;
  985. }
  986.  
  987. .pagination_previous {
  988. float:left;
  989. width:80px;
  990. }
  991.  
  992. .pagination_previous a {
  993. display:inline-block;
  994. width:70px;
  995. background-color:{color:accent};
  996. color:#fff;
  997. {block:ifdarkmode}
  998. color:#222;
  999. {/block:ifdarkmode}
  1000. padding:5px;
  1001. border-radius:5px;
  1002. }
  1003.  
  1004. .pagination_previous a:hover {
  1005. opacity:0.6;
  1006. }
  1007.  
  1008. .pagination_next {
  1009. float:right;
  1010. width:80px;
  1011. }
  1012.  
  1013. .pagination_next a {
  1014. display:inline-block;
  1015. width:70px;
  1016. background-color:{color:accent};
  1017. color:#fff;
  1018. {block:ifdarkmode}
  1019. color:#222;
  1020. {/block:ifdarkmode}
  1021. padding:5px;
  1022. border-radius:5px;
  1023. }
  1024.  
  1025. .pagination_next a:hover {
  1026. opacity:0.6;
  1027. }
  1028.  
  1029.  
  1030.  
  1031.  
  1032. /* ---- MEDIA QUERIES / RESPONSIVENESS ---- */
  1033.  
  1034. @media only screen and (max-width: 600px) {
  1035.  
  1036. article {
  1037. width:300px;
  1038. margin-bottom:50px;
  1039. }
  1040.  
  1041. article img {
  1042. width:300px;
  1043. }
  1044.  
  1045. .wrapper {
  1046. width:400px;
  1047. margin-top:20px;
  1048. margin-left:0px;
  1049. }
  1050.  
  1051. .sidebar {
  1052. display:none;
  1053. }
  1054.  
  1055. .header {
  1056. width:300px;
  1057. margin-left:0px;
  1058. margin-top:70px;
  1059. }
  1060.  
  1061. .header-bottom {
  1062. width:380px;
  1063. }
  1064.  
  1065. .header-icon {
  1066. margin-left:110px;
  1067. }
  1068.  
  1069. .navigation {
  1070. width:360px;
  1071. margin-left:0px;
  1072. }
  1073.  
  1074. .navigation a {
  1075. width:62px;
  1076. padding:5px;
  1077. font-size:11px;
  1078. }
  1079.  
  1080. .footer {
  1081. width:300px;
  1082. }
  1083.  
  1084. iframe.tmblr-iframe {
  1085. display:none;
  1086. }
  1087.  
  1088. blockquote.tumblr_parent, .originalpost blockquote.tumblr_parent {
  1089. width:300px;
  1090. font-size:12px;
  1091. }
  1092. }
  1093.  
  1094. @media only screen and (max-width: 992px) and (min-width: 601px) {
  1095. body {
  1096. background:yellow;
  1097. }
  1098.  
  1099. article {
  1100. width:400px;
  1101. }
  1102.  
  1103. article img {
  1104. width:400px;
  1105. }
  1106.  
  1107. .wrapper {
  1108. width:500px;
  1109.  
  1110. }
  1111.  
  1112. .sidebar {
  1113. width:200px;
  1114. }
  1115.  
  1116. .header {
  1117. width:400px;
  1118. }
  1119.  
  1120. .header-bottom {
  1121. width:480px;
  1122. }
  1123.  
  1124. .navigation {
  1125. width:460px;
  1126. }
  1127.  
  1128. .navigation a {
  1129. width:77px;
  1130. padding:14px;
  1131. }
  1132.  
  1133. .header-icon {
  1134. margin-left:160px;
  1135. }
  1136.  
  1137. blockquote.tumblr_parent, .originalpost blockquote.tumblr_parent {
  1138. width:400px;
  1139. }
  1140. }
  1141.  
  1142. @media only screen and (max-width: 1024px) and (min-width: 993px) {
  1143. body {
  1144. background:cyan;
  1145. }
  1146.  
  1147. article {
  1148. width:400px;
  1149. }
  1150.  
  1151. article img {
  1152. width:400px;
  1153. }
  1154.  
  1155. .wrapper {
  1156. width:500px;
  1157. }
  1158.  
  1159. .sidebar {
  1160. width:200px;
  1161. }
  1162.  
  1163. .header {
  1164. width:400px;
  1165. }
  1166.  
  1167. .header-bottom {
  1168. width:480px;
  1169. }
  1170.  
  1171. .header-icon {
  1172. margin-left:160px;
  1173. }
  1174.  
  1175. .navigation {
  1176. width:460px;
  1177. }
  1178.  
  1179. .navigation a {
  1180. width:72px;
  1181. padding:14px;
  1182. font-size:11px;
  1183. }
  1184.  
  1185. blockquote.tumblr_parent, .originalpost blockquote.tumblr_parent {
  1186. width:400px;
  1187. }
  1188. }
  1189.  
  1190. </style>
  1191. </head>
  1192.  
  1193. <!--- audio player styling --->
  1194. <script>
  1195. $(document).ready(function() {
  1196. $('iframe.tumblr_audio_player').load( function() {
  1197. $('iframe.tumblr_audio_player').contents().find("head")
  1198. .append($("<link href='https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i,800,800i,900,900i|Overpass:400,400i,600,600i,700,700i,800,800i,900,900i|Roboto:400,400i,500,500i,700,700i,900,900i|Fira+Sans:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Open+Sans:400,400i,600,600i,700,700i,800,800i|Roboto+Mono:400,400i,500,500i,700,700i|Barlow:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Share+Tech+Mono|Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'> <style type='text/css'> .audio-player{background:{color:accent}; color:#fff; font-family:{select:font};border-top-left-radius:0px;border-bottom-left-radius:0px;!important} </style>"));
  1199. });
  1200. });
  1201. </script>
  1202.  
  1203.  
  1204. <body>
  1205.  
  1206. <div align="center">
  1207.  
  1208. <div class="header">
  1209. {block:ifshowheadericon}
  1210. <div class="header-icon"><i class="{select:header icon}"></i></div>
  1211. {/block:ifshowheadericon}
  1212.  
  1213. <div class="header-title">
  1214. {Title}<br>
  1215. <div class="header-subtitle">@{text:your url}</div>
  1216. <br>
  1217. <div class="description">{Description}</div>
  1218. </div>
  1219.  
  1220. <div class="header-bottom">
  1221. <a href="/">index</a>
  1222. <a href="/ask">message</a>
  1223. <a href="/archive">archive</a>
  1224. <a href="/submit">submit</a>
  1225. </div>
  1226. </div>
  1227.  
  1228. <div class="navigation">
  1229. <a href="{text:link one url}"><i class="{select:link one icon}"></i><br>{text:link one name}</a>
  1230. <a href="{text:link two url}"><i class="{select:link two icon}"></i><br>{text:link two name}</a>
  1231. <a href="{text:link three url}"><i class="{select:link three icon}"></i><br>{text:link three name}</a>
  1232. <a href="{text:link four url}"><i class="{select:link four icon}"></i><br>{text:link four name}</a>
  1233. </div>
  1234.  
  1235. <div class="wrapper">
  1236.  
  1237. {block:Posts}
  1238. <article id="p-{PostType}" class="post">
  1239.  
  1240. {block:IndexPage}
  1241. <div class="postinfo">
  1242. {block:RebloggedFrom}
  1243. <img src="{ReblogParentPortraitURL-40}">
  1244. <div class="postinfo_reblogged">
  1245. <span class="postinfo_reblogged_name"><span style="opacity:0.5;">reblogged from</span> {ReblogParentName}</span>
  1246. <br>
  1247. <span class="postinfo_reblogged_url">{Month} {DayOfMonthWithZero}, {Year}</span>
  1248. </div>
  1249. {/block:RebloggedFrom}
  1250.  
  1251. {block:NotReblog}
  1252. <img src="{PortraitURL-40}">
  1253. <div class="postinfo_reblogged">
  1254. <span class="postinfo_reblogged_name"><span style="opacity:0.5;">posted by</span> {text:your url}</span>
  1255. <br>
  1256. <span class="postinfo_reblogged_url">{Month} {DayOfMonthWithZero}, {Year}</span>
  1257. </div>
  1258. {/block:NotReblog}
  1259.  
  1260. <div class="postinfo_links">
  1261. <a href="{ReblogURL}"><i class="fas fa-retweet"></i></a>
  1262. <a href="{Permalink}"><i class="fas fa-link"></i></a>
  1263. </div>
  1264. </div>
  1265. {/block:IndexPage}
  1266.  
  1267. {block:Quote}
  1268. <i class="fas fa-quote-left"></i>
  1269. <div class="quote">
  1270. {Quote}<br>
  1271. <div class="quote_source">- {Source}</div>
  1272. </div>
  1273. {/block:Quote}
  1274.  
  1275. {block:Photo}
  1276. <img src="{PhotoURL-500}">
  1277. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1278. {/block:Photo}
  1279.  
  1280. {block:Text}
  1281. {block:Title}<div class="text_title"><i class="far fa-pen-alt"></i> <span style="border-bottom:3px solid rgba(0,0,0,0.1);{block:ifdarkmode}border-bottom:3px solid rgba(255,255,255,0.1);{/block:ifdarkmode}">{Title}</span></div>{/block:Title}
  1282. <div class="caption">{Body}</div>
  1283. {/block:Text}
  1284.  
  1285. {block:Photoset}
  1286. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div></div>{/block:Photos}</div>
  1287.  
  1288. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1289. {/block:Photoset}
  1290.  
  1291. {block:Video}
  1292. {Video-500}
  1293. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1294. {/block:Video}
  1295.  
  1296.  
  1297. {block:Audio}
  1298. {AudioEmbed-500}
  1299. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1300. {/block:Audio}
  1301.  
  1302. {block:Link}
  1303. <div class="link">
  1304. <a href="{URL}">{Name}</a>
  1305. </div>
  1306.  
  1307. <div class="link_description">
  1308. {Description}
  1309. </div>
  1310. {/block:Link}
  1311.  
  1312. {block:Answer}
  1313. <div class="question">
  1314. <div class="asker"><i class="far fa-comment-smile"></i> {Asker} said:</div>
  1315. {Question}
  1316. </div>
  1317.  
  1318. <div class="answer">
  1319. <div class="caption">{Answer}</div>
  1320. </div>
  1321. {/block:Answer}
  1322.  
  1323. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}{block:RebloggedFrom}<!-- {ReblogParentName} -->{/block:RebloggedFrom}
  1324.  
  1325. </article>
  1326. {/block:Posts}
  1327.  
  1328. <a id="button"><i class="{select:back to top arrow}"></i></a>
  1329.  
  1330. {block:Pagination}
  1331. <div class="pagination">
  1332.  
  1333. {block:PreviousPage}
  1334. <div class="pagination_previous">
  1335. <a href="{PreviousPage}">Back</a>
  1336. </div>
  1337. {/block:PreviousPage}
  1338.  
  1339. Page {CurrentPage} of {TotalPages}
  1340.  
  1341. {block:NextPage}
  1342. <div class="pagination_next">
  1343. <a href="{NextPage}">Next</a>
  1344. </div>
  1345. {/block:NextPage}
  1346.  
  1347. </div>
  1348. {/block:Pagination}
  1349.  
  1350. </div>
  1351. </div>
  1352.  
  1353. <div class="footer">
  1354. {block:iffootersocialmedialinks}
  1355. <div class="footer_nav">
  1356. <a href="/"><i class="{select:footer social link one icon}"></i></a>
  1357. <a href="/"><i class="{select:footer social link two icon}"></i></a>
  1358. <a href="/"><i class="{select:footer social link three icon}"></i></a>
  1359. <a href="/"><i class="{select:footer social link four icon}"></i></a>
  1360. </div>
  1361.  
  1362. <div class="divider">
  1363. <i class="fal fa-horizontal-rule"></i>
  1364. </div>
  1365. {/block:iffootersocialmedialinks}
  1366.  
  1367. <div class="credit">
  1368. Theme created by <a href="https://astrocodes.tumblr.com">astrocodes</a>. Powered by tumblr.
  1369. </div>
  1370. </div>
  1371.  
  1372. <script>
  1373. var btn = $('#button');
  1374.  
  1375. $(window).scroll(function() {
  1376. if ($(window).scrollTop() > 300) {
  1377. btn.addClass('show');
  1378. } else {
  1379. btn.removeClass('show');
  1380. }
  1381. });
  1382.  
  1383. btn.on('click', function(e) {
  1384. e.preventDefault();
  1385. $('html, body').animate({scrollTop:0}, '300');
  1386. });
  1387. </script>
  1388.  
  1389. <script>
  1390. $(document).ready(function(){
  1391. $('.photo-slideshow').pxuPhotoset({
  1392. lightbox: true,
  1393. rounded: false,
  1394. gutter: '5px',
  1395. borderRadius: '0px',
  1396. photoset: '.photo-slideshow',
  1397. photoWrap: '.photo-data',
  1398. photo: '.pxu-photo'
  1399. });
  1400. });
  1401. </script>
  1402.  
  1403.  
  1404. </body>
  1405. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!