API tools faq
paste
Advertisement
codesbyjack

THEME #18 psycho / made by jinsoouls

codesbyjack
Jan 31st, 2020 (edited)
2,030
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. -` psycho 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:background" content="#eeeeee"/>
  13. <meta name="color:container" content="#f6f6f6"/>
  14. <meta name="color:posts" content="#ffffff"/>
  15. <meta name="color:border" content="#eeeeee"/>
  16. <meta name="color:accent 1" content="#65504b"/>
  17. <meta name="color:accent 2" content="#b09894"/>
  18. <meta name="color:accent 3" content="#282828"/>
  19. <meta name="color:accent 4" content="#282828"/>
  20. <meta name="color:title" content="#ffffff"/>
  21. <meta name="color:text" content="#424242"/>
  22. <meta name="color:accent text" content="#ffffff"/>
  23. <meta name="color:bold" content="#b09894"/>
  24. <meta name="color:italic" content="#7e7e7e"/>
  25. <meta name="color:link" content="#b09894"/>
  26. <meta name="color:hover link" content="#cfcfcf"/>
  27.  
  28. <meta name="image:background" content=""/>
  29. <meta name="image:sidebar" content=""/>
  30. <meta name="image:png" content=""/>
  31.  
  32. <meta name="select:title size" content="font60" title="60px">
  33. <meta name="select:title size" content="font50" title="50px">
  34. <meta name="select:title size" content="font40" title="40px">
  35. <meta name="select:title size" content="font30" title="30px">
  36. <meta name="select:title size" content="font25" title="25px">
  37. <meta name="select:title size" content="font20" title="20px">
  38. <meta name="select:title size" content="font15" title="15px">
  39.  
  40. <meta name="select:png width" content="200px" title="200px">
  41. <meta name="select:png width" content="250px" title="250px">
  42. <meta name="select:png width" content="300px" title="300px">
  43.  
  44. <meta name="select:description horizontal" content="desc-left" title="left">
  45. <meta name="select:description horizontal" content="desc-right" title="right">
  46. <meta name="select:description horizontal" content="desc-center" title="center">
  47.  
  48. <meta name="select:description vertical" content="desc-top" title="top">
  49. <meta name="select:description vertical" content="desc-v-center" title="center">
  50. <meta name="select:description vertical" content="desc-bottom" title="bottom">
  51.  
  52. <meta name="text:title" content="psycho.">
  53. <meta name="text:description" content="put something here don't make it too long!">
  54. <meta name="text:navigation title" content="navigation.">
  55. <meta name="text:navigation 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:link 1" content="/">
  57. <meta name="text:link 1 title" content="link one">
  58. <meta name="text:link 2" content="/">
  59. <meta name="text:link 2 title" content="link two">
  60. <meta name="text:link 3" content="/">
  61. <meta name="text:link 3 title" content="link three">
  62. <meta name="text:link 4" content="/">
  63. <meta name="text:link 4 title" content="link four">
  64. <meta name="text:link 5" content="/">
  65. <meta name="text:link 5 title" content="link five">
  66. <meta name="text:link 6" content="/">
  67. <meta name="text:link 6 title" content="link six">
  68.  
  69. <head>
  70.  
  71. <title>{Title}</title>
  72. <link rel="shortcut icon" href="{Favicon}">
  73. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  74. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  75.  
  76. <!-- jquery -->
  77. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  78.  
  79. <!-- script for tooltips -->
  80. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  81.  
  82. <!-- google fonts -->
  83. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Quicksand:300,400,500,700&display=swap" rel="stylesheet">
  84.  
  85. <!-- photoset.css by annathms and espoirthemes -->
  86. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  87.  
  88. <!-- autoresize video script by shythemes -->
  89. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  90.  
  91. <!-- honeybee by suiomi -->
  92. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  93.  
  94. <!-- animate.css -->
  95. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  96.  
  97. <style>
  98.  
  99. @font-face { font-family: "florence"; src: url(" https://dl.dropboxusercontent.com/s/4vlg8bhj6gxorxx/Florence-Regular.ttf"); }
  100.  
  101. ::-webkit-scrollbar {
  102. width: 1px;
  103. height: 1px;
  104. background: transparent;
  105. }
  106.  
  107. ::-webkit-scrollbar-thumb {
  108. background: transparent;
  109. }
  110.  
  111. ::selection {
  112. color:{color:accent text};
  113. background-color: {color:accent 2};
  114. }
  115.  
  116. ::-moz-selection {
  117. color:{color:accent text};
  118. background-color: {color:accent 2};
  119. }
  120.  
  121. #s-m-t-tooltip {
  122. max-width:300px;
  123. padding:9px 10px 8px 10px;
  124. margin:20px 7px 2px 20px;
  125. background-color:{color:accent 1};
  126. font-size:11px;
  127. text-transform:lowercase;
  128. letter-spacing:0.5px;
  129. color:{color:accent text};
  130. z-index:999999999999999999999999999999999999;
  131. border-radius:5px;
  132. font-weight:500;
  133. }
  134.  
  135. body {
  136. background:{color:background};
  137. background-image:url({image:background});
  138. margin:0px;
  139. color:{color:text};
  140. font-family: 'Open Sans', sans-serif;
  141. font-size:10px;
  142. line-height:100%;
  143. }
  144.  
  145. blockquote {
  146. padding-left:20px;
  147. width:auto;
  148. margin-left:10px;
  149. border-left:1px solid {color:border};
  150. }
  151.  
  152. blockquote blockquote {
  153. padding-left:20px;
  154. margin-left:10px;
  155. border-left:1px solid {color:border};
  156. }
  157.  
  158. h1 {
  159. font-size:35px;
  160. color:{color:accent 1};
  161. text-align:center;
  162. line-height:100%;
  163. font-weight:lighter;
  164. margin:5px;
  165. text-transform:lowercase;
  166. font-family: 'Quicksand', sans-serif;
  167. }
  168.  
  169. h2 {
  170. font-size:18px;
  171. color:{color:accent 1};
  172. text-align:center;
  173. font-weight:lighter;
  174. text-transform:lowercase;
  175. font-family: 'Quicksand', sans-serif;
  176. }
  177.  
  178. a {
  179. text-decoration:none;
  180. color:{color:link};
  181. -moz-transition-duration:0.8s;
  182. -webkit-transition-duration:0.8s;
  183. -o-transition-duration:0.8s;
  184. }
  185.  
  186. a:hover {
  187. color:{color:hover link};
  188. -moz-transition-duration:0.8s;
  189. -webkit-transition-duration:0.8s;
  190. -o-transition-duration:0.8s;
  191. }
  192.  
  193. b {color:{color:bold};}
  194. strong {color:{color:bold}}
  195. i {color:{color:italic};}
  196. em {color:{color:italic};}
  197. sub {font-size:10px;}
  198. sup {font-size:10px;}
  199. small {font-size:10px;}
  200.  
  201. .container {
  202. width:850px;
  203. height:550px;
  204. background-color:{color:container};
  205. position: absolute;
  206. overflow:hidden;
  207. margin:auto;
  208. left:0px;right:0px;top:0px; bottom:0px;
  209. border-radius:7.5px;
  210. border:1px solid {color:border};
  211. }
  212.  
  213. #entries {
  214. position:absolute;
  215. width:550px;
  216. height:550px;
  217. z-index:2;
  218. display:block;
  219. overflow:scroll;
  220. left:0px;
  221. bottom:0px;
  222. }
  223.  
  224. .post {
  225. padding:20px;
  226. width:410px;
  227. background-color:{color:posts};
  228. margin:30px;
  229. margin-bottom:50px;
  230. line-height:130%;
  231. overflow:hidden;
  232. border-radius:7.5px;
  233. border:1px solid {color:border};
  234.  
  235. }
  236.  
  237. .post img {
  238. position:static;
  239. height:auto;
  240. width:auto;
  241. max-width:100%;
  242. border-radius:0px;
  243. }
  244.  
  245. .postinfo {
  246. text-transform:uppercase;
  247. font-size:10px;
  248. text-align:right;
  249. width:435px;
  250. letter-spacing:0.5px;
  251. padding:9px 7.5px 8px 7.5px;
  252. margin:-47px 0px 20px 30px;
  253. border-radius:7.5px;
  254. background-color:{color:posts};
  255. border:1px solid {color:border};
  256. }
  257.  
  258. .postinfo a {
  259. color:{color:accent 1};
  260. }
  261.  
  262. .postinfo a:hover {
  263. color:{color:accent 2};
  264. }
  265.  
  266. .postinfo div {
  267. display:inline-block;
  268. float:left;
  269. opacity:0;
  270. -moz-transition-duration:0.8s;
  271. -webkit-transition-duration:0.8s;
  272. -o-transition-duration:0.8s;
  273. }
  274.  
  275. .postinfo:hover div {
  276. opacity:1;
  277. -moz-transition-duration:0.8s;
  278. -webkit-transition-duration:0.8s;
  279. -o-transition-duration:0.8s;
  280. }
  281.  
  282. .postinfo div span {
  283. margin:0px 5px;
  284. }
  285.  
  286. .postinfo a {
  287. font-weight:500;
  288. }
  289.  
  290. .tags {
  291. width:445px;
  292. font-size:10px;
  293. padding:5px 10px 6px 10px;
  294. text-align:left;
  295. text-transform:lowercase;
  296. margin:-20px 0px 30px 30px;
  297. }
  298.  
  299. .tags b {
  300. color:{color:accent 1};
  301. margin-right:2px;
  302. text-transform:uppercase;
  303. }
  304.  
  305. .postnote {
  306. margin-top: 10px;
  307. text-transform: lowercase;
  308. text-align: left;
  309. margin-top: -20px;
  310. background-color: {color:posts};
  311. width: 400px;
  312. padding: 10px;
  313. border-radius: 7.5px;
  314. margin-left: 45px;
  315. margin-bottom: 50px;
  316. border: 1px solid {color:border};
  317. }
  318.  
  319. .postnote li {
  320. margin:5px 0px;
  321. }
  322.  
  323. /* different post types styling */
  324. .question {
  325. width:410px;
  326. padding:20px 20px 25px 20px;
  327. margin:-20px 0px 0px -20px;
  328. text-align:center;
  329. text-transform:lowercase;
  330. border-bottom:1px solid {color:border};
  331.  
  332. }
  333.  
  334. .askerdiv {
  335. padding:5px;
  336. margin-top:-12.5px;
  337. max-width:225px;
  338. text-align:center;
  339. background-color:{color:accent 1};
  340. color:{color:accent text};
  341. text-transform:lowercase;
  342. font-size:12px;
  343. margin-left:85px;
  344. border-radius:40px;
  345. }
  346.  
  347. .askerdiv a {
  348. color:{color:accent text};
  349. font-weight:700;
  350. padding:none;
  351. border:none;
  352. }
  353.  
  354. .askerdiv b {
  355. color:{color:accent text};
  356. }
  357.  
  358. .answer {margin:10px;}
  359.  
  360. .quotepost {text-align:center;}
  361.  
  362. .quotediv {
  363. font-size:20px;
  364. width:420px;
  365. text-align:center;
  366. border-bottom:1px solid {color:border};
  367. color:{color:accent 1};
  368. padding:15px 15px 30px 15px;
  369. text-transform:lowercase;
  370. margin:-20px 0px 0px -20px;
  371. line-height:110%;
  372. font-family: 'Quicksand', sans-serif;
  373. }
  374.  
  375. .quoteinfo {
  376. margin-top:-12.5px;
  377. color:{color:accent text};
  378. font-weight:600;
  379. padding:5px 10px;
  380. background-color:{color:accent 1};
  381. margin-bottom:10px;
  382. text-transform:lowercase;
  383. font-size:13px;
  384. border-radius:40px;
  385. font-family: 'Quicksand', sans-serif;
  386. }
  387.  
  388. .chats {
  389. font-size:13px;
  390. line-height:150%;
  391. }
  392.  
  393. .audioplayer {
  394. text-align:left;
  395. padding:20px 10px 20px 10px;
  396. margin:-20px 0px -20px -20px;
  397. background-color:{color:accent 2};
  398. width:430px;
  399. font-size:13px;
  400. height:27.5px;
  401. }
  402.  
  403. .audioinfo {
  404. color:{color:accent text};
  405. width:100%;
  406. font-size:10px;
  407. text-align:right;
  408. margin-top:-30px;
  409. letter-spacing:0.4px;
  410. font-weight:600;
  411. line-height:90%;
  412. }
  413.  
  414. .audioinfo div {
  415. font-size:13px;
  416. font-weight:lighter;
  417. font-family: 'Quicksand', sans-serif;
  418. }
  419.  
  420. .readmore {
  421. width:100%;
  422. text-transform:uppercase;
  423. text-align:center;
  424. }
  425.  
  426. .readmore a {
  427. background-color:{color:accent 1};
  428. font-family: 'Quicksand', sans-serif;
  429. padding:3px 10px;
  430. border:none;
  431. color:{color:accent text};
  432. border-radius:30px;
  433. font-weight:600;
  434. }
  435.  
  436. .readmore a:hover {
  437. border:none;
  438. background-color:{color:accent 2};
  439. }
  440.  
  441. .photoset-grid {grid-gap: 2px;}
  442. [photoset-layout] div {
  443. cursor: pointer;
  444. }
  445.  
  446. [photoset-layout] img {
  447. border-radius: 2px;
  448. }
  449.  
  450. /* side tab control styling */
  451. .tabcontainer {
  452. position:absolute;
  453. width:525px;
  454. height:550px;
  455. z-index:999999999;
  456. left:0px;
  457. top:0px;
  458. display:none;
  459. }
  460.  
  461. .close {
  462. position:absolute;
  463. font-size:14px;
  464. color:{color:accent 1};
  465. border-radius:100%;
  466. left:20px;
  467. top:20px;
  468. text-align:center;
  469. z-index:9999999;
  470. -moz-transition-duration:0.8s;
  471. -webkit-transition-duration:0.8s;
  472. -o-transition-duration:0.8s;
  473. }
  474. .close:hover {
  475. cursor: pointer;
  476. color:{color:accent 3};
  477. -moz-transition-duration:0.8s;
  478. -webkit-transition-duration:0.8s;
  479. -o-transition-duration:0.8s;
  480. }
  481.  
  482. /* sidebar styling */
  483. .sidebox {
  484. position:absolute;
  485. width:200px;
  486. height:25px;
  487. padding:20px;
  488. background-color:{color:posts};
  489. bottom:215px;
  490. right:25px;
  491. z-index:1;
  492. line-height:150%;
  493. border-radius:5px;
  494. text-align:center;
  495. }
  496.  
  497. .sidebox b {
  498. background-color:{color:accent 1};
  499. color:{color:accent text};
  500. padding:1px 3px;
  501. border-radius:3px;
  502. margin-right:2.5px;
  503. text-transform:uppercase;
  504. letter-spacing:0.5px;
  505. }
  506.  
  507. .sidelinks {
  508. position:absolute;
  509. width:85px;
  510. right:190px;
  511. bottom:355px;
  512. z-index:9;
  513. padding:10px 15px;
  514. line-height:175%;
  515. text-transform:uppercase;
  516. letter-spacing:0.25px;
  517. border-radius:5px;
  518. font-weight:600;
  519. background-color:{color:posts};
  520. border:1px solid {color:border};
  521. }
  522.  
  523. .sidelinks div {
  524. color:{color:text};
  525. -moz-transition-duration:0.8s;
  526. -webkit-transition-duration:0.8s;
  527. -o-transition-duration:0.8s;
  528. }
  529.  
  530. .sidelinks div:hover {
  531. cursor: pointer;
  532. }
  533.  
  534. .sidelinks div span {
  535. -moz-transition-duration:0.8s;
  536. -webkit-transition-duration:0.8s;
  537. -o-transition-duration:0.8s;
  538. }
  539.  
  540. .sidelinks div b {
  541. font-family: "florence";
  542. font-size:12px;
  543. margin-right:2.5px;
  544. color:{color:accent 1};
  545. -moz-transition-duration:0.8s;
  546. -webkit-transition-duration:0.8s;
  547. -o-transition-duration:0.8s;
  548. }
  549.  
  550. .sidelinks div:hover b {
  551. margin-left:-2.5px;
  552. margin-right:5px;
  553. -moz-transition-duration:0.8s;
  554. -webkit-transition-duration:0.8s;
  555. -o-transition-duration:0.8s;
  556. }
  557.  
  558. .sidelinks div:hover span {
  559. margin-left:2.5px;
  560. -moz-transition-duration:0.8s;
  561. -webkit-transition-duration:0.8s;
  562. -o-transition-duration:0.8s;
  563. }
  564.  
  565.  
  566. .circle2 {
  567. position:absolute;
  568. background-color:{color:accent 1};
  569. width:230px;
  570. height:230px;
  571. right:30px;
  572. top:130px;
  573. z-index:1;
  574. border-radius:100%;
  575. }
  576.  
  577. .sideimg {
  578. position:absolute;
  579. background-color:grey;
  580. width:155px;
  581. height:155px;
  582. right:185px;
  583. top:205px;
  584. z-index:4;
  585. border-radius:100%;
  586. overflow:hidden;
  587. }
  588.  
  589. .sideimg img {
  590. width:100%;
  591. height:100%;
  592. }
  593.  
  594. .circle1 {
  595. position:absolute;
  596. width:1000px;
  597. height:1000px;
  598. right:-500px;
  599. bottom:-665px;
  600. transform:rotate(60deg);
  601. border-radius:100%;
  602. background-color:{color:accent 2};
  603. }
  604.  
  605. .sidepng {
  606. position:absolute;
  607. bottom:55px;
  608. right:25px;
  609. width:{select:png width};
  610. z-index:5;
  611. }
  612.  
  613. .sidepng img {
  614. width:100%;
  615. height:100%;
  616. }
  617.  
  618. .square {
  619. position:absolute;
  620. width:275px;
  621. height:275px;
  622. right:50px;
  623. bottom:130px;
  624. z-index:3;
  625. border:1px solid {color:accent 3};
  626. }
  627.  
  628. .sidetitle {
  629. position:absolute;
  630. font-family: "florence";
  631. z-index:7;
  632. color:{color:title};
  633. font-size:40px;
  634. left:570px;
  635. bottom:250px;
  636. }
  637.  
  638. .sidetitle.font60 {font-size:60px;}
  639. .sidetitle.font50 {font-size:50px;}
  640. .sidetitle.font40 {font-size:40px;}
  641. .sidetitle.font30 {font-size:30px;}
  642. .sidetitle.font25 {font-size:25px;}
  643. .sidetitle.font20 {font-size:20px;}
  644. .sidetitle.font15 {font-size:15px;}
  645.  
  646. .box {
  647. position:absolute;
  648. background-color:{color:accent 4};
  649. z-index:6;
  650. width:auto;
  651. height:20px;
  652. bottom:225px;
  653. left:560px;
  654. font-family: "florence";
  655. color:transparent;
  656. font-size:40px;
  657. }
  658.  
  659. .box.font60 {font-size:60px;}
  660. .box.font50 {font-size:50px;}
  661. .box.font40 {
  662. font-size:40px;
  663. bottom:230px;
  664. }
  665. .box.font30 {
  666. font-size:30px;
  667. bottom:232.5px;
  668. }
  669. .box.font25 {
  670. font-size:25px;
  671. bottom:238px;
  672. height:14px;
  673. }
  674. .box.font20 {
  675. font-size:20px;
  676. bottom:242px;
  677. height:11px;
  678. }
  679. .box.font15 {
  680. font-size:15px;
  681. bottom:244px;
  682. height:10px;
  683.  
  684. }
  685.  
  686. .sidedesc {
  687. position:absolute;
  688. width:115px;
  689. line-height:140%;
  690. text-transform:lowercase;
  691. color:{color:accent text};
  692. z-index:9;
  693. }
  694.  
  695. .sidedesc b {
  696. color:{color:accent 3};
  697. font-family: "florence";
  698. font-size:12px;
  699. letter-spacing:1px;
  700. }
  701.  
  702. /* desc placement options */
  703. .desc-left {right:225px;}
  704. .desc-center {right:125px;}
  705. .desc-right {right:25px;}
  706. .desc-top {top:450px;}
  707. .desc-v-center {top:480px;}
  708. .desc-bottom {bottom:20px;}
  709.  
  710. /* nav tab styling */
  711. .nav {
  712. position:absolute;
  713. width:350px;
  714. height:400px;
  715. margin:auto;
  716. top:0;bottom:10px;left:0;right:0;
  717. display:flex;
  718. justify-content:center;
  719. align-items:center;
  720. flex-direction:column;
  721. }
  722.  
  723. .nav h1 {
  724. width:100%;
  725. font-size:25px;
  726. margin-right:100px;
  727. font-family: "florence";
  728. text-align:right;
  729. }
  730.  
  731. .navdesc {
  732. width:320px;
  733. padding:10px 20px;
  734. margin-bottom:10px;
  735. height:75px;
  736. overflow:scroll;
  737. background-color:{color:posts};
  738. border:1px solid {color:border};
  739. border-radius:7.5px;
  740. line-height:200%;
  741. text-transform:lowercase;
  742. letter-spacing:0.25px;
  743. }
  744.  
  745. .navlinks {
  746. width:320px;
  747. padding:20px;
  748. background-color:{color:posts};
  749. border:1px solid {color:border};
  750. border-radius:7.5px;
  751. text-align:center;
  752. line-height:150%;
  753. }
  754.  
  755. .navlinks h2 {
  756. margin-top:-5px;
  757. }
  758.  
  759. .navlinkslink {
  760. display:inline-block;
  761. width:100px;
  762. background-color:{color:accent 2};
  763. color:{color:accent text};
  764. border-radius:15px;
  765. margin:2.5px;
  766. font-size:11px;
  767. padding:0px 0px 2px 0px;
  768. -moz-transition-duration:0.8s;
  769. -webkit-transition-duration:0.8s;
  770. -o-transition-duration:0.8s;
  771. }
  772.  
  773. .navlinkslink:hover {
  774. background-color:{color:accent 1};
  775. -moz-transition-duration:0.8s;
  776. -webkit-transition-duration:0.8s;
  777. -o-transition-duration:0.8s;
  778. }
  779.  
  780. /* pagination styling*/
  781. .pagi {
  782. padding:20px;
  783. width:410px;
  784. text-align:center;
  785. margin:-20px 0px 10px 30px;
  786. }
  787.  
  788. .pagi div {
  789. display:inline-block;
  790. margin:0px 5px;
  791. width:60px;
  792. text-transform:uppercase;
  793. padding:5px;
  794. font-weight:600;
  795. color:{color:accent 1};
  796. margin:0px 5px;
  797. border-radius:7.5px;
  798. background-color:{color:posts};
  799. border:1px solid {color:border};
  800. }
  801.  
  802. /* tumblr controls styling by cyantists */
  803. iframe.tmblr-iframe {
  804. z-index:99999999999999!important;
  805. top:0!important;
  806. right:0!important;
  807. opacity:0.4;
  808. /* delete invert(1) from here */
  809. filter:invert(1) contrast(150%);
  810. -webkit-filter:invert(1) contrast(150%);
  811. -o-filter:invert(1) contrast(150%);
  812. -moz-filter:invert(1) contrast(150%);
  813. -ms-filter:invert(1) contrast(150%);
  814. /* to here if your blog has a dark background */
  815. transform:scale(0.65);
  816. transform-origin:100% 0;
  817. -webkit-transform:scale(0.65);
  818. -webkit-transform-origin:100% 0;
  819. -o-transform:scale(0.65);
  820. -o-transform-origin:100% 0;
  821. -moz-transform:scale(0.65);
  822. -moz-transform-origin:100% 0;
  823. -ms-transform:scale(0.65);
  824. -ms-transform-origin:100% 0;}
  825.  
  826. iframe.tmblr-iframe:hover {
  827. opacity:0.6!important;}
  828. /* end control styling */
  829.  
  830. /* pls do not touch thank you <3 */
  831. .credit {
  832. position:fixed;
  833. bottom:10px;
  834. right:10px;
  835. width:60px;
  836. font-size:9px;
  837. text-align:center;
  838. text-transform:uppercase;
  839. font-weight:600;
  840. padding:4px 0px 3px 0px;
  841. border:1px solid {color:accent 1};
  842. color:{color:accent 1};
  843. font-family: 'Quicksand', sans-serif;
  844. -moz-transition-duration:0.8s;
  845. -webkit-transition-duration:0.8s;
  846. -o-transition-duration:0.8s;
  847. }
  848.  
  849. .credit:hover {
  850. background-color:{color:posts};
  851. -moz-transition-duration:0.8s;
  852. -webkit-transition-duration:0.8s;
  853. -o-transition-duration:0.8s;
  854. }
  855. /* end of credit */
  856.  
  857. </style>
  858. </head>
  859. <body>
  860. <div class="container">
  861. <!-- sidebar elements start-->
  862. <div class="circle2"></div>
  863. <div class="sideimg"><img src="{image:sidebar}"></div>
  864. <div class="sidelinks">
  865. <a href="/"><div><b>01</b> <span>refresh</span></div></a>
  866. <a href="/ask"><div><b>02</b> <span>inbox</span></div></a>
  867. <a onclick="openTab('navTab')"><div><b>03</b> <span>navigate</span></div></a>
  868. </div>
  869. <div class="sidetitle {select:title size}">{text:title}</div>
  870. <div class="box {select:title size}"><div>{text:title}</div></div>
  871. <div class="sidedesc {select:description horizontal} {select:description vertical}">{text:description}</div>
  872. <div class="sidepng"><img src="{image:png}"></div>
  873. <div class="circle1"></div>
  874. <div class="square"></div>
  875.  
  876. <!-- nav tab start -->
  877. <div id="navTab" class="tabcontainer">
  878. <div onclick="closeTab(this)" class="close">x</div>
  879. <div class="nav">
  880. <h1>{text:navigation title}</h1>
  881. <div class="navdesc">{text:navigation description}</div>
  882. <div class="navlinks">
  883. <a href="{text:link 1}"><div class="navlinkslink">{text:link 1 title}</div></a>
  884. <a href="{text:link 2}"><div class="navlinkslink">{text:link 2 title}</div></a>
  885. <a href="{text:link 3}"><div class="navlinkslink">{text:link 3 title}</div></a>
  886. <a href="{text:link 4}"><div class="navlinkslink">{text:link 4 title}</div></a>
  887. <a href="{text:link 5}"><div class="navlinkslink">{text:link 5 title}</div></a>
  888. <a href="{text:link 6}"><div class="navlinkslink">{text:link 6 title}</div></a>
  889. </div>
  890. </div>
  891. </div>
  892.  
  893. <!-- entries start -->
  894. <div id="entries">
  895.  
  896. {block:Posts}
  897.  
  898. <div class="post" id="{PostID}">
  899.  
  900. {block:Text}
  901. {block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  902.  
  903. {block:Quote}
  904. <div class="quotediv">"{Quote}"</div>
  905. {block:Source}<div class="quoteborder"></div><div class="quoteinfo">— {Source}</div>{/block:Source}
  906. {/block:Quote}
  907.  
  908. {block:Chat}
  909. {block:Title}<h1>{Title}</h1>{/block:Title}
  910. {block:Lines}<div class="chats">{block:Label}<b>{Label}</b> {/block:Label}{Line}<br></div>{/block:Lines}
  911. {/block:Chat}
  912.  
  913. {block:Video}<div class="video">{Video-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Video}
  914.  
  915. {block:Photo}
  916. <img src="{PhotoURL-500}" style="width:100%">
  917. {block:Caption}{Caption}{/block:Caption}
  918. {/block:Photo}
  919.  
  920. {block:Photoset}
  921. <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>
  922. {block:Caption}{Caption}{/block:Caption}
  923. {/block:Photoset}
  924.  
  925. {block:Link}
  926. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  927. {block:Description}{Description}{/block:Description}
  928. {/block:Link}
  929.  
  930. {block:More}<div class="readmore"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  931.  
  932. {block:AudioPlayer}
  933. <div class="audioplayer">{AudioPlayer}
  934. <div class="audioinfo">
  935. {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  936. {block:Artist}<br/>{Artist}{/block:Artist}
  937. </div>
  938. </div>
  939. {block:Caption}{Caption}{/block:Caption}
  940. {/block:AudioPlayer}
  941.  
  942. {block:Answer}
  943. <div class="question">{Question}</div>
  944. <div class="askerdiv">asked by <b>{Asker}</b></div>
  945. <div class="answer">{Answer}</div>
  946. {/block:Answer}
  947.  
  948. <!-- to hide source and via on posts-->
  949. {block:ContentSource}
  950. <div style="display: none;">{SourceURL}</div>
  951. {/block:ContentSource}
  952.  
  953. {block:NoRebloggedFrom}
  954. <div style="display: none;">
  955. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  956. </div>
  957. {/block:NoRebloggedFrom}
  958.  
  959. </div>
  960.  
  961. {block:Date}<div class="postinfo">
  962. <div>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="reblogged from {ReblogParentName}"><span class="th th-link"></span></a> <a href="{ReblogRootURL}" title="posted by {ReblogRootName}"><span class="th th-star-o"></span></a>{/block:RebloggedFrom} <a href="{ReblogURL}" title="reblog this post"><span class="th th-reblog"></span></a></div>
  963. posted <a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}</a>
  964. {block:NoteCount}with <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  965. </div>{/block:Date}
  966.  
  967. {block:HasTags}<div class="tags"><b style="margin-right:5px">tagged as:</b>{block:Tags}<b>#</b><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}</div>{/block:HasTags}
  968.  
  969.  
  970. {block:PostNotes}<div class="postnote">{PostNotes}</div>{/block:PostNotes}
  971.  
  972. {/block:Posts}
  973.  
  974.  
  975. {block:Pagination}
  976. <div class="pagi">
  977. {block:PreviousPage}<a href="{PreviousPage}"><div>back</div></a>{/block:PreviousPage}
  978. {block:NextPage}<a href="{NextPage}"><div>forward</div></a>{/block:NextPage}
  979. </div>
  980. {/block:Pagination}
  981.  
  982. </div>
  983. </div>
  984.  
  985. <!-- do not touch pls -->
  986. <a href="https://jinsoouls.tumblr.com/"><div class="credit">jinsoouls.</div></a>
  987. <!-- credit end-->
  988.  
  989. </body>
  990.  
  991. <script>
  992.  
  993. /* photoset script by annathms and espoirthemes */
  994. function gatherData(images, arr) {
  995. for (let i = 0; i < images.length; i++) {
  996. let currentData = {
  997. "width": images[i].getAttribute('data-width'),
  998. "height": images[i].getAttribute('data-height'),
  999. "low_res": images[i].getAttribute('data-lowres'),
  1000. "high_res": images[i].getAttribute('data-highres')
  1001. };
  1002. arr.push(currentData);
  1003. }
  1004. }
  1005. function getIndex(elem) {
  1006. let i = 0;
  1007. while( (elem = elem.previousElementSibling) != null ) i++;
  1008. return i;
  1009. }
  1010. function lightbox(elem) {
  1011. let currentPhotoset = elem.parentNode;
  1012. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1013. let data = [];
  1014. gatherData(photosetPhotos, data);
  1015. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1016. }
  1017.  
  1018. /* tooltip script */
  1019. (function($){
  1020. $(document).ready(function(){
  1021. $("a[title]").style_my_tooltips({
  1022. tip_follows_cursor:true,
  1023. tip_delay_time:90,
  1024. tip_fade_speed:600,
  1025. attribute:"title"
  1026. });
  1027. });
  1028. })(jQuery);
  1029.  
  1030. /* audio player color script by shudesigns */
  1031. ($(document).ready(function() {
  1032. $('iframe.tumblr_audio_player').load( function() {
  1033. $('iframe.tumblr_audio_player').contents().find("head")
  1034. .append($("<style type='text/css'> .audio-player{background:{color:accent 2} !important} </style>"));
  1035. });
  1036. })
  1037. )(jQuery);
  1038.  
  1039. /* tab script by me*/
  1040. function openTab(tabName) {
  1041. $("#entries").fadeOut();
  1042. $('.tabcontainer').each(function(index) {
  1043. if (tabName == $(this).attr('id')) {
  1044. $(this).fadeIn();
  1045. } else {
  1046. $(this).fadeOut();
  1047. }
  1048. });
  1049. }
  1050.  
  1051. function closeTab(el) {
  1052. $(el).parent().fadeOut();
  1053. $('#entries').fadeIn();
  1054. }
  1055.  
  1056. </script>
  1057. </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!