SHARE
TWEET

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

shimapa Apr 9th, 2012 530 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
Top