Advertisement
Guest User

Crazy Diamond v3

a guest
Apr 13th, 2015
133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.24 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  3.     <head>
  4.         <!-- PADRÃO -->
  5.         <meta charset="unicode">
  6.         <title>{Title}</title>
  7.         <link rel="shortcut icon" href="{Favicon}">
  8.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9.         {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.         <script src="http://static.tumblr.com/6uv80q7/NYjnmgb1b/jquery.js"></script>
  11.        
  12.         <!-- Crazy Diamond v3 -->
  13.         <!-- METATAGs -->
  14.          <meta name="color:border" content="#000" />
  15.        
  16.         <!-- SCRIPTS -->
  17.         <script src="http://static.tumblr.com/6uv80q7/uaGnmjwbr/imgloaded.js"></script>
  18.         <script src="http://static.tumblr.com/6uv80q7/bhmnmgb28/masonry.js"></script>
  19.         <script src="http://static.tumblr.com/6uv80q7/ykbnmgb42/jquery.nicescroll.min.js"></script>
  20.         <script type="text/javascript">
  21.             $(document).ready(function(){
  22.                 $("html").niceScroll({
  23.                     cursorcolor: '#000',
  24.                     cursoropacitymin: '0.1',
  25.                     cursorwidth: '6px',
  26.                     cursorborderradius: '2px'
  27.                 });
  28.             });
  29.         </script>
  30.        
  31.         <!-- ESTILOS -->
  32.         <style type="text/CSS">
  33.             body {
  34.                 background-color: #FFF;
  35.                 color: #000;
  36.                 font-size: 12px;
  37.                 font-family: Calibri;
  38.             }
  39.            
  40.             a {
  41.                 text-decoration: none;
  42.                 color: #000;
  43.             }
  44.            
  45.             blockquote {
  46.                 border-left: 2px solid #EEE9E9;
  47.                 padding-left: 4px;
  48.                 margin-left: 3px;
  49.                 margin-bottom: -8px;
  50.             }
  51.            
  52.             aside {
  53.                 position: relative;
  54.                 width: 200px;
  55.                 top: 30px;
  56.                 left: 35px;
  57.                 user-select: none;
  58.                 -moz-user-select: none;
  59.                 -webkit-user-select: none;
  60.             }
  61.            
  62.             aside a {
  63.                 color: #000;
  64.             }
  65.            
  66.             header.blogname {
  67.                 position: relative;
  68.                 width: 200px;
  69.                 font-size: 20px;
  70.                 padding: 10px;
  71.                 font-family: Verdana;
  72.                 font-style: italic;
  73.                 border: 3px solid #000;
  74.                 text-align: center;
  75.             }
  76.            
  77.             nav.menu {
  78.                 position: relative;
  79.                 width: 226px;
  80.                 text-align: right;
  81.                 text-transform: uppercase;
  82.                 font-size: 10px;
  83.             }
  84.            
  85.             nav.menu a {
  86.                 padding: 2px;
  87.                 border: 1px solid #000;
  88.                 background-color: #000;
  89.                 color: #FFF;
  90.             }
  91.             nav.menu a:hover {
  92.                 background-color: #FFF;
  93.                 color: #000;
  94.             }
  95.            
  96.             section#container {
  97.                 position: relative;
  98.                 top: 50px;
  99.                 max-width: 1250px;
  100.                 height: auto;
  101.                 padding: 0px;
  102.             }
  103.            
  104.             article.post {
  105.                 width: 400px;
  106.                 margin: 5px;
  107.                 margin-bottom: 10px;
  108.                 opacity: 0.7;
  109.             }
  110.            
  111.             article.post:hover {
  112.                 opacity: 1;
  113.             }
  114.            
  115.             article.post:hover div.barnotes {
  116.                 opacity: 1;
  117.             }
  118.            
  119.             div.barnotes {
  120.                 position: relative;
  121.                 text-align: right;
  122.                 opacity: 0;
  123.             }
  124.            
  125.             div.barnotes a {
  126.                 text-transform: uppercase;
  127.                 padding: 2px;
  128.                 font-size: 10px;
  129.                 color: #000;
  130.             }
  131.            
  132.             div.barnotes a:hover {
  133.                 color: #FFF;
  134.                 background-color: #000;
  135.             }
  136.            
  137.             /* POSTS */
  138.             header.title {
  139.                 width: 95%;
  140.                 text-align: left;
  141.                 font-size: 17px;
  142.                 font-family: Verdana;
  143.                 font-style: italic;
  144.                 background-color: #EEE9E9;
  145.                 padding: 10px;
  146.             }
  147.            
  148.             div.body {
  149.                 width: 94%;
  150.                 text-align: justify;
  151.                 font-size: 13px;
  152.                 padding: 10px;
  153.                 border: 2px solid #EEE9E9;
  154.                 border-top: 0px;
  155.             }
  156.            
  157.             div.source {
  158.                 width: 100%;
  159.                 font-size: 13px;
  160.                 text-align: right;
  161.             }
  162.            
  163.             /* FOOTER */
  164.             footer {
  165.                 position: relative;
  166.                 top: 35px;
  167.                 margin-bottom: 40px;
  168.                 border: 2px solid #000;
  169.                 padding: 10px;
  170.             }
  171.         </style>
  172.     </head>
  173.     <body>
  174.         <!-- SIDEBAR -->
  175.         <aside>
  176.             <nav class="menu">
  177.                 <a href="/">home</a>
  178.                 <a href="/faq">contato</a>
  179.                 <a href="/tagged/mytexts">barrett</a>
  180.             </nav>
  181.            
  182.             <header class="blogname">
  183.                 <b>{Title}</b> <!-- TAG Title -->
  184.             </header>
  185.         </aside>
  186.        
  187.         <!-- POST AREA -->
  188.         <center>
  189.             <section id="container" class="js-masonry">
  190.                 {block:Posts}
  191.                     <article class="post">
  192.                         <!-- POSTS START -->
  193.                        
  194.                         {block:Text}
  195.                             {block:Title}
  196.                                 <header class="title"><b>{Title}</b></header>
  197.                                 <div class="body">{Body}</div>
  198.                             {/block:Title}
  199.                         {/block:Text}
  200.                        
  201.                         {block:Photo}
  202.                             <img src="{PhotoURL-400}" width="400px" alt="{PhotoAlt}" />
  203.                         {/block:Photo}
  204.                        
  205.                         {block:Panorama}
  206.                             <!-- TO DO -->
  207.                         {/block:Panorama}
  208.                        
  209.                         {block:Photoset}
  210.                             {Photoset-400}
  211.                         {/block:Photoset}
  212.                        
  213.                         {block:Quote}
  214.                             <header class="title" style="text-align: justify;"><b>{Quote}</b></header>
  215.                             {block:Source}<div class="source">— {Source}</div>{/block:Source}
  216.                         {/block:Quote}
  217.                        
  218.                         {block:Link}
  219.                             <header class="title" style="text-align: justify;"><a href="{URL}" target="_blank"><b>{Name}</b></a></header>
  220.                             {block:Description}<div class="body">{Description}</div>{/block:Description}
  221.                         {/block:Link}
  222.                        
  223.                         {block:Chat}
  224.                             {block:Title}<header class="title"><b>{Title}</b></header>{/block:Title}
  225.                             {block:Lines}
  226.                                 <div class="body">
  227.                                     {block:Label}<b>{Label}</b> {/block:Label}{Line}
  228.                                 </div>
  229.                             {/block:Lines}
  230.                         {/block:Chat}
  231.                        
  232.                         {block:Audio}
  233.                             {block:AudioEmbed}{AudioEmbed-400}{/block:AudioEmbed}
  234.                             {block:TrackName}{block:Artist}
  235.                                 <header class="title" style="text-transform: uppercase; margin-top: -4px;"><b>{TrackName} - {Artist}</b></header>
  236.                             {/block:Artist}{/block:TrackName}
  237.                         {/block:Audio}
  238.                        
  239.                         {block:Video}
  240.                             {VideoEmbed-400}
  241.                             {block:Caption}
  242.                                 <div class="body">{Caption}</div>
  243.                             {/block:Caption}
  244.                         {/block:Video}
  245.                        
  246.                         {block:Answer}
  247.                             <!-- TO DO -->
  248.                         {/block:Answer}
  249.                        
  250.                         <!-- POSTS END -->
  251.                         <div class="barnotes">
  252.                             <a href="{ReblogURL}">reblog</a>
  253.                             {block:Date}<a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero} {24HourWithZero}:{Minutes}</a>{/block:Date}
  254.                         </div>
  255.                     </article>
  256.                 {block:Posts}
  257.             </section>
  258.            
  259.             <footer>
  260.                 Navigation
  261.             </footer>
  262.         </center>
  263.        
  264.         <script type="text/javascript">
  265.             var $container = ('section#container');
  266.             $container.imagesLoaded(function(){
  267.                 $container.masonry({
  268.                     itemSelector: 'article.post',
  269.                     columnWidth: 400,
  270.                     isFitWidth: true,
  271.                 });
  272.             });
  273.         </script>
  274.     </body>
  275. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement