quenma

theme 13: vista

Oct 23rd, 2016
4,667
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.50 KB | None | 0 0
  1. <!--
  2.  
  3.  
  4. theme #13: vista
  5. by leopardraws
  6.  
  7. thanks for using my themes!
  8. feel free to change fonts and colors.
  9. enjoy!! <3
  10.  
  11.  
  12. -->
  13.  
  14.  
  15. <html>
  16. <head>
  17.  
  18.  
  19. <title>{Title}{block:searchpage}, search results: {searchquery}{/block:searchpage}{block:postsummary} - {postsummary}{/block:postsummary}
  20. </title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. <meta name="description" content="{MetaDescription}" />
  24.  
  25. <meta name="color:Links" content="#888888"/>
  26. <meta name="color:Accent" content="#f0d07e"/>
  27. <meta name="color:Background" content="#f8f8f8"/>
  28. <meta name="color:Fonts" content="#aaaaaa"/>
  29. <meta name="color:Post title" content="#777777"/>
  30. <meta name="color:Entry" content="#ffffff"/>
  31. <meta name="color:Sidebar" content="#ffffff"/>
  32. <meta name="color:Borders" content="#f2f2f2"/>
  33. <meta name="color:Chats background" content="#fafafa"/>
  34. <meta name="color:Header background" content="#c8d1e2"/>
  35.  
  36. <meta name="color:Navigation background" content="#020202"/>
  37. <meta name="color:Navigation fonts" content="#aaaaaa"/>
  38. <meta name="color:Navigation borders" content="#111111"/>
  39.  
  40. <meta name="image:Avatar" content="https://goo.gl/4Nvtxq"/>
  41. <meta name="image:Header" content="https://goo.gl/ADmWci"/>
  42.  
  43. <meta name="if:Show captions" content="1"/>
  44. <meta name="if:Custom tumblr controls" content="1"/>
  45. <meta name="if:Repeat header background" content="0"/>
  46. <meta name="if:Show header" content="1"/>
  47.  
  48. <meta name="select:Posts width" content="350px"/>
  49. <meta name="select:Posts width" content="400px"/>
  50. <meta name="select:Posts width" content="450px"/>
  51. <meta name="select:Posts width" content="500px"/>
  52. <meta name="select:Posts width" content="540px"/>
  53.  
  54. <meta name="select:Header size" content="100% auto" title="Fit width"/>
  55. <meta name="select:Header size" content="auto 100%" title="Fit height"/>
  56. <meta name="select:Header size" content="auto" title="Original"/>
  57.  
  58. <meta name="select:Vertical header position" content="top" title="Top"/>
  59. <meta name="select:Vertical header position" content="bottom" title="Bottom"/>
  60.  
  61. <meta name="select:Horizontal header position" content="left" title="Left"/>
  62. <meta name="select:Horizontal header position" content="right" title="Right"/>
  63. <meta name="select:Horizontal header position" content="center" title="Center"/>
  64.  
  65.  
  66. <meta name="text:Header title" content="many moons will guide us" />
  67. <meta name="text:Header height" content="245" />
  68. <meta name="text:Link 1 URL" content="#url"/>
  69. <meta name="text:Link 1 title" content="link#1"/>
  70. <meta name="text:Link 2 URL" content="#url"/>
  71. <meta name="text:Link 2 title" content="link#2"/>
  72. <meta name="text:Link 3 URL" content="#url"/>
  73. <meta name="text:Link 3 title" content="link#3"/>
  74.  
  75. <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic|Cabin:400,600,700,400italic,600italic,700italic|Work+Sans:400,600,700,400italic,600italic,700italic|Lora:300,300italic,00,400italic,600,600italic" rel="stylesheet">
  76.  
  77. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/> <!-- //pxu ph -->
  78.  
  79. <link rel="stylesheet" href="http://static.tumblr.com/ev0x8sk/s9zoer9qd/imoon.css">
  80. <!-- imoon -->
  81.  
  82. <style>
  83. /* defaults */
  84. .tmblr-iframe {
  85.             {block:ifcustomtumblrcontrols}
  86.             display:none!important;
  87.             z-index:99999999999999;
  88.             {block:ifcustomtumblrcontrols}}
  89.  
  90. a {
  91.     transition:.5s;
  92.     text-decoration:none;
  93.     color:{color:links};
  94.     border-bottom:1px solid {color:accent}; }
  95.    
  96. a:hover { color:{color:accent};
  97.     cursor:help;}
  98.  
  99. body { font:10.5px 'work sans', sans-serif;
  100.     color:{color:fonts};
  101.     margin:0;
  102.     padding:0;
  103.     min-height:100%;
  104.     line-height:180%;
  105.     background:{color:background}; }
  106.  
  107. small, big, pre, sub, sup {
  108.     font-size:10px!important; }
  109.  
  110. p { margin:5px 0; }
  111. b, strong { font-style:normal; font-weight:normal; }
  112. i { font-style:normal; }
  113.  
  114. ::-webkit-scrollbar {
  115.     background:{color:entry};
  116.     width:5px;  
  117.     height:5px;}
  118.  
  119. ::-webkit-scrollbar-thumb {
  120.     background:{color:accent};
  121.     border:2px solid {color:entry};}
  122.    
  123. blockquote {
  124.     border-left:1px solid {color:borders};
  125.     padding-left:10px;
  126.     margin:3px 0 0 10px; }
  127.    
  128. .tmblr-lightbox { background-color: rgba({RGBcolor:background},.9)!important; }
  129. .tmblr-lightbox .vignette { background: transparent!important }
  130. .tmblr-lightbox .lightbox-image { box-shadow:0 0 0 transparent!important; }
  131. .tmblr-lightbox .lightbox-caption {
  132.     font-size:16px;!important;
  133.     color:{color:font}!important;
  134.     text-shadow: 0 0 0 transparent!important; }
  135.  
  136. .tumblr-box { border-color:transparent!important; }
  137.    
  138. #s-m-t-tooltip {
  139.     max-width:240px;
  140.     padding:5px 7px;
  141.     margin-left:25px;
  142.     margin-right:22px;
  143.     font-size:9.5px;
  144.     text-transform:uppercase;
  145.     margin-top:18px;
  146.     border-radius:1px;
  147.     letter-spacing:.5px;
  148.     z-index:9999999999999990;
  149.     transition:.5s;
  150.     border:1px solid {color:borders};
  151.     color:{color:links};
  152.     background-color:{color:entry}; }
  153.    
  154. a#credits { position:fixed;    
  155.     z-index:999999;
  156.     bottom:25px;
  157.     right:20px;
  158.     width:13px;
  159.     height:13px;
  160.     border-radius:1px;
  161.     border-bottom:none;
  162.     transform:rotate(45deg);
  163.     background:{color:accent}; }
  164.    
  165. .bodies { padding:18px; }
  166. .bodies img { max-width:100%; height:auto; }
  167.    
  168.    
  169. /* alignment */
  170. #content {
  171.     left:50%;
  172.     top:calc({text:header height}px + 90px);
  173.     width:0;
  174.     margin-left:calc(-{select:posts width} / 2);
  175.     text-align:left;
  176.     position: relative;
  177.     margin-top: 110px;
  178.     margin-bottom:0px;
  179.     {block:ifnotshowheader}
  180.     top:90px;
  181.     {/block:ifnotshowheader}
  182.     {block:PermalinkPage}
  183.     margin-left:-270px;
  184.     {/block:PermalinkPage} }
  185.  
  186. .entry {  
  187.     border-radius:2px;
  188.     border:1px solid {color:borders};
  189.     margin-bottom:110px;
  190.     box-shadow:0 0 3px {color:borders};
  191.     background:{color:entry};
  192.     width:{select:posts width};
  193.     {block:PermalinkPage}
  194.     width:540px;
  195.     {/block:PermalinkPage} }
  196.  
  197. .entry .titles {
  198.     font-size:16px;
  199.     letter-spacing:-.5px;
  200.     color:{color:post title}; }
  201.        
  202.  
  203.    
  204. /* photo posts */
  205. #photopost { width:100%;
  206.     margin-bottom:-6px;}
  207. .captions {
  208.     padding:10px 18px;
  209.     border-top:1px solid {color:borders}; }
  210. .captions a.tumblr_blog {
  211.     font-weight: normal;
  212.     font-style: normal;
  213.     line-height: 13px;
  214.     margin-left:25px;
  215.     display: inline-block; }
  216.  
  217. a.tumblr_blog img {
  218.     position:absolute;
  219.     margin-top:-2px;
  220.     margin-left: -26px; }
  221.    
  222. .caption-ava {
  223.     width: 20px;
  224.     height: 20px;
  225.     display: inline-block;
  226.     margin-bottom: -7px;
  227.     position: absolute;
  228.     border-radius: 20px; }
  229.  
  230. .captions blockquote {
  231.     border:none;
  232.     padding:0;
  233.     margin:7px 0 0 0; }
  234.  
  235.  
  236. /* chat posts */
  237. .chatodd, .chateven { padding:10px 18px; }
  238. .chatodd b, .chateven b { color:{color:links}; }
  239. .chateven { background:{color:chats background}; }
  240.  
  241.  
  242. /* link posts */
  243. a.titles { border-bottom:none; }
  244.  
  245.  
  246.  
  247. /* audio posts */
  248. .audio-box {
  249.     margin-bottom:10px;
  250.     margin-top:10px; }
  251.    
  252. .audioplayer-inner {
  253.     width:26px;
  254.     height:27px;
  255.     overflow: hidden; }
  256.  
  257. .audioplayer-outer {
  258.     padding:6px;
  259.     width: 26px;
  260.     height: 27px;
  261.     position: relative;
  262.     display: inline-block;
  263.     overflow: hidden;
  264.     background:white;
  265.     margin: 7px 10px 0 15px;
  266.     z-index: 10; }
  267.  
  268. .audio-info { text-align: left;
  269.     position: absolute;
  270.     font-style:italic;
  271.     margin-top: 17px;
  272.     margin-left: 4px;
  273.     width:calc({select:posts width} - 100px);
  274.     display: inline-block;}
  275.  
  276. .audio-info#audio-em { position:relative;
  277.     padding:0 6px 0 20px;
  278.     margin:10px 0 0 15px!important;}
  279.  
  280. #audio-em br { display:none; }
  281. .audio-info b:after { content:' –'; opacity:.5; }
  282. .a-emb { margin:10px 10px 4px; }
  283.  
  284.  
  285. /* quote posts */
  286. p.source { margin:5px 0 -3px; }
  287.  
  288.  
  289. /* ask posts */
  290. .answer-question {
  291.     text-transform:none;
  292.     display:table-cell;
  293.     line-height:17px;
  294.     width:calc({select:posts width} - 55px);
  295.     vertical-align:middle; }
  296.  
  297. .asker-question { margin-top:0px;
  298.     line-height:17px;
  299.     letter-spacing:0; }
  300.  
  301. .my-answer {
  302.     padding: 0px 10px;
  303.     margin: 0 15px 15px;    
  304.     border-left:1px solid {color:borders}; }
  305.  
  306. #askerportrait { width:30px;
  307.     display:table-cell;
  308.     vertical-align:top;
  309.     padding-right:14px; }
  310.  
  311. #askerportrait img { width:30px;
  312.     border-radius:3px;}
  313.  
  314. .bodies.answers { padding:20px;
  315.     margin-bottom: 14px;
  316.     border-bottom: 1px solid {color:borders}; }
  317.  
  318.  
  319. /* post notes */
  320. .post-notes {
  321.     padding:20px 0;
  322.     max-height:300px;
  323.     overflow-y:auto; }
  324.  
  325. .post-notes img.avatar {
  326.     width: 10px;
  327.     height:10px;
  328.     border-radius: 100%;
  329.     margin-top: 5px;
  330.     margin-right: 5px;
  331.     margin-bottom: -2px; }
  332.  
  333. .post-notes ol { list-style-type:none; }
  334. .post-notes li { display:block; }
  335. .post-notes li.like { display:block; }
  336.    
  337. .post-notes li.note.more_notes_link_container {
  338.     text-align:left!important; }
  339.    
  340. a.avatar_frame { border-bottom:none; }
  341.  
  342. #fix-scrollbar ::-webkit-scrollbar { background:{color:entry}!important; }
  343. #fix-scrollbar ::-webkit-scrollbar-thumb { border-color:{color:entry}!important; }
  344.  
  345.  
  346.  
  347. /* top */
  348. .top-perma {
  349.     display:table;
  350.     width:calc({select:posts width} - 36px);
  351.     {block:PermalinkPage}
  352.     width:504px;
  353.     {/block:PermalinkPage}
  354.     padding:18px 18px 11px;
  355.     border-bottom:1px solid {color:borders};}
  356.  
  357. .top-perma.reblogged { display:none; }
  358.  
  359. .via-on-post, .timestamp-on-post { display:table-cell;
  360.     width:calc({select:posts width} - 170px); }
  361.  
  362. #viathis, .viatitle, .icon-clock, .time-ago {
  363.     display:table-cell;
  364.     vertical-align:middle; }
  365.  
  366. .top-perma a {
  367.     color:{color:links};
  368.     border-bottom:none; }
  369.  
  370. #viathis {
  371.     width:19px;
  372.     border-radius:100px;}
  373.  
  374. .viatitle {
  375.     width:calc({select:posts width} / 3);
  376.     padding-left:7px;}
  377.    
  378. .top-perma i {
  379.     font-size:12px;
  380.     padding-right:0; }
  381.  
  382. .time-ago {
  383.     width:calc({select:posts width} / 3);
  384.     text-align:right;
  385.     padding-bottom:1px;
  386.     padding-right:6px; }
  387.  
  388.  
  389.  
  390. /* like button */
  391. .like {
  392.     display:table-cell;
  393.     vertical-align:middle;  }
  394.  
  395. .like:hover i { color:{color:accent}; }
  396.  
  397. .like iframe { width: 13px!important;
  398.     height: 15px!important; }
  399.  
  400. .like i {
  401.     transition: .5s;
  402.     color {color:links}; }
  403.    
  404. .like .like_button {
  405.     position: absolute;
  406.     margin: -1px -1px;
  407.     opacity: 0; }
  408.    
  409. .like .liked ~ .icon-heart { color:{color:accent}; }
  410.  
  411. .icon-heart { font-size:11.5px!important; }
  412.  
  413. #like.liked svg { opacity:0!important; }
  414.  
  415.  
  416.    
  417. /* pagination */
  418. .pagination { margin-bottom:110px;
  419.     width:{select:posts width};}
  420. .pagination-box {
  421.     padding:4px;
  422.     text-align:center;
  423.     width:19px;
  424.     display:inline-block;
  425.     margin-right:0px;
  426.     border-radius:2px;
  427.     border:1px solid {color:borders};
  428.     background:{color:entry}; }
  429.    
  430. .pagination-box.current-page { background:{color:accent};
  431.     color:{color:entry}; }
  432.  
  433.  
  434.  
  435. /* header */
  436. .top-header {
  437.     top:0;
  438.     background:url('{image:header}') {color:header background} {select:vertical header position} {select:horizontal header position} scroll;
  439.     background-size:{select:header size};
  440.     position:absolute;
  441.     {block:ifnotrepeatheaderbackground}
  442.     background-repeat:no-repeat;
  443.     {/block:ifnotrepeatheaderbackground}
  444.     width:100%;
  445.     min-height:95px;
  446.     height:{text:header height}px;
  447.     {block:ifnotshowheader}
  448.     height:0;
  449.     display:none;
  450.     {/block:ifnotshowheader}
  451. }
  452.  
  453.  
  454. .header {
  455.     width:100%;
  456.     position:absolute;
  457.     z-index:99000;
  458.     top:{text:header height}px;
  459.     right:0;
  460.     box-shadow:0 0 3px {color:borders};
  461.     border-bottom:1px solid {color:borders};
  462.     border-top:1px solid {color:borders};
  463.     background:{color:entry};
  464.     {block:ifnotshowheader}
  465.     top:-1px;
  466.     position:fixed;
  467.     {/block:ifnotshowheader} }
  468.  
  469. .header .inner-header {
  470.     transition:.5s;
  471.     padding:25px; }
  472.  
  473. .header-title { font-size:14px;
  474.     display:table;
  475.     transition:.5s;
  476. }
  477.    
  478. #header-ava { width:45px;
  479.     border-radius:100px;
  480.     margin-right:12px;
  481.     transition:.5s;
  482.     {block:ifnotshowheader}
  483.     opacity:0;
  484.     {/block:ifnotshowheader}
  485.     display:table-cell;
  486.     vertical-align:middle;}
  487.  
  488. .blog-title { display:table-cell;
  489.     vertical-align:middle; }
  490.  
  491. .blog-title a { color:{color:fonts};
  492.     border-bottom:none; }
  493.  
  494. .blog-title a:hover { color:{color:accent}; }
  495. a i[class^="icon"] { transition:.5s; }
  496. a:hover i[class^="icon"] { color:{color:accent}; }
  497.    
  498. .sub-blog-title {
  499.     font-size:10.5px;
  500.     transition:.5s; }
  501.  
  502.  
  503. /* permalink */
  504. .perma {
  505.     display:table;
  506.     font:9px 'open sans', sans-serif;
  507.     padding:13px 18px;
  508.     color:{color:links};
  509.     text-align:left;
  510.     line-height:140%;
  511.     border-top:1px solid {color:borders};}
  512.  
  513. .perma i { font-size:12px!important; }
  514.  
  515. .perma a {
  516.     border-bottom:none;
  517.     margin-right:3px; }
  518.  
  519. .perma a.tag:after { content:';'; }
  520.  
  521. .perma-reblog {
  522.     font-size:11px;
  523.     display:table;
  524.     width:33px;
  525.     color:{color:links}; }
  526.    
  527. .perma-reblog a, .perma-reblog i, .notelabel i {
  528.     display:table-cell;
  529.     vertical-align:middle;
  530.     padding-right:8px;}
  531.    
  532. .perma-reblog a, .perma-reblog a:hover { border-bottom:none; }
  533.  
  534. i.icon-heart { font-size:11.5px!important;
  535.     padding-top:2px; }
  536.  
  537. /* draggable tags */
  538.  
  539. .post_tags, .post_tags a { color:{color:links}; }
  540. .post_tags {
  541.     width:calc({select:posts width} - 160px)!important;
  542.     position: relative;
  543.     display:block;
  544.     padding:5px 0;
  545.     white-space: nowrap;
  546.     overflow: hidden; }
  547.  
  548. .post_tags.draggable .post_tags_inner {
  549.     cursor: col-resize;
  550.     -webkit-touch-callout: none;
  551.     -webkit-user-select: none;
  552.     -khtml-user-select: none;
  553.     -moz-user-select: none;
  554.     -ms-user-select: none;
  555.     user-select: none; }
  556.  
  557. .post_tags_inner {
  558.     float: left;
  559.     position: relative;
  560.     display:table-cell;
  561.     vertical-align:middle;
  562.     padding: 0px 20px 0px 0; }
  563.  
  564. .post_tags a, .post_tags .post_tag {
  565.     color: {color:links};
  566.     font:10.5px 'work sans';
  567.     text-decoration: none;
  568.     margin-right: 3px;
  569.     text-transform:none; }
  570.  
  571.  
  572. .post_tags a:before { content: '#'; }
  573.  
  574. .post_tags a:hover,
  575. .post_tags .post_tag:hover,
  576. .post_tags a:focus,
  577. .post_tags .post_tag:focus,
  578. .post_tags a:active,
  579. .post_tags .post_tag:active { color: {color:accent}; }
  580.  
  581. .notelabel {
  582.     display: table-cell;
  583.     font: 10.5px 'work sans';
  584.     vertical-align: middle;
  585.     width: 130px!important;
  586.     box-shadow: -10px 0 10px {color:entry};
  587.     text-align: right;
  588.     z-index: 999;
  589.     position: relative; }
  590.  
  591. .notelabel i {
  592.     font-size:11.5px!important;
  593.     display:inline;
  594.     padding-left:1px;
  595.     padding-right:0;}
  596.  
  597. .notelabel a { margin-right:0!important;
  598.     color:{color:links}; }
  599.    
  600.  
  601. nav {
  602.     position:fixed;
  603.     top:0;
  604.     z-index:999999;
  605.     left:0;
  606.     width:250px;
  607.     height:100%;
  608.     color:{color:navigation fonts};
  609.     background:{color:navigation background};
  610.     border-right:1px solid {color:navigation borders};
  611.     box-shadow:0 0 3px {color:navigation borders};
  612.     margin:0 0 0 -255px;
  613.     transition:.5s; }
  614.    
  615. nav ul {
  616.     width:250px;
  617.     padding:0;
  618.     margin:0;
  619.     list-style:none;
  620.     overflow:hidden; }
  621.    
  622. nav li { margin:0; }
  623. nav ul a {
  624.     color:{color:navigation fonts};
  625.     text-decoration:none;
  626.     display:block;
  627.     text-transform:uppercase;
  628.     font-size:9.5px;
  629.     letter-spacing:.5px;
  630.     transition:.5s;
  631.     padding:10px 17px;
  632.     border-bottom:1px solid {color:navigation borders}; }
  633.  
  634. nav a:hover { background:rgba({rgbColor:entry},.05); }
  635.  
  636. .toggle-label {
  637.     display:block;
  638.     width:47px;
  639.     height:31px;
  640.     padding-top:16px;
  641.     color:{color:fonts};
  642.     text-align:center;
  643.     font-size:16px;
  644.     position:fixed;
  645.     top:24px;
  646.     left:24px;
  647.     background:{color:entry};
  648.     border-radius:100px;
  649.     transition:.5s;
  650.     z-index:999500; }
  651.  
  652. .toggle-label:hover {
  653.     cursor:crosshair, auto;
  654.     color:{color:accent}; }
  655.  
  656. input[type="checkbox"] { display:none; }
  657. input[type="checkbox"]:checked ~ nav { margin:0; }
  658. input[type="checkbox"]:checked ~ label.toggle-label {
  659.     left:200px;
  660.     top:10px;
  661.     background:transparent;
  662.     color:{color:navigation fonts};
  663.     z-index:9999999999; }
  664.  
  665. .nav-avatar { width:150px;
  666.     margin-top:45px;
  667.     display:inline-block;
  668.     transition:.5s;
  669.     border-radius:100px; }
  670.  
  671. .nav-title { font-size:16px;
  672.     text-align:center;
  673.     padding-top:15px;
  674.     display:block; }
  675.  
  676. /*.nav-title:first-letter, .blog-title:first-letter, .sub-blog-title:first-letter { text-transform:uppercase; }*/
  677.  
  678. .desc { padding:17px;
  679.     border-top:1px solid {color:navigation borders};
  680.     border-bottom:1px solid {color:navigation borders};
  681.     margin-top:20px;
  682.     max-height:150px;
  683.     overflow:auto; }
  684.  
  685. .desc a { color:{color:accent};
  686.     border-bottom:none;
  687. }
  688.  
  689.  
  690.  
  691. /* on scroll options */
  692. {block:ifshowheader}    
  693. .header.fix-it { position:fixed!important; top:0; display:block; }
  694. .sub-blog-title.hide-it { opacity:0; margin-bottom:-15px; }
  695. #header-ava.shorten-it { opacity:0; margin-right:0px;}
  696. .inner-header.cut-it { padding:10px 25px 8px; }
  697. .toggle-label.move-it { top:10px; }  
  698. .custom-controls.middle-it { top:22px; }
  699. {/block:ifshowheader}
  700.  
  701.  
  702.        
  703. .custom-controls { position:absolute;
  704.     right:25px;
  705.     top:37px;
  706.     text-transform:uppercase;
  707.     letter-spacing:.5px;
  708.     font-size:9.5px;
  709.     transition:.5s;
  710.     display:none;
  711.     {block:ifcustomtumblrcontrols}
  712.     display:block;
  713.     {/block:ifcustomtumblrcontrols} }
  714.  
  715. .goto-follow, .goto-dashboard {
  716.     display:table-cell;
  717.     width:100px; }
  718.    
  719. .control-title, .custom-controls i {
  720.     display:table-cell;
  721.     vertical-align:middle; }
  722.    
  723. .control-title { padding-right:4px; }
  724. .custom-controls i { font-size:12.5px; }
  725.  
  726. .custom-controls a {
  727.     text-decoration:none;
  728.     color:{color:fonts};
  729.     border-bottom:none; }
  730.        
  731.        
  732.              
  733.  
  734.  
  735. {CustomCSS}
  736.  
  737. </style>
  738. </head>
  739. <body>
  740.  
  741. <div class="top-header"></div>
  742.  
  743. <input type="checkbox" id="navigation" />
  744. <label for="navigation" class="toggle-label">
  745. <span class="icon-menu"></span>
  746. </label>
  747.  
  748. <nav>
  749.  
  750. <center><img src="{image:avatar}" class="nav-avatar"></center>
  751. <div class="nav-title">@{Name}</div>
  752.  
  753. <div class="desc">{Description}</div>
  754. <ul>
  755. <li><a href="/">index</a></li>
  756. <li><a href="/ask">message</a></li>
  757. <li><a href="{text:link 1 url}">{text:link 1 title}</a></li>
  758. <li><a href="{text:link 2 url}">{text:link 2 title}</a></li>
  759. <li><a href="{text:link 3 url}">{text:link 3 title}</a></li>
  760. </ul>
  761.    
  762. </nav>
  763.  
  764.  
  765.  
  766.  
  767. <div class="header">
  768.  
  769.     <div class="inner-header">
  770.        
  771.         <div class="header-title">
  772.             <img src="{image:avatar}" id="header-ava">
  773.             <div class="blog-title">
  774.                 <a href="/" title="index">{Name}</a>
  775.                 <div class="sub-blog-title">{text:header title}</div>
  776.             </div>
  777.         </div>
  778.        
  779.             <div class="custom-controls">
  780.                 <div class="goto-follow">
  781.                 <a href="//tumblr.com/follow/{name}">
  782.                     <div class="control-title">Follow</div>
  783.                     <i class="icon-show"></i>
  784.                 </a>
  785.                 </div>
  786.                
  787.                 <div class="goto-dashboard">
  788.                 <a href="//tumblr.com/dashboard">
  789.                     <div class="control-title">Dashboard</div>
  790.                     <i class="icon-stack"></i>
  791.                 </a>
  792.                 </div>    
  793.             </div>
  794.        
  795.     </div>
  796. </div>
  797.  
  798.  
  799. <div id="content">
  800.  
  801.  
  802.  
  803. {block:Posts}
  804. <div class="entry">
  805.  
  806.         {block:Date}
  807.         {block:RebloggedFrom}
  808.         <div class="top-perma">
  809.        
  810.         <div class="via-on-post">
  811.         <a href="{ReblogRootURL}">
  812.         <img src="{ReblogRootPortraitURL-128}" id="viathis" align="left">
  813.         <div class="viatitle">{ReblogRootName}</div>
  814.         </a>
  815.         </div>
  816.        
  817.        
  818.         <div class="timestamps-on-post">
  819.         <a href="{Permalink}">
  820.         <div class="time-ago">{TimeAgo}</div>
  821.         <i class="icon-clock"></i>
  822.         </a>
  823.         </div>
  824.        
  825.         </div> <!-- /top perma -->
  826.         {/block:RebloggedFrom}
  827.        
  828.      
  829.         <div class="top-perma {block:RebloggedFrom}reblogged{/block:RebloggedFrom}">
  830.         <div class="via-on-post">
  831.         <a href="/">
  832.         <img src="{Favicon}" id="viathis" align="left">
  833.         <div class="viatitle">{Name}</div>
  834.         </a>
  835.         </div>
  836.        
  837.         <div class="timestamps-on-post">
  838.         <a href="{Permalink}">
  839.         <div class="time-ago">{TimeAgo}</div>
  840.         <i class="icon-clock"></i>
  841.         </a>
  842.         </div>
  843.        
  844.         </div><!-- /top perma -->
  845.         {/block:Date}
  846.  
  847.  
  848.         {block:Answer}
  849.         <div class="bodies answers">
  850.         <div id="askerportrait">
  851.         <img src="{AskerPortraitURL-128}">
  852.         </div>
  853.         <div class="answer-question">
  854.         {Asker} asked:
  855.         <div class="asker-question">{Question}</div>
  856.         </div>
  857.         </div>
  858.         <div class="my-answer">{Answer}</div>
  859.         {/block:Answer}
  860.  
  861.        
  862.         {block:Text}
  863.         <div class="bodies">
  864.         {block:Title}<div class="titles">{Title}</div>{/block:Title}
  865.         {Body}
  866.         </div>
  867.         {/block:Text}
  868.  
  869.  
  870.         {block:Quote}
  871.         <div class="bodies">
  872.         <div class="titles">{Quote}</div>
  873.         <p class="source">{Source}</p>
  874.         </div>
  875.         {/block:Quote}
  876.  
  877.  
  878.         {block:Photo}
  879.         <img src="{PhotoURL-HighRes}" id="photopost">
  880.         {block:IndexPage}
  881.         {block:IfShowCaptions}
  882.         {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  883.         {/block:IfShowCaptions}
  884.         {/block:IndexPage}
  885.         {block:PermalinkPage}
  886.         {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  887.         {/block:PermalinkPage}
  888.         {/block:Photo}
  889.  
  890.  
  891.         {block:Photoset}
  892. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  893.        
  894.         {block:IndexPage}
  895.         {block:IfShowCaptions}
  896.         {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  897.         {/block:IfShowCaptions}
  898.         {/block:IndexPage}
  899.         {block:PermalinkPage}
  900.         {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  901.         {/block:PermalinkPage}
  902.         {/block:Photoset}
  903.  
  904.  
  905.         {block:Video}
  906.         <div class="video">{Video-500}</div>      
  907.         {block:IndexPage}
  908.         {block:IfShowCaptions}
  909.         {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  910.         {/block:IfShowCaptions}
  911.         {/block:IndexPage}
  912.         {block:PermalinkPage}
  913.         {block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
  914.         {/block:PermalinkPage}
  915.         {/block:Video}
  916.  
  917.  
  918.         {block:Link}
  919.         <div class="bodies">
  920.         <a href="{URL}" class="titles">{Name}</a>
  921.         </div>
  922.         {/block:Link}
  923.  
  924.  
  925.  
  926.         {block:Audio}
  927.         <div class="audio-box">
  928.         {block:AudioEmbed}
  929.         <div class="a-emb">
  930.         {AudioEmbed}
  931.         </div>
  932.         {/block:AudioEmbed}
  933.    
  934.         <div id="audio-content">
  935.             {block:AudioPlayer}
  936.             <div class="audioplayer-outer">
  937.                 <div class="audioplayer-inner">
  938.                     {AudioPlayerWhite}
  939.                 </div>
  940.             </div>
  941.             {/block:AudioPlayer}
  942.        
  943.             <div class="audio-info"
  944.          {block:AudioEmbed}id="audio-em"{/block:AudioEmbed}>
  945.                 {block:Artist}<b>{Artist}</b>{/block:Artist}
  946.                 {block:TrackName}{TrackName}{/block:TrackName}
  947.             </div>
  948.        
  949.         </div>
  950.         </div> <!-- /audio-box -->
  951.         {/block:Audio}
  952.  
  953.  
  954.         {block:Chat}
  955.         {block:Title}
  956.         <div class="bodies" style="padding-bottom:0;">
  957.         <div class="titles">{Title}</div>
  958.         </div>
  959.         {/block:Title}
  960.         {block:Lines}<div class="chat{Alt}">
  961.         {block:Label}<b>{Label}</b>{/block:Label}<br>
  962.         {Line}
  963.         </div>{/block:Lines}
  964.         {/block:Chat}
  965.  
  966.  
  967.         {block:ContentSource}
  968.         <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  969.        width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  970.        {/block:SourceLogo}
  971.        {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  972.         {/block:ContentSource}
  973.         {block:ReblogParent}{/block:ReblogParent}
  974.  
  975.         {block:Date}
  976.         <div class="perma">
  977.             <div class="perma-reblog">
  978.                 <div class="like">
  979.                     {LikeButton size="14"}
  980.                     <i class="icon-heart"></i>
  981.                 </div> <!-- /like -->
  982.                
  983.                 <a href="{ReblogURL}" class="icon-repeat"></a>
  984.                
  985.                 <div class="post_tags draggable">
  986.                     <div class="post_tags_inner">
  987.                         {block:HasTags}
  988.                         {block:Tags}
  989.                         <a href="{TagURL}">{Tag}</a>
  990.                         {/block:Tags}
  991.                         {/block:HasTags}
  992.                     </div>
  993.                 </div>
  994.             </div> <!-- /perma-reblog -->
  995.            
  996.                 <div class="notelabel">
  997.                     <a href="{Permalink}">
  998.                     {FormattedNoteCount}
  999.                     <i class="icon-ribbon"></i>
  1000.                     </a>
  1001.                 </div>
  1002.                
  1003.         </div> <!-- /perma -->
  1004.         {/block:Date}
  1005.        
  1006.        
  1007.         </div> <!-- /entry -->
  1008.        
  1009.        
  1010.         {block:PermalinkPage}
  1011.             {block:PostNotes}
  1012.             <div class="entry post-notes">{PostNotes}</div>
  1013.             {/block:PostNotes}
  1014.         {/block:PermalinkPage}
  1015.  
  1016. {/block:Posts}
  1017.  
  1018. {block:Pagination}
  1019.         <div class="pagination">
  1020.         {block:PreviousPage}
  1021.         <a href="{PreviousPage}" class="pagination-box">
  1022.             &lsaquo;
  1023.         </a>
  1024.         {/block:PreviousPage}
  1025.         {block:JumpPagination length="3"}
  1026.         {block:CurrentPage}
  1027.         <span class="pagination-box current-page">{PageNumber}</span>
  1028.         {/block:CurrentPage}
  1029.         {block:JumpPage}
  1030.         <a href="{URL}" class="pagination-box">{PageNumber}</a>
  1031.         {/block:JumpPage}
  1032.         {/block:JumpPagination}
  1033.         {block:NextPage}
  1034.         <a href="{NextPage}" class="pagination-box">
  1035.             &rsaquo;
  1036.         </a>
  1037.         {/block:NextPage}
  1038.         </div>
  1039. {/block:Pagination}
  1040.  
  1041. </div> <!-- /content -->
  1042.  
  1043. <a href="//leopardraws.tumblr.com" id="credits" title="theme"></a>  
  1044.  
  1045. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1046. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  1047. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1048.  
  1049. <script>
  1050.     $('#label').on('click', function() {
  1051.     if ($('.header-title').css('opacity') == 0) $('.header-title').css('opacity', 1);
  1052.     else $('.header-title').css('opacity', 0);
  1053. });
  1054. </script>
  1055.  
  1056. <script>
  1057. $(document).ready(function() {
  1058.     var $headerheight = $(".top-header").height();
  1059.     var $window = $(window),
  1060.       $header = $('.header'),
  1061.       $headerpadding = $('.inner-header'),
  1062.       $headeravatar = $('#header-ava'),
  1063.       $headersubtitle = $('.sub-blog-title'),
  1064.       $headerlabel = $('label.toggle-label'),
  1065.       $headercustom = $('.custom-controls'),
  1066.       elTop = $header.offset().top;
  1067.  
  1068.   $window.scroll(function() {
  1069. $header.toggleClass('fix-it', $window.scrollTop() > $headerheight);
  1070. $headeravatar.toggleClass('shorten-it', $window.scrollTop() > $headerheight);
  1071. $headerpadding.toggleClass('cut-it', $window.scrollTop() > $headerheight);
  1072. $headersubtitle.toggleClass('hide-it', $window.scrollTop() > $headerheight);
  1073. $headerlabel.toggleClass('move-it', $window.scrollTop() > $headerheight);
  1074. $headercustom.toggleClass('middle-it', $window.scrollTop() > $headerheight);
  1075.  
  1076.      
  1077.   });
  1078. });
  1079. </script>
  1080.  
  1081.  
  1082.  
  1083.  
  1084. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1085. <script>
  1086. (function($){
  1087. $(document).ready(function(){
  1088. $("[title],a[title],img[title]").style_my_tooltips({
  1089.     tip_follows_cursor:true,
  1090.     tip_delay_time:35,
  1091.     tip_fade_speed:100,
  1092.     attribute:"title"
  1093. });
  1094. });
  1095. })(jQuery);
  1096. </script>
  1097.  
  1098. <script>
  1099.  
  1100. $(document).ready(function(){
  1101. $(".post_tags_inner").draggable({
  1102.   axis : "x",
  1103.   scroll: false,
  1104.   stop: function() {
  1105.     var __left = $(this).css("left").replace(/[^-\d\.]/g, '');
  1106.     if(__left > 0){
  1107.     $(this).animate({left: 0}, 400, 'easeOutExpo');
  1108.     }
  1109.     var __width = $(this).outerWidth();
  1110.     var __parentWidth = $(".post_tags.draggable").outerWidth();
  1111.     if(__width > __parentWidth) {
  1112.     if(__left < __parentWidth-__width){
  1113.      $(this).animate({left: __parentWidth-__width}, 400, 'easeOutExpo');
  1114.    }
  1115.    } else {
  1116.    $(this).animate({left: 0}, 400, 'easeOutExpo');
  1117.    }
  1118.  }
  1119. });
  1120. });
  1121. </script>
  1122.  
  1123.  
  1124. <script src="//static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  1125. <script>
  1126. $(document).ready(function(){
  1127.     $('.entry').unnest({
  1128.     yourCaption: ".captions",
  1129.     wrapName: ".tumblr_parent",
  1130.     newCaptionUsername: true,
  1131.     originalPostCaptionUsername: true,
  1132.     tumblrAvatars: true,
  1133.     tumblrAvatarClass: ".caption-ava",
  1134.     usernameColon: false
  1135. });
  1136. });
  1137. </script>
  1138.  
  1139.  
  1140. <!-- pxu ph -->
  1141. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js">
  1142. </script>
  1143.  
  1144. <script type="text/javascript">
  1145. $(document).ready(function() {
  1146.     $('.photo-slideshow').pxuPhotoset({
  1147.     'ligthbox'  : false,
  1148.     'highRes'   : true,
  1149.     'rounded'   : false,
  1150.     'exif'      : false,
  1151.     'captions'  : false,
  1152.     'gutter'    : '1px',
  1153.     'photoset'  : '.photo-slideshow',
  1154.     'photoWrap' : '.photo-data',
  1155.     'photo'     : '.pxu-photo'
  1156.     }, function() {
  1157.         // callback
  1158.     });
  1159. });
  1160. </script>
  1161.  
  1162. <!--<script type="text/javascript">-->
  1163. <!--$(document).ready(function(){-->
  1164. <!--$(".hide").hide();-->
  1165. <!--$(".more").click(function(){-->
  1166. <!--$(this).next(".hide").slideToggle('slow');-->
  1167. <!--}); });-->
  1168. <!--</script>-->
  1169.  
  1170.  
  1171. </html>
Advertisement
Add Comment
Please, Sign In to add comment