daily pastebin goal
0%
SHARE
TWEET

thm 06 - back to the start

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