API tools faq
paste
Advertisement
felinum

forget-me-not

felinum
Nov 6th, 2016
43,443
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 52.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6. <!--
  7.  
  8. Theme «forget-me-not» by felinum
  9.  
  10. Updated 19.02.2017
  11.  
  12. Rules:
  13.  
  14. 1. Don't claim any part of the code as your own.
  15. 2. Don't redistribute it on other sites.
  16. 3. Don't implement parts of my code into your themes w/o permission.
  17. 4. Leave the credit intact and visible (don't move it to secondary pages).
  18. 5. You may edit the theme, but not beyond recognition.
  19.  
  20.  
  21.  
  22. Credits:
  23.  
  24.  - Unnest Tumblr Captions: @neothm & @magnusthemes (http://neothm.com/post/148902138319/)
  25.  - Pixel Union Photoset: Pixel Union (https://github.com/PixelUnion/Extended-Tumblr-Photoset)
  26.  - Infinite Scroll: Paul Irish (https://github.com/infinite-scroll/infinite-scroll)
  27.  - Video Resizing: @ shythemes (http://shythemes.tumblr.com/post/134536748863/)
  28.  - Photo Lightbox: @ shythemes (http://shythemes.tumblr.com/post/140444996328/)
  29.  - Styled Tooltips: Manos Malihutsakis (http://manos.malihu.gr/tuts/style-my-tooltips.html)
  30.  - Masonry: David DeSandro (http://masonry.desandro.com/)
  31.  - Like Button with infinite scroll: @magnusthemes (http://magnusthemes.tumblr.com/post/132530444620)
  32.  - Styled tooltips: Manos Malihutsakis (http://manos.malihu.gr/tuts/style-my-tooltips.html)
  33.  - Link Effects: Ian Lunn (http://ianlunn.github.io/Hover/)
  34.  - Linear Icons: Perxis (https://linearicons.com/free)
  35.  
  36. -->
  37.                    
  38.        
  39.     <title>{Title}</title>
  40.     <link rel="shortcut icon" href="{Favicon}">
  41.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  42.     {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  43.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  44.     <link href='https://fonts.googleapis.com/css?family=Karla|Muli|Roboto:400,400italic,500,500italic|Inconsolata|Vollkorn:400italic,400|Playfair+Display:400,900,700italic|Cardo|Anonymous+Pro' rel='stylesheet' type='text/css'>
  45.     <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  46.     <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  47.     <link rel="stylesheet" href="http://static.tumblr.com/0cdn90j/Sk9o7br1a/micaelis.css">
  48.     <link rel="stylesheet" href="http://static.tumblr.com/0cdn90j/dVCog8mxd/felinumbnc.css">
  49.  
  50.  
  51.     <meta name="image:Background" content=""/>
  52.     <meta name="image:Sidebar Icon" content="http://static.tumblr.com/0cdn90j/ARuog8s2p/untitled-1_copy.png"/>
  53.     <meta name="color:Background" content="#f8f8f8"/>
  54.     <meta name="color:Text" content="#8c8c8c"/>
  55.     <meta name="color:Link" content="#000"/>
  56.     <meta name="color:Link Hover" content="#eac1c5"/>
  57.     <meta name="color:Posts BG" content="#fff"/>
  58.     <meta name="color:Italic" content="#beb0b4"/>
  59.     <meta name="color:Bold" content="#56585b"/>
  60.     <meta name="color:Blockquote Border" content="#f0e3e5"/>
  61.    
  62.     <meta name="color:SB BG" content="#fff"/>
  63.     <meta name="color:SB Icons" content="#edc7c7"/>
  64.     <meta name="color:SB Data" content="#848484"/>
  65.     <meta name="color:SB Title" content="#000"/>
  66.     <meta name="color:SB Title Border" content="#f5d5d5"/>
  67.     <meta name="color:SB Search" content="#a8a8a8"/>
  68.     <meta name="color:SB Description" content="#6d6d6d"/>
  69.     <meta name="color:SB Description Links" content="#e29d9d"/>
  70.     <meta name="color:SB Links" content="#444"/>
  71.     <meta name="color:SB Links Hover" content="#949494"/>
  72.     <meta name="color:SB Links Border" content="#f8d6d6"/>
  73.     <meta name="color:SB Links BG" content="#ffffff"/>
  74.     <meta name="color:SB Links Hover BG" content="#f8d6d6"/>
  75.    
  76.     <meta name="color:Post Icon" content="#979797"/>
  77.     <meta name="color:Post Icon BG" content="#fff"/>
  78.     <meta name="color:Post Info" content="#a5a5a5"/>
  79.     <meta name="color:Post Info BG" content="#fff"/>
  80.     <meta name="color:Post Info Hover" content="#eac1c5"/>
  81.     <meta name="color:Post Info BG" content="#fff"/>
  82.     <meta name="color:Post Notes Link" content="#9d9d9d"/>
  83.     <meta name="color:Tags" content="#a5a5a5"/>
  84.     <meta name="color:Tag Icon" content="#edd0d3"/>
  85.     <meta name="color:Like Reblog Buttons" content="#979797"/>
  86.     <meta name="color:Like Reblog Buttons Hover" content="#e7b0b0"/>
  87.     <meta name="color:Like Button Liked" content="#e7b0b0"/>
  88.    
  89.     <meta name="color:Post Accent" content="#f8f8f8"/>
  90.     <meta name="color:Text Post Title" content="#494949"/>
  91.     <meta name="color:Question" content="#000"/>
  92.     <meta name="color:Asker" content="#000"/>
  93.     <meta name="color:Asker BG" content="#f8eeef"/>
  94.     <meta name="color:Quote" content="#333"/>
  95.     <meta name="color:Quote Source" content="#dfabab"/>
  96.     <meta name="color:Quote Source Hover" content="#ccc"/>
  97.     <meta name="color:Chat Label" content="#e7bbc2"/>
  98.     <meta name="color:Track Info" content="#6d6d6d"/>
  99.     <meta name="color:Track Border" content="#efc3c3"/>
  100.    
  101.     <meta name="color:Scroll to Top" content="#7d7d7d"/>
  102.     <meta name="color:Scroll to Top Hover" content="#cecece"/>
  103.     <meta name="color:Selection BG" content="#fee8e9"/>
  104.     <meta name="color:Selection Text" content="#000"/>
  105.     <meta name="color:Tooltip Text" content="#7e7e7e"/>
  106.     <meta name="color:Tooltip BG" content="#f9f9f9"/>
  107.     <meta name="color:Tooltip Border" content="#eaeaea"/>
  108.    
  109.     <meta name="select:Body Font Size" content="10" title="10px"/>
  110.     <meta name="select:Body Font Size" content="11" title="11px"/>
  111.     <meta name="select:Body Font Size" content="12" title="12px"/>
  112.  
  113.     <meta name="select:Body Font Family" content="Karla" title="Karla">
  114.     <meta name="select:Body Font Family" content="Roboto" title="Roboto"/>
  115.     <meta name="select:Body Font Family" content="Inconsolata" title="Inconsolata"/>
  116.     <meta name="select:Body Font Family" content="Muli" title="Muli"/>
  117.     <meta name="select:Body Font Family" content="Vollkorn" title="Vollkorn"/>
  118.     <meta name="select:Body Font Family" content="Playfair Display" title="Playfair Display">
  119.     <meta name="select:Body Font Family" content="Cardo" title="Cardo"/>
  120.     <meta name="select:Body Font Family" content="Anonymous Pro" title="Anonymous Pro"/>
  121.    
  122.     <meta name="select:Text Align" content="center" title="center"/>
  123.     <meta name="select:Text Align" content="justify" title="justify"/>
  124.     <meta name="select:Text Align" content="left" title="left"/>
  125.    
  126.     <meta name="select:Photoset Gutter" content="2" title="2px"/>
  127.     <meta name="select:Photoset Gutter" content="1" title="1px"/>
  128.     <meta name="select:Photoset Gutter" content="3" title="3px"/>
  129.     <meta name="select:Photoset Gutter" content="4" title="4px"/>
  130.    
  131.     <meta name="select:SB Icon Shape" content="32" title="round"/>
  132.     <meta name="select:SB Icon Shape" content="4" title="rounded corners"/>
  133.     <meta name="select:SB Icon Shape" content="0" title="square"/>
  134.    
  135.     <meta name="select:Caption Image Size" content="24" title="24px"/>
  136.     <meta name="select:Caption Image Size" content="18" title="18px"/>
  137.     <meta name="select:Caption Image Size" content="30" title="30px"/>
  138.    
  139.     <meta name="select:Caption Image Shape" content="9" title="rounded corners"/>
  140.     <meta name="select:Caption Image Shape" content="50" title="round"/>
  141.     <meta name="select:Caption Image Shape" content="0" title="square"/>
  142.    
  143.     <meta name="select:Audio Image Shape" content="25" title="round"/>
  144.     <meta name="select:Audio Image Shape" content="4" title="rounded corners"/>
  145.     <meta name="select:Audio Image Shape" content="0" title="square"/>
  146.    
  147.     <meta name="select:Controls" content=".4" title="gray"/>
  148.     <meta name="select:Controls" content="1" title="black"/>
  149.    
  150.     <meta name="select:Tiny Cursor" content="http://cur.cursors-4u.net/cursors/cur-9/cur817.cur" title="white"/>
  151.     <meta name="select:Tiny Cursor" content="http://media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png" title="black"/>
  152.    
  153.     <meta name="if:Infinite Scroll" content="1"/>
  154.     <meta name="if:Manually Load Content" content="1"/>
  155.     <meta name="if:Fade In On Refresh" content="1"/>
  156.     <meta name="if:Show Caption" content="1"/>
  157.     <meta name="if:Unnest Caption" content="0"/>
  158.     <meta name="if:Left Sidebar" content="1"/>
  159.     <meta name="if:Right Sidebar" content="0"/>
  160.     <meta name="if:Bounce To Top Link Effect" content="1"/>
  161.     <meta name="if:Bounce To Bottom Link Effect" content="0"/>
  162.     <meta name="if:Bounce To Right Link Effect" content="0"/>
  163.     <meta name="if:Bounce To Left Link Effect" content="0"/>
  164.     <meta name="text:Post Size" content="300"/>
  165.     <meta name="text:Permalink Post Size" content="540"/>
  166.     <meta name="text:Number of Columns" content="1"/>
  167.     <meta name="text:Post Side Margin" content="20"/>
  168.     <meta name="text:Post Side Padding" content="0"/>
  169.     <meta name="text:Post Bottom Margin" content="100"/>
  170.     <meta name="text:Sidebar Top Margin" content="0"/>
  171.     <meta name="text:SB Location" content="location"/>
  172.     <meta name="text:SB Mood" content="mood"/>
  173.    
  174.     <meta name="text:Link 1 URL" content="/"/>
  175.     <meta name="text:Link 1" content="home"/>
  176.     <meta name="text:Link 2 URL" content="/ask"/>
  177.     <meta name="text:Link 2" content="mssg"/>
  178.     <meta name="text:Link 3 URL" content="/archive"/>
  179.     <meta name="text:Link 3" content="map"/>
  180.     <meta name="text:Link 4 URL" content="/url"/>
  181.     <meta name="text:Link 4" content="link 4"/>
  182.     <meta name="text:Link 5 URL" content="/url"/>
  183.     <meta name="text:Link 5" content="link 5"/>
  184.     <meta name="text:Link 6 URL" content="/url"/>
  185.     <meta name="text:Link 6" content="link 6"/>
  186.    
  187.  
  188.     <style type="text/css">
  189.    
  190.     ::-webkit-scrollbar {width:11px; height:11px;}
  191.     ::-webkit-scrollbar-track {border:5px solid #fff; background-color:#eee;}
  192.     ::-webkit-scrollbar-thumb {
  193.         border:5px solid rgba(0, 0, 0, 0);
  194.         background-clip:padding-box;
  195.         background-color:rgba(0, 0, 0, 1);
  196.     }
  197.    
  198.     .tmblr-iframe {
  199.         position:relative;
  200.         top:10px !important;
  201.         right:4px !important;
  202.         z-index:900000000000000000000;
  203.         opacity:{select:Controls};
  204.         -webkit-filter: invert(100%);
  205.             -moz-filter:invert(100%);
  206.              -ms-filter:invert(100%);
  207.               -o-filter:invert(100%);
  208.                  filter:invert(100%);
  209.     }
  210.    
  211.     .tmblr-iframe:hover {opacity:.7;}
  212.  
  213.     ::selection {background-color:{color:Selection BG}; color:{color:Selection Text};}
  214.     ::-moz-selection {background-color:{color:Selection BG}; color:{color:Selection Text};}
  215.  
  216.     body {
  217.         opacity:1;
  218.         transition:.5s opacity;
  219.         font:{select:Body Font Size}px {select:Body Font Family}, calibri, sans-serif;
  220.         color:{color:Text};
  221.         background:{color:Background} url('{image:Background}') repeat fixed center;
  222.     }
  223.    
  224.     body.fade-out {opacity:0; transition:none;}
  225.    
  226.     body, a, a:hover {cursor:url({select:Tiny Cursor}), auto}
  227.    
  228.     a {text-decoration:none;}
  229.     a:link, a:visited {color:{color:Link};}
  230.     a:hover {color:{color:Link Hover};}
  231.     a:active {color:{color:Link};}
  232.    
  233.     i, em {color:{color:Italic};}
  234.     b, strong {color:{color:Bold};}
  235.     pre {
  236.         font-family:inherit !important;
  237.         white-space:pre-wrap;      
  238.         white-space:-moz-pre-wrap;  
  239.         white-space:-pre-wrap;      
  240.         white-space:-o-pre-wrap;  
  241.         word-wrap:break-word;      
  242.     }
  243.    
  244.     h6, small, big, sup, sub {font-size:1em;}
  245.     h4, h5, h6 {margin:6px 0;}
  246.     h5 {font-size:1.1em;}
  247.     h4 {font-size:1.2em;}
  248.     h3 {font-size:1.3em;}
  249.     h2 {font-size:1.4em;}
  250.     h1 {font-size:1.5em;}
  251.    
  252.     blockquote {
  253.         margin:0;
  254.         padding:0 10px;
  255.         border-left:1px solid {color:Blockquote Border};
  256.     }
  257.    
  258.     hr {border:1px solid {color:Blockquote Border};}
  259.    
  260.     ul {margin:0 0 0 -35px; list-style-type:none;}
  261.     ol {margin-left:-25px;}
  262.     ul > li:not(.like):not(.reblog):before {content:'—'; margin-right:5px;}
  263.    
  264.     img {max-width:100%; height:auto;}
  265.    
  266.     /*    posts    */
  267.    
  268.     #posts_container {
  269.         margin:0 auto;
  270.         left:auto;
  271.         right:auto;
  272.         margin-top:100px;
  273.         {block:Permalink}margin-top:60px;{/block:Permalink}
  274.         {block:IndexPage}width:calc(({text:Post Size}px - 4px + 2 * ({text:Post Side Padding}px + {text:Post Side Margin}px)) * {text:Number of Columns});{/block:IndexPage}
  275.         {block:Permalink}width:calc({text:Permalink Post Size}px + {text:Post Side Padding}px * 2 - 4px);{/block:Permalink}
  276.     }
  277.    
  278.     .posts {
  279.         {block:IndexPage}
  280.             margin-left:{text:Post Side Margin}px;
  281.             margin-right:{text:Post Side Margin}px;
  282.         {/block:IndexPage}
  283.         margin-bottom:{text:Post Bottom Margin}px;
  284.         padding:0 {text:Post Side Padding}px;
  285.         text-align:{select:Text Align};
  286.         overflow-wrap:break-word;  
  287.         word-wrap:break-word;
  288.         background-color:{color:Posts BG};
  289.     }
  290.    
  291.     .vertebrae {
  292.         margin:auto;
  293.         overflow:hidden;
  294.         {block:Permalink}width:calc({text:Permalink Post Size}px - 4px);{/block:Permalink}
  295.         {block:IndexPage}width:calc({text:Post Size}px - 4px);{/block:IndexPage}
  296.     }
  297.    
  298.     .photo-slideshow .count-1, .pancake {
  299.         {block:Permalink}width:{text:Permalink Post Size}px;{/block:Permalink}
  300.         {block:IndexPage}width:{text:Post Size}px;{/block:IndexPage}
  301.     }
  302.    
  303.     .photo-slideshow {position:relative;}
  304.     .photo-slideshow .count-3 {max-width:177px; margin-bottom:calc({select:Photoset Gutter}px + 2px);}
  305.     .photo-slideshow .row:last-of-type .count-3 {margin-bottom:0 !important;}
  306.     .photo-slideshow .count-3:last-child {float:right;}
  307.     .photo-slideshow .count-3:nth-child(2) {
  308.         max-width:178px;
  309.         position:absolute;
  310.         left:50%;
  311.         transform: translateX(-50%);
  312.         -webkit-transform: translateX(-50%)
  313.     }
  314.    
  315.     /*    photoset lightbox    */
  316.    
  317.     .vignette, #vignette {opacity:0;}
  318.    
  319.     .lightbox-image, #tumblr_lightbox img {
  320.         box-shadow:none !important;
  321.         max-width:none;
  322.         -moz-box-sizing:border-box;
  323.         box-sizing:border-box;
  324.     }
  325.    
  326.     .tmblr-lightbox, #tumblr_lightbox {background-color:rgba(255,255,255,.9) !important;}
  327.    
  328.     /*    caption / text   */
  329.    
  330.     .caption {margin:0 5px;}
  331.    
  332.     a.read_more {border-bottom:1px solid #f2f2f2;}
  333.     a.read_more:hover {border-bottom:1px solid #f0f0f0;}
  334.    
  335.     img.tumblr_avatar {
  336.         vertical-align:middle;
  337.         width:{select:Caption Image Size}px;
  338.         border-radius:{select:Caption Image Shape}%;
  339.     }
  340.    
  341.     .caption a.tumblr_blog, .caption a.tumblr_blog:hover {margin-left:7px; border:none;}
  342.  
  343.     .tumblr_parent p {padding-left:2px;}
  344.     blockquote.tumblr_parent {padding:3px 3px 0px 3px; padding-top:10px; border:none;}
  345.    
  346.     .text {padding:10px; {block:Permalink}text-align:left;{/block:Permalink}}
  347.        
  348.     .text_post_title, h1 {
  349.         position:relative;
  350.         top:-2px;
  351.         margin-bottom:4px;
  352.         padding:5px 8px 3px 8px;
  353.         {block:IndexPage}margin:0 auto; text-align:center;{/block:IndexPage}
  354.         text-transform:lowercase;
  355.         font-size:13px;
  356.         color:{color:Text Post Title};
  357.     }
  358.    
  359.     {block:IndexPage}
  360.     .text_post_title:after, h1:after {
  361.         content:'';
  362.         position:absolute;
  363.         left:calc(50% - 35px);
  364.         top:calc(100% + 5px);
  365.         width:70px;
  366.         height:1px;
  367.         border-top:1px solid #eee;
  368.     }
  369.     {/block:IndexPage}
  370.  
  371.     .caption p a, .text_post_title a, #answer a, .notes-container .action a, #notecontainer .action a {
  372.         position:relative;
  373.         -webkit-backface-visibility:hidden;
  374.         backface-visibility:hidden;
  375.         transition:0.5s color ease;
  376.     }
  377.    
  378.     .caption p a:after, .text_post_title a:after, #answer a:after, .notes-container .action a:after, #notecontainer .action a:after {
  379.         content:'';
  380.         position:absolute;
  381.         height:1px;
  382.         width:0;
  383.         left:50%;
  384.         background:{color:Link Hover};
  385.         transition:0.5s all ease;
  386.         -webkit-backface-visibility:hidden;
  387.         backface-visibility:hidden;
  388.         -webkit-transform:translateX(-50%);
  389.         transform:translateX(-50%);
  390.     }
  391.  
  392.     .caption p a:after, #answer a:after, .notes-container .action a:after, #notecontainer .action a:after {bottom:-0.1em;}
  393.    
  394.     .text_post_title a:after {bottom:-0.65em;}
  395.  
  396.     .caption p a:hover:after, #answer a:hover:after, .notes-container .action a:hover:after, #notecontainer .action a:hover:after {width:100%;}
  397.    
  398.     .text_post_title a:hover:after {width:70px;}
  399.    
  400.     /*    question    */
  401.  
  402.     #ask {padding:10px; background-color:{color:Post Accent};}
  403.  
  404.     #asker {border-bottom:1px solid {color:Asker BG};}
  405.     #asker a {
  406.         position:relative;
  407.         top:5px;
  408.         padding:7px 10px 5px 10px;
  409.         color:{color:Asker};
  410.         background-color:{color:Asker BG};
  411.     }
  412.    
  413.     #asker a:hover {color:{color:Link Hover};}
  414.    
  415.     #question {color:{color:Question}; font-style:italic;}
  416.    
  417.     #answer {padding:0 10px;}
  418.  
  419.     /*    quote    */
  420.    
  421.     #quote {color:{color:Quote}; padding:15px 10px 4px 10px;}
  422.     #quote:before {
  423.         content:'';
  424.         position:absolute;
  425.         left:calc(50% - 35px);
  426.         top:0;
  427.         width:70px;
  428.         height:1px;
  429.         border-top:1px solid #eee;
  430.     }
  431.  
  432.     #source {
  433.         padding:4px 10px 10px 10px;
  434.         text-transform:uppercase;
  435.         font-weight:bold;
  436.         font-size:8px;
  437.         color:{color:Quote Source};
  438.     }
  439.    
  440.     #source a {color:{color:Quote Source};}
  441.     #source a:hover {color:{color:Quote Source Hover};}
  442.    
  443.     /*    chat    */
  444.  
  445.     #chat {padding:10px;}
  446.    
  447.     #line #label {color:{color:Chat Label};}
  448.  
  449.     /*    audio player    */
  450.    
  451.     #audio_player_container {padding:10px; background-color:{color:Post Accent};}
  452.    
  453.     #album_art, #album_art img {border-radius:{select:Audio Image Shape}px;}
  454.     #album_art img {max-width:100%;}
  455.     #album_art {
  456.         position:absolute;
  457.         width:50px;
  458.         height:50px;
  459.         z-index:1;
  460.     }
  461.  
  462.     #audio_player_bg_container {
  463.         position:absolute;
  464.         width:48px;
  465.         height:48px;
  466.         margin-top:1px;
  467.         margin-left:1px;
  468.         z-index:9;
  469.         overflow:hidden;
  470.         opacity:0;
  471.         background-color:white;
  472.         border-radius:calc({select:Audio Image Shape}px - 1px);
  473.     }
  474.    
  475.     #audio_player_container:hover #audio_player_bg_container {opacity:1;}
  476.    
  477.     #audio_player_bg {
  478.         margin-top:14px;
  479.         margin-left:-4px;
  480.     }
  481.    
  482.     #track_details_container {
  483.         display:table;
  484.         height:50px;
  485.         margin-left:60px;
  486.         padding:0 5px;
  487.         font-weight:bold;
  488.         text-align:left;
  489.     }
  490.    
  491.     #track_details {display:table-cell; vertical-align:middle;}
  492.    
  493.     #track_name {
  494.         text-transform:lowercase;
  495.         font-size:14px;
  496.         color:{color:Track Info};
  497.         border-bottom:1px solid {color:Track Border};
  498.     }
  499.    
  500.     #artist_name {
  501.         text-transform:uppercase;
  502.         letter-spacing:1px;
  503.         font-size:7px;
  504.         color:{color:Track Info};
  505.     }
  506.  
  507.     .tumblr_audio_player {
  508.         height:130px;
  509.         width:1000px;
  510.         -moz-transform:scale(0.70, 0.70);
  511.         -webkit-transform:scale(0.70, 0.70);
  512.         -o-transform:scale(0.70, 0.70);
  513.         -ms-transform:scale(0.70, 0.70);
  514.         transform:scale(0.70, 0.70);
  515.         -moz-transform-origin:top left;
  516.         -webkit-transform-origin:top left;
  517.         -o-transform-origin:top left;
  518.         -ms-transform-origin:top left;
  519.         transform-origin:top left;
  520.     }
  521.    
  522.     /*    post info    */
  523.  
  524.     #blueberry {
  525.         padding-top:6px;
  526.         {block:Permalink}
  527.             margin-top:6px;
  528.             padding-bottom:10px;
  529.             overflow:auto;
  530.         {/block:Permalink}
  531.         color:{color:Post Info};
  532.         background-color:{color:Posts BG};
  533.     }
  534.  
  535.     #tags a {color:{color:Tags};}
  536.     #tags a:hover {color:{color:Link Hover};}
  537.  
  538.     #like_reblog {
  539.         float:right;
  540.         width:26px;
  541.         padding-bottom:5px;
  542.         padding-right:8px;
  543.         text-align:right;
  544.     }
  545.    
  546.     #tags_box {
  547.         float:left;
  548.         width:calc({text:Post Size}px - 70px);
  549.         {block:Permalink}width:calc({text:Permalink Post Size}px - 70px);{/block:Permalink}
  550.         {block:IndexPage}padding-bottom:5px;{/block:IndexPage}
  551.         padding-left:8px;
  552.         text-align:left;
  553.         font-size:9px;
  554.     }
  555.    
  556.     .control {
  557.         display:inline-block;
  558.         position:relative;
  559.         font-size:11px;
  560.         color:{color:Like Reblog Buttons};
  561.     }
  562.    
  563.     .control .like_button:hover {color:{color:Like Reblog Buttons Hover};}
  564.     .control .like_button::before, .control .reblog_button::before {display:block; line-height:1;}
  565.  
  566.     .like_button.liked {color:{color:Like Button Liked};}
  567.     .like_button.liked:hover {color:{color:Like Reblog Buttons Hover};}
  568.     .like_button iframe {
  569.         display:block;
  570.         position:absolute;
  571.         top:0;
  572.         right:0;
  573.         bottom:0;
  574.         left:0;
  575.         margin:0;
  576.         opacity:0;
  577.     }
  578.    
  579.     .post_icon_wrapper {
  580.         {block:IndexPage}
  581.             position:absolute;
  582.             width:calc({text:Post Size}px * 1 / 5);
  583.             height:40px;
  584.             top:-40px;
  585.             margin-left:-{text:Post Side Padding}px;
  586.         {/block:IndexPage}
  587.         {block:Permalink}
  588.             width:25%;
  589.             height:40px;
  590.         {/block:Permalink}
  591.         display:table;
  592.         z-index:9;
  593.         text-align:center;
  594.         background-color:{color:Post Icon BG};
  595.     }
  596.    
  597.     .post_icon {display:table-cell; vertical-align:middle;}
  598.    
  599.     #post_info_container {
  600.         {block:IndexPage}
  601.             position:absolute;
  602.             width:calc({text:Post Size}px * 4 / 5 - 4px + {text:Post Side Padding}px * 2);
  603.             height:38px;
  604.             top:-40px;
  605.             margin-left:calc({text:Post Size}px * 1 / 5 - {text:Post Side Padding}px);
  606.         {/block:IndexPage}
  607.         {block:Permalink}
  608.             position:absolute;
  609.             top:60px;
  610.             height:38px;
  611.             margin-left:calc(({text:Permalink Post Size}px - 4px) / 4);
  612.             width:calc(({text:Permalink Post Size}px - 4px) * 3 / 4);
  613.         {/block:Permalink}
  614.         display:table;
  615.         font:9px karla;
  616.         color:{color:Post Info};
  617.         background-color:{color:Post Info BG};
  618.         border-bottom:2px solid {color:Post Icon BG};
  619.        
  620.     }
  621.    
  622.     #post_info_container a {color:{color:Post Info};}
  623.     #post_info_container a:hover {color:{color:Post Info Hover};}
  624.     #post_info_container .notes-container a {color:{color:Post Notes Link};}
  625.     #post_info_container .notes-container a:hover {color:{color:Post Info Hover};}
  626.    
  627.     #post_info {
  628.         display:table-cell;
  629.         width:{text:Post Size}px;
  630.         {block:Permalink}width:100%;{/block:Permalink}
  631.         vertical-align:middle;
  632.         text-align:center;
  633.     }
  634.    
  635.     .details {
  636.         display:inline-block;
  637.         width:calc(({text:Post Size}px - 4px) / 3 - 42px);
  638.         {block:Permalink}width:calc(33% - 5px);{/block:Permalink}
  639.         padding:0 2px;
  640.         white-space:nowrap;
  641.         overflow:hidden;
  642.         text-overflow:ellipsis;
  643.     }
  644.    
  645.     /*    post notes    */
  646.    
  647.     #notecontainer .notes {
  648.         margin-bottom:30px;
  649.         max-height:400px;
  650.         overflow-y:auto;
  651.         overflow-wrap:break-word;  
  652.         word-wrap:break-word;
  653.         background-color:{color:Posts BG};
  654.     }
  655.  
  656.     #notecontainer ol {
  657.         list-style-type:none;
  658.         margin:70px 0 0 0;
  659.         padding:10px;
  660.     }
  661.  
  662.     .notes-container {
  663.         display:none;
  664.         position:absolute;
  665.         margin-left:-30px;
  666.         width:300px;
  667.         max-height:300px;
  668.         z-index:9999999999 !important;
  669.         white-space:nowrap;
  670.         overflow:auto;
  671.         text-align:center;
  672.         font-family:{select:Body Font Family};
  673.         font-size:10px;
  674.         background:{color:Posts BG};
  675.         -webkit-box-shadow: 1px 2px 14px -3px rgba(224,224,224,1);
  676.         -moz-box-shadow: 1px 2px 14px -3px rgba(224,224,224,1);
  677.         box-shadow: 1px 2px 14px -3px rgba(224,224,224,1);
  678.     }
  679.    
  680.     .notes-container ol.notes {
  681.         list-style:none;
  682.         margin:10px;
  683.         padding:5px;
  684.         text-align:left;
  685.     }
  686.    
  687.     .notes-container li {overflow-x:hidden; text-overflow:ellipsis;}
  688.    
  689.     #notecontainer li, .notes-container li {padding:8px 5px; color:{color:Text};}
  690.    
  691.     #c img {height:100%; opacity:.8;}
  692.     #c img:hover {opacity:.4;}
  693.     #c {
  694.         position:fixed;
  695.         z-index:9999999999999999999999999999;
  696.         bottom:7px;
  697.         right:12px;
  698.         height:24px;
  699.     }
  700.    
  701.     #notecontainer a {color:{color:Post Notes Link};}
  702.    
  703.     .retags {padding-left:25px;}
  704.     .retags a, .retags.error {
  705.         text-transform:uppercase !important;
  706.         letter-spacing:2px !important;
  707.         font-weight:bold !important;
  708.         font-size:7px !important;
  709.     }
  710.    
  711.     #notecontainer a:hover, #notecontainer .retags a:hover, #post_info_container .notes-container .retags a:hover, .retags.error {color:{color:Link Hover} !important;}
  712.    
  713.     #notecontainer .answer_content, .notes-container .answer_content {font-style:italic; color:{color:Italic};}
  714.  
  715.     #notecontainer blockquote, .notes-container blockquote {
  716.         border-color:transparent;
  717.         margin:10px 5px 10px 20px;
  718.         font-style:italic;
  719.     }
  720.    
  721.     #notecontainer img.avatar, .notes-container img.avatar {
  722.         margin-right:10px;
  723.         width:16px;
  724.         height:16px;
  725.         vertical-align:middle;
  726.         border-radius:8px;
  727.     }
  728.    
  729.     .lnr {font-size:10px; color:{color:Post Info};}
  730.     .lnr-user {font-size:9px;}
  731.     .lnr-tag {vertical-align:middle;}
  732.     .lnr-chevron-up {color:{color:Scroll to top};}
  733.     .post_icon .lnr {font-size:19px; color:{color:Post Icon};}
  734.     .lnr-redo {color:{color:Like Reblog Buttons};}
  735.     .lnr-redo:hover {color:{color:Like Reblog Buttons Hover};}
  736.    
  737.     /*    sidebar    */
  738.    
  739.     #sidebar {
  740.         position:fixed;
  741.         {block:Permalink}
  742.             {block:ifLeftSidebar}left:calc(50% - ({text:Permalink Post Size}px + {text:Post Side Padding}px * 2 - 4px) / 2 - 220px - 70px);{/block:ifLeftSidebar}
  743.             {block:ifRightSidebar}left:calc(50% + ({text:Permalink Post Size}px + {text:Post Side Padding}px * 2 - 4px) / 2 + 60px);{/block:ifRightSidebar}
  744.         {/block:Permalink}
  745.         {block:IndexPage}
  746.             {block:ifLeftSidebar}left:calc(50% - (({text:Post Size}px - 4px + 2 * ({text:Post Side Padding}px + {text:Post Side Margin}px)) * {text:Number of Columns}) / 2 - 220px - 70px + {text:Post Side Margin}px);{/block:ifLeftSidebar}
  747.             {block:ifRightSidebar}left:calc(50% + (({text:Post Size}px - 4px + 2 * ({text:Post Side Padding}px + {text:Post Side Margin}px)) * {text:Number of Columns}) / 2 + 60px - {text:Post Side Margin}px);{/block:ifRightSidebar}
  748.         {/block:IndexPage}
  749.         top:calc(60px + {text:Sidebar Top Margin}px);
  750.         padding:10px 7px;
  751.         width:220px;
  752.         z-index:9999;
  753.         text-align:center;
  754.         background:{color:SB BG};
  755.     }
  756.    
  757.     #sidebar a {color:{color:SB Links};}
  758.     #sidebar a:hover {color:{color:SB Links Hover};}
  759.    
  760.     #un {margin-top:7px;}
  761.     #un .lnr:not(.lnr-calendar-full) {padding-right:1px;}
  762.     #un .lnr {
  763.         font-size:11px;
  764.         vertical-align:middle;
  765.         color:{color:SB Icons};
  766.     }
  767.    
  768.     #m1, #m2, #m3 {
  769.         display:inline-block;
  770.         width:31%;
  771.         text-align:center;
  772.     }
  773.    
  774.     .stay {display:inline-block; width:45px!important;}
  775.     .data {color:{color:SB Data};}
  776.    
  777.     #deux {
  778.         display:table;
  779.         padding:20px 0 10px 0;
  780.         clear:both;
  781.         margin:0 auto;
  782.     }
  783.    
  784.     #sbimg {width:50px; height:50px;}
  785.     #sbimg img {max-width:100%; border-radius:{select:SB Icon Shape}px;}
  786.     #sbimg img:hover {opacity:.5;}
  787.     #sbimg, #ttl {display:table-cell; vertical-align:middle;}
  788.    
  789.     #ttl {padding-left:10px; text-align:left;}
  790.    
  791.     #title {
  792.         padding-top:3px;
  793.         text-transform:lowercase;
  794.         font-weight:bold;
  795.         font-size:14px;
  796.         color:{color:SB Title};
  797.         border-top:2px solid {color:SB Title Border};
  798.     }
  799.    
  800.     form {
  801.         display:inline-block;
  802.         padding-bottom:4px;
  803.         background:{color:Sidebar BG};
  804.     }
  805.    
  806.     #sfm input {
  807.         width:50px;
  808.         border:none;
  809.         outline:none;
  810.         color:{color:SB Search};
  811.         font:10px {select:Body Font Family};
  812.     }
  813.    
  814.     ::-webkit-input-placeholder {color:{color:SB Search};}
  815.     :-moz-placeholder {color:{color:SB Search}; opacity:1;}
  816.     ::-moz-placeholder {color:{color:SB Search}; opacity:1;}
  817.     :-ms-input-placeholder {color:{color:SB Search};}
  818.    
  819.     .lnr-magnifier {
  820.         position:relative;
  821.         display:inline-block;
  822.         font-weight:bold;
  823.         font-size:7px;
  824.         color:{color:SB Search};
  825.     }
  826.    
  827.     #trois a {color:{color:SB Description Links};}
  828.     #trois {
  829.         padding:7px 0;
  830.         font-style:normal;
  831.         color:{color:SB Description};
  832.     }
  833.    
  834.     #quatre {
  835.         padding-bottom:5px;
  836.         text-transform:uppercase;
  837.         font-size:10px;
  838.     }
  839.    
  840.     #quatre a {
  841.         display:inline-block;
  842.         margin:4px 6px;
  843.         padding:3px 9px;
  844.         width:40px;
  845.         background:{color:SB Links BG};
  846.         border:1px solid {color:SB Links Border};
  847.     }
  848.    
  849.     #quatre a.current {color:{color:SB Links Hover}; background:{color:SB Links Hover BG};}
  850.        
  851.     #footer {
  852.         position:relative;
  853.         margin:0 auto;
  854.         bottom:50px;
  855.         width:200px;
  856.         height:30px;
  857.         text-transform:uppercase;
  858.         text-align:center;
  859.         font-size:10px;
  860.     }
  861.    
  862.     #footer a {
  863.         margin:4px 6px;
  864.         padding:5px 9px;
  865.         width:60px;
  866.         color:{color:SB Links};
  867.         background:{color:SB Links BG};
  868.         border:1px solid {color:SB Links Border};
  869.     }
  870.    
  871.     #footer a:hover {color:{color:SB Links Hover};}
  872.    
  873.     #pagination {padding:15px 5px;}
  874.    
  875.     .hvr-bounce-to-top:before, .hvr-bounce-to-bottom:before, .hvr-bounce-to-left:before, .hvr-bounce-to-right:before {background:{color:SB Links Hover BG};}
  876.    
  877.     #s-m-t-tooltip {
  878.         max-width:300px;
  879.         margin:13px 18px 7px 8px;
  880.         padding:5px;
  881.         z-index:999999999999999999;
  882.         text-shadow:none;
  883.         text-transform:uppercase;
  884.         letter-spacing:1px;
  885.         font:bold 7px karla, calibri, sans-serif;
  886.         color:{color:Tooltip Text};
  887.         background-color:{color:Tooltip BG};
  888.         border:1px solid {color:Tooltip Border};
  889.     }
  890.    
  891.     #scrolltotop {
  892.         position:fixed;
  893.         width:40px;
  894.         bottom:35px;
  895.         right:-70px;
  896.         padding:5px;
  897.         z-index:99999;
  898.         text-align:center;
  899.         color:{color:Scroll to top};
  900.         cursor:pointer;
  901.     }
  902.    
  903.     #scrolltotop:hover, #scrolltotop:hover .lnr-chevron-up {color:{color:Scroll to top Hover};}
  904.    
  905.     a, a:hover, img, img:hover, #audio_player_bg_container, #audio_player_container:hover #audio_player_bg_container, #icon, #icon:hover, .control .like_button, .control .like_button:hover, .control .reblog_button:hover, #scrolltotop, #scrolltotop:hover, .lnr, .lnr:hover, .tmblr-iframe, .tmblr-iframe:hover {transition-duration:.5s;}
  906.    
  907.     </style>
  908.    
  909. </head>
  910.  
  911. <body>
  912.  
  913. {block:ifFadeInOnRefresh}<script>document.body.className += ' fade-out';</script>{/block:ifFadeInOnRefresh}
  914.  
  915. <div id="sidebar">
  916.     <div id="un">
  917.         <div id="m1">
  918.             <span class="lnr lnr-calendar-full"></span>
  919.             <span class="data stay" id="date"></span>
  920.         </div>
  921.         <div id="m2">
  922.             <span class="lnr lnr-map-marker"></span>
  923.             <span class="data">{text:SB Location}</span>
  924.         </div>
  925.         <div id="m3">
  926.             <span class="lnr lnr-heart-pulse"></span>
  927.             <span class="data">{text:SB Mood}</span>
  928.         </div>
  929.     </div>
  930.  
  931.     <script>
  932.         function checkTime(i) {
  933.             return (i < 10) ? "0" + i : i;
  934.       }
  935.       function startTime() {
  936.           var today = new Date(),
  937.           h = checkTime(today.getHours()),
  938.           m = checkTime(today.getMinutes()),
  939.           s = checkTime(today.getSeconds());
  940.           document.getElementById('date').innerHTML = h + ":" + m + ":" + s;
  941.           t = setTimeout(function () {
  942.               startTime()
  943.           }, 500);
  944.       }
  945.       startTime();
  946.   </script>
  947.  
  948.     <div id="deux">
  949.         <div id="sbimg"><a href="/"><img src="{image:Sidebar Icon}"></a></div>
  950.         <div id="ttl">
  951.             <script language="javascript">function send(){document.searchf.submit()}</script>
  952.             <i class="lnr lnr-magnifier" aria-hidden="true"></i>&nbsp;
  953.             <form action="/search" method="get" id="sfm" name="searchf">
  954.                 <input type="text" name="q" value=""/ placeholder="Search">
  955.             </form>  
  956.             <div id="title">{Title}</div>
  957.         </div>
  958.     </div>
  959.    
  960.     <div id="trois">{Description}</div>
  961.    
  962.     <div id="quatre">
  963.  
  964.         <a class="hvr-bounce-to-{block:ifBounceToTopLinkEffect}top{/block:ifBounceToTopLinkEffect}{block:ifBounceToBottomLinkEffect}bottom{/block:ifBounceToBottomLinkEffect}{block:ifBounceToRightLinkEffect}right{/block:ifBounceToRightLinkEffect}{block:ifBounceToLeftLinkEffect}left{/block:ifBounceToLeftLinkEffect}" href="{text:Link 1 URL}">{text:Link 1}</a>
  965.        
  966.         <a class="hvr-bounce-to-{block:ifBounceToTopLinkEffect}top{/block:ifBounceToTopLinkEffect}{block:ifBounceToBottomLinkEffect}bottom{/block:ifBounceToBottomLinkEffect}{block:ifBounceToRightLinkEffect}right{/block:ifBounceToRightLinkEffect}{block:ifBounceToLeftLinkEffect}left{/block:ifBounceToLeftLinkEffect}" href="{text:Link 2 URL}">{text:Link 2}</a><br/>
  967.        
  968.         <a class="hvr-bounce-to-{block:ifBounceToTopLinkEffect}top{/block:ifBounceToTopLinkEffect}{block:ifBounceToBottomLinkEffect}bottom{/block:ifBounceToBottomLinkEffect}{block:ifBounceToRightLinkEffect}right{/block:ifBounceToRightLinkEffect}{block:ifBounceToLeftLinkEffect}left{/block:ifBounceToLeftLinkEffect}" href="{text:Link 3 URL}">{text:Link 3}</a>
  969.        
  970.         <a class="hvr-bounce-to-{block:ifBounceToTopLinkEffect}top{/block:ifBounceToTopLinkEffect}{block:ifBounceToBottomLinkEffect}bottom{/block:ifBounceToBottomLinkEffect}{block:ifBounceToRightLinkEffect}right{/block:ifBounceToRightLinkEffect}{block:ifBounceToLeftLinkEffect}left{/block:ifBounceToLeftLinkEffect}" href="{text:Link 4 URL}">{text:Link 4}</a><br/>
  971.        
  972.         <a class="hvr-bounce-to-{block:ifBounceToTopLinkEffect}top{/block:ifBounceToTopLinkEffect}{block:ifBounceToBottomLinkEffect}bottom{/block:ifBounceToBottomLinkEffect}{block:ifBounceToRightLinkEffect}right{/block:ifBounceToRightLinkEffect}{block:ifBounceToLeftLinkEffect}left{/block:ifBounceToLeftLinkEffect}" href="{text:Link 5 URL}">{text:Link 5}</a>
  973.        
  974.         <a class="hvr-bounce-to-{block:ifBounceToTopLinkEffect}top{/block:ifBounceToTopLinkEffect}{block:ifBounceToBottomLinkEffect}bottom{/block:ifBounceToBottomLinkEffect}{block:ifBounceToRightLinkEffect}right{/block:ifBounceToRightLinkEffect}{block:ifBounceToLeftLinkEffect}left{/block:ifBounceToLeftLinkEffect}" href="{text:Link 6 URL}">{text:Link 6}</a>
  975.      
  976.     </div>
  977.  
  978. </div>
  979.  
  980.  
  981. <!-- posts container -->
  982. <div id="posts_container">
  983.     <!-- posts -->
  984.     {block:Posts}
  985.     <div class="posts entry" id="{PostID}">
  986.  
  987.         <!-- post info -->
  988.  
  989.         {block:Date}
  990.         <div id="post_info_container">
  991.             <div id="post_info">
  992.                 <div class="details">
  993.                     <span class="lnr lnr-user"></span>&nbsp;
  994.                     {block:RebloggedFrom}<a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>{/block:RebloggedFrom}
  995.                 </div>
  996.  
  997.                 <div class="details">
  998.                     <span class="lnr lnr-pencil"></span>&nbsp;
  999.                     <a href="{Permalink}" title="{TimeAgo} / {24Hour}:{Minutes}:{Seconds}">{DayOfMonthWithZero} {ShortMonth} {ShortYear}</a>
  1000.                 </div>
  1001.  
  1002.                 <div class="details">
  1003.                     <span class="lnr lnr-star"></span>&nbsp;
  1004.                     {block:NoteCount}
  1005.                     {block:IndexPage}
  1006.                     <a href="{postNotesURL}" rel="{postID}"  class="notes-button">{NoteCount}</a>
  1007.                     <div class="notes-container" id="notes-{postID}">
  1008.                         <p class="loading"><img src="http://static.tumblr.com/0cdn90j/Ftxnsd5zy/ajax-loader.gif"></p>
  1009.                         <div class="notes-loader"></div>
  1010.                     </div>
  1011.                     {/block:IndexPage}
  1012.                     {block:Permalink}{NoteCount}{/block:Permalink}
  1013.                     {/block:NoteCount}
  1014.                 </div>
  1015.             </div>
  1016.         </div>
  1017.         {/block:Date}
  1018.        
  1019.         <!-- text post -->
  1020.            
  1021.         {block:Text}
  1022.         {block:Date}
  1023.         <div class="post_icon_wrapper">
  1024.             <div class="post_icon">
  1025.                 <span class="lnr lnr-text-align-left"></span>
  1026.             </div>
  1027.         </div>
  1028.         {/block:Date}
  1029.         <div class="vertebrae">
  1030.             {block:Title}<div class="text_post_title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1031.             <div class="caption text">{Body}</div>
  1032.         </div>
  1033.         {/block:Text}
  1034.            
  1035.         <!-- link post -->
  1036.  
  1037.         {block:Link}
  1038.         <div class="post_icon_wrapper">
  1039.             <div class="post_icon">
  1040.                 <span class="lnr lnr-text-align-left"></span>
  1041.             </div>
  1042.         </div>
  1043.         <div class="vertebrae">
  1044.             <div class="text_post_title"><a href="{URL}">{Name}</a></div>
  1045.             <div class="caption">{block:Description}{Description}{/block:Description}</div>
  1046.         </div>
  1047.         {/block:Link}
  1048.  
  1049.         <!-- quote post -->
  1050.  
  1051.         {block:Quote}
  1052.         <div class="post_icon_wrapper">
  1053.             <div class="post_icon">
  1054.                 <span class="lnr lnr-text-size"></span>
  1055.             </div>
  1056.         </div>
  1057.         <div class="vertebrae">
  1058.             <div id="quote">{Quote}</div>
  1059.             {block:Source}<div id="source">&mdash;&nbsp;{Source}</div>{/block:Source}
  1060.         </div>
  1061.         {/block:Quote}
  1062.  
  1063.         <!-- chat post -->
  1064.  
  1065.         {block:Chat}
  1066.         <div class="post_icon_wrapper">
  1067.             <div class="post_icon">
  1068.                 <span class="lnr lnr-bubble"></span>
  1069.             </div>
  1070.         </div>
  1071.         <div class="vertebrae">
  1072.             {block:Title}<div class="text_post_title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1073.             <div id="chat">
  1074.                 <ul>{block:Lines}<li id="line">{block:Label}<span id="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>
  1075.             </div>
  1076.         </div>
  1077.         {/block:Chat}
  1078.  
  1079.         <!-- question post -->
  1080.  
  1081.         {block:Answer}
  1082.         <div class="post_icon_wrapper">
  1083.             <div class="post_icon">
  1084.                 <span class="lnr lnr-paw"></span>
  1085.             </div>
  1086.         </div>
  1087.         <div class="vertebrae">
  1088.             <div id="ask">
  1089.                 <div id="asker">{Asker}</div><br/>
  1090.                 <div id="question">{Question}</div>
  1091.             </div>
  1092.             <div id="answer">{Answer}</div>
  1093.             {block:ifShowCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifShowCaption}
  1094.         </div>
  1095.         {/block:Answer}
  1096.  
  1097.         <!-- audio post -->
  1098.  
  1099.         {block:AudioPlayer}
  1100.         <div class="post_icon_wrapper">
  1101.             <div class="post_icon">
  1102.                 <span class="lnr lnr-music-note"></span>
  1103.             </div>
  1104.         </div>
  1105.         <div class="vertebrae">
  1106.             <div id="audio_player_container">
  1107.                 <div id="album_art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1108.                 <div id="audio_player_bg_container"><div id="audio_player_bg">{AudioPlayer}</div></div>
  1109.                 <div id="track_details_container">
  1110.                     <div id="track_details">
  1111.                         {block:TrackName}<span id="track_name">{TrackName}</span>{/block:TrackName}<br />
  1112.                         {block:Artist}<span id="artist_name">{Artist}</span>{/block:Artist}<br />
  1113.                     </div>
  1114.                 </div>
  1115.             </div>
  1116.             {block:ifShowCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifShowCaption}
  1117.         </div>
  1118.         {/block:AudioPlayer}
  1119.  
  1120.         <!-- photo post -->
  1121.  
  1122.         {block:Photo}
  1123.         <div class="post_icon_wrapper">
  1124.             <div class="post_icon">
  1125.                 <span class="lnr lnr-camera"></span>
  1126.             </div>
  1127.         </div>
  1128.         <div class="vertebrae">
  1129.             <div class="pancake">
  1130.                 {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}
  1131.             {block:ifShowCaption}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifShowCaption}
  1132.             </div>
  1133.         </div>
  1134.         {/block:Photo}
  1135.  
  1136.         <!-- photoset post -->
  1137.  
  1138.         {block:Photoset}
  1139.         <div class="post_icon_wrapper">
  1140.             <div class="post_icon">
  1141.                 <span class="lnr lnr-camera"></span>
  1142.             </div>
  1143.         </div>
  1144.         <div class="vertebrae">
  1145.             <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1146.                 {block:Photos}
  1147.                 <div class="photo-data">
  1148.                     <div class="pxu-photo">
  1149.                         <img src="{PhotoURL-500}"  width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1150.                     </div>
  1151.                     <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1152.                 </div>
  1153.                 {/block:Photos}
  1154.             </div>
  1155.             {block:ifShowCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifShowCaption}
  1156.         </div>
  1157.         {/block:Photoset}
  1158.  
  1159.         <!-- video post -->
  1160.  
  1161.         {block:Video}
  1162.         <div class="post_icon_wrapper">
  1163.             <div class="post_icon">
  1164.                 <span class="lnr lnr-film-play"></span>
  1165.             </div>
  1166.         </div>
  1167.         <div class="vertebrae">
  1168.             <div class="video">{Video-500}</div>
  1169.             {block:ifShowCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifShowCaption}
  1170.         </div>
  1171.         {/block:Video}
  1172.        
  1173.        
  1174.         {block:Date}
  1175.         <div id="blueberry">
  1176.             <div id="tags_box">
  1177.                 {block:HasTags}
  1178.                 <div id="tags">
  1179.                     <span style="width:10px;float:left;"><i class="lnr lnr-tag"></i></span>
  1180.                     <span style="width:calc(100% - 10px);float:left;">{block:Tags}&nbsp;<a href="{TagURL}">{Tag};&nbsp;</a>{/block:Tags}</span>
  1181.                 </div>
  1182.                 {/block:HasTags}
  1183.             </div>
  1184.             <div id="like_reblog">
  1185.                 <div class="control reblog-control">
  1186.                     <a href="{ReblogURL}" target="_blank" title="Reblog"><i class="lnr lnr-redo" style="font-weight:bold; font-size:9px; margin-top:1px;"></i></a>
  1187.                 </div>
  1188.                 <div class="control like-control">{LikeButton size="13" color="black"}</div>
  1189.             </div>  
  1190.         </div>
  1191.         {/block:Date}
  1192.  
  1193.         {block:IndexPage}<!--{block:RebloggedFrom}<a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}-->{/block:IndexPage}
  1194.        
  1195.        
  1196.     </div>
  1197.     <!-- end posts -->
  1198.  
  1199.     {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  1200.    
  1201.     <div id="notecontainer">{PostNotes}</div>
  1202.    
  1203. {/block:Posts}
  1204.  
  1205. </div>
  1206. <!-- end posts container -->
  1207.  
  1208. {block:ifNotInfiniteScroll}
  1209. <div id="footer">
  1210.     {block:Pagination}
  1211.     <div id="pagination">
  1212.         {block:PreviousPage}<a href="{PreviousPage}" class="hvr-bounce-to-{block:ifBounceToTopLinkEffect}top{/block:ifBounceToTopLinkEffect}{block:ifBounceToBottomLinkEffect}bottom{/block:ifBounceToBottomLinkEffect}{block:ifBounceToRightLinkEffect}right{/block:ifBounceToRightLinkEffect}{block:ifBounceToLeftLinkEffect}left{/block:ifBounceToLeftLinkEffect}">prev</a>{/block:PreviousPage}
  1213.         {block:NextPage}<a href="{NextPage}" class="hvr-bounce-to-{block:ifBounceToTopLinkEffect}top{/block:ifBounceToTopLinkEffect}{block:ifBounceToBottomLinkEffect}bottom{/block:ifBounceToBottomLinkEffect}{block:ifBounceToRightLinkEffect}right{/block:ifBounceToRightLinkEffect}{block:ifBounceToLeftLinkEffect}left{/block:ifBounceToLeftLinkEffect}">next</a>{/block:NextPage}
  1214.     </div>
  1215.     {/block:Pagination}
  1216. </div>
  1217. {/block:ifNotInfiniteScroll}
  1218.  
  1219. {block:IndexPage}
  1220.     {block:ifInfiniteScroll}
  1221.         <div class="navigation" id="navigation">
  1222.             {block:Pagination}
  1223.                 {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  1224.                 {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}
  1225.             {/block:Pagination}
  1226.         </div>
  1227.        
  1228.         {block:ifManuallyLoadContent}
  1229.             <div id="footer"><div id="manual"><a id="loadmore" class="hvr-bounce-to-{block:ifBounceToTopLinkEffect}top{/block:ifBounceToTopLinkEffect}{block:ifBounceToBottomLinkEffect}bottom{/block:ifBounceToBottomLinkEffect}{block:ifBounceToRightLinkEffect}right{/block:ifBounceToRightLinkEffect}{block:ifBounceToLeftLinkEffect}left{/block:ifBounceToLeftLinkEffect}" href="{text:Link 1 URL}">Load More</a></div></div>
  1230.         {/block:ifManuallyLoadContent}
  1231.     {/block:IfInfiniteScroll}
  1232. {/block:IndexPage}
  1233.  
  1234. <div id="scrolltotop"><i class="lnr lnr-chevron-up" aria-hidden="true"></i><br>Scroll to top</div>
  1235.  
  1236. <!-- scripts -->
  1237.  
  1238. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  1239. <script>
  1240. $(function(){
  1241.   $('#quatre a').each(function() {
  1242.     if ($(this).prop('href') == window.location.href) {
  1243.       $(this).addClass('current');
  1244.     }
  1245.   });
  1246. });
  1247. </script>
  1248.  
  1249. {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="c"><a href="http://felinum.tumblr.com" title="theme by felinum"><img src="http://static.tumblr.com/0cdn90j/ZjQobhv98/snowshoe-cat.png"></a></div><script type="text/javascript" src="https://cdn.rawgit.com/micaelis/tmblrnotes/master/notes.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
  1250.  
  1251. {block:ifRightSidebar}
  1252. <script>
  1253.     if($("#sidebar").offset().left > $(window).width() - 240){
  1254.         $('#sidebar').css({"left":"calc(100% - 240px)"});
  1255.     }
  1256. </script>
  1257. {/block:ifRightSidebar}
  1258. {block:ifLeftSidebar}
  1259. <script>
  1260.     if($("#sidebar").offset().left < 0){
  1261.       $('#sidebar').css({"left":"0"});
  1262.   }
  1263. </script>
  1264. {/block:ifLeftSidebar}
  1265. <script>
  1266.     $(document).ready(function() {
  1267.         var el = $(".posts")[ 0 ];;
  1268.         if (el.innerHTML.indexOf("The URL you requested could not be found.") !== -1) {$(".post_icon_wrapper").css("opacity", "0");}
  1269.     });
  1270. </script>
  1271. <script>
  1272.     $(document).ready(function(){
  1273.         $('.photo-slideshow').pxuPhotoset({
  1274.             lightbox:true,
  1275.             rounded:false,
  1276.             gutter:'{select:Photoset Gutter}px',
  1277.             photoset:'.photo-slideshow',
  1278.             photoWrap:'.photo-data',
  1279.             photo:'.pxu-photo'
  1280.         });
  1281.         {block:ifUnnestCaption}
  1282.         $('.posts').unnest({
  1283.             yourCaption:'.caption',
  1284.             newCaptionUsername:false,
  1285.             originalPostCaptionUsername:false,
  1286.             tumblrAvatars:true,
  1287.             tumblrAvatarClass:'.tumblr_avatar',
  1288.             usernameColon:false
  1289.         });
  1290.         {/block:ifUnnestCaption}
  1291.         {block:IndexPage}
  1292.         var $container = $('#posts_container');
  1293.         $container.imagesLoaded(function(){
  1294.             $container.masonry({
  1295.                 itemSelector:'.posts',
  1296.             });
  1297.         });
  1298.         {block:ifInfiniteScroll}
  1299.         $container.infinitescroll({
  1300.             navSelector:'#navigation',
  1301.             nextSelector:'#navigation a#nextPage',
  1302.             itemSelector:'.posts',
  1303.             loadingImg:'',
  1304.             loadingText:'<em></em>',
  1305.             bufferPx:2000
  1306.         },
  1307.             function(newElements){
  1308.                 var $newElems = $( newElements ).css({opacity: 0});
  1309.                 resizeVideos();
  1310.                 var $newElemsIDs = $newElems.map(function(){
  1311.                     return this.id;
  1312.                 }).get();
  1313.                 homeNotes();
  1314.                 $newElems.find('.photo-slideshow').pxuPhotoset({
  1315.                     lightbox:true,
  1316.                     rounded:false,
  1317.                     gutter:'{select:Photoset Gutter}px',
  1318.                     photoset:'.photo-slideshow',
  1319.                     photoWrap:'.photo-data',
  1320.                     photo:'.pxu-photo'
  1321.                 });
  1322.                 {block:ifUnnestCaption}
  1323.                 $newElems.unnest({
  1324.                     yourCaption:'.caption',
  1325.                     newCaptionUsername:false,
  1326.                     originalPostCaptionUsername:false,
  1327.                     tumblrAvatars:true,
  1328.                     tumblrAvatarClass:'.tumblr_avatar',
  1329.                     usernameColon:false
  1330.                 });
  1331.                 {/block:ifUnnestCaption}
  1332.                 $newElems.imagesLoaded(function(){
  1333.                     $newElems.animate({opacity: 1});
  1334.                     $container.masonry('appended', $newElems, true);
  1335.                     console.log($newElems, $newElemsIDs);
  1336.                     Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1337.                 });
  1338.                
  1339.             }
  1340.         );
  1341.         {block:ifManuallyLoadContent}
  1342.         $(window).unbind('.infscr');
  1343.         $("#loadmore").click(function(){
  1344.             $container.infinitescroll('retrieve');
  1345.             return false;
  1346.         });
  1347.         {/block:ifManuallyLoadContent}
  1348.         {/block:ifInfiniteScroll}
  1349.         {/block:IndexPage}
  1350.     });
  1351. </script>
  1352. <script>
  1353.     $(function() {
  1354.         $('body').removeClass('fade-out');
  1355.     });
  1356. </script>
  1357. <script type="text/javascript">
  1358.     $(document).ready(function(){
  1359.         $(window).scroll(function(){
  1360.             if ($(this).scrollTop() > 400){
  1361.                 $('#scrolltotop').stop().animate({right:'0px'});
  1362.             }
  1363.             else {
  1364.                 $('#scrolltotop').stop().animate({right:'-85px'});
  1365.             }
  1366.         });
  1367.         $('#scrolltotop').click(function(){
  1368.             $("html, body").animate({scrollTop:0}, 800);
  1369.                 return false;
  1370.             });
  1371.     });
  1372. </script>
  1373. <script src="http://static.tumblr.com/0cdn90j/glvnidntk/jquery.style-my-tooltips.js"></script>
  1374. <script>
  1375.     (function($){
  1376.         $(document).ready(function(){
  1377.             $("[title]").style_my_tooltips({
  1378.                 tip_follows_cursor:true,
  1379.                 tip_delay_time:0,
  1380.                 tip_fade_speed:0,
  1381.                 attribute:"title"
  1382.             });
  1383.         });
  1384.     })(jQuery);
  1385. </script>
  1386.  
  1387. </body>
  1388.  
  1389. </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!