API tools faq
paste
Advertisement
annasthms

thm 06 - back to the start

annasthms
Mar 22nd, 2018 (edited)
8,844
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 35.12 KB | None | 0 0
raw download clone embed print report
  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="//solrainha.github.io/saturnicons/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>
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!