API tools faq
paste
Advertisement
felinum

bakovia (multicolumn)

felinum
Feb 18th, 2017
15,940
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 45.23 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7.  
  8. Theme «bakovia» by felinum
  9.  
  10.  
  11. Rules:
  12.  
  13. 1. Don't implement parts of my code into your themes w/o permission.
  14. 2. Don't claim any part of the code as your own.
  15. 3. Don't redistribute it on other sites.
  16. 4. Leave the credit intact and visible (don't move it to secondary pages).
  17. 5. You may edit the theme, but not beyond recognition.
  18.  
  19.  
  20. Credits:
  21.  
  22. - Unnest Tumblr Captions: @neothm & @magnusthemes (http://neothm.com/post/148902138319/)
  23. - Pixel Union Photoset: Pixel Union (https://github.com/PixelUnion/Extended-Tumblr-Photoset)
  24. - Infinite Scroll: Paul Irish (https://github.com/infinite-scroll/infinite-scroll)
  25. - Video Resizing: @ shythemes (http://shythemes.tumblr.com/post/134536748863/)
  26. - Photo Lightbox: @ shythemes (http://shythemes.tumblr.com/post/140444996328/)
  27. - Styled Tooltips: Manos Malihutsakis (http://manos.malihu.gr/tuts/style-my-tooltips.html)
  28. - Masonry: David DeSandro (http://masonry.desandro.com/)
  29. - Like Button with infinite scroll: @magnusthemes (http://magnusthemes.tumblr.com/post/132530444620)
  30. - Icons: elegantthemes (https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website)
  31.  
  32.  
  33. -->  
  34.            
  35.        
  36.     <title>{Title}</title>
  37.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  38.     {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  39.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  40.  
  41.     <link href='https://fonts.googleapis.com/css?family=Chivo:400,400i,700,700i|Work+Sans:400,700|Karla:400,400i,700,700i|Roboto:400,400i,700,700i|Hind:400,700|Lato:400,400i,700,700i|Muli:400,400i,700,700i|Fira+Sans:400,400i,700,700i|Space+Mono|Inconsolata:400,700|Source+Code+Pro:400,700|Eczar:400,700|PT+Serif:400,400i,700,700i|Merriweather:400,400i,700,700i|Playfair+Display:400,400i,700,700i|Cardo:400,400i,700' rel='stylesheet' type='text/css'>
  42.  
  43.     <link rel="stylesheet" href="http://static.tumblr.com/0cdn90j/6tsok76o0/stylefel.css"><link rel="stylesheet" href="http://static.tumblr.com/0cdn90j/Sk9o7br1a/micaelis.css"><link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  44.  
  45.     <meta name="image:Background" content=""/>
  46.     <meta name="image:Sidebar Img" content="http://static.tumblr.com/96ca88e16d3d23cc748e23cfee426867/0cdn90j/DL4oljehv/tumblr_static_3evshrlqj9c00wogs4gw4sskw.png"/>
  47.    
  48.     <meta name="color:Background" content="#fff"/>
  49.     <meta name="color:Text" content="#6d6d6d"/>
  50.     <meta name="color:Link" content="#000"/>
  51.     <meta name="color:Link Hover" content="#b8a6ac"/>
  52.     <meta name="color:Post BG" content="#fff"/>
  53.     <meta name="color:Post Border" content="#e5e5e5"/>
  54.     <meta name="color:Italic" content="#a56c8e"/>
  55.     <meta name="color:Bold" content="#646a73"/>
  56.  
  57.     <meta name="color:Sidebar BG" content="#fff"/>
  58.     <meta name="color:Title" content="#000"/>
  59.     <meta name="color:Title Hover" content="#333333"/>
  60.     <meta name="color:Subtitle" content="#df728a"/>
  61.     <meta name="color:Title Hover Bar" content="#f8e7ef"/>
  62.     <meta name="color:Nav Icons" content="#000"/>
  63.     <meta name="color:Nav Icons Hover" content="#e997c1"/>
  64.     <meta name="color:Nav Links" content="#000"/>
  65.     <meta name="color:Nav Links Hover" content="#000"/>
  66.     <meta name="color:Search Box BG" content="#f8f8f8"/>
  67.     <meta name="color:Search Box Border" content="#f4f4f4"/>
  68.     <meta name="color:Search Box Placeholder" content="#b0b0b0"/>
  69.  
  70.     <meta name="color:Post Info" content="#b0b0b0"/>
  71.     <meta name="color:Post Info Hover" content="#ebbad6"/>
  72.     <meta name="color:Tags" content="#e7dde0"/>
  73.     <meta name="color:Tags Hover" content="#2b2b2b"/>
  74.     <meta name="color:LikeReblog Buttons" content="#a5a5a5"/>
  75.     <meta name="color:Like Reblog Buttons Hover" content="#f1bad9"/>
  76.     <meta name="color:Like Button Liked" content="#e997c8"/>
  77.  
  78.     <meta name="color:Blockquote Border" content="#fff"/>
  79.     <meta name="color:Text Post Title" content="#000"/>
  80.     <meta name="color:Question" content="#000"/>
  81.     <meta name="color:Asker" content="#000"/>
  82.     <meta name="color:Quote" content="#333"/>
  83.     <meta name="color:Quote Source" content="#000"/>
  84.     <meta name="color:Chat Label" content="#000"/>
  85.     <meta name="color:Track Info" content="#000"/>
  86.    
  87.     <meta name="color:Back to Top Icon" content="#575757"/>
  88.     <meta name="color:Back to Top Icon Hover" content="#e997bf"/>
  89.     <meta name="color:Selection BG" content="#f8dced"/>
  90.     <meta name="color:Selection Text" content="#000"/>
  91.     <meta name="color:Tooltip Text" content="#7e7e7e"/>
  92.     <meta name="color:Tooltip BG" content="#fff"/>
  93.     <meta name="color:Tooltip Border" content="#f6f6f6"/>
  94.    
  95.     <meta name="select:Body Font Size" content="10" title="10px"/>
  96.     <meta name="select:Body Font Size" content="11" title="11px"/>
  97.     <meta name="select:Body Font Size" content="12" title="12px"/>
  98.     <meta name="select:Body Font Size" content="13" title="13px"/>
  99.    
  100.     <meta name="select:Body Font Family" content="Chivo" title="Chivo"/>
  101.     <meta name="select:Body Font Family" content="Work Sans" title="Work Sans"/>
  102.     <meta name="select:Body Font Family" content="Karla" title="Karla">
  103.     <meta name="select:Body Font Family" content="Roboto" title="Roboto"/>
  104.     <meta name="select:Body Font Family" content="Hind" title="Hind"/>
  105.     <meta name="select:Body Font Family" content="Lato" title="Lato"/>
  106.     <meta name="select:Body Font Family" content="Muli" title="Muli"/>
  107.     <meta name="select:Body Font Family" content="Fira Sans" title="Fira Sans"/>
  108.     <meta name="select:Body Font Family" content="Space Mono" title="Space Mono"/>
  109.     <meta name="select:Body Font Family" content="Inconsolata" title="Inconsolata"/>
  110.     <meta name="select:Body Font Family" content="Source Code Pro" title="Source Code Pro"/>
  111.     <meta name="select:Body Font Family" content="Eczar" title="Eczar"/>
  112.     <meta name="select:Body Font Family" content="PT Serif" title="PT Serif"/>
  113.     <meta name="select:Body Font Family" content="Merriweather" title="Merriweather"/>
  114.     <meta name="select:Body Font Family" content="Cardo" title="Cardo"/>
  115.     <meta name="select:Body Font Family" content="Playfair Display" title="Playfair Display">
  116.    
  117.     <meta name="select:SB Image Shape" content="4" title="rounded corners"/>
  118.     <meta name="select:SB Image Shape" content="30" title="round"/>
  119.     <meta name="select:SB Image Shape" content="0" title="square"/>
  120.    
  121.     <meta name="select:Caption Image Size" content="24" title="24px"/>
  122.     <meta name="select:Caption Image Size" content="18" title="18px"/>
  123.     <meta name="select:Caption Image Size" content="30" title="30px"/>
  124.    
  125.     <meta name="select:Caption Image Shape" content="9" title="rounded corners"/>
  126.     <meta name="select:Caption Image Shape" content="50" title="round"/>
  127.     <meta name="select:Caption Image Shape" content="0" title="square"/>
  128.    
  129.     <meta name="select:Audio Image Shape" content="4" title="rounded corners"/>
  130.     <meta name="select:Audio Image Shape" content="25" title="round"/>
  131.     <meta name="select:Audio Image Shape" content="0" title="square"/>
  132.    
  133.     <meta name="select:Photoset Gutter" content="2" title="2px"/>
  134.     <meta name="select:Photoset Gutter" content="0" title="0px"/>
  135.     <meta name="select:Photoset Gutter" content="1" title="1px"/>
  136.     <meta name="select:Photoset Gutter" content="3" title="3px"/>
  137.     <meta name="select:Photoset Gutter" content="4" title="4px"/>
  138.    
  139.     <meta name="select:Search Bar" content="top" title="top"/>
  140.     <meta name="select:Search Bar" content="bottom" title="bottom"/>
  141.    
  142.     <meta name="select:Controls" content=".4" title="gray"/>
  143.     <meta name="select:Controls" content="1" title="black"/>
  144.  
  145.     <meta name="if:Infinite Scroll" content="0"/>
  146.     <meta name="if:Rounded Post Corners" content="0"/>
  147.     <meta name="if:Post Shadow" content="0"/>
  148.     <meta name="if:Post Shadow on Hover" content="1"/>
  149.     <meta name="if:Post Border" content="0"/>
  150.     <meta name="if:Subtitle Animation" content="1"/>
  151.     <meta name="if:Subtitle on Hover" content="0"/>
  152.     <meta name="if:Top Caption" content="1"/>
  153.     <meta name="if:Bottom Caption" content="0"/>
  154.     <meta name="if:Tiny Cursor White" content="1"/>
  155.     <meta name="if:Tiny Cursor Black" content="0"/>
  156.     <meta name="if:Fade In On Refresh" content="1"/>
  157.    
  158.     <meta name="text:Subtitle" content="subtitle must be shorter than title"/>
  159.     <meta name="text:Post Size" content="300"/>
  160.     <meta name="text:Permalink Post Size" content="540"/>
  161.     <meta name="text:Number of Columns" content="1"/>
  162.     <meta name="text:Post Side Margin" content="20"/>
  163.     <meta name="text:Post Padding" content="0"/>
  164.     <meta name="text:Post Bottom Margin" content="100"/>
  165.    
  166.     <meta name="text:Link 1" content="link 1"/>
  167.     <meta name="text:Link 1 URL" content="/"/>
  168.     <meta name="text:Link 2" content="link 2"/>
  169.     <meta name="text:Link 2 URL" content="/url"/>
  170.     <meta name="text:Link 3" content="link 3"/>
  171.     <meta name="text:Link 3 URL" content="/url"/>
  172.     <meta name="text:Link 4" content="link 4"/>
  173.     <meta name="text:Link 4 URL" content="/url"/>
  174.     <meta name="text:Link 5" content="link 5"/>
  175.     <meta name="text:Link 5 URL" content="/url"/>
  176.     <meta name="text:Link 6" content="link 6"/>
  177.     <meta name="text:Link 6 URL" content="/url"/>
  178.  
  179.    
  180.  
  181.     <style type="text/css">
  182.    
  183.     /*  general  */
  184.    
  185.     *, *:hover {transition:.2s;}
  186.    
  187.     body {
  188.         opacity:1;
  189.         transition:.5s opacity;
  190.         font:{select:Body Font Size}px {select:Body Font Family}, sans-serif;
  191.         color:{color:Text};
  192.         background:{color:Background} url('{image:Background}') repeat fixed center;
  193.     }
  194.    
  195.     body, a, a:hover {
  196.         {block:ifTinyCursorWhite}cursor:url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto{/block:ifTinyCursorWhite}
  197.         {block:ifTinyCursorBlack}cursor:url(http://media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto{/block:ifTinyCursorBlack}
  198.     }
  199.    
  200.     aside a, .caption a {
  201.         {block:ifTinyCursorWhite}cursor:url(http://static.tumblr.com/0cdn90j/iXHoix7hx/cursorwhite.png), auto!important{/block:ifTinyCursorWhite}
  202.     }
  203.    
  204.     body.fade-out {opacity:0; transition:none;}
  205.    
  206.     ::-webkit-scrollbar {width:11px; height:11px;}
  207.     ::-webkit-scrollbar-track {border:5px solid #f8f8f8; background-color:#eee;}
  208.     ::-webkit-scrollbar-thumb {
  209.         border:5px solid rgba(245, 246, 248, 0);
  210.         background-clip:padding-box;
  211.         background-color:rgba(0, 0, 0, 1);
  212.     }
  213.    
  214.     #s-m-t-tooltip {
  215.         max-width:300px;
  216.         margin:7px 14px 7px 12px;
  217.         padding:5px;
  218.         z-index:999999999999999999;
  219.         background-color:{color:Tooltip BG};
  220.         color:{color:Tooltip Text};
  221.         border:1px solid {color:Tooltip Border};
  222.         border-radius:3px;
  223.     }
  224.    
  225.     .tmblr-iframe, #tumblr_controls {
  226.         position:fixed;
  227.         top:10px!important;
  228.         opacity:{select:Controls};
  229.         -webkit-filter: invert(100%);
  230.             -moz-filter:invert(100%);
  231.              -ms-filter:invert(100%);
  232.               -o-filter:invert(100%);
  233.                  filter:invert(100%);
  234.     }
  235.    
  236.     .tmblr-iframe:hover {opacity:.7;}
  237.  
  238.     ::selection {background-color:{color:Selection BG}; color:{color:Selection Text};}
  239.     ::-moz-selection {background-color:{color:Selection BG}; color:{color:Selection Text};}
  240.  
  241.     a {color:{color:Link}; text-decoration:none;}
  242.     a:hover {color:{color:Link Hover}; text-decoration:none;}
  243.  
  244.     pre {
  245.         font-family:inherit !important;
  246.         white-space:pre-wrap;      
  247.         white-space:-moz-pre-wrap;  
  248.         white-space:-pre-wrap;      
  249.         white-space:-o-pre-wrap;  
  250.         word-wrap:break-word;      
  251.     }
  252.    
  253.     i, em {color:{color:Italic};}
  254.     b, strong {color:{color:Bold};}
  255.    
  256.     h6, small, sup, sub {font-size:1em;}
  257.     h4, h5, h6 {margin:6px 0;}
  258.     h5 {font-size:1.1em;}
  259.     h4, big {font-size:1.2em;}
  260.     h3 {font-size:1.3em;}
  261.     h2 {font-size:1.4em;}
  262.     h1 {font-size:1.5em;}
  263.    
  264.     blockquote {
  265.         margin:0;
  266.         padding:0 10px;
  267.         border-left:1px solid {color:Blockquote Border};
  268.     }
  269.    
  270.     hr {border:1px solid {color:Blockquote Border};}
  271.    
  272.     ul {list-style-type:none; margin:0 0 0 -30px;}
  273.     ul > li:not(.like):not(.reblog):not(.line):before {content:'>'; margin-right:10px;}
  274.     ul > li li:before {margin-left:10px;}
  275.     ol {margin-left:-20px;}
  276.     ol li {padding-left:5px;}
  277.    
  278.     img {max-width:100%; height:auto;}
  279.    
  280.    /*    posts    */
  281.    
  282.     #posts_container {
  283.         margin-left:320px;
  284.         margin-top:50px;
  285.         {block:Permalink}margin-top:60px;{/block:Permalink}
  286.         {block:IndexPage}width:calc(({text:Post Size}px - 4px + 2 * ({text:Post Padding}px + {text:Post Side Margin}px {block:ifPostBorder}+ 1px{/block:ifPostBorder})) * {text:Number of Columns});{/block:IndexPage}
  287.         {block:Permalink}width:calc({text:Permalink Post Size}px + {text:Post Padding}px * 2 - 4px {block:ifPostBorder}+ 2px{/block:ifPostBorder});{/block:Permalink}
  288.     }
  289.    
  290.     .posts {
  291.         {block:IndexPage}
  292.             margin-left:{text:Post Side Margin}px;
  293.             margin-right:{text:Post Side Margin}px;
  294.         {/block:IndexPage}
  295.         margin-bottom:{text:Post Bottom Margin}px;
  296.         {block:Permalink}margin-bottom:100px;{/block:Permalink}
  297.         padding:0 {text:Post Padding}px;
  298.         padding-bottom:{text:Post Padding}px;
  299.         overflow-wrap:break-word;  
  300.         word-wrap:break-word;
  301.         background-color:{color:Post BG};
  302.         {block:ifPostShadow}
  303.             -webkit-box-shadow:-2px 2px 11px 0px rgba(227,227,227,.7);
  304.             -moz-box-shadow:-2px 2px 11px 0px rgba(227,227,227,.7);
  305.             box-shadow:-2px 2px 11px 0px rgba(227,227,227,.7);
  306.         {/block:ifPostShadow}
  307.         {block:ifPostBorder}border:1px solid {color:Post Border};{/block:ifPostBorder}
  308.         {block:ifRoundedPostCorners}border-radius:5px;{/block:ifRoundedPostCorners}
  309.     }
  310.    
  311.     .posts:hover {
  312.         {block:ifPostShadowonHover}
  313.             -webkit-box-shadow:-2px 2px 11px 0px rgba(227,227,227,.7);
  314.             -moz-box-shadow:-2px 2px 11px 0px rgba(227,227,227,.7);
  315.             box-shadow:-2px 2px 11px 0px rgba(227,227,227,.7);
  316.         {/block:ifPostShadowonHover}
  317.     }
  318.    
  319.     .vertebrae {
  320.         margin:auto;
  321.         overflow:hidden;
  322.         {block:Permalink}width:calc({text:Permalink Post Size}px - 4px);{/block:Permalink}
  323.         {block:IndexPage}width:calc({text:Post Size}px - 4px);{/block:IndexPage}
  324.         {block:ifRoundedPostCorners}border-radius:5px;border-top-left-radius:0px;border-top-right-radius:0px;{/block:ifRoundedPostCorners}
  325.     }
  326.    
  327.     .photo-slideshow .count-1, .pancake {
  328.         {block:Permalink}width:{text:Permalink Post Size}px;{/block:Permalink}
  329.         {block:IndexPage}width:{text:Post Size}px;{/block:IndexPage}
  330.     }
  331.    
  332.     .pancake a.dont {position:relative; top:5px;}
  333.    
  334.     .photo-slideshow {position:relative;}
  335.     .photo-slideshow .count-3 {max-width:177px; margin-bottom:calc({select:Photoset Gutter}px + 2px);}
  336.     .photo-slideshow .row:last-of-type .count-3 {margin-bottom:0 !important;}
  337.     .photo-slideshow .count-3:last-child {float:right;}
  338.     .photo-slideshow .count-3:nth-child(2) {
  339.         max-width:178px;
  340.         position:absolute;
  341.         left:50%;
  342.         transform:translateX(-50%);
  343.         -webkit-transform:translateX(-50%)
  344.     }
  345.  
  346.     .vignette, #vignette {opacity:0;}
  347.    
  348.     .lightbox-image, #tumblr_lightbox img {
  349.         box-shadow:none!important;
  350.         max-width:none;
  351.         padding:4px;
  352.         border:1px solid #eee!important;
  353.         border-radius:4px;
  354.     }
  355.    
  356.     .tmblr-lightbox, #tumblr_lightbox {
  357.         position:absolute;
  358.         z-index:99999999999999999999999999999!important;
  359.         background-color:rgba(255,255,255,.9)!important;        
  360.     }
  361.    
  362.     /*    caption / text   */
  363.    
  364.     .caption {margin:0 5px; line-height:2em;}
  365.    
  366.     a.read_more, .caption a {border-bottom:1px solid #f2f2f2;}
  367.     a.read_more:hover, .caption a:hover {border-bottom:1px solid #f0f0f0;}
  368.    
  369.     img.tumblr_avatar {
  370.         vertical-align:middle;
  371.         width:{select:Caption Image Size}px;
  372.         border-radius:{select:Caption Image Shape}%;
  373.     }
  374.    
  375.     .caption a.tumblr_blog, .caption a.tumblr_blog:hover {margin-left:7px; border:none;}
  376.    
  377.     .tumblr_parent p {padding-left:2px;}
  378.    
  379.     blockquote.tumblr_parent {padding:3px 3px 0px 3px; {block:ifBottomCaption}padding-top:10px;{/block:ifBottomCaption}border:none;}
  380.    
  381.     hr {border-top:1px solid #f6f6f6;}
  382.    
  383.     /*    text / link post    */
  384.    
  385.     .text_post_title, h1 {
  386.         margin:5px 10px;
  387.         font-size:1.5em;
  388.         font-weight:bold;
  389.         color:{color:Text Post Title};
  390.     }
  391.  
  392.     .text_post_title a {color:{color:Text Post Title};}
  393.     .text_post_title a:hover {color:{color:Link Hover};}
  394.    
  395.     /*    question    */
  396.    
  397.     .quest1 {padding-bottom:10px;}
  398.    
  399.     .let {
  400.         text-align:center;
  401.         font-weight:bold;
  402.         font-size:18px;
  403.         color:{color:Text Post Title};
  404.     }
  405.    
  406.     .let:first-of-type {padding-bottom:10px;}
  407.     .let:before {margin-left:-60px;}
  408.     .let:after {margin-left:10px;}
  409.     .let:before, .let:after {
  410.         position:absolute;
  411.         content:'';
  412.         width:50px;
  413.         margin-top:10px;
  414.         border-bottom:1px solid #f5f5f5;
  415.     }
  416.    
  417.     .question, .answer {line-height:2em; padding:0 10px;}
  418.    
  419.     .asker {text-align:right; margin:5px 15px 0 0;}
  420.     .asker a {color:{color:Asker};}
  421.     .asker a:hover {color:{color:Link Hover};}
  422.    
  423.     .answer p {margin-top:-5px;}
  424.     .answer blockquote {
  425.         background:#f7f7f7;
  426.         border-left:5px solid {color:Title Hover Bar};
  427.     }
  428.  
  429.     /*    quote    */
  430.    
  431.     .quote {color:{color:Quote}; padding:3px;}
  432.    
  433.     .quote::first-letter {
  434.         float:left;
  435.         padding:0 6px;
  436.         vertical-align:top;
  437.         font-weight:bold;
  438.         font-size:22px;
  439.     }
  440.    
  441.     .source {
  442.         padding:8px;
  443.         font-size:.9em;
  444.         font-weight:bold;
  445.         color:{color:Quote Source};
  446.     }
  447.    
  448.     /*    chat    */
  449.    
  450.     .chat {margin-bottom:5px;}
  451.    
  452.     .label {color:{color:Chat Label}; font-size:1.1em;}
  453.    
  454.     .lin {margin-top:3px; padding:5px;}
  455.    
  456.     /*    audio player    */
  457.    
  458.     .audio_player_container {margin:1px; padding:7px;}
  459.    
  460.     .album_art {
  461.         position:absolute;
  462.         width:50px;
  463.         height:50px;
  464.         z-index:1;
  465.         background-color:{color:Post BG};
  466.     }
  467.    
  468.     .album_art img {max-width:100%;}
  469.     .album_art, .album_art img {border-radius:{select:Audio Image Shape}px;}
  470.    
  471.     .audio_player_bg_container {
  472.         position:absolute;
  473.         width:48px;
  474.         height:48px;
  475.         margin-top:1px;
  476.         margin-left:1px;
  477.         z-index:9;
  478.         overflow:hidden;
  479.         opacity:0;
  480.         background-color:white;
  481.         border-radius:calc({select:Audio Image Shape}px - 1px);
  482.     }
  483.    
  484.     .audio_player_container:hover .audio_player_bg_container {opacity:1;}
  485.    
  486.     .audio_player_bg {
  487.         margin-top:14px;
  488.         margin-left:-4px;
  489.     }
  490.  
  491.     .track_details_container {
  492.         display:table;
  493.         margin-left:60px;
  494.         padding:0 5px;
  495.         height:48px;
  496.         font-weight:bold;
  497.     }
  498.    
  499.     .track_details {display:table-cell; vertical-align:middle;}
  500.    
  501.     .track_name {
  502.         text-transform:lowercase;
  503.         font-size:14px;
  504.         color:{color:Track Info};
  505.     }
  506.    
  507.     .artist_name {
  508.         text-transform:uppercase;
  509.         letter-spacing:1px;
  510.         font-size:7px;
  511.         color:{color:Track Info};
  512.     }
  513.  
  514.     .tumblr_audio_player {
  515.         height:130px;
  516.         width:1000px;
  517.         -moz-transform:scale(0.70, 0.70);
  518.         -webkit-transform:scale(0.70, 0.70);
  519.         -o-transform:scale(0.70, 0.70);
  520.         -ms-transform:scale(0.70, 0.70);
  521.         transform:scale(0.70, 0.70);
  522.         -moz-transform-origin:top left;
  523.         -webkit-transform-origin:top left;
  524.         -o-transform-origin:top left;
  525.         -ms-transform-origin:top left;
  526.         transform-origin:top left;
  527.     }
  528.  
  529.     /*    post notes    */
  530.  
  531.     #n {
  532.         background-color:{color:Post BG};
  533.         padding:10px;
  534.         margin-top:-50px;
  535.         margin-bottom:50px;
  536.         -webkit-box-shadow:0px 2px 9px 0px rgba(227,227,227,.7);
  537.         -moz-box-shadow:0px 2px 9px 0px rgba(227,227,227,.7);
  538.         box-shadow:0px 2px 9px 0px rgba(227,227,227,.7);
  539.     }
  540.    
  541.     #nn {position:relative; height:140px; overflow:hidden;}
  542.    
  543.     #fade-out {
  544.         position: relative;
  545.         bottom: 120px;
  546.         height: 120px;
  547.         margin-bottom: -120px;
  548.         background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
  549.         background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
  550.     }
  551.    
  552.     #btn {float:right; margin:8px; color:{color:Text Post Title};}
  553.  
  554.     .notes {overflow-wrap:break-word; word-wrap:break-word;}
  555.    
  556.     .nott {
  557.         display:inline-block;
  558.         margin:5px;
  559.         font-size:1.5em;
  560.         font-weight:bold;
  561.         color:{color:Text Post Title};
  562.     }
  563.  
  564.     ol.notes {padding:2px 25px; list-style-type:none;}
  565.    
  566.     li.note {padding:6px 0;}
  567.    
  568.     ol.notes img.avatar {vertical-align:middle; border-radius:3px;}
  569.    
  570.     span.action {padding-left:7px;}
  571.    
  572.     #nn .retags, #nn .retags.error {
  573.         margin:2px 0 5px 0;
  574.         font-weight:bold;
  575.         font-size:.7em;
  576.         text-transform:uppercase;
  577.         letter-spacing:2px;
  578.     }
  579.    
  580.     #nn .retags a:hover, #nn .retags.error {color:{color:Link Hover}!important;}
  581.    
  582.     ol.notes li.note .answer_content {font-style:italic; color:{color:Italic};}
  583.  
  584.     ol.notes li.note blockquote {
  585.         border-color:{color:Blockquote Border};
  586.         padding:0px 10px;
  587.         margin:7px 0px 0px 15px;
  588.     }
  589.  
  590.     ol.notes li.note blockquote a {text-decoration:none;}
  591.    
  592.     li.more_notes_link_container {
  593.         margin:10px 0;
  594.         list-style-type:none;
  595.         text-align:left;
  596.         font-size:1.4em;
  597.         border-bottom:1px solid #eee;
  598.     }
  599.    
  600.     /*    post info    */
  601.    
  602.     .post_info_container {
  603.         margin:10px;
  604.         {block:Permalink}padding-top:10px;{/block:Permalink}
  605.         padding-bottom:6px;
  606.        
  607.         font-weight:bold;
  608.         font-size:9px;
  609.         letter-spacing:1px;
  610.         border-bottom:1px solid #f5f5f5;
  611.     }
  612.    
  613.     .date {
  614.         display:inline-block;
  615.         {block:Permalink}width:calc({text:Permalink Post Size}px - 65px){/block:Permalink}
  616.         {block:IndexPage}width:calc({text:Post Size}px - 65px); white-space:nowrap; overflow:hidden;{/block:IndexPage}
  617.     }
  618.    
  619.     .date a {color:{color:Post Info};}
  620.     .date a:hover {color:{color:Post Info Hover};}
  621.    
  622.     .tags {margin-top:7px; {block:Permalink}padding-bottom:5px;{/block:Permalink}}
  623.     .tags a {color:{color:Tags};}
  624.     .tags a:hover {color:{color:Tags Hover};}
  625.    
  626.     .like_reblog {width:25px; float:right;}
  627.    
  628.     .control {
  629.         display:inline-block;
  630.         position:relative;
  631.         font-size:10px;
  632.         color:{color:LikeReblog Buttons};
  633.     }
  634.    
  635.     .control a {color:{color:LikeReblog Buttons};}
  636.    
  637.     .control .like_button:hover,
  638.     .control .reblog_button:hover {color:{color:Like Reblog Buttons Hover};}
  639.    
  640.     .control .like_button::before,
  641.     .control .reblog_button::before {display:block; line-height:1;}
  642.  
  643.     .like_button.liked {color:{color:Like Button Liked};}
  644.  
  645.     .like_button.liked:hover {color:{color:Like Button Liked};}
  646.  
  647.     .like_button iframe {
  648.         display:block;
  649.         position:absolute;
  650.         top:0;
  651.         right:0;
  652.         bottom:0;
  653.         left:0;
  654.         margin:0;
  655.         opacity:0;
  656.     }
  657.  
  658.     /*    sidebar    */
  659.    
  660.     aside {
  661.         width:280px;
  662.         height:100%;
  663.         position:fixed;
  664.         display:table;
  665.         top:0;
  666.         left:0;
  667.         text-align:center;
  668.         background:{color:Sidebar BG};
  669.         border-right:1px solid #eee;
  670.     }
  671.    
  672.     #sidebar {
  673.         display:table-cell;
  674.         vertical-align:middle;
  675.         padding:20px;
  676.     }
  677.    
  678.     /*    icon    */
  679.    
  680.     #sbimg {
  681.         margin:auto;
  682.         width:60px;
  683.         height:60px;
  684.         border-radius:{select:SB Image Shape}px;
  685.         border:2px solid white;
  686.         overflow:hidden;
  687.     }
  688.    
  689.     #sbimg img {
  690.         max-width:100%;
  691.         border-radius:{select:SB Image Shape}px;
  692.         -webkit-transition:opacity 1s, -webkit-transform 1s;
  693.         transition:opacity 1s, transform 1s
  694.     }
  695.  
  696.     #sbimg:hover img {
  697.         opacity:.8;
  698.         -webkit-transform:scale3d(1.2,1.2,1);
  699.         transform:scale3d(1.2,1.2,1);
  700.     }
  701.    
  702.     /*    title    */
  703.    
  704.     #sbtitle {padding:10px 0;}
  705.    
  706.     .hoveff {position:relative; line-height:1;}
  707.  
  708.     .title {
  709.         {block:ifSubtitleAnimation}padding:0 10px 20px;{/block:ifSubtitleAnimation}
  710.         font-size:17px;
  711.         -webkit-transition:color 0.5s;
  712.         transition:color 0.5s;
  713.     }
  714.    
  715.     a.title {color:{color:Title};}
  716.  
  717.     .title:hover {color:{color:Title Hover};}
  718.  
  719.     {block:ifSubtitleAnimation}
  720.     .title::before, .link::before {
  721.         content:'';
  722.         position:absolute;
  723.         height:24px;
  724.         top:50%;
  725.         z-index:-1;
  726.         background:{color:Title Hover Bar};
  727.         -webkit-transition:-webkit-transform 0.5s;
  728.         transition:transform 0.5s;
  729.     }
  730.    
  731.     .title::before {
  732.         width:45%;
  733.         margin-top:-22px;
  734.         left:28%;
  735.         -webkit-transform:rotate3d(0,0,1,45deg) scale3d(1,1,1);
  736.         transform:rotate3d(0,0,1,45deg) scale3d(1,1,1);
  737.         {block:ifSubtitleonHover}
  738.             -webkit-transform:rotate3d(0,0,1,45deg) scale3d(0,1,1);
  739.             transform:rotate3d(0,0,1,45deg) scale3d(0,1,1);
  740.         {/block:ifSubtitleonHover}
  741.     }
  742.    
  743.     .link::before {
  744.         width:10px;
  745.         margin-top:-12px;
  746.         left:35%;
  747.         -webkit-transform:rotate3d(0,0,1,45deg) scale3d(0,1,1);
  748.         transform:rotate3d(0,0,1,45deg) scale3d(0,1,1);
  749.     }
  750.  
  751.     #sidebar:hover .title::before, .link:hover::before {
  752.         -webkit-transform:rotate3d(0,0,1,45deg) scale3d(1,1,1);
  753.         transform:rotate3d(0,0,1,45deg) scale3d(1,1,1);
  754.     }
  755.  
  756.     .title h4 {
  757.         position:absolute;
  758.         right:10px;
  759.         bottom:3px;
  760.         font-weight:400;
  761.         opacity:1;
  762.         -webkit-transform:translate3d(0,0,0);
  763.         transform:translate3d(0,0,0);
  764.         {block:ifSubtitleonHover}
  765.             opacity:0;
  766.             -webkit-transform:translate3d(-10px,-10px,0);
  767.             transform:translate3d(-10px,-10px,0);
  768.         {/block:ifSubtitleonHover}
  769.         -webkit-transition:-webkit-transform 0.5s, opacity 0.5s;
  770.         transition:transform 0.5s, opacity 0.5s;
  771.     }
  772.  
  773.     #sidebar:hover h4 {
  774.         opacity:1;
  775.         -webkit-transform:translate3d(0,0,0);
  776.         transform:translate3d(0,0,0);
  777.     }
  778.     {/block:ifSubtitleAnimation}
  779.    
  780.     .title h4 {font-size:13px; color:{color:Subtitle};}
  781.    
  782.     #desc {padding:10px 0;}
  783.    
  784.     /*    navigation    */
  785.    
  786.     #nav {padding-top:15px;}
  787.    
  788.     .icon1 {padding-top:5px; }
  789.     .icon1:hover .icon3 span {color:{color:Nav Icons Hover};}
  790.    
  791.     .icon2 {
  792.         display:inline-block;
  793.         padding-right:5px;
  794.         width:45%;
  795.         vertical-align:middle;
  796.         text-align:right;
  797.     }
  798.    
  799.     .icon3 {display:inline-block; width:30px; text-align:center;}
  800.  
  801.     .icon {font-size:20px; color:{color:Nav Icons};}
  802.  
  803.     .linkcon {
  804.         display:inline-block;
  805.         margin-left:5px;
  806.         width:45%;
  807.         text-align:left;
  808.     }
  809.    
  810.     a.link {color:{color:Nav Links};}
  811.     a.link:hover {color:{color:Nav Links Hover};}
  812.    
  813.     /*    search box    */
  814.    
  815.     #search {
  816.         width:35%;
  817.         position:absolute;
  818.         {select:Search Bar}:22px;
  819.         margin:0 auto;
  820.         left:0;
  821.         right:0;
  822.         padding:2px 0 2px 6px;
  823.         text-align:left;
  824.         border:1px solid {color:Search Box Border};
  825.         border-radius:10px;
  826.         background:{color:Search Box BG};
  827.     }
  828.    
  829.     #sfm input {
  830.         width:90%;
  831.         border:none;
  832.         outline:none;
  833.         font-family:inherit;
  834.         font-size:9px;
  835.         background:{color:Search Box BG};
  836.     }
  837.    
  838.     ::-webkit-input-placeholder {color:{color:Search Box Placeholder};}
  839.     :-moz-placeholder {color:{color:Search Box Placeholder}; opacity:1;}
  840.     ::-moz-placeholder {color:{color:Search Box Placeholder}; opacity:1;}
  841.     :-ms-input-placeholder {color:{color:Search Box Placeholder};}
  842.    
  843.     /*    pagination    */
  844.    
  845.     #pagination {
  846.         position:absolute;
  847.         bottom:57px;
  848.         width:40%;
  849.         margin:0 auto;
  850.         left:0;
  851.         right:0;
  852.         text-align:center;
  853.     }
  854.    
  855.     #prev, #next, #top {display:inline-block;}
  856.     #prev a, #next a, #top a {
  857.         width:5px;
  858.         height:5px;
  859.         padding:3px 5px;
  860.     }
  861.    
  862.     .fa {font-size:9px; color:{color:Back to Top Icon};}
  863.     .fa:hover {color:{color:Back to Top Icon Hover};}
  864.     .icon-chevron-right, .icon-chevron-left {vertical-align:middle;}
  865.     .icon-chevron-down {color:black;}
  866.    
  867.     .fa:hover, a, a:hover, .control .like_button, .control .like_button:hover, .control .reblog_button:hover, .audio_player_bg_container, .audio_player_container:hover .audio_player_bg_container {transition-duration:.5s;}
  868.     .posts, .posts:hover, .tmblr-iframe, .tmblr-iframe:hover, .icon, .icon:hover, #n, #n:hover {transition:.3s;}
  869.    
  870.     #fel {
  871.         position:fixed;
  872.         right:10px;
  873.         bottom:10px;
  874.         width:30px;
  875.         z-index:999999999999999999999999999999999999999999;
  876.     }
  877.  
  878.     </style>
  879.  
  880. </head>
  881.  
  882. <body>
  883.  
  884. {block:ifFadeInOnRefresh}<script>document.body.className += ' fade-out';</script>{/block:ifFadeInOnRefresh}
  885.  
  886. <!-- sidebar -->
  887.  
  888. <aside>
  889.     <div id="sidebar">
  890.         <div id="sbimg"><a href="/"><img src="{image:Sidebar Img}"></a></div>
  891.         <div id="sbtitle"><h3><a class="hoveff title" href="/">{Title}<h4>{text:Subtitle}</h4></a></h3></div>
  892.         <div id="desc">{Description}</div>
  893.         <div id="nav">
  894.        
  895.             <!--
  896.            Use this list to add/change icons: elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
  897.            -->
  898.  
  899.  
  900.             <div class="icon1"><div class="icon2"><div class="icon3">
  901.                 <!-- replace profile-female with your new title -->
  902.                 <span class="icon-profile-female icon"></span>
  903.             </div></div><div class="linkcon"><a class="hoveff link" href="{text:Link 1 URL}">{text:Link 1}</a></div>
  904.             </div>
  905.  
  906.  
  907.             <div class="icon1"><div class="icon2"><div class="icon3">
  908.                 <!-- replace ribbon with your new title -->
  909.                 <span class="icon-ribbon icon"></span>
  910.             </div></div><div class="linkcon"><a class="hoveff link" href="{text:Link 2 URL}">{text:Link 2}</a></div>
  911.             </div>
  912.  
  913.            
  914.             <div class="icon1"><div class="icon2"><div class="icon3">
  915.                 <!-- replace key with your new title -->
  916.                 <span class="icon-key icon"></span>
  917.             </div></div><div class="linkcon"><a class="hoveff link" href="{text:Link 3 URL}">{text:Link 3}</a></div>
  918.             </div>
  919.  
  920.  
  921.             <div class="icon1"><div class="icon2"><div class="icon3">
  922.                 <!-- replace layers with your new title -->
  923.                 <span class="icon-layers icon"></span>
  924.             </div></div><div class="linkcon"><a class="hoveff link" href="{text:Link 4 URL}">{text:Link 4}</a></div>
  925.             </div>
  926.  
  927.  
  928.             <div class="icon1"><div class="icon2"><div class="icon3">
  929.                 <!-- replace anchor with your new title -->
  930.                 <span class="icon-anchor icon"></span>
  931.             </div></div><div class="linkcon"><a class="hoveff link" href="{text:Link 5 URL}">{text:Link 5}</a></div>
  932.             </div>
  933.  
  934.             <div class="icon1"><div class="icon2"><div class="icon3">
  935.                 <!-- replace cloud with your new title -->
  936.                 <span class="icon-cloud icon"></span>
  937.             </div></div><div class="linkcon"><a class="hoveff link" href="{text:Link 6 URL}">{text:Link 6}</a></div>
  938.             </div>
  939.            
  940.            
  941.             <div id="search"><script language="javascript">function send(){document.searchf.submit()}</script><form action="/search" method="get" id="sfm" name="searchf icon"><input type="text" placeholder="enter keyword..." name="q" value=""/></form></div>
  942.  
  943.         </div>
  944.    
  945.         {block:IfNotInfiniteScroll}
  946.             <div id="pagination">
  947.                 {block:Pagination}
  948.                     <div id="prev">{block:PreviousPage}<a href="{PreviousPage}" title="previous page"><span class="icon-chevron-left fa"></span></a>{/block:PreviousPage}</div>
  949.                     <div id="top"><a href="#" id="toTop"><span class="icon-chevron-up fa"></span></a></div>
  950.                     <div id="next">{block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage" title="next page"><span class="icon-chevron-right fa"></span></a>{/block:NextPage}</div>
  951.                 {/block:Pagination}
  952.             </div>
  953.         {/block:IfNotInfiniteScroll}  
  954.        
  955.         {block:ifInfiniteScroll}
  956.             <div class="navigation" id="navigation">
  957.                 {block:Pagination}
  958.                     {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  959.                     {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}
  960.                 {/block:Pagination}
  961.             </div>
  962.             <div id="pagination"><div id="top"><a href="#" id="toTop"><span class="icon-chevron-up fa"></span></a></div></div>
  963.         {/block:ifInfiniteScroll}
  964.        
  965.     </div>
  966. </aside>
  967.  
  968. <!-- posts -->
  969.  
  970.  
  971.      
  972. <div id="posts_container">
  973.  
  974. {block:Posts}
  975.     <div class="posts" id="{PostID}">
  976.         {block:Date}
  977.             <div class="post_info_container">
  978.                 <div class="date">
  979.                     <a href="{Permalink}" title="{TimeAgo}">{ShortMonth} {DayOfMonth},{Year}</a>
  980.                     {block:RebloggedFrom}
  981.                         / By <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
  982.                         {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!--<a href="{ReblogParentURL}">{ReblogParentName}</a>}-->
  983.                     {/block:RebloggedFrom}
  984.                     {block:NoteCount}/ {NoteCount}{/block:NoteCount}
  985.                     <div class="tags">{block:HasTags}<span class="icon-pricetags"></span>&nbsp;{block:Tags}<a href="{TagURL}">{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}</div>
  986.                 </div>
  987.                     <div class="like_reblog">
  988.                         {block:IndexPage}<div class="control reblog-control">{ReblogButton size="10" color="black"}</div>{/block:IndexPage}
  989.                         <div class="control like-control">{LikeButton size="10" color="black"}</div>
  990.                     </div>  
  991.             </div>
  992.         {/block:Date}
  993.        
  994.    
  995.         {block:Text}
  996.         <div class="vertebrae">
  997.             {block:Title}
  998.                 <div class="text_post_title"><a href="{Permalink}">{Title}</a></div>
  999.             {/block:Title}
  1000.             <div class="caption" style="padding:0 5px;">{Body}</div>
  1001.         </div>
  1002.         {/block:Text}
  1003.    
  1004.  
  1005.         {block:Link}
  1006.         <div class="vertebrae">
  1007.             <div class="text_post_title"><a href="{URL}">{Name}</a></div>
  1008.             <div class="caption">{block:Description}{Description}{/block:Description}</div>
  1009.         </div>
  1010.         {/block:Link}
  1011.  
  1012.  
  1013.         {block:Quote}
  1014.         <div class="vertebrae">
  1015.             <div class="quote">{Quote}</div>
  1016.             {block:Source}<div class="source">{Source}</div>{/block:Source}
  1017.         </div>
  1018.         {/block:Quote}
  1019.  
  1020.  
  1021.         {block:Chat}
  1022.         <div class="vertebrae">
  1023.             {block:Title}<div class="text_post_title">{Title}</div>{/block:Title}
  1024.             <ul class="chat">
  1025.                 {block:Lines}
  1026.                     <li class="line">
  1027.                         {block:Label}<span class="label">{Label}</span>{/block:Label}
  1028.                         <div class="lin">{Line}</div>
  1029.                     </li>
  1030.                 {/block:Lines}
  1031.             </ul>
  1032.         </div>
  1033.         {/block:Chat}
  1034.  
  1035.  
  1036.         {block:Answer}
  1037.         <div class="vertebrae">
  1038.             <div class="quest1">
  1039.                 <div class="let">Q</div>
  1040.                 <div class="question">{Question}</div>
  1041.                 <div class="asker">— {Asker}</div>
  1042.             </div>
  1043.             <div class="quest2">
  1044.                 <div class="let">A</div>
  1045.                 <div class="answer">{Answer}</div>
  1046.             </div>
  1047.             <div class="caption">{block:Caption}{Caption}{/block:Caption}</div>
  1048.         </div>
  1049.         {/block:Answer}
  1050.  
  1051.  
  1052.         {block:AudioPlayer}
  1053.         <div class="vertebrae">
  1054.             {block:ifTopCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifTopCaption}
  1055.             <div class="audio_player_container">
  1056.                 <div class="album_art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1057.                 <div class="audio_player_bg_container"><div class="audio_player_bg">{AudioPlayer}</div></div>
  1058.                 <div class="track_details_container">
  1059.                     <div class="track_details">
  1060.                         {block:TrackName}<span class="track_name">{TrackName}</span>{/block:TrackName}<br />
  1061.                         {block:Artist}<span class="artist_name">{Artist}</span>{/block:Artist}<br />
  1062.                     </div>
  1063.                 </div>
  1064.             </div>
  1065.             {block:ifBottomCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifBottomCaption}
  1066.         </div>
  1067.         {/block:AudioPlayer}
  1068.  
  1069.  
  1070.         {block:Photo}
  1071.         <div class="vertebrae">
  1072.             <div class="pancake">
  1073.                 {block:ifTopCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifTopCaption}
  1074.                 {LinkOpenTag}<a href="#" class="dont" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  1075.                 {block:ifBottomCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifBottomCaption}
  1076.             </div>
  1077.         </div>
  1078.         {/block:Photo}
  1079.  
  1080.  
  1081.         {block:Photoset}
  1082.         <div class="vertebrae">
  1083.             {block:ifTopCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifTopCaption}
  1084.             <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1085.                 {block:Photos}
  1086.                 <div class="photo-data">
  1087.                     <div class="pxu-photo">
  1088.                         <img src="{PhotoURL-500}"  width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1089.                     </div>
  1090.                     <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1091.                 </div>
  1092.                 {/block:Photos}
  1093.             </div>
  1094.             {block:ifBottomCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifBottomCaption}
  1095.         </div>
  1096.         {/block:Photoset}
  1097.        
  1098.        
  1099.         {block:Video}
  1100.         <div class="vertebrae">
  1101.             {block:ifTopCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifTopCaption}
  1102.             <div class="video">{Video-500}</div>
  1103.             {block:ifBottomCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifBottomCaption}
  1104.         </div>
  1105.         {/block:Video}
  1106.  
  1107.     </div>
  1108.    
  1109.     <!-- end posts -->
  1110.  
  1111.     {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  1112.    
  1113.     {block:Permalink}{block:Date}
  1114.     <div id="n">
  1115.         <div class="nott">Notes</div>
  1116.         <div id="btn"><a id="reveal"><span class="icon-chevron-down fa"></span></a></div>
  1117.         <div id="nn">{PostNotes}</div>
  1118.         <div id="fade-out"></div>
  1119.     </div>
  1120.     {/block:Date}{/block:Permalink}
  1121.    
  1122. {/block:Posts}
  1123. </div>
  1124. <!-- end posts container -->
  1125.  
  1126. <!-- scripts -->
  1127. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script><script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>{block:IndexPage}{block:ifInfiniteScroll}<script src="http://static.tumblr.com/0cdn90j/vsOo9wcfa/infinitescroll.js"></script>{/block:ifInfiniteScroll}<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>{/block:IndexPage}<div id="fel"><a href="http://felinum.tumblr.com" title="theme by felinum"><img src="http://static.tumblr.com/0cdn90j/0Xook74au/feli.svg"/></a></div><script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/fgfmpgh/Qqfkzalyi/jquery.scroll.pack.js"></script><script type="text/javascript" src="http://static.tumblr.com/fgfmpgh/7xukzalz8/jquery.easing.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
  1128.  
  1129. <script>
  1130.     $(document).ready(function(){
  1131.         $('.photo-slideshow').pxuPhotoset({
  1132.             lightbox:true,
  1133.             rounded:false,
  1134.             gutter:'{select:Photoset Gutter}px',
  1135.             photoset:'.photo-slideshow',
  1136.             photoWrap:'.photo-data',
  1137.             photo:'.pxu-photo'
  1138.         });
  1139.         $('.posts').unnest({
  1140.             yourCaption:'.caption',
  1141.             newCaptionUsername:false,
  1142.             originalPostCaptionUsername:false,
  1143.             tumblrAvatars:true,
  1144.             tumblrAvatarClass:'.tumblr_avatar',
  1145.             usernameColon:false
  1146.         });
  1147.         {block:IndexPage}
  1148.         var $container = $('#posts_container');
  1149.         $container.imagesLoaded(function() {
  1150.             $container.masonry({
  1151.                 itemSelector:'.posts',
  1152.             });
  1153.         });
  1154.         {block:ifInfiniteScroll}
  1155.         $container.infinitescroll({
  1156.             navSelector:'#navigation',
  1157.             nextSelector:'#navigation a#nextPage',
  1158.             itemSelector:'.posts',
  1159.             loadingImg:'',
  1160.             loadingText:'<em></em>',
  1161.             bufferPx:2000
  1162.         },
  1163.             function(newElements){
  1164.                 var $newElems = $(newElements).css({opacity:0});
  1165.                 resizeVideos();
  1166.                 var $newElemsIDs = $newElems.map(function(){
  1167.                     return this.id;
  1168.                 }).get();
  1169.                 $newElems.find('.photo-slideshow').pxuPhotoset({
  1170.                     lightbox:true,
  1171.                     rounded:false,
  1172.                     gutter:'{select:Photoset Gutter}px',
  1173.                     photoset:'.photo-slideshow',
  1174.                     photoWrap:'.photo-data',
  1175.                     photo:'.pxu-photo'
  1176.                 });
  1177.                 $newElems.unnest({
  1178.                     yourCaption:'.caption',
  1179.                     newCaptionUsername:false,
  1180.                     originalPostCaptionUsername:false,
  1181.                     tumblrAvatars:true,
  1182.                     tumblrAvatarClass:'.tumblr_avatar',
  1183.                     usernameColon:false
  1184.                 });
  1185.                 $newElems.imagesLoaded(function(){
  1186.                     $newElems.animate({opacity:1});
  1187.                     $container.masonry('appended', $newElems, true);
  1188.                     console.log($newElems, $newElemsIDs);
  1189.                     Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1190.                 });
  1191.             }
  1192.         );
  1193.         {/block:ifInfiniteScroll}
  1194.         {/block:IndexPage}
  1195.     });
  1196. </script>
  1197. <script>
  1198. $(function() {
  1199.     $('body').removeClass('fade-out');
  1200.     $('#toTop').scrollToTop({speed:1000,start:700});
  1201.     $('#btn').click(function(){
  1202.         $('#nn').animate({height: $('#nn').get(0).scrollHeight}, 100, function(){$(this).height('auto');});
  1203.         $('#fade-out').fadeOut();
  1204.         $('#btn').fadeOut();
  1205.     });
  1206. });
  1207. </script>
  1208. <script src="http://static.tumblr.com/0cdn90j/glvnidntk/jquery.style-my-tooltips.js"></script>
  1209. <script>
  1210.     (function($){
  1211.         $(document).ready(function(){
  1212.             $("[title]").style_my_tooltips({
  1213.                 tip_follows_cursor:true,
  1214.                 tip_delay_time:0,
  1215.                 tip_fade_speed:0,
  1216.                 attribute:"title"
  1217.             });
  1218.         });
  1219.     })(jQuery);
  1220. </script>
  1221.  
  1222. </body>
  1223.  
  1224. </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!