Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
thm 03 - cheer - Pastebin.com
[go: Go Back, main page]
API tools faq
paste
annasthms

thm 03 - cheer

annasthms
Dec 25th, 2017 (edited)
1,953
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 36.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCYTPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. credits:
  7.  
  8. - icon font by saturnthms: http://saturnthms.com/font
  9. - infinite scroll by paul irish
  10.  
  11. - cheer theme by annasthms
  12.  
  13. -->
  14.  
  15. <head>
  16.  
  17.   <title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{block:TagPage}#{Tag} | {/block:TagPage}{block:SearchPage}{SearchQuery} | {/block:SearchPage}{block:DayPage}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear} | {/block:DayPage}{Title}</title>
  18.   <link rel="shortcut icon" href="{Favicon}">
  19.   <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.   {block:Description}
  21.   <meta name="description" content="{MetaDescription}" />
  22.   {/block:Description}
  23.  
  24.   <link href="https://fonts.googleapis.com/css?family={text:google font}" rel="stylesheet">
  25.   <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  26.   <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  27.  
  28.   <meta name="image:background" content="" />
  29.  
  30.   <meta name="color:color 1" content="#862c59" />
  31.   <meta name="color:color 2" content="#462446" />
  32.   <meta name="color:lines" content="#888888" />
  33.   <meta name="color:list icons" content="#462446" />
  34.   <meta name="color:font" content="#000000" />
  35.   <meta name="color:background" content="#ffffff" />
  36.   <meta name="color:sidebar background" content="#fafafa" />
  37.   <meta name="color:sidebar border" content="#eeeeee" />
  38.   <meta name="color:sidebar username" content="#777777" />
  39.   <meta name="color:sidebar username hover" content="#000000" />
  40.   <meta name="color:title" content="#000000" />
  41.   <meta name="color:sidebar links" content="#555555" />
  42.   <meta name="color:sidebar links hover" content="#000000" />
  43.   <meta name="color:post background" content="#fafafa" />
  44.   <meta name="color:post info" content="#333333" />
  45.   <meta name="color:post info hover" content="#7a7a7a" />
  46.   <meta name="color:post info border" content="#eeeeee" />
  47.   <meta name="color:post titles" content="#462446" />
  48.   <meta name="color:post titles hover" content="#222222" />
  49.   <meta name="color:like and reblog" content="#462446" />
  50.   <meta name="color:like and reblog hover" content="#862c59" />
  51.   <meta name="color:post liked" content="#b10f2e" />
  52.   <meta name="color:pagination background" content="#fafafa" />
  53.  
  54.   <meta name="font:font" content="Avalon"/>
  55.  
  56.   <meta name="select:sidebar" content="side left" title="left" />
  57.   <meta name="select:sidebar" content="side right" title="right" />
  58.   <meta name="select:sidebar" content="top" title="top" />
  59.   <meta name="select:sidebar" content="top fixed" title="fixed top" />
  60.   <meta name="select:sidebar borders" content="solid" title="solid" />
  61.   <meta name="select:sidebar borders" content="dashed" title="dashed" />
  62.   <meta name="select:sidebar borders" content="dotted" title="dotted" />
  63.   <meta name="select:title text align" content="center" title="center" />
  64.   <meta name="select:title text align" content="left" title="left" />
  65.   <meta name="select:title text align" content="right" title="right" />
  66.   <meta name="select:title text align" content="justify" title="justify" />
  67.   <meta name="select:description text align" content="center" title="center" />
  68.   <meta name="select:description text align" content="left" title="left" />
  69.   <meta name="select:description text align" content="right" title="right" />
  70.   <meta name="select:description text align" content="justify" title="justify" />
  71.   <meta name="select:blog links text align" content="center" title="center" />
  72.   <meta name="select:blog links text align" content="left" title="left" />
  73.   <meta name="select:blog links text align" content="right" title="right" />
  74.   <meta name="select:blog links text align" content="justify" title="justify" />
  75.   <meta name="select:search text align" content="center" title="center" />
  76.   <meta name="select:search text align" content="left" title="left" />
  77.   <meta name="select:search text align" content="right" title="right" />
  78.   <meta name="select:reblog icon" content="ava" title="avatar" />
  79.   <meta name="select:reblog icon" content="icon" title="icon" />
  80.   <meta name="select:reblog icon" content="none" title="none" />
  81.   <meta name="select:time type" content="short" title="shortened time ago" />
  82.   <meta name="select:time type" content="long" title="full time ago" />
  83.   <meta name="select:time type" content="date" title="date and time" />
  84.   <meta name="select:post info border" content="solid" title="solid" />
  85.   <meta name="select:post info border" content="dashed" title="dashed" />
  86.   <meta name="select:post info border" content="dotted" title="dotted" />
  87.   <meta name="select:pagination type" content="simple" title="simple" />
  88.   <meta name="select:pagination type" content="jump" title="jump pagination" />
  89.   <meta name="select:pagination type" content="infinite" title="infinite scroll" />
  90.   <meta name="select:pagination type" content="loadmore" title="load more" />
  91.  
  92.   <meta name="if:bold title" content="1" />
  93.   <meta name="if:italic title" content="1" />
  94.   <meta name="if:show avatar" content="1" />
  95.   <meta name="if:show title" content="1" />
  96.   <meta name="if:show description" content="1" />
  97.   <meta name="if:show search bar" content="1" />
  98.   <meta name="if:bold reblogger" content="1" />
  99.   <meta name="if:colon after reblogger" content="1" />
  100.   <meta name="if:show captions on index pages" content="1" />
  101.   <meta name="if:grayscale photos" content="1" />
  102.   <meta name="if:tags icon" content="1" />
  103.   <meta name="if:show tags on index pages" content="1" />
  104.   <meta name="if:fill in heart when liked" content="1" />
  105.   <meta name="if:show like button on index pages" content="1" />
  106.   <meta name="if:dark tumblr controls" content="1" />
  107.  
  108.   <meta name="text:google font" content=""/>
  109.   <meta name="text:font size" content="" />
  110.   <meta name="text:title font size" content="1.25em" />
  111.   <meta name="text:description font size" content="0.95em" />
  112.   <meta name="text:photoset gutter" content="3px" />
  113.   <meta name="text:blog link one name" content="" />
  114.   <meta name="text:blog link one url" content="" />
  115.   <meta name="text:blog link two name" content="" />
  116.   <meta name="text:blog link two url" content="" />
  117.   <meta name="text:blog link three name" content="" />
  118.   <meta name="text:blog link three url" content="" />
  119.   <meta name="text:blog link four name" content="" />
  120.   <meta name="text:blog link four url" content="" />
  121.   <meta name="text:blog link five name" content="" />
  122.   <meta name="text:blog link five url" content="" />
  123.  
  124.   <style>
  125.   * {
  126.     position: relative;
  127.   }
  128.   body {
  129.     font-family: {block:Ifgooglefont}'{text:google font}', {/block:Ifgooglefont}{font:font};
  130.     color: {color:font};
  131.     font-size: {text:font size};
  132.     background: {color:background} url('{image:background}') no-repeat fixed center;
  133.     background-size: cover;
  134.   }
  135.   a {
  136.     text-decoration: none;
  137.     color: {color:color 1};
  138.   }
  139.   a:hover {
  140.     color: {color:color 2};
  141.   }
  142.   hr {
  143.     height: 1px;
  144.     width: 75%;
  145.     background: {color:lines};
  146.     border: none;
  147.   }
  148.   b {
  149.     color: {color:color 2};
  150.   }
  151.   u, s, strike {
  152.     text-decoration-color: {color:lines};
  153.   }
  154.   h1, h2, h3, h4, h5, h6 {
  155.     color: {color:color 1};
  156.   }
  157.   p:first-child {
  158.     margin-top: 0;
  159.   }
  160.   p:last-child {
  161.     margin-bottom: 0;
  162.   }
  163.   img {
  164.     max-width: 100%;
  165.     height: auto;
  166.   }
  167.   blockquote {
  168.     border-left: 1px solid {color:lines};
  169.     margin: 0;
  170.     padding: 0 0 0 4%;
  171.   }
  172.   blockquote img {
  173.     height: 100%;
  174.     width: 100%;
  175.   }
  176.   blockquote img:nth-child(2) {
  177.     margin-top: 1em;
  178.   }
  179.   blockquote iframe {
  180.     width: 100%;
  181.   }
  182.  
  183.   @media screen and (min-width: 810px) {
  184.     .side div#container {
  185.       margin: auto;
  186.       width: 805px;
  187.     }
  188.     .side aside {
  189.       width: 250px;
  190.     }
  191.     .side.right aside {
  192.       -webkit-transform: translateX(-100%);
  193.               transform: translateX(-100%);
  194.       margin-left: 805px;
  195.       z-index: 10;
  196.     }
  197.     .side.left section#posts {
  198.       margin-left: 265px;
  199.     }
  200.     .side.left iframe.tmblr-iframe {
  201.       position: fixed;
  202.       left: calc(50% - 402.5px + 125px) !important;
  203.       -webkit-transform: translateX(-50%) scale(0.8);
  204.               transform: translateX(-50%) scale(0.8);
  205.       {block:Ifdarktumblrcontrols}-webkit-filter: invert(100%);filter: invert(100%);{/block:Ifdarktumblrcontrols}
  206.     }
  207.     .side.right iframe.tmblr-iframe {
  208.       position: fixed;
  209.       left: calc(50% + 402.5px - 125px) !important;
  210.       -webkit-transform: translateX(-50%) scale(0.8);
  211.               transform: translateX(-50%) scale(0.8);
  212.       {block:Ifdarktumblrcontrols}-webkit-filter: invert(100%);filter: invert(100%);{/block:Ifdarktumblrcontrols}
  213.     }
  214.     .left div#pagination, .left div#load-more {
  215.       margin: 0 20px 1.5em 285px;
  216.     }
  217.     .right div#pagination, .right div#load-more {
  218.       margin: 0 285px 1.5em 20px;
  219.     }
  220.     .top div#pagination, .top div#load-more {
  221.       margin: 0 20px 1.5em;
  222.     }
  223.   }
  224.   @media screen and (min-width: 860px) {
  225.     .side div#container {
  226.       margin: auto;
  227.       width: 855px;
  228.     }
  229.     .side aside {
  230.       width: 300px;
  231.     }
  232.     .side.right aside {
  233.       -webkit-transform: translateX(-100%);
  234.               transform: translateX(-100%);
  235.       margin-left: 855px;
  236.       z-index: 10;
  237.     }
  238.     .side.left section#posts {
  239.       margin-left: 315px;
  240.     }
  241.     .side.left iframe.tmblr-iframe {
  242.       position: fixed;
  243.       left: calc(50% - 427.5px + 150px) !important;
  244.       -webkit-transform: translateX(-50%) scale(0.8);
  245.               transform: translateX(-50%) scale(0.8);
  246.       {block:Ifdarktumblrcontrols}-webkit-filter: invert(100%);filter: invert(100%);{/block:Ifdarktumblrcontrols}
  247.     }
  248.     .side.right iframe.tmblr-iframe {
  249.       position: fixed;
  250.       left: calc(50% + 427.5px - 150px) !important;
  251.       -webkit-transform: translateX(-50%) scale(0.8);
  252.               transform: translateX(-50%) scale(0.8);
  253.       {block:Ifdarktumblrcontrols}-webkit-filter: invert(100%);filter: invert(100%);{/block:Ifdarktumblrcontrols}
  254.     }
  255.     .left div#pagination, .left div#load-more {
  256.       margin: 0 20px 1.5em 335px;
  257.     }
  258.     .right div#pagination, .right div#load-more {
  259.       margin: 0 335px 1.5em 20px;
  260.     }
  261.     .top div#pagination, .top div#load-more {
  262.       margin: 0 20px 1.5em;
  263.     }
  264.   }
  265.  
  266.   .top div#container {
  267.     margin: auto;
  268.     width: 540px;
  269.   }
  270.  
  271.   /* sidebar/header */
  272.   aside {
  273.     background: {color:sidebar background};
  274.     -webkit-box-sizing: border-box;
  275.             box-sizing: border-box;
  276.   }
  277.   .side aside {
  278.     position: fixed;
  279.     top: 15vh;
  280.     max-height: 70vh;
  281.   }
  282.   .top aside {
  283.     width: 500px;
  284.     margin: 0 20px 20px;
  285.     {block:Ifshowsearchbar}top: 3em;{/block:Ifshowsearchbar}
  286.     {block:IfNotshowsearchbar}top: 2em;{/block:IfNotshowsearchbar}
  287.     z-index: 10;
  288.   }
  289.   aside.stay {
  290.     position: fixed !important;
  291.     {block:Ifshowsearchbar}top: 30px;{/block:Ifshowsearchbar}
  292.     {block:IfNotshowsearchbar}top: 0;{/block:IfNotshowsearchbar}
  293.     border-bottom: 1px {select:sidebar borders} {color:sidebar border};
  294.   }
  295.  
  296.   /* sidebar blog avatar + username */
  297.   .side div#blog-name {
  298.     display: table;
  299.     width: calc(100% - 1em);
  300.     padding: 0.5em;
  301.     border-bottom: 1px {select:sidebar borders} {color:sidebar border};
  302.   }
  303.   .side div#blog-name div {
  304.     display: table-cell;
  305.     vertical-align: middle;
  306.   }
  307.   .side div#blog-name div#name {
  308.     text-align: right;
  309.     padding-right: 0.5em;
  310.     font-size: 0.9em;
  311.   }
  312.   div#blog-name img {
  313.     border-radius: 100%;
  314.   }
  315.   .side div#blog-name img {
  316.     height: 2em;
  317.   }
  318.   div#blog-name div#name a {
  319.     color: {color:sidebar username};
  320.   }
  321.   div#blog-name div#name a:hover {
  322.     color: {color:sidebar username hover};
  323.   }
  324.  
  325.   /* sidebar blog title + description */
  326.   .side div#blog-info {
  327.     padding: 0.75em;
  328.   }
  329.   div#blog-title {
  330.     text-align: {select:title text align};
  331.     font-size: {text:title font size};
  332.     {block:Ifshowdescription}margin-bottom: 0.5em;{/block:Ifshowdescription}
  333.     color: {color:title};
  334.     {block:Ifboldtitle}font-weight: bold;{/block:Ifboldtitle}
  335.     {block:Ifitalictitle}font-style: italic;{/block:Ifitalictitle}
  336.   }
  337.   div#blog-desc {
  338.     font-size: {text:description font size};
  339.     text-align: {select:description text align};
  340.   }
  341.  
  342.   /* header */
  343.   .top div#blog-table {
  344.     display: table;
  345.     width: 100%;
  346.   }
  347.   .top div#blog-name, .top div#blog-info {
  348.     display: table-cell;
  349.     vertical-align: middle;
  350.     padding: 0.75em;
  351.   }
  352.   .top div#blog-name {
  353.     text-align: center;
  354.     border-right: 1px {select:sidebar borders} {color:sidebar border};
  355.   }
  356.   .top div#blog-name div#name {
  357.     {block:Ifshowavatar}margin-top: 0.75em;{/block:Ifshowavatar}
  358.   }
  359.  
  360.   {block:IfNotshowtitle}{block:IfNotshowdescription}
  361.   div#blog-info {
  362.     display: none !important;
  363.   }
  364.   .top div#blog-name {
  365.     border-right: none !important;
  366.   }
  367.   {/block:IfNotshowdescription}{/block:IfNotshowtitle}
  368.  
  369.   /* blog links */
  370.   div#blog-links {
  371.     padding: 0.5em;
  372.     font-size: 0.9em;
  373.     border-top: 1px {select:sidebar borders} {color:sidebar border};
  374.     {block:IfNotshowtitle}{block:IfNotshowdescription}
  375.     border-top: none;
  376.     {/block:IfNotshowdescription}{/block:IfNotshowtitle}
  377.     text-align: {select:blog links text align};
  378.   }
  379.   div#blog-links a {
  380.     color: {color:sidebar links};
  381.     display: inline-block;
  382.     margin: 0 0.35em;
  383.   }
  384.   div#blog-links a:hover {
  385.     color: {color:sidebar links hover};
  386.   }
  387.  
  388.   /* searchbar */
  389.   .side div#search {
  390.     padding: 0.25em;
  391.     border-top: 1px {select:sidebar borders} {color:sidebar border};
  392.   }
  393.   .top div#search {
  394.     position: absolute;
  395.     top: 0;
  396.     -webkit-transform: translateY(-100%);
  397.             transform: translateY(-100%);
  398.     width: 100%;
  399.     border-bottom: 1px {select:sidebar borders} {color:sidebar border};
  400.     padding: 0.25em;
  401.     -webkit-box-sizing: border-box;
  402.             box-sizing: border-box;
  403.     background: {color:sidebar background};
  404.   }
  405.   div#search input {
  406.     border: none;
  407.     outline: none;
  408.     background: {color:sidebar background};
  409.     width: 100%;
  410.     padding: 3px 2px;
  411.     font-family: {block:Ifgooglefont}'{text:google font}', {/block:Ifgooglefont}{font:font};
  412.     text-align: {select:search text align};
  413.     font-size: {text:font size};
  414.   }
  415.   div#search input::-webkit-input-placeholder {
  416.     color: {color:color 2};
  417.     text-transform: lowercase;
  418.     letter-spacing: 1px;
  419.   }
  420.   div#search input:-ms-input-placeholder {
  421.     color: {color:color 2};
  422.     text-transform: lowercase;
  423.     letter-spacing: 1px;
  424.   }
  425.   div#search input::-ms-input-placeholder {
  426.     color: {color:color 2};
  427.     text-transform: lowercase;
  428.     letter-spacing: 1px;
  429.   }
  430.   div#search input::placeholder {
  431.     color: {color:color 2};
  432.     text-transform: lowercase;
  433.     letter-spacing: 1px;
  434.   }
  435.  
  436.   .top section#posts {
  437.     {block:Ifshowsearchbar}padding-top: 4em;{/block:Ifshowsearchbar}
  438.     {block:IfNotshowsearchbar}padding-top: 2em;{/block:IfNotshowsearchbar}
  439.   }
  440.  
  441.   /* posts */
  442.   .post, div#post-notes {
  443.     width: 500px;
  444.     margin: 20px;
  445.     -webkit-box-sizing: border-box;
  446.             box-sizing: border-box;
  447.   }
  448.   .post:not(.photo):not(.audio):not(.video) .content, .caption, div#post-notes {
  449.     padding: 0.75em;
  450.     background: {color:post background};
  451.   }
  452.  
  453.   /* infinite scroll post fade in */
  454.   @-webkit-keyframes fade {
  455.     from {opacity:0;}
  456.     to {opacity:1;}
  457.   }
  458.   @keyframes fade {
  459.     from {opacity:0;}
  460.     to {opacity:1;}
  461.   }
  462.   .post.new {
  463.     -webkit-animation: fade 2s;
  464.             animation: fade 2s;
  465.   }
  466.  
  467.   /* ordered + unordered lists */
  468.   .post ul, .post ol {
  469.     list-style: none;
  470.     padding: 0 0 0 1.5em;
  471.   }
  472.   .post ol {
  473.     counter-reset: lists;
  474.   }
  475.   .post li:not(:last-of-type) {
  476.     margin-bottom: 0.25em;
  477.   }
  478.   .post ol li:before {
  479.     counter-increment: lists;
  480.     content: counter(lists) ".";
  481.     color: {color:list icons};
  482.     position: absolute;
  483.     left: -1.15em;
  484.     font-weight: bold;
  485.   }
  486.   .post ul li:before {
  487.     content: "\e088"; /* change this if you want a different icon for lists */
  488.     position: absolute;
  489.     font-family: 'saturnicons';
  490.     color: {color:list icons};
  491.     top: 0.35em;
  492.     left: -1.75em;
  493.     font-size: 0.75em;
  494.   }
  495.  
  496.   /* post info (top/bottom) */
  497.   table.info {
  498.     width: 100%;
  499.     background: {color:post background};
  500.     padding: 0.5em;
  501.     font-size: 0.9em;
  502.   }
  503.   .post:not(.photo):not(.audio):not(.video) table.reblog-info {
  504.     border-bottom: 1px {select:post info border} {color:post info border};
  505.   }
  506.   table.reblog-info a {
  507.     color: {color:post info};
  508.   }
  509.   table.reblog-info a:hover {
  510.     color: {color:post info hover};
  511.   }
  512.   td.src img {
  513.     margin-right: 0.65em;
  514.     border-radius: 100%;
  515.     width: 1.5em;
  516.   }
  517.   td.src img, td.src a {
  518.     display: inline-block;
  519.     vertical-align: middle;
  520.   }
  521.   td.other, td.share {
  522.     text-align: right;
  523.     font-size: 0.9em;
  524.     padding-right: 0.25em;
  525.   }
  526.   .via {
  527.     text-transform: lowercase;
  528.     margin-right: 0.75em;
  529.   }
  530.   table.post-info {
  531.     border-top: 1px {select:post info border} {color:post info border};
  532.   }
  533.   table.post-info td {
  534.     vertical-align: top;
  535.   }
  536.   td.tags span {
  537.     font-size: 0.65em;
  538.     margin-right: 0.65em;
  539.     color: {color:post info};
  540.   }
  541.   td.tags a {
  542.     margin: 0 0.35em 0 0;
  543.     font-size: 0.9em;
  544.     color: {color:post info};
  545.   }
  546.   td.tags a:hover, div.notes a:hover, .cont-source a:hover {
  547.     color: {color:post info hover};
  548.   }
  549.   td.tags a:not(:last-child):after {
  550.     content: ",";
  551.   }
  552.   td.share {
  553.     min-width: 3em;
  554.   }
  555.   .buttons div {
  556.     font-size: 0.9em;
  557.     top: 0.15em;
  558.   }
  559.   div.notes {
  560.     margin-top: 0.35em;
  561.   }
  562.   div.notes a, .cont-source, .cont-source a {
  563.     color: {color:post info};
  564.   }
  565.   .cont-source {
  566.     text-transform: lowercase;
  567.     font-size: 0.9em;
  568.   }
  569.  
  570.   {block:IndexPage}
  571.   {block:IfNotshowcaptionsonindexpages}
  572.   .caption {
  573.     display: none;
  574.   }
  575.   {/block:IfNotshowcaptionsonindexpages}
  576.   {block:IfNotshowtagsonindexpages}
  577.   td.tags {
  578.     display: none;
  579.   }
  580.   {/block:IfNotshowtagsonindexpages}
  581.   {/block:IndexPage}
  582.  
  583.   /* post titles, link posts */
  584.   a.title, a.path.has-desc {
  585.     display: block;
  586.     text-align: center;
  587.     font-weight: bold;
  588.     margin-bottom: 0.5em;
  589.     color: {color:post titles};
  590.   }
  591.   a.path {
  592.     color: {color:post titles};
  593.   }
  594.   a.title:hover, a.path:hover {
  595.     color: {color:post titles hover};
  596.   }
  597.  
  598.   a.pic, .audio iframe, .video iframe {
  599.     margin-bottom: -7px;
  600.     display: block;
  601.   }
  602.  
  603.   /* photo + photoset posts */
  604.   .photo-slideshow {
  605.     background: {color:post background};
  606.   }
  607.   {block:Ifgrayscalephotos}
  608.   a.pic img, .photo-data img {
  609.     -webkit-filter: grayscale(50%);
  610.     filter: grayscale(50%);
  611.     -webkit-transition: 0.75s all ease-in-out;
  612.     transition: 0.75s all ease-in-out;
  613.   }
  614.   a.pic img:hover, .photo-data:hover img {
  615.     -webkit-filter: grayscale(0);
  616.     filter: grayscale(0);
  617.   }
  618.   {/block:Ifgrayscalephotos}
  619.  
  620.   /* chat posts */
  621.   table.lines {
  622.     font-size: {text:font size};
  623.   }
  624.   table.lines td {
  625.     vertical-align: top;
  626.   }
  627.   td.label {
  628.     padding-right: 0.75em;
  629.     color: {color:color 2};
  630.     text-transform: lowercase;
  631.     font-variant: small-caps;
  632.     font-weight: bold;
  633.   }
  634.  
  635.   /* quote posts */
  636.   .words {
  637.     font-size: 1.1em;
  638.     font-weight: bold;
  639.     color: {color:color 2};
  640.   }
  641.   .source {
  642.     font-size: 0.9em;
  643.     margin-top: 0.25em;
  644.   }
  645.   .source:before {
  646.     content: "\2014";
  647.     margin-right: 0.5em;
  648.   }
  649.  
  650.   /* audio posts */
  651.   iframe.tumblr_audio_player {
  652.     height: 85px;
  653.   }
  654.   iframe.spotify_audio_player {
  655.     height: 80px;
  656.   }
  657.  
  658.   /* reblogger info, ask posts */
  659.   .reblogged:not(:last-of-type), .qna:not(:last-of-type) {
  660.     margin-bottom: 0.5em;
  661.   }
  662.   .blog {
  663.     {block:Ifboldreblogger}font-weight: bold;{/block:Ifboldreblogger}
  664.     display: inline-block;
  665.     margin-right: 0.5em;
  666.     text-transform: lowercase;
  667.   }
  668.   .blog.none img, .blog.icon img {
  669.     display: none;
  670.   }
  671.   .blog.ava img {
  672.     height: 1em;
  673.     border-radius: 15%;
  674.     margin-right: 0.25em;
  675.   }
  676.   .blog.icon span:before {
  677.     content:'\e276';
  678.     font-family:'saturnicons';
  679.     font-size: 0.65em;
  680.     margin-right: 0.5em;
  681.     opacity: 0.5;
  682.   }
  683.   .qna.ask .blog.icon span:before {
  684.     content: '\e1e7';
  685.   }
  686.   .qna.answer .blog.icon span:before {
  687.     content: '\e082';
  688.   }
  689.   .qna.reply .blog.icon span:before {
  690.     content: '\e081';
  691.   }
  692.   .blog + p, .blog + .speech p:first-child {
  693.     display: inline;
  694.   }
  695.   .blog span:after {
  696.     {block:Ifcolonafterreblogger}content: ':';{/block:Ifcolonafterreblogger}
  697.   }
  698.  
  699.   /* like + reblog buttons */
  700.   .like-button, .reblog-button {
  701.     display: inline-block;
  702.     height: 1em;
  703.   }
  704.   .like-button {
  705.     margin-right: 0.5em;
  706.     {block:IfNotshowlikebuttononindexpages}{block:IndexPage}display: none;{/block:IndexPage}{/block:IfNotshowlikebuttononindexpages}
  707.   }
  708.   .like_button {
  709.     position: absolute;
  710.     top: 0;
  711.     left: 0;
  712.     right: 0;
  713.     bottom: 0;
  714.     width: 100%;
  715.     height: 100%;
  716.     opacity: 0;
  717.     z-index: 10;
  718.   }
  719.   .like_button iframe {
  720.     width: 100% !important;
  721.     height: 100% !important;
  722.   }
  723.   .new-like-button {
  724.     width: 100%;
  725.     height: 100%;
  726.     z-index: 1;
  727.     color: {color:like and reblog};
  728.   }
  729.   .like_button:hover + .new-like-button > span {
  730.     color: {color:like and reblog hover};
  731.   }
  732.   .like_button.liked + .new-like-button > span {
  733.     color: {color:post liked};
  734.   }
  735.   .like_button.liked + .new-like-button > span:before {
  736.     {block:Iffillinheartwhenliked}content: '\e12a';{/block:Iffillinheartwhenliked}
  737.   }
  738.   .reblog-button a {
  739.     color: {color:like and reblog};
  740.   }
  741.   .reblog-button a:hover {
  742.     color: {color:like and reblog hover};
  743.   }
  744.  
  745.   /* post notes */
  746.   ol.notes {
  747.     list-style: none;
  748.     padding: 0;
  749.     margin: 0;
  750.   }
  751.   li.note {
  752.     margin: 10px 0;
  753.   }
  754.   li.note:first-child {
  755.     margin-top: 0;
  756.   }
  757.   li.note:last-child {
  758.     margin-bottom: 0;
  759.   }
  760.   li.note.reblog:before {
  761.     content: '\21BA';
  762.     font-size: 0.85em;
  763.     margin-right: 10px;
  764.   }
  765.   li.note.like:before {
  766.     content: '\2665';
  767.     margin-right: 10px;
  768.   }
  769.   li.note blockquote {
  770.     margin-top: 0.5em;
  771.   }
  772.   img.avatar {
  773.     display: none;
  774.   }
  775.  
  776.   /* pagination, load more button */
  777.   div#pagination, div#load-more {
  778.     text-align: center;
  779.     background: {color:pagination background};
  780.     padding: 0.75em;
  781.     font-size: 0.9em;
  782.     text-transform: lowercase;
  783.   }
  784.   div#pagination.infinite, div#pagination.loadmore, div#load-more:not(.loadmore) {
  785.     display: none;
  786.   }
  787.   div#pagination * {
  788.     margin: 0 0.35em;
  789.     display: inline-block;
  790.   }
  791.   div#pagination span {
  792.     color: {color:color 2};
  793.     font-weight: bold;
  794.     font-size: 1.1em;
  795.   }
  796.   div#pagination.simple .page {
  797.     display: none;
  798.   }
  799.   div#load-more {
  800.     cursor: help;
  801.   }
  802.  
  803.   /* photo lightboxes */
  804.   .tmblr-lightbox {
  805.     background: #fff !important;
  806.     background: rgba(255,255,255,0.85) !important;
  807.   }
  808.   .tmblr-lightbox .vignette {
  809.     opacity: 0;
  810.   }
  811.   .tmblr-lightbox .lightbox-image {
  812.     -webkit-box-shadow: none !important;
  813.             box-shadow: none !important;
  814.   }
  815.   .lightbox-caption {
  816.     color: #000 !important;
  817.     text-shadow: none !important;
  818.   }
  819.  
  820.   /* tumblr controls */
  821.   .top:not(.fixed) iframe.tmblr-iframe {
  822.     position: absolute !important;
  823.     left: 50% !important;
  824.     -webkit-transform: translateX(-50%) scale(0.8);
  825.             transform: translateX(-50%) scale(0.8);
  826.     {block:Ifdarktumblrcontrols}-webkit-filter: invert(100%);filter: invert(100%);{/block:Ifdarktumblrcontrols}
  827.   }
  828.   .top.fixed iframe.tmblr-iframe {
  829.     {block:Ifdarktumblrcontrols}-webkit-filter: invert(100%);filter: invert(100%);{/block:Ifdarktumblrcontrols}
  830.   }
  831.  
  832.   div#infscr-loading {
  833.     display: none !important;
  834.   }
  835.  
  836.   a#scroll-up {
  837.     position: fixed;
  838.     bottom: 31px;
  839.     right: 5px;
  840.     background: #fff;
  841.     padding: 6px 2.5px 2px;
  842.     font-size: 0.8em;
  843.   }
  844.   a#cred {
  845.     position: fixed;
  846.     bottom: 5px;
  847.     right: 5px;
  848.     background: #fff;
  849.     padding: 3px 6px;
  850.     font-size: 0.8em;
  851.   }
  852.  
  853.   {CustomCSS}
  854. </style>
  855.  
  856. </head>
  857. <body class="{select:sidebar}">
  858.   <div id="container">
  859.     <aside>
  860.       <div id="blog-table">
  861.         <div id="blog-name">
  862.           <div>{block:Ifshowavatar}<img src="{PortraitURL-64}" />{/block:Ifshowavatar}</div>
  863.           <div id="name"><a href="{BlogURL}">{Name}</a></div>
  864.         </div>
  865.         <div id="blog-info">
  866.           {block:Ifshowtitle}<div id="blog-title">{Title}</div>{/block:Ifshowtitle}
  867.           {block:Ifshowdescription}<div id="blog-desc">{Description}</div>{/block:Ifshowdescription}
  868.         </div>
  869.       </div>
  870.       <div id="blog-links">
  871.         <a href="/">home</a>{block:AskEnabled}<a href="/ask">ask</a>{/block:AskEnabled}<a href="/archive">archive</a>{block:Ifbloglinkoneurl}<a href="{text:blog link one url}">{text:blog link one name}</a>{/block:Ifbloglinkoneurl}{block:Ifbloglinktwourl}<a href="{text:blog link two url}">{text:blog link two name}</a>{/block:Ifbloglinktwourl}{block:Ifbloglinkthreeurl}<a href="{text:blog link three url}">{text:blog link three name}</a>{/block:Ifbloglinkthreeurl}{block:Ifbloglinkfoururl}<a href="{text:blog link four url}">{text:blog link four name}</a>{/block:Ifbloglinkfoururl}{block:Ifbloglinkfiveurl}<a href="{text:blog link five url}">{text:blog link five name}</a>{/block:Ifbloglinkfiveurl}
  872.       </div>
  873.       {block:Ifshowsearchbar}<div id="search"><form action="/search" method="get"><input type="text" name="q" placeholder="{lang:Search}" value="{SearchQuery}"/></form></div>{/block:Ifshowsearchbar}
  874.     </aside>
  875.  
  876.     <section id="posts">
  877.       {block:Posts}<article class="post {PostType}" id="{PostID}">
  878.  
  879.         {block:Date}<table class="reblog-info info">
  880.           <td class="src">{block:RebloggedFrom}<img src="{ReblogRootPortraitURL-30}" /><span><a href="{ReblogRootURL}">{ReblogRootName}</a></span>{/block:RebloggedFrom}{block:NotReblog}<img src="{PortraitURL-30}" /><span><a href="{Permalink}">{Name}</a></span>{/block:NotReblog}</td>
  881.           <td class="other">{block:RebloggedFrom}<span class="via"><a href="{ReblogParentURL}" title="{ReblogParentName}">{lang:Via}</a></span>{/block:RebloggedFrom}<span><a href="{Permalink}"><span class="date">{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourWithZero}:{Minutes}:{Seconds}</span></a></span></td>
  882.         </table>{/block:Date}
  883.  
  884.         <div class="content">
  885.  
  886.           {block:Title}<a href="{Permalink}" class="title">{Title}</a>{/block:Title}
  887.  
  888.           {block:Text}{block:NotReblog}<div class="body">{Body}</div>{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog {select:reblog icon}"><img src="{PortraitURL-64}" /><span>{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div>{Body}</div>{/block:Reblogs}{/block:RebloggedFrom}{/block:Text}
  889.  
  890.           {block:Photo}<a href="#" class="pic" 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>{/block:Photo}
  891.  
  892.           {block:Photoset}<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>{/block:Photoset}
  893.  
  894.           {block:Quote}<div class="words">{Quote}</div>{block:Source}<div class="source">{Source}</div>{/block:Source}{/block:Quote}
  895.  
  896.           {block:Link}<a href="{URL}" class="path{block:Description} has-desc{/block:Description}" {Target}>{Name}</a>
  897.           {block:Description}{block:NotReblog}<div class="desc">{Description}</div>{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog {select:reblog icon}"><img src="{PortraitURL-64}" /><span>{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div>{Body}</div>{/block:Reblogs}{/block:RebloggedFrom}{/block:Description}{/block:Link}
  898.  
  899.           {block:Chat}<table class="lines">{block:Lines}<tr><td class="label">{block:Label}<span>{Label}</span>{/block:Label}</td><td>{Line}</td></tr>{/block:Lines}</table>{/block:Chat}
  900.  
  901.           {block:Audio}{block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}{/block:Audio}
  902.  
  903.           {block:Video}{VideoEmbed-500}{/block:Video}
  904.  
  905.           {block:Answer}<div class="qna ask"><div class="blog {select:reblog icon}"><img src="{AskerPortraitURL-48}"/><span>{Asker}</span></div><span class="speech">{Question}</span></div>
  906.           {block:Answerer}<div class="qna answer"><div class="blog {select:reblog icon}"><img src="{AnswererPortraitURL-48}"/><span>{Answerer}</span></div><span class="speech">{Answer}</span></div>{block:Reblogs}<div class="qna reply"><div class="blog {select:reblog icon}"><img src="{PortraitURL-64}" /><span>{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div><span class="speech">{Body}</span></div>{/block:Reblogs}{/block:Answerer}
  907.           {block:NotReblog}<div class="qna answer"><div class="blog {select:reblog icon}"><img src="{PortraitURL-48}" /><span><a href="{Permalink}">{Name}</a></span></div><span class="speech">{Answer}</span></div>{/block:NotReblog}{/block:Answer}
  908.  
  909.           {block:Caption}<div class="caption">{block:NotReblog}{Caption}{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog {select:reblog icon}"><img src="{PortraitURL-64}" /><span>{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div>{Body}</div>{/block:Reblogs}{/block:RebloggedFrom}</div>{/block:Caption}
  910.  
  911.         </div>
  912.  
  913.         {block:Date}<table class="post-info info">
  914.           <tr>{block:HasTags}
  915.             <td class="tags">{block:Iftagsicon}<span class="sf sf-bookmark-o"></span>{/block:Iftagsicon}{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</td>{/block:HasTags}
  916.             <td class="share">
  917.               <div class="buttons"><div class="like-button">{LikeButton}<span class="new-like-button"><span class="sf sf-heart-2-o"></span></span></div><div class="reblog-button"><a href="{ReblogURL}" {Target}><span class="sf sf-reblog-o"></span></a></div></div>
  918.               {block:NoteCount}<div class="notes"><a href="{Permalink}">{NoteCount}</a></div>{/block:NoteCount}
  919.             </td>
  920.           </tr>
  921.           {block:PermalinkPage}{block:ContentSource}<tr><td class="cont-source">{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></td></tr>{/block:ContentSource}{/block:PermalinkPage}
  922.         </table>{/block:Date}
  923.  
  924.       </article>
  925.  
  926.       {block:PermalinkPage}{block:PostNotes}<div id="post-notes">
  927.         {PostNotes}
  928.       </div>{/block:PostNotes}{/block:PermalinkPage}
  929.       {/block:Posts}
  930.  
  931.     </section>
  932.  
  933.     {block:Pagination}
  934.     <div id="pagination" class="{select:pagination type}">
  935.       {block:PreviousPage}<a href="{PreviousPage}" class="prev">{lang:Prev}</a>{/block:PreviousPage}
  936.       {block:JumpPagination length="3"}{block:CurrentPage}<span class="page">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a href="{URL}" class="jump page">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  937.       {block:NextPage}<a href="{NextPage}" class="next">{lang:Next}</a>{/block:NextPage}
  938.     </div>
  939.     <div id="load-more" class="{select:pagination type}">{lang:Load more posts}</div>
  940.     {/block:Pagination}
  941.  
  942.   </div>
  943.  
  944.   <a href="#" id="scroll-up"><span class="sf sf-arrow-up"></span></a>
  945.   <a href="https://annasthms.tumblr.com/" id="cred" title="theme by annasthms" {Target}>a</a>
  946.  
  947.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  948.   <script src="https://static.tumblr.com/yfztp0u/brUohnb4m/infinitescroll.js"></script>
  949.   <script src="http://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  950.   <script src="https://dl.dropbox.com/s/relahvlc2wt7g02/dates.min.js?dl=0"></script>
  951.  
  952.   <script>
  953.   function changeDate(type, post) {
  954.     switch (type) {
  955.       case 'short':
  956.       post.shortenTime();
  957.       break;
  958.       case 'long':
  959.       post.shortenTime({
  960.         year: 'year',
  961.         week: 'week',
  962.         day: 'day',
  963.         hour: 'hour',
  964.         minute: 'minute',
  965.         second: 'second',
  966.         makeplural: true,
  967.         addspace: true
  968.       });
  969.       break;
  970.       case 'date':
  971.       post.date({dateseparator: '.', timeseparator: ':'});
  972.       break;
  973.     }
  974.   }
  975.  
  976.   function fixed() {
  977.     var asideTop = $('aside').position().top,
  978.     sectionTop = $('section').position().top + 'px';
  979.  
  980.     $(window).scroll(function() {
  981.       if ($(document).scrollTop() > (asideTop - 30)) {
  982.         $('aside').addClass('stay');
  983.         $('section#posts').css('margin-top', sectionTop);
  984.       } else {
  985.         $('aside').removeClass('stay');
  986.         $('section#posts').css('margin-top', 0);
  987.       }
  988.     })
  989.   }
  990.  
  991.   (function ( $ ) {
  992.     $.fn.photoset = function() {
  993.       var gutterSize = '{text:photoset gutter}';
  994.       if ( !gutterSize.endsWith('px') ) {
  995.           gutterSize = gutterSize + 'px';
  996.       }
  997.       return this.each(function() {
  998.         $( this ).pxuPhotoset({
  999.           lightbox: true,
  1000.           rounded: false,
  1001.           gutter: gutterSize,
  1002.           borderRadius: '0px',
  1003.           photoset: '.photo-slideshow',
  1004.           photoWrap: '.photo-data',
  1005.           photo: '.pxu-photo'
  1006.         });
  1007.       });
  1008.     }
  1009.   }( jQuery ));
  1010.  
  1011.   function scroll(pag) {
  1012.     switch (pag) {
  1013.       case 'infinite':
  1014.       $container = $('section#posts');
  1015.       $container.infinitescroll({
  1016.         navSelector: 'div#pagination',
  1017.         nextSelector: 'a.next',
  1018.         itemSelector: '.post',
  1019.         loading: {
  1020.           img: '',
  1021.           msgText: '',
  1022.         },
  1023.         debug: true,
  1024.         bufferPx: 0
  1025.       }, function(items) {
  1026.         var $items = $(items);
  1027.         $items.addClass('new');
  1028.         changeDate('{select:time type}', $items.find('.date'));
  1029.         $items.find('.photo-slideshow').pxuPhotoset({lightbox: true, rounded: false, gutter: '{select:photoset gutter}', borderRadius: '0px', photoset: '.photo-slideshow', photoWrap: '.photo-data', photo: '.pxu-photo'});
  1030.         $itemsIDs = $items.map(function(){
  1031.           return this.id;
  1032.         }).get();
  1033.         Tumblr.LikeButton.get_status_by_post_ids($itemsIDs);
  1034.       });
  1035.       break;
  1036.       case 'loadmore':
  1037.       $container = $('section#posts');
  1038.       $container.infinitescroll({
  1039.         navSelector: 'div#pagination',
  1040.         nextSelector: 'a.next',
  1041.         itemSelector: '.post',
  1042.         loading: {
  1043.           img: '',
  1044.           msgText: '',
  1045.         },
  1046.         debug: true,
  1047.         errorCallback: function(){$('#load-more').hide();}
  1048.       }, function(items) {
  1049.         var $items = $(items);
  1050.         $items.addClass('new');
  1051.         changeDate('{select:time type}', $items.find('.date'));
  1052.         $items.find('.photo-slideshow').photoset();
  1053.         $itemsIDs = $items.map(function(){
  1054.           return this.id;
  1055.         }).get();
  1056.         Tumblr.LikeButton.get_status_by_post_ids($itemsIDs);
  1057.       });
  1058.       $(window).unbind('.infscr');
  1059.       $('#load-more').click(function(){
  1060.         $container.infinitescroll('retrieve');
  1061.         return false;
  1062.       });
  1063.       break;
  1064.     }
  1065.   }
  1066.  
  1067.   function scrollUp() {
  1068.     $('a#scroll-up').click(function(){
  1069.       $('html, body').animate({ scrollTop: 0 }, 1500);
  1070.       return false;
  1071.     });
  1072.   }
  1073.  
  1074.   function tumblrControls() {
  1075.     var nav = $('aside'),
  1076.     iframe = $('iframe.tmblr-iframe'),
  1077.     navTop = nav.position().top,
  1078.     navHeight = nav.outerHeight(),
  1079.     iframeTop = navTop + navHeight + 'px';
  1080.     $('head').append('<style>iframe.tmblr-iframe{top: ' + iframeTop + ' !important}</style>');
  1081.   }
  1082.  
  1083.   $(document).ready(function(){
  1084.     $('td.label').each(function(){
  1085.       var label = $(this).text().split(":")[0];
  1086.       $(this).text(label);
  1087.     });
  1088.     changeDate('{select:time type}', $('.date'));
  1089.     $('.photo-slideshow').photoset();
  1090.     scroll('{select:pagination type}');
  1091.     scrollUp();
  1092.     if ( '{select:sidebar}' == 'top fixed' ) {
  1093.       fixed();
  1094.     } else {
  1095.       tumblrControls();
  1096.     }
  1097.   });
  1098.   </script>
  1099.  
  1100. </body>
  1101. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!