API tools faq
paste
cornetespoir

Organ edit #1

cornetespoir
Mar 31st, 2019
524
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.95 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. // [Theme]
  4.  
  5. Organ Edit
  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. + this is an april fools theme, so please be aware that does not have the same features as a normal theme
  14.  
  15.  
  16. Credits
  17. + Iconn in preview made by https://www.freepik.com from https://www.flaticon.com/
  18.  
  19. Version 1.0
  20.  
  21. -->
  22.  
  23. <!DOCTYPE html>
  24. <html>
  25. <head>
  26. <title>{Title}</title>
  27. <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  31.  
  32. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  33.  
  34.  
  35. <link href="https://fonts.googleapis.com/css?family=Muli|Titillium+Web" rel="stylesheet">
  36. <meta name="viewport" content="width=device-width, initial-scale=1">
  37. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  38. <script>
  39. $(document).ready(function(){
  40. $('#abt').click(function() {
  41. $('body').toggleClass('active');
  42. });
  43. });
  44. </script>
  45. <style>
  46.  
  47.  
  48.  
  49. body {
  50. background:url() center center fixed;
  51. word-wrap:break-word;
  52. line-height:180%;
  53. {block:indexpage}
  54. overflow-y:hidden;
  55. {/block:indexpage}
  56. font-family:Muli;
  57.  
  58. }
  59.  
  60. a {
  61. text-decoration:none;
  62. color:#222;
  63. }
  64.  
  65. main {
  66. {block:indexpage}
  67. display:flex;
  68. overflow-y:hidden;
  69.  
  70. overflow-x:auto;
  71. align-content:center;
  72. height:68vh;
  73. align-items:flex-start;
  74. {/block:indexpage}
  75. width:84%;
  76. margin:100px auto;
  77. padding-bottom:40px;
  78.  
  79. }
  80. *, :hover {
  81. transition:.4s;
  82. }
  83.  
  84.  
  85.  
  86. .indextext {
  87. width:calc(100% - 20px);
  88. background:#f8f8f8;
  89. padding:10px;
  90. height:100%;
  91. display:flex;
  92. align-content:center;
  93. flex-wrap:wrap;
  94. align-items:center;
  95. justify-content:center;
  96.  
  97. {block:permalinkpage}
  98. display:none;
  99. {/block:permalinkpage}
  100. }
  101.  
  102.  
  103.  
  104. .indextext p {
  105. width:100%;
  106. text-align:center;
  107. }
  108. .indexpage.posts{
  109. flex: 0 0 auto;
  110. width:12%;
  111. margin:0px 0px;
  112. height:auto;
  113. border-bottom-left-radius:40px;
  114. border-bottom-right-radius:40px;
  115. max-height:100%;
  116. border-right:none;
  117. overflow:hidden;
  118. position:relative;
  119.  
  120. }
  121. {block:permalinkpage}
  122. .posts,{/block:permalinkpage} ol.notes {
  123. width:700px;
  124. margin:100px auto;
  125. }
  126.  
  127. .posts:hover {
  128. border-radius:0px;
  129.  
  130. }.indexpage.photo-post .pset {
  131. display:none;
  132. }
  133. .indexpage.photo-post .pset:first-of-type {
  134. display:block;
  135. }
  136.  
  137.  
  138. .indexpage .pho{
  139. width:100%;
  140. position:absolute;
  141. display:block!important;
  142. height:100%;
  143. z-index:-1;
  144. top:0px;
  145. left:0px;
  146. background-size:cover!Important;
  147. }
  148.  
  149. .info {
  150. padding:10px 0px;
  151. text-align:center;
  152. width:100%;
  153. background:white;
  154. z-index:99999;
  155. border:1px solid #eee;
  156. }
  157.  
  158. .posts img {
  159. max-width:200%;
  160. display:block;
  161. }
  162.  
  163.  
  164.  
  165. .phot {
  166. width:100%;
  167. }
  168.  
  169. .reblogs, .text, .quote, .link, ol.notes{
  170.  
  171. padding:20px;
  172.  
  173. }
  174.  
  175. ol.notes img {
  176. display:none;
  177. }
  178.  
  179. ol.notes li {
  180. position:relative;
  181. margin:20px;
  182. }
  183.  
  184. ol.notes a {
  185.  
  186. text-decoration:none;
  187. }
  188.  
  189. .reblog-header {
  190. display:flex;
  191. align-items:center;
  192. flex-wrap:wrap;
  193. }
  194.  
  195. /* chat posts */
  196.  
  197. .chat {
  198. padding:5px;
  199. line-height:150%;
  200. }
  201.  
  202. .chat:nth-of-type(odd) {
  203. background:{color:links};
  204. color:{color:posts};
  205. -webkit-transition:.5s;
  206. transition:.5s; }
  207.  
  208. .chat:nth-of-type(odd) b {
  209. color:{color:posts};
  210. -webkit-transition:.5s;
  211. transition:.5s; }
  212.  
  213. .chat:nth-of-type(even) {
  214. background:{color:posts};
  215. color:{color:links};
  216. -webkit-transition:.5s;
  217. transition:.5s; }
  218. .chat:nth-of-type(even) b{
  219. color:{color:links};
  220. -webkit-transition:.5s;
  221. transition:.5s; }
  222.  
  223.  
  224. /* Audio Posts */
  225.  
  226.  
  227.  
  228.  
  229. /* circle inside the album art to make it look like a CD */
  230.  
  231.  
  232.  
  233. .posts #albumart img{
  234. width:calc(100% - 20%);
  235. padding:10%;
  236. border-width:0px; transition:.6s;
  237.  
  238. }
  239.  
  240. .playerbox {
  241. width:300px;
  242. height:300px;
  243. box-shadow:4px 4px 20px rgba(0,0,0,.07);
  244. display:flex;
  245. margin:0 0 40px 0;
  246. flex-wrap:wrap;
  247. align-items:center;
  248. justify-content:center;
  249. }
  250.  
  251. .player {
  252. width:32px;
  253. overflow:hidden;
  254. height:26px;
  255. transform:scale(1.6);
  256. z-index:9999999!important;
  257.  
  258.  
  259. }
  260.  
  261.  
  262. .playercon {
  263. height:60px;
  264. width:60px;
  265. background:linear-gradient(to top right, {color:links}, {color:accent2});
  266. transform:translateY(-20px);
  267. border-radius:100%;
  268. overflow:hidden;
  269. display:flex;
  270. flex-wrap:wrap;
  271. align-items:center;
  272. justify-content:center;
  273.  
  274.  
  275.  
  276. }
  277.  
  278.  
  279. .infobox {
  280. width:100%;
  281. height:80px;
  282. bottom:0px;
  283. position:absolute;
  284. overflow:hidden;
  285. display:flex;
  286. align-content:center;
  287. flex-wrap:wrap;
  288. align-items:center;
  289. background:inherit;
  290. background-size:100% auto!important;
  291. text-align:left;
  292. background-position:-6px;
  293. z-index:99!important;
  294. color:{color:text};
  295. }
  296. .infobox:before{
  297. content: '';
  298. z-index:-2;
  299. width: 150%;
  300. height: 140px;
  301. background: inherit;
  302. position: absolute;
  303. left: -50px;
  304. right: 0;
  305. top: -50px;
  306.  
  307. box-shadow: inset 0 0 0 500px rgba(255,255,255,0.2);
  308. filter: blur(10px);
  309. }
  310.  
  311. .artist, .album, .trackname {
  312. width:80%;
  313. margin:auto;
  314. }
  315.  
  316.  
  317.  
  318. .audiopost .caption {
  319. background:#f8f8f8;
  320.  
  321. margin:10% auto 0 auto;
  322. }
  323.  
  324. .audiop {
  325. width:300px;
  326. margin:auto;
  327. margin-top:10%;
  328. background-size:100% auto!important;
  329. position:relative;
  330.  
  331. }
  332.  
  333.  
  334.  
  335. .tags {
  336. padding:20px;
  337. line-height:270%;
  338. }
  339.  
  340. .tags a {
  341. position:relative;
  342.  
  343. padding:6px 12px;
  344.  
  345. margin:10px;
  346. }
  347.  
  348. .tags a span {
  349.  
  350. font-size:.64em;
  351. font-weight:bold;
  352. margin:0 4px;
  353. }
  354.  
  355.  
  356. .user, .inactive {
  357. margin-left:10px;
  358.  
  359. }
  360.  
  361. .h1 {
  362. position: fixed;
  363. width: 200%;
  364. height: 100%;
  365. background:linear-gradient(to bottom, skyblue, transparent);
  366. border-radius: 100%/100%;
  367. left: 50%;
  368. top: -88%;
  369. margin-left: -100%;
  370. }
  371.  
  372. .h2 {
  373. position:fixed;
  374. height:100%;
  375. width:200%;
  376. background:linear-gradient(to top, #64a0ed,transparent);
  377. border-radius: 100%/100%;
  378. left: 50%;
  379. bottom: -80%;
  380. margin-left: -100%;
  381. }
  382.  
  383. nav {
  384. width:6%;
  385. position:fixed;
  386. top:0px;
  387. height:70vh;
  388. left:0;
  389. align-content:flex-start;
  390. overflow:hidden;
  391. display:flex;
  392. flex-wrap:wrap;
  393. justify-content:flex-end
  394. }
  395.  
  396. nav .fa {
  397. width:100%;
  398. margin-top:90px;
  399. color:white;
  400. text-align:right;
  401. font-size:1.4em;
  402. padding:0 10px 0 0;
  403. }
  404.  
  405. .menu {
  406. writing-mode: vertical-rl;
  407. margin-top:10px;
  408. transform: translateX(-4px);
  409. font-size:1.06em;
  410.  
  411. color:white;
  412.  
  413.  
  414. }
  415.  
  416.  
  417.  
  418.  
  419. .egg {
  420. width: 14px; height: 18px;
  421. -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  422. border:2px solid #fff;
  423. z-index:9999;
  424.  
  425. }
  426.  
  427. ::-webkit-scrollbar-track
  428. {
  429.  
  430. border-radius: 10px;
  431. background-color: #F5F5F5;
  432. }
  433.  
  434. main::-webkit-scrollbar
  435. {
  436. width: 5px;
  437. height:4px;
  438. background-color: #F5F5F5;
  439. }
  440.  
  441. ::-webkit-scrollbar-thumb
  442. {
  443. border-radius: 10px;
  444.  
  445. background-color: #aaa;
  446. }
  447.  
  448. .indexpage .caption {
  449. display:none}
  450. .pag {
  451. position:fixed;
  452. top:110px;
  453. }
  454.  
  455. .pag a {
  456. padding:10px;
  457. border:1px solid #eee;
  458. }
  459. #leftpag {
  460. left:1%;
  461. }
  462.  
  463. #rightpag {
  464. right:2%;
  465. }
  466. .permpag {
  467. text-align:center;
  468. }
  469.  
  470. .permpag a {
  471. margin:10px;
  472. }
  473.  
  474. footer {
  475. position:fixed;
  476. width:100%;
  477. min-height:50px;
  478. bottom:0px!important;
  479. display:flex;
  480. align-items:center;
  481. justify-content:space-around;
  482. flex-wrap:wrap;
  483. background:#fff;
  484. border-top:1px solid #eee;
  485. }
  486.  
  487. header {
  488. width:100%;
  489. position:fixed;
  490. text-align:center;
  491. top:10px;
  492. z-index:9999999999999;
  493. }
  494.  
  495. header a {
  496. width:3em;
  497. height:3em;
  498. cursor:pointer;
  499. display:flex;
  500. align-items:center;
  501. justify-content:center;
  502. border-radius:100%;
  503. border:1px solid #eee;
  504. }
  505.  
  506. header img {
  507. width:26px;
  508. }
  509.  
  510. .userabout {
  511. position:fixed;
  512. top:0px;
  513. width:100%;
  514. height:100%;
  515. display:flex;
  516. z-index:-99999;
  517. opacity:0;
  518. background:rgba(255,255,255,.8);
  519. justify-content:center;
  520. align-items:center;
  521. }
  522.  
  523. .about {
  524. width:700px;
  525. padding:40px;
  526. background:#fff;
  527. border:1px solid #eee;
  528. }
  529.  
  530. body.active .userabout {
  531. z-index:999999;
  532. opacity:1;
  533. }
  534. </style>
  535. </head>
  536. <body>
  537. <div class="userabout">
  538. <div class="about">
  539. <h1>{Title}</h1>
  540. {Description}
  541. </div>
  542. </div>
  543. <header>
  544. <center>
  545. <a id="abt" href=""><img src="{portraitURL-128}"></a>
  546. </center>
  547. </header>
  548. <main>
  549.  
  550. {block:posts}
  551. <article class="posts {posttype}-post {block:indexpage} indexpage {/block:indexpage}">
  552. {block:date}
  553. <div class="info">
  554. {block:indexpage}
  555. <a href="{permalink}">{24hour}:{minutes}</a>
  556. {/block:indexpage}
  557. {block:permalinkpage}
  558. {lang:Posted on Month DayOfMonth Year with NoteCount notes 2}
  559. {/block:permalinkpage}
  560. </div>
  561. {/block:date}
  562. {block:Text}
  563. {block:indexpage}
  564. <div class="indextext">
  565. <span class="fa fa-font"></span>
  566. <p>
  567. Text {lang:PostTypeNoun with NoteCount notes}
  568. </div>
  569. {/block:indexpage}
  570. <div class="text">
  571. {block:permalinkpage}
  572. {block:Title}
  573. <h1>{Title}</h1>
  574. {/block:Title}
  575. {block:notreblog}
  576. <figcaption>
  577. {Body}
  578. </figcaption>
  579. {/block:NotReblog}
  580.  
  581. {block:RebloggedFrom}
  582. <div class="reblog-list">
  583. {block:Reblogs}
  584. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  585. <div class="reblog-header">
  586.  
  587. {block:IsActive}
  588. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  589. <img src="{PortraitURL-64}" style="width:40px; float:left">
  590. </a>
  591. {/block:IsActive}
  592.  
  593. {block:IsDeactivated}
  594. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  595. <img src="{PortraitURL-64}" style="width:40px; float:left">
  596. </span>
  597. {/block:IsDeactivated}
  598.  
  599. {block:IsActive}
  600. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  601. {/block:IsActive}
  602.  
  603. {block:IsDeactivated}
  604. <span class="inactive deactivated">{Username}</span>
  605. {/block:IsDeactivated}
  606.  
  607. </div>
  608. <div class="reblog-content">
  609. {Body}
  610. </div>
  611. </div>
  612. {/block:Reblogs}
  613. </div>
  614. {/block:RebloggedFrom}
  615. {/block:permalinkpage}
  616. </div>
  617.  
  618. {/block:text}
  619. {block:Photo}
  620.  
  621.  
  622. <img src="{PhotoURL-HighRes}" class="phot" alt="{PhotoAlt}">
  623.  
  624. {/block:Photo}
  625.  
  626. {block:Panorama}
  627. {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
  628. {/block:Panorama}
  629.  
  630. {block:Photoset}
  631. {block:indexpage}
  632. {block:Photos}
  633.  
  634. <img src="{PhotoURL-HighRes}" class="pset" alt="{PhotoAlt}">
  635.  
  636. {/block:Photos}
  637. {/block:indexpage}
  638. {block:permalinkpage}
  639. {Photoset}
  640. {/block:permalinkpage}
  641. {/block:Photoset}
  642. {block:Link}
  643.  
  644. {block:indexpage}
  645. <div class="indextext">
  646. <span class="fa fa-link"></span>
  647. <p>
  648. {lang:PostTypeNoun with NoteCount notes}
  649. </p>
  650. </div>
  651. {/block:indexpage}
  652. <div class="link">
  653.  
  654. {block:permalinkpage}
  655.  
  656. <a href="{URL}" class="linkp">{Name}</a>
  657. {block:Description}
  658. {Description}
  659. {/block:Description}
  660. {/block:permalinkpage}
  661. </div>
  662. {/block:Link}
  663.  
  664. {block:Video}
  665. {block:indexpage}
  666. <div class="indextext">
  667. <span class="fa fa-video"></span>
  668. <p>
  669. {lang:PostTypeNoun with NoteCount notes}</p>
  670. </div>
  671. {/block:indexpage}
  672. {block:permalinkpage}
  673. <center>
  674. {Video-500}
  675. </center>
  676. {/block:permalinkpage}
  677. {/block:Video}
  678. {block:Quote}
  679.  
  680.  
  681. {block:indexpage}
  682. <div class="indextext">
  683. <span class="fa fa-quote-left"></span>
  684. <p>
  685. {lang:PostTypeNoun with NoteCount notes}
  686. </div>
  687. {/block:indexpage}
  688. {block:permalinkpage}
  689. <div class="quote">
  690. {Quote}
  691. <p>
  692. {Source}
  693. </p>
  694. {/block:permalinkpage}
  695. </div>
  696. {/block:Quote}
  697.  
  698. {block:Chat}
  699. {block:indexpage}
  700. <div class="indextext">
  701. <span class="fa fa-comments"></span>
  702. <p>
  703. {lang:PostTypeNoun with NoteCount notes}
  704. </div>
  705. {/block:indexpage}
  706. {block:permalinkpage}
  707. <div class="reblogs">{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:permalinkpage}{/block:Chat}
  708.  
  709.  
  710. {block:Audio}
  711. {block:albumart} <img src="{AlbumArtURL}">{/block:Albumart}
  712.  
  713. {block:permalinkpage}
  714. <div class="audiop" style="{block:AlbumArt}background:url({AlbumArtURL});{/block:AlbumArt}">
  715. <div class="playerbox">
  716. <div class="playercon"><div class="player">{AudioPlayerWhite}</div></div></div>
  717. <div class="infobox">
  718. <div class="trackname"> {block:TrackName}
  719. Track: {TrackName}
  720. {/block:TrackName} </div>
  721.  
  722. <div class="artist">
  723. {block:Artist}
  724.  
  725. Artist: {Artist}
  726. {/block:Artist} </div>
  727.  
  728. <div class="album">
  729. {block:Album}
  730. Album: {Album}
  731. {/block:Album}
  732. </div>
  733.  
  734. </div></div>
  735. {/block:permalinkpage}
  736. {/block:Audio}
  737.  
  738. {block:Answer}
  739. <div class="reblogs">
  740. <div style="padding:10px; background:#eee;">
  741. {Asker}: {Question}
  742. </div>
  743. {block:permalinkpage}
  744. {Answer}
  745. {/block:permalinkpage}
  746. </div>
  747. {/block:Answer}
  748. {block:caption}
  749.  
  750. <div class="caption">
  751. {block:Title}
  752. <h1>{Title}</h1>
  753. {/block:Title}
  754. {block:notreblog}
  755. <figcaption>
  756. {Body}
  757. </figcaption>
  758. {/block:NotReblog}
  759.  
  760. {block:RebloggedFrom}
  761. <div class="reblog-list">
  762. {block:Reblogs}
  763. <div class="reblogs {block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  764. <div class="reblog-header">
  765.  
  766. {block:IsActive}
  767. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  768. <img src="{PortraitURL-64}" style="width:40px; float:left">
  769. </a>
  770. {/block:IsActive}
  771.  
  772. {block:IsDeactivated}
  773. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  774. <img src="{PortraitURL-64}" style="width:40px; float:left">
  775. </span>
  776. {/block:IsDeactivated}
  777.  
  778. {block:IsActive}
  779. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  780. {/block:IsActive}
  781.  
  782. {block:IsDeactivated}
  783. <span class="inactive deactivated">{Username}</span>
  784. {/block:IsDeactivated}
  785.  
  786. </div>
  787. <div class="reblog-content">
  788. {Body}
  789. </div>
  790. </div>
  791. {/block:Reblogs}
  792. </div>
  793. {/block:RebloggedFrom}
  794. </div>
  795.  
  796. {/block:caption}
  797.  
  798.  
  799.  
  800. {block:permalinkpage}
  801. {block:hastags}
  802. <div class="tags">
  803. {block:tags}<a href="{TagURL}"><span>#</span> {Tag}</a>
  804. {/block:tags}
  805. </div>
  806. {/block:hastags}
  807. {/block:permalinkpage}
  808. </article>
  809.  
  810. <div class="permpag">
  811. {block:PermalinkPagination}
  812. {block:PreviousPost}
  813. <a href="{PreviousPost}">{lang:Previous Post}</a>
  814. {/block:PreviousPost}
  815.  
  816. {block:NextPost}
  817. <a href="{NextPost}">{lang:Next Post}</a>
  818. {/block:NextPost}
  819. {/block:PermalinkPagination}
  820. </div>
  821.  
  822. {PostNotes}
  823. {/block:posts}
  824.  
  825.  
  826.  
  827. </div>
  828. </main>
  829.  
  830.  
  831.  
  832. {block:Pagination}
  833. <div class="pag" id="leftpag">{block:PreviousPage}
  834. <span> <a href="{PreviousPage}">{lang:Previous}</a></span>
  835. {/block:PreviousPage}
  836. </div>
  837. <div id="rightpag" class="pag">
  838. {block:NextPage}
  839. <span> <a href="{NextPage}">{lang:Next}</a></span>
  840. {/block:NextPage}</div>{/block:Pagination}
  841.  
  842. <footer>
  843. <a href="/">Home</a> <a href="/ask">Ask</a>
  844. {block:haspages}
  845. {block:pages}
  846. <a href="{URL}">{Label}</a>
  847. {/block:pages}
  848. {/block:haspages}
  849. <a href="https://egg.design">Theme</a>
  850. </footer>
  851. </body>
  852. </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!