API tools faq
paste
baechubaechubaechu

(3/12) Sunmi

baechubaechubaechu
Mar 2nd, 2018
8,512
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5.  
  6. ** SunMi -Theme by Caro / baechys@tumblr
  7.  
  8. ------------------------------------------------------------------------
  9.  
  10. Script/s used:
  11.  
  12. - PXU Photosets
  13. - Tooltips
  14. - Smooth scrolling ( http://zacharyfury.tumblr.com/post/138066236021/smoothscroll )
  15.  
  16. ------------------------------------------------------------------------
  17.  
  18. FAQ:
  19.  
  20. Can i edit/tweak this theme?
  21. - Tweak and edit it as much as you want! But don't you dare touch my credits in any way possible
  22.  
  23. Can i use this theme as a base-code?
  24. - No you cant.
  25.  
  26. Can i release my edited version of your theme?
  27. - No you cant, and if i find out about you doing that, i will report you.
  28.  
  29. ------------------------------------------------------------------------
  30.  
  31. Any questions?
  32.  
  33. Please visit baechys.tumblr.com/faq
  34.  
  35. ------------------------------------------------------------------------
  36.  
  37. CREDIT TO HTTP://BAECHYS.TUMBLR.COM
  38. -->
  39.  
  40. <head>
  41.  
  42. <!------------------------- General HTML ------------------------->
  43.  
  44. <title>{title}</title>
  45. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  46. <link rel="shortcut icon" href="{favicon}" />
  47.  
  48. <!------------------------- Meta Names ------------------------->
  49.  
  50. <meta name="image:cover" content="https://static.tumblr.com/d70w4cr/wNpp4z8cv/sunmi_gashina.png"/>
  51.  
  52. <meta name="color:background" content="#ffd6c4"/>
  53. <meta name="color:body font" content="#888888"/>
  54. <meta name="color:links" content="#ff8fba"/>
  55. <meta name="color:links hover" content="#ffc4ab"/>
  56. <meta name="color:bold text" content="#666666"/>
  57. <meta name="color:tooltips background" content="#ff8fba"/>
  58. <meta name="color:gradient 1" content="#ffd6c4"/>
  59. <meta name="color:gradient 2" content="#ffa8ca"/>
  60.  
  61. <meta name="if:gradient bg" content="1"/>
  62.  
  63. <meta name="select:theme mode" content="light" title="Light"/>
  64. <meta name="select:theme mode" content="dark" title="Dark"/>
  65.  
  66. <meta name="text:song name" content="Gashina"/>
  67. <meta name="text:artist" content="Sunmi"/>
  68. <meta name="text:post width" content="400"/>
  69.  
  70. <meta name="text:link 1" content="/"/>
  71. <meta name="text:link 1 title" content="link 1"/>
  72. <meta name="text:link 2" content="/"/>
  73. <meta name="text:link 2 title" content="link 2"/>
  74. <meta name="text:link 3" content="/"/>
  75. <meta name="text:link 3 title" content="link 3"/>
  76. <meta name="text:link 4" content="/"/>
  77. <meta name="text:link 4 title" content="link 4"/>
  78. <meta name="text:link 5" content="/"/>
  79. <meta name="text:link 5 title" content="link 5"/>
  80.  
  81. <!------------------------- Imported Fonts ------------------------->
  82.  
  83. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  84.  
  85. <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  86.  
  87. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i" rel="stylesheet">
  88. <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,600i" rel="stylesheet">
  89.  
  90. <!------------------------- SCRIPTS! DONT TOUCH! ------------------------->
  91.  
  92. <!-- photosets -->
  93. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  94. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  95. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  96.  
  97. <script>
  98. $(document).ready(function(){
  99. $('.photo-slideshow').pxuPhotoset({
  100. lightbox: true,
  101. rounded: true,
  102. gutter: '4px',
  103. borderRadius: '5px',
  104. photoset: '.photo-slideshow',
  105. photoWrap: '.photo-data',
  106. photo: '.pxu-photo'
  107. });
  108. });
  109. </script>
  110. <!-- tooltips -->
  111. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  112. <script>
  113. (function($){
  114. $(document).ready(function(){
  115. $("[title]").style_my_tooltips({
  116. tip_follows_cursor:true,
  117. tip_delay_time:200,
  118. tip_fade_speed:300
  119. }
  120. );
  121. });
  122. })(jQuery);
  123. </script>
  124.  
  125. <!-- smooth scroll -->
  126. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  127.  
  128. <style type="text/css">
  129. /* ----------------- lightbox ----------------- */
  130.  
  131. .vignette, #vignette {
  132. opacity:0;
  133. }
  134. .lightbox-image, #tumblr_lightbox img {
  135. box-shadow:none !important;
  136. border-radius:0 !important;
  137. max-width:none;
  138. }
  139.  
  140. .tmblr-lightbox, #tumblr_lightbox {
  141. background-color:rgba({RGBcolor:background},0.85) !important;
  142. z-index:999999999999!important;
  143. }
  144.  
  145. /* ----------------- basic settings ----------------- */
  146.  
  147. body{
  148. margin:0px;
  149. padding:0px;
  150. font-family: 'open sans', arial, sans-serif;
  151. font-size:11px;
  152. color:{color:body font};
  153. background:{color:background} url('{image:background}');
  154. background-attachment:fixed;
  155. }
  156.  
  157. .gradient{
  158. height:100%;
  159. width:100vw;
  160. z-index:-1;
  161. position:fixed;
  162. top:0px;
  163. left:0px;
  164. background: {color:gradient 1};
  165. background: -webkit-linear-gradient({color:gradient 1}, {color:gradient 2});
  166. background: -o-linear-gradient({color:gradient 1}, {color:gradient 2});
  167. background: -moz-linear-gradient({color:gradient 1}, {color:gradient 2});
  168. background: linear-gradient({color:gradient 1}, {color:gradient 2});
  169. }
  170.  
  171. b, strong{
  172. color:{color:bold text};
  173. }
  174. a{
  175. color:{color:links};
  176. text-decoration:none;
  177. -moz-transition: all 0.3s ease-in-out;
  178. -o-transition: all 0.3s ease-in-out;
  179. -webkit-transition: all 0.3s ease-in-outs;
  180. transition: all 0.3s ease-in-out;
  181. }
  182.  
  183. a:hover{
  184. color:{color:links hover};
  185. }
  186.  
  187. h1, h2, h3, h4, h5, h6{
  188. font-family:'montserrat', sans-serif;
  189. margin:5px 0px;
  190. line-height:150%;
  191. }
  192.  
  193. blockquote{
  194. margin:10px 0;
  195. padding:0 0 0 10px;
  196. border-left:1px solid rgba({RGBcolor:gradient 2},0.7);
  197. }
  198.  
  199. underlined{
  200. border-bottom:1px solid {color:body font};
  201. }
  202.  
  203. pre{
  204. overflow:auto;
  205. background-color:#eee;
  206. display:block;
  207. padding:5px;
  208. }
  209.  
  210. /* think about the people reading ur blog... dont make this smaller pls */
  211. small, h5, h6, h4{
  212. font-size:10px;
  213. }
  214.  
  215. /*DONT REMOVE OR DESTROY MY CREDITS
  216. LEAVE EVERYTHING WHERE IT IS*/
  217. #c{
  218. position:fixed;
  219. bottom: 10px;
  220. right: 10px;
  221. text-align:center;
  222. z-index:999999;
  223. }
  224. #c a{
  225. background:{color:gradient 2};
  226. font-size:12px;
  227. color:#fff;
  228. font-size:10px;
  229. padding:5px 7px;
  230. letter-spacing:1px;
  231. text-decoration:none;
  232. border-radius:5px;
  233. margin:0px 3px;
  234. }
  235. #c a:hover{
  236. background:{color:gradient 1};
  237. box-shadow:2px 2px {color:gradient 2};
  238. color:#fff;
  239. letter-spacing:1px;
  240. }
  241.  
  242. /* ----------------- scrollbar ----------------- */
  243.  
  244. ::-webkit-scrollbar-thumb:vertical {
  245. background-color: {color:gradient 2};
  246. width:6px;
  247. height:auto;
  248. }
  249.  
  250.  
  251. ::-webkit-scrollbar-thumb:horizontal {
  252. background-color: {color:gradient 2};
  253. height:6px;
  254. }
  255.  
  256. ::-webkit-scrollbar {
  257. height:6px;
  258. width:6px;
  259. }
  260.  
  261. ::selection {
  262. background-color:{color:gradient 1};
  263. color:white;
  264. }
  265.  
  266. ::-moz-selection-{
  267. background-color:{color:gradient 1};
  268. color:white;
  269. }
  270.  
  271. /* ----------------- tooltips ----------------- */
  272.  
  273. #s-m-t-tooltip {
  274. max-width:150px;
  275. padding:7px 12px;
  276. margin:20px 14px 7px 10px;
  277. background-color:{color:tooltips background};
  278. color:#fff;
  279. font-style: normal;
  280. font-size:11px;
  281. line-height:140%;
  282. letter-spacing:0px;
  283. text-transform:none;
  284. z-index:999999999;
  285. border-radius:5px;
  286. }
  287.  
  288. #wrapper{
  289. width:calc({text:post width}px + 390px);
  290. margin:0 auto;
  291. }
  292.  
  293. /* ----------------- Sidebar ----------------- */
  294.  
  295. aside{
  296. width:280px;
  297. height:450px;
  298. position:fixed;
  299. margin:auto;
  300. top:0px;
  301. bottom:0px;
  302. border-radius:10px;
  303. }
  304.  
  305. .light aside{
  306. background-color:#fff;
  307. }
  308.  
  309. .dark aside{
  310. background-color:#000;
  311. }
  312.  
  313. .cottl{
  314. position:fixed;
  315. font-size:12px;
  316. font-weight:600;
  317. width:280px;
  318. text-align:center;
  319. margin-top:15px;
  320. color:{color:gradient 2};
  321. }
  322.  
  323. /* Song Cover */
  324.  
  325. .cover{
  326. width:200px;
  327. height:200px;
  328. margin-left:40px;
  329. margin-top:50px;
  330. }
  331.  
  332. .light .cover{
  333. box-shadow:0px 0px 30px #fff;
  334. }
  335.  
  336. .dark .cover{
  337. box-shadow:0px 0px 30px #000;
  338. }
  339.  
  340. .cover img{
  341. max-width:200px;
  342. max-height:200px;
  343. }
  344.  
  345. .cover:before{
  346. content:'';
  347. width:240px;
  348. height:180px;
  349. position:absolute;
  350. margin-left:-20px;
  351. margin-top:10px;
  352. z-index:-9;
  353. background: {color:gradient 1};
  354. background: -webkit-linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  355. background: -o-linear-gradient(to right,{color:gradient 1}, {color:gradient 2});
  356. background: -moz-linear-gradient(to right,{color:gradient 1}, {color:gradient 2});
  357. background: linear-gradient(to right,{color:gradient 1}, {color:gradient 2});
  358. }
  359.  
  360. /* Song Titles */
  361.  
  362. .songttlwrap{
  363. margin-top:15px;
  364. text-align:center;
  365. }
  366.  
  367. .songttl{
  368. font-size:170%;
  369. font-weight:600;
  370. font-family:'Montserrat', sans-serif;
  371. color:{color:gradient 2};
  372. }
  373.  
  374. .songartist{
  375. font-weight:600;
  376. font-size:110%;
  377. font-family:'Montserrat', sans-serif;
  378. color:{color:gradient 1};
  379. }
  380.  
  381. /* Playbar */
  382.  
  383. .pbwrap{
  384. width:240px;
  385. margin-left:20px;
  386. margin-top:25px;
  387. position:absolute;
  388. font-family:'Montserrat', sans-serif;
  389. font-weight:600;
  390. color:{color:gradient 2};
  391. }
  392.  
  393. .time1{
  394. float:left;
  395. width:30px;
  396. }
  397.  
  398. .time2{
  399. float:right;
  400. width:30px;
  401. }
  402.  
  403. .playline{
  404. position:absolute;
  405. margin-top:6px;
  406. margin-left:45px;
  407. width:150px;
  408. height:2px;
  409. background: {color:gradient 1};
  410. background: -webkit-linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  411. background: -o-linear-gradient(to right,{color:gradient 1}, {color:gradient 2});
  412. background: -moz-linear-gradient(to right,{color:gradient 1}, {color:gradient 2});
  413. background: linear-gradient(to right,{color:gradient 1}, {color:gradient 2});
  414. }
  415.  
  416. .playline:after{
  417. content:'●';
  418. font-size:20px;
  419. color:{color:gradient 1};
  420. margin-left:40px;
  421. text-shadow:0px 0px 5px {color:gradient 2};
  422. margin-top:-12px;
  423. position:absolute;
  424. }
  425.  
  426. /* Buttons */
  427.  
  428. .sbtnwrap{
  429. width:220px;
  430. margin-left:30px;
  431. text-align:center;
  432. position:absolute;
  433. margin-top:75px;
  434. line-height:50px;
  435. }
  436.  
  437. .sbtnwrap .fa-play{
  438. padding:10px 12px;
  439. border-radius:100%;
  440. border:2px solid;
  441. font-size:15px;
  442. margin:0px 10px;
  443. }
  444.  
  445. .sbtnwrap a{
  446. color:{color:gradient 2};
  447. }
  448.  
  449. .sbtnwrap a:hover{
  450. color:{color:gradient 1};
  451. }
  452.  
  453. .sbtnwrap .fa-step-backward{
  454. font-size:18px;
  455. margin:9px 10px 0px -35px;
  456. position:absolute;
  457. }
  458.  
  459. .sbtnwrap .fa-step-forward{
  460. font-size:18px;
  461. margin:9px 10px 0px 20px;
  462. position:absolute;
  463. }
  464.  
  465. .sbtnwrap .fa-sync{
  466. font-size:15px;
  467. margin:10px 15px 0px 65px;
  468. position:absolute;
  469. }
  470.  
  471. .sbtnwrap .fa-random{
  472. font-size:15px;
  473. margin:12px 10px 0px -80px;
  474. position:absolute;
  475. }
  476.  
  477. /* Slide-in tab thing */
  478.  
  479. input {
  480. display: none;
  481. }
  482.  
  483. label {
  484. position:absolute;
  485. cursor: pointer;
  486. display: inline-block;
  487. padding: 5px 10px 2px 10px;
  488. border-radius: 4px;
  489. -webkit-transition: background-color 0.1s, color 0.1s;
  490. font-size:20px;
  491. margin-top:7px;
  492. margin-left:230px;
  493. color:{color:gradient 2};
  494. z-index:9999;
  495. }
  496.  
  497. label:before{
  498. content:'\e013';
  499. font-family:'saturnicons';
  500. }
  501.  
  502. label:hover {
  503. background: {color:gradient 2};
  504. color: #fff;
  505. cursor:help;
  506. -moz-transition-duration: 0.5s;
  507. -o-transition-duration: 0.5s;
  508. -webkit-transition-duration: 0.5s;
  509. transition-duration: 0.5s;
  510. }
  511.  
  512. .slidey {
  513. -webkit-transition: height .5s ease;
  514. height: 0;
  515. overflow: hidden;
  516. width:280px;
  517. background: red;
  518. margin-top: 40px;
  519. position:absolute;
  520. z-index:9999999;
  521. border-bottom-left-radius:10px;
  522. border-bottom-right-radius:10px;
  523. }
  524.  
  525. .descont{
  526. width:250px;
  527. margin-left:15px;
  528. text-align:center;
  529. }
  530.  
  531. .light .slidey{
  532. background-color:rgba(255,255,255,0.9);
  533. }
  534.  
  535. .dark .slidey{
  536. background-color:rgba(0,0,0,0.9);
  537. }
  538.  
  539. input:checked + .slidey {
  540. height: 410px;
  541. }
  542.  
  543. .desttl{
  544. font-family:'montserrat', sans-serif;
  545. text-align:center;
  546. font-size:150%;
  547. font-weight:600;
  548. margin-top:20px;
  549. }
  550.  
  551. .desttl a{
  552. color:{color:gradient 1};
  553. text-shadow:1px 1px {color:gradient 2};
  554. }
  555.  
  556. .desttl a:hover{
  557. color:{color:gradient 2};
  558. text-shadow:1px 1px {color:gradient 1};
  559. }
  560.  
  561. /* ----------------- post container ----------------- */
  562.  
  563. .postcont{
  564. width:calc({text:post width}px + 20px);
  565. margin-left:370px;
  566. padding-top:140px;
  567. }
  568.  
  569. /* ----------------- posts info ----------------- */
  570.  
  571. .ainfo{
  572. display: -webkit-flex;
  573. display: flex;
  574. -webkit-flex-direction: row;
  575. flex-direction: row;
  576. -webkit-flex-wrap: nowrap;
  577. flex-wrap: nowrap;
  578. -webkit-justify-content: flex-start;
  579. justify-content: flex-start;
  580. width:100%;
  581. line-height:17px;
  582. margin-top:10px;
  583. background-color:{color:gradient 2};
  584. margin-left:-10px;
  585. margin-bottom:-11px;
  586. width:{text:post width}px;
  587. padding:10px;
  588. border-bottom-left-radius:10px;
  589. border-bottom-right-radius:10px;
  590. }
  591.  
  592. .light .ainfo a{
  593. color:#fff;
  594. }
  595.  
  596. .light .ainfo a:hover{
  597. color:rgba(255,255,255,0.5);
  598. }
  599.  
  600. .dark .ainfo a{
  601. color:#000;
  602. }
  603.  
  604. .dark .ainfo a:hover{
  605. color:rgba(0,0,0,0.5);
  606. }
  607.  
  608. .ainfo .fa-step-forward{
  609. font-size:16px;
  610. }
  611.  
  612. .ainfo .fa-step-backward{
  613. font-size:16px;
  614. }
  615.  
  616. .ail{
  617. text-align:left;
  618. }
  619.  
  620. .aipc{
  621. margin:0 auto;
  622. font-family:'Montserrat', sans-serif;
  623. font-weight:600;
  624. }
  625.  
  626. .aipc{
  627. color:{color:gradient 2};
  628. }
  629.  
  630. .air{
  631. float:right;
  632. }
  633.  
  634. /* ----------------- posts ----------------- */
  635.  
  636. article{
  637. margin:0 auto;
  638. padding:10px;
  639. border-top-left-radius:10px;
  640. border-top-right-radius:10px;
  641. border-bottom-left-radius:11px;
  642. border-bottom-right-radius:11px;
  643. width:{text:post width}px;
  644. background-color:#fff;
  645. margin-bottom:70px;
  646. line-height:150%;
  647. }
  648.  
  649.  
  650. article img{
  651. max-width:100%;
  652. height:auto;
  653. }
  654.  
  655. .light article{
  656. background-color:#fff;
  657. }
  658.  
  659. .dark article{
  660. background-color:#000;
  661. }
  662.  
  663. /* ----------------- captions ----------------- */
  664.  
  665. .phrebloghead{
  666. margin-top:5px;
  667. height:22px;
  668. }
  669.  
  670. .rebloghead{
  671. height:22px;
  672. margin-top:5px;
  673. }
  674.  
  675. .cimg{
  676. width:20px;
  677. border-radius:5px;
  678. float:left;
  679. }
  680.  
  681. .user{
  682. margin-left:7px;
  683. padding:2px 5px;
  684. border-radius:5px;
  685. position:absolute;
  686. font-weight:600;
  687. letter-spacing:0.25px;
  688. font-size:11px;
  689. background:{color:links};
  690. }
  691.  
  692. .light .user{
  693. color:#fff;
  694. }
  695.  
  696. .dark .user{
  697. color:#000;
  698. }
  699.  
  700. .user:hover{
  701. background-color:{color:links hover};
  702. box-shadow:2px 2px {color:links};
  703. }
  704.  
  705. .cap{
  706. margin-top:5px;
  707. margin-bottom:10px;
  708. }
  709.  
  710. .cap:nth-last-of-type(){
  711. margin-bottom:0px;
  712. }
  713.  
  714. .dark .cap{
  715. padding:10px;
  716. border-radius:5px;
  717. background-color:#333;
  718. }
  719.  
  720. .phcap{
  721. margin-top:10px;
  722. margin-bottom:10px;
  723. }
  724.  
  725. .phcap:nth-last-of-type(){
  726. margin-bottom:0px;
  727. }
  728.  
  729. .dark .phcap{
  730. padding:5px 10px;
  731. border-radius:5px;
  732. background-color:#333;
  733. }
  734.  
  735. /* ----------------- chats ----------------- */
  736.  
  737. #cttl{
  738. padding-bottom:5px;
  739. }
  740.  
  741. #line{
  742. border-radius:5px;
  743. padding:5px;
  744. margin-top:5px;
  745. padding:2px 5px;
  746. width:calc({text:post width}px - 10px);
  747. color:#fff;
  748. }
  749.  
  750. #line:nth-of-type(even){
  751. background-color:{color:gradient 1};
  752. }
  753.  
  754. #line:nth-of-type(odd){
  755. background-color:{color:gradient 2};
  756. }
  757.  
  758. #line b{
  759. color:#fff;
  760. }
  761.  
  762. /* ----------------- quotes ----------------- */
  763.  
  764. #quote{
  765. text-align:center;
  766. font-size:17px;
  767. line-height:150%;
  768. font-family:'montserrat', sans-serif;
  769. }
  770.  
  771. .dark #quote{
  772. color:{color:gradient 1};
  773. }
  774.  
  775. /* ----------------- audio ----------------- */
  776.  
  777. .playerwrap{
  778. width:calc({text:post width}px - 20px);
  779. height:80px;
  780. padding:10px;
  781. background-color:{color:gradient 1};
  782. border-radius:5px;
  783. }
  784.  
  785. .player{
  786. width:30px;
  787. height:30px;
  788. overflow:hidden;
  789. background-color:#f2f2f2;
  790. border:3px solid {color:gradient 2};
  791. margin-left:22px;
  792. margin-top:22px;
  793. position:absolute;
  794. z-index:1000;
  795. }
  796.  
  797. .playerbg{
  798. height:80px;
  799. width:80px;
  800. float:left;
  801. }
  802.  
  803. .albumart{
  804. position:relative;
  805. z-index:1;
  806. background-color:#fff;
  807. height:80px;
  808. width:80px;
  809. overflow:hidden;
  810. }
  811.  
  812. .overlay{
  813. height:80px;
  814. width:80px;
  815. background-color:rgba({RGBcolor:gradient 2}, 0.6);
  816. position:absolute;
  817. z-index:999;
  818. }
  819.  
  820. .audioinfo{
  821. position:absolute;
  822. margin-left:90px;
  823. height:80px;
  824. padding:5px;
  825. }
  826.  
  827. .light .audioinfo{
  828. color:#fff;
  829. }
  830.  
  831. .dark .audioinfo{
  832. color:#000;
  833. }
  834.  
  835. .sttl{
  836. font-family:'Montserrat', sans-serif;
  837. font-weight:600;
  838. font-size:180%;
  839. padding-bottom:5px;
  840. text-shadow:2px 2px {color:gradient 2};
  841. }
  842.  
  843. .attl{
  844. font-family:'Montserrat', sans-serif;
  845. font-size:115%;
  846. padding-bottom:5px;
  847. }
  848.  
  849. /* ----------------- videos ----------------- */
  850.  
  851. .vd{
  852. overflow:hidden;
  853. background-color:#fff;
  854. }
  855.  
  856. .video{
  857. position: relative;
  858. padding-bottom: 56.25%;
  859. padding-top: 25px;
  860. height: 0;
  861. background-color:#fff;
  862. }
  863.  
  864. .video iframe{
  865. position: absolute;
  866. width: 100%;
  867. height: 100%;
  868. overflow:hidden;
  869. top: 0;
  870. left: 0;
  871. }
  872.  
  873. /* ----------------- ask posts ----------------- */
  874.  
  875. #qhead{
  876. color:{color:gradient 1};
  877. font-style:normal;
  878. padding-bottom:10px;
  879. width:100%;
  880. height:18px;
  881. }
  882.  
  883. #qhead a{
  884. margin-left:7px;
  885. padding:2px 5px;
  886. border-radius:5px;
  887. position:absolute;
  888. font-weight:600;
  889. letter-spacing:0.25px;
  890. font-size:11px;
  891. background:{color:links};
  892. }
  893.  
  894. #qhead a:hover{
  895. background-color:{color:gradient 1};
  896. box-shadow:2px 2px {color:links};
  897. }
  898.  
  899. .light #qhead a{
  900. color:#fff;
  901. }
  902.  
  903. .dark #qhead a{
  904. color:#000;
  905. }
  906.  
  907. #q{
  908. padding:10px;
  909. border-top-left-radius:10px;
  910. border-top-right-radius:10px;
  911. }
  912.  
  913. .dark #q{
  914. background-color:#333;
  915. }
  916.  
  917. .light #q{
  918. background-color:#f9f9f9;
  919. }
  920.  
  921. #answer{
  922. padding:10px 10px 5px 10px;
  923. border-bottom-left-radius:10px;
  924. border-bottom-right-radius:10px;
  925. }
  926.  
  927. .replied{
  928. margin-top:5px;
  929. }
  930.  
  931. .dark #answer{
  932. background-color:#333;
  933. }
  934.  
  935. .light #answer{
  936. background-color:#f9f9f9;
  937. }
  938.  
  939. #ahead{
  940. color:{color:gradient 1};
  941. font-style:normal;
  942. padding-bottom:10px;
  943. width:100%;
  944. height:18px;
  945. }
  946.  
  947. #ahead a{
  948. margin-left:7px;
  949. padding:2px 5px;
  950. border-radius:5px;
  951. position:absolute;
  952. font-weight:600;
  953. letter-spacing:0.25px;
  954. font-size:11px;
  955. background:{color:gradient 1};
  956. }
  957.  
  958. .light #ahead a{
  959. color:#fff;
  960. }
  961.  
  962. .replied{
  963. margin-top:-10px;
  964. }
  965.  
  966. #ahead a:hover{
  967. background-color:{color:gradient 2};
  968. box-shadow:2px 2px {color:gradient 1};
  969. }
  970.  
  971. .dark #ahead a{
  972. color:#000;
  973. }
  974.  
  975. /* ----------------- tags ----------------- */
  976.  
  977. #tags{
  978. width:400px;
  979. color:#999;
  980. font-style:italic;
  981. margin-top:3px;
  982. }
  983.  
  984. #tags a{
  985. color:{color:links};
  986. padding-right:5px;
  987. text-decoration:none;
  988. }
  989.  
  990. /* ----------------- permalink page notes ----------------- */
  991.  
  992. .notecont{
  993. width:calc({text:post width}px + 20px);
  994. margin-left:370px;
  995. }
  996.  
  997. #note{
  998. margin:0 auto;
  999. padding:10px;
  1000. border-radius:10px;
  1001. width:{text:post width}px;
  1002. background-color:#fff;
  1003. margin-bottom:70px;
  1004. line-height:150%;
  1005. margin:0 auto;
  1006. }
  1007.  
  1008. .notes img{width:20px; position:relative; top:1px; padding-right:5px; border-radius:5px;}
  1009. ol.notes, .notes li{width:400px; list-style:none; margin:0px 0 -1px 5px; padding:5px}
  1010.  
  1011. /* ----------------- pagination ----------------- */
  1012.  
  1013. #pagi{
  1014. width:{text:post width}px;
  1015. padding:10px;
  1016. margin:0 auto;
  1017. margin-top:50px;
  1018. margin-bottom:150px;
  1019. overflow:hidden;
  1020. text-align:center;
  1021. }
  1022.  
  1023. #pagi a{
  1024. padding:5px 10px;
  1025. border-radius:5px;
  1026. margin:10px;
  1027. font-weight:bold;
  1028. background-color:{color:gradient 2};
  1029. }
  1030.  
  1031. .light #pagi a{
  1032. color:#fff;
  1033. }
  1034.  
  1035. .dark #pagi a{
  1036. color:#000;
  1037. }
  1038.  
  1039. #pagi a:hover{
  1040. color:{color:gradient 2};
  1041. }
  1042.  
  1043. .light #pagi a:hover{
  1044. background-color:#fff;
  1045. }
  1046.  
  1047. .dark #pagi a:hover{
  1048. background-color:#000;
  1049. }
  1050.  
  1051. .current_page{
  1052. padding:5px 10px;
  1053. background-color:#fff;
  1054. border-radius:5px;
  1055. margin:10px;
  1056. font-weight:bold;
  1057. color:{color:gradient 2};
  1058. }
  1059.  
  1060. .light .current_page{
  1061. background-color:#fff;
  1062. }
  1063.  
  1064. .dark .current_page{
  1065. background-color:#000;
  1066. }
  1067.  
  1068. /* ----------------- funky fonts this theme is able to display ----------------- */
  1069.  
  1070. @font-face {
  1071. font-family: Calluna;
  1072. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  1073. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3%3F=&v=f685dc881c60c298ea22a73fe505b88a#iefix") format("embedded-opentype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.woff?3=&v=760a50f4d098e59aebaf0f0e58ae2cc8") format("woff"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.ttf?3=&v=5ace789439bff3b27f8d4112725531da") format("truetype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.svg?3=&v=5b95c481dd7411c6e112143d6646bd9b#_.regular") format("svg");
  1074. font-weight: 700;
  1075. font-style: italic
  1076. }
  1077.  
  1078. @font-face {
  1079. font-family: Fairwater;
  1080. src: url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45") format("woff2"),url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff?v=96e975b7468359e6f67086305577e43e") format("woff");
  1081. font-weight: 400;
  1082. font-style: normal
  1083. }
  1084. p.npf_quirky{font-family:Fairwater; font-size:20px;}
  1085. p.npf_chat{font-family:Courier;}
  1086. p.npf_quote{font-family:Calluna;}
  1087.  
  1088. {CustomCSS}
  1089. </style>
  1090. </head>
  1091. <body class="{select:theme mode}">
  1092. {block:ifgradientbg}<div class="gradient"></div>{/block:ifgradientbg}
  1093.  
  1094. <div id="wrapper">
  1095. <aside>
  1096. <label for="check" title="Lyrics"></label>
  1097. <input id="check" type="checkbox">
  1098. <div class="slidey">
  1099. <div class="desttl"><a href="/">{Title}</a></div>
  1100. <div class="descont">{description}</div>
  1101. </div>
  1102. <div class="cottl">Now Playing</div>
  1103. <div class="cover"><img src="{image:cover}"/></div>
  1104. <div class="songttlwrap"><div class="songttl">{text:Song Name}</div><div class="songartist">{text:Artist}</div></div>
  1105. <div class="pbwrap"><div class="time1">01:00</div>
  1106. <div class="playline"></div>
  1107. <div class="time2">03:00</div></div>
  1108. <div class="sbtnwrap">
  1109. <a href="{text:link 1}" title="{text:link 1 title}"><i class="fas fa-random"></i></a>
  1110. <a href="{text:link 2}" title="{text:link 2 title}"><i class="fas fa-step-backward"></i></a>
  1111. <a href="{text:link 3}" title="{text:link 3 title}"><i class="fas fa-play"></i></a>
  1112. <a href="{text:link 4}" title="{text:link 4 title}"><i class="fas fa-step-forward"></i></a>
  1113. <a href="{text:link 5}" title="{text:link 5 title}"><i class="fas fa-sync"></i></a>
  1114. </div>
  1115. </aside>
  1116.  
  1117. <div class="postcont">
  1118. {block:Posts}
  1119. <article>
  1120. <!------------------ text ----------------->
  1121. {block:Text}
  1122. {block:Title}<h2>{Title}</h2>{/block:Title}
  1123. {block:Body}
  1124. {block:NotReblog}{Body}{/block:NotReblog}
  1125. {block:RebloggedFrom}{block:Reblogs}
  1126. <div class="cap">
  1127. <div class="rebloghead">
  1128. {block:HasAvatar}
  1129. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1130. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1131. {/block:HasAvatar}
  1132. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1133. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink} </div>
  1134. {Body}</div>
  1135. {/block:Reblogs}{/block:RebloggedFrom}
  1136. {/block:Body}
  1137. {/block:Text}
  1138.  
  1139. <!------------------ photo ----------------->
  1140. {block:Photo}
  1141. <img class="image" src="{PhotoURL-500}" alt="{PhotoAlt}" />
  1142. {block:Caption}
  1143. {block:NotReblog}{Caption}{/block:NotReblog}
  1144. {block:RebloggedFrom}{block:Reblogs}
  1145. <div class="phcap">
  1146. <div class="phrebloghead">
  1147. {block:HasAvatar}
  1148. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1149. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1150. {/block:HasAvatar}
  1151. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1152. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1153. </div>
  1154. {Body}</div><!-- cap -->
  1155. {/block:Reblogs}{/block:RebloggedFrom}
  1156. {/block:Caption}
  1157. {/block:Photo}
  1158.  
  1159. <!------------------ photoset ----------------->
  1160. {block:Photoset}
  1161. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1162. {block:Caption}
  1163. {block:NotReblog}{Caption}{/block:NotReblog}
  1164. {block:RebloggedFrom}{block:Reblogs}
  1165. <div class="phcap">
  1166. <div class="phrebloghead">
  1167. {block:HasAvatar}
  1168. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1169. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1170. {/block:HasAvatar}
  1171. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1172. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1173. </div>
  1174. {Body}</div><!-- cap -->
  1175. {/block:Reblogs}{/block:RebloggedFrom}
  1176. {/block:Caption}
  1177. {/block:Photoset}
  1178.  
  1179. <!------------------ quote----------------->
  1180. {block:Quote}
  1181. <div id="quote">{Quote}</div> <br>
  1182. {block:Source}<div align="center">- {Source}</div>{/block:Source}
  1183. {/block:Quote}
  1184.  
  1185. <!------------------ link ----------------->
  1186. {block:Link}
  1187. <div class="link">
  1188. <h2><a href="{URL}" target="_blank">{Name} > </a></h2>
  1189. {block:Excerpt}<div class="linkdesc">{Excerpt}</div>{/block:Excerpt}
  1190. </div>
  1191. {block:Description}
  1192. {block:NotReblog}{Description}{/block:NotReblog}
  1193. {block:RebloggedFrom}{block:Reblogs}
  1194. <div class="cap">
  1195. <div class="phrebloghead">
  1196. {block:HasAvatar}
  1197. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1198. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1199. {/block:HasAvatar}
  1200. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1201. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1202. </div>
  1203. {Description}</div> <!-- cap -->
  1204. {/block:Reblogs}{/block:RebloggedFrom}
  1205. {/block:Description}
  1206. {/block:Link}
  1207.  
  1208. <!------------------ chat ----------------->
  1209. {block:Chat}
  1210. {block:Title}
  1211. <div id="cttl">
  1212. {Title}
  1213. </div>
  1214. {/block:Title}
  1215. <div id="chatcont">
  1216. {block:Lines}
  1217. {block:Label}<div id="line">
  1218. <b>{Label}</b>{/block:Label} {Line}<br>
  1219. </div>{/block:Lines}
  1220. </div>
  1221. {/block:Chat}
  1222.  
  1223. <!------------------ audio ----------------->
  1224. {block:Audio}
  1225. <div class="playerwrap">
  1226. <div class="playerbg">
  1227. <div class="player">{AudioPlayer}</div><!-- audioplayer -->
  1228. <div class="overlay"></div>
  1229. <div class="albumart" style="background-color:#fff;">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1230. </div><!-- playerbg -->
  1231. <div class="audioinfo">{block:TrackName}<div class="sttl">{TrackName}</div>{/block:TrackName}
  1232. {block:Artist}<div class="attl">{Artist}{/block:Artist}
  1233. {block:PlayCount}<br> {PlayCountWithLabel}</div>{/block:PlayCount}
  1234. </div><!-- audioinfo --></div><!-- playerwrap -->
  1235. {block:Caption}
  1236. {block:NotReblog}{Caption}{/block:NotReblog}
  1237. {block:RebloggedFrom}{block:Reblogs}
  1238. <div class="phcap">
  1239. <div class="phrebloghead">
  1240. {block:HasAvatar}
  1241. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1242. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1243. {/block:HasAvatar}
  1244. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1245. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1246. </div>
  1247. {Body}</div><!-- cap -->
  1248. {/block:Reblogs}{/block:RebloggedFrom}
  1249. {/block:Caption}
  1250. {/block:Audio}
  1251.  
  1252. <!------------------ video ----------------->
  1253. {block:Video}
  1254. <div class="vd"><div class="video">{Video-500}</div></div>
  1255. {block:Caption}
  1256. {block:NotReblog}{Caption}{/block:NotReblog}
  1257. {block:RebloggedFrom}{block:Reblogs}
  1258. <div class="phcap">
  1259. <div class="phrebloghead">
  1260. {block:HasAvatar}
  1261. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1262. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1263. {/block:HasAvatar}
  1264. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1265. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1266. </div>
  1267. {Body}</div><!-- cap -->
  1268. {/block:Reblogs}{/block:RebloggedFrom}
  1269. {/block:Caption}
  1270. {/block:Video}
  1271.  
  1272. <!------------------ ask ----------------->
  1273. {block:Answer}
  1274.  
  1275. <div id="ask">
  1276. <div id="q">
  1277. <div id="qhead"><img class="cimg" src="{AskerPortraitURL-64}">{Asker}</div>
  1278. " {Question} "
  1279. </div>
  1280.  
  1281. {block:NotReblog}
  1282. <div id="answer">
  1283. {Answer}
  1284. </div>
  1285. {/block:NotReblog}
  1286.  
  1287. {block:Answerer}
  1288. <div id="answer">
  1289. <div id="ahead"><img class="cimg" src="{AnswererPortraitURL-64}">
  1290. {answerer}</div>
  1291. <div class="replied">{Answer}</div>
  1292. </div>
  1293. {/block:Answerer}
  1294. </div>
  1295.  
  1296. {block:RebloggedFrom}
  1297. {block:Reblogs}
  1298. {block:HasAvatar}
  1299. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1300. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1301. {/block:HasAvatar}
  1302. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1303. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1304. {Body}
  1305. {/block:Reblogs}
  1306. {/block:RebloggedFrom}
  1307. {/block:Answer}
  1308.  
  1309. {block:IndexPage}
  1310. {block:HasTags}
  1311. {block:Tags}<a href="{TagURL}">#{tag}</a> {/block:Tags}
  1312. {/block:HasTags}
  1313. {/block:IndexPage}
  1314.  
  1315. <!------------------ post info ----------------->
  1316. {block:IndexPage}<div class="ainfo">
  1317. <div class="ail">{block:RebloggedFrom}<a href="{ReblogRootURL}" title="Via {ReblogRootName}"><i class="fas fa-step-backward"></i></a>{/block:RebloggedFrom}{block:NotReblog}<a href="/" title="Posted by {Name}"><i class="fas fa-step-backward"></i></a>{/block:NotReblog}</div>
  1318. <div class="aipc">{block:NoteCount}<a href="{Permalink}" title="{NoteCount} Notes">{Notecount} Plays</a>{/block:NoteCount}</div>
  1319. <div class="air"><a href="{Permalink}" title="{TimeAgo}"><i class="fas fa-step-forward"></i></a></div>
  1320. </div>{/block:IndexPage}
  1321.  
  1322. {block:PermalinkPage}
  1323. {block:Date}
  1324. <b>Posted:</b> {TimeAgo} on {Month} {DayOfMonthWithZero}, {Year} at {24Hour}:{Minutes}
  1325. {/block:Date} <br>
  1326. {block:NoteCount}
  1327. <b>Notes:</b> {NoteCount}<br>
  1328. {/block:NoteCount}
  1329. {block:HasTags}
  1330. <b>Tags:</b>
  1331. {block:Tags}
  1332. <a href="{TagURL}">#{tag}</a>
  1333. {/block:Tags}<br>
  1334. {/block:HasTags}
  1335. {block:RebloggedFrom}
  1336. <br><b>Via:</b> <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a><br>
  1337. {block:ContentSource}
  1338. <b>Source:</b> <a href="{SourceURL}">{SourceTitle}</a>
  1339. {/block:ContentSource}
  1340. {/block:RebloggedFrom}
  1341. </div>
  1342. {/block:PermalinkPage}
  1343. </article>
  1344.  
  1345.  
  1346. {block:PermalinkPage}
  1347. {block:PostNotes}
  1348. {block:NoteCount}
  1349. <div class="notecont">
  1350. <div id="note">
  1351. {PostNotes}
  1352. </div>
  1353. </div>
  1354. {/block:NoteCount}
  1355. {/block:PostNotes}
  1356. {/block:permalinkpage}
  1357. {/block:Posts}
  1358.  
  1359. {block:indexpage}
  1360. {block:Pagination}
  1361. <div id="pagi">
  1362. {block:PreviousPage}
  1363. <a href="{PreviousPage}"><i class="fas fa-step-backward"></i> </a>
  1364. {/block:PreviousPage}
  1365.  
  1366. {block:JumpPagination length="3"}
  1367. {block:CurrentPage}
  1368. <span class="current_page">{PageNumber}</span>
  1369. {/block:CurrentPage}
  1370.  
  1371. {block:JumpPage}
  1372. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1373. {/block:JumpPage}
  1374. {/block:JumpPagination}
  1375.  
  1376. {block:NextPage}
  1377. <a href="{NextPage}"><i class="fas fa-step-forward"></i></a>
  1378. {/block:NextPage}
  1379.  
  1380. </div>
  1381. {/block:Pagination}
  1382. {/block:indexpage}
  1383. </div><!-- postcont -->
  1384.  
  1385. </div><!-- wrapper -->
  1386.  
  1387.  
  1388. <div id="c">
  1389. <a href="http://baechys.tumblr.com" title="Made with love by Caroline">BCHYS</a>
  1390. </div>
  1391.  
  1392. </body>
  1393. </html>
Advertisement
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!