cornetespoir

Old Mignon design

Dec 24th, 2017
5,096
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.73 KB | None | 0 0
  1. <!----
  2. // mignon
  3.  
  4. by espoirthemes //
  5.  
  6.  
  7.  
  8.  
  9. ---->
  10. <!DOCTYPE html>
  11. <html><head>
  12. <title>{Title}</title>
  13.  
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  17.  
  18.  
  19.  
  20. <script type="text/javascript"
  21. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  22.  
  23.  
  24.  
  25.  
  26. <meta name="image:sidebar" content="" />
  27. <meta name="image:Background" content="" />
  28.  
  29.  
  30. <meta name="color:Background" content="#fffffF" />
  31. <meta name="color:posts" content="#fff" />
  32. <meta name="color:sidebar" content="#ffffff" />
  33. <meta name="color:text" content="#444" />
  34. <meta name="color:link" content="#b997ce" />
  35. <meta name="color:link hover" content="#fff" />
  36. <meta name="color:Bold" content="#000"/>
  37. <meta name="color:Italic" content="#ddd"/>
  38. <meta name="color:sidebar" content="#FFFFFF" />
  39. <meta name="color:border" content="#aaa" />
  40. <meta name="color:ask bubble" content="#eee" />
  41. <meta name="color:ask bubble text" content="#222" />
  42.  
  43.  
  44. <meta name="color:selection background" content="#eee" />
  45. <meta name="color:selection text" content="#000" />
  46. <meta name="color:scrollbar" content="#b997ce" />
  47. <meta name="color:scrollbar background" content="#888" />
  48. <meta name="color:tooltip" content="#222" />
  49. <meta name="color:tooltip text" content="#fff" />
  50. <meta name="color:Description" content="#333333" />
  51.  
  52. <meta name="color:hpbackground" content="#eee" />
  53. <meta name="color:hp" content="#5cccc6" />
  54.  
  55. <meta name="text:Link 1" content="un." />
  56. <meta name="text:Link 1 url" content="http://" />
  57. <meta name="text:Link 2" content="deux." />
  58. <meta name="text:Link 2 url" content="http://" />
  59. <meta name="text:Link 3" content="trois." />
  60. <meta name="text:Link 3 url" content="http://" />
  61. <meta name="text:Link 4" content="quatre." />
  62. <meta name="text:Link 4 url" content="http://" />
  63.  
  64.  
  65. <meta name="text:asked" content="shouted" />
  66.  
  67. <meta name="select:post size" content="250" title="250px" />
  68. <meta name="select:post size" content="300" title="300px" />
  69. <meta name="select:post size" content="400" title="400px" />
  70. <meta name="select:post size" content="500" title="500px" />
  71.  
  72. <meta name="select:hp percent" content="0" title="0%" />
  73. <meta name="select:hp percent" content="10" title="10%" />
  74. <meta name="select:hp percent" content="20" title="20%" />
  75. <meta name="select:hp percent" content="30" title="30%" />
  76. <meta name="select:hp percent" content="40" title="40%" />
  77. <meta name="select:hp percent" content="50" title="50%" />
  78. <meta name="select:hp percent" content="60" title="60%" />
  79. <meta name="select:hp percent" content="70" title="70%" />
  80. <meta name="select:hp percent" content="80" title="80%" />
  81. <meta name="select:hp percent" content="90" title="90%" />
  82. <meta name="select:hp percent" content="100" title="100%" />
  83.  
  84. <meta name="if:full background" content="" />
  85. <meta name="if:rounded corners" content="" />
  86. <meta name="if:no post shadow" content="" />
  87. <meta name="if:hover tags" content="" />
  88. <meta name="if:hpbar" content="" />
  89.  
  90.  
  91.  
  92.  
  93. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  94.  
  95.  
  96. <script type="text/javascript"
  97. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  98. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  99. <script>
  100. (function($){
  101. $(document).ready(function(){
  102. $("[title]").style_my_tooltips({
  103. tip_follows_cursor:true,
  104. tip_delay_time:200,
  105. tip_fade_speed:300
  106. }
  107. );
  108. });
  109. })(jQuery);
  110. </script>
  111.  
  112. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  113. <script>
  114. $(document).ready(function(){
  115. $('#press').click(function(){
  116. $('.panel').slideToggle('slow');
  117.  
  118. });
  119. });
  120.  
  121.  
  122. </script>
  123.  
  124. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  125.  
  126. <script type="text/javascript">
  127. $(window).load(function() { $("#loading").delay(100).fadeOut("fast");
  128. })
  129. </script>
  130.  
  131.  
  132.  
  133. <style type="text/css">
  134.  
  135.  
  136. iframe{
  137. max-width: 100%;
  138. border: none;
  139. }
  140. img {max-width:100%;}
  141.  
  142. embed {max-width:100%;}
  143.  
  144. video {max-width:100%; }
  145.  
  146.  
  147. #s-m-t-tooltip{
  148. max-width:300px;
  149. margin-top:-50px;
  150. margin-left:-20px;
  151.  
  152. border:1px solid white;
  153. box-shadow: 0px 0px 0px 2px {color:tooltip};
  154. font-family:helvetica;
  155. padding:5px 5px;
  156. background:{color:tooltip}; /*if you're changing the color in the code, make sure this is the same as the s-m-t:after */
  157. color:{color:tooltip text};
  158. z-index:999999999;
  159. font-size:12px;
  160. letter-spacing:2px;
  161. }
  162.  
  163. /* don't touch this, this is the what makes it look like a speech bubble */
  164. #s-m-t-tooltip:after{
  165.  
  166. content: '';
  167. position: absolute;
  168. border-style: solid;
  169. border-width: 8px 10px 0;
  170. border-color: {color:tooltip} transparent;
  171. display: block;
  172. width: 0;
  173. z-index: 1;
  174. bottom: -10px;
  175. left: 10%;}
  176.  
  177.  
  178.  
  179. ::-webkit-scrollbar {
  180. width: 10px;
  181. height:10px;
  182.  
  183. }
  184. ::-webkit-scrollbar-button {
  185. width: 0px;
  186. height: 0px;
  187. }
  188. ::-webkit-scrollbar-thumb {
  189. background: {color:scrollbar};
  190.  
  191. border-radius: 2px;
  192. }
  193. ::-webkit-scrollbar-track {
  194. background:{color:scrollbar background};
  195. border: 4px solid {color:background};
  196.  
  197.  
  198. }
  199.  
  200.  
  201. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop
  202. { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); filter: invert(100%); opacity:0.4; z-index:99999; margin:0px 10px auto auto; position:absolute; }
  203.  
  204.  
  205. ::selection {color: {color:selection text}; background: {color:selection background};}
  206. ::-moz-selection {
  207. background: {color:selection background}; /* Gecko Browsers */color:{color:selection text};
  208. }
  209.  
  210.  
  211. .panel {
  212. background:{color:posts};
  213. padding:10px;
  214. width:200px;
  215. height:260px;
  216. overflow:auto;
  217. display:none;
  218. margin-left:100px;
  219. border:1px solid {color:border};
  220. position:fixed;
  221. bottom:-8px;
  222. {block:ifroundedcorners} border-radius:8px; {/block:ifroundedcorners}
  223. box-shadow:6px 6px rgba(0,0,0,.08);
  224. {block:ifnopostshadow}
  225. box-shadow:none;
  226. {/block:ifnopostshadow}
  227.  
  228. }
  229.  
  230. #press {
  231. cursor:pointer;
  232. }
  233.  
  234.  
  235. .links {text-align:left}
  236. .links li{list-style:none;position:relative; padding:10px; border-bottom:1px solid {color:border};}
  237. .links li a:before{content:'☐ '; color:{color:links};}
  238. .links li a:hover:before{content:'☒ '; color:{color:link hover};}
  239.  
  240. /* CSS */
  241.  
  242.  
  243. body {
  244. background:{color:Background} url({image:background});
  245. {block:iffullbackground} no-repeat center center fixed;
  246. -webkit-background-size: cover;
  247. -moz-background-size: cover;
  248. -o-background-size: cover;
  249. background-size: cover; {/block:iffullbackground};
  250. background-attachment:fixed;
  251.  
  252. color:{color:Text};
  253. font-size:16px;
  254. font-family:helvetica;
  255. line-height:15px;
  256. margin-left:0px;
  257. }
  258.  
  259. h1{
  260. font-size:20px;
  261. line-height: 25px;
  262. color:{TitleColor};
  263. font-family:Verdana;
  264. font-weight: normal;
  265. }
  266.  
  267. h2{
  268. font-size:15px;
  269. line-height: 20px;
  270. color:{color:Text};
  271. font-family:Verdana;
  272. font-weight: normal;
  273. }
  274.  
  275. a:link, a:active, a:visited{
  276. -webkit-transition: color 0.2s ease-out;
  277. -moz-transition: color 0.2s ease-out;
  278. transition: color 0.2s ease-out;
  279. color:{color:link};
  280. text-decoration:none;
  281. }
  282.  
  283. a:hover {
  284. text-decoration:none;
  285. color:{color:link hover};
  286. -webkit-transition: all 0.2s ease-in-out;
  287. -moz-transition: all 0.2s ease-in-out;
  288. -o-transition: all 0.2s ease-in-out;
  289. transition: all 0.2s ease-in-out;}
  290.  
  291.  
  292. blockquote{
  293. padding:0px 0px 0px 6px;
  294. margin:0px 0px 0px 10px;
  295. border-left: 1px dotted #222;
  296. }
  297.  
  298. blockquote img { max-width:100%; }
  299.  
  300.  
  301.  
  302. a {
  303. color:{color:Link};
  304. }
  305.  
  306. b, strong {color:{color:Bold};}
  307.  
  308. i, em {color:{color:Italic};}
  309.  
  310. ol.notes{position:relative;
  311. border:1px solid {color:border};
  312. margin:20px auto;
  313. float:left;
  314. background:{color:posts};
  315. box-shadow:6px 6px rgba(0,0,0,.08);
  316. {block:ifnopostshadow}
  317. box-shadow:none;
  318. {/block:ifnopostshadow}
  319. {block:ifroundedcorners} border-radius:8px; {/block:ifroundedcorners}
  320. padding:14px;
  321. width:400px;
  322.  
  323. }
  324.  
  325. .notes li{list-style:none;
  326. margin:10px;
  327. background:{color:posts};
  328. padding:8px;
  329. border-bottom:1px solid {color:border};
  330.  
  331. font-size:13.4px;
  332.  
  333. }
  334.  
  335. .notes li img{ padding:2px;
  336. max-width:20px;
  337. max-height:20px;
  338. right:10px;
  339. position:absolute;
  340.  
  341. }
  342.  
  343.  
  344.  
  345.  
  346. .info{position:relative;
  347. border-top:1px solid {color:border};
  348. font-family:helvetica;bottom:0px; text-align:left; font-size:14px;
  349. padding:10px;
  350.  
  351. }
  352. .info a{color:{color:links}; text-decoration:none;}
  353.  
  354.  
  355. .tags{ position:absolute;overflow:hidden; line-height:150%; margin-top:10px;transition:.6s;
  356.  
  357. {block:ifhovertags}height:0px; width:30px; border:1px solid transparent; border-bottom:1px solid {color:link}; text-align:left; font-size:14px; z-index:-1; {/block:ifhovertags}
  358.  
  359. {block:ifnothovertags}
  360.  
  361. height:40px;transition:.6s; overflow:auto;width:{select:post size}px;
  362. border:1px solid transparent;
  363.  
  364. {/block:ifnothovertags}
  365. {block:permalinkpage} height:auto;width:{select:post size}px; {/block:permalinkpage}
  366.  
  367. }
  368.  
  369. {block:indexpage} {block:ifhovertags}
  370. .entry:hover .tags{ height:40px;transition:.6s; overflow:auto;width:{select:post size}px; border-top:1px solid transparent;} {/block:ifhovertags}
  371. {block:indexpage}
  372.  
  373. .tags a{
  374. background:{color:link};
  375. color:{color:link hover};
  376. padding:2px;
  377. margin:2px;
  378. opacity:.6;
  379. transition:.6s;
  380. {block:ifroundedcorners} border-radius:2px; {/block:ifroundedcorners}
  381.  
  382.  
  383. }
  384.  
  385. .tags a:hover {
  386. transition:.6s;
  387. opacity:1;
  388. }
  389. .tags blockquote{border-left:2px solid transparent; padding:2px; padding-top:10px;}
  390.  
  391.  
  392.  
  393. .clear {
  394. clear: both;
  395. height: 0px;
  396. overflow: hidden;
  397. }
  398.  
  399.  
  400.  
  401. .search {
  402. background: {color:posts};
  403. position:fixed;
  404. border: 1px solid {color:border};
  405.  
  406. }
  407.  
  408. .search-scope {
  409. padding-top: 5px;
  410. font-size: 11px;
  411. text-align: center;
  412. }
  413.  
  414. #search-scope input,
  415. #search-scope label {
  416. cursor: pointer;
  417. }
  418.  
  419. #search form {
  420. margin:20px auto auto 0px;
  421. position:fixed;
  422. }
  423.  
  424. #search form .query {
  425. padding: 4px;
  426. border: none;
  427. outline:none;
  428. z-index:2;
  429.  
  430.  
  431. background: {color:posts};
  432. border:1px solid{color:border};
  433. width: 100px;
  434. float:left;
  435. color: {color:text};
  436. }
  437.  
  438. #search form .submit {
  439. background:{color:posts};
  440. color: {color:text};
  441. border: 1px solid {color:border};
  442. border-left:none;
  443. padding: 4px;
  444. cursor: pointer;
  445. }
  446. #perma {
  447. position: relative;
  448. border-bottom:1px solid {color:border};
  449. font-size:14px; height:26px;
  450. letter-spacing:.5px;font-family:helvetica;
  451. text-transform: lowercase;
  452. line-height:200%;
  453. }
  454.  
  455. /*Posts and entries*/
  456.  
  457. #container{
  458. position:relative;
  459. width:1000px;
  460. min-height:600px;
  461. margin:auto;
  462. margin-bottom:100px;
  463. margin-top:40px;
  464. margin-left:330px;
  465. }
  466.  
  467.  
  468.  
  469. .entry {
  470. float:left;
  471.  
  472. {block:ifroundedcorners} border-radius:8px; {/block:ifroundedcorners}
  473. display: block;
  474. margin:32px;
  475. background:{color:posts};
  476. width:{select:post size}px;
  477. padding:8px;
  478. z-index:2;box-shadow:6px 6px rgba(0,0,0,.08);
  479. {block:ifnopostshadow}
  480. box-shadow:none;
  481. {/block:ifnopostshadow}
  482. position:relative;
  483. text-align:left;
  484. {block:PermalinkPage}
  485. width:400px;
  486. {/block:PermalinkPage}
  487. background:{color:posts};
  488. -webkit-transition: all .7s ease;
  489. -moz-transition: all .7s ease;
  490. -o-transition: all .7s ease;
  491. transition: all .7s ease;
  492. border:1px solid {color:border};
  493. animation: Up 4s;
  494. animation-iteration-count:1;
  495. }
  496.  
  497. .entry:hover{
  498. -webkit-transition: all .7s ease;
  499. -moz-transition: all .7s ease;
  500. -o-transition: all .7s ease;
  501. transition: all .7s ease;
  502. }
  503.  
  504.  
  505. @keyframes Up {
  506. 0% {
  507. opacity: 0;
  508. transform: translateY(-700px);
  509. }
  510.  
  511. 100% {
  512. opacity: 1;
  513. transform: translateY(0%);
  514. }
  515. }
  516.  
  517.  
  518. .posts {
  519. width:1000px;
  520. top:10px;
  521. bottom:100px;
  522. z-index:99;
  523. margin-left:5px;
  524. margin-right:auto;
  525. position:relative;
  526. overflow-y: hidden;
  527. -webkit-animation: fadeInDown 2s;
  528. -moz-animation: fadeInDown 2s;
  529. -ms-animation: fadeInDown 2s;
  530.  
  531. }
  532.  
  533. /* sidebar */
  534.  
  535. #sidebar{
  536. position:fixed;
  537. width:200px;
  538. height:auto;
  539. z-index:9;
  540. margin-top:60px;
  541. padding:5px;
  542. margin-bottom:5px;
  543. margin-left:100px;
  544. margin-right:auto;
  545. padding-bottom:0;
  546. padding-left:0;
  547. text-align:center;
  548. }
  549.  
  550. #hp{
  551. position:fixed;
  552. width:80px;
  553. height:auto;
  554. z-index:9;
  555. top:110px;
  556. padding:1.5px;
  557. margin-bottom:5px;
  558. margin-left:160px;
  559. margin-right:auto;
  560. padding-bottom:0;
  561.  
  562.  
  563.  
  564. }
  565.  
  566. {block:ifhpbar}
  567. .hpbar{width:90px; padding:0px; border:2px solid white;margin-left:0px; background:{color:hpbackground}; height:16px; box-shadow:0px 0px 0px 1px {color:border};}
  568. .hp{width:{select:hp percent}px; background:{color:hp};height:16px; border-right:2px solid white;}
  569.  
  570. {/block:ifhpbar}
  571.  
  572. .avatar {
  573. position:relative;
  574. background-image:{image:sidebar};
  575. margin-left:-40px;
  576. margin-top:4px;
  577. width:80px; padding:2px;
  578. background:{color:sidebar};
  579. height:80px;
  580. border-radius:100%;
  581. border:1px {color:border} dashed;
  582. box-shadow:0px 0px 0px 3px {color:sidebar}, 0px 0px 0px 4px {color:border};
  583.  
  584.  
  585. }
  586.  
  587. .avatar img {
  588. width:80px;
  589. height:80px;
  590.  
  591.  
  592. }
  593.  
  594. .title{
  595. color:{TitleColor};
  596. position:relative;
  597. margin-left:auto;
  598. margin-right:auto;
  599. margin-top:10px;
  600. width:100%;
  601.  
  602. font-family:{TitleFont};
  603. font-size:16px;
  604. padding:2px;
  605. background:{color:sidebar};
  606. letter-spacing:2px;
  607. line-height:22px;
  608. text-align:left;
  609. }
  610.  
  611. .sidebarlinks{
  612. position:relative;
  613. width:200px;
  614. text-transform:lowercase;
  615. height:auto;
  616. padding:2px;
  617. bottom:0px;
  618. border-top:1px solid {color:border};
  619. text-align:left;
  620. }
  621.  
  622. .sidebarlinks a{
  623. position:relative;
  624. width:100%;
  625. height:auto;
  626. margin-top:2px;
  627. margin-bottom:2px;
  628. margin-left:0px;
  629. padding:2px;
  630. letter-spacing:1px;
  631. font-family:sans-serif;
  632. font-size:16.2px;
  633. line-height:100%;
  634. text-align:center;
  635. }
  636.  
  637. .sidebarlinks a:hover{
  638.  
  639. -webkit-transition: all .7s ease-in-out;
  640. -moz-transition: all .7s ease-in-out;
  641. -o-transition: all .7s ease-in-out;
  642. transition: all .7s ease-in-out;
  643. }
  644.  
  645. .description{
  646. font-family:helvetica;
  647. font-size:14px;max-height:100px;
  648. overflow:auto;
  649.  
  650.  
  651.  
  652. }
  653.  
  654. .bubble{
  655.  
  656. position: relative;
  657. width: 210px;
  658. padding: 10px;
  659. top:10px;
  660. font-size:14px;
  661. line-height:100%;
  662. box-shadow:6px 6px rgba(0,0,0,.08);
  663. {block:ifnopostshadow}
  664. box-shadow:none;
  665. {/block:ifnopostshadow}
  666. background:{color:sidebar};
  667. -webkit-border-radius: 8px;
  668. -moz-border-radius: 8px;
  669. border-radius: 8px;
  670. border: {color:border} solid 1px;
  671. }
  672.  
  673. .bubble:after
  674. {
  675. content: '';
  676. position: absolute;
  677. border-style: solid;
  678. border-width: 0 14px 16px;
  679. border-color: {color:sidebar} transparent;
  680. display: block;
  681. width: 0;
  682. z-index: 1;
  683. top: -16px;
  684. left: 27px;
  685. }
  686.  
  687. .bubble:before
  688. {
  689. content: '';
  690. position: absolute;
  691. border-style: solid;
  692. border-width: 0 14px 16px;
  693. border-color: {color:border} transparent;
  694. display: block;
  695. width: 0;
  696. z-index: 0;
  697. top: -17px;
  698. left: 27px;
  699. }
  700.  
  701.  
  702. /* Ask */
  703.  
  704. .speechbubble {
  705. width:calc({select:post size}px - 100px);
  706. font-size:14px;
  707. position: relative;
  708. background:{color:ask bubble} ;
  709. left:70px;
  710. color:{color:ask bubble text};
  711. margin: 0;
  712. padding:8px;
  713. text-align:left;
  714.  
  715. box-shadow: 0px 0 1px rgba(0,0,0,0);
  716. }
  717.  
  718.  
  719.  
  720. .speechbubble:after {
  721. position: absolute;
  722. transform:rotate(-6deg);
  723. content: "";
  724. border-color: {color:ask bubble} transparent transparent transparent;
  725. border-style: solid;
  726. border-width: 15px 15px 0px;
  727. height:0;
  728. width:0;
  729. position:absolute;
  730. left:-15px;
  731. top:10px;
  732. }
  733.  
  734. #albumart{
  735. z-index:2;
  736.  
  737. width:90px;
  738. float:left;border-radius:100%;
  739. height:90px;
  740.  
  741. border:1px solid {color:border};
  742.  
  743. }
  744.  
  745. .playerbox {
  746. float:left;
  747. padding:6px;
  748. }
  749.  
  750.  
  751. #albumart img{
  752.  
  753. width:90px;
  754. height:90px;
  755. float:left;border-radius:100%;
  756.  
  757.  
  758.  
  759. border-width:0px; transition:.6s;
  760.  
  761. }
  762.  
  763. .playerbox:hover #albumart img{
  764. transition:0.6s;
  765. transform:rotate(300deg); }
  766.  
  767. .player {
  768. max-width:50px;
  769. overflow:hidden;
  770. max-height:40px;
  771. transform:scale(1.16);
  772. border-radius:100%;
  773.  
  774. top:8px;
  775. bottom:10px;
  776. left:0px;
  777.  
  778. padding:8px;
  779. padding-top:6px;
  780. padding-left:10px;
  781. padding-bottom:0px;
  782. border-radius:100%;
  783. position:absolute;
  784.  
  785.  
  786. }
  787.  
  788.  
  789. .playercon {
  790. width:56px;
  791. height:56px;
  792. border-radius:100%;
  793. left:0px;
  794. background:white;
  795. top:16px;
  796. position:relative;
  797. border:1px solid {color:border};
  798. -webkit-transition-duration:500ms;
  799. -moz-transition-duration:500ms;
  800. -o-transition-duration:500ms;
  801. -ms-transition-duration:500ms;
  802. }
  803.  
  804. .infobox {
  805. float:left top;
  806. margin-left:90px;
  807. background-color:transparent;
  808. padding:14px;
  809. padding-left:2px;
  810. {block:permalinkpage} width:300px; {/block:permalinkpage}
  811. max-height:140px;
  812. text-align:center;
  813. color:{color:text};
  814. }
  815.  
  816. .track {
  817.  
  818. font-size:14px;
  819. letter-spacing:2px;
  820. border-bottom:1px solid {color:info border};
  821. padding:2px;
  822. font-weight:300;
  823. text-transform:uppercase; transition:.6s;
  824. color:#333;
  825.  
  826.  
  827. }
  828. .artist {
  829. letter-spacing:2px;
  830. padding:2px;
  831. font-size:12px;
  832. font-style:italic;
  833.  
  834.  
  835.  
  836. }
  837.  
  838. .album {
  839. font-size:12px;
  840.  
  841. }
  842.  
  843. .playcount {
  844. font-size:9px;
  845.  
  846. text-transform:uppercase;
  847. letter-spacing:3px;
  848. }
  849.  
  850.  
  851. #audiolo {
  852. width:{select:post size}px;
  853.  
  854.  
  855.  
  856. }
  857.  
  858.  
  859. .linkp{
  860. font-size:24px; text-align:center; font-family:inconsolata;
  861.  
  862. }
  863. .linkp a{text-decoration:none; font-family:inconsolata; }
  864. .linkp:after{
  865. content:'»';
  866. transition:.6s; margin-left:2px;
  867. }
  868.  
  869. .linkp:hover:after{
  870. margin-left:10px;
  871. transition:.6s;
  872. color:{color:link};
  873.  
  874. }
  875.  
  876.  
  877. .chat {
  878. padding:5px;
  879. line-height:150%;
  880. }
  881.  
  882. .chat:nth-of-type(odd) {
  883. background:{color:text};
  884. color:{color:posts};
  885. -webkit-transition:.5s;
  886. transition:.5s; }
  887.  
  888. .chat:nth-of-type(odd) b {
  889. color:{color:posts};
  890. -webkit-transition:.5s;
  891. transition:.5s; }
  892.  
  893. .chat:nth-of-type(even) {
  894. background:{color:posts};
  895. color:{color:text};
  896. -webkit-transition:.5s;
  897. transition:.5s; }
  898. .chat:nth-of-type(even) b{
  899. color:{color:text};
  900. -webkit-transition:.5s;
  901. transition:.5s; }
  902.  
  903.  
  904.  
  905. #egg { opacity:.8;left:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  906. font-family: "bitxmap";
  907. border:1px solid #444; z-index:4;
  908.  
  909. }
  910. #egg:hover { animation-name: egg;
  911. animation-duration: 1s;
  912. animation-iteration-count: infinite;}
  913. @keyframes egg{
  914. 0%{}
  915. 10%{transform:rotate(20deg)}
  916. 80%{transform:rotate(-20deg)}
  917. 100%{}
  918. }
  919.  
  920. #loading {
  921. position: fixed;
  922. left: 0px;
  923. top: 0px;
  924. width: 100%;
  925. height: 100%;
  926. z-index: 9999;
  927. background: 50% 50% no-repeat #fff;
  928. background-size:325px;
  929. }
  930. {CustomCSS}
  931. </style>
  932.  
  933.  
  934. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  935. <script src="jquery.style-my-tooltips.js"></script>
  936.  
  937. <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  938.  
  939. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  940. <script>
  941. (function($){
  942. $(document).ready(function(){
  943. $("[title]").style_my_tooltips({
  944. tip_follows_cursor:true,
  945. tip_delay_time:200,
  946. tip_fade_speed:300
  947. }
  948. );
  949. });
  950. })(jQuery);
  951. </script>
  952.  
  953. <script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js">
  954. </script>
  955. <script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
  956. <script type="text/javascript">
  957.  
  958. $(window).load(function () {
  959. $('.posts').masonry(),
  960. $('.masonryWrap').infinitescroll({
  961. navSelector : "div#navigation",
  962. // selector for the paged navigation (it will be hidden)
  963. nextSelector : "div#navigation a#nextPage",
  964. // selector for the NEXT link (to page 2)
  965. itemSelector : ".entry",
  966. // selector for all items you'll retrieve
  967. bufferPx : 10000,
  968. extraScrollPx: 11000,
  969. loadingImg : "",
  970. loadingText : "<em></em>",
  971. },
  972. // call masonry as a callback.
  973. function() { $('.posts').masonry({ appendedContent: $(this) }); }
  974. );
  975. });
  976. </script>
  977. <script type="text/javascript">$(window).load(function(){$("p").remove(":contains('Source:')");});</script></head>
  978.  
  979.  
  980.  
  981. </head>
  982.  
  983.  
  984. <!-- HTML -->
  985.  
  986. <body>
  987. <div id="loading"></div>
  988.  
  989. <div class="panel">
  990.  
  991. <p>
  992. <div class="links">
  993.  
  994. {block:haspages} {block:pages}
  995. <li><a href="{URL}">{Label}</a> </li>
  996.  
  997. {/block:Pages} {/block:Haspages}
  998. <li><a href="{text:Link 1 url}">{text:Link 1}</a></li>
  999. <li><a href="{text:Link 2 url}">{text:Link 2}</a></li>
  1000. <li><a href="{text:Link 3 url}">{text:Link 3}</a></li>
  1001. <li><a href="{text:link 4 url}">{text:link 4}</a></li>
  1002.  
  1003. </div>
  1004.  
  1005.  
  1006. </p>
  1007. </div>
  1008.  
  1009. <div id="sidebar">
  1010.  
  1011. <div class="avatar"><center>
  1012.  
  1013. {block:ShowAvatar}
  1014. <img src="{PortraitURL-64}" style="border-radius:100%;">
  1015. {/block:ShowAvatar}
  1016.  
  1017. {block:HideAvatar}
  1018. <img src="{image:sidebar}">
  1019. {/block:HideAvatar}
  1020.  
  1021. </center></div>
  1022.  
  1023.  
  1024.  
  1025.  
  1026.  
  1027. <div class="bubble"><div class="description">{description}</div><div class="title">{Title}</div>
  1028. <div class="sidebarlinks">
  1029. <a href="/" title="{lang:home}">home</a>
  1030. <a href="/ask" title="{lang:mail}">mail</a>
  1031. <a href="/archive" title="{lang:archive}">past</a>
  1032. <a id="press" ><i class="fa fa-plus-square-o" style="color:{color:link}"></i></a>
  1033.  
  1034. {block:Pagination}
  1035.  
  1036. {block:PreviousPage}<a href="{PreviousPage}" style="font-size:20px;" title="{lang:Previous Page}" >«</a>
  1037. {/block:PreviousPage}
  1038.  
  1039. {block:NextPage}<a href="{NextPage}" style="font-size:20px;" title="{lang:Next Page}" >»</a>
  1040. {/block:NextPage}
  1041.  
  1042. {/block:Pagination}
  1043. {block:PermalinkPagination}
  1044. {block:PreviousPost}
  1045. <a href="{PreviousPost}" style="font-size:20px;" title="{lang:Previous Post}" >«</a>
  1046. {/block:PreviousPost}
  1047.  
  1048. {block:NextPost}
  1049. <a href="{NextPost}"style="font-size:20px;" title="{lang:Next Post}" >»</a>
  1050. {/block:NextPost}
  1051. {/block:PermalinkPagination}
  1052. <br>
  1053.  
  1054. {block:searchpage}
  1055. {lang:SearchResultCount results for SearchQuery}
  1056. {/block:searchpage}
  1057.  
  1058. {block:NoSearchResults}
  1059. {lang:No posts containing SearchQuery}
  1060. {/block:NoSearchResults}
  1061.  
  1062. {block:TagPage}
  1063. {lang:Showing TagResultCount posts tagged Tag}
  1064. {/block:TagPage}
  1065.  
  1066. </div>
  1067. </div></div>
  1068.  
  1069.  
  1070. <div id="hp">
  1071. {block:ifhpbar}<a title="hp is at {select:hp percent}%"><div class="hpbar"><div class="hp"></div></div></a>{/block:ifhpbar}
  1072.  
  1073.  
  1074.  
  1075. <div id="search">
  1076. <form action="/search" method="get" id="search-form">
  1077. <input type="hidden" name="t" value="{Name}" />
  1078. <input type="text" name="q" class="query" value="{SearchQuery}" />
  1079. <input type="submit" value="{lang:Search}" class="submit" />
  1080. <div class="clear"></div>
  1081. </form>
  1082. </div></div>
  1083.  
  1084. <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>
  1085. <!-- POSTS -->
  1086.  
  1087. <div id="container">
  1088.  
  1089. <div class="posts">
  1090.  
  1091. {block:Posts}
  1092.  
  1093. <div class="entry">
  1094.  
  1095. {block:date}
  1096. <div id="perma"><div style="float:left">{reblogbutton size="20"}</div>
  1097.  
  1098. <a href="{Permalink}" style="float:right;">{TimeAgo}</a>
  1099.  
  1100.  
  1101.  
  1102.  
  1103.  
  1104. </div> <br>{/block:date}
  1105. <!-- {block:NoRebloggedFrom}
  1106. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1107. {/block:NoRebloggedFrom} -->
  1108.  
  1109. <!-- Text -->
  1110. {block:Text}
  1111. {block:Title}
  1112. <a href="{Permalink}">
  1113. <h1>{Title}</h1></a>
  1114. {/block:Title}
  1115. {Body}
  1116. {/block:Text}
  1117.  
  1118.  
  1119. <!-- Photo -->
  1120. {block:Photo}
  1121.  
  1122. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1123. <br>
  1124. {block:caption}{caption}{/block:caption}
  1125.  
  1126. {/block:Photo}
  1127.  
  1128.  
  1129. <!-- Photoset -->
  1130. {block:Photoset}
  1131. {Photoset}
  1132. <br>
  1133. {block:caption}{caption}{/block:caption}
  1134.  
  1135.  
  1136. {/block:Photoset}
  1137. {block:Panorama}
  1138.  
  1139. {LinkOpenTag}
  1140. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  1141. {LinkCloseTag}{block:Caption}
  1142. {Caption}
  1143. {/block:Caption}
  1144.  
  1145. {/block:Panorama}
  1146.  
  1147. <!-- Quote -->
  1148. {block:Quote}
  1149.  
  1150. <i class="fa fa-quote-left"></i> {Quote} <i class="fa fa-quote-right"></i>
  1151. <br>
  1152. {block:Source}
  1153. -{Source}
  1154. {/block:Source}<br>
  1155. {/block:Quote}
  1156.  
  1157.  
  1158. {block:Link}
  1159. <center>
  1160. <a href="{URL}" class="linkp" target="_blank"> {Name}</a>
  1161. </center>
  1162. {block:Description}
  1163. {Description}
  1164. {/block:Description} <br>
  1165. {/block:Link}
  1166.  
  1167.  
  1168. {block:Chat}
  1169. {block:Title}<a href="{Permalink}" style="background:transparent; padding:0;"><h1>{title}</h1></a>{/block:Title}{block:Lines}<div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br/></div>{/block:Lines}
  1170. {/block:Chat}
  1171.  
  1172.  
  1173. {block:Audio}
  1174. <div id="audiolo">
  1175. <div class="playerbox">
  1176. <div id="albumart"> {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1177.  
  1178. <center><div class="playercon"><div class="player">{AudioPlayerWhite}</div></div></center></div>
  1179. <div class="infobox">
  1180. <div class="track"> {block:TrackName}
  1181. {TrackName}
  1182. {/block:TrackName} </div>
  1183.  
  1184.  
  1185. <div class="artist">
  1186. {block:Artist}{Artist}
  1187. {/block:Artist} </div>
  1188.  
  1189. <div class="album">
  1190. {block:Album}
  1191. {Album}
  1192. {/block:Album}
  1193. </div>
  1194.  
  1195. <div class="playcount">
  1196.  
  1197. {block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}</div>
  1198. </div></div> <br> {caption} <br>
  1199. {/block:Audio}
  1200.  
  1201.  
  1202. <!-- Video -->
  1203. {block:Video}
  1204. <center> {Video-250}</center>
  1205. {caption} <br>
  1206. {/block:Video}
  1207.  
  1208.  
  1209. <!-- Ask -->
  1210. {block:Answer}
  1211. <div class="askerportrait"><img style=" margin-left:4px; position:absolute; border-radius:100%;
  1212. border:1px {color:border} dashed;
  1213. padding:2px;
  1214. box-shadow:0px 0px 0px 3px {color:sidebar}, 0px 0px 0px 4px {color:border}; " src="{AskerPortraitURL-40}" align="left" /></div><div class="speechbubble">{Asker} {text:asked}: {Question}</div> <br> {answer}
  1215. {/block:Answer}
  1216.  
  1217.  
  1218. <br>
  1219. {block:date}
  1220. <div class="info"><a href="{permalink}">{NoteCountWithLabel}
  1221.  
  1222. </a>
  1223. <div style="float:right; ">{likebutton size="20"} </div>
  1224.  
  1225. {block:permalinkpage}
  1226. <br>
  1227.  
  1228. {block:RebloggedFrom}
  1229. <a href="{ReblogParentURL}" title="{reblogparentname}"> +{lang:via}
  1230. </a>
  1231.  
  1232. <a href="{ReblogRootURL}" title=" {ReblogRootName}"> +{lang:source} </a>{/block:RebloggedFrom}
  1233. {/block:permalinkpage}
  1234.  
  1235. <br></div> {/block:date}
  1236.  
  1237. {block:hastags}<div class="tags"><blockquote>{block:tags}<a href="{TagURL}">#{tag}</a> {/block:tags}</blockquote></div> {/block:hastags}
  1238. <!-- Permalink page -->
  1239.  
  1240.  
  1241. <!-- Other -->
  1242. {block:ContentSource}
  1243. <!-- {SourceURL}
  1244. {block:SourceLogo}
  1245. <img src="{BlackLogoURL}"
  1246. width="{LogoWidth}"
  1247. height="{LogoHeight}"
  1248. alt="{SourceTitle}" />
  1249. {/block:SourceLogo}
  1250. {block:NoSourceLogo}
  1251. {SourceLink}
  1252. {/block:NoSourceLogo} -->
  1253. {/block:ContentSource}
  1254.  
  1255. </div>
  1256.  
  1257. {/block:Posts}
  1258.  
  1259. <!-- END POSTS -->
  1260. {block:PermalinkPage}
  1261. <br>
  1262. {block:PostNotes}
  1263. {PostNotes-16}
  1264. {/block:PostNotes}
  1265. {/block:PermalinkPage}
  1266. </div></div>
  1267.  
  1268. <!-- END CONTAINER -->
  1269.  
  1270.  
  1271.  
  1272.  
  1273.  
  1274.  
  1275. </body>
  1276.  
  1277.  
  1278.  
  1279.  
  1280. </html>
  1281.  
  1282. <!-- END HTML -->
Advertisement
Add Comment
Please, Sign In to add comment