API tools faq
paste
Advertisement
cornetespoir

1 | Humility

cornetespoir
Jan 8th, 2016
5,399
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.08 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. // [Theme:Revamp]
  4.  
  5. Humility
  6.  
  7. by egg.design //
  8.  
  9. + basic html and css knowledge is required to customize this theme
  10. + feel free to edit and custom the theme to your liking,
  11. but don't redistribute, use as a base, or claim as your own
  12. + please do not move or remove the credit
  13.  
  14. Credits
  15. + icon font by themehive.co
  16. + CSS Tooltips https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346
  17.  
  18. Version 2.1
  19.  
  20. -->
  21. <!DOCTYPE html>
  22.  
  23. <html>
  24.  
  25. <head>
  26.  
  27. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  28. <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
  29. <link href="https://fonts.googleapis.com/css?family=Nunito|Inconsolata" rel="stylesheet">
  30. <script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.2/css-doodle.min.js"></script>
  31. <script>
  32. $(document).ready(function(){
  33. $('ul.tabs li').click(function(){
  34. var tab_id = $(this).attr('data-tab');
  35. $('ul.tabs li').removeClass('current');
  36. $('.tab-content').removeClass('current');
  37. $('.tab-content').removeClass('swish');
  38. $(this).addClass('current');
  39. $("#"+tab_id).addClass('current');
  40. $("#"+tab_id).addClass('swish');
  41. })
  42.  
  43. });
  44. </script>
  45. <title>{Title}</title>
  46. <link rel="shortcut icon" href="{favicon}">
  47. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  48. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  49.  
  50. <!-- image options -->
  51. <meta name="image:background" content="" />
  52.  
  53. <!-- color options -->
  54. <meta name="color:background" content="#fff" />
  55. <meta name="color:posts" content="#fff" />
  56. <meta name="color:text" content="#000" />
  57. <meta name="color:links" content="#000" />
  58. <meta name="color:link hover" content="#beefed" />
  59. <meta name="color:bold" content="#7a7a7a" />
  60. <meta name="color:italic" content="#bbb" />
  61. <meta name="color:usernames" content="#47aafa" />
  62. <meta name="color:scrollbar" content="#7a7a7a" />
  63. <meta name="color:selection" content="#fff" />
  64. <meta name="color:selection bg" content="#7b7b7b" />
  65. <meta name="color:accent 1" content="hotpink" />
  66. <meta name="color:accent 2" content="#beefed" />
  67. <meta name="color:accent 3" content="skyblue" />
  68. <meta name="color:accent 4" content="#facade" />
  69. <meta name="color:speechbubble" content="#beefed" />
  70. <meta name="color:speechbubble text" content="#222" />
  71.  
  72. <!-- text options -->
  73. <meta name="text:tab 1 title" content="home" />
  74. <meta name="text:tab 2 title" content="ask" />
  75. <meta name="text:askbox" content="Text above the ask box" />
  76. <meta name="text:tab 3 title" content="about" />
  77. <meta name="text:tab 3" content="Text for the 3rd tab" />
  78. <meta name="text:tab 4 title" content="blogroll" />
  79. <meta name="text:tab 4" content="text for the 4th tab" />
  80. <meta name="text:tag symbol" content="#" />
  81. <meta name="text:asked" content="shouted" />
  82. <meta name="text:current" content="star-o" />
  83.  
  84.  
  85. <!-- other options -->
  86. <meta name="if:blogroll" content=""/>
  87. <meta name="if:full background" content="" />
  88.  
  89. <style type="text/css">
  90.  
  91.  
  92. /**
  93.  
  94. CSS editing directory
  95.  
  96. Labeled sections for easier navigating
  97.  
  98. 01. Controls - tumblr controls, selection, and scrollbar
  99. 02. General - body, links, headings, etc
  100. 03. Sidebar - sidbear, description, icon
  101. 04. Tabs - tab links and content styling
  102. 05. Posts - container, posts, post styles
  103. 06. Blogroll - follower icons and container
  104.  
  105. **/
  106.  
  107. /* ------------
  108.  
  109. 01. Controls
  110.  
  111. ------------ */
  112.  
  113. .tmblr-iframe{ z-index:9999999!important;}
  114.  
  115. /* Scrollbar + Selection */
  116.  
  117. ::-webkit-scrollbar {
  118. width: 18px;
  119. height:6px;
  120. }
  121.  
  122. ::-webkit-scrollbar-button {
  123. width: 0px;
  124. height: 0px;
  125. }
  126. ::-webkit-scrollbar-thumb {
  127. background:{color:accent 2};
  128. border:6px solid #f8f8f8;
  129. border-top:4px solid #f8f8f8;
  130. border-bottom:4px solid #f8f8f8;
  131. cursor:pointer;
  132. border-radius: 8px;
  133. }
  134. ::-webkit-scrollbar-track {
  135. background:#dfdfdf;
  136. border: 8px solid #f8f8f8;
  137. border-top:12px solid #f8f8f8;
  138. border-bottom:12px solid #f8f8f8;
  139.  
  140. }
  141.  
  142. ::-moz-selection {background:{color:selection bg};color:{color:selection}}
  143. ::selection {background:{color:selection bg};color:{color:selection};}
  144.  
  145. /* ------------
  146.  
  147. 02. General
  148.  
  149. ------------ */
  150.  
  151. body {
  152. background:{color:background} url({image:background})
  153. {block:iffullbackground} no-repeat center center fixed;
  154. background-size: cover; {/block:iffullbackground};
  155. color:{color:text};
  156. font-family:Nunito;
  157. font-size: 16px;
  158. word-wrap:break-word;
  159. line-height:160%;
  160. }
  161.  
  162.  
  163.  
  164. a {
  165. text-decoration: none;
  166. color:{color:links};
  167. transition:.5s;
  168.  
  169. }
  170.  
  171. a:hover {
  172. color:{color:link hover};
  173. transition:.5s;
  174. }
  175.  
  176. h1 {
  177. border-left:10px double {color:border}; border-right:10px double {color:border};
  178. text-align:center;
  179. font-size:22px;
  180. font-family:Inconsolata;
  181. letter-spacing:2px;
  182. line-height:100%; }
  183.  
  184. h2 {
  185. text-align:center;
  186. font-size:18px;
  187. border-left:20px double {color:border};
  188. border-right:20px double {color:border};
  189. letter-spacing:1px;
  190. line-height:100%;
  191. font-weight:normal; }
  192.  
  193. b {color:{color:bold}; }
  194. i {color:{color:italic}; font-style:italic;}
  195.  
  196.  
  197. /* ------------
  198.  
  199. 03. Sidebar
  200.  
  201. ------------ */
  202.  
  203. aside {
  204. position:fixed;
  205. height:0px;
  206. top:0px;
  207. left:50%;
  208. z-index:0;
  209. margin-left:-300px;
  210. width:520px;
  211. }
  212.  
  213. #sidebar {
  214. position:fixed;
  215. width:18%;
  216. margin-left:-24%;
  217. z-index:9999!important;
  218. top:50px;
  219. }
  220.  
  221. #sidebar .caption {
  222. border-top:3px solid {color:accent 1};
  223. margin-top:40px;
  224. padding:20px;
  225. position:relative;
  226. }
  227.  
  228.  
  229. #sidebar .caption a {
  230. margin:20px 10px 0 0;
  231. padding:2px 4px;
  232. line-height:200%;
  233. background:{color:accent 4};
  234. }
  235.  
  236. #sidebar .caption:before {
  237. content:'';
  238. position:absolute;
  239. width:3px;
  240. height:50px;
  241. top:0px;
  242. left:50%;
  243. right:50%;
  244. margin-left:-1px;
  245. margin-top:-50px;
  246. background:{color:accent 1};
  247. }
  248.  
  249. #sidebar div {
  250. margin:auto;
  251. }
  252.  
  253. .sidecon:before{
  254. content:'';
  255. position:absolute;
  256. width:3px;
  257. height:50px;
  258. top:0px;
  259. left:50%;
  260. right:50%;
  261. margin-left:-1px;
  262. margin-top:-50px;
  263. background:{color:accent 1};
  264. }
  265.  
  266. .sidecon {
  267. position:relative;
  268. margin:0px auto;
  269. font-size:1.2em;
  270. text-align:center;
  271. }
  272.  
  273. .sidecon a {
  274. background:{color:accent 1};
  275. border-radius:100%;
  276. padding:14px;
  277. }
  278.  
  279. .sidecon a:after {
  280. content:'';
  281. position:absolute;
  282. animation: scale 2s infinite cubic-bezier(0, .2, 0.4, 1.2);
  283. width:47px;
  284. margin:auto;
  285. left:50%;
  286. margin-left:-23.5px;
  287. background:{color:accent 1};
  288. top:50%;
  289. bottom:50%;
  290. z-index:-1;
  291. border-radius:100%;
  292. height:100%;
  293. }
  294.  
  295.  
  296. #description {
  297. padding:4px;
  298. height:200px;
  299. overflow-y:auto;
  300. transform:translate(0, 20px);
  301. overflow-x:hidden;
  302. z-index:99999!important;
  303. color:{color:description text};
  304. }
  305.  
  306. /* ------------
  307.  
  308. 04. Tabs
  309.  
  310. ------------ */
  311.  
  312. ul.tabs{
  313. margin: 0px;
  314. padding: 0px;
  315. position:fixed;
  316. list-style: none; padding-right:20px; width:20px;
  317. right:50px;
  318. margin-top:200px;
  319. }
  320.  
  321. ul.tabs li:before {
  322. content:'';
  323. position:absolute;
  324. width:60px;
  325. background:transparent;
  326. height:3px;
  327. z-index:-9;
  328. left:0px;
  329. top:50%;
  330. bottom:50%;
  331. margin-left:56px;
  332. }
  333.  
  334. ul.tabs li:after{
  335. content:'';
  336. position:absolute;
  337. width:0px;
  338. background:transparent;
  339. height:3px;
  340. z-index:-9;
  341. right:0px;
  342. top:50%;
  343. transition:.6s;
  344. bottom:50%;
  345. margin-left:100px;
  346. }
  347.  
  348. ul.tabs li.current:after {
  349. content:'';
  350. position:absolute;
  351. width:60px;
  352. background:{color:accent 1};
  353. height:3px;
  354. z-index:-1;
  355. right:-50px;
  356. top:50%;
  357. bottom:50%;
  358. }
  359.  
  360.  
  361. ul.tabs li{
  362. background: none;
  363. color:#555;
  364. position:relative;
  365. background:{color:accent 2};
  366. display: inline-block;
  367. padding: 10px 18px;
  368. margin:20px 0;
  369. border-radius:100%;
  370. cursor: pointer;
  371. }
  372.  
  373. ul.tabs li.current{
  374. background:{color:accent 1};
  375. color: #222;
  376. transition:.6s;
  377. }
  378.  
  379. ul.tabs li.current:before {
  380. animation: scale 1.36s 1 cubic-bezier(0, .2, 0.4, 1.2);
  381. width:100%;
  382. margin:auto;
  383. left:0px;
  384. background:{color:accent 1};
  385. top:50%;
  386. bottom:50%;
  387. border-radius:100%;
  388. height:100%;
  389. }
  390.  
  391. @keyframes scale {
  392. 0% {
  393. transform: scale(1);
  394. }
  395. 50%,
  396. 75% {
  397. transform: scale(1.52);
  398. }
  399. 78%, 100% {
  400. opacity: 0;
  401. }
  402. }
  403.  
  404. .tab-content{
  405. display: none;
  406. background: transparent;
  407. padding: 15px;
  408. }
  409.  
  410. .tab-content.current{
  411. display: block;
  412. margin:auto;
  413. }
  414.  
  415. .asks, .blogroll, .about {
  416. width:500px;
  417. margin:100px auto;
  418. }
  419.  
  420. #askbox {
  421. margin-bottom: 5px;
  422. width: 500px;
  423. padding: 3px;
  424. font-family: tahoma;
  425. color: {color:text};
  426. }
  427.  
  428. #askbox a.askbox:link, a.askbox:active, a.askbox:visited {
  429. color: {color:text};
  430. text-transform: uppercase;
  431. text-decoration: none;
  432. }
  433.  
  434. #askbox a.askbox:hover {
  435. color: {color:links};
  436. text-transform: uppercase;
  437. text-decoration: none;
  438.  
  439. }
  440.  
  441.  
  442.  
  443. /* ------------
  444.  
  445. 05. Posts
  446.  
  447. ------------ */
  448.  
  449.  
  450. .container{
  451. width:60%;
  452. margin:auto;
  453.  
  454. }
  455.  
  456. .posts, ol.notes {
  457. width:100%;
  458. max-width:600px;
  459. padding:10px;
  460. margin:20px auto 100px auto;
  461. background:{color:posts};
  462. counter-increment: menu;
  463. transition:.5s;
  464.  
  465. }
  466.  
  467. ol.notes {
  468. line-height:220%;
  469. }
  470.  
  471. .posts:before {
  472. content: "00" counter(menu) " ";
  473. font-family:sans-serif;
  474. font-size:1.4em;
  475. opacity:.86;
  476. transform:translate(-60px, 16px);
  477. position:absolute;
  478. }
  479.  
  480. .posts img, .posts iframe {
  481. display:block;
  482. max-width:100%;
  483. }
  484.  
  485.  
  486. /* Usernames */
  487.  
  488. .user, .deactivated, .tumblelog, ol.notes .like .action a {
  489. margin:6px;
  490. margin-left:20px;
  491. padding:4px;
  492. border-radius:4px;
  493. border:none;
  494. position:relative;
  495. background:rgba({RGBcolor:usernames}, .12)
  496. }
  497.  
  498. .user:after, .deactivated:after, .tumblelog:after, ol.notes .like .action a:after
  499. {
  500. content: '';
  501. position: absolute;
  502. border-style: solid;
  503. border-width: 8px 13px 8px 0;
  504. border-color: transparent rgba({RGBcolor:usernames}, .12); /* keep same color as bubble */
  505. display: block;
  506. width: 0;
  507. z-index: 1;
  508. left: -13px;
  509. top: 6px;
  510. }
  511.  
  512. .caption {
  513. padding:20px 0px;
  514. }
  515.  
  516.  
  517. /* chat posts */
  518.  
  519. .chat {
  520. padding:5px;
  521. line-height:150%;
  522. }
  523.  
  524. .chat:nth-of-type(odd) {
  525. background:{color:text};
  526. color:{color:posts};
  527. -webkit-transition:.5s;
  528. transition:.5s; }
  529.  
  530. .chat:nth-of-type(odd) b {
  531. color:{color:posts};
  532. -webkit-transition:.5s;
  533. transition:.5s; }
  534.  
  535. .chat:nth-of-type(even) {
  536. background:{color:posts};
  537. color:{color:text};
  538. -webkit-transition:.5s;
  539. transition:.5s; }
  540. .chat:nth-of-type(even) b{
  541. color:{color:text};
  542. -webkit-transition:.5s;
  543. transition:.5s; }
  544.  
  545. /* audio posts */
  546.  
  547. .audiopost {
  548. width:100%;
  549. height:120px;
  550. background:linear-gradient(to right, {color:accent 2}, {color:accent 3}, {color:accent 4});
  551. border-radius:6px;
  552. overflow:hidden;
  553.  
  554. }
  555.  
  556. #albumart{
  557. z-index:2;
  558. width:120px;
  559. float:left;
  560. height:120px;
  561. }
  562.  
  563. .playerbox {
  564. float:left;
  565. }
  566.  
  567.  
  568. #albumart img{
  569. width:120px;
  570. height:120px;
  571. float:left;
  572. border-width:0px; transition:.6s;
  573. }
  574.  
  575.  
  576. .player {
  577. width:30px;
  578. overflow:hidden;
  579. height:40px;
  580. transform:scale(1.2);
  581. border-radius:100%;
  582. top:8px;
  583. bottom:10px;
  584. left:4px;
  585. padding:8px;
  586. padding-top:6px;
  587. padding-left:8px;
  588. padding-bottom:0px;
  589. border-radius:100%;
  590. position:absolute;
  591.  
  592. }
  593.  
  594.  
  595. .playercon {
  596. width:56px;
  597. height:56px;
  598. border-radius:100%;
  599. left:0px;
  600. background:#f3f3f3;
  601. top:32px;
  602. position:relative;
  603.  
  604. }
  605.  
  606.  
  607. .infobox {
  608. float:left top;
  609. margin-left:130px;
  610. background-color:transparent;
  611. padding:14px;
  612. color:{color:text};
  613. }
  614.  
  615. .track {
  616.  
  617. font-size:1em;
  618. letter-spacing:2px;
  619. padding:2px;
  620. font-weight:bold;
  621. transition:.6s;
  622. color:#333;
  623. }
  624. .artist {
  625. letter-spacing:2px;
  626. padding:2px;
  627. font-size:.92em;
  628. }
  629.  
  630. .album {
  631. font-size:1em;;
  632.  
  633. }
  634.  
  635. .playcount {
  636. font-size:9px;
  637. text-transform:uppercase;
  638. letter-spacing:3px;
  639. }
  640.  
  641. /* ask posts */
  642.  
  643. .speechbubble {
  644. width:360px;
  645. margin:20px;position: relative;
  646. background:{color:speechbubble};
  647. left:70px;
  648. color:{color:speechbubble text};
  649. margin: 20px 0;
  650. padding:10px;
  651. text-align:left;
  652. border-radius:10px;
  653. box-shadow: 0px 0 1px rgba(0,0,0,0);
  654. }
  655. .speechbubble:after {
  656. position: absolute;
  657. content: "";
  658. border-color: {color:speechbubble} transparent transparent transparent;
  659. border-style: solid;
  660. border-width: 15px 15px 0px;
  661. height:0;
  662. width:0;
  663. position:absolute;
  664. left:-15px;
  665. top:10px;
  666. }
  667.  
  668. /* post info */
  669.  
  670. .info {
  671. z-index:999;
  672. padding:10px 0;
  673. border-top:1px solid #eee;
  674. }
  675. .topinfo {
  676. padding:10px 0px;
  677. position:relative;
  678.  
  679. }
  680.  
  681. .notec {
  682. position:absolute;
  683. width:calc(100% - 50px);
  684. top:0px;
  685. left:0px;
  686. margin-left:50px;
  687. height:100%;
  688. }
  689.  
  690. .notec a {
  691. position:absolute;
  692. right:0px;
  693. top:25%;
  694. padding:2px 10px;
  695. background:{color:posts};
  696. }
  697.  
  698. .notec:before {
  699. width:100%;
  700. left:0px;
  701. height:2px;
  702. border-radius:10px;
  703. background:linear-gradient(to left, {color:accent 3}, {color:accent 2}, {color:accent 4});
  704. content:'';
  705. top:50%;
  706. bottom:50%;
  707. position:absolute;
  708. }
  709.  
  710. .topinfo .th {
  711. padding:10px;
  712. border-radius:100%;
  713. background:{color:accent 1};
  714. }
  715.  
  716. /* pagination */
  717.  
  718. #pagination {
  719. margin:auto
  720. z-index:9;
  721. text-align: center;
  722. position: relative;
  723. width: 100%;
  724. }
  725.  
  726.  
  727. #pagination a, .current_page {
  728. margin: 0 4px;
  729. display: inline-block;
  730. width: 40px;
  731. height: 40px;
  732. text-align: center;
  733. background: {color:accent 1};
  734. border-radius: 100%;
  735. color: #fff;
  736. line-height: 42px;
  737.  
  738. }
  739.  
  740. .current_page {
  741. background: {color:accent 3};
  742. color:#fff;
  743. }
  744.  
  745.  
  746. /* ------------
  747.  
  748. 06. Blogroll
  749.  
  750. ------------ */
  751.  
  752. #content {
  753. margin:0 auto;
  754. width:100%;
  755. }
  756.  
  757. /** ICONS **/
  758. #content img{
  759. margin-left:10px;
  760. width:50px;
  761. padding:4px;
  762. }
  763.  
  764.  
  765. @media (max-width:1050px){
  766. #sidebar {
  767. position:relative!important;
  768. margin:auto;
  769. width:500px;
  770. }
  771.  
  772. aside {
  773. position:relative;
  774. height:auto!important;
  775. }
  776.  
  777.  
  778. }
  779.  
  780.  
  781.  
  782.  
  783. @media (max-width:700px){
  784. #sidebar {
  785. width:80%!important;
  786. margin:90px auto;
  787. transform:translate(0,0);
  788. }
  789. .container, aside {
  790. width:100%;
  791. margin:auto;
  792. left:0px;
  793. }
  794.  
  795. .container {
  796. margin:50px auto
  797. }
  798. .posts {
  799. width:80%;
  800. margin:50px auto;
  801. }
  802. .posts:before {
  803. display:none;
  804. }
  805.  
  806. ul.tabs {
  807. top:0px!important;
  808. margin-top:0px;
  809. margin:auto;
  810. text-align:center;
  811. width:100%;
  812. right:0px;
  813. background:white;
  814. transform:translate(0%, 0);
  815. padding:0;
  816. z-index:9999999;
  817. position:fixed;
  818. }
  819.  
  820. ul.tabs li {
  821. margin-top:10px;
  822. margin-left:20px;
  823.  
  824. }
  825.  
  826. .sidecon:before {
  827. display:none;
  828. }
  829.  
  830. ul.tabs li:after,
  831. ul.tabs li.current:after {
  832. display:none;
  833. }
  834.  
  835. }
  836.  
  837.  
  838. @media (max-width:400px){
  839. #sidebar {
  840. max-width:350px!important;
  841. width:90%!important;
  842. margin:50px auto!important;
  843. }
  844. .posts {
  845. width:90%;
  846. margin:50px auto;
  847. }
  848.  
  849.  
  850. }
  851.  
  852. #egg {
  853. right:10px; bottom:10px;
  854. position:fixed;
  855. display:block;
  856. width: 14px; height: 18px;
  857. background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  858. border:1px solid #aaa;
  859. z-index:4;
  860. transform:scale(1.02);
  861. }
  862. #egg:hover { animation-name: egg;
  863. animation-duration: 1s;
  864. animation-iteration-count: infinite;}
  865. @keyframes egg{
  866. 0%{}
  867. 10%{transform:rotate(20deg) scale(1.12)}
  868. 80%{transform:rotate(-20deg)}
  869. 100%{}
  870. }
  871.  
  872. [tooltip] {
  873. position: relative;
  874. z-index: 9;
  875. cursor: pointer;
  876. }
  877.  
  878. /* Hide the tooltip content by default */
  879. [tooltip]:before,
  880. [tooltip]:after {
  881. visibility: hidden;
  882. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  883. filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  884. opacity: 0;
  885. pointer-events: none;
  886. }
  887.  
  888. /* Position tooltip above the element */
  889. [tooltip]:before {
  890. position: absolute;
  891. bottom: 154%;
  892. left: 50%;
  893. margin-bottom: 4px;
  894. margin-left: -40px;
  895. padding: 6px;
  896. width: 80px;
  897. -webkit-border-radius: 3px;
  898. -moz-border-radius: 3px;
  899. border-radius: 3px;
  900. background-color: #333;
  901. color: #fff;
  902. content: attr(tooltip);
  903. text-align: center;
  904. font-size: 14px;
  905. line-height: 1.2;
  906. }
  907.  
  908. /* Triangle hack to make tooltip look like a speech bubble */
  909. [tooltip]:after {
  910. position: absolute;
  911. bottom: 154%;
  912. left: 50%;
  913. margin-left: -4px;
  914. width: 0;
  915. border-top: 6px solid #333;
  916. border-right: 6px solid transparent;
  917. border-left: 5px solid transparent;
  918. content: " ";
  919. font-size: 0;
  920. line-height: 0;
  921. }
  922.  
  923. /* Show tooltip content on hover */
  924. [tooltip]:hover:before,
  925. [tooltip]:hover:after {
  926. visibility: visible;
  927. transition:.6s;
  928. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  929. filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  930. opacity: 1;
  931. }
  932.  
  933. {CustomCSS}
  934. </style>
  935. </head>
  936.  
  937. <body>
  938. <ul class="tabs">
  939. <li class="tab-link current" data-tab="tab-1"><span tooltip="{text:tab 1 title}">1</span></li>
  940. <li class="tab-link" data-tab="tab-2"><span tooltip="{text:tab 2 title}">2</span></li>
  941. <li class="tab-link" data-tab="tab-3"><span tooltip="{text:tab 3 title}">3</span></li>
  942. <li class="tab-link" data-tab="tab-4"><span tooltip="{text:tab 4 title}">4</span></li>
  943. </ul>
  944. <header>
  945.  
  946. </header>
  947. <aside>
  948. <div id="sidebar">
  949. <div class="sidecon">
  950. <a href="/" class="th th-exclamation-o"></a>
  951.  
  952. </div>
  953.  
  954. <div class="caption">
  955. <div class="reblog-header">
  956. <img src="{PortraitURL-24}" style="float:left;"> <span class="user">{Name}</span>
  957. </div>
  958.  
  959. <div style="margin-top:20px">
  960. {Description}
  961. </div>
  962.  
  963. {block:HasPages}<div class="margin-top:40px">
  964. {block:Pages} <a href="{Url}">{Label}</a>
  965. {/block:Pages}
  966. </div>{/block:HasPages}
  967. </div>
  968.  
  969. </div>
  970. </aside>
  971.  
  972.  
  973. <main class="container">
  974.  
  975. <div id="tab-1" class="tab-content current">
  976.  
  977. {block:Posts}<article class="posts">
  978.  
  979. <div class="topinfo">
  980. <a href="{permalink}" class="th {block:text}th-bookmark-o {/block:text} {block:photo}th-photo-camera-1-o {/block:photo} {block:photoset} th-add-o {/block:photoset} {block:quote}th-megaphone-1-o {/block:quote} {block:link} th-link-1-o {/block:link} {block:audio} th-volume-o {/block:audio} {block:chat} th-list-o{/block:chat} {block:video} th-video-player-1-o {/block:video} {block:answer} th-question-o{/block:answer}"></a>
  981. {block:NoteCount} <div class="notec"> <a href="{permalink}">{notecount}</a> </div> {/block:NoteCount}
  982. </div>
  983. <!-- {block:NoRebloggedFrom}
  984. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  985. {/block:NoRebloggedFrom} -->
  986. {block:ContentSource}
  987. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  988. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  989. {/block:SourceLogo}
  990. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  991. {/block:ContentSource}
  992. {block:Text}
  993.  
  994. {block:Title}
  995. <h2><a href="{Permalink}">{Title}</a></h2>
  996. {/block:Title}
  997.  
  998. <div class="caption">{block:NotReblog}
  999. <figcaption>
  1000. {Body}
  1001. </figcaption>
  1002. {/block:NotReblog}
  1003.  
  1004. {block:RebloggedFrom}
  1005. <div class="reblog-list">
  1006. {block:Reblogs}
  1007. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1008. <div class="reblog-header">
  1009.  
  1010. {block:IsActive}
  1011. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1012. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1013. </a>
  1014. {/block:IsActive}
  1015.  
  1016. {block:IsDeactivated}
  1017. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1018. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1019. </span>
  1020. {/block:IsDeactivated}
  1021.  
  1022. {block:IsActive}
  1023. <a target="_blank" href="{Permalink}" class="user"> {Username}</a>
  1024. {/block:IsActive}
  1025.  
  1026. {block:IsDeactivated}
  1027. <span class="inactive deactivated">{Username}</span>
  1028. {/block:IsDeactivated}
  1029.  
  1030. </div>
  1031. <div class="reblog-content">
  1032. {Body}
  1033. </div>
  1034. </div>
  1035. {/block:Reblogs}
  1036. </div>
  1037. {/block:RebloggedFrom}
  1038.  
  1039. </div>
  1040.  
  1041.  
  1042.  
  1043. {/block:Text}{block:Photo}
  1044.  
  1045. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  1046. {block:Caption}
  1047. <div class="caption"> {block:NotReblog}
  1048. <figcaption>
  1049. {Caption}
  1050. </figcaption>
  1051. {/block:NotReblog}
  1052.  
  1053. {block:RebloggedFrom}
  1054. <div class="reblog-list">
  1055. {block:Reblogs}
  1056. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1057. <div class="reblog-header">
  1058.  
  1059. {block:IsActive}
  1060. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1061. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1062. </a>
  1063. {/block:IsActive}
  1064.  
  1065. {block:IsDeactivated}
  1066. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1067. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1068. </span>
  1069. {/block:IsDeactivated}
  1070.  
  1071. {block:IsActive}
  1072. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  1073. {/block:IsActive}
  1074.  
  1075. {block:IsDeactivated}
  1076. <span class="inactive deactivated">{Username}</span>
  1077. {/block:IsDeactivated}
  1078.  
  1079. </div>
  1080. <div class="reblog-content">
  1081. {Body}
  1082. </div>
  1083. </div>
  1084. {/block:Reblogs}
  1085. </div>
  1086. {/block:RebloggedFrom}</div>
  1087. {/block:Caption}
  1088.  
  1089. {/block:Photo}{block:Panorama}
  1090.  
  1091. {LinkOpenTag}
  1092. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  1093. {LinkCloseTag}{block:Caption}
  1094. <div class="text">{Caption}</div>
  1095. {/block:Caption}
  1096.  
  1097. {/block:Panorama}{block:Photoset}
  1098.  
  1099. {Photoset}
  1100.  
  1101. {block:Caption}
  1102. <div class="caption"> {block:NotReblog}
  1103. <figcaption>
  1104. {Caption}
  1105. </figcaption>
  1106. {/block:NotReblog}
  1107.  
  1108. {block:RebloggedFrom}
  1109. <div class="reblog-list">
  1110. {block:Reblogs}
  1111. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1112. <div class="reblog-header">
  1113.  
  1114. {block:IsActive}
  1115. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1116. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1117. </a>
  1118. {/block:IsActive}
  1119.  
  1120. {block:IsDeactivated}
  1121. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1122. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1123. </span>
  1124. {/block:IsDeactivated}
  1125.  
  1126. {block:IsActive}
  1127. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  1128. {/block:IsActive}
  1129.  
  1130. {block:IsDeactivated}
  1131. <span class="inactive deactivated">{Username}</span>
  1132. {/block:IsDeactivated}
  1133.  
  1134. </div>
  1135. <div class="reblog-content">
  1136. {Body}
  1137. </div>
  1138. </div>
  1139. {/block:Reblogs}
  1140. </div>
  1141. {/block:RebloggedFrom}</div>
  1142. {/block:Caption}
  1143.  
  1144. {/block:Photoset}{block:Quote}
  1145. <div class="caption" style="text-align:center; padding:40px">
  1146. <span style="font-size:1.11em"> "{Quote}" </span>
  1147. <br>
  1148. {block:Source}
  1149. {Source}
  1150. {/block:Source}
  1151. </div>
  1152. {/block:Quote}{block:Link}
  1153. <div class="caption"><p>
  1154. <big style="padding:10px; background:{color:accent 1}; width:100%; border-radius:8px"> <a href="{URL}" class="link" {Target}>{Name}</a> </span></big>
  1155.  
  1156. {block:Description}
  1157. <div style="padding:10px 0"> {Description}</div>
  1158. {/block:Description}
  1159. </div>
  1160. {/block:Link}
  1161.  
  1162. {block:Chat}
  1163. <div class="caption">{block:Title}<h2>{title}</h2>{/block:Title}{block:Lines}<div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br/></div>{/block:Lines}</div>{/block:Chat}
  1164.  
  1165.  
  1166. {block:Video}
  1167.  
  1168. {Video-500}
  1169. {block:Caption}
  1170. <div class="caption"> {block:NotReblog}
  1171. <figcaption>
  1172. {Caption}
  1173. </figcaption>
  1174. {/block:NotReblog}
  1175.  
  1176. {block:RebloggedFrom}
  1177. <div class="reblog-list">
  1178. {block:Reblogs}
  1179. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1180. <div class="reblog-header">
  1181.  
  1182. {block:IsActive}
  1183. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1184. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1185. </a>
  1186. {/block:IsActive}
  1187.  
  1188. {block:IsDeactivated}
  1189. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1190. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1191. </span>
  1192. {/block:IsDeactivated}
  1193.  
  1194. {block:IsActive}
  1195. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  1196. {/block:IsActive}
  1197.  
  1198. {block:IsDeactivated}
  1199. <span class="inactive deactivated">{Username}</span>
  1200. {/block:IsDeactivated}
  1201.  
  1202. </div>
  1203. <div class="reblog-content">
  1204. {Body}
  1205. </div>
  1206. </div>
  1207. {/block:Reblogs}
  1208. </div>
  1209. {/block:RebloggedFrom}</div>
  1210. {/block:Caption}
  1211.  
  1212. {/block:Video}{block:Audio} <div class="audiopost">
  1213. <div class="playerbox">
  1214. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1215.  
  1216. <center><div class="playercon"><div class="player">{AudioPlayerWhite}</div></div></center></div>
  1217. <div class="infobox">
  1218. <div class="track"> {block:TrackName}
  1219. Track: {TrackName}
  1220. {/block:TrackName} </div>
  1221.  
  1222.  
  1223. <div class="artist">
  1224. {block:Artist}
  1225.  
  1226. Artist: {Artist}
  1227. {/block:Artist} </div>
  1228.  
  1229.  
  1230. </div> </div> <br>
  1231. {block:Caption}
  1232. <div class="caption"> {block:NotReblog}
  1233. <figcaption>
  1234. {Caption}
  1235. </figcaption>
  1236. {/block:NotReblog}
  1237.  
  1238. {block:RebloggedFrom}
  1239. <div class="reblog-list">
  1240. {block:Reblogs}
  1241. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1242. <div class="reblog-header">
  1243.  
  1244. {block:IsActive}
  1245. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1246. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1247. </a>
  1248. {/block:IsActive}
  1249.  
  1250. {block:IsDeactivated}
  1251. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1252. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1253. </span>
  1254. {/block:IsDeactivated}
  1255.  
  1256. {block:IsActive}
  1257. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  1258. {/block:IsActive}
  1259.  
  1260. {block:IsDeactivated}
  1261. <span class="inactive deactivated">{Username}</span>
  1262. {/block:IsDeactivated}
  1263.  
  1264. </div>
  1265. <div class="reblog-content">
  1266. {Body}
  1267. </div>
  1268. </div>
  1269. {/block:Reblogs}
  1270. </div>
  1271. {/block:RebloggedFrom}</div>
  1272. {/block:Caption}
  1273. {/block:Audio}
  1274.  
  1275.  
  1276.  
  1277. {block:Answer}
  1278.  
  1279. <br>
  1280. <div class="askerportrait"><img style=" margin-left:10px; margin-top:10px; border-radius:10px;" src="{AskerPortraitURL-40}" align="left" /></div><div class="speechbubble">{Asker} shouted: {Question}</div> {answer}
  1281.  
  1282.  
  1283. {/block:Answer}
  1284. {block:date}
  1285. <div class="info">
  1286. <a href="/day/{year}/{monthnumberwithzero}/{dayofmonthwithzero}" tooltip="at {12hour}:{minutes}{AmPM}" >{lang:Posted TimeAgo}</a> <br>{block:HasTags}{block:tags}<a href="{tagURL}">#{tag}</a> {/block:tags}{/block:HasTags}</div> {/block:date}
  1287.  
  1288. </article><br><!--posts end-->{/block:Posts}
  1289. <center>
  1290. {block:Pagination}
  1291. <div id="pagination">
  1292. {block:previousPage} <span class ="jump_page"><a href="{PreviousPage}"> <span class="th th-left-direction"></span></a></span>{/block:PreviousPage}
  1293.  
  1294. {block:JumpPagination length="5"}
  1295. {block:CurrentPage}
  1296. <span class="current_page th th-{text:current}"></span>
  1297. {/block:CurrentPage}
  1298.  
  1299. {block:JumpPage}
  1300. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1301. {/block:JumpPage}
  1302. {/block:JumpPagination}
  1303.  
  1304. {block:NextPage} <span class="jump_page">
  1305. <a href="{NextPage}"> <span class="th th-right-direction"></span> </a>
  1306. </span>{/block:NextPage}
  1307. </div>
  1308. {/block:Pagination}
  1309.  
  1310. {block:DayPagination}{block:PreviousDayPage}
  1311. <a href="{PreviousDayPage}" class="jump_page">
  1312. <span class="th th-left-direction"></span>
  1313. </a>
  1314. {/block:PreviousDayPage}
  1315.  
  1316. {block:PreviousDayPage}
  1317. <span class="currentpage"> Previous: {ShortMonth} {Dayofmonth} </span>
  1318. {/block:PreviousDayPage}
  1319. {block:NextDayPage}
  1320. <span class="currentpage">Next: {ShortMonth} {Dayofmonth} </span>
  1321. {/block:NextDayPage}
  1322. {block:NextDayPage}
  1323. <a href="{NextDayPage}" class="jump_page">
  1324. <span class="th th-right-direction"></span>
  1325. </a>
  1326. {/block:NextDayPage}{/block:DayPagination}
  1327. {block:PermalinkPagination}
  1328. {block:PreviousPost}
  1329. <a href="{PreviousPost}" class="jump_page"><span class="th th-left-direction"></span></a>
  1330. {/block:PreviousPost}
  1331.  
  1332. {block:NextPost}
  1333. <a href="{NextPost}" class="jump_page"><span class="th th-right-direction"></span></a>
  1334. {/block:NextPost}
  1335. {/block:PermalinkPagination} </center>
  1336.  
  1337. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1338. <!--container end-->
  1339.  
  1340.  
  1341. </main><div id="tab-2" class="tab-content">
  1342. <div class="asks">
  1343. <div class="topinfo">
  1344. <a href="{permalink}" class="th th-question-o"></a>
  1345. <div class="notec"> <a href="">{AskLabel}</a> </div>
  1346. </div>
  1347. {text:askbox}<br>
  1348. {block:askenabled} <iframe id="ask_form" style="background-color: transparent; overflow: hidden;" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" frameborder="0" scrolling="no" width="100%" height="200"></iframe> {/block:askenabled}</div>
  1349. </div></div>
  1350. <div id="tab-3" class="tab-content">
  1351. <div class="about">
  1352. <div class="topinfo">
  1353. <a href="{permalink}" class="th th-user-3-o"></a>
  1354. <div class="notec"> <a href="">About {name}</a> </div>
  1355. </div>
  1356. {text:tab 3}</div></div>
  1357. </div> <div id="tab-4" class="tab-content"><div class="blogroll">
  1358. <div class="topinfo">
  1359. <a href="{permalink}" class="th th-app-o"></a>
  1360. <div class="notec"> <a href="">More</a> </div>
  1361. </div>
  1362. {text:tab 4} <br><br>
  1363. {block:ifblogroll}<div id="content"> {block:Following}{block:Followed}<a href="{FollowedURL}" tooltip="{FollowedName}"><img src="{FollowedPortraitURL-48}">{/block:Followed}{/block:Following}</div>{/block:ifblogroll}
  1364. </div>
  1365. </div>
  1366. </div>
  1367. </div>
  1368.  
  1369. {block:ContentSource}
  1370. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1371. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1372. {/block:SourceLogo}
  1373. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1374. {/block:ContentSource}
  1375.  
  1376. <a id="egg" href="https://egg.design"></a>
  1377.  
  1378. </body>
  1379.  
  1380. </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!