API tools faq
paste
Advertisement
felinum

pipedream

felinum
May 23rd, 2017
36,564
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 38.93 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6. <!--
  7.  
  8. Theme «pipedream» by felinum
  9.  
  10.  
  11. Rules:
  12.  
  13. 1. Don't claim any part of the code as your own.
  14. 2. Don't redistribute it on other sites.
  15. 3. Don't implement parts of my code into your themes w/o permission.
  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.  
  21. Credits:
  22.  
  23.  - Unnest Tumblr Captions: @neothm & @magnusthemes (http://neothm.com/post/148902138319/)
  24.  - Pixel Union Photoset: Pixel Union (https://github.com/PixelUnion/Extended-Tumblr-Photoset)
  25.  - Infinite Scroll: Paul Irish (https://github.com/infinite-scroll/infinite-scroll)
  26.  - Video Resizing: @ shythemes (http://shythemes.tumblr.com/post/134536748863/)
  27.  - Photo Lightbox: @ shythemes (http://shythemes.tumblr.com/post/140444996328/)
  28.  - Styled Tooltips: Manos Malihutsakis (http://manos.malihu.gr/tuts/style-my-tooltips.html)
  29.  - Masonry: David DeSandro (http://masonry.desandro.com/)
  30.  - Like Button with infinite scroll: @magnusthemes (http://magnusthemes.tumblr.com/post/132530444620)
  31.  
  32. -->
  33.                    
  34.        
  35.     <title>{Title}</title>
  36.     <link rel="shortcut icon" href="{Favicon}">
  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.     <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,700|Lato|Chivo|Karla|Muli|Roboto:400,400italic,500,500italic|Inconsolata|Vollkorn:400italic,400|Playfair+Display:400,900,700italic|Cardo|Anonymous+Pro|Nunito' rel='stylesheet' type='text/css'>
  41.     <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  42.     <link rel="stylesheet" href="http://static.tumblr.com/0cdn90j/dFCoq9dbq/felinum.css">
  43.     <link rel="stylesheet" href="http://static.tumblr.com/0cdn90j/6q4oqbqu7/feline.css">
  44.  
  45.  
  46.     <meta name="image:Background" content=""/>
  47.     <meta name="image:Header Icon" content="http://static.tumblr.com/0cdn90j/ARuog8s2p/untitled-1_copy.png"/>
  48.    
  49.     <meta name="color:Background" content="#fff"/>
  50.     <meta name="color:Text" content="#8c8c8c"/>
  51.     <meta name="color:Link" content="#000"/>
  52.     <meta name="color:Link Hover" content="#eac1c5"/>
  53.     <meta name="color:Posts BG" content="#fff"/>
  54.     <meta name="color:Italic" content="#beb0b4"/>
  55.     <meta name="color:Bold" content="#555"/>
  56.     <meta name="color:Blockquote Border" content="#f0e3e5"/>
  57.    
  58.     <meta name="color:Blog Title" content="#000"/>
  59.     <meta name="color:Description" content="#8c8c8c"/>
  60.     <meta name="color:Nav Links" content="#000"/>
  61.     <meta name="color:Nav Links Hover" content="#000"/>
  62.     <meta name="color:Nav Links BG on Scroll" content="#efe6e8"/>
  63.  
  64.     <meta name="color:Odd Tag BG" content="#f2e3e7"/>
  65.     <meta name="color:Odd Tag" content="#963c55"/>
  66.     <meta name="color:Even Tag BG" content="#edeadc"/>
  67.     <meta name="color:Even Tag" content="#937a27"/>
  68.     <meta name="color:Reblog Button BG" content="#efd7dd"/>
  69.     <meta name="color:Like Button BG" content="#efe8c9"/>
  70.     <meta name="color:Like Reblog Buttons" content="#393939"/>
  71.     <meta name="color:Like Reblog Buttons Hover" content="#bbb"/>
  72.     <meta name="color:Like Button Liked" content="#e7a6bc"/>
  73.     <meta name="color:Post Info BG" content="#fce9e4"/>
  74.    
  75.     <meta name="color:Asker Avatar BG" content="#efe6e8"/>
  76.  
  77.     <meta name="color:Selection BG" content="#fee8e9"/>
  78.     <meta name="color:Selection Text" content="#000"/>
  79.     <meta name="color:Tooltip Text" content="#7e7e7e"/>
  80.     <meta name="color:Tooltip BG" content="#f9f9f9"/>
  81.    
  82.     <meta name="select:Number of Columns" content="1" title="1"/>
  83.     <meta name="select:Number of Columns" content="2" title="2"/>
  84.     <meta name="select:Number of Columns" content="3" title="3"/>
  85.    
  86.     <meta name="select:Header BG Opacity" content=".8" title=".8"/>
  87.     <meta name="select:Header BG Opacity" content="0" title="0"/>
  88.     <meta name="select:Header BG Opacity" content=".6" title=".6"/>
  89.     <meta name="select:Header BG Opacity" content="1" title="1"/>
  90.    
  91.     <meta name="select:Body Font Size" content="10" title="10px"/>
  92.     <meta name="select:Body Font Size" content="11" title="11px"/>
  93.     <meta name="select:Body Font Size" content="12" title="12px"/>
  94.     <meta name="select:Body Font Size" content="13" title="13px"/>
  95.  
  96.     <meta name="select:Body Font Family" content="Karla" title="Karla">
  97.     <meta name="select:Body Font Family" content="Work Sans" title="Work Sans">
  98.     <meta name="select:Body Font Family" content="Roboto" title="Roboto"/>
  99.     <meta name="select:Body Font Family" content="Inconsolata" title="Inconsolata"/>
  100.     <meta name="select:Body Font Family" content="Muli" title="Muli"/>
  101.     <meta name="select:Body Font Family" content="Vollkorn" title="Vollkorn"/>
  102.     <meta name="select:Body Font Family" content="Playfair Display" title="Playfair Display">
  103.     <meta name="select:Body Font Family" content="Cardo" title="Cardo"/>
  104.     <meta name="select:Body Font Family" content="Anonymous Pro" title="Anonymous Pro"/>
  105.    
  106.     <meta name="select:Photoset Gutter" content="1" title="1px"/>
  107.     <meta name="select:Photoset Gutter" content="2" title="2px"/>
  108.     <meta name="select:Photoset Gutter" content="3" title="3px"/>
  109.     <meta name="select:Photoset Gutter" content="4" title="4px"/>
  110.    
  111.     <meta name="select:Header Icon Shape" content="32" title="round"/>
  112.     <meta name="select:Header Icon Shape" content="4" title="rounded corners"/>
  113.     <meta name="select:Header Icon Shape" content="0" title="square"/>
  114.    
  115.     <meta name="select:Caption Image Size" content="18" title="18px"/>
  116.     <meta name="select:Caption Image Size" content="24" title="24px"/>
  117.     <meta name="select:Caption Image Size" content="30" title="30px"/>
  118.    
  119.     <meta name="select:Caption Image Shape" content="50" title="round"/>
  120.     <meta name="select:Caption Image Shape" content="9" title="rounded corners"/>
  121.     <meta name="select:Caption Image Shape" content="0" title="square"/>
  122.    
  123.     <meta name="select:Controls" content=".3" title="gray"/>
  124.     <meta name="select:Controls" content="1" title="black"/>
  125.    
  126.     <meta name="select:Tiny Cursor" content="http://cur.cursors-4u.net/cursors/cur-9/cur817.cur" title="white"/>
  127.     <meta name="select:Tiny Cursor" content="http://media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png" title="black"/>
  128.    
  129.     <meta name="if:Blog Title" content="1"/>
  130.     <meta name="if:Sliding Blog Title" content="1"/>
  131.     <meta name="if:Infinite Scroll" content="1"/>
  132.     <meta name="if:Manually Load Content" content="1"/>
  133.     <meta name="if:Fade In On Refresh" content="1"/>
  134.     <meta name="if:Show Caption" content="1"/>
  135.     <meta name="if:Unnest Caption" content="1"/>
  136.  
  137.     <meta name="text:Post Size" content="300"/>
  138.     <meta name="text:Permalink Post Size" content="540"/>
  139.     <meta name="text:Post Side Margin" content="20"/>
  140.     <meta name="text:Post Side Padding" content="0"/>
  141.     <meta name="text:Post Bottom Margin" content="100"/>
  142.    
  143.     <meta name="text:Link 1 URL" content="/"/>
  144.     <meta name="text:Link 1" content="home"/>
  145.     <meta name="text:Link 2 URL" content="/ask"/>
  146.     <meta name="text:Link 2" content="mssg"/>
  147.     <meta name="text:Link 3 URL" content="/archive"/>
  148.     <meta name="text:Link 3" content="map"/>
  149.     <meta name="text:Link 4 URL" content="/url"/>
  150.     <meta name="text:Link 4" content="link 4"/>
  151.     <meta name="text:Link 5 URL" content="/url"/>
  152.     <meta name="text:Link 5" content="link 5"/>
  153.     <meta name="text:Link 6 URL" content="/url"/>
  154.     <meta name="text:Link 6" content="link 6"/>
  155.     <meta name="text:Link 7 URL" content="/url"/>
  156.     <meta name="text:Link 7" content="link 7"/>
  157.     <meta name="text:Link 8 URL" content="/url"/>
  158.     <meta name="text:Link 8" content="link 8"/>
  159.    
  160.  
  161.     <style type="text/css">
  162.  
  163.     body {
  164.         opacity:1;
  165.         transition:.5s opacity;
  166.         font:{select:Body Font Size}px/1.7 {select:Body Font Family}, calibri, sans-serif;
  167.         color:{color:Text};
  168.         background:{color:Background} url('{image:Background}') repeat fixed top left;
  169.     }
  170.    
  171.     body.fade-out {opacity:0; transition:none;}
  172.    
  173.     body, a, a:hover {cursor:url({select:Tiny Cursor}), auto}
  174.    
  175.     a {text-decoration:none; color:{color:Link};}
  176.     a:hover {color:{color:Link Hover};}
  177.    
  178.     i, em {color:{color:Italic};}
  179.     b, strong {color:{color:Bold};}
  180.     pre {
  181.         font-family:inherit !important;
  182.         white-space:pre-wrap;      
  183.         white-space:-moz-pre-wrap;  
  184.         white-space:-pre-wrap;      
  185.         white-space:-o-pre-wrap;  
  186.         word-wrap:break-word;      
  187.     }
  188.    
  189.     h6, small, big, sup, sub {font-size:1em;}
  190.     h4, h5, h6 {margin:6px 0;}
  191.     h5 {font-size:1.1em;}
  192.     h4 {font-size:1.2em;}
  193.     h3 {font-size:1.3em;}
  194.     h2 {font-size:1.4em;}
  195.     h1 {font-size:1.5em;}
  196.    
  197.     blockquote {
  198.         margin:0;
  199.         padding:0 10px;
  200.         border-left:1px solid {color:Blockquote Border};
  201.     }
  202.    
  203.     hr {border:1px solid {color:Blockquote Border};}
  204.    
  205.     ul {margin:0 0 0 -35px; list-style-type:none;}
  206.     ol {margin-left:-25px;}
  207.     ul > li:not(.no):before {content:'—'; margin-right:5px;}
  208.    
  209.     img {max-width:100%; height:auto;}
  210.    
  211.     /****** header ******/
  212.    
  213.     header {
  214.         width:calc(100% - 30px);
  215.         position:fixed;
  216.         z-index:900;
  217.         top:0;
  218.         left:0;
  219.         right:0;
  220.         padding:40px 15px;
  221.         text-align:center;
  222.         background:rgba(255, 255, 255, {select:Header BG Opacity});
  223.     }
  224.    
  225.     @font-face {
  226.         font-family:cus;
  227.         src:url(http://static.tumblr.com/0cdn90j/k8goq29oo/lucemita-font-ffp.otf);
  228.     }
  229.    
  230.     #blog-title {font:35px cus; color:{color:Blog Title}; margin-top:0;}
  231.    
  232.     #header {
  233.         width:500px;
  234.         margin:auto;
  235.         overflow:hidden;
  236.     }
  237.    
  238.     #des {
  239.         width:calc(45% - 45px);
  240.         display:inline-block;
  241.         vertical-align:middle;
  242.         max-height:100px;
  243.         overflow:hidden;
  244.         text-align:right;
  245.     }
  246.    
  247.     #des:before {
  248.         position:absolute;
  249.         background-size:20px;
  250.         width:20px;
  251.         height:20px;
  252.         content:"";
  253.         margin-top:-20px;
  254.         margin-left:-6px;
  255.     }
  256.    
  257.     #des div {display:inline-block;}
  258.    
  259.     #im {
  260.         width:50px;
  261.         height:50px;
  262.         margin-left:30px;
  263.         margin-right:30px;
  264.         display:inline-block;
  265.         vertical-align:middle;
  266.     }
  267.    
  268.     #im img {max-width:100%; border-radius:{select:Header Icon Shape}px;}
  269.     #im img:hover {opacity:.5;}
  270.    
  271.     #li {
  272.         width:calc(45% - 45px);
  273.         display:inline-block;
  274.         vertical-align:middle;
  275.         text-align:left;
  276.     }
  277.    
  278.     #li a {margin:2px 5px; color:{color:Nav Links}; border-bottom:1px solid transparent;}
  279.    
  280.     #li a:hover {border-bottom:1px solid #686868; color:{color:Nav Links Hover};}
  281.    
  282.     /***** posts *****/
  283.    
  284.     #posts_container {
  285.         margin:0 auto;
  286.         left:auto;
  287.         right:auto;
  288.         margin-top:290px;
  289.         {block:ifNotBlogTItle}margin-top:210px;{/block:ifNotBlogTItle}
  290.         {block:IndexPage}width:calc(({text:Post Size}px - 4px + 2 * ({text:Post Side Padding}px + {text:Post Side Margin}px)) * {select:Number of Columns});{/block:IndexPage}
  291.         {block:Permalink}width:calc({text:Permalink Post Size}px + {text:Post Side Padding}px * 2 - 4px);{/block:Permalink}
  292.     }
  293.    
  294.     .posts {
  295.         {block:IndexPage}
  296.             margin-left:{text:Post Side Margin}px;
  297.             margin-right:{text:Post Side Margin}px;
  298.         {/block:IndexPage}
  299.         margin-bottom:{text:Post Bottom Margin}px;
  300.         padding:0 {text:Post Side Padding}px;
  301.         overflow-wrap:break-word;  
  302.         word-wrap:break-word;
  303.         background-color:{color:Posts BG};
  304.     }
  305.    
  306.     .vertebrae {
  307.         margin:auto;
  308.         overflow:hidden;
  309.         {block:Permalink}width:calc({text:Permalink Post Size}px - 4px);{/block:Permalink}
  310.         {block:IndexPage}width:calc({text:Post Size}px - 4px);{/block:IndexPage}
  311.     }
  312.    
  313.     .photo-slideshow .count-1, .pancake {
  314.         {block:Permalink}width:{text:Permalink Post Size}px;{/block:Permalink}
  315.         {block:IndexPage}width:{text:Post Size}px;{/block:IndexPage}
  316.     }
  317.    
  318.     .photo-slideshow {position:relative;}
  319.     .photo-slideshow .count-3 {max-width:177px; margin-bottom:calc({select:Photoset Gutter}px + 2px);}
  320.     .photo-slideshow .row:last-of-type .count-3 {margin-bottom:0 !important;}
  321.     .photo-slideshow .count-3:last-child {float:right;}
  322.     .photo-slideshow .count-3:nth-child(2) {
  323.         max-width:178px;
  324.         position:absolute;
  325.         left:50%;
  326.         transform:translateX(-50%);
  327.         -webkit-transform:translateX(-50%)
  328.     }
  329.    
  330.     /***** photoset lightbox *****/
  331.    
  332.     .vignette, #vignette {opacity:0;}
  333.    
  334.     .lightbox-image, #tumblr_lightbox img {
  335.         box-shadow:none !important;
  336.         max-width:none;
  337.         -moz-box-sizing:border-box;
  338.         box-sizing:border-box;
  339.     }
  340.    
  341.     .tmblr-lightbox, #tumblr_lightbox {background-color:rgba(255,255,255,.9) !important;}
  342.    
  343.     /***** caption / text *****/
  344.    
  345.     .caption {margin:0 5px; line-height:2em;}
  346.    
  347.     .caption a {border-bottom:1px solid #f2f2f2;}
  348.     .caption a:hover {border-bottom:1px solid #f0f0f0;}
  349.    
  350.     img.tumblr_avatar {
  351.         vertical-align:middle;
  352.         width:{select:Caption Image Size}px;
  353.         border-radius:{select:Caption Image Shape}%;
  354.     }
  355.    
  356.     .caption a.tumblr_blog, #asker a {margin-left:7px; border:none; font-size:.9em; color:#adadad; border-bottom:1px solid #e5e5e5;}
  357.     .caption a.tumblr_blog:hover, #asker a {color:#424242; border-bottom:1px solid #ccc;}
  358.    
  359.     .tumblr_parent p {padding-left:2px;}
  360.    
  361.     blockquote.tumblr_parent {padding:3px 3px 0px 3px; padding-top:10px; border:none;}
  362.    
  363.     hr {border-top:1px solid #f6f6f6;}
  364.    
  365.     .text {padding:10px;}
  366.        
  367.     .text_post_title, h1 {
  368.         position:relative;
  369.         top:-2px;
  370.         margin-bottom:15px;
  371.         margin-top:5px;
  372.         padding:5px 8px 3px 8px;
  373.         text-align:center;
  374.         text-transform:lowercase;
  375.         font-size:13px;
  376.     }
  377.    
  378.     .text_post_title:after, h1:after {
  379.         content:'';
  380.         position:absolute;
  381.         left:calc(50% - 35px);
  382.         top:calc(100% + 5px);
  383.         width:70px;
  384.         height:1px;
  385.         border-top:1px solid #eee;
  386.     }
  387.    
  388.     /****** chat ******/
  389.    
  390.     .chat {padding-bottom:5px;}
  391.     .no {padding-top:8px;}
  392.     .lin {
  393.         width:calc(100% - 10px);
  394.         background:#f9f9f9;
  395.         border-bottom:1px solid #f2f2f2;
  396.         padding:3px;
  397.         border-radius:3px;
  398.     }
  399.    
  400.     /****** quote ******/
  401.    
  402.     #quote {padding:7px; font-size:1.2em;}
  403.     #source {font-size:.9em; padding:7px;}
  404.    
  405.    
  406.     /****** question ******/
  407.    
  408.     #question_post {padding:5px;}
  409.    
  410.     #asker_icon {
  411.         display:inline-block;
  412.         padding:4px;
  413.         background-color:{color:Asker Avatar BG};
  414.         border-radius:20px;
  415.     }
  416.    
  417.     #asker_icon img {vertical-align:top; border-radius:20px;}
  418.    
  419.     #que {
  420.         position:relative;
  421.         display:inline-block;
  422.         margin-left:10px;
  423.         padding:7px;
  424.         width:calc({text:Post Size}px - 73px);
  425.         {block:Permalink}width:calc({text:Permalink Post Size}px - 73px);{/block:Permalink}
  426.         vertical-align:middle;
  427.         background-color:#f9f9f9;
  428.     }
  429.    
  430.     #que:after {
  431.         right:100%;
  432.         top:50%;
  433.         border:solid transparent;
  434.         content:" ";
  435.         height:0;
  436.         width:0;
  437.         position:absolute;
  438.         pointer-events:none;
  439.         border-right-color:#f9f9f9;
  440.         border-width:5px;
  441.         margin-top:-5px;
  442.     }
  443.  
  444.     #asker {padding-bottom:2px;}
  445.    
  446.     #answer {padding:3px 7px;}
  447.    
  448.     /****** audio player ******/
  449.    
  450.     .audio-player {background:#fff!important;}
  451.    
  452.     #audio_post {background-color:#f9f9f9;}
  453.    
  454.     #album_art {
  455.         position:absolute;
  456.         width:30px;
  457.         height:30px;
  458.         z-index:1;
  459.         border-radius:4px;
  460.     }
  461.    
  462.     #album_art img {max-width:100%; border-radius:4px;}
  463.    
  464.     #audio_player_container {
  465.         position:absolute;
  466.         width:28px;
  467.         height:28px;
  468.         margin-top:1px;
  469.         margin-left:1px;
  470.         z-index:9;
  471.         overflow:hidden;
  472.         opacity:0;
  473.         background-color:white;
  474.         border-radius:4px;
  475.     }
  476.    
  477.     #audio_post:hover #audio_player_container {opacity:1;}
  478.    
  479.     #audio_player_bg {margin-left:-3px;}
  480.    
  481.     #track_details_container {
  482.         display:table;
  483.         margin-left:40px;
  484.         padding:0 5px;
  485.         height:30px;
  486.     }
  487.    
  488.     #track_details {display:table-cell; vertical-align:middle;}
  489.    
  490.     #track_name {font-weight:bold;}
  491.    
  492.     /****** post info ******/
  493.  
  494.     #blueberry {
  495.         width:calc({block:IndexPage}{text:Post Size}px{/block:IndexPage}{block:Permalink}{text:Permalink Post Size}px{/block:Permalink} - 4px);
  496.         padding-top:10px;
  497.         padding-bottom:10px;
  498.         color:{color:Post Info};
  499.         background-color:{color:Posts BG};
  500.         text-align:center;
  501.     }
  502.    
  503.     .pinfo {font-size:.8em; padding-top:3px;}
  504.     .pinfo span a {box-shadow: inset 0 -5px 0 {color:Post Info BG};}
  505.    
  506.     #tags {
  507.         padding-bottom:12px;
  508.         font-size:8px;
  509.         word-break:break-all;
  510.     }
  511.    
  512.     .tag {padding:2px; border-radius:4px;}
  513.    
  514.     .tag:nth-of-type(odd) {background:{color:Odd Tag BG}; color:{color:Odd Tag};}
  515.     .tag:nth-of-type(even) {background:{color:Even Tag BG}; color:{color:Even Tag};}
  516.  
  517.     a.tag:hover {background:transparent;}
  518.  
  519.     /****** like / reblog buttons ******/
  520.    
  521.     #like_reblog {margin-bottom:10px;}
  522.    
  523.     .reblog-control, .like-control {
  524.         display:inline-block;
  525.         position:relative;
  526.         border-radius:4px;
  527.     }
  528.    
  529.     .reblog-control:before, .like-control:before {
  530.         position:absolute;
  531.         content:'';
  532.         width:calc({block:IndexPage}{text:Post Size}px{/block:IndexPage}{block:Permalink}{text:Permalink Post Size}px{/block:Permalink} * 0.3);
  533.         border-bottom:1px solid #f4f4f4;
  534.     }
  535.    
  536.     .control span:hover, .like_button:hover, .like_button.liked:hover {color:{color:Like Reblog Buttons Hover};}
  537.    
  538.     .like-control, .control span {color:{color:Like Reblog Buttons};}
  539.    
  540.     .reblog-control {
  541.         top:1px;
  542.         padding:0 2px 0 1px;
  543.         height:14px;
  544.         background:{color:Reblog Button BG};
  545.         font-size:10px;
  546.     }
  547.    
  548.     .reblog-control:before {right:25px; top:7px;}
  549.    
  550.     .like-control {padding:2px; background:{color:Like Button BG};}
  551.    
  552.     .like-control:before {left:25px; top:6px;}
  553.  
  554.     .like_button::before, .reblog_button::before {display:block; line-height:1;}
  555.  
  556.     .like_button.liked {color:{color:Like Button Liked};}
  557.     .like_button iframe {
  558.         display:block;
  559.         position:absolute;
  560.         top:0;
  561.         right:0;
  562.         bottom:0;
  563.         left:0;
  564.         margin:0;
  565.         opacity:0;
  566.     }
  567.    
  568.     /****** post notes ******/
  569.    
  570.     #notecontainer .notes {
  571.         max-height:400px;
  572.         overflow-y:auto;
  573.         {block:Permalink}width:{text:Permalink Post Size}px;{/block:Permalink}
  574.         background-color:{color:Posts BG};
  575.         -webkit-column-count:2;
  576.            -moz-column-count:2;
  577.                 column-count:2;
  578.         -webkit-column-gap:20px;
  579.            -moz-column-gap:20px;
  580.                 column-gap:20px;
  581.     }
  582.  
  583.     #notecontainer ol {
  584.         list-style-type:none;
  585.         margin:70px 0 0 0;
  586.         padding:10px;
  587.     }
  588.    
  589.     #notecontainer li {word-break:break-all;}
  590.    
  591.     #fel {
  592.         position:fixed;
  593.         right:5px;
  594.         bottom:5px;
  595.         z-index:999999999999999999999999999999999999999999;
  596.        
  597.         padding:5px;
  598.         border-radius:3px;
  599.         text-align:right;
  600.     }
  601.    
  602.     #fel img {width:20px;}
  603.     #fel span {font:9px karla; display:block; color:black; background:#fff;}
  604.    
  605.     .retags {padding-left:25px;}
  606.     .retags a, .retags.error {
  607.         text-transform:uppercase !important;
  608.         letter-spacing:2px !important;
  609.         font-weight:bold !important;
  610.         font-size:7px !important;
  611.     }
  612.    
  613.     #notecontainer a:hover, #notecontainer .retags a:hover, .retags.error {color:{color:Link Hover} !important;}
  614.    
  615.     #notecontainer .answer_content {font-style:italic; color:{color:Italic};}
  616.  
  617.     #notecontainer blockquote {
  618.         border-color:transparent;
  619.         margin:10px 5px 10px 20px;
  620.         font-style:italic;
  621.     }
  622.    
  623.     #notecontainer img.avatar {
  624.         margin-right:10px;
  625.         width:16px;
  626.         height:16px;
  627.         vertical-align:middle;
  628.         border-radius:8px;
  629.     }
  630.  
  631.     /****** pagination ******/
  632.        
  633.     #footer {
  634.         position:relative;
  635.         margin:0 auto;
  636.         margin-bottom:80px;
  637.         width:{text:Post Size}px;
  638.         height:30px;
  639.     }
  640.    
  641.     #manual a {
  642.         margin:4px 6px;
  643.         box-shadow:inset 0 -5px 0 {color:Post Info BG};
  644.     }
  645.    
  646.     #manual a:hover {background:{color:Post Info BG}; color:{color:Link};}
  647.    
  648.     #manual {text-align:center; font-size:12px;}
  649.    
  650.     #manual:before, #manual:after {
  651.         position:absolute;
  652.         content:'';
  653.         width:calc({text:Post Size}px * 0.3);
  654.         border-bottom:1px solid #efefef;
  655.         top:.8em;
  656.     }
  657.    
  658.     #manual:before {left:20px;}
  659.     #manual:after {right:20px;}
  660.    
  661.     #pagination a:first-of-type {float:left;}
  662.     #pagination a:nth-of-type(2) {float:right;}
  663.    
  664.     #pagination a:first-of-type:before, #pagination a:nth-of-type(2):after {
  665.         position:absolute;
  666.         content:'';
  667.         width:calc({text:Post Size}px * 0.06);
  668.         border-bottom:1px solid #e2e2e2;
  669.         top:1em;
  670.     }
  671.    
  672.     #pagination a:first-of-type:before {left:45px;}
  673.     #pagination a:nth-of-type(2):after {right:45px;}
  674.    
  675.     /****** general ******/
  676.  
  677.     ::-webkit-scrollbar {width:11px; height:11px;}
  678.     ::-webkit-scrollbar-track {border:5px solid #fff; background-color:#eee;}
  679.     ::-webkit-scrollbar-thumb {
  680.         border:5px solid rgba(0, 0, 0, 0);
  681.         background-clip:padding-box;
  682.         background-color:rgba(0, 0, 0, 1);
  683.     }
  684.    
  685.     .tmblr-iframe, .tmblr-iframe--desktop-logged-in-controls, .iframe-controls--desktop {
  686.         position:fixed;
  687.         z-index:8999999999999990!important;
  688.         top:10px !important;
  689.         right:5px !important;
  690.         opacity:{select:Controls};
  691.         -webkit-filter: invert(100%);
  692.             -moz-filter:invert(100%);
  693.              -ms-filter:invert(100%);
  694.               -o-filter:invert(100%);
  695.                  filter:invert(100%);
  696.     }
  697.  
  698.     ::selection {background-color:{color:Selection BG}; color:{color:Selection Text};}
  699.     ::-moz-selection {background-color:{color:Selection BG}; color:{color:Selection Text};}
  700.    
  701.     #s-m-t-tooltip {
  702.         max-width:300px;
  703.         margin:13px 18px 7px 8px;
  704.         padding:5px;
  705.         z-index:999999999999999999;
  706.         font-size:.9em;
  707.         color:{color:Tooltip Text};
  708.         background-color:{color:Tooltip BG};
  709.         border-radius:4px;
  710.     }
  711.    
  712.     #scrolltotop {
  713.         position:fixed;
  714.         width:40px;
  715.         bottom:-15px;
  716.         right:-70px;
  717.         padding:5px;
  718.         z-index:99999;
  719.         text-align:center;
  720.         cursor:pointer;
  721.         font:9px karla;
  722.     }
  723.    
  724.     a, a:hover, img, img:hover, #audio_post:hover #audio_player_container, #audio_player_container, .like_button, .like_button:hover, #scrolltotop, #scrolltotop:hover, .tmblr-iframe, .tmblr-iframe:hover, .control span, .control span:hover {transition-duration:.5s;}
  725.    
  726.     a.read_more {
  727.         padding:3px 6px;
  728.         border:1px solid {color:Reblog Button BG};
  729.         background:#f9f9f9;
  730.         border-radius:10px;
  731.         text-transform:uppercase;
  732.         font-size:.8em;
  733.         letter-spacing:1px;
  734.     }
  735.    
  736.     a.read_more:hover {background:{color:Reblog Button BG}; letter-spacing:2px; color:#000;}
  737.    
  738.     </style>
  739.    
  740. </head>
  741.  
  742.  
  743. {block:ifSlidingBlogTitle}
  744. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  745. <script>
  746. var go = true;
  747. $(window).scroll(function() {
  748.     if ($(this).scrollTop() > 100 && go) {
  749.        {block:ifBlogTitle}
  750.        $("#blog-title").animate({opacity:'0', marginTop:'-150px'}, {queue: false, duration: 'slow'});
  751.         $("#header").animate({marginTop:'100px'}, {queue: false, duration: 'slow'});
  752.         {/block:ifBlogTitle}
  753.         $("#li a").css({'box-shadow':'inset 0 -5px 0 {color:Nav Links BG on Scroll}'});
  754.         go = false;
  755.     } else if ($(this).scrollTop() < 100 && !go) {
  756.        {block:ifBlogTitle}
  757.        $("#header").animate({marginTop:'0px'});
  758.        $("#blog-title").animate({opacity:'1', marginTop:'0px'}, {queue: false, duration: 'slow'});
  759.        {/block:ifBlogTitle}
  760.        $("#li a").css({'box-shadow':'none'});
  761.        go = true;
  762.    }
  763. });
  764. </script>
  765. {/block:ifSlidingBlogTitle}
  766.  
  767.  
  768. <body>
  769.  
  770. {block:ifFadeInOnRefresh}<script>document.body.className += ' fade-out';</script>{/block:ifFadeInOnRefresh}
  771.  
  772. <!---------------------------- header ---------------------------->
  773.  
  774. <header>
  775.     {block:ifBlogTitle}<p id="blog-title">
  776.     <a href="http://{name}.tumblr.com">- ̗̀ {Title} ̖́-</a></p>{/block:ifBlogTitle}
  777.     <div id="header">
  778.         <div id="des"><div>{Description}</div></div>
  779.         <div id="im"><a href="http://{name}.tumblr.com"><img src="{image:Header Icon}"></a></div>
  780.         <div id="li">
  781.             <a href="{text:Link 1 URL}">{text:Link 1}</a>
  782.             <a href="{text:Link 2 URL}">{text:Link 2}</a>
  783.             <a href="{text:Link 3 URL}">{text:Link 3}</a>
  784.             <a href="{text:Link 4 URL}">{text:Link 4}</a>
  785.             <a href="{text:Link 5 URL}">{text:Link 5}</a>
  786.             <a href="{text:Link 6 URL}">{text:Link 6}</a>
  787.             <a href="{text:Link 7 URL}">{text:Link 7}</a>
  788.             <a href="{text:Link 8 URL}">{text:Link 8}</a>
  789.         </div>
  790.     </div>
  791. </header>
  792.  
  793. <!---------------------------- posts container ---------------------------->
  794.  
  795. <div id="posts_container">
  796.     <!-- posts -->
  797.     {block:Posts}
  798.     <div class="posts entry" id="{PostID}">
  799.  
  800.        
  801.         <!-- text post -->
  802.            
  803.         {block:Text}
  804.         {block:Date}
  805.         {/block:Date}
  806.         <div class="vertebrae">
  807.             {block:Title}<div class="text_post_title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  808.             <div class="caption">{Body}</div>
  809.         </div>
  810.         {/block:Text}
  811.            
  812.         <!-- link post -->
  813.  
  814.         {block:Link}
  815.         <div class="vertebrae">
  816.             <div class="text_post_title"><a href="{URL}">{Name}</a></div>
  817.             <div class="caption">{block:Description}{Description}{/block:Description}</div>
  818.         </div>
  819.         {/block:Link}
  820.  
  821.         <!-- quote post -->
  822.  
  823.         {block:Quote}
  824.         <div class="vertebrae">
  825.             <div id="quote">{Quote}</div>
  826.             {block:Source}<div id="source">&mdash;&nbsp;{Source}</div>{/block:Source}
  827.         </div>
  828.         {/block:Quote}
  829.  
  830.         <!-- chat post -->
  831.  
  832.         {block:Chat}
  833.         <div class="vertebrae">
  834.             {block:Title}<div class="text_post_title">{Title}</div>{/block:Title}
  835.             <ul class="chat">
  836.                 {block:Lines}
  837.                     <li class="no">
  838.                         <div class="label">{block:Label}{Label}{/block:Label}</div>
  839.                         <div class="lin">{Line}</div>
  840.                     </li>
  841.                 {/block:Lines}
  842.             </ul>
  843.         </div>
  844.         {/block:Chat}
  845.  
  846.         <!-- question post -->
  847.        
  848.         {block:Answer}
  849.         <div class="vertebrae">
  850.             <div id="question_post">
  851.                 <div id="asker_icon"><img src="{AskerPortraitURL-16}"></div>
  852.                 <div id="que">
  853.                     <div id="asker">{Asker}:</div>
  854.                     <div id="question">{Question}</div>
  855.                 </div>
  856.                 <div id="answer">{Answer}</div>
  857.             </div>
  858.         {block:ifShowCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifShowCaption}
  859.         </div>
  860.         {/block:Answer}
  861.  
  862.         <!-- audio post -->
  863.  
  864.         {block:AudioPlayer}
  865.         <div class="vertebrae">
  866.             <div id="audio_post">
  867.                 <div id="album_art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  868.                 <div id="audio_player_container"><div id="audio_player_bg">{AudioPlayer}</div></div>
  869.                 <div id="track_details_container">
  870.                     <div id="track_details">
  871.                         {block:TrackName}<span id="track_name">{TrackName}</span>{/block:TrackName} /
  872.                         {block:Artist}<span>{Artist}</span>{/block:Artist}<br />
  873.                     </div>
  874.                 </div>
  875.             </div>
  876.             {block:ifCaption}<div class="caption audio">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifCaption}
  877.         </div>
  878.         {/block:AudioPlayer}
  879.  
  880.         <!-- photo post -->
  881.  
  882.         {block:Photo}
  883.         <div class="vertebrae">
  884.             <div class="pancake">
  885.                 {LinkOpenTag}<a href="#" style="margin:0 !important; height:0 !important;" 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}
  886.            
  887.             </div>
  888.             {block:ifShowCaption}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifShowCaption}
  889.         </div>
  890.         {/block:Photo}
  891.  
  892.         <!-- photoset post -->
  893.  
  894.         {block:Photoset}
  895.         <div class="vertebrae">
  896.             <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  897.                 {block:Photos}
  898.                 <div class="photo-data">
  899.                     <div class="pxu-photo">
  900.                         <img src="{PhotoURL-500}"  width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  901.                     </div>
  902.                     <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  903.                 </div>
  904.                 {/block:Photos}
  905.             </div>
  906.             {block:ifShowCaption}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifShowCaption}
  907.         </div>
  908.         {/block:Photoset}
  909.  
  910.         <!-- video post -->
  911.  
  912.         {block:Video}
  913.         <div class="vertebrae">
  914.             <div class="video">{Video-500}</div>
  915.             {block:ifShowCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifShowCaption}
  916.         </div>
  917.         {/block:Video}
  918.        
  919.        
  920.         {block:Date}
  921.         <div id="blueberry">
  922.        
  923.             <div id="like_reblog">
  924.                 <div class="control reblog-control"><a href="{ReblogURL}" target="_blank"><span class="icon-reload"></span></a></div>
  925.                 <div class="control like-control">{LikeButton size="13" color="black"}</div>
  926.             </div>  
  927.            
  928.  
  929.             {block:HasTags}
  930.             <div id="tags">
  931.                 {block:Tags}&nbsp;<a class="tag" href="{TagURL}" data-hover="{Tag}">{Tag}</a>{/block:Tags}
  932.             </div>
  933.             {/block:HasTags}
  934.            
  935.            
  936.            
  937.             <div class="pinfo">
  938.                 <span><a href="{Permalink}" title="{TimeAgo} / {24Hour}:{Minutes}:{Seconds}">{DayOfMonthWithZero} {ShortMonth} {ShortYear}</a></span>
  939.                
  940.                 {block:NoteCount}&nbsp;·&nbsp;&nbsp;<span><a href="{Permalink}">{NoteCountWithLabel}</a></span>{/block:NoteCount}
  941.             </div>        
  942.          
  943.         </div>
  944.         <!--{block:RebloggedFrom}<a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}-->
  945.         {/block:Date}
  946.        
  947.         {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  948.        
  949.        
  950.     </div>
  951.    
  952.     <!---------------------------- end posts ---------------------------->
  953.    
  954.     <div id="notecontainer">{PostNotes}</div>
  955.    
  956. {/block:Posts}
  957.  
  958. </div>
  959.  
  960. <!---------------------------- end posts container ---------------------------->
  961.  
  962. <!---------------------------- pagination ---------------------------->
  963.  
  964.  
  965. {block:ifNotInfiniteScroll}
  966. <div id="footer">
  967.     {block:Pagination}
  968.     <div id="pagination">
  969.    
  970.         {block:JumpPagination length="3"}
  971.             {block:JumpPage}
  972.                   <a class="jump_page" href="{URL}">page {PageNumber}</a>
  973.             {/block:JumpPage}
  974.         {/block:JumpPagination}
  975.     </div>
  976.     {/block:Pagination}
  977. </div>
  978. {/block:ifNotInfiniteScroll}
  979.  
  980. {block:IndexPage}
  981. {block:ifInfiniteScroll}
  982.     <div class="navigation" id="navigation">
  983.         {block:Pagination}
  984.             {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  985.             {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}
  986.         {/block:Pagination}
  987.     </div>
  988.        
  989.     {block:ifManuallyLoadContent}
  990.         <div id="footer"><div id="manual"><a id="loadmore" href="{text:Link 1 URL}">Load More</a></div></div>
  991.     {/block:ifManuallyLoadContent}
  992. {/block:IfInfiniteScroll}
  993. {/block:IndexPage}
  994.  
  995. <div id="scrolltotop">to top</div>
  996.  
  997. <!---------------------------- scripts ---------------------------->
  998.  
  999. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  1000.  
  1001.  
  1002. {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}{block:ifUnnestCaption}<script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>{/block:ifUnnestCaption}<script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script><script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script><div id="fel"><a href="http://felinum.tumblr.com" title="theme by felinum"><img src="http://static.tumblr.com/0cdn90j/0Xook74au/feli.svg"/><span>@felinum</span></a></div><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
  1003.  
  1004.  
  1005. <script>
  1006.     $(document).ready(function(){
  1007.         $('.photo-slideshow').pxuPhotoset({
  1008.             lightbox:true,
  1009.             rounded:false,
  1010.             gutter:'{select:Photoset Gutter}px',
  1011.             photoset:'.photo-slideshow',
  1012.             photoWrap:'.photo-data',
  1013.             photo:'.pxu-photo'
  1014.         });
  1015.         {block:ifUnnestCaption}
  1016.         $('.posts').unnest({
  1017.             yourCaption:'.caption',
  1018.             newCaptionUsername:false,
  1019.             originalPostCaptionUsername:false,
  1020.             tumblrAvatars:true,
  1021.             tumblrAvatarClass:'.tumblr_avatar',
  1022.             usernameColon:false
  1023.         });
  1024.         {/block:ifUnnestCaption}
  1025.         {block:IndexPage}
  1026.         var $container = $('#posts_container');
  1027.         $container.imagesLoaded(function(){
  1028.             $container.masonry({
  1029.                 itemSelector:'.posts',
  1030.             });
  1031.         });
  1032.         {block:ifInfiniteScroll}
  1033.         $container.infinitescroll({
  1034.             navSelector:'#navigation',
  1035.             nextSelector:'#navigation a#nextPage',
  1036.             itemSelector:'.posts',
  1037.             loadingImg:'',
  1038.             loadingText:'<em></em>',
  1039.             bufferPx:2000
  1040.         },
  1041.             function(newElements){
  1042.                 var $newElems = $( newElements ).css({opacity: 0});
  1043.                 resizeVideos();
  1044.                 var $newElemsIDs = $newElems.map(function(){
  1045.                     return this.id;
  1046.                 }).get();
  1047.                 $newElems.find('.photo-slideshow').pxuPhotoset({
  1048.                     lightbox:true,
  1049.                     rounded:false,
  1050.                     gutter:'{select:Photoset Gutter}px',
  1051.                     photoset:'.photo-slideshow',
  1052.                     photoWrap:'.photo-data',
  1053.                     photo:'.pxu-photo'
  1054.                 });
  1055.                 {block:ifUnnestCaption}
  1056.                 $newElems.unnest({
  1057.                     yourCaption:'.caption',
  1058.                     newCaptionUsername:false,
  1059.                     originalPostCaptionUsername:false,
  1060.                     tumblrAvatars:true,
  1061.                     tumblrAvatarClass:'.tumblr_avatar',
  1062.                     usernameColon:false
  1063.                 });
  1064.                 {/block:ifUnnestCaption}
  1065.                 $newElems.imagesLoaded(function(){
  1066.                     $newElems.animate({opacity: 1});
  1067.                     $container.masonry('appended', $newElems, true);
  1068.                     console.log($newElems, $newElemsIDs);
  1069.                     Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1070.                 });
  1071.                
  1072.             }
  1073.         );
  1074.         {block:ifManuallyLoadContent}
  1075.         $(window).unbind('.infscr');
  1076.         $("#loadmore").click(function(){
  1077.             $container.infinitescroll('retrieve');
  1078.             return false;
  1079.         });
  1080.         {/block:ifManuallyLoadContent}
  1081.         {/block:ifInfiniteScroll}
  1082.         {/block:IndexPage}
  1083.     });
  1084. </script>
  1085. <script>
  1086.     $(function() {
  1087.         $('body').removeClass('fade-out');
  1088.     });
  1089. </script>
  1090. <script type="text/javascript">
  1091.     $(document).ready(function(){
  1092.         $(window).scroll(function(){
  1093.             if ($(this).scrollTop() > 400){
  1094.                 $('#scrolltotop').stop().animate({right:'0px', bottom:'10px'});
  1095.                 $('#fel').stop().stop().animate({bottom:'30px'});
  1096.             }
  1097.             else {
  1098.                 $('#scrolltotop').stop().animate({right:'-85px', bottom:'-15px'});
  1099.                 $('#fel').stop().stop().animate({bottom:'5px'});
  1100.             }
  1101.         });
  1102.         $('#scrolltotop').click(function(){
  1103.             $("html, body").animate({scrollTop:0}, 800);
  1104.                 return false;
  1105.             });
  1106.     });
  1107. </script>
  1108. <script src="http://static.tumblr.com/0cdn90j/glvnidntk/jquery.style-my-tooltips.js"></script>
  1109. <script>
  1110.     (function($){
  1111.         $(document).ready(function(){
  1112.             $("[title]").style_my_tooltips({
  1113.                 tip_follows_cursor:true,
  1114.                 tip_delay_time:0,
  1115.                 tip_fade_speed:0,
  1116.                 attribute:"title"
  1117.             });
  1118.         });
  1119.     })(jQuery);
  1120. </script>
  1121.  
  1122. </body>
  1123.  
  1124. </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!