API tools faq
paste
Advertisement
wizardhut

ØRESUND

wizardhut
Feb 22nd, 2019
4,919
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!---
  5.  
  6. Theme 10 - Øresund
  7. wizardhut @ tumblr.com
  8.  
  9.  
  10.  
  11. > Inspiration: https://dribbble.com/shots/3512918-dashboard-UI/attachments/777803
  12.  
  13.  
  14.  
  15. Credits:
  16.  
  17. > Fontawesome icon font (fontawesome.com)
  18.  
  19. > Un-nested captions (https://neothm.com and https://magnusthemes.tumblr.com)
  20.  
  21. > Remove "via" and "source" from captions (http://clcrk-tutorials.tumblr.com)
  22.  
  23. --->
  24.  
  25.  
  26.  
  27. <!--------------------------------------------------------- color options -->
  28.  
  29. <meta name="color:Gradient Color 1" content="#fad961">
  30. <meta name="color:Gradient Color 2" content="#f76b1c">
  31. <meta name="color:Sidebar Text" content="#6275af">
  32. <meta name="color:Nav Link Hover" content="#6275af">
  33. <meta name="color:Nav Link Icon Hover" content="#9074f2">
  34. <meta name="color:Nav Link Hover Border" content="#9074f2">
  35. <meta name="color:Post Text" content="#6275af">
  36.  
  37.  
  38.  
  39. <!-------------------------------------------------------- font selection -->
  40.  
  41. <meta name="select:Theme Font" content="roboto" title="Roboto">
  42. <meta name="select:Theme Font" content="roboto mono" title="Roboto Mono">
  43. <meta name="select:Theme Font" content="space mono" title="Space Mono">
  44. <meta name="select:Theme Font" content="karla" title="Karla">
  45. <meta name="select:Theme Font" content="arial" title="Arial">
  46. <meta name="select:Theme Font" content="segoe ui" title="Segoe UI">
  47. <meta name="select:Theme Font" content="open sans" title="Open Sans">
  48. <meta name="select:Theme Font" content="roboto slab" title="Roboto Slab">
  49.  
  50.  
  51.  
  52. <!--------------------------------------------- blog title icon selection -->
  53.  
  54. <meta name="select:Blog Title Icon" content="fas fa-apple-alt" title="apple">
  55. <meta name="select:Blog Title Icon" content="fas fa-bomb" title="bomb">
  56. <meta name="select:Blog Title Icon" content="fas fa-bong" title="bong">
  57. <meta name="select:Blog Title Icon" content="fas fa-bug" title="bug">
  58. <meta name="select:Blog Title Icon" content="fas fa-capsules" title="capsules">
  59. <meta name="select:Blog Title Icon" content="fas fa-cat" title="cat">
  60. <meta name="select:Blog Title Icon" content="fas fa-carrot" title="carrot">
  61. <meta name="select:Blog Title Icon" content="fas fa-crow" title="crow">
  62. <meta name="select:Blog Title Icon" content="fas fa-cube" title="cube">
  63. <meta name="select:Blog Title Icon" content="fas fa-dog" title="dog">
  64. <meta name="select:Blog Title Icon" content="fas fa-drumstick-bite" title="drumstick">
  65. <meta name="select:Blog Title Icon" content="fas fa-egg" title="egg">
  66. <meta name="select:Blog Title Icon" content="fas fa-feather" title="feather">
  67. <meta name="select:Blog Title Icon" content="fas fa-feather-alt" title="feather 2">
  68. <meta name="select:Blog Title Icon" content="fas fa-fish" title="fish">
  69. <meta name="select:Blog Title Icon" content="fas fa-fire" title="fire">
  70. <meta name="select:Blog Title Icon" content="fas fa-flask" title="flask">
  71. <meta name="select:Blog Title Icon" content="fas fa-frog" title="frog">
  72. <meta name="select:Blog Title Icon" content="fas fa-gamepad" title="game controller">
  73. <meta name="select:Blog Title Icon" content="fas fa-hand-holding-heart" title="hand with heart">
  74. <meta name="select:Blog Title Icon" content="far fa-heart" title="heart">
  75. <meta name="select:Blog Title Icon" content="fas fa-ice-cream" title="ice cream">
  76. <meta name="select:Blog Title Icon" content="fas fa-leaf" title="leaf">
  77. <meta name="select:Blog Title Icon" content="far fa-lemon" title="lemon">
  78. <meta name="select:Blog Title Icon" content="fas fa-magic" title="magic wand">
  79. <meta name="select:Blog Title Icon" content="fas fa-moon" title="moon">
  80. <meta name="select:Blog Title Icon" content="far fa-paper-plane" title="paper plane">
  81. <meta name="select:Blog Title Icon" content="fas fa-pepper-hot" title="pepper">
  82. <meta name="select:Blog Title Icon" content="fas fa-pizza-slice" title="pizza">
  83. <meta name="select:Blog Title Icon" content="fas fa-cloud-showers-heavy" title="rain cloud">
  84. <meta name="select:Blog Title Icon" content="fas fa-rocket" title="rocket">
  85. <meta name="select:Blog Title Icon" content="fas fa-smile" title="smile">
  86. <meta name="select:Blog Title Icon" content="fas fa-seedling" title="sprout">
  87. <meta name="select:Blog Title Icon" content="far fa-star" title="star">
  88. <meta name="select:Blog Title Icon" content="fas fa-tree" title="tree">
  89. <meta name="select:Blog Title Icon" content="fas fa-cannabis" title="weed">
  90.  
  91.  
  92.  
  93. <!------------------------------------------ custom link 1 icon selection -->
  94.  
  95. <meta name="select:Custom Link 1 Icon" content="fab fa-behance" title="behance">
  96. <meta name="select:Custom Link 1 Icon" content="fas fa-code" title="code">
  97. <meta name="select:Custom Link 1 Icon" content="fab fa-codepen" title="codepen">
  98. <meta name="select:Custom Link 1 Icon" content="fab fa-deviantart" title="deviantart">
  99. <meta name="select:Custom Link 1 Icon" content="fab fa-discord" title="discord">
  100. <meta name="select:Custom Link 1 Icon" content="fab fa-instagram" title="instagram">
  101. <meta name="select:Custom Link 1 Icon" content="fab fa-reddit-alien" title="reddit">
  102. <meta name="select:Custom Link 1 Icon" content="fas fa-tags" title="tags">
  103. <meta name="select:Custom Link 1 Icon" content="fab fa-twitter" title="twitter">
  104. <meta name="select:Custom Link 1 Icon" content="fab fa-twitch" title="twitch">
  105. <meta name="select:Custom Link 1 Icon" content="fas fa-user" title="user">
  106.  
  107.  
  108.  
  109. <!------------------------------------------ custom link 2 icon selection -->
  110.  
  111. <meta name="select:Custom Link 2 Icon" content="fab fa-behance" title="behance">
  112. <meta name="select:Custom Link 2 Icon" content="fas fa-code" title="code">
  113. <meta name="select:Custom Link 2 Icon" content="fab fa-codepen" title="codepen">
  114. <meta name="select:Custom Link 2 Icon" content="fab fa-deviantart" title="deviantart">
  115. <meta name="select:Custom Link 2 Icon" content="fab fa-discord" title="discord">
  116. <meta name="select:Custom Link 2 Icon" content="fab fa-instagram" title="instagram">
  117. <meta name="select:Custom Link 2 Icon" content="fab fa-reddit-alien" title="reddit">
  118. <meta name="select:Custom Link 2 Icon" content="fas fa-tags" title="tags">
  119. <meta name="select:Custom Link 2 Icon" content="fab fa-twitter" title="twitter">
  120. <meta name="select:Custom Link 2 Icon" content="fab fa-twitch" title="twitch">
  121. <meta name="select:Custom Link 2 Icon" content="fas fa-user" title="user">
  122.  
  123.  
  124.  
  125. <!------------------------------------------ custom link 3 icon selection -->
  126.  
  127. <meta name="select:Custom Link 3 Icon" content="fab fa-behance" title="behance">
  128. <meta name="select:Custom Link 3 Icon" content="fas fa-code" title="code">
  129. <meta name="select:Custom Link 3 Icon" content="fab fa-codepen" title="codepen">
  130. <meta name="select:Custom Link 3 Icon" content="fab fa-deviantart" title="deviantart">
  131. <meta name="select:Custom Link 3 Icon" content="fab fa-discord" title="discord">
  132. <meta name="select:Custom Link 3 Icon" content="fab fa-instagram" title="instagram">
  133. <meta name="select:Custom Link 3 Icon" content="fab fa-reddit-alien" title="reddit">
  134. <meta name="select:Custom Link 3 Icon" content="fas fa-tags" title="tags">
  135. <meta name="select:Custom Link 3 Icon" content="fab fa-twitter" title="twitter">
  136. <meta name="select:Custom Link 3 Icon" content="fab fa-twitch" title="twitch">
  137. <meta name="select:Custom Link 3 Icon" content="fas fa-user" title="user">
  138.  
  139.  
  140.  
  141. <!------------------------------------------ custom link 4 icon selection -->
  142.  
  143. <meta name="select:Custom Link 4 Icon" content="fab fa-behance" title="behance">
  144. <meta name="select:Custom Link 4 Icon" content="fas fa-code" title="code">
  145. <meta name="select:Custom Link 4 Icon" content="fab fa-codepen" title="codepen">
  146. <meta name="select:Custom Link 4 Icon" content="fab fa-deviantart" title="deviantart">
  147. <meta name="select:Custom Link 4 Icon" content="fab fa-discord" title="discord">
  148. <meta name="select:Custom Link 4 Icon" content="fab fa-instagram" title="instagram">
  149. <meta name="select:Custom Link 4 Icon" content="fab fa-reddit-alien" title="reddit">
  150. <meta name="select:Custom Link 4 Icon" content="fas fa-tags" title="tags">
  151. <meta name="select:Custom Link 4 Icon" content="fab fa-twitter" title="twitter">
  152. <meta name="select:Custom Link 4 Icon" content="fab fa-twitch" title="twitch">
  153. <meta name="select:Custom Link 4 Icon" content="fas fa-user" title="user">
  154.  
  155.  
  156.  
  157. <!----------------------------------------------------------- text inputs -->
  158.  
  159. <meta name="text:Border Radii" content="20">
  160. <meta name="text:Post Avatars Border Radius" content="100">
  161. <meta name="text:Header Blurb" content="short little blurb about whatever here. 2 lines looks best with this">
  162.  
  163. <meta name="text:Custom Link 1 URL" content="/">
  164. <meta name="text:Custom Link 1 Name" content="Link one">
  165. <meta name="text:Custom Link 1 Subtitle" content="link subtitle">
  166.  
  167. <meta name="text:Custom Link 2 URL" content="/">
  168. <meta name="text:Custom Link 2 Name" content="Link two">
  169. <meta name="text:Custom Link 2 Subtitle" content="link subtitle">
  170.  
  171. <meta name="text:Custom Link 3 URL" content="/">
  172. <meta name="text:Custom Link 3 Name" content="Link three">
  173. <meta name="text:Custom Link 3 Subtitle" content="link subtitle">
  174.  
  175. <meta name="text:Custom Link 4 URL" content="/">
  176. <meta name="text:Custom Link 4 Name" content="Link four">
  177. <meta name="text:Custom Link 4 Subtitle" content="link subtitle">
  178.  
  179.  
  180.  
  181. <!------------------------------------------------- toggle on/off options -->
  182.  
  183. <meta name="if:Slim Version" content="0">
  184. <meta name="if:Shadows" content="1">
  185. <meta name="if:Bold Links" content="1">
  186. <meta name="if:Dark Header Text" content="0">
  187. <meta name="if:Dark Custom Link Icons" content="0">
  188. <meta name="if:Show Custom Link 4" content="1">
  189.  
  190.  
  191.  
  192. <!------------------------------------------- google fonts, scripts, etc. -->
  193.  
  194. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  195.  
  196. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Karla:400,700|Roboto+Mono:300,400,500,700|Space+Mono:400,400i,700,700i|Open+Sans:400,700|Roboto+Slab:400,700" rel="stylesheet">
  197.  
  198. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  199.  
  200. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  201. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  202.  
  203. <script> $(function(){ $('article').unnest({
  204. yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
  205. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  206. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  207. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  208. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  209. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  210. usernameColon: false //if turned to false, removes the colon at the end of usernames
  211. }); }); </script>
  212.  
  213.  
  214. <style type="text/css">
  215.  
  216. body {
  217. background: #f9f9f9;
  218. background-attachment:fixed;
  219. font-family:{select:theme font};
  220. }
  221.  
  222. ::-webkit-scrollbar {
  223. width: 5px;
  224. border-radius:15px;
  225. }
  226.  
  227. ::-webkit-scrollbar-track {
  228. background: #f1f1f1;
  229. }
  230.  
  231. ::-webkit-scrollbar-thumb {
  232. background: #bbb;
  233. border-radius:15px;
  234. }
  235.  
  236. a {
  237. {block:ifboldlinks}font-weight:700;{/block:ifboldlinks}
  238. color:{color:gradient color 2};
  239. text-decoration:none;
  240. transition:.5s;
  241. }
  242.  
  243. a:hover {
  244. color:{color:post text};
  245. transition:.5s;
  246. }
  247.  
  248. ::selection {
  249. background:rgba(0,0,0,0.1);
  250. color:{color:post text};
  251. }
  252.  
  253.  
  254. /* ------------------------------------------- sidebar and main navigation */
  255.  
  256. .sidebar {
  257. height:100%;
  258. position:fixed;
  259. border-right:1px solid rgba(0,0,0,0.1);
  260. padding:20px;
  261. width:230px;
  262. top:0;
  263. background:#fff;
  264. left:0;
  265. {block:ifslimversion}width:200px;{/block:ifslimversion}
  266. }
  267.  
  268. .sidebar_title {
  269. padding:20px;
  270. {block:ifslimversion}padding:10px;{/block:ifslimversion}
  271. color:{color:sidebar text};
  272. font-size:15px;
  273. font-weight:700;
  274. text-transform:capitalize;
  275. letter-spacing:0.5px;
  276. }
  277.  
  278. .fa-paper-plane, .fa-magic, .fa-bomb, .fa-lemon, .fa-heart, .fa-star, .fa-apple-alt, .fa-bong, .fa-capsules, .fa-cannabis, .fa-carrot, .fa-bug, .fa-cat, .fa-cloud-showers-heavy, .fa-cat, .fa-cube, .fa-crow, .fa-dog, .fa-drumstick-bite, .fa-egg, .fa-feather, .fa-feather-alt, .fa-fish, .fa-flask, .fa-frog, .fa-fire, .fa-gamepad, .fa-hand-holding-heart, .fa-ice-cream, .fa-leaf, .fa-moon, .fa-pepper-hot, .fa-pizza-slice, .fa-rocket, .fa-seedling, .fa-smile, .fa-tree {
  279. background: linear-gradient(30deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  280. -webkit-background-clip: text;
  281. -webkit-text-fill-color: transparent;
  282. margin-right:10px;
  283. font-size:25px;
  284. vertical-align:-13%;
  285. }
  286.  
  287. .nav {
  288. margin-top:30px;
  289. margin-left:-20px;
  290. }
  291.  
  292. .nav a {
  293. display:block;
  294. font-size:13px;
  295. color:{color:sidebar text};
  296. text-decoration:none;
  297. padding-left:0px;
  298. {block:ifboldlinks}font-weight:700;{/block:ifboldlinks}
  299. letter-spacing:0.5px;
  300. transition:.5s;
  301. padding-top:20px;
  302. padding-bottom:20px;
  303. {block:ifslimversion}
  304. padding-top:10px;
  305. padding-bottom:10px;
  306. {/block:ifslimversion}
  307. }
  308.  
  309. .nav a:hover {
  310. transition:.5s;
  311. color:{color:nav link hover};
  312. }
  313.  
  314. .nav a:hover .fa-circle {
  315. border-left:3px solid {color:nav link hover border};
  316. transition:.5s;
  317. color:{color:nav link icon hover};
  318. }
  319.  
  320. .nav a:hover .fa-envelope-open {
  321. border-left:3px solid {color:nav link hover border};
  322. transition:.5s;
  323. color:{color:nav link icon hover};
  324. }
  325.  
  326. .nav a:hover .fa-calendar {
  327. border-left:3px solid {color:nav link hover border};
  328. transition:.5s;
  329. color:{color:nav link icon hover};
  330. }
  331.  
  332. .nav a:hover .fa-edit {
  333. border-left:3px solid {color:nav link hover border};
  334. transition:.5s;
  335. color:{color:nav link icon hover};
  336. }
  337.  
  338. .nav a:hover .fa-question-circle {
  339. border-left:3px solid {color:nav link hover border};
  340. transition:.5s;
  341. color:{color:nav link icon hover};
  342. }
  343.  
  344. .nav_header {
  345. text-transform:uppercase;
  346. font-size:11px;
  347. color:{color:sidebar text};
  348. font-weight:700;
  349. letter-spacing:1px;
  350. padding-left:40px;
  351. margin-bottom:20px;
  352. }
  353.  
  354. .fa-circle, .fa-envelope-open, .fa-calendar, .fa-edit, .fa-question-circle {
  355. margin-right:10px;
  356. width:20px;
  357. padding-left:37px;
  358. border-left:3px solid transparent;
  359. transition:.5s;
  360. padding-top:5px;
  361. padding-bottom:5px;
  362. color:{color:sidebar text};
  363. }
  364.  
  365. .credit {
  366. bottom:0;
  367. position:fixed;
  368. margin-bottom:10px;
  369. text-align:center;
  370. text-transform:uppercase;
  371. width:230px;
  372. font-size:9px;
  373. padding:10px;
  374. padding-left:0px;
  375. font-weight:700;
  376. letter-spacing:1px;
  377. color:#bbb;
  378. {block:ifslimversion}width:200px;{/block:ifslimversion}
  379. }
  380.  
  381. .fa-laptop-code {
  382. color:#bbb;
  383. margin-right:10px;
  384. }
  385.  
  386.  
  387.  
  388. /* ----------------------------------------------- header / personal info? */
  389.  
  390. .header {
  391. width:540px;
  392. margin-left:400px;
  393. margin-top:80px;
  394. background: linear-gradient(30deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  395. border-radius:{text:border radii}px;
  396. height:100px;
  397. color:#fff;
  398. {block:ifdarkheadertext}color:#222;{/block:ifdarkheadertext}
  399. {block:ifshadows}box-shadow: 0px 19px 40px -9px rgba(0,0,0,0.15);{/block:ifshadows}
  400. padding:10px;
  401. transition:.5s;
  402. position:fixed;
  403. {block:ifslimversion}
  404. padding:0px;
  405. width:520px;
  406. margin-left:300px;
  407. {/block:ifslimversion}
  408. }
  409.  
  410. .header_image {
  411. float:left;
  412. width:120px;
  413. height:120px;
  414. overflow:hidden;
  415. border-top-left-radius:{text:border radii}px;
  416. border-bottom-left-radius:{text:border radii}px;
  417. text-align:center;
  418. margin-right:20px;
  419. margin-left:-10px;
  420. margin-top:-10px;
  421. {block:ifslimversion}
  422. width:110px;
  423. height:100px;
  424. margin-left:0px;
  425. margin-top:0px;
  426. {block:ifslimversion}
  427. }
  428.  
  429. .header_image img {
  430. width:120px;
  431. height:120px;
  432. opacity:.75;
  433. transition:.5s;
  434. {block:ifslimversion}
  435. width:110px;
  436. height:110px;
  437. {block:ifslimversion}
  438. }
  439.  
  440. .header:hover .header_image img {
  441. transform:scale(1.05);
  442. transition:.5s;
  443. opacity:.85;
  444. }
  445.  
  446. .desc {
  447. font-size:11px;
  448. margin-top:10px;
  449. letter-spacing:0.5px;
  450. color:rgba(255,255,255,0.8);
  451. {block:ifdarkheadertext}color:rgba(0,0,0,0.8);{/block:ifdarkheadertext}
  452. width:380px;
  453. font-weight:400;
  454. line-height:16px;
  455. {block:ifslimversion}
  456. margin-top:20px;
  457. {block:ifslimversion}
  458. }
  459.  
  460. .follow {
  461. float:right;
  462. margin-top:36px;
  463. margin-right:28px;
  464. {block:ifslimversion}
  465. margin-top:34px;
  466. {block:ifslimversion}
  467. }
  468.  
  469. .follow a {
  470. color:#fff;
  471. text-decoration:none;
  472. font-size:11px;
  473. letter-spacing:1px;
  474. border:2px solid rgba(255,255,255,0.65);
  475. {block:ifdarkheadertext}
  476. color:#222;
  477. border:2px solid rgba(0,0,0,0.65);
  478. {/block:ifdarkheadertext}
  479. padding:7px;
  480. border-radius:{text:border radii}px;
  481. display:block;
  482. width:60px;
  483. text-align:center;
  484. {block:ifboldlinks}font-weight:700;{/block:ifboldlinks}
  485. transition:.5s;
  486. }
  487.  
  488. .follow a:hover {
  489. background:rgba(255,255,255,0.25);
  490. color:#fff;
  491. border:2px solid rgba(255,255,255,0);
  492. {block:ifdarkheadertext}
  493. background:rgba(0,0,0,0.25);
  494. color:#222;
  495. border:2px solid rgba(0,0,0,0);
  496. {/block:ifdarkheadertext}
  497. transition:.5s;
  498. }
  499.  
  500.  
  501.  
  502. /* ------------------------------------------------------- posts container */
  503.  
  504. .container {
  505. margin-left:400px;
  506. margin-top:280px;
  507. position:fixed;
  508. height:600px;
  509. width:600px;
  510. overflow:auto;
  511. {block:ifslimversion}
  512. width:570px;
  513. margin-left:300px;
  514. {/block:ifslimversion}
  515. }
  516.  
  517.  
  518.  
  519. /* ----------------------------------------------------------------- posts */
  520.  
  521. article {
  522. width:500px;
  523. padding:30px;
  524. margin-bottom:70px;
  525. transition:.5s;
  526. background:#fff;
  527. border-radius:{text:border radii}px;
  528. {block:ifshadows}box-shadow: 0px 10px 76px -23px rgba(0,0,0,0.25);{/block:ifshadows}
  529. {block:ifslimversion}
  530. padding:10px;
  531. {block:ifslimversion}
  532. }
  533.  
  534. article img {
  535. max-width:500px;
  536. }
  537.  
  538. .quote {
  539. font-weight:700;
  540. font-size:20px;
  541. margin-left:70px;
  542. margin-bottom:40px;
  543. color:{color:post text};
  544. {block:ifslimversion}
  545. margin-bottom:40px;
  546. {block:ifslimversion}
  547. }
  548.  
  549. .fa-quote-left {
  550. float:left;
  551. font-size:40px;
  552. background: linear-gradient(30deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  553. -webkit-background-clip: text;
  554. -webkit-text-fill-color: transparent;
  555. margin-right:20px;
  556. {block:ifslimversion}
  557. margin-left:10px;
  558. {/block:ifslimversion}
  559. }
  560.  
  561.  
  562.  
  563. /* --------------------------------------------- extra nav / other sidebar */
  564.  
  565. .extra_nav {
  566. margin-left:1050px;
  567. width:300px;
  568. position:fixed;
  569. padding:10px;
  570. margin-top:70px;
  571. font-size:14px;
  572. max-height:500px;
  573. overflow:auto;
  574. {block:ifslimversion}
  575. margin-left:900px;
  576. {/block:ifslimversion}
  577. }
  578.  
  579. .extra_nav a {
  580. display:block;
  581. background:#fff;
  582. {block:ifshadows}box-shadow: 0px 10px 40px -9px rgba(0,0,0,0.15);{/block:ifshadows}
  583. width:220px;
  584. padding:20px;
  585. padding-left:15px;
  586. border-radius:{text:border radii}px;
  587. text-align:left;
  588. color:{color:post text};
  589. text-decoration:none;
  590. margin-bottom:30px;
  591. transition:.5s;
  592. letter-spacing:0.5px;
  593. font-weight:normal;
  594. border-left:5px solid transparent;
  595. {block:ifslimversion}
  596. padding:10px;
  597. {block:ifslimversion}
  598. }
  599.  
  600. .extra_nav a:hover {
  601. color:{color:nav link hover};
  602. transform:translateX(15px);
  603. border-left:5px solid {color:gradient color 1};
  604. }
  605.  
  606. .fa-user, .fa-tags, .fa-code, .fa-behance, .fa-codepen, .fa-deviantart, .fa-discord, .fa-instagram, .fa-reddit-alien, .fa-twitter, .fa-twitch {
  607. background: linear-gradient(30deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  608. color:#fff;
  609. {block:ifdarkcustomlinkicons}color:#222;{/block:ifdarkcustomlinkicons}
  610. border-radius:{text:post avatars border radius}px;
  611. padding:15px;
  612. width:14px;
  613. margin-right:15px;
  614. transition:.5s;
  615. float:left;
  616. margin-top:-5px;
  617. text-align:center;
  618. {block:ifslimversion}
  619. padding:10px;
  620. margin-top:2px;
  621. {block:ifslimversion}
  622. }
  623.  
  624. .extra_nav a:hover .fa-user {
  625. transition:.5s;
  626. }
  627.  
  628. .extra_nav a:hover .fa-tags {
  629. transition:.5s;
  630. }
  631.  
  632. .extra_nav a:hover .fa-code {
  633. transition:.5s;
  634. }
  635.  
  636.  
  637.  
  638. /* ------------------------------------------------------------- searchbar */
  639.  
  640. #search {
  641. margin-left:400px;
  642. margin-top:20px;
  643. position:fixed;
  644. {block:ifslimversion}
  645. margin-left:300px;
  646. {/block:ifslimversion}
  647. }
  648.  
  649. .search {
  650. width:260px;
  651. outline:none;
  652. border-bottom:1px solid transparent;
  653. border-left:none;
  654. border-right:none;
  655. border-top:none;
  656. padding:15px;
  657. background:none;
  658. font-size:11px;
  659. color:{color:post text};
  660. letter-spacing:1px;
  661. font-family:{select:theme font};
  662. transition:.5s;
  663. font-weight:700;
  664. padding-bottom:5px;
  665. }
  666.  
  667. .search:focus {
  668. transition:.5s;
  669. }
  670.  
  671. input[type=text] {
  672. color:{color:post text};
  673. }
  674.  
  675. input::placeholder {
  676. color:{color:post text};
  677. font-weight:700;
  678. font-family:{select:theme font};
  679. text-transform:uppercase;
  680. }
  681.  
  682. input[type=submit] {
  683. display:none;
  684. }
  685.  
  686. .fa-search {
  687. color:{color:gradient color 1};
  688. font-size:12px;
  689. }
  690.  
  691.  
  692.  
  693. /* ---------------------------------------------------- un-nested captions */
  694.  
  695. .caption {
  696. margin-top:-10px;
  697. margin-left:-10px;
  698. font-size:12px;
  699. hyphens: auto;
  700. }
  701.  
  702. .caption img {
  703. max-width:480px;
  704. margin-top:10px;
  705. }
  706.  
  707. /* reblogs */
  708. blockquote.tumblr_parent {
  709. background:none;
  710. margin-left:0px;
  711. border-radius:5px;
  712. padding:10px;
  713. width:480px;
  714. max-width:480px;
  715. word-break:break-word;
  716. color:#222;
  717. padding-left:20px;
  718. font-size:12px;
  719. margin-top:20px;
  720. line-height:20px;
  721. hyphens: auto;
  722. }
  723.  
  724. /* non-reblogged original post */
  725. .originalpost blockquote.tumblr_parent {
  726. padding:20px;
  727. width:480px;
  728. margin:0;
  729. color:#222;
  730. background:transparent!important;
  731. padding-left:0px;
  732. text-align:left;
  733. font-size:12px;
  734. hyphens: auto;
  735. }
  736.  
  737. /* non-reblogged original post */
  738. .caption.originalpost {
  739. margin:-5px 0;
  740. line-height:30px;
  741. background:transparent!important;
  742. margin-top:10px;
  743. border:none;
  744. font-size:12px;
  745. hyphens: auto;
  746. }
  747.  
  748. /* reblogs; tumblr user icons */
  749. img.tumblr_avatar {
  750. margin-right:10px;
  751. margin-top:0px!important;
  752. height:25px;
  753. width:25px;
  754. margin-left:0px;
  755. float:left;
  756. border-radius:{text:post avatars border radius}px!important;
  757. vertical-align:-20%!important;
  758. color:#fff;
  759. font-size:12px;
  760. background: linear-gradient(30deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  761. padding:3px;
  762. }
  763.  
  764. /* reblogs; tumblr user names */
  765. .caption a.tumblr_blog {
  766. font-size:12px;
  767. line-height:20px;
  768. color:#222;
  769. display:block;
  770. padding:5px;
  771. padding-bottom:20px;
  772. text-decoration:none;
  773. font-weight:700;
  774. background:transparent;
  775. transition:.5s;
  776. letter-spacing:1px;
  777. }
  778.  
  779. /* reblogs; tumblr user names hover */
  780. .caption a:hover.tumblr_blog {
  781. color:{color:gradient color 1};
  782. transition:.5s;
  783. }
  784.  
  785.  
  786.  
  787. /* ------------------------------------------------------------- post info */
  788.  
  789. .postinfo {
  790. border-bottom:1px solid rgba(0,0,0,0.05);
  791. margin-right:40px;
  792. width:480px;
  793. padding:10px;
  794. margin-bottom:40px;
  795. text-align:right;
  796. font-size:11px;
  797. }
  798.  
  799. .postinfo img {
  800. border-radius:{text:post avatars border radius}px;
  801. vertical-align:middle;
  802. margin-left:10px;
  803. }
  804.  
  805. .postinfo a {
  806. letter-spacing:1px;
  807. }
  808.  
  809. .date {
  810. float:left;
  811. margin-top:7px;
  812. font-weight:700;
  813. }
  814.  
  815.  
  816.  
  817. /* ------------------------------------------------------------ pagination */
  818.  
  819. .pagination {
  820. position:fixed;
  821. margin-left:885px;
  822. margin-top:32px;
  823. font-size:20px;
  824. {block:ifslimversion}
  825. margin-left:745px;
  826. {/block:ifslimversion}
  827. }
  828.  
  829. .pagination_next {
  830. position:fixed;
  831. margin-left:60px;
  832. }
  833.  
  834. .pagination_previous {
  835. position:fixed;
  836. }
  837.  
  838.  
  839.  
  840. /* ------------------------------------------------------------ audio post */
  841.  
  842. iframe.tumblr_audio_player {
  843. height:85px;!important
  844. }
  845.  
  846. .audio_player {
  847. width:32px;
  848. overflow:hidden;
  849. transform:scale(1.1);
  850. }
  851.  
  852. .audio_player_container {
  853. margin-left:20px;
  854. margin-top:30px;
  855. }
  856.  
  857. .audio_player_bg {
  858. border-radius:{text:border radii}px;
  859. width:505px;
  860. height:75px;
  861. text-align:center;
  862. padding:5px;
  863. background: linear-gradient(30deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  864. {block:ifslimversion}
  865. width:490px;
  866. {block:ifslimversion}
  867. }
  868.  
  869. .audio_info {
  870. float:right;
  871. text-align:right;
  872. margin-top:0px;
  873. margin-top:23px;
  874. font-size:12px;
  875. color:#fff;
  876. {block:ifdarkheadertext}color:#222;{/block:ifdarkheadertext}
  877. {block:ifslimversion}
  878. margin-right:10px;
  879. {/block:ifslimversion}
  880. }
  881.  
  882. .fa-music {
  883. margin-right:5px;
  884. border-right:1px solid rgba(255,255,255,0.5);
  885. padding-right:10px;
  886. }
  887.  
  888.  
  889.  
  890. /* ------------------------------------------------------------- ask posts */
  891.  
  892. .question {
  893. font-size:12px;
  894. padding:10px;
  895. border-bottom:1px solid rgba(0,0,0,0.05);
  896. }
  897.  
  898. .asker {
  899. background:#f9f9f9;
  900. padding:10px;
  901. border-radius:{text:border radii}px;
  902. }
  903.  
  904. .asker a {
  905. color:{color:post text};
  906. }
  907.  
  908. .asker img {
  909. vertical-align:middle;
  910. border-radius:{text:post avatars border radius}px;
  911. }
  912.  
  913. .asker-question {
  914. padding:10px;
  915. }
  916.  
  917. .answer {
  918. margin-left:0px;
  919. text-align:right;
  920. }
  921.  
  922.  
  923.  
  924. /* ------------------------------------------------------------------ tags */
  925.  
  926. .tags {
  927. border-top:1px solid rgba(0,0,0,0.05);
  928. margin-right:40px;
  929. width:480px;
  930. padding:10px;
  931. text-align:center;
  932. font-size:11px;
  933. }
  934.  
  935. .tags a {
  936. letter-spacing:0.5px;
  937. }
  938.  
  939. </style>
  940. </head>
  941.  
  942.  
  943. <!--- audio player styling --->
  944. <script>
  945. $(document).ready(function() {
  946. $('iframe.tumblr_audio_player').load( function() {
  947. $('iframe.tumblr_audio_player').contents().find("head")
  948. .append($("<style type='text/css'> .audio-player{background:transparent; color:#fff;} </style>"));
  949. });
  950. });
  951. </script>
  952.  
  953.  
  954.  
  955. <body>
  956.  
  957. <div class="sidebar">
  958. <div class="sidebar_title"><i class="{select:blog title icon}"></i> {Title}</div>
  959.  
  960. <div class="nav">
  961. <div class="nav_header">main</div>
  962. <a href="/"><i class="far fa-circle"></i> Refresh</a>
  963. <a href="/ask"><i class="far fa-envelope-open"></i> Message</a>
  964. <a href="/archive"><i class="far fa-calendar"></i> Archive</a>
  965. <a href="/submit"><i class="far fa-edit"></i> Submit</a>
  966. <a href="/random"><i class="far fa-question-circle"></i> Random post</a>
  967. </div>
  968.  
  969. <div class="credit"><i class="fas fa-laptop-code"></i> made by wizardhut</div>
  970. </div>
  971.  
  972.  
  973. <div id="search">
  974. <form action="/search" method="get">
  975. <i class="fas fa-search"></i> <input type="text" name="q" value="{SearchQuery}" class="search" autocomplete="off" placeholder="search"/>
  976. <input type="submit" value="GO">
  977. </form>
  978. </div>
  979.  
  980. {block:Pagination}
  981. <div class="pagination">
  982. {block:NextPage}
  983. <div class="pagination_next"><a href="{NextPage}"><i class="fas fa-angle-right"></i></a></div>
  984. {/block:NextPage}
  985.  
  986. {block:PreviousPage}
  987. <div class="pagination_previous"><a href="{PreviousPage}"><i class="fas fa-angle-left"></i></a></div>
  988. {/block:PreviousPage}
  989. </div>
  990. {/block:Pagination}
  991.  
  992. <div class="header">
  993. <div class="header_image">
  994. <img src="{PortraitURL-128}">
  995. </div>
  996.  
  997. <div class="follow">
  998. <a href="/">Follow</a>
  999. </div>
  1000.  
  1001. <div class="desc">
  1002. <span style="letter-spacing:1px;font-size:17px;color:#fff;{block:ifdarkheadertext}color:#222;{/block:ifdarkheadertext}font-weight:700;">@ {Name}</span><p>
  1003. {text:header blurb}
  1004. </div>
  1005.  
  1006. </div>
  1007.  
  1008.  
  1009. <div class="extra_nav">
  1010.  
  1011. <div class="nav_header" style="padding-left:0px;">more links</div>
  1012.  
  1013. <a href="{text:custom link 1 url}"><i class="{select:custom link 1 icon}"></i> <b>{text:custom link 1 name}</b><br><span style="opacity:0.6;font-weight:500;font-size:11px;letter-spacing:0.5px;">{text:custom link 1 subtitle}</span></a>
  1014.  
  1015. <a href="{text:custom link 2 url}"><i class="{select:custom link 2 icon}"></i> <b>{text:custom link 2 name}</b><br><span style="opacity:0.6;font-weight:500;font-size:11px;letter-spacing:0.5px;">{text:custom link 2 subtitle}</span></a>
  1016.  
  1017. <a href="{text:custom link 3 url}"><i class="{select:custom link 3 icon}"></i> <b>{text:custom link 3 name}</b><br><span style="opacity:0.6;font-weight:500;font-size:11px;letter-spacing:0.5px;">{text:custom link 3 subtitle}</span></a>
  1018.  
  1019. {block:ifshowcustomlink4}<a href="{text:custom link 4 url}"><i class="{select:custom link 4 icon}"></i> <b>{text:custom link 4 name}</b><br><span style="opacity:0.6;font-weight:500;font-size:11px;letter-spacing:0.5px;">{text:custom link 4 subtitle}</span></a>{/block:ifshowcustomlink4}
  1020.  
  1021.  
  1022. </div>
  1023.  
  1024.  
  1025. <div class="container">
  1026. {block:Posts}
  1027. <article id="p-{PostType}" class="post">
  1028.  
  1029. <div class="postinfo">
  1030.  
  1031. <div class="date">{ShortMonth} {DayOfMonthWithSuffix}</div>
  1032.  
  1033. {block:NotReblog}
  1034. Posted by <b>{Name}</b> <img src="{PortraitURL-30}">
  1035. {/block:NotReblog}
  1036.  
  1037. {block:RebloggedFrom}
  1038. Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a> <img src="{ReblogParentPortraitURL-30}">
  1039. {/block:RebloggedFrom}
  1040.  
  1041. </div>
  1042.  
  1043. {block:Quote}
  1044. <span class="fas fa-quote-left"></span>
  1045. <div class="quote">{Quote}</div>
  1046. {/block:Quote}
  1047.  
  1048.  
  1049. {block:Photo}
  1050. <img src="{PhotoURL-500}">
  1051. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1052. {/block:Photo}
  1053.  
  1054.  
  1055. {block:Text}
  1056. {block:Title}<h1>{Title}</h1>{/block:Title}
  1057. <div class="caption">{Body}</div>
  1058. {/block:Text}
  1059.  
  1060.  
  1061. {block:Photoset}
  1062. {Photoset-500}
  1063. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1064. {/block:Photoset}
  1065.  
  1066.  
  1067. {block:Video}
  1068. {Video-500}
  1069. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1070. {/block:Video}
  1071.  
  1072.  
  1073. {block:Audio}
  1074. <div class="audio_info">
  1075. {block:TrackName}
  1076. <span style="font-size:20px;font-weight:700;letter-spacing:1px;"><i class="fas fa-music"></i> {TrackName}</span>
  1077. {/block:TrackName}
  1078. <br>
  1079. {block:Artist}
  1080. <span style="opacity:0.7;">{Artist}</span>
  1081. {/block:Artist}
  1082. </div>
  1083.  
  1084. <div class="audio_player_bg">
  1085. <div class="audio_player_container">
  1086. <div class="audio_player">{AudioPlayer}</div>
  1087. </div>
  1088. </div>
  1089. {/block:Audio}
  1090.  
  1091.  
  1092. {block:Answer}
  1093. <div class="question">
  1094. <div class="asker"><img src="{AskerPortraitURL-30}"> {Asker}</div>
  1095. <div class="asker-question">{Question}</div>
  1096. </div>
  1097.  
  1098. <div class="answer">
  1099. <div class="caption">{Answer}</div>
  1100. </div>
  1101. {/block:Answer}
  1102.  
  1103.  
  1104. {block:HasTags}
  1105. <div class="tags">
  1106. {block:Tags}
  1107. <a href="{TagURL}">#{Tag}</a>&nbsp;
  1108. {/block:Tags}
  1109. {/block:HasTags}
  1110.  
  1111.  
  1112. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}{block:RebloggedFrom}<!-- {ReblogParentName} -->{/block:RebloggedFrom}
  1113.  
  1114. </article>
  1115. {/block:Posts}
  1116. </div>
  1117.  
  1118.  
  1119.  
  1120.  
  1121. </body>
  1122. </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!