API tools faq
paste
codesbyjack

THEME #26 roald / made by jinsoouls

codesbyjack
Jun 27th, 2021 (edited)
1,819
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. roald by jinsoouls
  6. you know the deal, the usual rules
  7. apply, don't remove credit,
  8. repost or claim as your own!
  9.  
  10. -->
  11.  
  12. <meta name="color:container" content="#f6f6f6"/>
  13. <meta name="color:background" content="#eeeeee"/>
  14. <meta name="color:posts" content="#ffffff"/>
  15. <meta name="color:border" content="#eeeeee"/>
  16. <meta name="color:accent" content="#dfd6d4"/>
  17. <meta name="color:accent 2" content="#dfd6d4"/>
  18. <meta name="color:accent 3" content="#dfd6d4"/>
  19. <meta name="color:scroll text" content="#dfd6d4"/>
  20. <meta name="color:description text" content="#ffffff"/>
  21. <meta name="color:accent text" content="#ffffff"/>
  22. <meta name="color:text" content="#313131"/>
  23. <meta name="color:title" content="#313131"/>
  24. <meta name="color:bold" content="#7e7e7e"/>
  25. <meta name="color:italic" content="#7e7e7e"/>
  26. <meta name="color:border" content="#eeeeee"/>
  27. <meta name="color:link" content="#4c4c4c"/>
  28. <meta name="color:hover link" content="#b0b0b0"/>
  29.  
  30. <meta name="image:background" content=""/>
  31. <meta name="image:sidebar" content=""/>
  32. <meta name="image:nav png" content=""/>
  33.  
  34. <meta name="if:show updates" content="0"/>
  35. <meta name="if:muse tab" content="0"/>
  36. <meta name="if:big title" content="0"/>
  37.  
  38. <meta name="text:free link" content="/link"/>
  39. <meta name="text:free link title" content="free link"/>
  40.  
  41. <meta name="select:free link icon" content="heart" title="heart">
  42. <meta name="select:free link icon" content="bell" title="bell">
  43. <meta name="select:free link icon" content="cloud" title="cloud">
  44. <meta name="select:free link icon" content="user" title="user">
  45. <meta name="select:free link icon" content="plus" title="plus">
  46. <meta name="select:free link icon" content="settings" title="settings">
  47. <meta name="select:free link icon" content="moon" title="moon">
  48. <meta name="select:free link icon" content="tag" title="tag">
  49.  
  50. <meta name="text:big title" content="bittersweet"/>
  51. <meta name="text:title" content="so bitter so sweet"/>
  52.  
  53. <meta name="text:description" content="if i give my hand and expect your heart my selfishness grows to a flaw filling the void between us filling the heart with more emptiness"/>
  54.  
  55. <meta name="text:nav description" content=" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
  56. <meta name="text:information" content="you could put mun info or tracking stats here. go crazy, i scroll but look best at three lines."/>
  57.  
  58. <meta name="text:muse tab title" content="eyes meeting but hearts apart"/>
  59.  
  60. <meta name="text:nav link 1" content="/1"/>
  61. <meta name="text:nav link 1 title" content="link one"/>
  62. <meta name="text:nav link 2" content="/2"/>
  63. <meta name="text:nav link 2 title" content="link two"/>
  64. <meta name="text:nav link 3" content="/3"/>
  65. <meta name="text:nav link 3 title" content="link three"/>
  66. <meta name="text:nav link 4" content="/4"/>
  67. <meta name="text:nav link 4 title" content="link four"/>
  68. <meta name="text:nav link 5" content="/5"/>
  69. <meta name="text:nav link 5 title" content="link five"/>
  70. <meta name="text:nav link 6" content="/6"/>
  71. <meta name="text:nav link 6 title" content="link six"/>
  72.  
  73. <meta name="text:number of updates" content="1"/>
  74. <meta name="text:updates" content="this is your updates content"/>
  75.  
  76. <meta name="text:nav png width" content="160px"/>
  77.  
  78. <head>
  79.  
  80. <title>{Title}</title>
  81. <link rel="shortcut icon" href="{Favicon}">
  82. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  83. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  84.  
  85. <!-- jquery -->
  86. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  87.  
  88. <!-- script for tooltips -->
  89. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  90.  
  91. <!-- feather icons-->
  92. <script src="https://unpkg.com/feather-icons"></script>
  93.  
  94. <!-- google fonts -->
  95. <link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
  96.  
  97. <!-- photoset.css by annathms and espoirthemes -->
  98. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  99.  
  100. <!-- autoresize video script by shythemes -->
  101. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  102.  
  103. <!-- animate.css -->
  104. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  105.  
  106. <style>
  107.  
  108. ::-webkit-scrollbar {
  109. width: 1px;
  110. height: 1px;
  111. background: transparent;
  112. }
  113.  
  114. ::-webkit-scrollbar-thumb {
  115. background: transparent;
  116. }
  117.  
  118. ::selection {
  119. color:{color:accent text};
  120. background-color: {color:accent};
  121. }
  122.  
  123. ::-moz-selection {
  124. color:{color:accent text};
  125. background-color: {color:accent};
  126. }
  127.  
  128. #s-m-t-tooltip {
  129. max-width:300px;
  130. padding:10px;
  131. margin:20px 7px 2px 20px;
  132. background-color:{color:accent};
  133. text-transform:lowercase;
  134. color:{color:accent text};
  135. z-index:999999999999999999999999999999999999;
  136. font-weight:700;
  137. border-radius:5px;
  138. box-shadow:0px 2.5px 5px rgba(0,0,0,0.04);
  139. }
  140.  
  141.  
  142. body {
  143. background:{color:background};
  144. background-image:url({image:background});
  145. color:{color:text};
  146. font-family: 'Muli', sans-serif;
  147. font-size:12px;
  148. overflow:hidden;
  149. line-height:100%;
  150. }
  151.  
  152. html {
  153. scroll-behavior: smooth;
  154. }
  155.  
  156. blockquote {
  157. padding-left:20px;
  158. width:auto;
  159. margin-left:10px;
  160. border-left:1px solid {color:border};
  161. }
  162.  
  163. blockquote blockquote {
  164. padding-left:20px;
  165. margin-left:10px;
  166. border-left:1px solid {color:border};
  167. }
  168.  
  169. blockquote img {max-width:100%;}
  170.  
  171. h1 {
  172. font-size:30px;
  173. color:{color:accent};
  174. text-align:center;
  175. letter-spacing:1px;
  176. text-transform:lowercase;
  177. line-height:100%;
  178. margin:20px 0;
  179. }
  180.  
  181. h2 {
  182. font-size:19px;
  183. color:{color:accent};
  184. text-align:center;
  185. line-height:100%;
  186. margin:20px 0;
  187. text-transform:lowercase;
  188. font-weight:normal;
  189. }
  190.  
  191. a {
  192. text-decoration:none;
  193. color:{color:link};
  194. -moz-transition-duration:0.8s;
  195. -webkit-transition-duration:0.8s;
  196. -o-transition-duration:0.8s;
  197. }
  198.  
  199. a:hover {
  200. color:{color:hover link};
  201. -moz-transition-duration:0.8s;
  202. -webkit-transition-duration:0.8s;
  203. -o-transition-duration:0.8s;
  204. }
  205.  
  206. b {color:{color:bold};}
  207. strong {color:{color:bold}}
  208. i {color:{color:italic};}
  209. em {color:{color:italic};}
  210. sub {font-size:11px;}
  211. sup {font-size:11px;}
  212. small {font-size:11px;}
  213.  
  214. .container {
  215. width:650px;
  216. height:525px;
  217. position:absolute;
  218. margin:auto;
  219. top:0; left:120px; right:0; bottom:0;
  220. background-color:{color:container};
  221. box-shadow:0px 5px 10px rgba(0,0,0,0.02);
  222. }
  223.  
  224. #entries {
  225. position: absolute;
  226. height:100%;
  227. padding:0px 30px;
  228. width:auto;
  229. right:0px;
  230. top:0px;
  231. overflow:scroll;
  232. z-index:5;
  233. }
  234.  
  235. .post {
  236. padding:20px;
  237. width:420px;
  238. background-color:{color:posts};
  239. margin:30px 0px;
  240. line-height:130%;
  241. overflow:hidden;
  242. border-radius:15px;
  243. box-shadow:0px 5px 10px rgba(0,0,0,0.03);
  244. }
  245.  
  246. .post img {
  247. max-width:100%;
  248. height:auto;
  249. width:auto;
  250. }
  251.  
  252. /* post info styling */
  253. .postinfo-top {
  254. width:calc(100% + 20px);
  255. padding:10px;
  256. letter-spacing:0.5px;
  257. border-bottom:1px solid {color:border};
  258. margin:-20px 0px 20px -20px;
  259. display:flex;
  260. justify-content:flex-start;
  261. align-items:center;
  262. }
  263.  
  264. .postinfo {
  265. width:calc(100% + 20px);
  266. padding:10px;
  267. letter-spacing:0.5px;
  268. border-top:1px solid {color:border};
  269. margin:20px 0px -20px -20px;
  270. display:flex;
  271. justify-content:flex-end;
  272. align-items:center;
  273. }
  274.  
  275. .post-inner a {
  276. color:{color:text};
  277. line-height:1;
  278. text-transform:uppercase;
  279. font-size:10px;
  280. font-weight:500;
  281. display:flex;
  282. flex-direction:row;
  283. justify-content:center;
  284. align-items:center;
  285. }
  286.  
  287. .post-inner .feather {
  288. width:12px;
  289. height:12px;
  290. stroke:{color:accent};
  291. margin:0px 5px;
  292. margin-right:7.5px;
  293. }
  294.  
  295. .dotz {
  296. margin:0px 7.5px;
  297. font-size:6px;
  298. opacity:0.3;
  299. }
  300.  
  301. .reblog-icon {
  302. -moz-transition-duration:0.8s;
  303. -webkit-transition-duration:0.8s;
  304. -o-transition-duration:0.8s;
  305. }
  306.  
  307. #reblogz:hover .reblog-icon {
  308. transform:translate(1.5px,0);
  309. -moz-transition-duration:0.8s;
  310. -webkit-transition-duration:0.8s;
  311. -o-transition-duration:0.8s;
  312. }
  313.  
  314. .tags {
  315. font-size:10px;
  316. letter-spacing:0.5px;
  317. width:390px;
  318. text-align:left;
  319. line-height:120%;
  320. padding:5px 10px;
  321. margin:-27.5px 0px 30px 0px;
  322. }
  323.  
  324. .tags .dotty {
  325. margin:5px;
  326. color:{color:accent};
  327. }
  328.  
  329. .postnote {
  330. background-color:{color:posts};
  331. text-transform:lowercase;
  332. text-align:left;
  333. margin: 0px 0px 20px 20px;
  334. width:370px;
  335. padding: 10px;
  336. border-radius:10px;
  337. box-shadow:0px 5px 10px rgba(0,0,0,0.01);
  338. }
  339.  
  340. .postnote li {
  341. margin:5px 0px;
  342. }
  343. /* end post info styling */
  344.  
  345. /* different post types styling */
  346. .question {
  347. padding:20px 10px;
  348. text-align:center;
  349. border:1px solid {color:border};
  350. border-bottom:none;
  351. border-radius:7.5px 7.5px 0px 0px;
  352. }
  353.  
  354. .askerdiv {
  355. padding:5px 10px;
  356. text-align:right;
  357. border:1px solid {color:border};
  358. color:{color:text};
  359. text-transform:uppercase;
  360. font-size:10px;
  361. letter-spacing:0.25px;
  362. border-radius:0px 0px 7.5px 7.5px;
  363. }
  364.  
  365. .askerdiv a {
  366. color:{color:text};
  367. font-weight:700;
  368. }
  369.  
  370. .askerdiv .askbar {
  371. display:inline-block;
  372. height:1px;
  373. width:100px;
  374. background-color:{color:accent};
  375. transform:translateY(-2.5px);
  376. margin-right:10px;
  377. }
  378.  
  379.  
  380. .quotediv {
  381. font-size:15px;
  382. text-align:center;
  383. border:1px solid {color:border};
  384. border-bottom:none;
  385. padding:20px 10px;
  386. text-transform:lowercase;
  387. line-height:150%;
  388. border-radius:7.5px 7.5px 0px 0px;
  389. }
  390.  
  391. .quoteinfo {
  392. color:{color:text};
  393. font-weight:600;
  394. padding:5px 10px;
  395. border:1px solid {color:border};
  396. text-transform:uppercase;
  397. font-size:10px;
  398. letter-spacing:0.25px;
  399. text-align:right;
  400. margin-bottom:20px;
  401. border-radius:0px 0px 7.5px 7.5px;
  402. }
  403.  
  404. .quoteinfo .quotebar {
  405. display:inline-block;
  406. height:1px;
  407. width:100px;
  408. background-color:{color:accent};
  409. transform:translateY(-2.5px);
  410. margin-right:10px;
  411. }
  412.  
  413. .chats {
  414. font-size:13px;
  415. line-height:150%;
  416. }
  417.  
  418.  
  419. .audioplayer {
  420. text-align:left;
  421. padding:20px;
  422. border:1px solid {color:border};
  423. font-size:13px;
  424. height:27.5px;
  425. border-radius:7.5px;
  426. margin-bottom:20px;
  427. }
  428.  
  429. .audioinfo {
  430. color:{color:text};
  431. width:100%;
  432. text-align:right;
  433. margin-top:-30px;
  434. letter-spacing:0.4px;
  435. font-weight:600;
  436. line-height:70%;
  437. }
  438.  
  439. .audioinfo div {
  440. font-size:13px;
  441. font-weight:lighter;
  442. }
  443.  
  444. .readmore {
  445. width:100%;
  446. text-transform:uppercase;
  447. text-align:center;
  448. margin-bottom:10px;
  449. padding:20px 0px;
  450. }
  451.  
  452. .readmore a {
  453. font-size:10px;
  454. line-height:1;
  455. letter-spacing:1px;
  456. background-color:{color:accent};
  457. padding:10px 15px;
  458. color:{color:accent text};
  459. font-weight:800;
  460. border-radius:10px;
  461. }
  462.  
  463. .readmore a:hover {
  464. background-color:{color:accent text};
  465. color:{color:accent};
  466. }
  467.  
  468.  
  469. .photoset-grid {
  470. grid-gap: 1px;
  471. width:calc(100% + 40px);
  472. margin:-20px 0px -20px -20px;
  473. }
  474.  
  475.  
  476. .photoset-grid img {
  477. vertical-align:top;
  478. }
  479.  
  480. .photoset-grid div {
  481.  
  482. vertical-align:top;
  483. }
  484.  
  485. [photoset-layout] div {
  486. cursor: pointer;
  487. }
  488.  
  489. [photoset-layout] div {
  490. vertical-align:top;
  491. }
  492.  
  493. /* tumblr controls styling by cyantists */
  494. iframe.tmblr-iframe {
  495. z-index:99999999999999!important;
  496. top:0!important;
  497. right:0!important;
  498. opacity:0.4;
  499. /* delete invert(1) from here */
  500. filter:invert(1) contrast(150%);
  501. -webkit-filter:invert(1) contrast(150%);
  502. -o-filter:invert(1) contrast(150%);
  503. -moz-filter:invert(1) contrast(150%);
  504. -ms-filter:invert(1) contrast(150%);
  505. /* to here if your blog has a dark background */
  506. transform:scale(0.65);
  507. transform-origin:100% 0;
  508. -webkit-transform:scale(0.65);
  509. -webkit-transform-origin:100% 0;
  510. -o-transform:scale(0.65);
  511. -o-transform-origin:100% 0;
  512. -moz-transform:scale(0.65);
  513. -moz-transform-origin:100% 0;
  514. -ms-transform:scale(0.65);
  515. -ms-transform-origin:100% 0;}
  516.  
  517. iframe.tmblr-iframe:hover {
  518. opacity:0.6!important;}
  519.  
  520. /* side tab control styling */
  521. .tabcontainer {
  522. position:absolute;
  523. right:0px;
  524. top:0px;
  525. width:500px;
  526. height:100%;
  527. display:none;
  528. z-index:9;
  529. }
  530.  
  531. .close {
  532. position:absolute;
  533. border-radius:100%;
  534. width:30px;
  535. height:30px;
  536. font-size:14px;
  537. color:{color:accent text};
  538. right:15px;
  539. line-height:25px;
  540. top:15px;
  541. text-align:center;
  542. z-index:999999999999;
  543. border-radius:100%;
  544. -moz-transition-duration:0.8s;
  545. -webkit-transition-duration:0.8s;
  546. -o-transition-duration:0.8s;
  547. }
  548.  
  549. .close .feather {
  550. width:16px;
  551. height:16px;
  552. margin-top:7px;
  553. }
  554.  
  555. .close:hover {
  556. cursor: pointer;
  557. color:{color:accent};
  558. -moz-transition-duration:0.8s;
  559. -webkit-transition-duration:0.8s;
  560. -o-transition-duration:0.8s;
  561. }
  562.  
  563. /* wave svg styling */
  564. .wave {
  565. position:absolute;
  566. top:0;
  567. left:0;
  568. z-index:1;
  569. }
  570.  
  571. /* sidebar styling */
  572. .sidebar {
  573. width:230px;
  574. height:300px;
  575. background:{color:container};
  576. position:absolute;
  577. left:-150px;
  578. bottom:40px;
  579. overflow:scroll;
  580. z-index:2;
  581. border-radius:25px;
  582. border:15px solid {color:posts};
  583. box-shadow:0px 5px 10px rgba(0,0,0,0.03);
  584. scroll-behavior: smooth;
  585. }
  586.  
  587. .sidebar .top {
  588. width:100%;
  589. height:300px;
  590. background:grey;
  591. position:relative;
  592. background-size:cover;
  593. background-position:bottom;
  594. background-image:url('{image:sidebar}');
  595. }
  596.  
  597.  
  598. .sidebar .scroll-btn {
  599. position:absolute;
  600. bottom:10px;
  601. width:100%;
  602. color:{color:scroll text};
  603. text-align:center;
  604. font-size:9px;
  605. font-weight:700;
  606. text-transform:uppercase;
  607. display:flex;
  608. flex-direction:column;
  609. justify-content:center;
  610. align-items:center;
  611. }
  612.  
  613. .sidebar .scroll-img {
  614. width:20px;
  615. height:auto;
  616. margin-bottom:10px;
  617. }
  618.  
  619. .sidebar .bottom {
  620. width:100%;
  621. height:300px;
  622. position:relative;
  623. overflow:hidden;
  624. }
  625.  
  626. .apps {
  627. width:100%;
  628. padding:15px 0;
  629. display:flex;
  630. justify-content:space-evenly;
  631. align-items:center;
  632. }
  633.  
  634. .app {
  635. height:40px;
  636. width:40px;
  637. border-radius:10px;
  638. background:{color:accent};
  639. position:relative;
  640. cursor:pointer;
  641. }
  642.  
  643. .app .feather {
  644. position:absolute;
  645. height:20px;
  646. width:20px;
  647. color:{color:accent text};
  648. top:10px;
  649. right:10px;
  650. z-index:2;
  651. transform:rotate(0deg);
  652. -moz-transition-duration:0.8s;
  653. -webkit-transition-duration:0.8s;
  654. -o-transition-duration:0.8s;
  655. }
  656.  
  657. .app .app-bg {
  658. position:absolute;
  659. height:25px;
  660. width:25px;
  661. background:{color:accent 2};
  662. top:7.5px;
  663. left:7.5px;
  664. z-index:1;
  665. border-radius:100%;
  666. opacity:0;
  667. -moz-transition-duration:0.8s;
  668. -webkit-transition-duration:0.8s;
  669. -o-transition-duration:0.8s;
  670. }
  671.  
  672. .app:hover .feather {
  673. height:23px;
  674. width:23px;
  675. top:5px;
  676. right:5px;
  677. transform:rotate(-5deg);
  678. -moz-transition-duration:0.8s;
  679. -webkit-transition-duration:0.8s;
  680. -o-transition-duration:0.8s;
  681. }
  682.  
  683. .app:hover .app-bg {
  684. opacity:1;
  685. -moz-transition-duration:0.8s;
  686. -webkit-transition-duration:0.8s;
  687. -o-transition-duration:0.8s;
  688. }
  689.  
  690. .desc {
  691. width:calc(100% - 40px);
  692. padding:0px 20px 20px 20px;
  693. color:{color:description text};
  694. text-align:justify;
  695. line-height:2;
  696. font-size:11px;
  697. height:130px;
  698. overflow:scroll;
  699. font-weight:700;
  700. text-transform:uppercase;
  701. }
  702.  
  703. .title {
  704. position:absolute;
  705. bottom:-12px;
  706. width:330px;
  707. left:-50px;
  708. line-height:0.9;
  709. color:{color:accent};
  710. text-align:center;
  711. font-weight:900;
  712. text-transform:uppercase;
  713. font-size:50px;
  714. z-index:2;
  715. }
  716.  
  717. .top-title {
  718. z-index:2;
  719. position:absolute;
  720. width:350px;
  721. word-break: break-all;
  722. text-align:right;
  723. line-height:1;
  724. font-size:95px;
  725. color:{color:title};
  726. text-align:center;
  727. font-weight:900;
  728. left:-200px;
  729. top:40px;
  730. text-transform:uppercase;
  731. text-align:right;
  732. opacity:0.5;
  733. padding-bottom:20px;
  734. border-bottom:10px solid {color:title};
  735. }
  736.  
  737. /* updates styling */
  738. .updates-notif {
  739. cursor:pointer;
  740. z-index:5;
  741. height:16px;
  742. position:absolute;
  743. width:240px;
  744. margin:10px;
  745. font-size:10px;
  746. padding:5px 10px;
  747. border-radius:20px;
  748. background:{color:posts};
  749. text-align:center;
  750. letter-spacing:1px;
  751. font-weight:500;
  752. line-height:1.1;
  753. text-transform:uppercase;
  754. left:-160px;
  755. top:110px;
  756. box-shadow:0px 5px 10px rgba(0,0,0,0.03);
  757. }
  758.  
  759. .updates-notif .inner {
  760. position:absolute;
  761. left:0;
  762. top:5;
  763. width:100%;
  764. }
  765.  
  766. .updates-notif .inner-inner {
  767. width:100%;
  768. display:flex;
  769. justify-content:center;
  770. align-items:center;
  771. }
  772.  
  773. .updates-notif .feather {
  774. height:16px;
  775. width:16px;
  776. margin-right:10px;
  777. color:{color:accent};
  778. }
  779.  
  780.  
  781. .updates-notif b {
  782. color:{color:accent};
  783. }
  784.  
  785. #updates-notif-close {
  786. display:none;
  787. }
  788.  
  789. .updates {
  790. position:absolute;
  791. top:170px;
  792. left:-135px;
  793. max-height:200px;
  794. overflow:scroll;
  795. z-index:5;
  796. width:190px;
  797. margin:10px;
  798. padding:0px 10px 10px 10px;
  799. overflow:hidden;
  800. line-height:1.5;
  801. border-radius:10px;
  802. background:{color:posts};
  803. box-shadow:0px 5px 10px rgba(0,0,0,0.03);
  804. animation:fadeInDown 1.5s;
  805. display:none;
  806. }
  807.  
  808. .updates-title {
  809. width:calc(100% + 20px);
  810. text-align:center;
  811. margin:0px -10px 10px -10px;
  812. padding:5px 0;
  813. font-size:10px;
  814. background:{color:accent};
  815. color:{color:accent text};
  816. text-transform:uppercase;
  817. font-weight:700;
  818. }
  819.  
  820. /*nav tab styling */
  821. .info {
  822. position:absolute;
  823. top:100px;
  824. width:100px;
  825. height:80px;
  826. overflow:scroll;
  827. font-size:13px;
  828. line-height:2.5;
  829. letter-spacing:1px;
  830. padding:20px;
  831. left:-10px;
  832. text-align:right;
  833. border-right:1px solid {color:posts};
  834. border-bottom:1px solid {color:posts};
  835. }
  836.  
  837. .nav-desc {
  838. position:absolute;
  839. border:20px solid {color:posts};
  840. text-align:justify;
  841. width:250px;
  842. height:150px;
  843. top:120px;
  844. right:50px;
  845. overflow:hidden;
  846. background-color:{color:posts};
  847. line-height:2;
  848. overflow:scroll;
  849. border-radius:15px;
  850. box-shadow:0px 5px 10px rgba(0,0,0,0.03);
  851. }
  852.  
  853. .nav-png {
  854. position:absolute;
  855. width:{text:nav png width};
  856. height:auto;
  857. bottom:20px;
  858. left:10px;
  859. }
  860.  
  861. .nav-links {
  862. position:absolute;
  863. width:250px;
  864. top:320px;
  865. right:55px;
  866. display:flex;
  867. flex-wrap:wrap;
  868. justify-content:flex-start;
  869. align-items:center;
  870. }
  871.  
  872. .nav-link {
  873. cursor:pointer;
  874. width:100px;
  875. text-align:center;
  876. padding:10px 0px;
  877. border-radius:10px;
  878. text-transform:uppercase;
  879. font-weight:700;
  880. margin:10px;
  881. background:{color:accent};
  882. color:{color:accent text};
  883. -moz-transition-duration:0.8s;
  884. -webkit-transition-duration:0.8s;
  885. -o-transition-duration:0.8s;
  886. }
  887.  
  888.  
  889. .nav-link:hover {
  890. background:{color:accent 2};
  891. -moz-transition-duration:0.8s;
  892. -webkit-transition-duration:0.8s;
  893. -o-transition-duration:0.8s;
  894. }
  895.  
  896.  
  897. /* muse tab styling */
  898. .muse-title {
  899. position:absolute;
  900. top:120px;
  901. width:400px;
  902. padding:0px 0px 20px 40px;
  903. left:0px;
  904. line-height:0.9;
  905. text-align:left;
  906. font-weight:700;
  907. text-transform:uppercase;
  908. font-size:15px;
  909. z-index:2;
  910. border-bottom:1px solid {color:posts};
  911. }
  912.  
  913. .muses {
  914. position:absolute;
  915. top:170px;
  916. width:450px;
  917. height:330px;
  918. overflow:scroll;
  919. display:flex;
  920. flex-wrap:wrap;
  921. justify-content:space-evenly;
  922. align-items:center;
  923. }
  924.  
  925. .muse {
  926. cursor:pointer;
  927. height:140px;
  928. width:80px;
  929. border-radius:10px;
  930. margin:10px 5px;
  931. overflow:hidden;
  932. background:grey;
  933. box-shadow:0px 5px 10px rgba(0,0,0,0.03);
  934. }
  935.  
  936. /* pagination styling */
  937. .pagi {
  938. width:100%;
  939. margin-bottom:20px;
  940. display:flex;
  941. justify-content:center;
  942. }
  943.  
  944. .pagi div {
  945. width:80px;
  946. border-radius:10px;
  947. box-shadow:0px 5px 10px rgba(0,0,0,0.03);
  948. padding:10px;
  949. text-align:center;
  950. margin:10px;
  951. font-size:10px;
  952. font-weight:700;
  953. background:{color:accent};
  954. color:{color:accent text};
  955. text-transform:uppercase;
  956. }
  957.  
  958. .pagi .middle {
  959. width:auto;
  960. color:{color:text};
  961. background:{color:posts};
  962. }
  963.  
  964. .pagi .middle a {
  965. color:{color:accent};
  966. }
  967.  
  968. /* cried styling -- DO NOT TOUCH pls */
  969. .cred {
  970. background-color:{color:posts};
  971. position:absolute;
  972. z-index:10;
  973. bottom:15px;
  974. right:15px;
  975. padding:5px;
  976. height:20px;
  977. width:20px;
  978. border-radius:100%;
  979. display:flex;
  980. align-items:center;
  981. justify-content:center;
  982. background-color:{color:accent};
  983. box-shadow:0px 1px 5px rgba(0,0,0,0.05);
  984. }
  985.  
  986. .cred .feather {
  987. height:13px;
  988. width:13px;
  989. stroke:{color:accent text};
  990. }
  991.  
  992. .cred-prompt {
  993. position:absolute;
  994. bottom:20px;
  995. right:55px;
  996. width:65px;
  997. padding:0px 15px;
  998. border-radius:20px;
  999. height:20px;
  1000. background-color:{color:posts};
  1001. letter-spacing:0.5px;
  1002. box-shadow:0px 1px 5px rgba(0,0,0,0.05);
  1003. display:none;
  1004. line-height:20px;
  1005. font-size:9px;
  1006. text-align:center;
  1007. }
  1008. /* end cred styling */
  1009.  
  1010. </style>
  1011. </head>
  1012. <body>
  1013.  
  1014. <div class="container">
  1015. {block:IfBigTitle}
  1016. <div class="top-title">{text:big title}</div>
  1017. {/block:IfBigTitle}
  1018.  
  1019. {block:IfShowUpdates}
  1020. <div class="updates-notif" id="updates-notif">
  1021. <div class="inner" id="updates-notif-open">
  1022. <div class="inner-inner">
  1023. <i data-feather="bell"></i>
  1024. <span>you have <b>{text:number of updates}</b> new update(s)</span>
  1025. </div>
  1026. </div>
  1027. <div class="inner" id="updates-notif-close">
  1028. <div class="inner-inner">
  1029. <i data-feather="x"></i>
  1030. <span>click to close updates</span>
  1031. </div>
  1032. </div>
  1033. </div>
  1034.  
  1035. <div class="updates" id="updates">
  1036. <div class="updates-title">current updates</div>
  1037. {text:updates}
  1038. </div>
  1039. {/block:IfShowUpdates}
  1040.  
  1041. <div class="sidebar">
  1042. <div class="top" id="top">
  1043. <a href="#bottom" class="scroll-btn">
  1044. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 79.37 122.88" style="enable-background:new 0 0 79.37 122.88" xml:space="preserve" class="scroll-img"><g><path d="M50.2,121.63c6.71-1.85,12.72-5.44,17.51-10.23c7.19-7.19,11.65-17.11,11.65-28.03V39.68c0-10.92-4.46-20.84-11.65-28.03 C60.52,4.46,50.6,0,39.68,0C28.77,0,18.84,4.46,11.65,11.65C4.46,18.84,0,28.77,0,39.68v43.68c0,10.92,4.46,20.84,11.65,28.03 c5.59,5.59,12.82,9.53,20.89,11.01C37.42,123.3,45.7,122.87,50.2,121.63L50.2,121.63L50.2,121.63z M39.23,92.06 c4.15,0,7.55-3.4,7.55-7.55v-7.78c0-4.15-3.4-7.55-7.55-7.55c-4.15,0-7.55,3.4-7.55,7.55v7.78C31.68,88.66,35.07,92.06,39.23,92.06 L39.23,92.06z M61.08,104.77c-5.49,5.49-13.07,8.91-21.4,8.91c-8.33,0-15.9-3.41-21.4-8.91c-5.49-5.49-8.91-13.07-8.91-21.4V39.68 c0-8.33,3.41-15.9,8.91-21.4c5.49-5.49,13.07-8.91,21.4-8.91c8.33,0,15.9,3.41,21.4,8.91c5.49,5.49,8.91,13.07,8.91,21.4v43.68 C69.99,91.7,66.58,99.27,61.08,104.77L61.08,104.77L61.08,104.77z" fill="{color:scroll text}" /></g></svg>
  1045. scroll for navigation
  1046. </a>
  1047. </div>
  1048. <div class="bottom" id="bottom">
  1049. <div class="apps">
  1050. <a href="/" title="refresh">
  1051. <div class="app">
  1052. <i data-feather="home"></i>
  1053. <div class="app-bg"></div>
  1054. </div>
  1055. </a>
  1056. <a href="/ask" title="inbox">
  1057. <div class="app">
  1058. <i data-feather="inbox"></i>
  1059. <div class="app-bg"></div>
  1060. </div>
  1061. </a>
  1062. <a onclick="openTab('navTab')" title="navigate">
  1063. <div class="app">
  1064. <i data-feather="globe"></i>
  1065. <div class="app-bg"></div>
  1066. </div>
  1067. </a>
  1068.  
  1069. {block:IfMuseTab}
  1070. <a onclick="openTab('museTab')" title="muses">
  1071. <div class="app">
  1072. <i data-feather="user"></i>
  1073. <div class="app-bg"></div>
  1074. </div>
  1075. </a>
  1076. {block:IfMuseTab}
  1077. {block:IfNotMuseTab}
  1078. <a href="{text:free link}" title="{text:free link title}">
  1079. <div class="app">
  1080. <i data-feather="{select:free link icon}"></i>
  1081. <div class="app-bg"></div>
  1082. </div>
  1083. </a>
  1084. {block:IfNotMuseTab}
  1085. </div>
  1086. <div class="desc">{text:description}</div>
  1087. <div class="title">{text:title}</div>
  1088. <svg xmlns="http://www.w3.org/2000/svg" viewBox="200 0 640 320" style="position:absolute; bottom:0;z-index:1;">
  1089. <path fill="{color:accent 2}" fill-opacity="1" d="M0,64L48,96C96,128,192,192,288,229.3C384,267,480,277,576,256C672,235,768,181,864,154.7C960,128,1056,128,1152,133.3C1248,139,1344,149,1392,154.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
  1090. </svg>
  1091. </div>
  1092. </div>
  1093.  
  1094. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 940 500" class="wave">
  1095. <path fill="{color:accent 2}" fill-opacity="1" d="M0,192L80,176C160,160,320,128,480,117.3C640,107,800,117,960,128C1120,139,1280,149,1360,154.7L1440,160L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
  1096. </svg>
  1097.  
  1098. <!-- nav tab start -->
  1099. <div id="navTab" class="tabcontainer">
  1100. <div onclick="closeTab(this)" class="close"><span data-feather="x"></span></div>
  1101.  
  1102. <div class="info">{text:information}</div>
  1103.  
  1104. <div class="nav-desc">{text:nav description}</div>
  1105.  
  1106. <img src="{image:nav png}" class="nav-png">
  1107.  
  1108. <div class="nav-links">
  1109. <a href="{text:nav link 1}">
  1110. <div class="nav-link">{text:nav link 1 title}</div>
  1111. </a>
  1112. <a href="{text:nav link 2}">
  1113. <div class="nav-link">{text:nav link 2 title}</div>
  1114. </a>
  1115. <a href="{text:nav link 3}">
  1116. <div class="nav-link">{text:nav link 3 title}</div>
  1117. </a>
  1118. <a href="{text:nav link 4}">
  1119. <div class="nav-link">{text:nav link 4 title}</div>
  1120. </a>
  1121. <a href="{text:nav link 5}">
  1122. <div class="nav-link">{text:nav link 5 title}</div>
  1123. </a>
  1124. <a href="{text:nav link 6}">
  1125. <div class="nav-link">{text:nav link 6 title}</div>
  1126. </a>
  1127. </div>
  1128. </div>
  1129.  
  1130.  
  1131. <!-- muses tab start -->
  1132. <div id="museTab" class="tabcontainer">
  1133. <div onclick="closeTab(this)" class="close"><span data-feather="x"></span></div>
  1134. <div class="muse-title">{text:muse tab title}</div>
  1135. <div class="muses">
  1136. <!--
  1137.  
  1138. here is where you will edit muses on the muse tab
  1139. - change '/link' to wherever you want the link to link out to
  1140. - 'muse one. info.' is where all your tooltip info will go. i normally put muse info here
  1141. - you'll need to supply your own image url where is says 'image url here' the dimentions are 80x140
  1142. - please feel free to ask if you have any questions
  1143.  
  1144. -->
  1145. <a href="/link" title="muse one. info.">
  1146. <img src="https://64.media.tumblr.com/81ed083b73ceed69a40da1aa97b013bc/67ef6de89e2aaf09-02/s640x960/a27bdb6665458ed2fbaa95c5d7740e86d83f1fc6.png" class="muse">
  1147. </a>
  1148. <a href="/link" title="muse two. info.">
  1149. <img src="image url here" class="muse">
  1150. </a>
  1151. <a href="/link" title="muse three. info.">
  1152. <img src="image url here" class="muse">
  1153. </a>
  1154. <a href="/link" title="muse four. info.">
  1155. <img src="image url here" class="muse">
  1156. </a>
  1157. <a href="/link" title="muse five. info.">
  1158. <img src="image url here" class="muse">
  1159. </a>
  1160. <a href="/link" title="muse six. info.">
  1161. <img src="image url here" class="muse">
  1162. </a>
  1163. <a href="/link" title="muse seven. info.">
  1164. <img src="image url here" class="muse">
  1165. </a>
  1166. <a href="/link" title="muse eight. info.">
  1167. <img src="image url here" class="muse">
  1168. </a>
  1169. <a href="/link" title="muse nine. info.">
  1170. <img src="image url here" class="muse">
  1171. </a>
  1172. <a href="/link" title="muse ten. info.">
  1173. <img src="image url here" class="muse">
  1174. </a>
  1175. <!--
  1176.  
  1177. if you would like to add more muses copy and paste the following:
  1178.  
  1179. <a href="/link" title="muse one. info.">
  1180. <img src="image url here" class="muse">
  1181. </a>
  1182.  
  1183. -->
  1184. </div>
  1185. </div>
  1186.  
  1187. <div id="entries">
  1188. {block:Posts}
  1189. <!-- start posts-->
  1190. <div class="post" id="{PostID}">
  1191.  
  1192. {block:RebloggedFrom}
  1193. <div class="postinfo-top">
  1194. <div class="post-inner" style="margin-left:5px">
  1195. <a href="{ReblogRootURL}">
  1196. <div>posted by {ReblogRootName}</div>
  1197. </a>
  1198. </div>
  1199. </div>
  1200. {/block:RebloggedFrom}
  1201.  
  1202. {block:Text}
  1203. {block:Title}<h1>{Title}</h1>{/block:Title}
  1204. {Body}
  1205. {/block:Text}
  1206.  
  1207. {block:Quote}
  1208. <div class="quotediv">"{Quote}"</div>
  1209. {block:Source}
  1210. <div class="quoteinfo">
  1211. <div class="quotebar"></div>
  1212. {Source}
  1213. </div>
  1214. {/block:Source}
  1215. {/block:Quote}
  1216.  
  1217. {block:Chat}
  1218. {block:Title}<h1>{Title}</h1>{/block:Title}
  1219. {block:Lines}
  1220. <div class="chats">
  1221. {block:Label}<b>{Label}</b>{/block:Label}
  1222. {Line}<br>
  1223. </div>
  1224. {/block:Lines}
  1225. {/block:Chat}
  1226.  
  1227. {block:Video}
  1228. <div class="video">{Video-500}</div>{block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  1229. {/block:Video}
  1230.  
  1231. {block:Photo}
  1232. <img src="{PhotoURL-500}" style="margin:-20px 0px -25px -20px; max-width:calc(100% + 40px); ">
  1233. {block:Caption}<p style="margin-top:40px">{Caption}</p>{/block:Caption}
  1234. {/block:Photo}
  1235.  
  1236.  
  1237. {block:Photoset}
  1238. <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>
  1239. {block:Caption}<p style="margin-top:40px">{Caption}</p>{/block:Caption}
  1240. {/block:Photoset}
  1241.  
  1242. {block:Link}
  1243. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  1244. {block:Description}{Description}{/block:Description}
  1245. {/block:Link}
  1246.  
  1247.  
  1248. {block:AudioPlayer}
  1249. <div class="audioplayer">{AudioPlayer}
  1250. <div class="audioinfo">
  1251. {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  1252. {block:Artist}<br/>{Artist}{/block:Artist}
  1253. </div>
  1254. </div>
  1255. {block:Caption}<p style="margin-top:25px">{Caption}</p>{/block:Caption}
  1256. {/block:AudioPlayer}
  1257.  
  1258. {block:Answer}
  1259. <div class="question">{Question}</div>
  1260. <div class="askerdiv">
  1261. <div class="askbar"></div>asked by <b>{Asker}</b>
  1262. </div>
  1263. <div>{Answer}</div>
  1264. {/block:Answer}
  1265.  
  1266.  
  1267. {block:More}
  1268. <div class="readmore">
  1269. <a href="{Permalink}" class="more-btn">read more</a>
  1270. </div>
  1271. {/block:More}
  1272.  
  1273. <!-- to hide source and via on posts-->
  1274. {block:ContentSource}
  1275. <div style="display: none;">{SourceURL}</div>
  1276. {/block:ContentSource}
  1277.  
  1278. {block:NoRebloggedFrom}
  1279. <div style="display: none;">
  1280. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1281. </div>
  1282. {/block:NoRebloggedFrom}
  1283.  
  1284. {block:Date}
  1285. <div class="postinfo">
  1286. {block:ContentSource}
  1287. <div class="post-inner">
  1288.  
  1289. <a href="{SourceURL}" class="source-link">
  1290. <i data-feather="paperclip"></i>
  1291. <div>source</div>
  1292. </a>
  1293. </div>
  1294. <span class="dotz">•</span>
  1295. {/block:ContentSource}
  1296. <div class="post-inner">
  1297. <a href="{Permalink}" title="{TimeAgo}">
  1298. <i data-feather="calendar"></i>
  1299. <div>{MonthNumberWithZero}.{DayOfMonthWithZero}</div>
  1300. </a>
  1301. </div>
  1302. {block:NoteCount}<span class="dotz">•</span>{/block:NoteCount}
  1303. <div class="post-inner">
  1304. {block:NoteCount}
  1305. <a href="{Permalink}" title="likes & reblogs">
  1306. <i data-feather="paperclip"></i>
  1307. <div>{NoteCount}</div>
  1308. </a>
  1309. {/block:NoteCount}
  1310. </div>
  1311. <span class="dotz">•</span>
  1312. <div class="post-inner">
  1313. <a href="{ReblogURL}" id="reblogz">
  1314. <div>reblog</div>
  1315. <i data-feather="arrow-right" class="reblog-icon"></i>
  1316. </a>
  1317. </div>
  1318. </div>
  1319. {/block:Date}
  1320.  
  1321. </div>
  1322.  
  1323. {block:HasTags}
  1324. <div class="tags">
  1325. {block:Tags}
  1326. <span class="dotty">•</span><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}
  1327. </div>
  1328. {/block:HasTags}
  1329.  
  1330.  
  1331. {block:PostNotes}<div class="postnote">{PostNotes}</div>{/block:PostNotes}
  1332.  
  1333. {/block:Posts}
  1334.  
  1335. {block:Pagination}
  1336. <div class="pagi">
  1337. {block:PreviousPage}
  1338. <a href="{PreviousPage}">
  1339. <div>
  1340. previous
  1341. </div>
  1342. </a>
  1343. {/block:PreviousPage}
  1344. <div class="middle">
  1345. <a href="/page/{CurrentPage}">{CurrentPage}</a> of <a href="/page/{TotalPages}">{TotalPages}</a>
  1346. </div>
  1347. {block:NextPage}
  1348. <a href="{NextPage}">
  1349. <div>
  1350. forward
  1351. </div>
  1352. </a>
  1353. {/block:NextPage}
  1354. </div>
  1355. {/block:Pagination}
  1356.  
  1357. </div>
  1358.  
  1359. </div>
  1360.  
  1361. <!-- my credit please do not touch thanks! -->
  1362. <a href="https://jinsoouls.tumblr.com/" >
  1363. <div class="cred" id="cred">
  1364. <span data-feather="cloud"></span>
  1365. </div>
  1366. </a>
  1367. <div class="cred-prompt" id="cred-info">coded by <b>jack</b></div>
  1368. <!-- end of credit -->
  1369.  
  1370. <script>
  1371.  
  1372. feather.replace();
  1373.  
  1374. /* credit script */
  1375. $("#cred").hover(
  1376. function() {
  1377. $("#cred-info").fadeIn();
  1378. }, function() {
  1379. $("#cred-info").fadeOut();
  1380. }
  1381. );
  1382.  
  1383. /* updates script */
  1384. $("#updates-notif").click(function() {
  1385. $("#updates").fadeToggle();
  1386. $("#updates-notif-open").fadeToggle();
  1387. $("#updates-notif-close").fadeToggle();
  1388. });
  1389.  
  1390.  
  1391. /* photoset script by annathms and espoirthemes */
  1392. function gatherData(images, arr) {
  1393. for (let i = 0; i < images.length; i++) {
  1394. let currentData = {
  1395. "width": images[i].getAttribute('data-width'),
  1396. "height": images[i].getAttribute('data-height'),
  1397. "low_res": images[i].getAttribute('data-lowres'),
  1398. "high_res": images[i].getAttribute('data-highres')
  1399. };
  1400. arr.push(currentData);
  1401. }
  1402. }
  1403. function getIndex(elem) {
  1404. let i = 0;
  1405. while( (elem = elem.previousElementSibling) != null ) i++;
  1406. return i;
  1407. }
  1408. function lightbox(elem) {
  1409. let currentPhotoset = elem.parentNode;
  1410. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1411. let data = [];
  1412. gatherData(photosetPhotos, data);
  1413. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1414. }
  1415.  
  1416. /* tooltip script */
  1417. $(document).ready(function(){
  1418. $("a[title]").style_my_tooltips({
  1419. tip_follows_cursor:true,
  1420. tip_delay_time:90,
  1421. tip_fade_speed:600,
  1422. attribute:"title"
  1423. });
  1424. });
  1425.  
  1426. /* audio player color script by shudesigns */
  1427. $('iframe.tumblr_audio_player').load( function() {
  1428. $('iframe.tumblr_audio_player').contents().find("head")
  1429. .append($("<style type='text/css'> .audio-player{background:{color:posts} !important} </style>"));
  1430. });
  1431.  
  1432.  
  1433. /* tab script by me */
  1434. function openTab(tabName) {
  1435. $('.tabcontainer').each(function(index) {
  1436. if (tabName == $(this).attr('id')) {
  1437. $(this).fadeIn();
  1438. $('#entries').fadeOut();
  1439. } else {
  1440. $(this).fadeOut();
  1441. }
  1442. });
  1443. }
  1444.  
  1445. function closeTab(el) {
  1446. $(el).parent().fadeOut();
  1447. $('#entries').fadeIn();
  1448. }
  1449.  
  1450. </script>
  1451.  
  1452. </html>
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!