API tools faq
paste
Advertisement
shimapa

Минималистичная тема для tumblr.

shimapa
Apr 9th, 2012
812
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>{block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  6.     <link rel="icon" href="{Favicon}"/>
  7.     <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
  8.     {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  10.     <meta name="viewport" content="width=775"/>
  11.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  12.     <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
  13.  
  14.  
  15.     <!--[if IE]>
  16.         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  17.     <![endif]-->
  18.     <meta name="viewport" content="width=device-width,initial-scale=1">
  19. <style type="text/css" media="screen">
  20.     /* http://meyerweb.com/eric/tools/css/reset/
  21.        v2.0 | 20110126
  22.        License: none (public domain)
  23.     */
  24.    
  25.     html, body, div, span, applet, object, iframe,
  26.     h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  27.     a, abbr, acronym, address, big, cite, code,
  28.     del, dfn, em, img, ins, kbd, q, s, samp,
  29.     small, strike, strong, sub, sup, tt, var,
  30.     b, u, i, center,
  31.     dl, dt, dd, ol, ul, li,
  32.     fieldset, form, label, legend,
  33.     table, caption, tbody, tfoot, thead, tr, th, td,
  34.     article, aside, canvas, details, embed,
  35.     figure, figcaption, footer, header, hgroup,
  36.     menu, nav, output, ruby, section, summary,
  37.     time, mark, audio, video {
  38.         margin: 0;
  39.         padding: 0;
  40.         border: 0;
  41.         font-size: 100%;
  42.         font: inherit;
  43.         vertical-align: baseline;
  44.     }
  45.     /* HTML5 display-role reset for older browsers */
  46.     article, aside, details, figcaption, figure,
  47.     footer, header, hgroup, menu, nav, section {
  48.         display: block;
  49.     }
  50.     body {
  51.         line-height: 1;
  52.     }
  53.     ol, ul {
  54.         list-style: none;
  55.     }
  56.     blockquote, q {
  57.         quotes: none;
  58.     }
  59.     blockquote:before, blockquote:after,
  60.     q:before, q:after {
  61.         content: '';
  62.         content: none;
  63.     }
  64.     table {
  65.         border-collapse: collapse;
  66.         border-spacing: 0;
  67.     }
  68.    
  69.     body.newThing {
  70.                 background: url(http://shimansky.ru/tumblrimg/bg.jpeg) top center no-repeat fixed #474151; /* Ссылка на фоновую картинку */
  71.                 -webkit-background-size: 2000 1333; /* Не забудьте поставить нужную высоту и ширину картинки*/
  72.                 font-family: Georgia, serif;
  73.         }
  74.  
  75.  
  76.     div#newContent {
  77.         width: 400px;
  78.         margin: 100px auto 0;
  79.         padding: 0 20px;
  80.     }
  81.     div#newFooter {
  82.         text-align: center;
  83.         padding: 40px 0;
  84.     }
  85.     .newThing h1 a {
  86.     font-family: 'Arvo', serif;
  87.     font-weight: bold;
  88.     color: white;
  89.     font-size: 88px;
  90.     text-align: center;
  91.     text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
  92.     margin: 60px 0 20px;
  93.     text-decoration: none;
  94.     display: block;
  95.     height: 78px;
  96.     }
  97.     #newHeader {
  98.         padding-bottom: 40px;
  99.         background: url(http://shimansky.ru/tumblrimg/flourish.png) no-repeat bottom center;
  100.         text-align: center;
  101.     }
  102.     #newHeader ul {
  103.         list-style: none;
  104.         margin: 0 5px;
  105.         padding: 0;
  106.     }
  107.     #newHeader ul li {
  108.         margin: 0 3px;
  109.         padding: 0;
  110.         float: left;
  111.     }
  112.     #newHeader ul li a {
  113.         width: 122px;
  114.         border: 1px solid #fff;
  115.         border: 1px solid rgba(0, 0, 0, 0.2);
  116.         border-radius: 5px;
  117.         height: 30px;
  118.         display: block;
  119.         font-family: futura-pt-1, futura-pt-2, futuraBT-bold, helvetica, sans-serif;
  120.         font-weight: bold;
  121.         color: #fff;
  122.         text-decoration: none;
  123.         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  124.         letter-spacing: 3px;
  125.         line-height: 30px;
  126.         background-color: rgba(255, 255, 255, 0.15);
  127.         box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  128.         font-size: 14px;
  129.         -webkit-transition: all ease-in-out 0.3s;
  130.         -moz-transition: all ease-in-out 0.3s;
  131.         -o-transition: all ease-in-out 0.3s;
  132.         transition: all ease-in-out 0.3s;
  133.     }
  134.     #newHeader ul li a:hover {
  135.         background-color: rgba(255,255,255,0.3);
  136.     }
  137.     div.panel {
  138.         width: 340px;
  139.         padding: 5px 20px;
  140.         background-color: rgba(0, 0, 0, 0.04);
  141.         margin: 10px 10px 0;
  142.         border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  143.         box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5);
  144.         color: #333;
  145.         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  146.         text-align: left;
  147.         font-size: 15px;
  148.         line-height: 22px;
  149.         display: none;
  150.         background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%);
  151.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.05)));
  152.         background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);
  153.         background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);
  154.         background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);
  155.         background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%);
  156.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#0d000000',GradientType=0 );
  157.     }
  158.     div.panel p {
  159.         margin: 10px 0;
  160.     }
  161.     div.panel p a, div.textPost p a, div.audioPost p a {
  162.         color: #333;
  163.         text-decoration: none;
  164.         border-bottom: 1px dotted;
  165.         font-style: italic;
  166.         font-weight: bold;
  167.     }
  168.     .newPost {
  169.         background-color: #fff;
  170.         padding: 30px;
  171.         box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
  172.         margin: 20px 0;
  173.         color: #555;
  174.     }
  175.     .newPost h2 a {
  176.         font-family: futura-pt-1, futura-pt-2, FuturaBT-bold, helvetica, sans-serif;
  177.         font-weight: bold;
  178.         font-style: normal;
  179.         text-transform: uppercase;
  180.         font-size: 18px;
  181.         line-height: 24px;
  182.         margin: 5px 0;
  183.         color: #555;
  184.         text-decoration: none;
  185.     }    
  186.     .newPost h4 a {
  187.         font-family: futura-pt-1, futura-pt-2, FuturaBT-bold, helvetica, sans-serif;
  188.         font-weight: bold;
  189.         font-style: normal;
  190.         text-transform: uppercase;
  191.         font-size: 18px;
  192.         line-height: 24px;
  193.         margin: 5px 0;
  194.         color: red;
  195.         text-decoration: none;
  196.     }
  197.     .newPost p {
  198.         font-size: 15px;
  199.         line-height: 22px;
  200.         margin: 10px 0 5px;
  201.     }
  202.     .mediaPost {
  203.         padding: 0;
  204.         line-height: 0;
  205.     }    
  206.     .mediaPost span p {
  207.         padding: 15px 30px 20px;    
  208.     }
  209.     .mediaPost iframe {
  210.         width: 400px;
  211.         height: 220px;
  212.     }
  213.     .textPost {
  214.         background: url(http://shimansky.ru/tumblrimg/paper.gif) no-repeat bottom #fff;
  215.     }
  216.     div.audioPost {
  217.         background: url(http://shimansky.ru/tumblrimg/audio.jpeg) no-repeat top right #fff;
  218.     }
  219.     .audioPost object {
  220.         margin-top: 10px;
  221.     }
  222.     .textPost, .quotePost {
  223.         background: url(http://shimansky.ru/tumblrimg/paper.gif) no-repeat bottom #fff;
  224.     }
  225.     .quotePost p.quote {
  226.         font-size: 20px;
  227.         font-style: italic;
  228.         line-height: 1.5em;
  229.     }
  230.     .quotePost p.source {
  231.         color: #BBB;
  232.         position: relative;
  233.         font-size: 14px;
  234.         line-height: 2em;
  235.         text-align: right;
  236.     }
  237.     #shareButtonTwitter, #shareButtonFacebook {
  238.         width: 166px;
  239.         height: 30px;
  240.         border: 1px solid #fff;
  241.         border: 1px solid rgba(0, 0, 0, 0.3);
  242.         background-color: rgba(0, 0, 0, 0.1);
  243.         background-image: none;
  244.         box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
  245.         font-family: futura-pt-1, futura-pt-2, FuturaBT-Bold, helvetica, sans-serif;
  246.         font-weight: bold;
  247.         color: white;
  248.         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  249.         letter-spacing: 3px;
  250.         display: block;
  251.         text-transform: uppercase;
  252.         text-align: center;
  253.         text-decoration: none;
  254.         line-height: 30px;
  255.         border-radius: 5px;
  256.         margin: 10px 0;
  257.         float: left;
  258.         -webkit-transition: all ease-in-out 0.3s;
  259.         -moz-transition: all ease-in-out 0.3s;
  260.         -o-transition: all ease-in-out 0.3s;
  261.         transition: all ease-in-out 0.3s;
  262.     }
  263.     #shareButtonTwitter:hover, #shareButtonFacebook:hover {
  264.         background-color: rgba(0,0,0,0.05);
  265.     }
  266.     #shareButtonTwitter {
  267.         margin-right: 4px;
  268.     }
  269.     #newFooter a {
  270.         border: none;
  271.         display: block;
  272.     }
  273.     #newFooter a img {
  274.         -webkit-transition: all ease-in-out 0.3s;
  275.         -moz-transition: all ease-in-out 0.3s;
  276.         -o-transition: all ease-in-out 0.3s;
  277.         transition: all ease-in-out 0.3s;
  278.     }
  279.     #newFooter a img:hover {
  280.         opacity: 0.5;    
  281.     }
  282.     span.date {
  283.         text-align: center;
  284.         font-size: 14px;
  285.         color: #ccc;
  286.         font-style: italic;    
  287.         width: 100%;
  288.         display: block;
  289.         background: url(http://shimansky.ru/tumblrimg/dateline.png) no-repeat;
  290.         height: 3px;
  291.         line-height: 0;
  292.         margin-top: 20px;
  293.     }
  294.     .date a{
  295.         text-align: center;
  296.         font-size: 14px;
  297.         color: #ccc;
  298.         font-style: italic;
  299.         text-decoration:none;
  300.         border-bottom:1px dotted #ccc;
  301.     }
  302.     a#homeButton {
  303.     width: 204px;
  304.     height: 115px;
  305.     background: url(http://shimansky.ru/tumblrimg/rr.png) no-repeat bottom center;
  306.     margin: auto;
  307.     display: block;
  308.     text-indent: -9999px;
  309.     -webkit-transition: all ease-in-out 0.3s;
  310.     -moz-transition: all ease-in-out 0.3s;
  311.     -o-transition: all ease-in-out 0.3s;
  312.     transition: all ease-in-out 0.3s;
  313. }
  314. a#homeButton span {
  315.     background: url(http://shimansky.ru/tumblrimg/homeLink.png) no-repeat;
  316.     display: block;
  317.     width: 202px;
  318.     margin: 0 auto 20px;
  319.     text-indent: -9999px;
  320.     height: 38px;
  321.     opacity: 0;
  322.     -webkit-transition: all ease-in-out 0.3s;
  323.     -moz-transition: all ease-in-out 0.3s;
  324.     -o-transition: all ease-in-out 0.3s;
  325.     transition: all ease-in-out 0.3s;
  326. }
  327. a#homeButton:hover span {
  328.     opacity: 1;
  329. }
  330. a.pagiNav {
  331.     width: 100px;
  332.     border: 1px solid white;
  333.     border: 1px solid rgba(0, 0, 0, 0.4);
  334.     border-radius: 5px;
  335.     height: 28px;
  336.     display: block;
  337.     font-family: futura-pt-1, futura-pt-2, futuraBT-bold, helvetica, sans-serif;
  338.     font-weight: bold;
  339.     color: white;
  340.     text-decoration: none;
  341.     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  342.     letter-spacing: 3px;
  343.     line-height: 28px;
  344.     background-color: rgba(255, 255, 255, 0.15);
  345.     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  346.     font-size: 12px;
  347.     -webkit-transition: all ease-in-out 0.3s;
  348.     -moz-transition: all ease-in-out 0.3s;
  349.     -o-transition: all ease-in-out 0.3s;
  350.     transition: all ease-in-out 0.3s;
  351.     text-align: center;
  352.     margin: 0 20px;
  353. }
  354. a.pagiNav:hover {
  355.     background-color: rgba(255, 255, 255, 0.25);  
  356. }
  357. a#navOlder {
  358.     float: right;
  359.     padding: 0 0 0 5px;
  360. }
  361. a#navNewer {
  362.     float: left;    
  363.     padding: 0 5px 0 0;
  364. }
  365.     </style>
  366. </head>
  367. <body>
  368. <body class="newThing">
  369.     <div id="newContent">
  370.         <div id="newHeader">
  371.             <h1><a href="/">{Title}</a></h1>
  372.             <ul>
  373.                 <li><a class="aboutBtn show" href="#aboutPanel">ОБО МНЕ</a></li>
  374.                 <li><a class="shareBtn show" href="#sharePanel">ТВИТНУТЬ</a></li>
  375.                 <li><a class="donateBtn show" href="#donatePanel">РЕКЛАМА</a></li>
  376.             </ul>
  377.             <div style="clear: both;"></div>
  378.             <div id="aboutPanel" class="panel">
  379.                 <p>Меня зовут Павел Шиманский, мне 18 лет, и я из Москвы.</p>
  380.                 <p>Следите за мной в твиттере: <a href="http://twitter.com/shimapa">@shimapa</a>!</p>
  381.             </div>
  382.             <div id="sharePanel" class="panel">
  383.                 <p>Расскажите о моем блог в Твиттере или фейсбуке!</p>
  384.                 <a id="shareButtonTwitter" href="http://twitter.com/share?text=Зацените блог @shimapa - ">TWITTER</a>
  385.                 <a id="shareButtonFacebook" href="http://www.facebook.com/sharer.php?u=http://blog.shimansky.ru">FACEBOOK</a>
  386.                 <div style="clear: both;"></div>
  387.             </div>
  388.             <div id="donatePanel" class="panel">
  389.                 <p>Здесь могла бы быть ваша реклама. Однако, как видите, её здесь нет, так как на мой блог заходят от силы два пользователя: я с компьютера и я с телефона. Тем не менее всё может быть: <a href="mailto:pavel@shimanskyy.com">pavel@shimansky.ru</a> ^_^</p>
  390.             </div>
  391.         </div>
  392.             {block:Posts}
  393.                 {block:ContentSource}
  394.                     {lang:Source}: <a href="{SourceURL}">{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a>
  395.                 {/block:ContentSource}
  396.                
  397.  
  398.                 {block:Regular}
  399.                     <div class="newPost textPost">
  400.                         {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
  401.                         <p><span>
  402.                             {Body}
  403.                         </p></span>
  404.                 {block:Date}
  405.                 <span class="date"><a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a></span>
  406.                 {/block:Date}
  407.                     </div>
  408.                 {/block:Regular}
  409.                
  410.                
  411.                 {block:Photo}
  412.                     <div class="newPost mediaPost">
  413.                     {LinkOpenTag}<img src="{PhotoURL-400}" />{LinkCloseTag}
  414.                         {block:Caption}
  415.                         <span class="caption">{Caption}</span>
  416.                         {/block:Caption}
  417.                     </div>
  418.                 {/block:Photo}
  419.  
  420.  
  421.                 {block:Quote}
  422.                     <div class="newPost quotePost">
  423.                         <p class="quote">&#8220;{Quote}&#8221;</p>
  424.                         {block:Source} <p class="source">{Source}</p>
  425.                    {/block:Source}
  426.                 {block:Date}
  427.                 <span class="date"><a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a></span>
  428.                 {/block:Date}
  429.                     </div>
  430.                 {/block:Quote}
  431.  
  432.  
  433.                 {block:Link}
  434.                     <div class="newPost textPost">
  435.                 <h4><u><a href="{URL}" class="link" {Target}>{Name}</a></u></h4>
  436.                         {block:Description}
  437.                         <span class="caption">{Description}</span>
  438.                         {/block:Description}
  439.                 {block:Date}
  440.                 <span class="date"><a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a></span>
  441.                 {/block:Date}
  442.                     </div>    
  443.                 {/block:Link}
  444.  
  445.  
  446.                 {block:Conversation}
  447.                 <div class="newPost textPost">
  448.     {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
  449.                     <ul>
  450.                         {block:Lines}
  451.                             <li class="caption">
  452.                                 {block:Label}{Label} {/block:Label}{Line}
  453.                             </li>
  454.                         {/block:Lines}
  455.                     </ul>
  456.                     {block:Source} <p class="source">{Source}</p>
  457.                    {/block:Source}
  458.                 </div>    
  459.                 {/block:Conversation}
  460.  
  461.  
  462.                 {block:Audio}
  463.                 <div class="newPost textPost audioPost">
  464.                     <h2><a href="{Permalink}">{block:TrackName}
  465. {TrackName}
  466. {/block:TrackName}</h2>
  467.                         {block:Caption}
  468.                             <div class="description"><p>{Caption}</p></div>
  469.                         {/block:Caption}
  470.                     {AudioPlayerGrey}
  471.  
  472.                 {block:Date}
  473.                 <span class="date"><a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a></span>
  474.                 {/block:Date}
  475.                 </div>        
  476.                 {/block:Audio}
  477.  
  478.                 {block:Video}
  479.                 <div class="newPost mediaPost">
  480.                         {Video-400}
  481.                         {block:Caption}
  482.                             <span class="caption">{Caption}</span>
  483.                         {/block:Caption}
  484.                 </div>
  485.                 {/block:Video}
  486.            
  487.             {/block:Posts}
  488.  
  489.  
  490.             {block:IndexPage}
  491.                     {block:PreviousPage}
  492.                         <a id="navNewer" class="pagiNav" href="{PreviousPage}">&#171; Туда</a>
  493.                     {/block:PreviousPage}    
  494.    
  495.                     {block:NextPage}
  496.                         <a id="navOlder" class="pagiNav" href="{NextPage}">Сюда &#187;</a>
  497.                     {/block:NextPage}
  498.  
  499.             {/block:IndexPage}
  500.  
  501.  
  502.     <script type="text/javascript">
  503.  
  504. var isiPad = navigator.userAgent.match(/iPad/i) != null;
  505.         $(document).ready(function() {
  506.             if(!isiPad){
  507.                 $(window).scroll(function() {
  508.                     var bgHeight = 1280;
  509.                     var documentHeight = $(document).height();
  510.                     var windowHeight = $(window).height();
  511.                     var offset = $(window).scrollTop();
  512.                    
  513.                     var maxScroll = documentHeight - windowHeight;
  514.                     var percentOffset = offset / maxScroll;
  515.                     var percentToPixels = -(bgHeight-windowHeight)*percentOffset;
  516.                    
  517.                     $('body').css({backgroundPosition: '50% '+percentToPixels+'px'});
  518.                 });
  519.             }
  520.             $('.show').click(function(e){
  521.                 e.preventDefault();
  522.                 $('.panel').stop(true,true);
  523.                 var target = $(this).attr('href');
  524.                 if($('.panel').is(':visible')){
  525.                     if($(target).is(':visible')){
  526.                         $(target).slideUp();
  527.                         return false;
  528.                     }else{
  529.                         $('.panel:visible').slideUp(400, function(){
  530.                             $(target).slideDown(); 
  531.                         });    
  532.                     }
  533.                 }else {
  534.                     $(target).slideDown();
  535.                 }
  536.             });
  537.         });
  538. </script>
  539.      <div id="newFooter">
  540.                 <a id="homeButton" href="http://pacha.shimansky.ru">
  541.                     <span>Перейти на мой основной сайт - pacha.shimansky.ru to riversandrobots.com</span>
  542.                 </a>
  543.             </div>
  544.     </div><!-- #newContent -->
  545. </body>
  546. </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!