API tools faq
paste
annasthms

thm 09 - coral

annasthms
Feb 28th, 2019 (edited)
6,028
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 77.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.  
  4. <!----------------------------------------------------
  5.  
  6. credits:
  7.  
  8. - icon font by suiomi
  9. - (modified) css photosets by annasthms and espoirthemes
  10. - infinite scroll by Paul Irish
  11. - smoothscroll by Balazs Galambosi
  12. - loader by Vijaya Kumar Vulchi:
  13.  https://codepen.io/vulchivijay/pen/gPxrvb
  14.  
  15. - coral by annasthms (february 28, 2019)
  16.  a theme made for codingcabin's pantone color of the
  17.  year challenge
  18.  more info @ https://annasthms.tumblr.com/more/thm/09
  19.  
  20.  
  21. change log:
  22. - march 6, 2019: made the sidebar icons customizable
  23. - march 30, 2019: fixed original caption bug
  24. - may 1, 2019: fixed the preview bug
  25.  
  26.  
  27. rules:
  28.  
  29. 1. don't remove the credit
  30. 2. don't steal/claim as yours
  31. 3. don't use as a base code
  32.  
  33. thank you!! ♡♡♡
  34.  
  35. ----------------------------------------------------->
  36.  
  37. <head>
  38.   <meta charset="utf-8">
  39.   <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>
  40.   <link rel="shortcut icon" href="{Favicon}">
  41.   <link href="https://fonts.googleapis.com/css?family={text:google font}|{text:blog title font}" rel="stylesheet">
  42.   <link href="https://solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  43.   <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  44.  
  45.   <meta name="image:icon one" content="https://images.unsplash.com/photo-1453372755486-254d0e724b38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  46.   <meta name="image:icon two" content="https://images.unsplash.com/photo-1520923642038-b4259acecbd7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" />
  47.  
  48.   <meta name="color:accent" content="#ff6f61" />
  49.   <meta name="color:text" content="#000000" />
  50.   <meta name="color:background" content="#ffffff" />
  51.   <meta name="color:link hover" content="#c8291a" />
  52.   <meta name="color:cursor" content="#97836e" />
  53.   <meta name="color:sidebar" content="#d9c9b9" />
  54.   <meta name="color:blog title" content="#000000" />
  55.   <meta name="color:blog description" content="#000000" />
  56.   <meta name="color:menu icon" content="#ff6f61" />
  57.   <meta name="color:menu icon hover" content="#c8291a" />
  58.   <meta name="color:menu accent" content="#ff6f61" />
  59.   <meta name="color:menu link hover" content="#222222" />
  60.   <meta name="color:menu link subtitle" content="#888888" />
  61.   <meta name="color:popup background" content="#ffffff" />
  62.   <meta name="color:popup overlay" content="#ff6f61" />
  63.   <meta name="color:post accent" content="#ff6f61" />
  64.   <meta name="color:post title hover" content="#c8291a" />
  65.   <meta name="color:post background" content="#fafafa" />
  66.   <meta name="color:post info accent" content="#d1b598" />
  67.  
  68.   <meta name="font:font" content="Avalon" />
  69.  
  70.   <meta name="select:sidebar type" content="sidebar" title="simple sidebar" />
  71.   <meta name="select:sidebar type" content="full_sidebar" title="tall sidebar" />
  72.   <meta name="select:sidebar type" content="full_header" title="header" />
  73.   <meta name="select:pagination type" content="simple" title="simple" />
  74.   <meta name="select:pagination type" content="jump" title="jump pagination" />
  75.   <meta name="select:pagination type" content="infinite" title="infinite scroll" />
  76.   <meta name="select:pagination type" content="loadmore" title="load more" />
  77.  
  78.   <meta name="if:circle cursor" content="1" />
  79.   <meta name="if:dark tumblr controls" content="1" />
  80.  
  81.   <meta name="text:google font" content="Open Sans" />
  82.   <meta name="text:blog title font" content="Prata" />
  83.   <meta name="text:font size" content="16px" />
  84.   <meta name="text:description" content="" />
  85.   <meta name="text:post width" content="500px" />
  86.   <meta name="text:photoset gutter" content="1px" />
  87.   <meta name="text:blog link one title" content="home" />
  88.   <meta name="text:blog link one subtitle" content="return" />
  89.   <meta name="text:blog link one url" content="/" />
  90.   <meta name="text:blog link two title" content="contact" />
  91.   <meta name="text:blog link two subtitle" content="drop me a line" />
  92.   <meta name="text:blog link two url" content="/" />
  93.   <meta name="text:blog link three title" content="" />
  94.   <meta name="text:blog link three subtitle" content="" />
  95.   <meta name="text:blog link three url" content="" />
  96.   <meta name="text:blog link four title" content="" />
  97.   <meta name="text:blog link four subtitle" content="" />
  98.   <meta name="text:blog link four url" content="" />
  99.   <meta name="text:search bar subtitle" content="" />
  100.   <meta name="text:popup about" conten="" />
  101.  
  102.   <style>
  103.   * {
  104.     position : relative;
  105.     {block:ifcirclecursor}
  106.     cursor   : none!important;
  107.     {/block:ifcirclecursor}
  108.   }
  109.  
  110.   div#menu_icon, div#search, .post_info > div:not(.reblog_info), .photo_container img, #load-more {
  111.     cursor : pointer;
  112.   }
  113.  
  114.   body {
  115.     margin      : 0;
  116.     color       : {color:text};
  117.     background  : {color:background};
  118.     font-family : {block:Ifgooglefont}'{text:google font}', {/block:Ifgooglefont}
  119.                   {font:font};
  120.     font-size   : {text:font size};
  121.     line-height : 1.35em;
  122.     transition  : 1ms overflow 0.35s;
  123.   }
  124.   body.loading {
  125.     overflow : hidden;
  126.   }
  127.  
  128.   a {
  129.     color           : {color:accent};
  130.     text-decoration : none;
  131.   }
  132.   a:hover {
  133.     color : {color:link hover};
  134.   }
  135.  
  136.   p:first-child {
  137.     margin-top : 0;
  138.   }
  139.   p:last-child {
  140.     margin-bottom : 0;
  141.   }
  142.  
  143.   img {
  144.     display    : block;
  145.     max-width  : 100%;
  146.     height     : auto;
  147.     object-fit : cover;
  148.   }
  149.  
  150.   iframe {
  151.     display : block;
  152.   }
  153.  
  154.   /* text selection */
  155.   ::-moz-selection {
  156.     color      : {color:background};
  157.     background : {color:accent};
  158.   }
  159.   ::selection {
  160.     color      : {color:background};
  161.     background : {color:accent};
  162.   }
  163.  
  164.   /* circle cursor */
  165.   div#mouse {
  166.     z-index             : 8675310;
  167.     position            : fixed;
  168.     top                 : -2em;
  169.     left                : -2em;
  170.     width               : 0;
  171.     height              : 0;
  172.     padding             : .5em;
  173.     border-radius       : 100%;
  174.     background          : rgba({RGBcolor:cursor}, 0.65);
  175.     transform           : translate(-50%, -50%);
  176.     transition-property : height,
  177.                           width,
  178.                           border,
  179.                           padding,
  180.                           background;
  181.     transition-duration : 0.2s;
  182.     pointer-events      : none;
  183.   }
  184.   div#mouse.hover_target {
  185.     background : rgba({RGBcolor:cursor}, 0.25);
  186.   }
  187.   div#mouse.hoverid_back,
  188.   div#mouse.hoverid_reblog_back {
  189.     background : rgba({RGBcolor:popup background},0.65);
  190.   }
  191.   div#mouse.mousedown {
  192.     background : rgba({RGBcolor:cursor}, 0.9);
  193.   }
  194.   div#mouse.mousedown.hover_target {
  195.     background : rgba({RGBcolor:cursor}, 0.65);
  196.   }
  197.   div#mouse.mousedown.hoverid_back,
  198.   div#mouse.mousedown.hoverid_reblog_back {
  199.     background : rgba({RGBcolor:popup background},0.9);
  200.   }
  201.  
  202.   /* container */
  203.   div#container.sidebar {
  204.     left   : -100px;
  205.     width  : calc(300px + 11em + 500px);
  206.     margin : auto;
  207.   }
  208.   div#container.full_sidebar {
  209.     padding-left : 30vw;
  210.   }
  211.  
  212.   /* regular sidebar */
  213.   .sidebar aside {
  214.     position : fixed;
  215.     top      : 2em;
  216.     width    : 300px;
  217.     margin   : 6em 0 3em 6em;
  218.     padding  : 1px;
  219.   }
  220.   .sidebar aside div#sidebar_icons {
  221.     z-index   : 1;
  222.     position  : absolute;
  223.     top       : 0;
  224.     left      : 0;
  225.     width     : 8em;
  226.     transform : translate(calc(-50% + 1em), calc(-50% + 1em));
  227.   }
  228.   .sidebar aside div#sidebar_icons img {
  229.     display       : block;
  230.     border-radius : 100%;
  231.   }
  232.   .sidebar aside img#header {
  233.     width     : 8em;
  234.     height    : 8em;
  235.     transform : translate(-20%, 0);
  236.   }
  237.   .sidebar aside img#avatar {
  238.     width       : 5em;
  239.     height      : 5em;
  240.     margin-top  : -2em;
  241.     margin-left : 0.5em;
  242.   }
  243.   .sidebar aside div#menu_icon {
  244.     z-index            : -1;
  245.     position           : absolute;
  246.     top                : 3.5em;
  247.     left               : 5em;
  248.     width              : calc(1.4em + 3px);
  249.     height             : calc(1.4em + 3px);
  250.     padding            : 1em;
  251.     border-radius      : 100%;
  252.     background         : {color:menu icon};
  253.     -o-transition      : background 0.5s;
  254.     -webkit-transition : background 0.5s;
  255.     transition         : background 0.5s;
  256.   }
  257.   .sidebar aside div#menu_icon.menu_open,
  258.   .sidebar aside div#menu_icon:hover {
  259.     background : {color:menu icon hover};
  260.   }
  261.   .sidebar aside div#menu_icon span {
  262.     display    : block;
  263.     width      : 80%;
  264.     height     : 1px;
  265.     margin     : 0.35em 10%;
  266.     background : {color:background};
  267.   }
  268.   .sidebar aside div#blog_info {
  269.     margin  : 3em 0 0 3em;
  270.     padding : 1.5em;
  271.   }
  272.   .sidebar aside div#blog_title {
  273.     margin-bottom : 0.35em;
  274.     font-family   : {block:ifblogtitlefont}'{text:blog title font}',{/block:ifblogtitlefont}
  275.                     serif;
  276.     font-size     : 1.5em;
  277.     font-weight   : bold;
  278.   }
  279.   .sidebar aside div#blog_title a {
  280.     color : {color:blog title};
  281.   }
  282.   .sidebar aside div#blog_description {
  283.     color : {color:blog description};
  284.   }
  285.  
  286.   /* full sidebar */
  287.   .full_sidebar aside {
  288.     -webkit-box-sizing : border-box;
  289.     box-sizing         : border-box;
  290.     position           : fixed;
  291.     top                : 0;
  292.     bottom             : 0;
  293.     left               : 0;
  294.     width              : 30vw;
  295.     padding            : 0 3vw 0;
  296.     background         : {color:sidebar};
  297.   }
  298.   .full_sidebar div#sidebar_icons {
  299.     margin-top    : 6vw;
  300.     margin-top    : 9vw;
  301.     margin-bottom : 3em;
  302.     padding-left  : 3vw;
  303.   }
  304.   .full_sidebar div#sidebar_icons img {
  305.     display       : block;
  306.     border-radius : 100%;
  307.   }
  308.   .full_sidebar img#header {
  309.     width  : 15vw;
  310.     height : 15vw;
  311.     margin : auto;
  312.   }
  313.   .full_sidebar img#avatar {
  314.     z-index : -1;
  315.     top     : -4vw;
  316.     left    : -8vw;
  317.     width   : 10vw;
  318.     height  : 10vw;
  319.     margin  : -15vw auto 0;
  320.   }
  321.   .full_sidebar div#menu_icon {
  322.     top                : 1.5vw;
  323.     left               : 5.5vw;
  324.     width              : 4vw;
  325.     height             : 4vw;
  326.     margin             : auto;
  327.     padding            : 1em;
  328.     border-radius      : 100%;
  329.     background         : #888;
  330.     background         : {color:menu icon};
  331.     -o-transition      : background 0.5s;
  332.     -webkit-transition : background 0.5s;
  333.     transition         : background 0.5s;
  334.   }
  335.   .full_sidebar div#menu_icon.menu_open,
  336.   .full_sidebar div#menu_icon:hover {
  337.     background : {color:menu icon hover};
  338.   }
  339.   .full_sidebar div#menu_icon span {
  340.     display    : block;
  341.     width      : 70%;
  342.     height     : 2px;
  343.     margin     : 0.9vw 15%;
  344.     background : {color:background};
  345.   }
  346.   .full_sidebar div#blog_info {
  347.     margin-top : 2vw;
  348.   }
  349.   .full_sidebar div#blog_title {
  350.     margin-bottom : 0.75em;
  351.     font-family   : {block:ifblogtitlefont}'{text:blog title font}',{/block:ifblogtitlefont}
  352.                     serif;
  353.     font-size     : 1.75em;
  354.     font-weight   : bold;
  355.   }
  356.   .full_sidebar aside div#blog_title a {
  357.     color : {color:blog title};
  358.   }
  359.   .full_sidebar div#blog_description {
  360.     color : {color:blog description};
  361.   }
  362.  
  363.   /* header */
  364.   .full_header aside {
  365.     right      : 0;
  366.     left       : 0;
  367.     height     : 100vh;
  368.     padding    : 0 3vw 0;
  369.     background : {color:sidebar};
  370.   }
  371.   .full_header aside::after {
  372.     content    : '';
  373.     display    : block;
  374.     position   : absolute;
  375.     bottom     : calc(-3.4em - 3px);
  376.     left       : 0;
  377.     width      : 100%;
  378.     height     : calc(3.4em + 3px);
  379.     background : {color:sidebar};
  380.   }
  381.   .full_header div#sidebar_icons {
  382.     position  : absolute;
  383.     top       : 50%;
  384.     transform : translateY(-50%);
  385.   }
  386.   .full_header div#sidebar_icons img {
  387.     display       : block;
  388.     border-radius : 100%;
  389.   }
  390.   .full_header img#header {
  391.     top    : -10vw;
  392.     left   : 7vw;
  393.     width  : 20vw;
  394.     height : 20vw;
  395.     margin : auto;
  396.   }
  397.   .full_header img#avatar {
  398.     top    : 7vw;
  399.     left   : -2vw;
  400.     width  : 12vw;
  401.     height : 12vw;
  402.     margin : -15vw auto 0;
  403.   }
  404.   .full_header div#menu_icon {
  405.     top                : 5.5vw;
  406.     left               : 11.5vw;
  407.     width              : 4vw;
  408.     height             : 4vw;
  409.     margin             : auto;
  410.     padding            : 1em;
  411.     border-radius      : 100%;
  412.     background         : {color:menu icon};
  413.     -o-transition      : background 0.5s;
  414.     -webkit-transition : background 0.5s;
  415.     transition         : background 0.5s;
  416.   }
  417.   .full_header div#menu_icon.menu_open,
  418.   .full_header div#menu_icon:hover {
  419.     background : {color:menu icon hover};
  420.   }
  421.   .full_header div#menu_icon span {
  422.     display    : block;
  423.     width      : 70%;
  424.     height     : 2px;
  425.     margin     : 0.9vw 15%;
  426.     background : {color:background};
  427.   }
  428.   .full_header div#blog_info {
  429.     top         : calc(50% + 4vw);
  430.     max-width   : 50vw;
  431.     margin-left : 32vw;
  432.     transform   : translateY(-50%);
  433.   }
  434.   .full_header div#blog_title {
  435.     margin-bottom  : 1em;
  436.     text-transform : uppercase;
  437.     font-family    : {block:ifblogtitlefont}'{text:blog title font}',{/block:ifblogtitlefont}
  438.                      serif;
  439.     font-size      : 2em;
  440.     font-weight    : bold;
  441.   }
  442.   .full_header aside div#blog_title a {
  443.     color : {color:blog title};
  444.   }
  445.   .full_header div#blog_description {
  446.     color     : {color:blog description};
  447.     font-size : 1.15em;
  448.   }
  449.  
  450.   /* header > fixed menu button */
  451.   .full_header .nav div#sidebar_icons {
  452.     z-index                     : 2;
  453.     position                    : fixed;
  454.     top                         : 0;
  455.     left                        : 0;
  456.     width                       : 100%;
  457.     height                      : calc(3.4em + 3px);
  458.     margin                      : 0;
  459.     background                  : {color:sidebar};
  460.     transform                   : none;
  461.     -o-transition-property      : height,
  462.                                   width,
  463.                                   transform,
  464.                                   margin;
  465.     -webkit-transition-property : height,
  466.                                   width,
  467.                                   transform,
  468.                                   margin;
  469.     transition-property         : height,
  470.                                   width,
  471.                                   transform,
  472.                                   margin;
  473.     -o-transition-duration      : 0.35s;
  474.     -webkit-transition-duration : 0.35s;
  475.     transition-duration         : 0.35s;
  476.   }
  477.   .full_header .nav div#sidebar_icons img {
  478.     width   : 0;
  479.     height  : 0;
  480.     opacity : 0;
  481.   }
  482.   .full_header .nav div#sidebar_icons div#menu_icon {
  483.     z-index            : -1;
  484.     position           : absolute;
  485.     top                : 0;
  486.     left               : 0;
  487.     width              : calc(1.4em + 3px);
  488.     height             : calc(1.4em + 3px);
  489.     margin             : 0;
  490.     padding            : 1em;
  491.     border-radius      : 0;
  492.     background         : {color:sidebar};
  493.     -o-transition      : background 0.5s;
  494.     -webkit-transition : background 0.5s;
  495.     transition         : background 0.5s;
  496.   }
  497.   .full_header .nav div#sidebar_icons div#menu_icon.menu_open,
  498.   .full_header .nav div#sidebar_icons div#menu_icon:hover {
  499.     background : {color:menu icon hover};
  500.   }
  501.   .full_header .nav div#sidebar_icons div#menu_icon span {
  502.     display    : block;
  503.     width      : 80%;
  504.     height     : 1px;
  505.     margin     : 0.35em 10%;
  506.     background : {color:background};
  507.   }
  508.  
  509.   /* blog info popup */
  510.   div#pop {
  511.     z-index            : 2;
  512.     display            : none;
  513.     position           : fixed;
  514.     top                : 0;
  515.     right              : 0;
  516.     bottom             : 0;
  517.     left               : 0;
  518.     opacity            : 0;
  519.     -o-transition      : 0.2s opacity;
  520.     -webkit-transition : 0.2s opacity;
  521.     transition         : 0.2s opacity;
  522.   }
  523.   div#pop.show {
  524.     opacity : 1;
  525.   }
  526.   div#back {
  527.     position   : absolute;
  528.     top        : 0;
  529.     right      : 0;
  530.     bottom     : 0;
  531.     left       : 0;
  532.     background : rgba({RGBcolor:popup overlay},0.5);
  533.   }
  534.   div#wrap {
  535.     top        : 50%;
  536.     left       : 50%;
  537.     width      : 500px;
  538.     padding    : 1.5em;
  539.     background : {color:popup background};
  540.     transform  : translate(-50%, -50%);
  541.   }
  542.   div#menu {
  543.     display : table;
  544.     width   : 100%;
  545.   }
  546.   div#about,
  547.   div#links {
  548.     display        : table-cell;
  549.     width          : 50%;
  550.     padding        : 1em;
  551.     vertical-align : top;
  552.   }
  553.   div#about_text::first-letter {
  554.     width       : 1em;
  555.     height      : 1em;
  556.     float       : left;
  557.     margin      : 0.25em 0.5em 0 0;
  558.     padding     : 0.85em;
  559.     color       : {color:menu accent};
  560.     border      : 0.25em double {color:menu accent};
  561.     font-size   : 1.5em;
  562.     font-weight : bold;
  563.   }
  564.   div#about_text {
  565.     min-height : 5.175em;
  566.   }
  567.   div#about_links {
  568.     {block:ifpopupabout}margin-top : 1em;{/block:ifpopupabout}
  569.     {block:ifnotpopupabout}margin-top : 3em;{/block:ifnotpopupabout}
  570.   }
  571.   div#about_links a {
  572.     color              : {color:text};
  573.     -o-transition      : 0.25s color;
  574.     -webkit-transition : 0.25s color;
  575.     transition         : 0.25s color;
  576.   }
  577.   div#about_links a:hover {
  578.     color : {color:menu accent};
  579.   }
  580.   div#about_links a:not(:last-child) {
  581.     margin-right : 0.35em;
  582.   }
  583.   div#about_links a::after {
  584.     content            : '';
  585.     display            : inline-block;
  586.     position           : relative;
  587.     width              : 0.15em;
  588.     height             : 0.15em;
  589.     margin-left        : 0.1em;
  590.     border             : 0.08em solid {color:menu accent};
  591.     border-radius      : 100%;
  592.     background         : rgba({RGBcolor:menu accent},0.15);  /* a = 0.15 */
  593.     -o-transition      : 0.25s background;
  594.     -webkit-transition : 0.25s background;
  595.     transition         : 0.25s background;
  596.   }
  597.   div#about_links a:hover::after {
  598.     background : {color:menu accent};
  599.   }
  600.   div#links :not(#about_links) a {
  601.     display : block;
  602.   }
  603.   div#links a:not(:last-child) {
  604.     margin-bottom : 1.5em;
  605.   }
  606.   div#links a span.link_title {
  607.     display        : inline-block;
  608.     color          : {color:menu accent};
  609.     overflow       : hidden;
  610.     text-transform : uppercase;
  611.     font-size      : 1.35em;
  612.     font-weight    : bold;
  613.     line-height    : 1.35em;
  614.   }
  615.   div#links a span.link_title::after,
  616.   div#links a span.link_title::before {
  617.     content                    : '';
  618.     position                   : absolute;
  619.     top                        : 0;
  620.     left                       : 0;
  621.     width                      : 100%;
  622.     height                     : 100%;
  623.     background                 : {color:menu link hover};
  624.     transform                  : translate3d(-100%,0,0) translate3d(-1px,0,0);
  625.     transition                 : transform 0.7s;
  626.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  627.   }
  628.   div#links a:hover span.link_title::before {
  629.     transform : translate3d(100%,0,0) translate3d(1px,0,0);
  630.   }
  631.   div#links a:hover span.link_title::after {
  632.     transform : translate3d(0,0,0);
  633.   }
  634.   div#links a span.link_title::after {
  635.     top    : calc(50% - (0.15em / 2));
  636.     height : 0.15em;
  637.   }
  638.   div#links a span.link_description {
  639.     display                    : block;
  640.     color                      : {color:menu link subtitle};
  641.     transition                 : color 0.7s;
  642.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  643.   }
  644.   div#links a:hover span.link_description {
  645.     color : {color:menu link hover};
  646.   }
  647.   div#search {
  648.     margin : 1.5em 0;
  649.   }
  650.   div#search input {
  651.     -webkit-box-sizing         : border-box;
  652.     box-sizing                 : border-box;
  653.     width                      : 100%;
  654.     height                     : 100%;
  655.     padding                    : 0.5em 0;
  656.     color                      : {color:popup background};
  657.     border                     : none;
  658.     background                 : transparent;
  659.     outline                    : none;
  660.     font-family                : 'Open Sans',
  661.                                  sans-serif;
  662.     font-size                  : 1em;
  663.     -o-transition              : padding 0.35s;
  664.     -webkit-transition         : padding 0.35s;
  665.     transition                 : padding 0.35s;
  666.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  667.   }
  668.   div#search input.has_text,
  669.   div#search input:focus {
  670.     padding : 0.5em;
  671.   }
  672.   div#search input:focus {
  673.     outline : 1px solid {color:menu accent};
  674.   }
  675.   div#search input ~ label {
  676.     display            : block;
  677.     position           : absolute;
  678.     top                : 0.3em;
  679.     left               : 0;
  680.     color              : {color:menu accent};
  681.     text-transform     : uppercase;
  682.     font-size          : 1.35em;
  683.     font-weight        : bold;
  684.     -o-transition      : all 0.35s;
  685.     -webkit-transition : all 0.35s;
  686.     transition         : all 0.35s;
  687.   }
  688.   div#search input ~ label::first-letter {
  689.     margin-left        : 0;
  690.     -o-transition      : margin-left 0.35s;
  691.     -webkit-transition : margin-left 0.35s;
  692.     transition         : margin-left 0.35s;
  693.   }
  694.   div#search:hover input:not(:focus):not(.has_text) ~ label {
  695.     color : {color:popup background};
  696.   }
  697.   div#search input.has_text ~ label,
  698.   div#search input:focus ~ label {
  699.     top         : 2.65em;
  700.     left        : 0.5em;
  701.     color       : {color:menu link hover};
  702.     font-size   : 1em;
  703.     font-weight : normal;
  704.   }
  705.   div#search input ~ label span {
  706.     display            : block;
  707.     margin-top         : 0.45em;
  708.     color              : {color:menu link subtitle};
  709.     text-transform     : none;
  710.     font-size          : 0.74em;
  711.     font-weight        : normal;
  712.     -o-transition      : opacity 0.35s;
  713.     -webkit-transition : opacity 0.35s;
  714.     transition         : opacity 0.35s;
  715.   }
  716.   div#search input.has_text ~ label span,
  717.   div#search input:focus ~ label span {
  718.     opacity : 0;
  719.   }
  720.   div#search input ~ span {
  721.     z-index                    : -1;
  722.     display                    : block;
  723.     position                   : absolute;
  724.     top                        : 0;
  725.     left                       : 0;
  726.     width                      : 0;
  727.     height                     : 100%;
  728.     background                 : {color:menu accent};
  729.     -o-transition              : width 0.35s;
  730.     -webkit-transition         : width 0.35s;
  731.     transition                 : width 0.35s;
  732.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  733.   }
  734.   div#search input.has_text ~ span,
  735.   div#search input:focus ~ span,
  736.   div#search input:hover ~ span {
  737.     width : 100%;
  738.   }
  739.   div#search input.has_text ~ span,
  740.   div#search input:focus ~ span {
  741.     background : {color:menu link hover};
  742.   }
  743.  
  744.   /* posts container */
  745.   .sidebar section#posts {
  746.     margin-top  : 4em;
  747.     margin-left : calc(300px + 11em);
  748.   }
  749.   .full_sidebar section#posts {
  750.     width  : 500px;
  751.     margin : 7em auto;
  752.   }
  753.   .full_header section#posts {
  754.     width  : 500px;
  755.     margin : 9em auto 7em;
  756.   }
  757.  
  758.   /* post date */
  759.   .date {
  760.     margin      : 4em 0 2em;
  761.     font-size   : 1.5em;
  762.     font-weight : bold;
  763.     line-height : 1.35em;
  764.   }
  765.   .date:first-child {
  766.     margin : 0 0 2em;
  767.   }
  768.   .date::before {
  769.     content       : "";
  770.     display       : inline-block;
  771.     width         : 0.35em;
  772.     height        : 0.35em;
  773.     margin-right  : 0.65em;
  774.     border        : 0.125em solid {color:post accent};
  775.     border-radius : 100%;
  776.     background    : rgba({RGBcolor:post accent},0.15);  /* a = 0.15 */
  777.   }
  778.   .date a {
  779.     color : {color:text};
  780.   }
  781.   .date div {
  782.     margin         : 0 1.75em;
  783.     font-size      : 0.65em;
  784.     font-weight    : normal;
  785.     letter-spacing : 0.05em;
  786.   }
  787.   .date div span.ampm {
  788.     color        : {color:post accent};
  789.     font-weight  : bold;
  790.     font-variant : small-caps;
  791.   }
  792.   article.post {
  793.     width  : {text:post width};
  794.     margin : 4em 0 7em;
  795.   }
  796.  
  797.   {block:PermalinkPage}
  798.   /* reblog info */
  799.   .reblog_from {
  800.     margin-bottom : 1em;
  801.     text-align    : right;
  802.   }
  803.   .reblog_from a,
  804.   .reblog_from span {
  805.     display        : inline-block;
  806.     height         : 1em;
  807.     vertical-align : middle;
  808.     line-height    : 1em;
  809.   }
  810.   .reblog_from a {
  811.     color : {color:text};
  812.   }
  813.   .reblog_from span {
  814.     width         : 1em;
  815.     height        : 1em;
  816.     margin        : 0 0.5em;
  817.     padding       : 0.5em;
  818.     color         : {color:post accent};
  819.     border        : 2px solid;
  820.     border-radius : 100%;
  821.     background    : rgba({RGBcolor:post accent},0.15);  /* a = 0.15 */
  822.     font-size     : 0.75em;
  823.     font-weight   : bold;
  824.   }
  825.   .reblog_from span::before {
  826.     display : block;
  827.   }
  828.   {/block:PermalinkPage}
  829.  
  830.   /* post titles */
  831.   a.post_title {
  832.     display             : block;
  833.     padding             : 0.75em 0.75em 0.6em;
  834.     color               : {color:post accent};
  835.     font-size           : 1.35em;
  836.     transition-property : color,
  837.                           padding;
  838.     transition-duration : 0.5s;
  839.   }
  840.   article.post.info_open a.post_title,
  841.   article.post:hover a.post_title
  842.   {block:PermalinkPage}, a.post_title{/block:PermalinkPage} {
  843.     color                    : {color:background};
  844.     -o-transition-delay      : 0.25s;
  845.     -webkit-transition-delay : 0.25s;
  846.     transition-delay         : 0.25s;
  847.   }
  848.   a.post_title::after,
  849.   a.post_title::before {
  850.     content                    : '';
  851.     display                    : block;
  852.     position                   : absolute;
  853.     transition-property        : width,
  854.                                  background;
  855.     transition-duration        : 0.5s;
  856.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  857.   }
  858.   a.post_title::before {
  859.     z-index    : 1;
  860.     bottom     : -0.075em;
  861.     left       : 0;
  862.     width      : 4em;
  863.     height     : 0.15em;
  864.     background : {color:post accent};
  865.   }
  866.   a.post_title::after {
  867.     z-index    : -1;
  868.     top        : 0;
  869.     left       : 0;
  870.     width      : 0;
  871.     height     : 100%;
  872.     background : {color:post accent};
  873.   }
  874.   article.post.info_open a.post_title::after,
  875.   article.post.info_open a.post_title::before,
  876.   article.post:hover a.post_title::after,
  877.   article.post:hover a.post_title::before
  878.   {block:PermalinkPage}, a.post_title::before,
  879.   a.post_title::after{/block:PermalinkPage} {
  880.     width : 100%;
  881.   }
  882.   article.post.info_open a.post_title:not(:hover)::after,
  883.   article.post:hover a.post_title:not(:hover)::after {
  884.     -o-transition-delay      : 0.25s;
  885.     -webkit-transition-delay : 0.25s;
  886.     transition-delay         : 0.25s;
  887.   }
  888.   a.post_title:hover::after,
  889.   a.post_title:hover::before {
  890.     background : {color:post title hover};
  891.   }
  892.  
  893.   /* photos, photosets */
  894.   .photo_container::before {
  895.     z-index                    : 1;
  896.     content                    : '';
  897.     display                    : block;
  898.     position                   : absolute;
  899.     bottom                     : -0.10125em;
  900.     left                       : 0;
  901.     width                      : 5.4em;
  902.     height                     : 0.2025em;
  903.     background                 : {color:post accent};
  904.     transition-property        : width,
  905.                                  background;
  906.     transition-duration        : 0.5s;
  907.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  908.   }
  909.   article.post.info_open .photo_container::before,
  910.   article.post:hover .photo_container::before
  911.   {block:PermalinkPage}, .photo_container::before{/block:PermalinkPage} {
  912.     width : 100%;
  913.   }
  914.   [photoset-layout] {
  915.     grid-gap : {text:photoset gutter};
  916.   }
  917.   .tmblr-lightbox {
  918.     background: {color:accent} !important;
  919.     background: rgba({RGBcolor:accent},0.5) !important;
  920.   }
  921.   .tmblr-lightbox .vignette {
  922.     opacity: 0;
  923.   }
  924.   .tmblr-lightbox .lightbox-image {
  925.     -webkit-box-shadow: none !important;
  926.     box-shadow: none !important;
  927.     border-radius: 0 !important;
  928.   }
  929.  
  930.   /* quotes */
  931.   .quote_container {
  932.     display             : block;
  933.     min-height          : 1.15em;
  934.     padding             : 1em 0.85em;
  935.     color               : {color:post accent};
  936.     font-size           : 1.35em;
  937.     transition-property : color,
  938.                           padding;
  939.     transition-duration : 0.5s;
  940.   }
  941.   .quote_container::before {
  942.     z-index                    : 1;
  943.     content                    : '';
  944.     display                    : block;
  945.     position                   : absolute;
  946.     bottom                     : -0.075em;
  947.     left                       : 0;
  948.     width                      : 4em;
  949.     height                     : 0.15em;
  950.     background                 : {color:post accent};
  951.     transition-property        : width,
  952.                                  background;
  953.     transition-duration        : 0.5s;
  954.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  955.   }
  956.   article.post.info_open .quote_container::before,
  957.   article.post:hover .quote_container::before
  958.   {block:PermalinkPage}, .quote_container::before{/block:PermalinkPage} {
  959.     width : 100%;
  960.   }
  961.   .quote_container span.th {
  962.     float     : left;
  963.     padding   : 0 0.85em 0.35em 0;
  964.     font-size : 1.15em;
  965.   }
  966.  
  967.   /* links */
  968.   a.link_container {
  969.     display             : block;
  970.     padding             : 0.75em 0.75em 0.6em;
  971.     color               : {color:post accent};
  972.     font-size           : 1.35em;
  973.     transition-property : color,
  974.                           padding;
  975.     transition-duration : 0.5s;
  976.   }
  977.   article.post.info_open a.link_container,
  978.   article.post:hover a.link_container
  979.   {block:PermalinkPage}, a.link_container{/block:PermalinkPage} {
  980.     color                    : {color:background};
  981.     -o-transition-delay      : 0.25s;
  982.     -webkit-transition-delay : 0.25s;
  983.     transition-delay         : 0.25s;
  984.   }
  985.   a.link_container::after,
  986.   a.link_container::before {
  987.     content                    : '';
  988.     display                    : block;
  989.     position                   : absolute;
  990.     transition-property        : width,
  991.                                  background;
  992.     transition-duration        : 0.5s;
  993.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  994.   }
  995.   a.link_container::before {
  996.     z-index    : 1;
  997.     bottom     : -0.075em;
  998.     left       : 0;
  999.     width      : 4em;
  1000.     height     : 0.15em;
  1001.     background : {color:post accent};
  1002.   }
  1003.   a.link_container::after {
  1004.     z-index    : -1;
  1005.     top        : 0;
  1006.     left       : 0;
  1007.     width      : 0;
  1008.     height     : 100%;
  1009.     background : {color:post accent};
  1010.   }
  1011.   article.post.info_open a.link_container::after,
  1012.   article.post.info_open a.link_container::before,
  1013.   article.post:hover a.link_container::after,
  1014.   article.post:hover a.link_container::before
  1015.   {block:PermalinkPage}, a.link_container::before,
  1016.   a.link_container::after{/block:PermalinkPage} {
  1017.     width : 100%;
  1018.   }
  1019.   article.post.info_open a.link_container:not(:hover)::after,
  1020.   article.post:hover a.link_container:not(:hover)::after {
  1021.     -o-transition-delay      : 0.25s;
  1022.     -webkit-transition-delay : 0.25s;
  1023.     transition-delay         : 0.25s;
  1024.   }
  1025.   a.link_container:hover::after,
  1026.   a.link_container:hover::before {
  1027.     background : {color:post title hover};
  1028.   }
  1029.   a.link_container span.th {
  1030.     left                : -1em;
  1031.     margin-left         : 0.5em;
  1032.     opacity             : 0;
  1033.     font-size           : 0.7em;
  1034.     transition-property : left,
  1035.                           opacity;
  1036.     transition-duration : 0.35s;
  1037.   }
  1038.   a.link_container:hover span.th {
  1039.     left    : 0;
  1040.     opacity : 1;
  1041.   }
  1042.  
  1043.   /* audio */
  1044.   .audio_container::before {
  1045.     z-index                    : 1;
  1046.     content                    : '';
  1047.     display                    : block;
  1048.     position                   : absolute;
  1049.     bottom                     : -0.10125em;
  1050.     left                       : 0;
  1051.     width                      : 5.4em;
  1052.     height                     : 0.2025em;
  1053.     background                 : {color:post accent};
  1054.     transition-property        : width,
  1055.                                  background;
  1056.     transition-duration        : 0.5s;
  1057.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  1058.   }
  1059.   article.post.info_open .audio_container::before,
  1060.   article.post:hover .audio_container::before
  1061.   {block:PermalinkPage}, .audio_container::before{/block:PermalinkPage} {
  1062.     width : 100%;
  1063.   }
  1064.   .audio iframe {
  1065.     width: 100%;
  1066.   }
  1067.   iframe.tumblr_audio_player {
  1068.     height: 85px;
  1069.   }
  1070.   iframe.spotify_audio_player {
  1071.     height: 80px;
  1072.   }
  1073.  
  1074.   /* video */
  1075.   .video_container::before {
  1076.     z-index                    : 1;
  1077.     content                    : '';
  1078.     display                    : block;
  1079.     position                   : absolute;
  1080.     bottom                     : -0.10125em;
  1081.     left                       : 0;
  1082.     width                      : 5.4em;
  1083.     height                     : 0.2025em;
  1084.     background                 : {color:post accent};
  1085.     transition-property        : width,
  1086.                                  background;
  1087.     transition-duration        : 0.5s;
  1088.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  1089.   }
  1090.   article.post.info_open .video_container::before,
  1091.   article.post:hover .video_container::before
  1092.   {block:PermalinkPage}, .video_container::before{/block:PermalinkPage} {
  1093.     width : 100%;
  1094.   }
  1095.  
  1096.   /* iframe overlays (needed for the mouse to work) */
  1097.   .overlay {
  1098.     position : absolute;
  1099.     top      : 0;
  1100.     right    : 0;
  1101.     bottom   : 0;
  1102.     left     : 0;
  1103.   }
  1104.  
  1105.   /* chat */
  1106.   .line:not(:last-child) {
  1107.     margin-bottom : 1em;
  1108.   }
  1109.   .line .label {
  1110.     margin-right : 0.5em;
  1111.     box-shadow   : inset 0 -3px 0 {color:post accent};
  1112.     font-weight  : bold;
  1113.   }
  1114.  
  1115.   /* asks */
  1116.   .ask_text:not(:last-child) {
  1117.     margin-bottom : 2em;
  1118.   }
  1119.   .ask_text .blog {
  1120.     margin-bottom : 0.5em;
  1121.   }
  1122.   .ask_text .blog div,
  1123.   .ask_text .blog span {
  1124.     display        : inline-block;
  1125.     vertical-align : middle;
  1126.   }
  1127.   .ask_text .blog div {
  1128.     margin-right : 0.75em;
  1129.   }
  1130.   .ask_text .blog img {
  1131.     z-index                    : 1;
  1132.     width                      : 1.75em;
  1133.     height                     : 1.75em;
  1134.     opacity                    : 1;
  1135.     border-radius              : 100%;
  1136.     -o-transition              : opacity 0.5s;
  1137.     -webkit-transition         : opacity 0.5s;
  1138.     transition                 : opacity 0.5s;
  1139.     transition-timing-function : cubic-bezier(0.7,0,0.3,1);
  1140.   }
  1141.   .ask_text .blog div span {
  1142.     display       : block;
  1143.     position      : absolute;
  1144.     top           : calc(50% - 0.5em);
  1145.     left          : calc(50% - 0.5em);
  1146.     height        : 1em;
  1147.     color         : {color:post accent};
  1148.     border-radius : 100%;
  1149.     background    : {color:post background};
  1150.     font-size     : 1.25em;
  1151.     line-height   : 1em;
  1152.   }
  1153.   .reply.ask_text .blog div span {
  1154.     transform : rotate(45deg);
  1155.   }
  1156.   article.post.info_open .ask_text .blog div img,
  1157.   article.post:hover .ask_text .blog div img {
  1158.     opacity : 0;
  1159.   }
  1160.  
  1161.   /* post body ( + captions) */
  1162.   .post_body {
  1163.     padding    : 1.5em;
  1164.     background : {color:post background};
  1165.   }
  1166.  
  1167.   /* comment chains */
  1168.   .reblogged:not(:last-child) {
  1169.     margin-bottom : 2em;
  1170.   }
  1171.   .reblogged .blog {
  1172.     margin-bottom : 0.5em;
  1173.   }
  1174.   .reblogged .blog img {
  1175.     display        : inline-block;
  1176.     width          : 1.75em;
  1177.     height         : 1.75em;
  1178.     margin-right   : 0.75em;
  1179.     border-radius  : 100%;
  1180.     vertical-align : middle;
  1181.   }
  1182.   .reblogged .blog span {
  1183.     display     : inline-block;
  1184.     font-size   : 1.05em;
  1185.     font-weight : bold;
  1186.   }
  1187.   .reblogged .blog span.deactivated::after {
  1188.     content            : 'deactivated';
  1189.     margin-left        : 0.65em;
  1190.     color              : {color:post accent};
  1191.     opacity            : 0;
  1192.     font-weight        : normal;
  1193.     -o-transition      : opacity 0.35s;
  1194.     -webkit-transition : opacity 0.35s;
  1195.     transition         : opacity 0.35s;
  1196.   }
  1197.   .reblogged:hover .blog span.deactivated::after {
  1198.     opacity : 1;
  1199.   }
  1200.  
  1201.   {block:IndexPage}
  1202.   /* post info */
  1203.   .post_info {
  1204.     z-index   : 1;
  1205.     position  : absolute;
  1206.     right     : 0;
  1207.     bottom    : 0;
  1208.     transform : translate(50%, 50%);
  1209.   }
  1210.   .post_info > :not(.icon) {
  1211.     position           : absolute;
  1212.     opacity            : 0;
  1213.     font-size          : 0.8em;
  1214.     -o-transition      : all 0.35s;
  1215.     -webkit-transition : all 0.35s;
  1216.     transition         : all 0.35s;
  1217.   }
  1218.   .post_info:not(.open) > :not(.icon) {
  1219.     pointer-events : none;
  1220.   }
  1221.   .post_info.open > :not(.icon) {
  1222.     opacity : 1;
  1223.   }
  1224.   .post_info > :not(.icon) span {
  1225.     position : absolute;
  1226.   }
  1227.   .icon {
  1228.     z-index            : 1;
  1229.     width              : 1em;
  1230.     height             : 1em;
  1231.     padding            : 1em;
  1232.     color              : {color:background};
  1233.     border-radius      : 100%;
  1234.     background         : {color:post accent};
  1235.     -o-transition      : background 0.35s;
  1236.     -webkit-transition : background 0.35s;
  1237.     transition         : background 0.35s;
  1238.   }
  1239.   .icon::before {
  1240.     content            : '\eb31';
  1241.     display            : block;
  1242.     position           : absolute;
  1243.     opacity            : 0;
  1244.     font-family        : 'honeybee';
  1245.     line-height        : 1em;
  1246.     -o-transition      : all 0.65s;
  1247.     -webkit-transition : all 0.65s;
  1248.     transition         : all 0.65s;
  1249.   }
  1250.   article.post:hover .icon::before {
  1251.     opacity : 1;
  1252.   }
  1253.   .post_info.open .icon::before {
  1254.     opacity                     : 0;
  1255.     -ms-transform               : scale(0);
  1256.     -webkit-transform           : scale(0);
  1257.     transform                   : scale(0);
  1258.     -o-transition-duration      : 0.35s;
  1259.     -webkit-transition-duration : 0.35s;
  1260.     transition-duration         : 0.35s;
  1261.   }
  1262.   .icon:hover,
  1263.   .post_info.open .icon {
  1264.     background : {color:post info accent};
  1265.   }
  1266.   .icon span {
  1267.     transform  : scale(0);
  1268.     transition : 0.35s all;
  1269.   }
  1270.   .post_info.open .icon span {
  1271.     transform           : scale(1);
  1272.     transition-duration : 0.65s;
  1273.   }
  1274.   .notecount {
  1275.     top                         : -4em;
  1276.     left                        : calc(50% + 1.5em);
  1277.     padding                     : 1em;
  1278.     color                       : {color:background};
  1279.     border-radius               : 100%;
  1280.     background                  : {color:post accent};
  1281.     -o-transition-duration      : 0.5s !important;
  1282.     -webkit-transition-duration : 0.5s !important;
  1283.     transition-duration         : 0.5s !important;
  1284.     pointer-events              : auto !important;
  1285.   }
  1286.   article.post:hover .post_info:not(.open) .notecount {
  1287.     left    : 50%;
  1288.     opacity : 0.75;
  1289.   }
  1290.   .post_info.open .notecount,
  1291.   article.post:hover .notecount:hover {
  1292.     left                        : 50%;
  1293.     opacity                     : 1 !important;
  1294.     -o-transition-duration      : 0.35s !important;
  1295.     -webkit-transition-duration : 0.35s !important;
  1296.     transition-duration         : 0.35s !important;
  1297.   }
  1298.   .post_info.open .notecount {
  1299.     background : {color:post info accent};
  1300.   }
  1301.   .notecount:hover {
  1302.     color : {color:background};
  1303.   }
  1304.   .post_info > .like_button {
  1305.     top           : 0;
  1306.     left          : 0;
  1307.     width         : 1em;
  1308.     height        : 1em;
  1309.     padding       : 1em;
  1310.     color         : {color:background};
  1311.     border-radius : 100%;
  1312.     background    : rgba({RGBcolor:post info accent},0.5);  /* a = 0.5 */
  1313.     transform     : translateY(50%);
  1314.   }
  1315.   .post_info.open > .like_button {
  1316.     top  : 3.5em;
  1317.     left : -1em;
  1318.   }
  1319.   .like_button > .like_button {
  1320.     z-index  : 10;
  1321.     position : absolute;
  1322.     top      : 0;
  1323.     right    : 0;
  1324.     bottom   : 0;
  1325.     left     : 0;
  1326.     width    : 100%;
  1327.     height   : 100%;
  1328.     opacity  : 0;
  1329.   }
  1330.   .like_button iframe {
  1331.     width  : 100% !important;
  1332.     height : 100% !important;
  1333.   }
  1334.   .like_button span {
  1335.     z-index : 1;
  1336.     width   : 100%;
  1337.     height  : 100%;
  1338.   }
  1339.   .like_button:hover + span {
  1340.     color : {color:post info accent};
  1341.   }
  1342.   .like_button.liked + span {
  1343.     color : {color:post info accent};
  1344.   }
  1345.   .reblog_button {
  1346.     top           : 0;
  1347.     left          : 0;
  1348.     width         : 1em;
  1349.     height        : 1em;
  1350.     padding       : 1em;
  1351.     color         : {color:background};
  1352.     border-radius : 100%;
  1353.     background    : rgba({RGBcolor:post info accent},0.65);  /* a = 0.65 */
  1354.   }
  1355.   .post_info.open .reblog_button {
  1356.     top                      : 4em;
  1357.     left                     : 4em;
  1358.     -o-transition-delay      : 0.2s;
  1359.     -webkit-transition-delay : 0.2s;
  1360.     transition-delay         : 0.2s;
  1361.   }
  1362.   .reblog_button:hover {
  1363.     background : rgba({RGBcolor:post info accent},0.85);  /* a = 0.85 */
  1364.     color      : {color:background};
  1365.   }
  1366.   .info_icon {
  1367.     top           : 0;
  1368.     left          : 0;
  1369.     width         : 1em;
  1370.     height        : 1em;
  1371.     padding       : 1em;
  1372.     color         : {color:background};
  1373.     border-radius : 100%;
  1374.     background    : rgba({RGBcolor:post info accent},0.8);  /* a = 0.8 */
  1375.     transform     : translateX(50%);
  1376.   }
  1377.   .post_info.open .info_icon {
  1378.     top                      : -1.25em;
  1379.     left                     : 3.5em;
  1380.     -o-transition-delay      : 0.4s;
  1381.     -webkit-transition-delay : 0.4s;
  1382.     transition-delay         : 0.4s;
  1383.   }
  1384.   .post_info .reblog_info {
  1385.     display : none;
  1386.   }
  1387.   {/block:IndexPage}
  1388.  
  1389.   {block:PermalinkPage}
  1390.   /* post info */
  1391.   .reblog_info {
  1392.     margin-top : 1.5em;
  1393.     text-align : center;
  1394.   }
  1395.   .reblog_info > * {
  1396.     display        : inline-block;
  1397.     width          : 1em;
  1398.     height         : 1em;
  1399.     color          : {color:post info accent};
  1400.     border-radius  : 100%;
  1401.     text-align     : left;
  1402.     vertical-align : middle;
  1403.     font-size      : 1.15em;
  1404.   }
  1405.   .reblog_info > :not(:last-child) {
  1406.     margin-right : 1.5em;
  1407.   }
  1408.   .reblog_info > .like_button {
  1409.     width         : 1em;
  1410.     height        : 1em;
  1411.     border-radius : 100%;
  1412.   }
  1413.   .like_button > .like_button {
  1414.     z-index  : 10;
  1415.     position : absolute;
  1416.     top      : 0;
  1417.     right    : 0;
  1418.     bottom   : 0;
  1419.     left     : 0;
  1420.     width    : 100%;
  1421.     height   : 100%;
  1422.     opacity  : 0;
  1423.   }
  1424.   .like_button iframe {
  1425.     width  : 100% !important;
  1426.     height : 100% !important;
  1427.   }
  1428.   .like_button span {
  1429.     z-index : 1;
  1430.     width   : 100%;
  1431.     height  : 100%;
  1432.   }
  1433.   .like_button:hover + span {
  1434.     color : {color:post accent};
  1435.   }
  1436.   .like_button.liked + span {
  1437.     color : {color:post accent};
  1438.   }
  1439.   .reblog_button:hover {
  1440.     color : {color:post accent};
  1441.   }
  1442.   .reblog_info span {
  1443.     position : absolute;
  1444.   }
  1445.   .reblog_info > .accent_circle {
  1446.     width      : 0;
  1447.     height     : 0;
  1448.     padding    : 0.75em;
  1449.     border     : 2px solid {color:post accent};
  1450.     background : transparent;
  1451.     background : rgba({RGBcolor:post accent}, 0.08);  /* a = 0.08 */
  1452.   }
  1453.  
  1454.   /* post notes */
  1455.   div#post_notes {
  1456.     margin-top : 4em;
  1457.     padding    : 2em;
  1458.     background : {color:post background};
  1459.   }
  1460.   div#post_notes > div {
  1461.     margin-bottom : 1.25em;
  1462.     padding       : 0.25em 0.25em 0.75em;
  1463.     border-bottom : 0.15em solid {color:post info accent};
  1464.     font-size     : 1.5em;
  1465.     font-weight   : bold;
  1466.   }
  1467.   div#post_notes ol.notes {
  1468.     margin     : 0;
  1469.     padding    : 0;
  1470.     list-style : none;
  1471.   }
  1472.   div#post_notes ol.notes li {
  1473.     margin : 0.75em 0;
  1474.   }
  1475.   div#post_notes ol.notes li img {
  1476.     display : none;
  1477.   }
  1478.   div#post_notes ol.notes li.like::before,
  1479.   div#post_notes ol.notes li.reblog::before,
  1480.   div#post_notes ol.notes li.reply::before {
  1481.     width         : 1em;
  1482.     height        : 1em;
  1483.     margin-right  : 1em;
  1484.     padding       : 0.5em;
  1485.     color         : {color:post info accent};
  1486.     border-radius : 100%;
  1487.     font-family   : "honeybee";
  1488.     font-size     : 0.7em;
  1489.   }
  1490.   div#post_notes ol.notes li.like::before {
  1491.     content : "\ea55";
  1492.   }
  1493.   div#post_notes ol.notes li.reblog::before {
  1494.     content : "\ebc3";
  1495.   }
  1496.   div#post_notes ol.notes li.reply::before {
  1497.     content : "\ebcf";
  1498.   }
  1499.   div#post_notes ol.notes li.original_post::before {
  1500.     content : "\eb68";
  1501.   }
  1502.   {/block:PermalinkPage}
  1503.  
  1504.   /* reblog info popup */
  1505.   div#reblog_pop {
  1506.     z-index            : 2;
  1507.     display            : none;
  1508.     position           : fixed;
  1509.     top                : 0;
  1510.     right              : 0;
  1511.     bottom             : 0;
  1512.     left               : 0;
  1513.     opacity            : 0;
  1514.     -o-transition      : 0.2s opacity;
  1515.     -webkit-transition : 0.2s opacity;
  1516.     transition         : 0.2s opacity;
  1517.   }
  1518.   div#reblog_pop.show {
  1519.     opacity : 1;
  1520.   }
  1521.   div#reblog_back {
  1522.     position   : absolute;
  1523.     top        : 0;
  1524.     right      : 0;
  1525.     bottom     : 0;
  1526.     left       : 0;
  1527.     background : rgba({RGBcolor:popup overlay},0.5);
  1528.   }
  1529.   div#reblog_wrap {
  1530.     top        : 50%;
  1531.     left       : 50%;
  1532.     max-width  : 500px;
  1533.     padding    : 2em;
  1534.     background : {color:popup background};
  1535.     transform  : translate(-50%, -50%);
  1536.   }
  1537.   div#reblog_wrap .timestamp {
  1538.     margin-bottom  : 1em;
  1539.     padding-bottom : 0.5em;
  1540.     border-bottom  : 0.135em solid {color:post info accent};
  1541.     font-size      : 1.5em;
  1542.     font-weight    : bold;
  1543.     line-height    : 1.25em;
  1544.   }
  1545.   div#reblog_wrap .timestamp::before {
  1546.     content       : "";
  1547.     display       : inline-block;
  1548.     width         : 0.35em;
  1549.     height        : 0.35em;
  1550.     margin-right  : 0.65em;
  1551.     border        : 0.125em solid {color:post info accent};
  1552.     border-radius : 100%;
  1553.     background    : rgba({RGBcolor:post info accent},0.15);  /* a = 0.15 */
  1554.   }
  1555.   div#reblog_wrap .timestamp div {
  1556.     margin         : 0 1.75em;
  1557.     font-size      : 0.65em;
  1558.     font-weight    : normal;
  1559.     letter-spacing : 0.05em;
  1560.   }
  1561.   div#reblog_wrap .timestamp div span.ampm {
  1562.     color        : {color:post info accent};
  1563.     font-weight  : bold;
  1564.     font-variant : small-caps;
  1565.   }
  1566.   div#reblog_wrap .title {
  1567.     margin-bottom : 0.5em;
  1568.     font-size     : 1.35em;
  1569.     font-weight   : bold;
  1570.   }
  1571.   div#reblog_wrap .title span {
  1572.     margin-left : 0.65em;
  1573.     color       : {color:post info accent};
  1574.     font-size   : 0.75em;
  1575.     font-weight : normal;
  1576.   }
  1577.   div#reblog_wrap .tags {
  1578.     margin-top : 1.15em;
  1579.   }
  1580.   div#reblog_wrap a.tag {
  1581.     color              : {color:text};
  1582.     -o-transition      : 0.25s color;
  1583.     -webkit-transition : 0.25s color;
  1584.     transition         : 0.25s color;
  1585.   }
  1586.   div#reblog_wrap a.tag:hover {
  1587.     color : {color:post info accent};
  1588.   }
  1589.   div#reblog_wrap a.tag:not(:last-child) {
  1590.     margin-right : 0.35em;
  1591.   }
  1592.   div#reblog_wrap a.tag::after {
  1593.     content            : '';
  1594.     display            : inline-block;
  1595.     position           : relative;
  1596.     width              : 0.15em;
  1597.     height             : 0.15em;
  1598.     margin-left        : 0.1em;
  1599.     border             : 0.08em solid {color:post info accent};
  1600.     border-radius      : 100%;
  1601.     background         : rgba({RGBcolor:post info accent},0.15);  /* a = 0.15 */
  1602.     -o-transition      : 0.25s background;
  1603.     -webkit-transition : 0.25s background;
  1604.     transition         : 0.25s background;
  1605.   }
  1606.   div#reblog_wrap a.tag:hover::after {
  1607.     background : {color:post info accent};
  1608.   }
  1609.  
  1610.   /* pagination, load more button */
  1611.   div#pagination {
  1612.     -webkit-box-sizing : border-box;
  1613.     box-sizing         : border-box;
  1614.     width              : 100%;
  1615.     margin             : -3em auto 4em;
  1616.     padding            : 0.75em;
  1617.     text-align         : center;
  1618.     text-transform     : lowercase;
  1619.   }
  1620.   div#pagination.infinite,
  1621.   div#pagination.loadmore,
  1622.   span#load-more:not(.loadmore) {
  1623.     display : none;
  1624.   }
  1625.   div#pagination * {
  1626.     display        : inline-block;
  1627.     margin         : 0 0.35em;
  1628.     vertical-align : middle;
  1629.   }
  1630.   div#pagination span {
  1631.     width         : 1em;
  1632.     height        : 1em;
  1633.     margin        : 0 0.625em;
  1634.     padding       : 0.5em;
  1635.     color         : {color:text};
  1636.     border        : 0.15em solid {color:accent};
  1637.     border-radius : 100%;
  1638.     font-size     : 0.8em;
  1639.     line-height   : 1em;
  1640.   }
  1641.   div#pagination.simple .page {
  1642.     display : none;
  1643.   }
  1644.   span#load-more {
  1645.     display            : block;
  1646.     width              : 100%;
  1647.     margin             : -3em auto 4em;
  1648.     color              : {color:text};
  1649.     text-align         : center;
  1650.     text-transform     : lowercase;
  1651.     -o-transition      : 0.25s color;
  1652.     -webkit-transition : 0.25s color;
  1653.     transition         : 0.25s color;
  1654.     cursor             : help;
  1655.   }
  1656.   span#load-more::after {
  1657.     content            : '';
  1658.     display            : inline-block;
  1659.     position           : relative;
  1660.     width              : 0.25em;
  1661.     height             : 0.25em;
  1662.     margin-left        : 0.1em;
  1663.     border-radius      : 100%;
  1664.     background         : rgba({RGBcolor:accent},0.15);  /* a = 0.15 */
  1665.     -o-transition      : 0.25s background;
  1666.     -webkit-transition : 0.25s background;
  1667.     transition         : 0.25s background;
  1668.   }
  1669.   span#load-more:hover {
  1670.     color : {color:accent};
  1671.   }
  1672.   span#load-more:hover::after {
  1673.     background : rgba({RGBcolor:accent},0.35);
  1674.   }
  1675.  
  1676.   div#infscr-loading {
  1677.     display : none !important;
  1678.   }
  1679.  
  1680.   /* loader */
  1681.   div#loader_container,
  1682.   div#loader,
  1683.   div#loader span,
  1684.   div#spinner {
  1685.     -webkit-box-sizing : border-box;
  1686.     box-sizing         : border-box;
  1687.   }
  1688.   div#loader_container {
  1689.     z-index            : 10;
  1690.     position           : fixed;
  1691.     top                : 0;
  1692.     left               : 0;
  1693.     width              : 100%;
  1694.     height             : 100%;
  1695.     opacity            : 0;
  1696.     background-color   : {color:accent};
  1697.     -o-transition      : opacity 0.35s;
  1698.     -webkit-transition : opacity 0.35s;
  1699.     transition         : opacity 0.35s;
  1700.     pointer-events     : none;
  1701.   }
  1702.   body.loading div#loader_container {
  1703.     opacity        : 1;
  1704.     pointer-events : all;
  1705.   }
  1706.   div#loader {
  1707.     position          : absolute;
  1708.     top               : 50%;
  1709.     left              : 50%;
  1710.     -webkit-transform : translate(-50%, -50%);
  1711.     transform         : translate(-50%, -50%);
  1712.   }
  1713.   div#loader div#spinner {
  1714.     display                  : block;
  1715.     width                    : 50px;
  1716.     height                   : 50px;
  1717.     -webkit-animation        : rotate 1000ms linear 0ms infinite;
  1718.     animation                : rotate 1000ms linear 0ms infinite;
  1719.     -webkit-transform-origin : center;
  1720.     transform-origin         : center;
  1721.   }
  1722.   div#loader span {
  1723.     display       : block;
  1724.     position      : absolute;
  1725.     top           : 0;
  1726.     left          : 0;
  1727.     width         : 100%;
  1728.     height        : 100%;
  1729.     border        : 2px solid {color:background};
  1730.     border-radius : 50%;
  1731.   }
  1732.   div#loader span:nth-child(2) {
  1733.     top  : 10px;
  1734.     left : -18px;
  1735.   }
  1736.   div#loader span:nth-child(3) {
  1737.     top  : -10px;
  1738.     left : -18px;
  1739.   }
  1740.   div#loader span:nth-child(4) {
  1741.     top  : -18px;
  1742.     left : 0;
  1743.   }
  1744.   div#loader span:nth-child(5) {
  1745.     top  : -10px;
  1746.     left : 18px;
  1747.   }
  1748.   div#loader span:nth-child(6) {
  1749.     top  : 10px;
  1750.     left : 18px;
  1751.   }
  1752.   div#loader span:nth-child(7) {
  1753.     top  : 18px;
  1754.     left : 0;
  1755.   }
  1756.   @-webkit-keyframes rotate {
  1757.     from {
  1758.       -webkit-transform : rotate(0deg);
  1759.       transform         : rotate(0deg);
  1760.     }
  1761.     to {
  1762.       -webkit-transform : rotate(360deg);
  1763.       transform         : rotate(360deg);
  1764.     }
  1765.   }
  1766.   @keyframes rotate {
  1767.     from {
  1768.       -webkit-transform : rotate(0deg);
  1769.       transform         : rotate(0deg);
  1770.     }
  1771.     to {
  1772.       -webkit-transform : rotate(360deg);
  1773.       transform         : rotate(360deg);
  1774.     }
  1775.   }
  1776.  
  1777.   /* tumblr controls */
  1778.   iframe.tmblr-iframe {
  1779.     -webkit-transform: scale(0.75);
  1780.             transform: scale(0.75);
  1781.     -webkit-transform-origin: right;
  1782.             transform-origin: right;
  1783.     {block:Ifdarktumblrcontrols}
  1784.     -webkit-filter: invert(100%) hue-rotate(180deg);
  1785.     filter: invert(100%) hue-rotate(180deg);
  1786.     {/block:Ifdarktumblrcontrols}
  1787.     opacity: 0.75;
  1788.     -webkit-transition: 0.2s all ease-in-out;
  1789.     transition: 0.2s all ease-in-out;
  1790.   }
  1791.   iframe.tmblr-iframe:hover {
  1792.     opacity: 1;
  1793.   }
  1794.   </style>
  1795. </head>
  1796. <body class="loading">
  1797.   <div id="container" class="{select:sidebar type}">
  1798.     <aside>
  1799.       <div id="sidebar_icons">
  1800.         {block:ificononeimage}<img src="{image:icon one}" alt="header" id="header">{/block:ificononeimage}
  1801.         {block:ificontwoimage}<img src="{image:icon two}" alt="avatar" id="avatar">{/block:ificontwoimage}
  1802.         <div id="menu_icon"><span></span><span></span><span></span></div>
  1803.       </div>
  1804.       <div id="blog_info">
  1805.         <div id="blog_title"><a href="{BlogURL}">{Title}</a></div>
  1806.         <div id="blog_description">{block:ifdescription}{text:description}{/block:ifdescription}{block:ifnotdescription}{Description}{/block:ifnotdescription}</div>
  1807.       </div>
  1808.     </aside>
  1809.     <div id="pop">
  1810.       <div id="back"></div>
  1811.       <div id="wrap">
  1812.         <div id="menu">
  1813.           {block:ifpopupabout}
  1814.           <div id="about">
  1815.             <div id="about_text">
  1816.               {text:popup about}
  1817.             </div>
  1818.             <div id="about_links">
  1819.               <a href="/archive" style="text-transform:lowercase">{lang:Archive}</a>
  1820.               {block:HasPages}
  1821.                 {block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}
  1822.               {/block:HasPages}
  1823.               <a href="https://annasthms.tumblr.com/" id="cred" {Target}>theme by annasthms</a>
  1824.             </div>
  1825.           </div>
  1826.           {/block:ifpopupabout}
  1827.           <div id="links">
  1828.             <div id="links_list">
  1829.               {block:ifbloglinkoneurl}{block:ifbloglinkonetitle}
  1830.               <a href="{text:blog link one url}">
  1831.                 <span class="link_title">{text:blog link one title}</span>
  1832.                 {block:ifbloglinkonesubtitle}<span class="link_description">{text:blog link one subtitle}</span>{/block:ifbloglinkonesubtitle}
  1833.               </a>
  1834.               {/block:ifbloglinkonetitle}{/block:ifbloglinkoneurl}
  1835.               {block:ifbloglinktwourl}{block:ifbloglinktwotitle}
  1836.               <a href="{text:blog link two url}">
  1837.                 <span class="link_title">{text:blog link two title}</span>
  1838.                 {block:ifbloglinktwosubtitle}<span class="link_description">{text:blog link two subtitle}</span>{/block:ifbloglinktwosubtitle}
  1839.               </a>
  1840.               {/block:ifbloglinktwotitle}{/block:ifbloglinktwourl}
  1841.               {block:ifbloglinkthreeurl}{block:ifbloglinkthreetitle}
  1842.               <a href="{text:blog link three url}">
  1843.                 <span class="link_title">{text:blog link three title}</span>
  1844.                 {block:ifbloglinkthreesubtitle}<span class="link_description">{text:blog link three subtitle}</span>{/block:ifbloglinkthreesubtitle}
  1845.               </a>
  1846.               {/block:ifbloglinkthreetitle}{/block:ifbloglinkthreeurl}
  1847.               {block:ifbloglinkfoururl}{block:ifbloglinkfourtitle}
  1848.               <a href="{text:blog link four url}">
  1849.                 <span class="link_title">{text:blog link four title}</span>
  1850.                 {block:ifbloglinkfoursubtitle}<span class="link_description">{text:blog link four subtitle}</span>{/block:ifbloglinkfoursubtitle}
  1851.               </a>
  1852.               {/block:ifbloglinkfourtitle}{/block:ifbloglinkfoururl}
  1853.             </div>
  1854.             <div id="search">
  1855.               <form action="/search" method="get">
  1856.                 <input type="text" id="s" name="q" value="" onkeyup="check(this)" />
  1857.                 <label for="s">{lang:Search} {block:ifsearchbarsubtitle}<span>{text:search bar subtitle}</span>{/block:ifsearchbarsubtitle}</label>
  1858.                 <span></span>
  1859.               </form>
  1860.             </div>
  1861.           {block:ifnotpopupabout}
  1862.           <div id="about_links">
  1863.             <a href="/archive" style="text-transform:lowercase">{lang:Archive}</a>
  1864.             {block:HasPages}
  1865.               {block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}
  1866.             {/block:HasPages}
  1867.             <a href="https://annasthms.tumblr.com/" id="cred" {Target}>theme by annasthms</a>
  1868.           </div>
  1869.           {/block:ifnotpopupabout}
  1870.           </div>
  1871.         </div>
  1872.       </div>
  1873.     </div>
  1874.  
  1875.     <section id="posts">
  1876.  
  1877.       {block:Posts}
  1878.  
  1879.       {block:IndexPage}{block:NewDayDate}<div class="date"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Month} {DayOfMonth}, {Year}</a></div>{/block:NewDayDate}{/block:IndexPage}
  1880.       {block:PermalinkPage}{block:Date}<div class="date">{Month} {DayOfMonth}, {Year} <div><span class="hour">{12Hour}</span>:<span class="minutes">{Minutes}</span>:<span class="seconds">{Seconds}</span> <span class="ampm">{AmPm}</span></div></div>{/block:Date}{/block:PermalinkPage}
  1881.  
  1882.       <article class="post {PostType}" id="{PostID}">
  1883.  
  1884.         {block:PermalinkPage}{block:RebloggedFrom}<div class="reblog_from"><a href="{ReblogParentURL}" {Target}>{ReblogParentName}</a><span class="th th-shuffle"></span><a href="{ReblogRootURL}" {Target}>{ReblogRootName}</a></div>{/block:RebloggedFrom}{/block:PermalinkPage}
  1885.  
  1886.         {block:Title}<a href="{Permalink}" class="post_title"><span>{Title}</span></a>{/block:Title}
  1887.  
  1888.         {block:Text}
  1889.         <div class="post_body">
  1890.           <div class="body">{block:NotReblog}{Body}{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog"><img src="{PortraitURL-64}" /><span class="{block:IsDeactivated}deactivated {/block:IsDeactivated}{block:HasPermalink}has_link{block:HasPermalink}">{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div><div class="comment">{Body}</div></div>{/block:Reblogs}{/block:RebloggedFrom}</div>
  1891.         </div>
  1892.         {/block:Text}
  1893.  
  1894.         {block:Photo}<div class="photo_container"><a href="#" class="pic" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); addClass(document.body,'tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a></div>{/block:Photo}
  1895.  
  1896.         {block:Photoset}<div class="photo_container photoset_container"><div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div></div>{/block:Photoset}
  1897.  
  1898.         {block:Quote}<div class="quote_container"><span class="th th-quote-up"></span>{Quote}</div>{block:Source}<div class="post_body quote_source">{Source}</div>{/block:Source}{/block:Quote}
  1899.  
  1900.         {block:Link}<a href="{URL}" class="link_container{block:Description} has_desc{/block:Description}" {Target}><span>{Name}</span><span class="th th-right-arrow"></span></a>
  1901.         {block:Description}<div class="post_body">
  1902.           {block:NotReblog}{Description}{/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}
  1903.         </div>{/block:Description}{/block:Link}
  1904.  
  1905.         {block:Chat}
  1906.         <div class="post_body">{block:Lines}<div class="line">{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}</div>{/block:Lines}</div>{/block:Chat}
  1907.  
  1908.         {block:Audio}{block:AudioEmbed}<div class="audio_container">{AudioEmbed}</div>{/block:AudioEmbed}{/block:Audio}
  1909.  
  1910.         {block:Video}<div class="video_container">{VideoEmbed-500}</div>{/block:Video}
  1911.  
  1912.         {block:Answer}
  1913.         <div class="post_body">
  1914.           <div class="question ask_text">
  1915.             <div class="blog">
  1916.               <div><img src="{AskerPortraitURL-48}" alt=""><span class="th th-question"></span></div><span>{Asker}</span>
  1917.             </div>
  1918.             <div class="q">{Question}</div>
  1919.           </div>
  1920.           {block:Answerer}
  1921.           <div class="orig_answer ask_text">
  1922.             <div class="blog">
  1923.               <div><img src="{AnswererPortraitURL-48}" alt=""><span class="th th-chat-bubbles"></span></div>
  1924.               <span>{Answerer}</span>
  1925.             </div>
  1926.             <div class="a">{Answer}</div>
  1927.           </div>
  1928.           {block:Reblogs}
  1929.           <div class="reply ask_text">
  1930.             <div class="blog">
  1931.               <div><img src="{PortraitURL-64}" alt=""><span class="th th-cross-1"></span></div>
  1932.               <span class="{block:IsDeactivated}deactivated {/block:IsDeactivated}{block:HasPermalink}has_link{block:HasPermalink}">{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span>
  1933.             </div>
  1934.             <div class="r">{Body}</div>
  1935.           </div>
  1936.           {/block:Reblogs}
  1937.           {/block:Answerer}
  1938.           {block:NotReblog}
  1939.           <div class="orig_answer ask_text">
  1940.             <div class="blog">
  1941.               <div><img src="{PortraitURL-48}" alt=""><span class="th th-chat-bubbles"></span></div>
  1942.               <span><a href="{Permalink}">{Name}</a></span></span>
  1943.             </div>
  1944.             <div class="a">{Answer}</div>
  1945.           </div>
  1946.           {/block:NotReblog}
  1947.         </div>
  1948.         {/block:Answer}
  1949.  
  1950.         {block:Caption}<div class="post_body post_caption">
  1951.           {block:NotReblog}{Caption}{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog"><img src="{PortraitURL-64}" /><span class="{block:IsDeactivated}deactivated {/block:IsDeactivated}{block:HasPermalink}has_link{block:HasPermalink}">{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div><div class="comment">{Body}</div></div>{/block:Reblogs}{/block:RebloggedFrom}
  1952.         </div>{/block:Caption}
  1953.  
  1954.         {block:Date}
  1955.  
  1956.         {block:IndexPage}
  1957.         <div class="post_info">
  1958.           <div class="icon" onclick="toggleClass(this.parentNode, 'open')" month="00" day="00"><span class="th th-cross-3-o"></span></div>
  1959.           <a href="{Permalink}" class="notecount">{NoteCount}</a>
  1960.           <div class="like_button">{LikeButton}<span class="th th-heart-1-o"></span></div>
  1961.           <a href="{ReblogURL}" class="reblog_button"><span class="th th-reload"></span></a>
  1962.           <div class="info_icon" onclick="showInfo(this)"><span class="th th-information-o"></span></div>
  1963.           <div class="reblog_info" post="{PostID}">
  1964.             <div class="timestamp">{Month} {DayofMonth}, {Year} <div><span class="hour">{12Hour}</span>:<span class="minutes">{Minutes}</span>:<span class="seconds">{Seconds}</span> <span class="ampm">{AmPm}</span></div></div>
  1965.             {block:Title}<div class="title">{Title}</div>{/block:Title}
  1966.             {block:Link}<div class="title">{Name}{block:Host}<span class="host">{Host}</span>{/block:Host}</div>{/block:Link}
  1967.             {block:Audio}{block:TrackName}<div class="title">{TrackName}{block:Artist}<span class="artist">{Artist}</span>{/block:Artist}</div>{/block:TrackName}{/block:Audio}
  1968.             {block:RebloggedFrom}<div class="via">via: <a href="{ReblogParentURL}">{ReblogParentName}</a></div>
  1969.             <div class="src">originally by: <a href="{ReblogRootURL}">{ReblogRootName}</a></div>{/block:RebloggedFrom}
  1970.             {block:ContentSource}<div class="contsrc">source: <a href="{SourceURL}">{SourceTitle}</a></div>{/block:ContentSource}
  1971.             {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}" class="tag">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1972.           </div>
  1973.         </div>
  1974.         {/block:IndexPage}
  1975.  
  1976.         {block:PermalinkPage}
  1977.         <div class="post_info">
  1978.           <div class="reblog_info">
  1979.             <div class="like_button">{LikeButton}<span class="th th-heart-1-o"></span></div>
  1980.             <div class="accent_circle"></div>
  1981.             <a href="{ReblogURL}" class="reblog_button"><span class="th th-reload"></span></a>
  1982.           </div>
  1983.         </div>
  1984.         {/block:PermalinkPage}
  1985.  
  1986.         {/block:Date}
  1987.  
  1988.         {block:PostNotes}
  1989.         <div id="post_notes">
  1990.           {block:NoteCount}<div>{NoteCountWithLabel}</div>{/block:NoteCount}
  1991.           {PostNotes}
  1992.         </div>
  1993.         {/block:PostNotes}
  1994.  
  1995.       </article>{/block:Posts}
  1996.  
  1997.       {block:Pagination}
  1998.       <div id="pagination" class="{select:pagination type}">
  1999.         {block:PreviousPage}<a href="{PreviousPage}" class="prev">{lang:Prev}</a>{/block:PreviousPage}
  2000.         {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}
  2001.         {block:NextPage}<a href="{NextPage}" class="next">{lang:Next}</a>{/block:NextPage}
  2002.       </div>
  2003.       <span id="load-more" class="{select:pagination type}">{lang:Load more posts}</span>
  2004.       {/block:Pagination}
  2005.  
  2006.     </section>
  2007.  
  2008.     <div id="reblog_pop">
  2009.       <div id="reblog_back"></div>
  2010.       <div id="reblog_wrap"></div>
  2011.     </div>
  2012.   </div>
  2013.  
  2014.   <div id="loader_container">
  2015.     <div id="loader">
  2016.       <div id="spinner">
  2017.         <span></span>
  2018.         <span></span>
  2019.         <span></span>
  2020.         <span></span>
  2021.         <span></span>
  2022.         <span></span>
  2023.         <span></span>
  2024.       </div>
  2025.     </div>
  2026.   </div>
  2027.  
  2028.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" charset="utf-8"></script>
  2029.   <script src="https://static.tumblr.com/0podkko/VDbpnmbxf/annasthms_pantone.js"></script>
  2030.   <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  2031.   <script src="//static.tumblr.com/yfztp0u/brUohnb4m/infinitescroll.js"></script>
  2032.   <script src="//dl.dropbox.com/s/r1lcsrj2ofap7n5/videoResize.min.js?dl=0"></script>
  2033.   <script src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  2034.   <script>
  2035.   {block:ifcirclecursor}
  2036.   // const iframes = document.querySelectorAll("iframe");
  2037.   for (let i = 0; i < document.querySelectorAll("iframe").length; i++) {
  2038.    document.querySelectorAll("iframe")[i].insertAdjacentElement("afterend", create('div', '', 'overlay'));
  2039.  }
  2040.  {/block:ifcirclecursor}
  2041.  
  2042.  const fontSize = parseFloat(getComputedStyle(document.body).getPropertyValue('font-size'));
  2043.  
  2044.  const mouse = create('div','mouse');
  2045.  const mouseOver = Array.from(document.querySelectorAll("a, div#menu_icon, div#search, a.post_title span, .post_info > div:not(.reblog_info), .photo_container img, .overlay, select, #load-more"));
  2046.   console.log(mouseOver);
  2047.   const menuLines = Array.from(document.querySelectorAll("div#menu_icon span"));
  2048.   const menu = document.getElementById("pop");
  2049.   const menuLinks = Array.from(document.querySelectorAll("div#links_list :not(#about_links) a"));
  2050.  
  2051.   const sc = Array.from(document.querySelectorAll("div#links :not(#about_links) a, a.post_title, a.link_container"));
  2052.  
  2053.   const reblogPop = document.getElementById("reblog_pop");
  2054.   const reblogBack = document.getElementById("reblog_back");
  2055.   const reblogWrap = document.getElementById("reblog_wrap");
  2056.  
  2057.   const menuIcon = document.getElementById("menu_icon");
  2058.   menuIcon.onclick = function() {
  2059.     menu.style.display = 'block';
  2060.     setTimeout(function(){
  2061.       addClass(menu, 'show');
  2062.       mouse.style.height = '';
  2063.       mouse.style.width = '';
  2064.       mouse.style.padding = '';
  2065.     },10);
  2066.     addClass(menuIcon, 'menu_open');
  2067.   };
  2068.  
  2069.   const menuBack = document.getElementById("back");
  2070.   menuBack.onclick = function() {
  2071.     removeClass(menu, 'show');
  2072.     const duration = parseFloat(window.getComputedStyle(menu).getPropertyValue('transition-duration')) * 1000;
  2073.     setTimeout(function(){
  2074.       menu.style.display = 'none';
  2075.     },duration);
  2076.     mouse.style.height = '';
  2077.     mouse.style.width = '';
  2078.     mouse.style.padding = '';
  2079.     removeClass(menuIcon, 'menu_open');
  2080.   }
  2081.  
  2082.   function pagination(pag) {
  2083.     switch (pag) {
  2084.       case 'infinite':
  2085.       $container = $('section#posts');
  2086.       $container.infinitescroll({
  2087.         navSelector: 'div#pagination',
  2088.         nextSelector: 'a.next',
  2089.         itemSelector: '.post',
  2090.         loading: {
  2091.           img: '',
  2092.           msgText: '',
  2093.         },
  2094.         debug: true,
  2095.         bufferPx: 0
  2096.       }, function(items) {
  2097.         var $items = $(items);
  2098.         $items.addClass('new');
  2099.         $('.new.video iframe, .new .post_body iframe').videoResize();
  2100.         $itemsIDs = $items.map(function(){
  2101.           return this.id;
  2102.         }).get();
  2103.         Tumblr.LikeButton.get_status_by_post_ids($itemsIDs);
  2104.         for (let i = 0; i < document.getElementsByClassName("new").length; i++) {
  2105.          const post = document.getElementsByClassName("new")[i];
  2106.          const notecount = post.getElementsByClassName("notecount")[0];
  2107.          if (notecount) {
  2108.            const n = parseInt(notecount.innerText);
  2109.            let notes = 0;
  2110.            if (n > 1000000) notes = Math.round(n / 100000) / 10 + 'm';
  2111.             else if (n > 1000) notes = Math.round(n / 100) / 10 + 'k';
  2112.             else notes = n;
  2113.             notecount.innerText = notes;
  2114.             const w = parseFloat(window.getComputedStyle(notecount).getPropertyValue('width'));
  2115.             console.log(w);
  2116.             notecount.style.width = w + 'px';
  2117.             notecount.style.height = w + 'px';
  2118.             notecount.style.lineHeight = w + 'px';
  2119.             {block:IndexPage}
  2120.             notecount.style.top = 'calc(-3.25em - ' + w + 'px)';
  2121.             notecount.style.marginLeft = 'calc(-1em - ' + w/2 + 'px)';
  2122.             {/block:IndexPage}
  2123.           }
  2124.         }
  2125.         {block:ifcirclecursor}
  2126.         // const iframes = document.querySelectorAll(".new iframe");
  2127.         for (let i = 0; i < document.querySelectorAll(".new iframe").length; i++) {
  2128.          document.querySelectorAll(".new iframe")[i].insertAdjacentElement("afterend", create('div', '', 'overlay'));
  2129.        }
  2130.        {/block:ifcirclecursor}
  2131.        const n = document.querySelectorAll(".new a, .new a.post_title span, .new .post_info > div:not(.reblog_info), .new .photo_container img, .new .overlay");
  2132.         for (let i = 0; i < n.length; i++) {
  2133.          if (!mouseOver.includes(n[i])) mouseOver.push(n[i]);
  2134.        }
  2135.        initPhotosets();
  2136.        $items.removeClass('new');
  2137.      });
  2138.      break;
  2139.      case 'loadmore':
  2140.      $container = $('section#posts');
  2141.      $container.infinitescroll({
  2142.        navSelector: 'div#pagination',
  2143.        nextSelector: 'a.next',
  2144.        itemSelector: '.post',
  2145.        loading: {
  2146.          img: '',
  2147.          msgText: '',
  2148.        },
  2149.        debug: true,
  2150.        errorCallback: function(){$('#load-more').hide();}
  2151.      }, function(items) {
  2152.        var $items = $(items);
  2153.        $items.addClass('new');
  2154.        $('.new.video iframe, .new .post_body iframe').videoResize();
  2155.        $itemsIDs = $items.map(function(){
  2156.          return this.id;
  2157.        }).get();
  2158.        Tumblr.LikeButton.get_status_by_post_ids($itemsIDs);
  2159.        for (let i = 0; i < document.getElementsByClassName("new").length; i++) {
  2160.          const post = document.getElementsByClassName("new")[i];
  2161.          const notecount = post.getElementsByClassName("notecount")[0];
  2162.          if (notecount) {
  2163.            const n = parseInt(notecount.innerText);
  2164.            let notes = 0;
  2165.            if (n > 1000000) notes = Math.round(n / 100000) / 10 + 'm';
  2166.             else if (n > 1000) notes = Math.round(n / 100) / 10 + 'k';
  2167.             else notes = n;
  2168.             notecount.innerText = notes;
  2169.             const w = parseFloat(window.getComputedStyle(notecount).getPropertyValue('width'));
  2170.             console.log(w);
  2171.             notecount.style.width = w + 'px';
  2172.             notecount.style.height = w + 'px';
  2173.             notecount.style.lineHeight = w + 'px';
  2174.             {block:IndexPage}
  2175.             notecount.style.top = 'calc(-3.25em - ' + w + 'px)';
  2176.             notecount.style.marginLeft = 'calc(-1em - ' + w/2 + 'px)';
  2177.             {/block:IndexPage}
  2178.           }
  2179.         }
  2180.         {block:ifcirclecursor}
  2181.         // const iframes = document.querySelectorAll(".new iframe");
  2182.         for (let i = 0; i < document.querySelectorAll(".new iframe").length; i++) {
  2183.          document.querySelectorAll(".new iframe")[i].insertAdjacentElement("afterend", create('div', '', 'overlay'));
  2184.        }
  2185.        {/block:ifcirclecursor}
  2186.        const n = document.querySelectorAll(".new a, .new a.post_title span, .new .post_info > div:not(.reblog_info), .new .photo_container img, .new .overlay");
  2187.         for (let i = 0; i < n.length; i++) {
  2188.          if (!mouseOver.includes(n[i])) mouseOver.push(n[i]);
  2189.        }
  2190.        initPhotosets();
  2191.        $items.removeClass('new');
  2192.        document.querySelector("section").appendChild(document.querySelector("#load-more"));
  2193.      });
  2194.      $(window).unbind('.infscr');
  2195.      $('#load-more').click(function(){
  2196.        $container.infinitescroll('retrieve');
  2197.        return false;
  2198.      });
  2199.      break;
  2200.      default:
  2201.    }
  2202.    if (!window.location.pathname.startsWith('/customize') && 0==$("a#cred").length||$("a#cred:empty").length>0) window.location.replace("https://annasthms.tumblr.com");
  2203.     if (window.location.pathname.startsWith('/customize')) {
  2204.       removeClass(document.body, "loading");
  2205.       {block:ifcirclecursor}
  2206.       document.body.appendChild(mouse);
  2207.       {/block:ifcirclecursor}
  2208.     }
  2209.   }
  2210.   {block:IndexPage}
  2211.   pagination('{select:pagination type}');
  2212.   {/block:IndexPage}
  2213.  
  2214.   initPhotosets();
  2215.  
  2216.   function tumblrNotesInserted() {
  2217.     const ol = document.querySelector("ol.notes");
  2218.     const ola = ol.getElementsByTagName("a");
  2219.     for (let i = 0; i < ola.length; i++) {
  2220.      if (!mouseOver.includes(ola[i])) mouseOver.push(ola[i]);
  2221.    }
  2222.  }
  2223.  
  2224.  function showInfo(e) {
  2225.    reblogPop.style.display = 'block';
  2226.    const p = checkParent(e, Array.from(document.getElementsByClassName("post")));
  2227.    console.log(e, p);
  2228.    if (p) {
  2229.      reblogWrap.appendChild(p.getElementsByClassName("reblog_info")[0]);
  2230.      addClass(p, 'info_open');
  2231.    }
  2232.    setTimeout(function(){
  2233.      addClass(reblogPop, 'show');
  2234.      mouse.style.height = '';
  2235.      mouse.style.width = '';
  2236.      mouse.style.padding = '';
  2237.    },10);
  2238.  }
  2239.  reblogBack.onclick = function() {
  2240.    removeClass(reblogPop, 'show');
  2241.    const duration = parseFloat(window.getComputedStyle(reblogPop).getPropertyValue('transition-duration')) * 1000;
  2242.    setTimeout(function(){
  2243.      reblogPop.style.display = 'none';
  2244.      const id = reblogWrap.getElementsByClassName("reblog_info")[0].getAttribute("post");
  2245.      console.log(id);
  2246.      document.getElementById(id).getElementsByClassName("post_info")[0].appendChild(reblogWrap.getElementsByClassName("reblog_info")[0]);
  2247.      removeClass(document.getElementById(id), 'info_open');
  2248.    },duration);
  2249.    mouse.style.height = '';
  2250.    mouse.style.width = '';
  2251.    mouse.style.padding = '';
  2252.  }
  2253.  
  2254.  window.onmousemove = function(e) {
  2255.    move(e, mouse, mouseOver, sc, []);
  2256.    if (!checkParent(e.target, Array.from(document.querySelectorAll(".audio_container, .video_container")))) {
  2257.      const overlays = document.querySelectorAll("article.post .overlay");
  2258.      for (let o = 0; o < overlays.length; o++) {
  2259.        overlays[o].setAttribute("clicked", false);
  2260.        overlays[o].style.pointerEvents = "auto";
  2261.      }
  2262.      mouse.style.opacity = "1";
  2263.    }
  2264.  };
  2265.  
  2266.  window.onmousedown = function(e) {
  2267.    down(e, mouse, mouseOver, sc, []);
  2268.    if (!(e.target == document.body) && e.target.className.includes("overlay") && e.target.getAttribute("clicked") != true) {
  2269.      e.target.style.pointerEvents = "none";
  2270.      e.target.setAttribute("clicked", true);
  2271.      mouse.style.opacity = "0";
  2272.    }
  2273.  }
  2274.  window.onmouseup = function(e) {
  2275.    up(e, mouse, mouseOver, sc, []);
  2276.  }
  2277.  
  2278.  window.onload = function() {
  2279.    for (let i = 0; i < document.getElementsByClassName("post").length; i++) {
  2280.      const post = document.getElementsByClassName("post")[i];
  2281.      const notecount = post.getElementsByClassName("notecount")[0];
  2282.      if (notecount) {
  2283.        const n = parseInt(notecount.innerText);
  2284.        let notes = 0;
  2285.        if (n > 1000000) notes = Math.round(n / 100000) / 10 + 'm';
  2286.         else if (n > 1000) notes = Math.round(n / 100) / 10 + 'k';
  2287.         else notes = n;
  2288.         notecount.innerText = notes;
  2289.         const w = parseFloat(window.getComputedStyle(notecount).getPropertyValue('width'));
  2290.         console.log(w);
  2291.         notecount.style.width = w + 'px';
  2292.         notecount.style.height = w + 'px';
  2293.         notecount.style.lineHeight = w + 'px';
  2294.         {block:IndexPage}
  2295.         notecount.style.top = 'calc(-3.25em - ' + w + 'px)';
  2296.         notecount.style.marginLeft = 'calc(-1em - ' + w/2 + 'px)';
  2297.         {/block:IndexPage}
  2298.       }
  2299.     }
  2300.     removeClass(document.body, "loading");
  2301.     {block:ifcirclecursor}
  2302.     document.body.appendChild(mouse);
  2303.     {/block:ifcirclecursor}
  2304.     const duration = parseFloat(window.getComputedStyle(document.getElementById("loader_container")).getPropertyValue('transition-duration')) * 1000 + 100;
  2305.     setTimeout(function(){
  2306.       document.body.removeChild(document.getElementById("loader_container"));
  2307.     },duration);
  2308.   }
  2309.  
  2310.   window.onscroll = function() {
  2311.     const h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  2312.     if (document.body.scrollTop > h || document.documentElement.scrollTop > h) {
  2313.       addClass(document.getElementsByTagName("aside")[0], "nav");
  2314.     }
  2315.     else {
  2316.       removeClass(document.getElementsByTagName("aside")[0], "nav");
  2317.     }
  2318.   }
  2319.  
  2320.   </script>
  2321. </body>
  2322. </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!