Advertisement
baechubaechubaechu

(5/12) Magic Summer

Aug 3rd, 2018
3,413
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.68 KB | None | 0 0
  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. ** Magic Summer -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. <title>{title}{block:PostTitle} - {PostTitle}{/block:PostTitle}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
  43. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  44. <link rel="shortcut icon" href="{favicon}" />
  45.  
  46. <meta name="theme-color" content="{select:flavor}"/>
  47. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  48. <meta name="viewport" content="width=device-width, initial-scale=1">
  49.  
  50. <meta name="color:background color" content="#c1e3ff"/>
  51. <meta name="color:text" content="#888"/>
  52. <meta name="color:links" content="#fdab55"/>
  53. <meta name="color:shadows" content="#9fdbff"/>
  54.  
  55. <meta name="select:font size" content="11px"/>
  56. <meta name="select:font size" content="12px"/>
  57. <meta name="select:font size" content="13px"/>
  58. <meta name="select:font size" content="14px"/>
  59.  
  60. <meta name="select:post size" content="300px"/>
  61. <meta name="select:post size" content="350px"/>
  62. <meta name="select:post size" content="400px"/>
  63. <meta name="select:post size" content="450px"/>
  64. <meta name="select:post size" content="500px"/>
  65.  
  66. <meta name="select:sidebar colorscheme" title="fruity" content="frusb"/>
  67. <meta name="select:sidebar colorscheme" title="classic" content="clasb"/>
  68.  
  69. <meta name="select:flavor" title="melon" content="#f29f8f"/>
  70. <meta name="select:flavor" title="grape" content="#D6BEEA"/>
  71. <meta name="select:flavor" title="kiwi" content="#b8d280"/>
  72. <meta name="select:flavor" title="pineapple" content="#ffcd55"/>
  73. <meta name="select:flavor" title="blueberry" content="#6dc7f3"/>
  74.  
  75. <meta name="select:fruit" content="sf sf-watermelon" title="melon"/>
  76. <meta name="select:fruit" content="sf sf-grapes" title="grape"/>
  77. <meta name="select:fruit" content="th th-kiwi" title="kiwi"/>
  78. <meta name="select:fruit" content="th th-pineapple"title="pineapple"/>
  79. <meta name="select:fruit" content="th th-orange" title="orange"/>
  80.  
  81. <meta name="text:link 1 url" content="/"/>
  82. <meta name="text:link 1" content="link 1"/>
  83. <meta name="text:link 2 url" content="/"/>
  84. <meta name="text:link 2" content="link 2"/>
  85. <meta name="text:link 3 url" content="/"/>
  86. <meta name="text:link 3" content="link 3"/>
  87. <meta name="text:link 4 url" content="/"/>
  88. <meta name="text:link 4" content="link 4"/>
  89. <meta name="text:link 5 url" content="/"/>
  90. <meta name="text:link 5" content="link 5"/>
  91.  
  92. <!------------------------- Imported Fonts ------------------------->
  93.  
  94. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  95.  
  96. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  97.  
  98. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i" rel="stylesheet">
  99.  
  100. <!------------------------- SCRIPTS! DONT TOUCH! ------------------------->
  101.  
  102. <!-- photosets -->
  103. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  104. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  105. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  106.  
  107. <script>
  108. $(document).ready(function(){
  109. $('.photo-slideshow').pxuPhotoset({
  110. lightbox: true,
  111. rounded: false,
  112. gutter: '5px',
  113. borderRadius: '0px',
  114. photoset: '.photo-slideshow',
  115. photoWrap: '.photo-data',
  116. photo: '.pxu-photo'
  117. });
  118. });
  119. </script>
  120. <!-- tooltips -->
  121. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  122. <script>
  123. (function($){
  124. $(document).ready(function(){
  125. $("[title]").style_my_tooltips({
  126. tip_follows_cursor:true,
  127. tip_delay_time:200,
  128. tip_fade_speed:300
  129. }
  130. );
  131. });
  132. })(jQuery);
  133. </script>
  134.  
  135. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  136.  
  137. <style type="text/css">
  138.  
  139. /* ----------------- lightbox ----------------- */
  140.  
  141. .vignette, #vignette {
  142. opacity:0;
  143. }
  144. .lightbox-image, #tumblr_lightbox img {
  145. box-shadow:none !important;
  146. border-radius:0 !important;
  147. max-width:none;
  148. }
  149.  
  150. .tmblr-lightbox, #tumblr_lightbox {
  151. background-color:rgba({RGBcolor:background color},0.85)!important;
  152. z-index:999999999999!important;
  153. }
  154.  
  155. /* ----------------- basic settings ----------------- */
  156.  
  157. @font-face{
  158. font-family: Selfie;
  159. src: url(https://static.tumblr.com/d70w4cr/im7pcs8je/selfie_regular.otf);
  160. font-weight:400;
  161. }
  162.  
  163. .tmblr-iframe{
  164. white-space:nowrap;
  165. transition: .4s ease-in-out;
  166. -webkit-transition: .4s ease-in-out;
  167. -moz-transition: .4s ease-in-out;
  168. -o-transition: .4s ease-in-out;
  169. position:fixed!important;
  170. z-index:999999999999!important;
  171. transform:scale(0.75);
  172.  
  173. }
  174.  
  175. body{
  176. margin:0px;
  177. padding:0px;
  178. font-family:'Open Sans', Helvetica, Arial, Sans-Serif;
  179. font-size:{select:Font Size};
  180. color:{color:Text};
  181. background-color:{color:Background color};
  182. }
  183.  
  184. a{
  185. color:{color:text};
  186. text-decoration:none;
  187. box-shadow:inset 0px -5px rgba({RGBcolor:links},0.6);
  188. transition:0.4s ease-in-out;
  189. -o-transition:0.4s ease-in-out;
  190. -moz-transition:0.4s ease-in-out;
  191. -webkit-transition:0.4s ease-in-out;
  192. }
  193.  
  194. a:hover{
  195. box-shadow:inset 0px -5px rgba({RGBcolor:links},1);
  196. }
  197.  
  198. a.tumblr-box{
  199. box-shadow:none;
  200. }
  201.  
  202. small, h6, h5, h4{
  203. font-size:90%;
  204. }
  205.  
  206. h1, h2, h3, h4, h5, h6{
  207. font-family:'montserrat', sans-serif;
  208. margin:5px 0px;
  209. line-height:150%;
  210. }
  211.  
  212. blockquote{
  213. margin:10px 0;
  214. padding:0 0 0 10px;
  215. border-left:1px solid #888;
  216. }
  217.  
  218. underlined{
  219. border-bottom:1px solid #888888;
  220. }
  221.  
  222. pre{
  223. overflow:auto;
  224. background-color:#eee;
  225. display:block;
  226. padding:5px;
  227. }
  228.  
  229. p{
  230. margin:0px 0px 15px 0px;
  231. }
  232.  
  233. ul{
  234. margin-left:-20px;
  235. list-style-type:none;
  236. }
  237.  
  238. ul li::before{
  239. content:'\e154';
  240. font-family:'honeybee';
  241. color:{select:flavor};
  242. position:absolute;
  243. margin-left:-20px;
  244. }
  245.  
  246. /* ----------------- Tooltips ----------------- */
  247.  
  248. #s-m-t-tooltip {
  249. max-width:150px;
  250. padding:3px 8px;
  251. margin:20px 14px 7px 10px;
  252. color:#fff;
  253. font-style: normal;
  254. font-size:{select:font size};
  255. line-height:150%;
  256. letter-spacing:0.15px;
  257. text-transform:none;
  258. z-index:999999999;
  259. border-radius:5px;
  260. background-color:{select:flavor};
  261. box-shadow:3px 3px {color:background color}, 4.5px 4.5px {color:shadows};
  262. }
  263.  
  264. /* ----------------- Scrollbar & Selection ----------------- */
  265.  
  266. ::-webkit-scrollbar-thumb:vertical {
  267. background-color: {select:flavor};
  268. width:8px;
  269. height:auto;
  270. }
  271.  
  272.  
  273. ::-webkit-scrollbar-thumb:horizontal {
  274. background-color: {select:flavor};
  275. height:8px;
  276. }
  277.  
  278. ::-webkit-scrollbar {
  279. height:8px;
  280. width:8px;
  281. background-color:{color:background color};
  282. }
  283.  
  284. ::selection {
  285. background-color:{select:flavor};
  286. color:white;
  287. }
  288.  
  289. ::-moz-selection-{
  290. background-color:{select:flavor};
  291. color:white;
  292. }
  293.  
  294. /* ----------------- CRD ----------------- */
  295.  
  296. #c{
  297. position:fixed;
  298. bottom: 15px;
  299. right: 10px;
  300. text-align:center;
  301. z-index:999999;
  302. }
  303. #c a{
  304. background:{select:flavor};
  305. font-size:12px;
  306. color:#fff;
  307. font-size:10px;
  308. padding:5px 7px;
  309. letter-spacing:1px;
  310. text-decoration:none;
  311. border-radius:5px;
  312. margin:0px 3px;
  313. box-shadow:none;
  314. }
  315. #c a:hover{
  316. background:{select:flavor};
  317. box-shadow:3px 3px {color:background color}, 4.5px 4.5px {color:shadows};
  318. color:#fff;
  319. letter-spacing:1px;
  320. }
  321.  
  322. /* ----------------- Wrapper ----------------- */
  323.  
  324. .wrapper{
  325. width:calc(276.5px + {select:post size});
  326. margin:0 auto;
  327. margin-top:70px;
  328. }
  329.  
  330. /* ----------------- Sidebar ----------------- */
  331.  
  332. .juice{
  333. position:absolute;
  334. margin-top:-95px;
  335. }
  336.  
  337. .juice::before{
  338. display:block;
  339. font-family:'Honeybee';
  340. content:'\e1f2';
  341. color:{select:flavor};
  342. position:absolute;
  343. font-size:64px;
  344. padding-left:42px;
  345. top:15px;
  346. z-index:-9;
  347. }
  348.  
  349. .fruit{
  350. z-index:99;
  351. }
  352.  
  353. .fruit .sf-watermelon{
  354. position:absolute;
  355. font-size:20px;
  356. margin-top:7px;
  357. margin-left:45px;
  358. color:#f29f8f;
  359. }
  360.  
  361. .fruit .sf-watermelon::after{
  362. display:block;
  363. font-family:'saturnicons';
  364. content:'\e285';
  365. color:#fff;
  366. position:absolute;
  367. margin-top:-27px;
  368. }
  369.  
  370. .fruit .sf-grapes{
  371. position:absolute;
  372. font-size:20px;
  373. margin-top:10px;
  374. margin-left:45px;
  375. color:#d6beea;
  376. }
  377.  
  378. .fruit .sf-grapes::after{
  379. display:block;
  380. font-family:'saturnicons';
  381. content:'\e11a';
  382. color:#fff;
  383. position:absolute;
  384. margin-top:-27px;
  385. }
  386.  
  387. .fruit .th-kiwi{
  388. position:absolute;
  389. font-size:20px;
  390. margin-top:7px;
  391. margin-left:45px;
  392. color:#cdea8f;
  393. }
  394.  
  395. .fruit .th-kiwi::after{
  396. display:block;
  397. font-family:'honeybee';
  398. content:'\e19f';
  399. color:#fff;
  400. position:absolute;
  401. }
  402.  
  403. .fruit .th-pineapple{
  404. position:absolute;
  405. font-size:20px;
  406. margin-top:7px;
  407. margin-left:45px;
  408. color:#ffcd55;
  409. }
  410.  
  411. .fruit .th-pineapple::after{
  412. display:block;
  413. font-family:'honeybee';
  414. content:'\e297';
  415. color:#fff;
  416. position:absolute;
  417. }
  418.  
  419. .fruit .th-orange{
  420. position:absolute;
  421. font-size:20px;
  422. margin-top:7px;
  423. margin-left:45px;
  424. color:#b4e2f9;
  425. }
  426.  
  427. .fruit .th-orange::after{
  428. display:block;
  429. font-family:'honeybee';
  430. content:'\e247';
  431. color:#fff;
  432. position:absolute;
  433. }
  434.  
  435. .th-milkshake-o{
  436. font-size:70px;
  437. padding-left:40px;
  438. margin-top:15px;
  439. }
  440.  
  441. aside{
  442. width:150px;
  443. padding:10px;
  444. border-radius:5px;
  445. position:fixed;
  446. margin-top:100px;
  447. box-shadow:4px 4px {color:background color}, 5.5px 5.5px {color:shadows};
  448. }
  449.  
  450. aside .descttl{
  451. font-family:'Selfie', script;
  452. color:#fff;
  453. font-weight:normal;
  454. font-size:25px;
  455. text-align:center;
  456. }
  457.  
  458. .descttl a{
  459. box-shadow:none;
  460. }
  461.  
  462. .frusb aside .descttl a{
  463. color:#fff;
  464. }
  465.  
  466. .clasb aside .descttl a{
  467. color:{select:flavor};
  468. }
  469.  
  470. aside .menu{
  471. position:absolute;
  472. width:130px;
  473. padding:10px;
  474. margin-top:30px;
  475. border-radius:5px;
  476. box-shadow:4px 4px {color:background color}, 5.5px 5.5px {color:shadows};
  477. background-color:{select:flavor};
  478. }
  479.  
  480. .menu .menttl{
  481. font-family:'Selfie', script;
  482. color:#fff;
  483. font-weight:normal;
  484. font-size:25px;
  485. text-align:center;
  486. }
  487.  
  488. .menu a:hover{
  489. opacity:0.5;
  490. }
  491.  
  492. .menu ul{
  493. margin-top:0px;
  494. }
  495.  
  496. .menu li a{
  497. box-shadow:none;
  498. color:#fff;
  499. }
  500.  
  501. .menu li{
  502. margin:5px 0px;
  503. }
  504.  
  505. .menu ul li:nth-of-type(1)::before{
  506. display:block;
  507. font-family:'saturnicons';
  508. content:'\e284';
  509. color:#fff;
  510. position:absolute;
  511. margin-left:-20px;
  512. font-size:90%;
  513. margin-top:2px;
  514. }
  515.  
  516. .menu ul li:nth-of-type(2)::before{
  517. display:block;
  518. font-family:'saturnicons';
  519. content:'\e119';
  520. color:#fff;
  521. position:absolute;
  522. margin-left:-20px;
  523. font-size:90%;
  524. margin-top:2px;
  525. }
  526.  
  527. .menu ul li:nth-of-type(3)::before{
  528. display:block;
  529. font-family:'honeybee';
  530. content:'\e19e';
  531. color:#fff;
  532. position:absolute;
  533. margin-left:-20px;
  534. font-size:90%;
  535. margin-top:2px;
  536. }
  537.  
  538. .menu ul li:nth-of-type(4)::before{
  539. display:block;
  540. font-family:'honeybee';
  541. content:'\e296';
  542. color:#fff;
  543. position:absolute;
  544. margin-left:-20px;
  545. font-size:90%;
  546. margin-top:2px;
  547. }
  548.  
  549. .menu ul li:nth-of-type(5)::before{
  550. display:block;
  551. font-family:'honeybee';
  552. content:'\e244';
  553. color:#fff;
  554. position:absolute;
  555. margin-left:-20px;
  556. font-size:90%;
  557. margin-top:2px;
  558. }
  559.  
  560. .frusb aside{
  561. background-color:{select:flavor};
  562. color:#fff;
  563. }
  564.  
  565. .clasb aside{
  566. background-color:#fff;
  567. color:{color:text};
  568. }
  569.  
  570. .clasb aside .th-milkshake-o{
  571. color:#fff;
  572. }
  573.  
  574. /* ----------------- posts ----------------- */
  575.  
  576. .postcont{
  577. width:calc(20px + {select:post size});
  578. margin-left:250px;
  579. }
  580.  
  581. article{
  582. width:{select:post size};
  583. padding:10px 10px 15px 10px;
  584. background-color:#fff;
  585. margin-bottom:40px;
  586. border-radius:10px;
  587. box-shadow:4px 4px {color:background color}, 5.5px 5.5px {color:shadows};
  588. }
  589.  
  590. article img{
  591. max-width:100%;
  592. max-height:auto;
  593. }
  594.  
  595. /* ----------------- captions ----------------- */
  596.  
  597. .caprebloghead{
  598. height:calc({select:font size} + 2px + 7px);
  599. margin-top:7px;
  600. margin-bottom:5px;
  601. }
  602.  
  603. .rebloghead{
  604. height:calc({select:font size} + 2px + 7px);
  605. margin-top:7px;
  606. margin-bottom:5px;
  607. }
  608.  
  609. .cimg{
  610. width:calc({select:font size} + 2px + 7px);
  611. border-radius:5px;
  612. float:left;
  613. }
  614.  
  615. a.user{
  616. margin-left:7px;
  617. padding:2.5px 7px;
  618. position:absolute;
  619. border-radius:5px;
  620. letter-spacing:0.25px;
  621. color:#fff;
  622. background: {select:flavor};
  623. box-shadow:none;
  624. }
  625.  
  626. a.user:hover{
  627. background-color:{color:links};
  628. }
  629.  
  630. .cap{
  631. line-height:150%;
  632. text-align:justify;
  633. }
  634.  
  635. span.inactive.deactivated{
  636. padding:2.5px 7px;
  637. border-radius:5px;
  638. letter-spacing:0.25px;
  639. color:#fff;
  640. background: {color:links};
  641. margin-top:5px;
  642. margin-bottom:5px;
  643. }
  644.  
  645. span.inactive.deactivated:after {
  646. content:'deactivated';
  647. position:absolute;
  648. opacity:0;
  649. transition:.4s ease-in-out;
  650. padding:0px 7px 4px 15px;
  651. border-radius:5px;
  652. letter-spacing:0.25px;
  653. color:{select:flavor};
  654. }
  655. span.inactive.deactivated:hover:after {
  656. opacity:1;}
  657.  
  658. /* ----------------- Quotes ----------------- */
  659.  
  660. .quote{
  661. font-family:Selfie, script;
  662. font-size:50px;
  663. font-weight:400;
  664. text-align:center;
  665. line-height:90%;
  666. }
  667.  
  668. /* ----------------- audio ----------------- */
  669.  
  670. .audio{
  671. width:calc(100% - 20px);
  672. height:90px;
  673. margin-bottom:7px;
  674. }
  675.  
  676. .albumart{
  677. position:absolute;
  678. height:80px;
  679. width:80px;
  680. border:5px solid {select:flavor};
  681. border-radius:100%;
  682. }
  683.  
  684. .albumart img{
  685. max-width:80px;
  686. border-radius:100%;
  687. }
  688.  
  689. .audioplayer{
  690. position:absolute;
  691. z-index:99;
  692. background-color:#f2f2f2;
  693. height:30px;
  694. width:30px;
  695. overflow:hidden;
  696. border:2px solid {select:flavor};
  697. margin-top:28px;
  698. margin-left:28px;
  699. border-radius:100%;
  700. }
  701.  
  702. .audioinfo{
  703. padding-left:100px;
  704. color:{select:flavor};
  705. padding-top:10px;
  706. }
  707.  
  708. .songtitle{
  709. font-family:Selfie, script;
  710. font-size:250%;
  711. }
  712.  
  713. /* ----------------- chats ----------------- */
  714.  
  715. .lines{
  716. line-height:200%;
  717. }
  718.  
  719. .lines b{
  720. background-color:{select:flavor};
  721. padding:1px 5px;
  722. border-radius:5px;
  723. color:#fff;
  724. }
  725.  
  726. /* ----------------- videos ----------------- */
  727.  
  728. .vd{
  729. overflow:hidden;
  730. background-color:#fff;
  731. }
  732.  
  733. .video{
  734. position: relative;
  735. padding-bottom: 56.25%;
  736. padding-top: 25px;
  737. height: 0;
  738. background-color:#fff;
  739. }
  740.  
  741. .video iframe{
  742. position: absolute;
  743. width: 100%;
  744. height: 100%;
  745. overflow:hidden;
  746. top: 0;
  747. left: 0;
  748. }
  749.  
  750. /* ----------------- Askposts ----------------- */
  751.  
  752. .qportrait{
  753. height:50px;
  754. width:50px;
  755. border-radius:5px;
  756. overflow:hidden;
  757. position:absolute;
  758. }
  759.  
  760. .qportrait img{
  761. max-width:50px;
  762. }
  763.  
  764. .question{
  765. width:calc({select:post size} - 85px);
  766. margin-left:65px;
  767. padding:10px;
  768. color:#fff;
  769. background-color:{select:flavor};
  770. text-align:justify;
  771. border-radius:5px;
  772. }
  773.  
  774. .question::before{
  775. display:block;
  776. position:absolute;
  777. margin-left:-18px;
  778. font-size:11px;
  779. content:'◀︎';
  780. color:{select:flavor};
  781. }
  782.  
  783. .question b a{
  784. font-weight:bold;
  785. color:#fff;
  786. box-shadow:none;
  787. }
  788.  
  789. #ahead{
  790. height:calc({select:font size} + 3px + 7px);
  791. margin-top:5px;
  792. }
  793.  
  794. .answerer a{
  795. margin-left:7px;
  796. padding:2.5px 7px;
  797. position:absolute;
  798. border-radius:5px;
  799. letter-spacing:0.25px;
  800. color:#fff;
  801. background: {select:flavor};
  802. box-shadow:none;
  803. }
  804.  
  805. .answerer a:hover{
  806. background-color:{color:links};
  807. }
  808.  
  809. .reply{
  810. text-align:justify;
  811. }
  812.  
  813. /* ----------------- postinfo ----------------- */
  814.  
  815. .postinfo{
  816. width:calc({select:post size} + 20px);
  817. position:absolute;
  818. margin-left:-10px;
  819. margin-top:5px;
  820. text-align:center;
  821. }
  822.  
  823. .postinfo a{
  824. background-color:{select:flavor};
  825. color:#fff;
  826. font-weight:bold;
  827. box-shadow:none;
  828. padding:3px 7px;
  829. border-radius:5px;
  830. box-shadow:0px 4px {color:background color}, 0px 5.5px {color:shadows};
  831. line-height:150%;
  832. margin:0px 10px;
  833. }
  834.  
  835. .postinfo .th-clock-o, .postinfo .sf-heart-2-o{
  836. font-size:85%;
  837. padding-right:2px;
  838. }
  839.  
  840. .postinfo a:hover{
  841. background-color:{color:links};
  842. }
  843.  
  844. /* ----------------- Permalink notes ----------------- */
  845.  
  846. #note{
  847. padding:10px;
  848. border-radius:10px;
  849. box-shadow:4px 4px {color:background color}, 5.5px 5.5px {color:shadows};
  850. width:{select:post size};
  851. background-color:#fff;
  852. margin-bottom:70px;
  853. line-height:200%;
  854. }
  855.  
  856. .notes li{
  857. line-height:20px;
  858. }
  859. ol.notes, .notes li{width:calc({select:post size} - 40px); list-style:none; margin:0px 0 -1px 10px; padding:5px}
  860. .notes img, a.avatar_frame{
  861. display:none;
  862. }
  863.  
  864. li.note.like::before{
  865. content:'\e12a';
  866. font-family:'saturnicons';
  867. color:#fff;
  868. position:absolute;
  869. font-size:13px;
  870. margin-left:-30px;
  871. padding:0px 5px;
  872. border-radius:5px;
  873. background: {select:flavor};
  874. }
  875.  
  876. li.note.reblog::before{
  877. content:'\e1ee';
  878. font-family:'saturnicons';
  879. color:#fff;
  880. position:absolute;
  881. font-size:13px;
  882. margin-left:-30px;
  883. padding:0px 5px;
  884. border-radius:5px;
  885. background: {select:flavor};
  886. }
  887.  
  888. ol.notes li.note.original_post::before{
  889. content:'\e275';
  890. font-family:'saturnicons';
  891. color:#fff;
  892. position:absolute;
  893. font-size:13px;
  894. margin-left:-30px;
  895. padding:0px 5px;
  896. border-radius:5px;
  897. background: {color:links};
  898. }
  899.  
  900. ol.notes li.note.reply::before{
  901. content:'\e07f';
  902. font-family:'saturnicons';
  903. color:#fff;
  904. position:absolute;
  905. font-size:13px;
  906. margin-left:-30px;
  907. padding:0px 5px;
  908. border-radius:5px;
  909. background: {select:flavor};
  910. }
  911.  
  912. /* ----------------- pagination ----------------- */
  913.  
  914. #pagi{
  915. width:{select:post width};
  916. padding:10px;
  917. margin:0 auto;
  918. margin-top:50px;
  919. margin-bottom:150px;
  920. overflow:hidden;
  921. text-align:center;
  922. }
  923.  
  924. #pagi a{
  925. padding:5px 10px;
  926. border-radius:5px;
  927. margin:10px;
  928. font-weight:bold;
  929. background-color:{select:flavor};
  930. color:#fff;
  931. box-shadow:none;
  932. }
  933.  
  934. #pagi a:hover{
  935. color:{color:links};
  936. background-color:#fff;
  937. }
  938.  
  939. .current_page{
  940. padding:5px 10px;
  941. background-color:#fff;
  942. border-radius:5px;
  943. margin:10px;
  944. font-weight:bold;
  945. color:{color:links};
  946. }
  947.  
  948. /* ----------------- funky fonts this theme is able to display ----------------- */
  949.  
  950. @font-face {
  951. font-family: Calluna;
  952. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  953. 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");
  954. font-weight: 700;
  955. font-style: italic
  956. }
  957.  
  958. @font-face {
  959. font-family: Fairwater;
  960. 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");
  961. font-weight: 400;
  962. font-style: normal
  963. }
  964. p.npf_quirky{font-family:Fairwater; font-size:20px;}
  965. p.npf_chat{font-family:Courier;}
  966. p.npf_quote{font-family:Calluna;}
  967.  
  968. {CustomCSS}
  969. </style>
  970. </head>
  971. <body class="{select:sidebar colorscheme}">
  972.  
  973. <div class="wrapper">
  974. <aside>
  975. <div class="juice">
  976. <div class="fruit"> <span class="{select:fruit}"></span> </div>
  977. <span class="th th-milkshake-o"></span>
  978. </div>
  979. <div class="descttl"><a href="/">{Title}</a></div>
  980. {description}
  981. <div class="menu">
  982. <div class="menttl">Menu</div>
  983. <ul>
  984. <li><a href="{text:link 1 url}">{text:Link 1}</a></li>
  985. <li><a href="{text:link 2 url}">{text:Link 2}</a></li>
  986. <li><a href="{text:link 3 url}">{text:Link 3}</a></li>
  987. <li><a href="{text:link 4 url}">{text:Link 4}</a></li>
  988. <li><a href="{text:link 5 url}">{text:Link 5}</a></li>
  989. </ul>
  990. </div>
  991. </aside>
  992.  
  993. <div class="postcont">
  994. {block:Posts}
  995. <article>
  996. {block:Text}
  997. {block:Title}<h2>{Title}</h2>{/block:Title}
  998. {block:Body}
  999. {block:NotReblog}{Body}{/block:NotReblog}
  1000.  
  1001. {block:RebloggedFrom}{block:Reblogs}
  1002. <div class="rebloghead">
  1003. {block:IsActive}
  1004. {block:HasAvatar}
  1005. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1006. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1007. {/block:HasAvatar}
  1008. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1009. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1010. {/block:IsActive}
  1011. {block:IsDeactivated}
  1012. <span class="inactive deactivated">{Username}</span>
  1013. {/block:IsDeactivated}
  1014.  
  1015. </div><!-- rebloghead -->
  1016. <div class="cap"> {Body} </div><!-- caption -->
  1017. {block:Reblogs}{/block:RebloggedFrom}
  1018.  
  1019. {/block:Body}
  1020. {/block:Text}
  1021.  
  1022. {block:Photo}
  1023. <img class="image" src="{PhotoURL-500}" alt="{PhotoAlt}" />
  1024. {block:Caption}
  1025. {block:NotReblog}{Caption}{/block:NotReblog}
  1026. {block:RebloggedFrom}{block:Reblogs}
  1027. <div class="cap">
  1028. <div class="caprebloghead">
  1029. {block:IsActive}
  1030. {block:HasAvatar}
  1031. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1032. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1033. {/block:HasAvatar}
  1034. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1035. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1036. {/block:IsActive}
  1037. {block:IsDeactivated}
  1038. <span class="inactive deactivated">{Username}</span>
  1039. {/block:IsDeactivated}
  1040. </div>
  1041. {Body}</div><!-- cap -->
  1042. {/block:Reblogs}{/block:RebloggedFrom}
  1043. {/block:Caption}
  1044. {/block:Photo}
  1045.  
  1046. {block:Photoset}
  1047. <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>
  1048. {block:Caption}
  1049. {block:NotReblog}{Caption}{/block:NotReblog}
  1050. {block:RebloggedFrom}{block:Reblogs}
  1051. <div class="cap">
  1052. <div class="caprebloghead">
  1053. {block:IsActive}
  1054. {block:HasAvatar}
  1055. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1056. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1057. {/block:HasAvatar}
  1058. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1059. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1060. {/block:IsActive}
  1061. {block:IsDeactivated}
  1062. <div class="caprebloghead">
  1063. <span class="inactive deactivated">{Username}</span>
  1064. </div>
  1065. {/block:IsDeactivated}
  1066. </div>
  1067. {Body}</div><!-- cap -->
  1068. {/block:Reblogs}{/block:RebloggedFrom}
  1069. {/block:Caption}
  1070. {/block:Photoset}
  1071.  
  1072. {block:Quote}
  1073. <div class="quote">{Quote}</div>
  1074. {block:Source}<br> - {Source} {/block:Source}
  1075. {/block:Quote}
  1076.  
  1077. {block:Link}
  1078. <div class="link">
  1079. <h1><a href="{URL}" target="_blank">{Name} > </a></h1>
  1080. {block:Excerpt}<div class="linkdesc">{Excerpt}</div>{/block:Excerpt}
  1081. </div>
  1082. {block:NotReblog}{Description}{/block:NotReblog}
  1083. {block:RebloggedFrom}{block:Reblogs}
  1084. <div class="cap">
  1085. <div class="caprebloghead">
  1086. {block:IsActive}
  1087. {block:HasAvatar}
  1088. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1089. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1090. {/block:HasAvatar}
  1091. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1092. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1093. {/block:IsActive}
  1094. {block:IsDeactivated}
  1095. <span class="inactive deactivated">{Username}</span>
  1096. {/block:IsDeactivated}
  1097. </div>
  1098. {Description}</div> <!-- cap -->
  1099. {/block:Reblogs}{/block:RebloggedFrom}
  1100. {/block:Description}
  1101. {/block:Link}
  1102.  
  1103. {block:Chat}
  1104. {block:Title}<h2>{Title}</h2>{/block:Title}
  1105. {block:Lines}<div class="lines">{block:Label}<b>{Label}</b>{/block:Label} {Line}</div>{/block:Lines}
  1106. {/block:Chat}
  1107.  
  1108. {block:Audio}
  1109. {block:AudioPlayer}
  1110. <div class="audio">
  1111. <div class="audioplayer">{AudioPlayer}</div><!-- audioplayer -->
  1112. {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  1113. <div class="audioinfo">
  1114. {block:TrackName}
  1115. <div class="songtitle">{TrackName}</div>
  1116. {/block:TrackName}
  1117. {block:Artist}
  1118. {Artist}
  1119. {/block:Artist}
  1120. </div>
  1121. </div><!-- audio -->
  1122. {/block:AudioPlayer}
  1123.  
  1124. {block:Caption}
  1125. {block:NotReblog}{Caption}{/block:NotReblog}
  1126. {block:RebloggedFrom}{block:Reblogs}
  1127. <div class="cap">
  1128. <div class="caprebloghead">
  1129. {block:IsActive}
  1130. {block:HasAvatar}
  1131. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1132. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1133. {/block:HasAvatar}
  1134. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1135. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1136. {/block:IsActive}
  1137. {block:IsDeactivated}
  1138. <span class="inactive deactivated">{Username}</span>
  1139. {/block:IsDeactivated}
  1140. </div>
  1141. {Body}</div><!-- cap -->
  1142. {/block:Reblogs}{/block:RebloggedFrom}
  1143. {/block:Caption}
  1144. {/block:Audio}
  1145.  
  1146. {block:Video}
  1147. <div class="vd"><div class="video">{Video-500}</div></div>
  1148. {block:Caption}
  1149. {block:NotReblog}{Caption}{/block:NotReblog}
  1150. {block:RebloggedFrom}{block:Reblogs}
  1151. <div class="cap">
  1152. <div class="caprebloghead">
  1153. {block:IsActive}
  1154. {block:HasAvatar}
  1155. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1156. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1157. {/block:HasAvatar}
  1158. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1159. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1160. {/block:IsActive}
  1161. {block:IsDeactivated}
  1162. <span class="inactive deactivated">{Username}</span>
  1163. {/block:IsDeactivated}
  1164. </div>
  1165. {Body}</div><!-- cap -->
  1166. {/block:Reblogs}{/block:RebloggedFrom}
  1167. {/block:Caption}
  1168. {/block:Video}
  1169.  
  1170. {block:Answer}
  1171. <div class="qportrait"><img src="{AskerPortraitURL-64}"></div>
  1172. <div class="question"><b>{Asker}</b> asked: {Question} </div>
  1173.  
  1174. {block:NotReblog}
  1175. <div id="answer">
  1176. {Answer}
  1177. </div>
  1178. {/block:NotReblog}
  1179.  
  1180. {block:Answerer}
  1181. <div id="answer">
  1182. <div id="ahead"><img class="cimg" src="{AnswererPortraitURL-64}">
  1183. <div class="answerer">{answerer}</div></div>
  1184. <div class="reply">{Answer}</div>
  1185. </div>
  1186. {/block:Answerer}
  1187.  
  1188. {block:RebloggedFrom}
  1189. {block:Reblogs}
  1190. {block:IsActive}
  1191. {block:HasAvatar}
  1192. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1193. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1194. {/block:HasAvatar}
  1195. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1196. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1197. {/block:IsActive}
  1198. {block:IsDeactivated}
  1199. <span class="inactive deactivated">{Username}</span>
  1200. {/block:IsDeactivated}
  1201. {Body}
  1202. {/block:Reblogs}
  1203. {/block:RebloggedFrom}
  1204. {/block:Answer}
  1205.  
  1206. {block:PermalinkPage}
  1207. {block:Date}
  1208. <b>Posted:</b> {TimeAgo} on {Month} {DayOfMonthWithZero}, {Year} at {24Hour}:{Minutes}
  1209. {/block:Date} <br>
  1210. {block:NoteCount}
  1211. <b>Notes:</b> {NoteCount}<br>
  1212. {/block:NoteCount}
  1213. {block:HasTags}
  1214. <b>Tags:</b>
  1215. {block:Tags}
  1216. <a href="{TagURL}" style="padding:0px 0px 0px 10px;">#{tag}</a>
  1217. {/block:Tags}<br>
  1218. {/block:HasTags}
  1219. {block:RebloggedFrom}
  1220. <br><b>Via:</b> <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a><br>
  1221. {block:ContentSource}
  1222. <b>Source:</b> <a href="{SourceURL}">{SourceTitle}</a>
  1223. {/block:ContentSource}
  1224. {/block:RebloggedFrom}
  1225. {/block:PermalinkPage}
  1226.  
  1227. {block:indexpage}
  1228. <div class="postinfo">
  1229. {block:Date}
  1230. <a href="{permalink}" title="{TimeAgo}"><span class="th th-clock-o"></span> {DayOfMonthWithZero} {Month} </a>
  1231. {/block:Date}
  1232. {block:NoteCount}
  1233. <a href="{permalink}" title="{NoteCountWithLabel}"><span class="sf sf-heart-2-o"></span> {NoteCountWithLabel}</a>
  1234. {/block:NoteCount}
  1235. </div><!-- postinfo -->
  1236. {/block:indexpage}
  1237. </article>
  1238.  
  1239. {block:PermalinkPage}{block:PostNotes}{block:NoteCount}<div id="note">{PostNotes}</div>{/block:NoteCount}{/block:PostNotes}{/block:permalinkpage}
  1240.  
  1241. {/block:Posts}
  1242. {block:indexpage}
  1243. {block:Pagination}
  1244. <div id="pagi">
  1245. {block:PreviousPage}
  1246. <a href="{PreviousPage}"><</a>
  1247. {/block:PreviousPage}
  1248.  
  1249. {block:JumpPagination length="3"}
  1250. {block:CurrentPage}
  1251. <span class="current_page">{PageNumber}</span>
  1252. {/block:CurrentPage}
  1253.  
  1254. {block:JumpPage}
  1255. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1256. {/block:JumpPage}
  1257. {/block:JumpPagination}
  1258.  
  1259. {block:NextPage}
  1260. <a href="{NextPage}">></a>
  1261. {/block:NextPage}
  1262.  
  1263. </div>
  1264. {/block:Pagination}
  1265. {/block:IndexPage}
  1266. </div><!-- postcont -->
  1267. </div><!-- wrapper -->
  1268.  
  1269. <div id="c">
  1270. <a href="http://baechys.tumblr.com" title="Made with ♡ by Caroline">BCHYS</a>
  1271. </div>
  1272.  
  1273. </body>
  1274. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement