API tools faq
paste
Advertisement
luciam

Theme #04

luciam
Feb 3rd, 2015
9,614
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!-------------------------------------------------
  3. THEME #04 BY: http://robbarya.tumblr.com
  4. ...................................................
  5. ...................................................
  6.  
  7. TERMS OF USE:
  8. -Don’t remove or move the credit
  9. -Don’t redistribute
  10. -Don’t use as a base or take bits of code
  11. -You can edit it as much as you like as long as the credit remains untouched.
  12. --------------------------------------------->
  13. <head>
  14.  
  15. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  16.  
  17. <title>{Title}</title>
  18.  
  19. <!---{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}---->
  20.  
  21. <link rel="shortcut icon" href="{Favicon}" />
  22.  
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  24.  
  25. <script src="http://assets.tumblr.com/assets/scripts/tumblelog.js?_v=6a17c519d68bc98ed5cdd6f4a55dbaa2"></script>
  26.  
  27.  
  28. <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  29. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  30.  
  31.  
  32.  
  33. <!----TOOLTIP------------------>
  34.  
  35. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  36. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  37. <script>
  38. (function($){
  39. $(document).ready(function(){
  40. $("[title]").style_my_tooltips({
  41. tip_follows_cursor:true,
  42. tip_delay_time:0,
  43. tip_fade_speed:400,
  44. attribute:"title"
  45. });
  46. });
  47. })(jQuery);
  48. </script>
  49.  
  50. <!-----------------------------ANCHORS------------------------>
  51.  
  52.  
  53. <script type='text/javascript'>//<![CDATA[
  54. $(window).load(function(){
  55. $('a').click(function(){
  56. $('html, body').animate({
  57. scrollTop: $( $(this).attr('href') ).offset().top
  58. }, 500);
  59. return false;
  60. });
  61. });//]]>
  62.  
  63. </script>
  64.  
  65.  
  66. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  67.  
  68. {block:ifnotsidebar}
  69. <script type="text/javascript">
  70. $(function(){
  71. var stickyRibbonTop = $('nav.topscroll').offset().top;
  72. $(window).scroll(function(){
  73. if( $(window).scrollTop() > stickyRibbonTop ) {
  74. $('nav.topscroll').css({position: 'fixed', top: '0px'});
  75. } else {
  76. $('nav.topscroll').css({position: 'static', top: '0px'});
  77. }
  78. });
  79. });
  80. </script>
  81. {/block:ifnotsidebar}
  82.  
  83.  
  84. <!-------------------------------META---------------------------------->
  85.  
  86. <meta name="if:sidebar" content="0" />
  87. <meta name="if:show caption" content="1" />
  88. <meta name="if:show tags" content="1" />
  89.  
  90. <meta name="color:background" content="#fff">
  91. <meta name="color:header background" content="#fff">
  92.  
  93. <meta name="color:scrollbar" content="#666">
  94.  
  95. <meta name="color:links" content="#666">
  96. <meta name="color:links hover" content="#999">
  97. <meta name="color:title" content="#ffffff">
  98. <meta name="color:description" content="#999">
  99. <meta name="color:nav" content="#ffffff">
  100. <meta name="color:nav links" content="#666F">
  101. <meta name="color:nav links hover" content="#7bd7c2">
  102.  
  103. <meta name="color:tooltip" content="#ffffff">
  104. <meta name="color:tooltip bg" content="#7bd7c2">
  105.  
  106. <meta name="color:posts bg" content="#fff">
  107. <meta name="color:post title" content="#888888">
  108. <meta name="color:text" content="#888888">
  109. <meta name="color:lines" content="#888888">
  110. <meta name="color:info" content="#888888">
  111. <meta name="color:info hover" content="#7bd7c2">
  112. <meta name="color:tags" content="#888888">
  113. <meta name="color:tags hover" content"#7bd7c2">
  114.  
  115. <meta name="image:background" content="">
  116. <meta name="image:header bg" content="">
  117. <meta name="image:icon" content="">
  118.  
  119.  
  120. <meta name="select:post size" content="p250" title="250px">
  121. <meta name="select:post size" content="p400" title="400px">
  122. <meta name="select:post size" content="p500" title="500px">
  123.  
  124.  
  125. <meta name="select:header bg position" content="left top" title="Left top">
  126. <meta name="select:header bg position" content="left center" title="Left center">
  127. <meta name="select:header bg position" content="left bottom" title="Left bottom">
  128. <meta name="select:header bg position" content="right top" title="Right top">
  129. <meta name="select:header bg position" content="right center" title="Right center">
  130. <meta name="select:header bg position" content="right bottom" title="Right bottom">
  131. <meta name="select:header bg position" content="center top" title="Center top">
  132. <meta name="select:header bg position" content="center" title="center">
  133. <meta name="select:header bg position" content="center bottom" title="Center bottom">
  134.  
  135.  
  136. <meta name="select:nav position" content="topfix" title="Top fixed">
  137. <meta name="select:nav position" content="botfix" title="Bottom fixed">
  138. <meta name="select:nav position" content="topscroll" title="Top-Fixed on scroll">
  139. <meta name="select:nav position" content="botscroll" title="Bottom static">
  140.  
  141. <meta name="text:status" content="Here goes your status or any text. Leave it blank if you don't want it">
  142. <meta name="text:Link1 URL" content="/" />
  143. <meta name="text:Link1 Name" content="home" />
  144. <meta name="text:Link2 URL" content="/ask" />
  145. <meta name="text:Link2 Name" content="message" />
  146. <meta name="text:Link3 URL" content="/archive" />
  147. <meta name="text:Link3 Name" content="archive" />
  148. <meta name="text:Link4 URL" content="/" />
  149. <meta name="text:Link4 Name" content="link 4" />
  150. <meta name="text:Link5 URL" content="/" />
  151. <meta name="text:Link5 Name" content="link 5" />
  152. <meta name="text:Link6 URL" content="/" />
  153. <meta name="text:Link6 Name" content="link 6" />
  154. <style type="text/css">
  155.  
  156.  
  157. /*--------------------------------RESET----------------------------------*/
  158.  
  159. html, body, div, span, applet, object, iframe,
  160. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  161. a, abbr, acronym, address, big, cite, code,
  162. del, dfn, em, img, ins, kbd, q, s, samp,
  163. small, strike, strong, sub, sup, tt, var,
  164. b, u, i, center,
  165. dl, dt, dd,
  166. fieldset, form, label, legend,
  167. table, caption, tbody, tfoot, thead, tr, th, td,
  168. article, aside, canvas, details, embed,
  169. figure, figcaption, footer, header, hgroup,
  170. menu, nav, output, ruby, section, summary,
  171. time, mark, audio, video {
  172. margin: 0;
  173. padding: 0;
  174. border: 0;
  175. font-size: 100%;
  176. font: inherit;
  177. vertical-align: baseline;
  178. }
  179.  
  180. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
  181. display:block;
  182. }
  183.  
  184. /*-------------------------------SCROLL----------------------------------*/
  185.  
  186. ::-webkit-scrollbar-thumb:vertical {
  187. background-color: {color:scrollbar};
  188. border:3px solid {color:background};
  189. }
  190.  
  191. ::-webkit-scrollbar-thumb:horizontal {
  192. background-color: {color:scrollbar};
  193. height:3px;
  194. border:3px solid {color:background};
  195. }
  196.  
  197. ::-webkit-scrollbar-corner {
  198. background-color: transparent;
  199. }
  200.  
  201. ::-webkit-scrollbar {
  202. background-color: {color:background};
  203. height:7px;
  204. width:7px;
  205. }
  206.  
  207. * {
  208. box-sizing: border-box;
  209. -webkit-box-sizing: border-box;
  210. -moz-box-sizing: border-box;
  211. -webkit-transition: all 0.6s ease-out;
  212. -moz-transition: all 0.6s ease-out;
  213. -ms-transition: all 0.6s ease-out;
  214. -o-transition: all 0.6s ease-out;
  215. transition: all 0.6s ease-out;
  216. }
  217. /*-------------------------CONTROLS----------------------*/
  218. .tmblr-iframe,
  219. .tmblr-iframe--desktop-loggedin-controls,
  220. .iframe-controls--desktop {
  221. top:30px!important;
  222. right:3px !important;
  223. position: fixed !important;
  224. opacity:0.3;
  225. width: 200px;
  226. }
  227.  
  228. .tmblr-iframe:hover,
  229. .tmblr-iframe--desktop-loggedin-controls:hover,
  230. .iframe-controls--desktop:hover {
  231. opacity:0.8;
  232. }
  233.  
  234. /*-------------------------BLOCKQUOTE----------------------*/
  235.  
  236.  
  237. blockquote {
  238. padding:5px;
  239. padding-left:15px;
  240. margin:5px;
  241. border-left:1px dotted {color:lines};
  242. }
  243.  
  244.  
  245. blockquote img {
  246. padding: 10px 0px;
  247. max-width:250px;
  248. }
  249.  
  250. /*---------------------------BODY-------------------------------------*/
  251. #s-m-t-tooltip{
  252. font-family: calibri;
  253. letter-spacing:1px;
  254. max-width:150px;
  255. font-size: 8px;
  256. margin:0px 10px;
  257. padding:3px 5px;
  258. background:{color:tooltip bg};
  259. color: {color:tooltip};
  260. opacity: .8;
  261. z-index:999;
  262. text-transform:uppercase;
  263. }
  264.  
  265. html {
  266. height: 100%;
  267. }
  268.  
  269.  
  270. body {
  271. background-attachment:fixed;
  272. background-repeat:repeat;
  273. margin: 0;
  274. padding: 0px;
  275. font-family: 'Trebuchet MS', Helvetica, cambria, sans-serif;
  276. font-size: 10px;
  277. word-wrap: break-word;
  278. letter-spacing: 1px;
  279. line-height:1.3;
  280. {block:ifbackgroundimage}
  281. background-image: url('{image:background}');
  282. {/block:ifbackgroundimage}
  283. {block:ifnotbackgroundimage}
  284. background-color: {color:background};
  285. {/block:ifnotbackgroundimage}
  286. color: {color:text};
  287. height: 100%;
  288. }
  289.  
  290. a, a:active, a:visited, a:hover {
  291. color: {color:links};
  292. text-decoration:none;
  293. -webkit-transition: all 0.6s ease-out;
  294. -moz-transition: all 0.6s ease-out;
  295. -ms-transition: all 0.6s ease-out;
  296. -o-transition: all 0.6s ease-out;
  297. transition: all 0.6s ease-out;
  298. }
  299.  
  300. a:hover {
  301. color: {color:links hover};
  302. text-decoration:underline;
  303. }
  304.  
  305. pre {
  306. white-space: pre-wrap;
  307. white-space: -moz-pre-wrap;
  308. white-space: -pre-wrap;
  309. white-space: -o-pre-wrap;
  310. word-wrap: break-word;
  311. }
  312.  
  313. small{
  314. color: {color:text};
  315. font-size:8px;}
  316.  
  317. big {font-size:12px;}
  318.  
  319. strong, b {
  320. font-weight:bold;
  321. }
  322.  
  323. i, u, em {
  324. font-style:italic;
  325. }
  326.  
  327.  
  328. /*---------------------------HEADER--------------------------------*/
  329.  
  330. header {
  331. position: absolute;
  332. height: 100%;
  333. width: 100%;
  334. min-height: 100%;
  335. padding:0;
  336. top: 0;
  337. bottom: 0;
  338. display: block;
  339. position: relative;
  340. overflow: hidden;
  341. {block:ifnotheaderbgimage}
  342. background-color: {color:header background};
  343. {/block:ifnotheaderbgimage}
  344. {block:ifheaderbgimage}background-image: url('{image:header bg}');
  345. background-position:{select:header bg position};
  346. {/block:ifheaderbgimage}
  347. }
  348.  
  349. {block:ifsidebar}
  350. header {
  351. position: fixed;
  352. height: 100%;
  353. width: 25%;
  354. min-height: 100%;
  355. }
  356. {/block:ifsidebar}
  357.  
  358. header #top {
  359. width: 55%;
  360. margin: 15% auto;
  361. padding:0;
  362. top: 0;
  363. bottom: 0;
  364. display: block;
  365. text-align: center;
  366. {block:ifsidebar}
  367. width: 95%;
  368. margin: 50% auto;
  369. {/block:ifsidebar}
  370. }
  371.  
  372. header #top img {
  373. height: 70px;
  374. width: 70px;
  375. -webkit-border-radius: 100px;
  376. border-radius: 100px;
  377. margin: auto;
  378. }
  379.  
  380. header #top #title {
  381. margin: 0 auto;
  382. }
  383. header #top #title .titulo {
  384. line-height: 30px;
  385. font-size: 25px;
  386. padding: 10px;
  387. width: 70%;
  388. margin: 0 auto;
  389. {block:ifsidebar}
  390. font-size:23px;
  391. {/block:ifsidebar}
  392. }
  393.  
  394. .titulo {
  395.  
  396. font-size: 25px;
  397. letter-spacing: 5px;
  398. font-weight: bold;
  399. font-family: 'Lato' calibri;
  400. text-transform: uppercase;
  401. text-align:center;
  402. }
  403.  
  404. .titulo a {
  405. text-decoration:none;
  406. }
  407. header #top #title .titulo a {
  408. display:block;
  409. color: {color:title};
  410. }
  411.  
  412. header #top #title .descripcion {
  413. line-height: 15px;
  414. width: 70%;
  415. text-align:justify;
  416. padding: 20px;
  417. margin: 0 auto;
  418. min-height: 50px;
  419. max-height: 500px;
  420. overflow: hidden;
  421. color: {color:description};
  422. text-transform:uppercase;
  423. letter-spacing: 2px;
  424. font-size: 7px;
  425. border-top: solid 1px {color:title};
  426. }
  427.  
  428. nav {
  429. background-color:{color:nav};
  430. width: 100%;
  431. height: 30px;
  432. position:absolute;
  433. z-index: 99;
  434. }
  435.  
  436. nav.topfix {
  437. top: 0;
  438. position:fixed;
  439. }
  440.  
  441. nav.topscroll {
  442. bottom:0;
  443. {block:ifnotsidebar}
  444. position:absolute;
  445. {/block:ifnotsidebar}
  446. {block:ifsidebar}
  447. position:fixed;
  448. {/block:ifsidebar}
  449. }
  450.  
  451.  
  452. nav.botfix {
  453. bottom:0;
  454. position:fixed;
  455. }
  456.  
  457. nav.botscroll {
  458. bottom:0;
  459. position:absolute;
  460. {block:ifsidebar}
  461. position:fixed;
  462. {/block:ifsidebar}
  463. }
  464.  
  465.  
  466. nav .enlaces ul {
  467. list-style: none;
  468. margin:auto;
  469. padding: 0;
  470. text-align: center;
  471. }
  472.  
  473. nav .enlaces li {
  474. margin-right:30px;
  475. height: 30px;
  476. display: inline-block;
  477. font-family: calibri;
  478. line-height: 30px;
  479. overflow:hidden;
  480. text-decoration:none;
  481. text-transform: uppercase;
  482. font-size: 8px;
  483. letter-spacing: 3px;
  484. text-align: center;
  485. font-weight: bold;
  486. }
  487.  
  488. nav .enlaces li a {
  489. display: block;
  490. color: {color:nav links};
  491. }
  492.  
  493. nav .enlaces li a:hover {
  494. text-decoration:none;
  495. color: {color:nav links hover};
  496. }
  497.  
  498. nav .enlaces li:hover a {
  499. color: {color:nav links hover};
  500. letter-spacing: 5px;
  501. }
  502.  
  503. /*---------------------------PG-------------------------------*/
  504.  
  505. nav .enlaces li.prev{
  506. position:absolute;
  507. left: 0;
  508. overflow:hidden;
  509. width:100px;
  510. }
  511.  
  512. nav .enlaces li.next {
  513. position:absolute;
  514. right: 0;
  515. overflow:hidden;
  516. width:100px;
  517. }
  518.  
  519. nav .enlaces li.prev:hover:before, nav .enlaces li.next:hover:before{
  520. left: 0;
  521. }
  522.  
  523. nav .enlaces li.prev:before, nav .enlaces li.next:before {
  524. position: absolute;
  525. height: 100%;
  526. width: 100%;
  527. -webkit-transition: all 0.6s;
  528. -moz-transition: all 0.6s;
  529. transition: all 0.6s;
  530. }
  531.  
  532.  
  533.  
  534. nav .enlaces li.prev:hover a {
  535. -webkit-transform: translateX(-25%);
  536. -moz-transform: translateX(-25%);
  537. -ms-transform: translateX(-25%);
  538. transform: translateX(-25%);
  539. }
  540.  
  541. nav .enlaces li.next:hover a {
  542. -webkit-transform: translateX(25%);
  543. -moz-transform: translateX(25%);
  544. -ms-transform: translateX(25%);
  545. transform: translateX(25%);
  546. }
  547.  
  548. nav .enlaces li.prev:before {
  549. content:"prev";
  550. color: {color:nav links hover};
  551. text-align:center;
  552. left: 80%;
  553. top: 1px;
  554. }
  555.  
  556. nav .enlaces li.next:before {
  557. content:"next";
  558. color: {color:nav links hover};
  559. text-align:center;
  560. left: -80%;
  561. top: 1px;
  562. }
  563.  
  564. #topost {
  565. margin-top: 20px;
  566. text-align: center;
  567. {block:ifsidebar}
  568. display:none;
  569. {/block:ifsidebar}
  570. }
  571.  
  572. #topost a {
  573. color: {color:description};
  574. }
  575.  
  576. #topost a:hover {
  577. text-decoration:underline;
  578. }
  579.  
  580. /*------------------------------------------------------------------------POST-------------------------------------------------------*/
  581.  
  582. #todo {
  583. width: 100%;
  584. margin: 30px auto;
  585. padding-top: 60px;
  586. padding-bottom: 60px;
  587. {block:ifsidebar}
  588. padding-top: 20px;
  589. float:right;
  590. width: 75%;
  591. {/block:ifsidebar}
  592. }
  593.  
  594. #todo .post {
  595. background-color: {color:posts bg};
  596. padding: 40px;
  597. margin: 0 auto;
  598. margin-bottom: 40px;
  599. overflow:hidden;
  600. }
  601.  
  602. .post.p250 {
  603. width:330px;
  604. }
  605.  
  606. .post.p400 {
  607. width:480px;
  608. }
  609.  
  610. .post.p500 {
  611. width:580px;
  612. }
  613.  
  614.  
  615. .post.p250 iframe, .post.p250 img {
  616. max-width: 250px;
  617. }
  618.  
  619. .post.p400 iframe, .post.p400 img {
  620. max-width: 400px;
  621. }
  622.  
  623. .post.p500 iframe, .post.p500 img {
  624. max-width: 500px;
  625. }
  626.  
  627. .post img {
  628. max-width:500px;
  629. }
  630.  
  631. #todo .post .titulo {
  632. color: {color:post title};
  633. font-size: 14px;
  634. width: 100%;
  635. line-height: 16px;
  636. border-bottom: solid 1px {color:lines};
  637. padding: 10px;
  638. margin-bottom: 10px;
  639. }
  640. #todo .post .cap {
  641. padding: 10px;
  642. text-align: justify;
  643. width: 100%;
  644. line-height: 18px;
  645. }
  646.  
  647. #todo .tags {
  648. font-family: calibri;
  649. padding: 5px;
  650. text-align: justify;
  651. text-transform: uppercase;
  652. font-weight: bold;
  653. font-size: 8px;
  654. letter-spacing: 3px;
  655. padding: 2px;
  656. line-height: 16px;
  657. width: 100%;
  658. margin-top: 10px;
  659. border-top: solid 1px {color:lines};
  660. }
  661.  
  662. .tags a {color: {color:tags};}
  663.  
  664. .tags a:hover {
  665. color: {color:tags hover};
  666. text-decoration:none;
  667. }
  668.  
  669.  
  670. .info {
  671. font-family: calibri;
  672. padding: 5px;
  673. text-align: center;
  674. text-transform: uppercase;
  675. font-weight: bold;
  676. font-size: 8px;
  677. letter-spacing: 3px;
  678. padding: 2px;
  679. line-height: 16px;
  680. width: 100%;
  681. border-top: solid 1px {color:lines};
  682. }
  683.  
  684. .info a {
  685. color: {color:info};
  686. text-decoration:none;
  687. }
  688.  
  689. .info a:hover {
  690. color: {color:info hover};
  691. }
  692.  
  693. #todo .post .vs img {
  694. moz-border-radius: 20px;
  695. border-radius: 20px;
  696. width: 15px;
  697. height: 15px;
  698. opacity: .6;
  699. }
  700.  
  701. .vs {
  702. float: right;
  703. margin-top: 10px;
  704. width: 100%;
  705. text-align:center;
  706. }
  707.  
  708. .vs img {
  709. opacity: 0.6;
  710. }
  711. .vs img:hover {
  712. opacity: 1;
  713. }
  714.  
  715. /*-------------------------------AUDIO------------------------------*/
  716.  
  717. #audio {
  718. width: 100%;
  719. display:block;
  720. margin:0px;
  721. height: 80px;
  722. margin-bottom: 10px;
  723. }
  724.  
  725. .artcover {
  726. width:80px;
  727. height:80px;
  728. position: absolute;
  729. margin-left: 0px;
  730. margin-top: -1;
  731. }
  732.  
  733. .artcover img {
  734. width:80px !important;
  735. height:80px;
  736. float:left;
  737. padding-right: 5px;
  738. }
  739.  
  740. .player {
  741. position:absolute;
  742. z-index:1;
  743. width:50px;
  744. height:50px;
  745. margin-top:14px;
  746. margin-left:14px;
  747. display:block;
  748. opacity:0.8;
  749. }
  750.  
  751. .player:hover {
  752. opacity:0.1;
  753. }
  754.  
  755. .audioplayer {
  756. width:30px;
  757. height:30px;
  758. margin-top:8px;
  759. margin-left:8px;
  760. padding:4px;
  761. overflow: hidden;
  762. }
  763.  
  764. .audioinfo {
  765. padding:18px 10px;
  766. border-left:1px dotted {color:lines};
  767. font-size: 14px;
  768. font-weight: bold;
  769. text-transform: uppercase;
  770. width: 70%;
  771. display:block;
  772. margin-left: 90px;
  773. font-size:10px;
  774. letter-spacing:0.1em;
  775. text-align:left;
  776. overflow: hidden;
  777. }
  778.  
  779. /*------------------------------------CHAT-------------------------*/
  780. .user:nth-of-type(odd){
  781. border-left:1px dotted {color:lines};
  782. }
  783.  
  784.  
  785. .user .label {
  786. font-weight:bold;
  787. text-transform:uppercase;
  788. font-family: calibri;
  789. font-size:9px;
  790. }
  791. .user .label:nth-of-type(odd) {
  792. color:{color:links};
  793. }
  794. .user .label:nth-of-type(even) {
  795. color:{color:links hover};
  796. }
  797.  
  798. ul.chat, .chat ol, .chat li {
  799. list-style:none;
  800. margin:0px;
  801. padding:10px
  802.  
  803. }
  804.  
  805.  
  806.  
  807. /*--------------------------------ASK-----------------------------*/
  808.  
  809. #ask {
  810. padding: 0px;
  811. }
  812.  
  813.  
  814.  
  815. .pregunta {
  816. width: 100%;
  817. letter-spacing: 1px;
  818. min-height: 35px;
  819. text-align: center;
  820. border-bottom: solid 1px {color:lines};
  821. padding-bottom: 10px;
  822. font-style: italic;
  823. }
  824.  
  825. #ask .pregunta img {
  826. width: 40px;
  827. height: 40px;
  828. -moz-border-radius: 40px;
  829. border-radius:40px;
  830. }
  831. .curioso {
  832. font-style: normal;
  833. letter-spacing: 4px;
  834. font-weight: bold;
  835. font-family: 'Lato' calibri;
  836. text-transform: uppercase;
  837. text-align:center;
  838. width: 100%;
  839. color: {color:post title};
  840. font-size: 14px;
  841. padding:15px;
  842. }
  843.  
  844. .curioso a {
  845. color: {color:post title};
  846. }
  847.  
  848. .curioso a:hover {
  849. text-decoration:none;
  850. }
  851.  
  852. .respuesta {
  853. line-height:150%;
  854. margin: 10px 0px;
  855. width: 100%;
  856. text-align: justify;
  857. }
  858.  
  859. /*-----------------------------------QUOTE----------------------*/
  860. .quote {
  861. width: 100%;
  862. text-indent: 0px;
  863. text-align: justify;
  864. font-family: 'Lato' calibri;
  865. font-size: 16px;
  866. font-style: none;
  867. font-weight: lighter;
  868. line-height: 150%;
  869. }
  870.  
  871. .quote:first-letter {
  872. padding-right: 0;
  873. font-size: 20px;
  874. font-weight: bold;
  875. }
  876.  
  877. h2 {
  878. text-transform: uppercase;
  879. font-size: 9px;
  880. font-weight:bold;
  881. text-align:left;
  882. }
  883.  
  884.  
  885. nav li a.navcredit {
  886. display:none;
  887. }
  888.  
  889. .phoenixt {
  890. position:fixed;
  891. bottom:20px;
  892. right:20px;
  893. text-align:center;
  894. }
  895.  
  896. .phoenixt a:hover {
  897. text-decoration:none;
  898. }
  899.  
  900.  
  901. /*-----------------------------------NOTAS----------------------*/
  902.  
  903. .notas {
  904. width: 100%;
  905. margin-top:40px;
  906. text-transform: uppercase;
  907. list-style-type: none;
  908. font-size: 8px;
  909. letter-spacing: 0.2em;
  910. text-align:center;
  911. }
  912.  
  913. ol.notes {
  914. list-style-type: none;
  915. padding: 0;
  916. }
  917. ol.notes li.note {
  918. display: inline-block;
  919. }
  920.  
  921. ol.notes li.note span {
  922. display:none;
  923. }
  924.  
  925. ol.notes li.note img.avatar {
  926. display:inline-block;
  927. width: 15px!important;
  928. height: 15px;
  929. margin: 2px;
  930. -moz-border-radius: 40px;
  931. border-radius:40px;
  932. opacity: 0.6;
  933. }
  934.  
  935. ol.notes li.note img.avatar:hover {
  936. opacity:1;
  937. }
  938.  
  939. ol.notes li.note blockquote {
  940. display: none;
  941. }
  942. ol.notes li.more_notes_link_container {
  943. display: block;
  944. margin-top: 10px;
  945. }
  946.  
  947.  
  948. /*TABLETS*/
  949. @media screen and (max-width:768px) {
  950.  
  951.  
  952. header #top {
  953. width: 70%;
  954. }
  955.  
  956.  
  957. nav li a.navcredit {
  958. display:none;
  959. }
  960.  
  961. .info {
  962. padding:5px;
  963. }
  964. .info a {
  965. margin-top:-10px;
  966. }
  967. .tags a {
  968. margin-right:5px;
  969. }
  970.  
  971. .post .titulo {
  972. font-size:25px;
  973. }
  974.  
  975. h1 {
  976. font-size:16px;
  977. line-height:130%;
  978. }
  979. }
  980.  
  981. /*MOBILE*/
  982. @media screen and (max-width:650px) {
  983.  
  984. #title .titulo a {
  985. font-size:20px;
  986. }
  987.  
  988. header #top #title .descripcion {
  989. font-size: 9px;
  990. }
  991.  
  992. header #top {
  993. margin:15% auto;
  994. }
  995.  
  996. header {
  997. position: absolute;
  998. height: 100%;
  999. width: 100%;
  1000. min-height: 100%;
  1001. padding:0;
  1002. top: 0;
  1003. bottom: 0;
  1004. display: block;
  1005. position: relative;
  1006. overflow: hidden;
  1007. }
  1008.  
  1009. nav.topfix, nav.botfix, nav.topscroll, nav.botscroll{
  1010. height:auto;
  1011. position:static;
  1012. }
  1013. nav li a {
  1014. display:block;
  1015. float:none;
  1016. }
  1017.  
  1018.  
  1019. nav .enlaces li.prev{
  1020. position:relative;
  1021. }
  1022.  
  1023. nav .enlaces li.next {
  1024. position:relative;
  1025. }
  1026.  
  1027. nav li a.navcredit {
  1028. display:block;
  1029. }
  1030.  
  1031. .phoenixt {
  1032. display:none;
  1033. }
  1034.  
  1035. #todo {
  1036. margin: 10px auto;
  1037. height:100%;
  1038. width:100%;
  1039. overflow:visible;
  1040. padding:0;
  1041. }
  1042.  
  1043. #todo .post {
  1044. margin:10px auto;
  1045. width:100%;
  1046. }
  1047.  
  1048. #todo .post .photoset iframe, #todo .post.photo img {
  1049. width:100%;
  1050. }
  1051.  
  1052. blockquote img {
  1053. max-width:70%;
  1054. }
  1055.  
  1056. #todo .post .vs img {
  1057. moz-border-radius: 20px;
  1058. border-radius: 20px;
  1059. width: 15px;
  1060. height: 15px;
  1061. }
  1062.  
  1063. #topost {
  1064. display:none;}
  1065.  
  1066. }
  1067. </style>
  1068.  
  1069.  
  1070.  
  1071. </head>
  1072.  
  1073.  
  1074. <body>
  1075.  
  1076.  
  1077. <header>
  1078.  
  1079. <section id="top">
  1080. <div id="title">
  1081. <img src="{image:icon}">
  1082. <div class="titulo"><a href="/">{Title}</a></div>
  1083. <div class="descripcion">{Description}
  1084. <br> {text:status}
  1085. <div id="topost"><a href="#todo">go to posts</a></div>
  1086. </div>
  1087. </div>
  1088. </section>
  1089.  
  1090.  
  1091. </header>
  1092.  
  1093. <nav class="{select:nav position}">
  1094. <div class="enlaces">
  1095. <ul>
  1096.  
  1097. {block:Pagination}
  1098. {block:PreviousPage}
  1099. <li class="prev">
  1100. <a href="{PreviousPage}#todo">&#8592;</a>
  1101. </li>
  1102. {/block:PreviousPage}
  1103. {/block:Pagination}
  1104.  
  1105. {block:IfLink1Name}
  1106. <li>
  1107. <a href="{text:Link1 URL}" >{text:Link1 Name}</a>
  1108. </li>
  1109. {/block:IfLink1Name}
  1110.  
  1111. {block:IfLink2Name}
  1112. <li>
  1113. <a href="{text:Link2 URL}" >{text:Link2 Name}</a>
  1114. </li>
  1115. {/block:IfLink2Name}
  1116.  
  1117. {block:IfLink3Name}
  1118. <li>
  1119. <a href="{text:Link3 URL}" >{text:Link3 Name}</a>
  1120. </li>
  1121. {/block:IfLink3Name}
  1122.  
  1123. {block:IfLink4Name}
  1124. <li>
  1125. <a href="{text:Link4 URL}" >{text:Link4 Name}</a>
  1126. </li>
  1127. {/block:IfLink4Name}
  1128.  
  1129.  
  1130. {block:IfLink5Name}
  1131. <li>
  1132. <a href="{text:Link5 URL}" >{text:Link5 Name}</a>
  1133. </li>
  1134. {/block:IfLink5Name}
  1135.  
  1136. {block:IfLink6Name}
  1137. <li>
  1138. <a href="{text:Link6 URL}" >{text:Link6 Name}</a>
  1139. </li>
  1140. {/block:IfLink6Name}
  1141.  
  1142. <li>
  1143. <a class="navcredit" href="http://phoenixthemes.tumblr.com">credit</a>
  1144. </li>
  1145.  
  1146. {block:Pagination}
  1147. {block:NextPage}
  1148. <li class="next">
  1149. <a href="{NextPage}#todo">&#8594;</a>
  1150. </li>
  1151. {/block:NextPage}
  1152. {/block:Pagination}
  1153.  
  1154.  
  1155. </ul>
  1156. </div>
  1157. </nav>
  1158.  
  1159. <!----end header--->
  1160.  
  1161.  
  1162. <!---------------------------------------POST--------------------------->
  1163. <div id="todo">
  1164.  
  1165.  
  1166. {block:Posts}
  1167.  
  1168. <div class="post {select:post size} {posttype}">
  1169.  
  1170.  
  1171. <!---------HIDESOURCE---------------------------->
  1172.  
  1173. {block:ContentSource}
  1174.  
  1175. <!--- {SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}”
  1176.  
  1177. width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
  1178.  
  1179. {/block:SourceLogo}
  1180.  
  1181. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --->
  1182.  
  1183. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  1184.  
  1185. <!---------------------------------------------------------->
  1186.  
  1187.  
  1188. {block:Text}{block:Title}<h1 class="titulo">{Title}</h1>{/block:Title}{Body}
  1189. {/block:Text}
  1190.  
  1191.  
  1192. {block:Quote}
  1193. <div class="quote">"{Quote}”<h2> — {Source}</h2></div>
  1194. {/block:Quote}
  1195.  
  1196. {block:Link}<a href="{URL}"><h1 class="titulo">{Name}</h1></a>
  1197. {block:Description}<p>{Description}</p>{/block:Description}
  1198. {/block:Link}
  1199.  
  1200. {Block:Photo}{LinkOpenTag}
  1201. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
  1202. {/Block:Photo}
  1203.  
  1204. {block:Photoset}
  1205. <div class="photoset {select:post size}">{Photoset}</div>
  1206. {/block:Photoset}
  1207.  
  1208. {block:Chat}<ul class="chat">{block:Lines}<li class="user">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>
  1209. {/block:Chat}
  1210.  
  1211. {block:Video}{Video-500}{/block:Video}
  1212.  
  1213.  
  1214. {block:Answer}
  1215. <div id="ask">
  1216. <div class="pregunta">
  1217. <img src="{AskerPortraitURL-40}">
  1218. <div class="curioso">{Asker}</div>
  1219. <br> <p style="margin-top:-25px">{Question}</p></div>
  1220. <div class="respuesta">{Answer}</div>
  1221. </div>
  1222. {/block:Answer}
  1223.  
  1224.  
  1225. {block:Audio}
  1226. <div id="audio">
  1227. <div class="artcover"><img src=""></div>{block:AlbumArt}<div class="artcover"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  1228.  
  1229. <div class="player">
  1230. <div class="audioplayer">{AudioPlayerWhite}</div>
  1231. </div>
  1232.  
  1233. <div class="audioinfo">
  1234. <div class="cancion">{block:TrackName}name:{TrackName}{/block:TrackName}<br> {block:Artist}artist:{Artist}{/block:Artist} </div>
  1235. <div style="font-size:8px;">
  1236. Played: {FormattedPlayCount} times
  1237. </div></div>
  1238.  
  1239. </div>
  1240. {/block:Audio}
  1241.  
  1242. {block:Panorama}
  1243. {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
  1244.  
  1245. {/block:Panorama}
  1246.  
  1247.  
  1248. {block:ifshowcaption}
  1249. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  1250. {/block:ifshowcaption}
  1251.  
  1252. {block:ifshowtags}
  1253. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag};</a> {/block:Tags}</div>{/block:HasTags}
  1254. {/block:ifshowtags}
  1255.  
  1256. <!----INFO---->
  1257. <div class="info">{block:Date}<a title="permalink" href="{Permalink}">{DayOfMonthWithZero}-{ShortMonth}-{ShortYear} at {12Hour}{CapitalAmPm}{/block:Date} {block:NoteCount} with {NoteCountWithLabel} {/block:NoteCount}</a></div>
  1258. {block:RebloggedFrom}
  1259. <div class="vs"><a href="{ReblogParentURL}" title="via: {ReblogParentName}"> <img src="{ReblogParentPortraitURL-16}"></a>
  1260. <a href="{ReblogRootURL}" title="source: {ReblogRootName}"> <img src="{ReblogRootPortraitURL-16}"></a>
  1261. </div>
  1262. {/block:RebloggedFrom}
  1263. <!----INFO---------->
  1264.  
  1265. {block:PostNotes}
  1266. <div class="notas">{PostNotes}</div>
  1267. {/block:PostNotes}
  1268.  
  1269. </div><!---end post-->
  1270.  
  1271. {/block:Posts}
  1272.  
  1273.  
  1274.  
  1275. </div></div></div></div></div></div><!---end todo-->
  1276.  
  1277. <div class="phoenixt"><a href="http://phoenixthemes.tumblr.com">P.</a></div>
  1278.  
  1279.  
  1280.  
  1281. </body>
  1282. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!