API tools faq
paste
annasthms

thm 04 - clocks

annasthms
Jan 16th, 2018 (edited)
3,680
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 33.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCYTPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. credits:
  7.  
  8. - icon font by saturnthms: http://saturnthms.com/font
  9. - sticky-kit by leafo: http://leafo.net/sticky-kit/
  10.  
  11. - clocks theme by annasthms
  12.  
  13. -->
  14.  
  15. <head>
  16.  
  17.   <title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{block:TagPage}#{Tag} | {/block:TagPage}{block:SearchPage}{SearchQuery} | {/block:SearchPage}{block:DayPage}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear} | {/block:DayPage}{Title}</title>
  18.   <link rel="shortcut icon" href="{Favicon}">
  19.   <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.   {block:Description}
  21.   <meta name="description" content="{MetaDescription}" />
  22.   {/block:Description}
  23.  
  24.   <link href="//fonts.googleapis.com/css?family={text:google font}" rel="stylesheet">
  25.   <link href="//fonts.googleapis.com/css?family={text:monospace google font}" rel="stylesheet">
  26.   <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  27.   <link href="//static.tumblr.com/0podkko/1C9otjxkc/jquery-ui.structure.css" rel="stylesheet">
  28.  
  29.   <meta name="image:background" content="" />
  30.  
  31.   <meta name="color:background" content="#ffffff" />
  32.   <meta name="color:color 1" content="#8ac1c9" />
  33.   <meta name="color:color 2" content="#183135" />
  34.   <meta name="color:font" content="#000000" />
  35.   <meta name="color:lines" content="#000000" />
  36.   <meta name="color:link hover lines" content="#183135" />
  37.   <meta name="color:clock" content="#183135" />
  38.   <meta name="color:list icons" content="#183135" />
  39.   <meta name="color:title" content="#306269" />
  40.   <meta name="color:title hover" content="#000000" />
  41.   <meta name="color:sidebar links" content="" />
  42.   <meta name="color:sidebar links hover" content="" />
  43.   <meta name="color:sidebar background" content="" />
  44.   <meta name="color:post background" content="" />
  45.   <meta name="color:post info background" content="" />
  46.   <meta name="color:post info" content="#306269" />
  47.   <meta name="color:post info hover" content="#183135" />
  48.   <meta name="color:like and reblog" content="#8ac1c9" />
  49.   <meta name="color:like and reblog hover" content="#c6e1e5" />
  50.   <meta name="color:post liked" content="#c6e1e5" />
  51.   <meta name="color:tags" content="" />
  52.   <meta name="color:tags hover" content="" />
  53.   <meta name="color:pagination" content="" />
  54.   <meta name="color:pagination hover" content="" />
  55.  
  56.   <meta name="font:font" content="Avalon"/>
  57.  
  58.   <meta name="select:link hover style" content="" title="none" />
  59.   <meta name="select:link hover style" content="line left styled" title="line through from left" />
  60.   <meta name="select:link hover style" content="line right styled" title="line through from right" />
  61.   <meta name="select:link hover style" content="line cent styled" title="line through from center" />
  62.   <meta name="select:link hover style" content="under left styled" title="underline from left" />
  63.   <meta name="select:link hover style" content="under right styled" title="underline from right" />
  64.   <meta name="select:link hover style" content="under cent styled" title="underline from center" />
  65.   <meta name="select:link hover style" content="box corner styled" title="box in from corners" />
  66.   <meta name="select:link hover style" content="box side styled" title="box in from sides" />
  67.  
  68.   <meta name="if:show clock" content="1" />
  69.   <meta name="if:bold title" content="1" />
  70.   <meta name="if:show captions on index pages" content="1" />
  71.   <meta name="if:show tags on index pages" content="1" />
  72.   <meta name="if:stick post info" content="1" />
  73.   <meta name="if:small spotify player" content="1" />
  74.   <meta name="if:small soundcloud player" content="1" />
  75.   <meta name="if:shorten note count" content="1" />
  76.   <meta name="if:styled tooltips" content="1" />
  77.   <meta name="if:dark tumblr controls" content="1" />
  78.   <meta name="if:hover tumblr controls" content="1" />
  79.  
  80.   <meta name="text:google font" content=""/>
  81.   <meta name="text:monospace google font" content="Roboto Mono"/>
  82.   <meta name="text:font size" content="" />
  83.   <meta name="text:post width" content="500px" />
  84.   <meta name="text:description" content="here's where your description goes!" />
  85.   <meta name="text:ask label" content="ask" />
  86.   <meta name="text:link one name" content="" />
  87.   <meta name="text:link one url" content="" />
  88.   <meta name="text:link two name" content="" />
  89.   <meta name="text:link two url" content="" />
  90.   <meta name="text:link three name" content="" />
  91.   <meta name="text:link three url" content="" />
  92.   <meta name="text:link four name" content="" />
  93.   <meta name="text:link four url" content="" />
  94.   <meta name="text:link five name" content="" />
  95.   <meta name="text:link five url" content="" />
  96.  
  97.   <style>
  98.   * {
  99.     position: relative;
  100.   }
  101.   body {
  102.     background: {color:background} url('{image:background}') no-repeat fixed center;
  103.     background-size: cover;
  104.     font-size: {text:font size};
  105.     font-family: {block:Ifgooglefont}'{text:google font}', {/block:Ifgooglefont}{font:font};
  106.     color: {color:font};
  107.   }
  108.   a {
  109.     color: {color:color 1};
  110.     text-decoration: none;
  111.   }
  112.   a:hover {
  113.     color: {color:color 2};
  114.   }
  115.   blockquote {
  116.     margin: 0;
  117.     padding: 0 0 0 2%;
  118.     border-left: 1px solid {color:lines};
  119.   }
  120.   hr {
  121.     height: 1px;
  122.     width: 100%;
  123.     border: none;
  124.     background: {color:lines};
  125.   }
  126.   img {
  127.     max-width: 100%;
  128.     height: auto;
  129.   }
  130.   iframe {
  131.     max-width: 100%;
  132.   }
  133.   p:first-child {
  134.     margin-top: 0;
  135.   }
  136.   p:last-child {
  137.     margin-bottom: 0;
  138.   }
  139.  
  140.   /* link hover styling */
  141.   body.styled .a a {
  142.     display: inline-block;
  143.     z-index: 2;
  144.   }
  145.   body.styled .a a:before, body.styled .a a:after {
  146.     content: "";
  147.     position: absolute;
  148.     -webkit-transition: 0.25s all ease-in-out;
  149.     transition: 0.25s all ease-in-out;
  150.   }
  151.   /* line through and underline styling */
  152.   body.line .a a:before {
  153.     height: 0.35em;
  154.     width: 0;
  155.     top: 50%;
  156.     -webkit-transform: translateY(-50%);
  157.             transform: translateY(-50%);
  158.     background: {color:link hover lines};
  159.     opacity: 0.35;
  160.     z-index: -1;
  161.   }
  162.   body.under .a a:before {
  163.     height: 0.1em;
  164.     width: 0;
  165.     bottom: -0.025em;
  166.     background: {color:link hover lines};
  167.   }
  168.   body.left .a a:before {
  169.     left: 0;
  170.   }
  171.   body.right .a a:before {
  172.     right: 0;
  173.   }
  174.   body.cent .a a:before {
  175.     left: 50%;
  176.   }
  177.   body.line .a a:hover:before, body.under .a a:hover:before {
  178.     width: 100%;
  179.   }
  180.   body.cent .a a:hover:before {
  181.     left: 0;
  182.   }
  183.   /* box in styling */
  184.   body.box .a a {
  185.     padding: 0 0.35em;
  186.   }
  187.   body.box .a a:before, body.box .a a:after {
  188.     opacity: 0;
  189.   }
  190.   body.box .a a:hover:before, body.box .a a:hover:after {
  191.     opacity: 1;
  192.   }
  193.   body.box.corner .a a:before, body.box.corner .a a:after {
  194.     height: 0px;
  195.     width: 0px;
  196.   }
  197.   body.box.corner .a a:before {
  198.     top: -0.025em;
  199.     left: -0.025em;
  200.     border-top: 0.1em solid {color:link hover lines};
  201.     border-left: 0.1em solid {color:link hover lines};
  202.   }
  203.   body.box.corner .a a:after {
  204.     bottom: -0.025em;
  205.     right: -0.025em;
  206.     border-bottom: 0.1em solid {color:link hover lines};
  207.     border-right: 0.1em solid {color:link hover lines};
  208.   }
  209.   body.box.corner .a a:hover:before, body.box.corner .a a:hover:after {
  210.     height: calc(100% - 0.1em);
  211.     width: calc(100% - 0.05em);
  212.   }
  213.   body.box.side .a a:before {
  214.     top: 50%;
  215.     left: -0.025em;
  216.     height: 0;
  217.     width: calc(100% - 0.2em);
  218.     border-left: 0.1em solid {color:link hover lines};
  219.     border-right: 0.1em solid {color:link hover lines};
  220.   }
  221.   body.box.side .a a:after {
  222.     top: -0.025em;
  223.     left: 50%;
  224.     width: 0;
  225.     height: calc(100% - 0.2em);
  226.     border-top: 0.1em solid {color:link hover lines};
  227.     border-bottom: 0.1em solid {color:link hover lines};
  228.   }
  229.   body.box.side .a a:hover:before {
  230.     height: calc(100% - 0.025em);
  231.     top: -0.025em;
  232.   }
  233.   body.box.side .a a:hover:after {
  234.     width: calc(100% - 0.05em);
  235.     left: 0;
  236.   }
  237.  
  238.   div#container {
  239.     left: calc(50% - ({text:post width} / 2) - 10em - 3px);
  240.     width: calc({text:post width} + 5em + 1.5em + 6px + 10em + 3.5em);
  241.     min-width: calc(250px + 5em + 1.5em + 6px + 10em + 3.5em);
  242.     max-width: calc(500px + 5em + 1.5em + 6px + 10em + 3.5em);
  243.   }
  244.  
  245.   /* tumblr controls hover icon */
  246.   div#tumblr-controls {
  247.     position: fixed;
  248.     top: 0.15em;
  249.     right: 1em;
  250.     line-height: 48px;
  251.     color: {color:color 2};
  252.   }
  253.  
  254.   /* blog info + post container positioning */
  255.   aside#blog, section#posts {
  256.     display: inline-block;
  257.     vertical-align: top;
  258.   }
  259.   aside#blog {
  260.     width: 10em;
  261.     position: fixed;
  262.     margin-top: 20px;
  263.     padding: 1em;
  264.     -webkit-box-sizing: border-box;
  265.             box-sizing: border-box;
  266.     background: {color:sidebar background};
  267.   }
  268.   section#posts {
  269.     position: absolute;
  270.     right: 0;
  271.     padding-bottom: 3em;
  272.   }
  273.  
  274.   /* clock */
  275.   div#clock {
  276.     height: 5.75em;
  277.     text-align: right;
  278.     margin-bottom: 1em;
  279.     color: {color:clock};
  280.   }
  281.   div#hour, div#min, div#sec {
  282.     font-family: {block:Ifmonospacegooglefont}'{text:monospace google font}', {/block:Ifmonospacegooglefont}monospace;
  283.   }
  284.   div#hour {
  285.     font-size: 3.25em;
  286.   }
  287.   div#min, div#te {
  288.     display: inline-block;
  289.     vertical-align: middle;
  290.     margin-top: -0.35em;
  291.   }
  292.   div#min {
  293.     font-size: 2.25em;
  294.   }
  295.   div#te {
  296.     margin-left: 0.5em;
  297.     text-align: right;
  298.   }
  299.   div#sec {
  300.     font-size: 0.9em;
  301.     margin-top: -0.5em;
  302.   }
  303.   div#ampm {
  304.     font-variant: small-caps;
  305.     line-height: 0.85em;
  306.   }
  307.  
  308.   /* blog title */
  309.   div#title {
  310.     font-size: 1.25em;
  311.     margin-bottom: 1.5em;
  312.     word-wrap: break-word;
  313.     text-align: right;
  314.     {block:Ifboldtitle}font-weight:bold;{/block:Ifboldtitle}
  315.   }
  316.   div#title a {
  317.     color: {color:title};
  318.   }
  319.   div#title a:hover {
  320.     color: {color:title hover};
  321.   }
  322.  
  323.   /* blog description */
  324.   div#description {
  325.     margin-bottom: 1em;
  326.     word-wrap: break-word;
  327.     line-height: 1.5em;
  328.     text-align: right;
  329.   }
  330.  
  331.   /* blog links */
  332.   div#links a {
  333.     display: block;
  334.     padding-right: 1em;
  335.     min-height: 1em;
  336.     -webkit-transition: 0.35s all ease-in-out;
  337.     transition: 0.35s all ease-in-out;
  338.     text-align: right;
  339.     color: {color:sidebar links};
  340.   }
  341.   div#links a:hover {
  342.     padding-right: 1.5em;
  343.     color: {color:sidebar links hover};
  344.   }
  345.   div#links a:before {
  346.     content: "\00AB";
  347.     position: absolute;
  348.     right: 0;
  349.     top: 45%;
  350.     -webkit-transform: translateY(-50%);
  351.             transform: translateY(-50%);
  352.     -webkit-transition: 0.35s right ease-in-out;
  353.     transition: 0.35s right ease-in-out;
  354.   }
  355.   div#links a:hover:before {
  356.     right: 0.25em;
  357.   }
  358.  
  359.   /* search bar */
  360.   div#search {
  361.     margin-top: 1em;
  362.   }
  363.   div#search input {
  364.     outline: none;
  365.     border: none;
  366.     border-bottom: 0.5px solid transparent;
  367.     background: transparent;
  368.     color: {color:color 1};
  369.     padding-bottom: 0.25em;
  370.     text-align: right;
  371.     width: 40%;
  372.     margin-left: 60%;
  373.     -webkit-transition: 0.25s all ease-in-out;
  374.     transition: 0.25s all ease-in-out;
  375.     font-size: calc({text:font size} * 0.85);
  376.     font-family: {block:Ifgooglefont}'{text:google font}', {/block:Ifgooglefont}{font:font};
  377.   }
  378.   div#search input:focus {
  379.     width: 75%;
  380.     margin-left: 25%;
  381.     border-bottom: 0.5px solid {color:color 2};
  382.     -webkit-transition: 0.25s all ease-in-out;
  383.     transition: 0.25s all ease-in-out;
  384.   }
  385.   div#search input::-webkit-input-placeholder {
  386.     color: {color:color 2};
  387.     text-transform: lowercase;
  388.     letter-spacing: 2px;
  389.   }
  390.   div#search input:-ms-input-placeholder {
  391.     color: {color:color 2};
  392.     text-transform: lowercase;
  393.     letter-spacing: 2px;
  394.   }
  395.   div#search input::-ms-input-placeholder {
  396.     color: {color:color 2};
  397.     text-transform: lowercase;
  398.     letter-spacing: 2px;
  399.   }
  400.   div#search input::placeholder {
  401.     color: {color:color 2};
  402.     text-transform: lowercase;
  403.     letter-spacing: 2px;
  404.   }
  405.  
  406.   /* post margins and font */
  407.   .post {
  408.     margin: 20px 20px 60px 20px;
  409.     width: calc({text:post width} + 5em + 24px + 6px);
  410.     min-width: calc(250px + 5em + 24px + 6px);
  411.     max-width: calc(500px + 5em + 24px + 6px);
  412.     min-height: 8.625em;
  413.   }
  414.   .content {
  415.     display: inline-block;
  416.     vertical-align: top;
  417.     width: {text:post width};
  418.     min-width: 250px;
  419.     max-width: 500px;
  420.     padding: 1em;
  421.     -webkit-box-sizing: border-box;
  422.             box-sizing: border-box;
  423.     background: {color:post background};
  424.   }
  425.  
  426.   /* ordered + unordered lists */
  427.   .content ul, .content ol {
  428.     list-style: none;
  429.     padding: 0 0 0 1.5em;
  430.   }
  431.   .content ol {
  432.     counter-reset: lists;
  433.   }
  434.   .content li:not(:last-of-type) {
  435.     margin-bottom: 0.25em;
  436.   }
  437.   .content ol li:before {
  438.     counter-increment: lists;
  439.     content: counter(lists) ".";
  440.     color: {color:list icons};
  441.     position: absolute;
  442.     left: -1.15em;
  443.     font-weight: bold;
  444.   }
  445.   .content ul li:before {
  446.     content: "\e0a0"; /* change this if you want a different icon for lists */
  447.     position: absolute;
  448.     font-family: 'saturnicons';
  449.     color: {color:list icons};
  450.     top: 0.9em;
  451.     left: -1.75em;
  452.     -webkit-transform: translateY(-50%);
  453.             transform: translateY(-50%);
  454.     font-size: 0.65em;
  455.   }
  456.  
  457.   /* post titles / link posts */
  458.   a.title, a.path {
  459.     margin: 1em 0;
  460.     padding-right: 3em;
  461.     display: block;
  462.     -webkit-transition: 0.25s all ease-in-out;
  463.     transition: 0.25s all ease-in-out;
  464.     font-style: italic;
  465.     letter-spacing: 0.15em;
  466.     font-size: 1em;
  467.   }
  468.   a.title:after, a.path:after {
  469.     font-family: 'saturnicons';
  470.     font-style: normal;
  471.     position: absolute;
  472.     right: 0;
  473.     -webkit-transform: translateY(-25%);
  474.             transform: translateY(-25%);
  475.     background: {color:color 1};
  476.     color: #fff;
  477.     font-size: 0.85em;
  478.     width: 2.25em;
  479.     height: 2.25em;
  480.     -webkit-box-sizing: border-box;
  481.             box-sizing: border-box;
  482.     padding-left: 0.2em;
  483.     text-align: center;
  484.     line-height: 2.25em;
  485.     border-radius: 0.65em;
  486.     -webkit-transition: 0.25s all ease-in-out;
  487.     transition: 0.25s all ease-in-out;
  488.   }
  489.   .text a.title:after {
  490.     content: '\e105';
  491.   }
  492.   .chat a.title:after {
  493.     content: '\e082';
  494.   }
  495.   a.path:after {
  496.     content: '\e159';
  497.   }
  498.   {block:IndexPage}
  499.   .title:hover, .path:hover {
  500.     font-weight: bold;
  501.   }
  502.   .title:hover span.icon, .path:hover span.icon {
  503.     padding-left: 1.1em;
  504.   }
  505.   a.title:hover:after, a.path:hover:after {
  506.     background: {color:color 2};
  507.     font-weight: normal;
  508.     border-radius: 0.3em;
  509.   }
  510.   {/block:IndexPage}
  511.   {block:PermalinkPage}
  512.   .title {
  513.     color: {color:color 1};
  514.   }
  515.   a.path:hover:after {
  516.     background: {color:color 2};
  517.     font-weight: normal;
  518.     border-radius: 0.3em;
  519.   }
  520.   {/block:PermalinkPage}
  521.  
  522.   /* quotes */
  523.   .words {
  524.     font-size: 1.25em;
  525.     color: {color:color 1};
  526.     font-style: italic;
  527.     letter-spacing: 2px;
  528.   }
  529.   .source {
  530.     margin-top: 0.75em;
  531.     text-align: right;
  532.   }
  533.  
  534.   /* chats */
  535.   table {
  536.     width: 100%;
  537.   }
  538.   td.label {
  539.     width: 25%;
  540.     word-break: break-word;
  541.     margin-right: 1em;
  542.     text-transform: uppercase;
  543.     color: {color:color 2};
  544.   }
  545.  
  546.   /* audio */
  547.   iframe.tumblr_audio_player {
  548.     height: 85px;
  549.   }
  550.   {block:Ifsmallspotifyplayer}
  551.   iframe.spotify_audio_player {
  552.     height: 80px;
  553.   }
  554.   {/block:Ifsmallspotifyplayer}
  555.  
  556.   /* asks */
  557.   .qna {
  558.     margin-bottom: 1.25em;
  559.   }
  560.   .qna:last-child {
  561.     margin-bottom: 0;
  562.   }
  563.   .qna .blog {
  564.     margin-bottom: 0.5em;
  565.   }
  566.   .qna .blog img, .qna .blog span {
  567.     display: inline-block;
  568.     vertical-align: middle;
  569.   }
  570.   .qna .blog img {
  571.     height: 2em;
  572.     border-radius: 25%;
  573.     margin-right: 1em;
  574.   }
  575.   .qna .blog span {
  576.     font-size: 1.15em;
  577.     text-transform: lowercase;
  578.   }
  579.  
  580.   /* caption margin */
  581.   .caption {
  582.     margin-top: 1em;
  583.   }
  584.  
  585.   /* reblog captions */
  586.   .reblogged {
  587.     margin: 0 0 1.5em 0;
  588.   }
  589.   .reblogged:last-child {
  590.     margin-bottom: 0;
  591.   }
  592.   .blog {
  593.     margin-bottom: 0.5em;
  594.     text-transform: lowercase;
  595.   }
  596.   .blog img, .blog a span {
  597.     display: inline-block;
  598.     vertical-align: middle;
  599.   }
  600.   .blog img {
  601.     height: 1.75em;
  602.     border-radius: 25%;
  603.     margin-right: 1em;
  604.   }
  605.   .blog span a {
  606.     z-index: 2;
  607.   }
  608.   .blog span:not(.deactive) a:before {
  609.     position: absolute;
  610.     content: "";
  611.     width: calc(100% + 6px);
  612.     height: 1px;
  613.     background: {color:color 1};
  614.     left: -3px;
  615.     bottom: -1.5px;
  616.     opacity: 0.25;
  617.     z-index: -1;
  618.     -webkit-transition: 0.25s all ease-in-out;
  619.     transition: 0.25s all ease-in-out;
  620.   }
  621.   .blog span:not(.deactive) a:hover:before {
  622.     height: 50%;
  623.     background: {color:color 1};
  624.   }
  625.   span.deactive {
  626.     color: {color:color 2};
  627.   }
  628.  
  629.   /* tags */
  630.   .tags {
  631.     margin-top: 1em;
  632.     color: {color:tags};
  633.   }
  634.   .tags span {
  635.     margin-right: 0.75em;
  636.     font-size: 0.65em;
  637.     color: {color:color 2};
  638.     color: {color:tags};
  639.   }
  640.   a.tag {
  641.     margin-right: 0.5em;
  642.     color: {color:tags};
  643.   }
  644.   a.tag:hover {
  645.     color: {color:tags hover};
  646.   }
  647.  
  648.   {block:IndexPage}
  649.   {block:IfNotshowcaptionsonindexpages}
  650.   .caption {display:none;}
  651.   {/block:IfNotshowcaptionsonindexpages}
  652.   {block:IfNotshowtagsonindexpages}
  653.   .tags {display:none;}
  654.   {/block:IfNotshowtagsonindexpages}
  655.   {block:IndexPage}
  656.  
  657.   /* content source */
  658.   .cont-source {
  659.     text-transform: lowercase;
  660.     color: {color:color 2};
  661.     margin-top: 1em;
  662.   }
  663.  
  664.   /* post info */
  665.   .info {
  666.     text-align: right;
  667.     display: inline-block;
  668.     width: 6em;
  669.     margin-left: 0.5em;
  670.     vertical-align: top;
  671.     -webkit-box-sizing: border-box;
  672.             box-sizing: border-box;
  673.     padding: 0.5em;
  674.     background: {color:post info background};
  675.   }
  676.   .info a {
  677.     color: {color:post info};
  678.   }
  679.   .info a:hover {
  680.     color: {color:post info hover};
  681.   }
  682.  
  683.   /* post date/time */
  684.   .date span {
  685.     display: inline-block;
  686.     vertical-align: middle;
  687.     font-weight: bold;
  688.     font-family: {block:Ifmonospacegooglefont}'{text:monospace google font}', {/block:Ifmonospacegooglefont}monospace;
  689.   }
  690.   .month {
  691.     font-size: 2em;
  692.   }
  693.   .day-year {
  694.     width: 1em;
  695.     margin-left: 0.25em;
  696.     text-align: right;
  697.   }
  698.  
  699.   /* like/reblog buttons */
  700.   .like-reblog {
  701.     margin-top: 0.5em;
  702.     color: {color:like and reblog};
  703.   }
  704.   .like-reblog span {
  705.     display: inline-block;
  706.     font-size: 1.1em;
  707.   }
  708.   .like-button {
  709.     display: block;
  710.     width: 1.1em;
  711.     height: 1.1em;
  712.     cursor: pointer;
  713.   }
  714.   .like_button {
  715.     position: absolute;
  716.     top: 0;
  717.     left: 0;
  718.     right: 0;
  719.     bottom: 0;
  720.     width: 100%;
  721.     height: 100%;
  722.     opacity: 0;
  723.     z-index: 10;
  724.   }
  725.   .like_button iframe {
  726.     width: 100% !important;
  727.     height: 100% !important;
  728.   }
  729.   .new-like-button {
  730.     width: 100%;
  731.     height: 100%;
  732.     z-index: 1;
  733.   }
  734.   .like_button:hover + .new-like-button, .reblog-button a:hover {
  735.     color: {color:like and reblog hover};
  736.   }
  737.   .like_button.liked + .new-like-button {
  738.     color: {color:post liked};
  739.   }
  740.   .reblog-button {
  741.     margin-left: 0.5em;
  742.   }
  743.   .reblog-button a {
  744.     color: {color:like and reblog};
  745.   }
  746.  
  747.   .via-src {
  748.     text-transform: lowercase;
  749.   }
  750.   .via {
  751.     margin-right: 0.75em;
  752.   }
  753.  
  754.   /* notecount */
  755.   a.notecount {
  756.     margin-top: 0.25em;
  757.     display: inline-block;
  758.   }
  759.  
  760.   /* post notes */
  761.   div.notes {
  762.     width: {text:post width};
  763.     margin: 20px;
  764.     color: {color:color 2};
  765.   }
  766.   ol.notes {
  767.     list-style: none;
  768.     margin: 0;
  769.     padding: 0;
  770.   }
  771.   li.note {
  772.     margin: 1em 0;
  773.   }
  774.   li.like:after {
  775.     position: absolute;
  776.     content: "\e12b";
  777.     font-family: 'saturnicons';
  778.     color: {color:post liked};
  779.     right: 0;
  780.     top: 50%;
  781.     -webkit-transform: translateY(-50%);
  782.             transform: translateY(-50%);
  783.     font-size: 0.8em;
  784.   }
  785.   li.reblog:after {
  786.     position: absolute;
  787.     content: "\e1ef";
  788.     font-family: 'saturnicons';
  789.     color: {color:like and reblog};
  790.     right: 0;
  791.     top: 50%;
  792.     -webkit-transform: translateY(-50%);
  793.             transform: translateY(-50%);
  794.     font-size: 0.8em;
  795.   }
  796.   a.avatar_frame, span.action {
  797.     display: inline-block;
  798.     vertical-align: middle;
  799.   }
  800.   a.avatar_frame {
  801.     height: 1.5em;
  802.     margin-right: 1em;
  803.   }
  804.   img.avatar {
  805.     border-radius: 25%;
  806.     height: 1.5em;
  807.     width: 1.5em;
  808.   }
  809.   span.action {
  810.     max-width: calc(100% - 2.5em);
  811.   }
  812.   li.note blockquote {
  813.     margin: 0.75em 0.5em 0.5em 2.5em;
  814.     max-width: 75%;
  815.   }
  816.  
  817.   /* pagination */
  818.   .pagination {
  819.     position: absolute;
  820.     bottom: 2em;
  821.     width: 100%;
  822.     text-align: center;
  823.     text-transform: lowercase;
  824.     color: {color:pagination};
  825.   }
  826.   .pagination a {
  827.     color: {color:pagination};
  828.   }
  829.   .pagination a:hover {
  830.     color: {color:pagination hover};
  831.   }
  832.   .pagination span:not(.sf), .pagination .page {
  833.     margin: 0.5em;
  834.   }
  835.   span.current.page {
  836.     color: {color:color 2};
  837.     font-size: 1.1em;
  838.     font-weight: bold;
  839.   }
  840.   .pagination span.sf {
  841.     margin: 0 1em;
  842.   }
  843.   .pagination span.sf:before {
  844.     position: absolute;
  845.     font-size: 0.65em;
  846.     top: 50%;
  847.     left: -0.5em;
  848.     -webkit-transform: translateY(-50%);
  849.             transform: translateY(-50%);
  850.   }
  851.  
  852.   {block:Ifstyledtooltips}
  853.   /* tooltip */
  854.   .ui-tooltip {
  855.     padding: 3px 5px 2px;
  856.     margin: 24px 14px 7px 12px;
  857.     position: absolute;
  858.     font-size: 0.8em;
  859.     z-index: 9999;
  860.     max-width: 300px;
  861.     border-radius: 3px;
  862.     background: {color:background};
  863.     background: rgba(255,255,255,0.5);
  864.   }
  865.   {/block:Ifstyledtooltips}
  866.  
  867.   /* tumblr lightbox */
  868.   .tmblr-lightbox {
  869.     background: rgba(255,255,255,0.85) !important;
  870.   }
  871.   .tmblr-lightbox .vignette {
  872.     opacity: 0 !important;
  873.   }
  874.   .tmblr-lightbox .lightbox-image {
  875.     -webkit-box-shadow: none !important;
  876.             box-shadow: none !important;
  877.     border-radius: 0 !important;
  878.   }
  879.  
  880.   /* tumblr controls */
  881.   iframe.tmblr-iframe {
  882.     top: 0.15em;
  883.     -webkit-transform: scale(0.8);
  884.             transform: scale(0.8);
  885.     {block:Ifdarktumblrcontrols}-webkit-filter: invert(100%);filter: invert(100%);{/block:Ifdarktumblrcontrols}
  886.     -webkit-transform-origin: 100% 0;
  887.             transform-origin: 100% 0;
  888.   }
  889.   {block:Ifhovertumblrcontrols}
  890.   iframe.tmblr-iframe {
  891.     padding-right: 2em;
  892.     opacity: 0;
  893.     -webkit-transition: 0.5s all ease-in-out;
  894.     transition: 0.5s all ease-in-out;
  895.   }
  896.   iframe.tmblr-iframe:hover {
  897.     opacity: 1;
  898.     padding-right: 3em;
  899.   }
  900.   {/block:Ifhovertumblrcontrols}
  901.   {block:IfNothovertumblrcontrols}
  902.   iframe.tmblr-iframe {
  903.     padding-right: 3em;
  904.   }
  905.   {/block:IfNothovertumblrcontrols}
  906.  
  907.   /* credit DO NOT TOUCH */
  908.   a#scroll-up {
  909.     position: fixed;
  910.     bottom: 31px;
  911.     right: 5px;
  912.     background: #fff;
  913.     padding: 6px 2.5px 2px;
  914.     font-size: 0.8em;
  915.   }
  916.   a#cred {
  917.     position: fixed;
  918.     bottom: 5px;
  919.     right: 5px;
  920.     background: #fff;
  921.     padding: 3px 6px;
  922.     font-size: 0.8em;
  923.   }
  924.  
  925.   {CustomCSS}
  926. </style>
  927.  
  928. {block:Ifshowclock}
  929. <script>
  930. function startTime() {
  931.   var today = new Date();
  932.   var h = today.getHours();
  933.   var m = today.getMinutes();
  934.   var s = today.getSeconds();
  935.   var ampm = h >= 12 ? 'pm' : 'am';
  936.   h = checkHour(h);
  937.   h = checkTime(h);
  938.   m = checkTime(m);
  939.   s = checkTime(s);
  940.   document.getElementById('clock').innerHTML = '<div id="hour">' + h + '</div><div id="min">' + m + '</div><div id="te"><div id="sec">' + s + '</div><div id="ampm">' + ampm + '</div></div>';
  941.   var t = setTimeout(startTime, 500);
  942. }
  943. function checkHour(h) {
  944.   if (h === 00) {
  945.     h = 12
  946.   }
  947.   else if (h > 12) {
  948.     h = h % 12
  949.   };
  950.   return h;
  951. }
  952. function checkTime(i) {
  953.   if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  954.  return i;
  955. }
  956. </script>
  957. {/block:Ifshowclock}
  958.  
  959. </head>
  960. <body class="{select:link hover style}" {block:Ifshowclock}onload="startTime()"{/block:Ifshowclock}>
  961.  
  962.   <div id="tumblr-controls"><span class="sf sf-clock-3-o"></span></div>
  963.  
  964.   <div id="container">
  965.  
  966.     <aside id="blog">
  967.       {block:Ifshowclock}<div id="clock"></div>{/block:Ifshowclock}
  968.       <div id="title"><a href="{BlogURL}">{Title}</a></div>
  969.       <div id="description" class="a">{text:description}</div>
  970.       <div id="links">
  971.         {block:AskEnabled}<a href="/ask" style="text-transform:lowercase">{text:ask label}</a>{/block:AskEnabled}
  972.         <a href="/archive" style="text-transform:lowercase">{lang:Archive}</a>
  973.         {block:Iflinkoneurl}<a href="{text:link one url}">{text:link one name}</a>{/block:Iflinkoneurl}
  974.         {block:Iflinktwourl}<a href="{text:link two url}">{text:link two name}</a>{/block:Iflinktwourl}
  975.         {block:Iflinkthreeurl}<a href="{text:link three url}">{text:link three name}</a>{/block:Iflinkthreeurl}
  976.         {block:Iflinkfoururl}<a href="{text:link four url}">{text:link four name}</a>{/block:Iflinkfoururl}
  977.         {block:Iflinkfiveurl}<a href="{text:link five url}">{text:link five name}</a>{/block:Iflinkfiveurl}
  978.       </div>
  979.       <div id="search"><form action="/search" method="get"><input type="text" name="q" value="{SearchQuery}" placeholder="{lang:Search}"/></form></div>
  980.     </aside>
  981.  
  982.     <section id="posts">
  983.  
  984.       {block:Posts}
  985.  
  986.       <article class="post {PostType}" id="{PostID}">
  987.  
  988.         <div class="content">
  989.  
  990.           {block:Title}<a href="{Permalink}" class="title" {block:PermalinkPage}onclick="return false;"{/block:PermalinkPage}>{Title}</a>{/block:Title}
  991.  
  992.           {block:Text}{block:NotReblog}<div class="body a">{Body}</div>{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog"><img src="{PortraitURL-64}" /><span class="{block:IsDeactivated}deactive{block:IsDeactivated}">{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div><span class="a">{Body}</span></div>{/block:Reblogs}{/block:RebloggedFrom}{/block:Text}
  993.  
  994.           {block:Photo}<a href="#" class="pic" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{/block:Photo}
  995.  
  996.           {block:Photoset}{Photoset}{/block:Photoset}
  997.  
  998.           {block:Quote}<div class="words">{Quote}</div>{block:Source}<div class="source a">{Source}</div>{/block:Source}{/block:Quote}
  999.  
  1000.           {block:Link}<a href="{URL}" class="path{block:Description} has-desc{/block:Description}" {Target}>{Name}</a>
  1001.           {block:Description}{block:NotReblog}<div class="desc a">{Description}</div>{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog"><img src="{PortraitURL-64}" /><span class="{block:IsDeactivated}deactive{block:IsDeactivated}">{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div><span class="a">{Body}</span></div>{/block:Reblogs}{/block:RebloggedFrom}{/block:Description}{/block:Link}
  1002.  
  1003.           {block:Chat}<table>{block:Lines}<tr><td class="label">{block:Label}<span>{Label}</span>{/block:Label}</td><td>{Line}</td></tr>{/block:Lines}</table>{/block:Chat}
  1004.  
  1005.           {block:Audio}{block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}{/block:Audio}
  1006.  
  1007.           {block:Video}{VideoEmbed-500}{/block:Video}
  1008.  
  1009.           {block:Answer}<div class="qna"><div class="blog"><img src="{AskerPortraitURL-48}"/><span>{Asker}{block:English} asked:{/block:English}</span></div><span class="speech a">{Question}</span></div>
  1010.           {block:Answerer}<div class="qna"><div class="blog"><img src="{AnswererPortraitURL-48}"/><span>{Answerer}{block:English} answered:{/block:English}</span></div><span class="speech a">{Answer}</span></div>{block:Reblogs}<div class="qna"><div class="blog"><img src="{PortraitURL-64}" /><span class="{block:IsDeactivated}deactive{block:IsDeactivated}">{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}{block:English} added:{/block:English}</span></div><span class="speech a">{Body}</span></div>{/block:Reblogs}{/block:Answerer}
  1011.           {block:NotReblog}<div class="qna"><div class="blog"><img src="{PortraitURL-48}" /><span><a href="{Permalink}">{Name}</a>{block:English} answered:{/block:English}</span></div><span class="speech a">{Answer}</span></div>{/block:NotReblog}{/block:Answer}
  1012.  
  1013.           {block:Caption}<div class="caption">{block:NotReblog}{Caption}{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}<div class="reblogged"><div class="blog"><img src="{PortraitURL-64}" /><span class="{block:IsDeactivated}deactive{block:IsDeactivated}">{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}</span></div><span class="a">{Body}</span></div>{/block:Reblogs}{/block:RebloggedFrom}</div>{/block:Caption}
  1014.  
  1015.           {block:Date}{block:HasTags}<div class="tags"><span class="sf sf-bookmark-o"></span>{block:Tags}<a href="{TagURL}" class="tag">{Tag}</a>{/block:Tags}</div>{/block:HasTags}{block:ContentSource}{block:PermalinkPage}<div class="cont-source">{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></div>{/block:PermalinkPage}{/block:ContentSource}{/block:Date}
  1016.  
  1017.         </div>
  1018.  
  1019.         {block:Date}<div class="info">
  1020.           <a href="{Permalink}">
  1021.             <div class="date"><span class="month">{ShortMonth}</span><span class="day-year"><span class="day">{DayOfMonthWithZero}</span><span class="year">{ShortYear}</span></span></div>
  1022.             <div class="time">{12HourWithZero}:{Minutes} {AmPm}</div>
  1023.           </a>
  1024.           <div class="like-reblog">
  1025.             <span class="like-button">{LikeButton}<div class="new-like-button"><span class="sf sf-heart-2-o"></span></div></span>
  1026.             <span class="reblog-button"><a href="{reblogURL}"><span class="sf sf-reblog-o"></span></a></span>
  1027.           </div>
  1028.           {block:RebloggedFrom}<div class="via-src"><a href="{ReblogParentURL}" title="{ReblogParentName}" class="via">{lang:Via}</a><a href="{ReblogRootURL}" title="{ReblogRootName}" class="src">{block:English}src{/block:English}{block:NotEnglish}{lang:Source}{/block:NotEnglish}</a></div>{/block:RebloggedFrom}
  1029.           {block:NoteCount}<a href="{Permalink}" class="notecount"><span>{NoteCount}</span>n</a>{/block:NoteCount}
  1030.         </div>{/block:Date}
  1031.  
  1032.       </article>
  1033.  
  1034.       {block:PostNotes}<div class="notes a">{PostNotes-64}</div>{/block:PostNotes}
  1035.  
  1036.       {/block:Posts}
  1037.  
  1038.       {block:Pagination}
  1039.  
  1040.       <div class="pagination">
  1041.         {block:PreviousPage}<a href="{PreviousPage}"><span class="sf sf-chevron-left"></span></a>{/block:PreviousPage}
  1042.         {block:JumpPagination length="5"}{block:CurrentPage}<span class="current page">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a href="{URL}" class="jump page">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1043.         {block:NextPage}<a href="{NextPage}" class="next"><span class="sf sf-chevron-right"></span></a>{/block:NextPage}
  1044.       </div>
  1045.  
  1046.       {/block:Pagination}
  1047.  
  1048.       {block:DayPage}{block:DayPagination}<div class="pagination">{block:NextDayPage}<a href="{NextDayPage}"><span class="sf sf-chevron-left"></span><span>{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</span></a>{/block:NextDayPage}{block:PreviousDayPage}<a href="{PreviousDayPage}"><span>{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</span><span class="sf sf-chevron-right"></span></a>{/block:PreviousDayPage}</div>{/block:DayPagination}{/block:DayPage}
  1049.  
  1050.     </section>
  1051.  
  1052.   </div>
  1053.  
  1054.   <a href="#" id="scroll-up"><span class="sf sf-arrow-up"></span></a>
  1055.   <a href="https://annasthms.tumblr.com/" id="cred" title="theme by annasthms" {Target}>a</a>
  1056.  
  1057.   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1058.   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  1059.   <script src="//cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>
  1060.   <script src="//dl.dropbox.com/s/r1lcsrj2ofap7n5/videoResize.min.js?dl=0"></script>
  1061.  
  1062.   <script>
  1063.   $(document).ready(function(){
  1064.     {block:Ifstyledtooltips}
  1065.     $('[title]').tooltip({
  1066.       track: true,
  1067.       position: {
  1068.         my: 'left+12 top+24'
  1069.       }
  1070.     });
  1071.     {/block:Ifstyledtooltips}
  1072.  
  1073.     var postWidth = '{text:post width}'.match(/\d+/)[0];
  1074.     if ( postWidth > 500 ) {
  1075.       $('head').append('<style>div#container{left: calc(50% - (500px / 2) - 10em - 3px) !important}</style>');
  1076.     } else if ( postWidth < 250 ) {
  1077.      $('head').append('<style>div#container{left: calc(50% - (250px / 2) - 10em - 3px) !important}</style>');
  1078.     }
  1079.  
  1080.     $('.video .content iframe, .body iframe, .caption iframe, .reblogged iframe').videoResize({container: '.content'});
  1081.  
  1082.     $('td.label').each(function(){
  1083.       var label = $(this).text().split(":")[0];
  1084.       $(this).text(label);
  1085.     });
  1086.  
  1087.     {block:Ifshortennotecount}
  1088.     $('a.notecount span').each(function(){
  1089.       var nc = $(this).text();
  1090.       if (nc > 999999) {
  1091.         nc = Math.floor(nc / 100000) / 10;
  1092.         nc = nc + 'mil ';
  1093.       }
  1094.       else if (nc > 999) {
  1095.         nc = Math.floor(nc / 100) / 10;
  1096.         nc = nc + 'k ';
  1097.       }
  1098.       $(this).text(nc);
  1099.     });
  1100.     {/block:Ifshortennotecount}
  1101.  
  1102.     {block:Ifstickpostinfo}
  1103.     $('.info').stick_in_parent({
  1104.       parent: 'article.post',
  1105.       offset_top: 16,
  1106.     });
  1107.     {/block:Ifstickpostinfo}
  1108.  
  1109.     {block:Ifsmallsoundcloudplayer}
  1110.     // minimal soundcloud player © shythemes.tumblr
  1111.     var color = '{color:color 1}'; // color of play button (hex)
  1112.     $('.soundcloud_audio_player').each(function(){
  1113.       $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=false&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 116, width: '100%' });
  1114.     });
  1115.     {/block:Ifsmallsoundcloudplayer}
  1116.  
  1117.     $('a#scroll-up').click(function(){
  1118.       $('html, body').animate({ scrollTop: 0 }, 1500);
  1119.       return false;
  1120.     });
  1121.   });
  1122.   </script>
  1123.  
  1124. </body>
  1125. </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!