API tools faq
paste
Mephistia

Serpens Cauda Theme

Mephistia
Feb 10th, 2021 (edited)
3,656
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 54.52 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.                 SERPENS CAUDA THEME BY MEPHISTIA
  4.                 mephistia-themes // mephistia-arts
  5.                 2021 ⓒ Some Rights Reserved
  6.                
  7.                 -- TERMS OF USE:
  8.                     - Don't remove/edit the credits
  9.                    - Don't use as base code
  10.                     - Don't steal parts of the code
  11.                    - Edit only for personal use
  12.                    - Don't claim as yours (you can state you made modifications)
  13.                     - Don't redistribute (original or edited)
  14.                    - Don't hesitate to send an ask if you have any questions!
  15.                    
  16.  
  17.                -- CREDITS:
  18.                     - Unnest Tumblr Captions script by @neothm
  19.                     - Highlight the Current Page in Navbar tutorials by @shudesigns
  20.                     - Resizing videos tutorial by @shythemes
  21.                     - JavaScript code prettifier (github.com/googlearchive/code-prettify)
  22.                     - SVG Icons by Remix Icon (remixicon.com)
  23.                     - Masonry & Infinite Scroll by David DeSandro (desandro.com/)
  24. -->
  25.  
  26.  
  27. <!DOCTYPE html>
  28. <!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
  29. <!--[if IE 9]><html class="lt-ie10"> <![endif]-->
  30. <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
  31.     <head>
  32.         {MobileAppHeaders}
  33.         <meta charset="utf-8">
  34.         <title>{Title}{block:TagPage} ({lang:Posts tagged Tag}){/block:TagPage}{block:SearchPage} ({lang:Search results for SearchQuery 2}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
  35.         <meta name="description" content="{MetaDescription}">
  36.        
  37.         {block:Hidden}
  38.        
  39.         <meta name="color:Text" content="#404040"/>        
  40.         <meta name="color:Background" content="#f2f2f2"/>
  41.         <meta name="color:Post BG" content="#fff"/>
  42.         <meta name="color:Accent" content="#30537E"/>
  43.  
  44.         <meta name="if:Show Archive Link" content="1">
  45.         <meta name="if:Show Avatar" content="1">        
  46.         <meta name="if:Show Photos Only" content="1">        
  47.         <meta name="if:Horizontal Menu" content="1">
  48.         <meta name="if:Infinite Scroll" content="1">
  49.  
  50.  
  51.         <meta name="select:Grid Max Columns" content="1" title="1">
  52.         <meta name="select:Grid Max Columns" content="2" title="2">
  53.         <meta name="select:Grid Max Columns" content="3" title="3">
  54.         <meta name="select:Grid Max Columns" content="4" title="4">
  55.        
  56.         <meta name="select:Font Size" content=".65rem" title="Tiny">
  57.         <meta name="select:Font Size" content=".8rem" title="Small">
  58.         <meta name="select:Font Size" content="1rem" title="Normal">
  59.         <meta name="select:Font Size" content="1.2rem" title="Big">
  60.         <meta name="select:Font Size" content="1.4rem" title="Huge">
  61.        
  62.        
  63.         <meta name="select:Header Alignment" content="center" title="center">
  64.         <meta name="select:Header Alignment" content="left" title="left">
  65.         <meta name="select:Header Alignment" content="right" title="right">
  66.  
  67.  
  68.  
  69.         <meta name="text:Google Font 1" content="Cabin">
  70.         <meta name="text:Google Font 2" content="Vidaloka">
  71.        
  72.         <meta name="text:Post Gutter" content="15">  
  73.         <meta name="text:Rounded Corners Radius" content="5">
  74.  
  75.  
  76.  
  77.         {/block:Hidden}
  78.  
  79.        
  80.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  81.         <link rel="shortcut icon" href="{Favicon}">
  82.         <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  83.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  84.        
  85.          <!--Google Fonts-->
  86.         <link rel="preconnect" href="https://fonts.gstatic.com">
  87.         <link href="https://fonts.googleapis.com/css2?family={text:Google Font 1}:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family={text:Google Font 2}&display=swap" rel="stylesheet">
  88.        
  89.         <!-- prettify code -->
  90.         <link rel="stylesheet" type="text/css" href="https://static.tumblr.com/xiit3w8/cXjqmkzo3/prettify.css">
  91.          <link rel="stylesheet" type="text/css" href="https://static.tumblr.com/xiit3w8/mFIqmkzo8/desert.css">
  92.        
  93.  
  94.  
  95.         {PostTypographyStyles}
  96.  
  97.  
  98.         <style>
  99.        
  100.             /*General Styling*/
  101.            
  102.             *{
  103.                 box-sizing: border-box;
  104.             }
  105.            
  106.             :focus-visible{
  107.                 outline: 3px solid {color:Accent};
  108.                 opacity: 1!important;
  109.             }
  110.  
  111.            
  112.             body {
  113.                 background: {color:Background};
  114.                 color: {color:Text};
  115.                 font-family: {text:Google Font 1};
  116.                 font-size: {select:Font Size};
  117.                 line-height: 1.5rem;
  118.                 margin: 0;
  119.                 overflow-y:scroll;                
  120.             }
  121.            
  122.             h1, h2, h4, h5, h6{
  123.                 font-family: {text:Google Font 2};
  124.                 line-height: 1.8rem;
  125.             }
  126.  
  127.             h1 {
  128.                 font-size: 4rem;
  129.                 font-weight: normal;
  130.             }
  131.            
  132.             h3{
  133.                 font-family: {text:Google Font 1};
  134.             }
  135.                
  136.                      
  137.             a {
  138.                 color: {color:Accent};
  139.                 text-decoration: none;
  140.                 transition: opacity .3s ease-in-out;
  141.             }
  142.            
  143.            
  144.             a:hover{
  145.                 opacity: .6;
  146.             }
  147.            
  148.             /*Containers*/
  149.            
  150.                        
  151.             .blog-header{
  152.                 max-width: 45rem;
  153.                 text-align: {select:Header Alignment};
  154.                 padding: 9rem 7rem;
  155.             }
  156.            
  157.             .blog-header.center{
  158.                 margin: 0 auto;
  159.             }
  160.            
  161.             .page-name{
  162.                 color: {color:Accent};
  163.                 text-transform: capitalize;
  164.                 line-height: 4.5rem;
  165.             }
  166.            
  167.             #blog-desc{
  168.                 text-align: left;
  169.             }
  170.            
  171.             .blog-header.right #blog-desc{
  172.                 text-align:right;
  173.             }
  174.            
  175.             .blog-header.right{
  176.                 margin-left: auto;
  177.             }
  178.  
  179.             main{
  180.                 position: relative;
  181.                 margin: 0 7rem;
  182.                 flex-wrap: wrap;
  183.             }
  184.  
  185.             aside{
  186.                 width: 25%;
  187.                 position: -webkit-sticky;
  188.                 position: sticky;
  189.                 top: 2rem;
  190.                 height: 100%;
  191.             }
  192.                
  193.            
  194.             nav ul.blog-menu{
  195.                 list-style-type: none;
  196.                 padding: 0;
  197.             }
  198.            
  199.             .active-link li{
  200.                 border-bottom: 3px solid {color:Accent};
  201.                 display: inline-block;
  202.                 padding-bottom: .5rem;
  203.             }
  204.            
  205.             nav a{              
  206.                 color: {color:Text};
  207.                 transition: opacity .3s ease;
  208.             }
  209.            
  210.             .blog-menu a:not(.active-link) li::after, .blog-menu .border::after{
  211.                 content: '';
  212.                 display: block;
  213.                 border-bottom: 3px solid {color:Accent};
  214.                 width: 0;
  215.                 position: absolute;
  216.                 left: 0;
  217.                 transition: width .3s ease;
  218.                 padding-bottom: .5rem;
  219.             }
  220.            
  221.             .blog-menu a:not(.active-link):hover li::after{
  222.                 width: 100%;
  223.             }
  224.            
  225.             .blog-menu input:focus-within + .border::after{
  226.                 width: 100%;
  227.             }
  228.                        
  229.            
  230.             nav li{
  231.                 margin-bottom: 4rem;
  232.                 position: relative;
  233.                 display: inline-block;
  234.                 margin-right: 50%;
  235.             }
  236.            
  237.  
  238.             #posts{
  239.                 width: 100%;
  240.                 text-align:center;
  241.                 margin: 0 auto;
  242.             }
  243.            
  244.             .msnry-wrapper{
  245.                 margin-top: -26rem;
  246.                 margin-left: 25%;
  247.                 width: 100%;
  248.             }
  249.            
  250.            
  251.            
  252.             article, .grid-sizer{
  253.                 width: calc(calc(100% / {select:Grid Max Columns}) - {text:Post Gutter}px);
  254.             }
  255.  
  256.             article {
  257.                 text-align: center;                
  258.                 border-radius: {text:Rounded Corners Radius}px;
  259.                 overflow: hidden;
  260.             }
  261.            
  262.             article img{
  263.                 display: block;
  264.                 max-width: 100%;
  265.                 margin: 0 auto;
  266.             }
  267.            
  268.  
  269.            
  270.            
  271.             /*Index page*/
  272.            
  273.             #posts article:not(.photopost):not(.photosetpost):not(.panoramapost):not(.videopost) .post-wrap{
  274.                 padding: 1rem;
  275.                 padding-top: 4rem;
  276.                 transform: scale(.95);
  277.                 transition: transform .3s ease;
  278.             }
  279.            
  280.            
  281.             #posts .post-wrap{
  282.                 min-height: 17rem;
  283.                 position: relative;
  284.                 display: flex;
  285.                 flex-wrap: wrap;
  286.                 align-items: center;
  287.             }
  288.            
  289.             #posts .post-wrap > div:first-child {
  290.                 width: 100%;
  291.                 align-self: normal;
  292.             }
  293.              
  294.              {block:IfShowPhotosOnly}  
  295.              #posts .textpost .post-info, #posts .quotepost .post-info, #posts .linkpost .post-info, #posts .chatpost .post-info, #posts .audiopost .post-info, #posts .videopost .post-info, #posts .answerpost .post-info,
  296.              
  297.               #posts .textpost .tags, #posts .quotepost .tags, #posts .linkpost .tags, #posts .chatpost .tags, #posts .audiopost .tags, #posts .videopost .tags, #posts .answerpost .tags,
  298.              
  299.                #posts .textpost, #posts .quotepost, #posts .linkpost, #posts .chatpost, #posts .audiopost, #posts .videopost, #posts .answerpost{
  300.                  display: none;
  301.              }
  302.              {/block:IfShowPhotosOnly}
  303.              
  304.              
  305.              #posts .caption a {
  306.                 color: {color:Text};
  307.             }
  308.  
  309.             #posts .post-title{
  310.                 color: {color:Text};
  311.                 font-weight: bold;
  312.                 font-family: {text:Google Font 1};
  313.             }
  314.            
  315.             #posts .post-text, #posts .link-info h3, #posts .link-info .text, .page-name, #posts .chat {
  316.                 -webkit-line-clamp: 2;
  317.                 -webkit-box-orient: vertical;
  318.                 overflow: hidden;
  319.                 text-overflow: ellipsis;
  320.             }
  321.            
  322.             #posts .post-text figure{
  323.                 display: none;
  324.             }
  325.            
  326.             #posts .textpost .post-text figure:first-of-type{
  327.                 display: block;
  328.             }
  329.            
  330.  
  331.  
  332.             #posts article.photopost .tags, #posts article.photopost .post-info,
  333.             #posts article.photosetpost .tags, #posts article.photosetpost .post-info,
  334.             #posts article.videopost .tags, #posts article.videopost .post-info
  335.             {
  336.                 position: absolute;
  337.                 opacity: 0;
  338.                 transition: opacity .3s ease;
  339.                 width: 90%;
  340.             }
  341.            
  342.             #posts .post-info{
  343.                 position: absolute;
  344.                 top: 0;
  345.                 z-index: 1;
  346.                 font-size: .8rem;
  347.                 color: rgba({RGBcolor:Text},.6);
  348.                 left: 0;
  349.                 right: 0;
  350.             }
  351.            
  352.              #posts .post-icon{
  353.                 display: flex;
  354.                 align-items: center;
  355.                 justify-content: center;
  356.                 width: 100%;
  357.              }
  358.  
  359.              
  360.              .post-icon svg{
  361.                  fill: {color:Text};
  362.              }
  363.            
  364.             .tags{
  365.                 font-style: italic;
  366.             }
  367.            
  368.                        
  369.             #posts .tags{
  370.                 bottom: 0;
  371.                 white-space: nowrap;
  372.                 width: 100%;
  373.                 overflow: hidden;
  374.                 text-overflow: ellipsis;
  375.             }
  376.            
  377.            
  378.             .post-info, .tags{
  379.                 text-align: left;                
  380.                 padding: 1rem;
  381.             }
  382.            
  383.             #posts .post-icon svg {
  384.                 width: 1rem;
  385.                 margin: 0 auto;
  386.                 display: block;
  387.             }
  388.            
  389.             #posts .post-text, #posts .link-info h3, #posts .link-info .text, .page-name, #posts .chat{
  390.                 display: -webkit-box;
  391.             }
  392.            
  393.             .post-text > * {
  394.                 margin: .3rem;
  395.             }
  396.            
  397.             .post-text > *:not(:first-child):not(:empty) {
  398.                 display: none;
  399.             }
  400.  
  401.             #posts .post-wrap .caption:not(:first-of-type){
  402.                 display: none;
  403.             }
  404.            
  405.             .media-wrapper{
  406.                 display: block;
  407.                 position: relative;
  408.                 transition: opacity .3s, transform .3s;
  409.             }
  410.            
  411.             #posts .hover-info{
  412.                 z-index: 9;
  413.             }
  414.            
  415.              #posts .hover-info, #posts .caption{
  416.                 position: absolute;
  417.                 top: 0;
  418.                 left: 0;
  419.                 right: 0;
  420.                 bottom: 0;
  421.                 display: flex;
  422.                 width: 100%;
  423.                 height: 100%;
  424.                 justify-content: center;
  425.                 align-content: center;
  426.                 flex-wrap: wrap;
  427.                 opacity: 0;
  428.                 transition: opacity .3s ease;
  429.                 padding: 1rem;
  430.             }
  431.            
  432.             #posts .caption > * {
  433.                 width: 100%;
  434.             }
  435.                        
  436.             #posts article{
  437.                 background-color: rgba({RGBcolor:Post BG}, .5);
  438.                 opacity: 1;
  439.                 transition: opacity .3s ease;
  440.                 margin-bottom: {text:Post Gutter}px!important;
  441.             }
  442.            
  443.             #posts article:hover:not(.photopost):not(.photosetpost):not(.panoramapost):not(.videopost) .post-wrap{
  444.                 transform: scale(1);
  445.             }
  446.  
  447.             #posts article:hover .caption, #posts article:hover .tags, #posts article:hover .post-info, #posts article:focus-within .caption, #posts article:focus-within .tags, #posts article:focus-within .post-info{
  448.                 opacity: 1;
  449.             }
  450.            
  451.             #posts article img{
  452.                 object-fit: cover;
  453.                 height: 100%;
  454.             }
  455.            
  456.             #posts article:hover .media-wrapper {
  457.                 transform: scale(1.1);
  458.             }
  459.            
  460.             #posts article:hover .media-wrapper{
  461.                 opacity: .15;
  462.             }
  463.                        
  464.             #posts article a:not(.hover-info){
  465.                 pointer-events: none;
  466.             }
  467.            
  468.             .find{
  469.                 display: table;                
  470.                 position: relative;
  471.  
  472.             }
  473.            
  474.             .find input{
  475.                 border: none;
  476.                 padding-bottom: .5rem;
  477.                 background: transparent;
  478.                 font-size: {select:Font size};
  479.                 font-family: {text:Google Font 1};
  480.                 width: 7rem;
  481.             }
  482.            
  483.             .find input:focus-visible{
  484.                 outline: none;
  485.             }
  486.            
  487.             .find input::placeholder{
  488.                 color: {color:Text};
  489.                 opacity: 1;
  490.             }
  491.            
  492.             .find input:focus-within::placeholder{
  493.                 opacity: .6;
  494.             }
  495.            
  496.  
  497.            
  498.             /*Permapages*/
  499.            
  500.                        
  501.             .permapage .post-icon{
  502.                 display:none;
  503.             }
  504.            
  505.             .permapage .post-info{
  506.                 font-size: calc({select:Font Size} - .1rem);
  507.             }
  508.            
  509.             .permapage img{
  510.                 width: auto;
  511.                 margin: 0;
  512.             }
  513.            
  514.             article.permapage{
  515.                 width: 100%;
  516.                 text-align: left;
  517.                 padding-bottom: 5rem;
  518.             }
  519.            
  520.             .permapage .tags, .permapage .post-info{
  521.                 padding-left: 0;
  522.             }
  523.            
  524.             .hide, .page-name:empty{
  525.                 display:none;
  526.             }
  527.            
  528.             .page-name:not(:empty) ~ .post-type-title{
  529.                 display:none;
  530.             }
  531.            
  532.  
  533.             .permapage .link-wrapper{
  534.                 border: 1px solid #777;
  535.                 padding:0 1rem;
  536.             }
  537.            
  538.             /*Post Types*/
  539.            
  540.             .circle img{
  541.                 border-radius: 50%;
  542.             }
  543.            
  544.             .square img{
  545.                 border-radius: {text:Rounded Corners Radius}px;
  546.             }
  547.            
  548.             .user-info {
  549.                 margin-top: 1rem;
  550.             }
  551.            
  552.             .notes, main{display:flex;}
  553.            
  554.             figure.tmblr-embed.tmblr-full iframe {
  555.                 max-width: 100%;
  556.             }
  557.            
  558.             .quote-wrapper .source > p {
  559.                 display: none;
  560.             }
  561.                        
  562.             .npf_row_parent{margin-top: 1rem;}
  563.            
  564.             .npf_row {
  565.                  margin: 0 !important;
  566.             }
  567.            
  568.             .npf_row div:not(:last-child){
  569.                 margin-right: .5rem;
  570.             }
  571.            
  572.             ul.chat {
  573.                 list-style-type: none;
  574.                 padding-left: 0;
  575.             }
  576.            
  577.             #posts .chat li {
  578.                 display: inline;
  579.             }
  580.            
  581.             #posts .chat{
  582.                 -webkit-line-clamp: 6;
  583.             }
  584.            
  585.             .chat .label {
  586.                 width: 100%;
  587.                 display: block;
  588.                 font-weight: bold;
  589.             }
  590.            
  591.             .chat li:not(:last-child) {
  592.                 margin-bottom: 1rem;
  593.             }
  594.            
  595.             .link-wrapper a{
  596.                 color: {color:Text};
  597.             }
  598.            
  599.             li.caption, li.inner-text{
  600.                 list-style-type: none;
  601.             }
  602.            
  603.             .answerpost .inner-text p:first-child::before {
  604.                 content: "– ";
  605.             }
  606.            
  607.             .answerpost .inner-text {
  608.                 margin: auto;
  609.             }
  610.            
  611.             #posts .audio-wrapper .caption{
  612.                 display: none;
  613.             }
  614.            
  615.             .play-count{
  616.                 font-size: calc({select:Font Size} - .2rem);
  617.             }
  618.            
  619.             .audio-iframe{
  620.                 position: relative;
  621.                 overflow: hidden;
  622.                 width: 100%;
  623.                 padding-top: 26.40625%
  624.             }
  625.            
  626.             .tumblr_audio_player{
  627.                 position: absolute;
  628.                 top: 0;
  629.                 left: 0;
  630.                 bottom: 0;
  631.                 right: 0;
  632.                 width: 100%;
  633.                 height: 100%;
  634.             }
  635.            
  636.            
  637.             .videopost .media-wrapper{
  638.                 align-self: center;
  639.             }
  640.            
  641.             blockquote.tumblr_blog{
  642.                 margin: 0;
  643.             }
  644.            
  645.             .content-source svg{
  646.                 width: 1rem;
  647.                 margin-left: .3rem;
  648.                 fill: {color:Background};
  649.             }
  650.            
  651.             .content-source, .more_notes_link{
  652.                 color: {color:Background};
  653.                 display: inline-flex;
  654.                 background: {color:Accent};
  655.                 padding: .3rem .6rem;              
  656.                 border-radius: {text:Rounded Corners Radius}px;
  657.             }
  658.            
  659.                        
  660.             /*Notes, Tags, Pagination etc*/
  661.             .pagination span{
  662.                 padding: .5rem;
  663.             }
  664.            
  665.             .page a{color:{color:Accent};}
  666.            
  667.             .notes{
  668.                 align-content: center;
  669.                 padding:.2rem 0;
  670.                 flex-wrap: wrap;
  671.             }
  672.            
  673.             .note{
  674.                 display: inline-flex;
  675.                 margin-bottom: 2rem;
  676.             }
  677.            
  678.             .note:not(:last-child){
  679.                 margin-right: 2rem;
  680.             }
  681.            
  682.             .note span, .note blockquote {
  683.                 display: none;
  684.             }
  685.            
  686.             .note.like .avatar_frame::after, .note.reblog .avatar_frame::after{
  687.                 position: absolute;
  688.                 top: 50%;
  689.                 left: 50%;
  690.                 transform: translate(-50%, -120%);
  691.                 transition: transform .3s;
  692.                 color: white;
  693.                 height: 75%;
  694.                 padding: 100%;
  695.             }
  696.            
  697.             .note.like .avatar_frame::after{
  698.                 content: '❤';
  699.                 background: #ff7966;
  700.             }
  701.            
  702.             .note.reblog .avatar_frame::after{
  703.                 content: '⟲';
  704.                 font-weight: bolder;
  705.                 font-size: 1.2rem;
  706.                 background: #6ac480;
  707.             }
  708.            
  709.             .note .avatar_frame:hover::after{
  710.                 transform: translate(-50%, -50%);
  711.                 opacity: 1;
  712.             }
  713.            
  714.             .avatar_frame {
  715.                 max-width: 35px;
  716.                 border-radius: {text:Rounded Corners Radius}px;
  717.                 position: relative;
  718.                 overflow: hidden;
  719.             }
  720.            
  721.             .avatar_frame:hover{
  722.                 opacity: 1;
  723.             }
  724.            
  725.                        
  726.             .tags a{
  727.                 margin-right: .5rem;
  728.                 color: {color:Accent};
  729.             }
  730.            
  731.             footer{
  732.                 position: fixed;
  733.                 right: 2rem;
  734.                 bottom: .5rem;
  735.                 font-size: .9rem;
  736.                 font-weight: bold;
  737.             }
  738.            
  739.             pre.prettyprint{
  740.                 border: none;
  741.                 padding: .5rem;
  742.             }
  743.            
  744.             .pagination{
  745.                 margin: 2rem auto;
  746.                 width: 100%;
  747.             }
  748.            
  749.             .load-wrapper{
  750.                 width: 100%;
  751.                 margin: 3rem 0;
  752.                 text-align: left;
  753.             }
  754.            
  755.             .load-more-btn{
  756.                 padding:.5rem 0;
  757.                 font-size: {select:Font Size};
  758.                 font-family: {text:Google Font 1};
  759.                 background: none;
  760.                 border: none;
  761.                 opacity: 1;
  762.                 color:{color:Text};
  763.                 transition: opacity .3s ease;
  764.                 border-bottom: 3px solid {color:Accent};
  765.             }
  766.            
  767.             .load-more-btn:hover{
  768.                 opacity: .6;
  769.                 cursor: pointer;
  770.             }
  771.            
  772.             .no-results{
  773.                 text-align: left;
  774.             }
  775.            
  776.             footer svg{
  777.                 width: 1rem;
  778.                 fill: rgba({RGBcolor:Text}, .6);
  779.             }
  780.            
  781.             .tooltip-link-top {
  782.                 position: relative;
  783.             }
  784.            
  785.             a.tooltip-link-top:hover{
  786.                 opacity: 1;
  787.             }
  788.            
  789.            
  790.             a.tooltip-link-top:hover [role="tooltip"], a.tooltip-link-top:focus [role="tooltip"] {
  791.                 opacity: 1;
  792.                 pointer-events: auto;
  793.             }
  794.            
  795.            
  796.             .tooltip-link-top [role="tooltip"] {
  797.                 font-size: calc({select:Font Size} - .15rem);
  798.                 margin-top: .8rem;
  799.                 opacity: 0;
  800.                 padding: .5rem 1rem;
  801.                 transition: opacity 0.3s ease;
  802.                 pointer-events: none;
  803.                 position: absolute;
  804.                 background: {color:Text};
  805.                 color: {color:Background};
  806.                 font-weight: bold;            
  807.                 bottom: 0;
  808.                 left: -10.5rem;
  809.                 border-radius: {text:Rounded Corners Radius}px;
  810.             }
  811.            
  812.             .tooltip-link-top [role="tooltip"]::after {
  813.                 border-width: 9px 0 9px 9px;
  814.                 border-color: transparent transparent transparent {color:Text};
  815.                 top: 10px;
  816.                 right: -4px;    
  817.                 content: "";
  818.                 width: 0;
  819.                 height: 0;
  820.                 border-style: solid;
  821.                 position: absolute;
  822.                 transform: translateX(50%);
  823.             }
  824.            
  825.             .search_query:before { content:'“'; }
  826.             .search_query:after { content:'”'; }
  827.            
  828.            
  829.             #to-top{
  830.                 display: inline-block;
  831.                 position: fixed;
  832.                 bottom: 3rem;
  833.                 right: 1.8rem;
  834.                 transition: opacity .5s ease, visibility .5s ease;
  835.                 opacity: 0;
  836.                 visibility: hidden;
  837.                 z-index: 99;
  838.             }
  839.            
  840.             #to-top svg{
  841.                 width: 1.6rem;
  842.                 fill: rgba({RGBcolor:Text}, .6);
  843.             }
  844.            
  845.             #to-top:hover{
  846.                 cursor: pointer;
  847.             }
  848.  
  849.             #to-top.show {
  850.               opacity: 1;
  851.               visibility: visible;
  852.             }
  853.            
  854.             #to-top-tooltip {
  855.                 left: -7.4rem;
  856.             }
  857.            
  858.             /* Horizontal Menu */
  859.             {block:IfHorizontalMenu}
  860.             .msnry-wrapper{
  861.                 margin: 0;
  862.             }
  863.            
  864.             .blog-header{
  865.                 padding: 5rem;
  866.             }
  867.            
  868.             aside{
  869.                 position: static;
  870.                 width: 100%;
  871.             }
  872.            
  873.             aside ul{
  874.                 display: flex;
  875.                 flex-wrap: wrap;
  876.                 justify-content: space-evenly;
  877.                 gap: 1rem;
  878.             }
  879.            
  880.             nav li{
  881.                 margin-bottom: 1rem;
  882.                 margin-right: 0;
  883.             }
  884.            
  885.             main{
  886.                 margin: 0 15%;
  887.             }
  888.            
  889.             .load-wrapper{
  890.                 text-align: center;
  891.             }
  892.                
  893.             {/block:IfHorizontalMenu}  
  894.  
  895.  
  896.              @media screen and (max-width: 900px){
  897.                 article, .grid-sizer{
  898.                     width: calc(50% - {text:Post Gutter}px);
  899.                 }
  900.  
  901.                 main{
  902.                     margin: 0 1.5rem;
  903.                 }
  904.                
  905.                 footer{
  906.                     right: 1.3rem;
  907.                 }
  908.                
  909.                 #to-top{
  910.                     right: 1rem;
  911.                 }
  912.                
  913.                
  914.                 {block:IfNotHorizontalMenu}
  915.                 .msnry-wrapper{
  916.                     margin: 0;
  917.                 }
  918.                
  919.                 .blog-header{
  920.                     padding: 2rem 5rem;
  921.                 }
  922.                
  923.                 aside{
  924.                     position: static;
  925.                     width: 100%;
  926.                 }
  927.                
  928.                 aside ul{
  929.                     display: flex;
  930.                     flex-wrap: wrap;
  931.                     justify-content: space-around;
  932.                     gap: 1rem;
  933.                 }
  934.                
  935.                 nav li{
  936.                     margin-bottom: 1rem;
  937.                     margin-right: 0;
  938.                 }
  939.                
  940.                 {block:IfNotHorizontalMenu}
  941.              }
  942.              
  943.             @media screen and (max-width: 630px){
  944.                 article, .grid-sizer{
  945.                     width: 100%;
  946.                 }
  947.             }
  948.            
  949.  
  950.  
  951.             /* Custom CSS */
  952.             {CustomCSS}
  953.         </style>
  954.     </head>
  955.     <body>  
  956.    
  957.     <header>
  958.         <div class="blog-header  {select:Header Alignment}">
  959.         {block:HomePage}
  960.         {block:ifShowAvatar}
  961.         <div class="{AvatarShape}">
  962.             <img src="{PortraitURL-96}" alt="{Title} avatar">
  963.         </div>
  964.         {/block:ifShowAvatar}
  965.        
  966.         {block:ShowTitle}
  967.             <a class="page-name" href="{BlogURL}">
  968.                 <h1>{Title}</h1>
  969.             </a>
  970.         {/block:ShowTitle}
  971.  
  972.         {block:ShowDescription}
  973.             {block:Description}
  974.             <div id="blog-desc">{Description}</div>
  975.             {/block:Description}
  976.         {/block:ShowDescription}
  977.  
  978.         {/block:HomePage}
  979.                        
  980.         {block:TagPage}
  981.             <h1 class="page-name">{Tag}</h1>
  982.         {/block:TagPage}
  983.            
  984.         {block:SearchPage}
  985.              <h1 class="page-name">{lang:Search results for SearchQuery 2}</h1>
  986.         {/block:SearchPage}
  987.            
  988.         {block:PermalinkPage}
  989.         {block:PostTitle}
  990.             <h1 class="page-name">{PostTitle}</h1>
  991.         {/block:PostTitle}
  992.                
  993.         {block:Posts}
  994.             <h1 class="page-name post-type-title">{PostType}</h1>
  995.         {block:Posts}
  996.         {/block:PermalinkPage}
  997.  
  998.         </div>
  999.     </header>
  1000.  
  1001.    
  1002.     <main>        
  1003.    
  1004.     <!-- sidebar -->
  1005.         <aside>
  1006.                 <nav>
  1007.                     <ul class="blog-menu">
  1008.                         <a href="/" {block:IndexPage}class="active-link" {/block:IndexPage}><li>{lang:Home}</li></a>
  1009.                         {block:HasPages}
  1010.                         {block:Pages}
  1011.                         <a href="{URL}"><li>{Label}</li></a>
  1012.                         {/block:Pages}
  1013.                         {/block:HasPages}
  1014.                         {block:AskEnabled}
  1015.                         <a href="/ask"><li>{AskLabel}</li></a>
  1016.                         {/block:AskEnabled}
  1017.                         {block:SubmissionsEnabled}
  1018.                         <a href="/submit"><li>{SubmitLabel}</li></a>
  1019.                         {/block:SubmissionsEnabled}
  1020.                         {block:IfShowArchiveLink}
  1021.                         <a href="/archive"><li>{lang:Archive}</li></a>
  1022.                         {/block:IfShowArchiveLink}
  1023.                         <form class="find" action="/search" method="get">
  1024.                         <input type="text" name="q" value="{SearchQuery}" placeholder="{lang:Search}..." autocomplete="off"/><div class="border"></div>
  1025.                         </form>
  1026.                     </ul>
  1027.                 </nav>
  1028.             </div>
  1029.         </aside>
  1030.  
  1031.         <div class="msnry-wrapper">
  1032.         <section {block:IndexPage}id="posts"{/block:IndexPage}>
  1033.             <div class="grid-sizer"></div>
  1034.  
  1035.         <!-- begin posts -->
  1036.         {block:Posts}
  1037.             <article class="{posttype}post {block:PermalinkPage}permapage{/block:PermalinkPage}" id="{PostID}" >
  1038.             <div class="post-wrap">
  1039.  
  1040.             {block:Photo}
  1041.             <div class="media-wrapper">
  1042.                 <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  1043.             </div>
  1044.             {/block:Photo}
  1045.            
  1046.             {block:Photoset}
  1047.                 {block:IndexPage}
  1048.                     <div class="media-wrapper">
  1049.                     {block:Photos}
  1050.                         <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  1051.                         <!--
  1052.                     {/block:Photos}
  1053.                         -->
  1054.                     </div>
  1055.                 {/block:IndexPage}
  1056.                 {block:PermalinkPage}
  1057.                     <div class="media-wrapper">
  1058.                     {block:Photos}
  1059.                         <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  1060.                     {/block:Photos}
  1061.                     </div>
  1062.                 {/block:PermalinkPage}
  1063.             {/block:Photoset}
  1064.            
  1065.             {block:Panorama}
  1066.             <div class="media-wrapper">
  1067.                 <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  1068.             </div>
  1069.             {/block:Panorama}
  1070.            
  1071.             {block:IfNotShowPhotosOnly}
  1072.            
  1073.                        
  1074.             {block:Video}  
  1075.             <div class="media-wrapper">
  1076.            
  1077.             {block:IndexPage}
  1078.                 {block:VideoThumbnail}
  1079.                 <img src="{VideoThumbnailURL}" alt="video" />
  1080.                 {/block:VideoThumbnail}
  1081.             {/block:IndexPage}
  1082.            
  1083.             {block:PermalinkPage}    
  1084.                 <div class="video">{Video-700}</div>
  1085.             {/block:PermalinkPage}
  1086.  
  1087.             </div>
  1088.             {/block:Video}
  1089.            
  1090.             {block:Text}
  1091.                 <div class="text-wrapper">
  1092.                     <div class="post-icon">  
  1093.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 8v12.993A1 1 0 0 1 20.007 22H3.993A.993.993 0 0 1 3 21.008V2.992C3 2.455 3.449 2 4.002 2h10.995L21 8zm-2 1h-5V4H5v16h14V9zM8 7h3v2H8V7zm0 4h8v2H8v-2zm0 4h8v2H8v-2z"/></svg>
  1094.                     </div>
  1095.                     {block:Notreblog}
  1096.                         <li class="inner-text">
  1097.                             {block:Title}
  1098.                                 <a class="hide" href="{Permalink}"><h3 class="post-title">{Title}</h3></a>
  1099.                             {/block:Title}
  1100.                             <div class="post-text">{Body}</div>
  1101.                         </li>
  1102.                      {/block:Notreblog}
  1103.                      {block:RebloggedFrom}
  1104.                         {block:Reblogs}
  1105.                             <li class="inner-text">
  1106.                                 <div class="user-info">
  1107.                                     {block:IsActive}
  1108.                                     <a {block:HasPermalink}href="{Permalink}"{/block:HasPermalink}target="_blank">
  1109.                                         {Username}
  1110.                                     </a>
  1111.                                     {/block:IsActive}
  1112.                                     {block:IsDeactivated}
  1113.                                     <div class="username deactivated first-showing">
  1114.                                         {Username}
  1115.                                     </div>
  1116.                                     {/block:IsDeactivated}
  1117.                                 </div>
  1118.                                 {block:Title}
  1119.                                     <a href="{Permalink}"><h3 class="post-title">{Title}</h3></a>
  1120.                                 {/block:Title}
  1121.                                 <div class="post-text">{Body}</div>
  1122.                             </li>
  1123.                         {/block:Reblogs}
  1124.                     {/block:RebloggedFrom}
  1125.                 </div>
  1126.             {/block:Text}
  1127.  
  1128.             {block:Link}
  1129.            
  1130.             <div class="link-wrapper">
  1131.            
  1132.             {block:IndexPage}
  1133.             <div class="post-icon">  
  1134.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z"/></svg>
  1135.             </div>
  1136.            
  1137.             <div class="link-info">
  1138.                 <h3>{Name}</h3>
  1139.                 {block:Excerpt}<p class="text">{Excerpt}</p>{/block:Excerpt}
  1140.                 {block:Host}<p class="src">{Host}</p>{/block:Host}
  1141.             </div>
  1142.              {block:Description}<div class="link-desc">{Description}</div>{/block:Description}          
  1143.             {/block:IndexPage}
  1144.          
  1145.                     {block:PermalinkPage}
  1146.                     <a href="{URL}" {Target}>
  1147.                         {block:Thumbnail}
  1148.                             <img src="{Thumbnail-HighRes}"/>
  1149.                         {/block:Thumbnail}
  1150.                         <div class="link-info">
  1151.                             <h3>{Name}</h3>
  1152.                             {block:Excerpt}<p class="text">{Excerpt}</p>{/block:Excerpt}
  1153.                             {block:Host}<p class="src">{Host}</p>{/block:Host}
  1154.                         </div>
  1155.                     </a>
  1156.                 </div>
  1157.                 {block:Description}<div class="link-desc">{Description}</div>{/block:Description}
  1158.             {/block:PermalinkPage}
  1159.             {/block:Link}
  1160.            
  1161.             {block:Answer}
  1162.                 <div class="question-wrapper">
  1163.                     <div class="post-icon">
  1164.                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"/></svg>            
  1165.                     </div>
  1166.                     <div class="asker"><strong>{Asker}</strong>:</div>
  1167.                     <div class="question">{Question}</div>
  1168.                 </div>
  1169.  
  1170.                <li class="inner-text">
  1171.                     {block:Answerer}
  1172.                             <div class="user-info">
  1173.                                 {block:IsActive}
  1174.                                 <a class="username" {block:HasPermalink}href="{Permalink}"{/block:HasPermalink}target="_blank">
  1175.                                     {Answerer}
  1176.                                 </a>
  1177.                                 {/block:IsActive}
  1178.                                 {block:IsDeactivated}
  1179.                                 <div class="username deactivated">
  1180.                                     {Answerer}
  1181.                                 </div>
  1182.                                 {/block:IsDeactivated}
  1183.                             </div>
  1184.                             <div class="post-text">{Answer}</div>
  1185.                     {/block:Answerer}
  1186.                     {Replies}
  1187.                </li>
  1188.             {/block:Answer}
  1189.            
  1190.              {block:Quote}
  1191.                 <div class ="quote-wrapper">
  1192.                     <div class="post-icon">
  1193.                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/></svg>          
  1194.                     </div>
  1195.                     <h3 class="title">{Quote}</h3>
  1196.                     {block:Source}
  1197.                     <div class="source">{Source}</div>
  1198.                     {/block:Source}
  1199.                 </div>
  1200.             {/block:Quote}
  1201.            
  1202.             {block:Chat}
  1203.                 <div class="chat-wrapper">
  1204.                
  1205.                 <div class="post-icon">
  1206.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5.455 15L1 18.5V3a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v12H5.455zm-.692-2H16V4H3v10.385L4.763 13zM8 17h10.237L20 18.385V8h1a1 1 0 0 1 1 1v13.5L17.545 19H9a1 1 0 0 1-1-1v-1z"/></svg>        
  1207.                 </div>
  1208.                
  1209.                     {block:Title}<h3 class="title">{Title}</h3>{/block:Title}
  1210.                     <ul class="chat">
  1211.                         {block:Lines}
  1212.                         <li class="line-{Alt}">
  1213.                             {block:Label}<span class="label">{label}</span>{/block:Label}            
  1214.                             {Line}
  1215.                         </li>
  1216.                         {/block:Lines}
  1217.                     </ul>
  1218.                  </div>
  1219.             {/block:Chat}
  1220.            
  1221.             {block:Audio}
  1222.             <div class="audio-wrapper">
  1223.                 <div class="post-icon">
  1224.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 4a8 8 0 0 0-8 8h3a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7C2 6.477 6.477 2 12 2s10 4.477 10 10v7a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h3a8 8 0 0 0-8-8zM4 14v5h3v-5H4zm13 0v5h3v-5h-3z"/></svg>
  1225.          
  1226.                 </div>
  1227.                 {block:PermalinkPage}
  1228.                 <div class="audio-iframe">
  1229.                     {block:AudioEmbed}                
  1230.                     {AudioEmbed-640}
  1231.                     {/block:AudioEmbed}
  1232.                 </div>
  1233.                 {/block:PermalinkPage}
  1234.                
  1235.  
  1236.                 {block:IndexPage}
  1237.                 <div class="audio-info">
  1238.                     {block:TrackName}
  1239.                     <span class="audio-track">{TrackName}</span>
  1240.                     {/block:TrackName}
  1241.                     {block:Artist}
  1242.                     <span class="audio-artist"> - {Artist}</span>
  1243.                     {/block:Artist}
  1244.                 </div>
  1245.                 <div class="play-count">({lang:Played PlayCount times})</div>
  1246.                 {/block:IndexPage}
  1247.             {/block:Audio}
  1248.            
  1249.             {/block:IfNotShowPhotosOnly}
  1250.            
  1251.              {block:Date}
  1252.              
  1253.             <div class="post-info">
  1254.                 <div>{TimeAgo} ⨯ {NoteCountWithLabel}{block:PermalinkPage} ⨯ {block:RebloggedFrom}{lang:Reblogged from ReblogRootName 2}{/block:RebloggedFrom}{block:NotReblog}{lang:Posted by PostAuthorName 2}{/block:NotReblog}{/block:PermalinkPage}</div>
  1255.             </div>
  1256.            
  1257.             {/block:Date}
  1258.  
  1259.            
  1260.               {block:Caption}
  1261.                 {block:Notreblog}
  1262.                     <li class="caption">
  1263.                     <div class="post-icon">                            
  1264.                     {block:Photo}
  1265.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11.1l2-2 5.5 5.5 3.5-3.5 3 3V5H5v6.1zm0 2.829V19h3.1l2.986-2.985L7 11.929l-2 2zM10.929 19H19v-2.071l-3-3L10.929 19zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm11.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>
  1266.                     {/block:Photo}
  1267.                     {block:Photoset}
  1268.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11.1l2-2 5.5 5.5 3.5-3.5 3 3V5H5v6.1zm0 2.829V19h3.1l2.986-2.985L7 11.929l-2 2zM10.929 19H19v-2.071l-3-3L10.929 19zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm11.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>
  1269.                     {/block:Photoset}
  1270.                     {block:Panorama}
  1271.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11.1l2-2 5.5 5.5 3.5-3.5 3 3V5H5v6.1zm0 2.829V19h3.1l2.986-2.985L7 11.929l-2 2zM10.929 19H19v-2.071l-3-3L10.929 19zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm11.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>
  1272.                     {/block:Panorama}
  1273.                     {block:Video}
  1274.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992A.993.993 0 0 1 2 20.007V3.993zM8 5v14h8V5H8zM4 5v2h2V5H4zm14 0v2h2V5h-2zM4 9v2h2V9H4zm14 0v2h2V9h-2zM4 13v2h2v-2H4zm14 0v2h2v-2h-2zM4 17v2h2v-2H4zm14 0v2h2v-2h-2z"/></svg>
  1275.                     {/block:Video}
  1276.                     </div>  
  1277.                         <div class="post-text">{Caption}</div>
  1278.                     </li>
  1279.                  {/block:Notreblog}
  1280.                  {block:RebloggedFrom}
  1281.                     {block:Reblogs}
  1282.                     <li class="caption">
  1283.                     <div class="post-icon">                            
  1284.                     {block:Photo}
  1285.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11.1l2-2 5.5 5.5 3.5-3.5 3 3V5H5v6.1zm0 2.829V19h3.1l2.986-2.985L7 11.929l-2 2zM10.929 19H19v-2.071l-3-3L10.929 19zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm11.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>
  1286.                     {/block:Photo}
  1287.                     {block:Photoset}
  1288.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11.1l2-2 5.5 5.5 3.5-3.5 3 3V5H5v6.1zm0 2.829V19h3.1l2.986-2.985L7 11.929l-2 2zM10.929 19H19v-2.071l-3-3L10.929 19zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm11.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>
  1289.                     {/block:Photoset}
  1290.                     {block:Panorama}
  1291.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11.1l2-2 5.5 5.5 3.5-3.5 3 3V5H5v6.1zm0 2.829V19h3.1l2.986-2.985L7 11.929l-2 2zM10.929 19H19v-2.071l-3-3L10.929 19zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm11.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>
  1292.                     {/block:Panorama}
  1293.                     {block:Video}
  1294.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992A.993.993 0 0 1 2 20.007V3.993zM8 5v14h8V5H8zM4 5v2h2V5H4zm14 0v2h2V5h-2zM4 9v2h2V9H4zm14 0v2h2V9h-2zM4 13v2h2v-2H4zm14 0v2h2v-2h-2zM4 17v2h2v-2H4zm14 0v2h2v-2h-2z"/></svg>
  1295.                     {/block:Video}
  1296.                     </div>  
  1297.                             <div class="user-info">
  1298.                                 {block:IsActive}
  1299.                                 <a class="username" {block:HasPermalink}href="{Permalink}"{/block:HasPermalink}target="_blank">
  1300.                                     {Username}
  1301.                                 </a>
  1302.                                 {/block:IsActive}
  1303.                                 {block:IsDeactivated}
  1304.                                 <div class="username deactivated">
  1305.                                     {Username}
  1306.                                 </div>
  1307.                                 {/block:IsDeactivated}
  1308.                             </div>
  1309.                            
  1310.                             <div class="post-text">{Body}</div>
  1311.                         </li>
  1312.                     {/block:Reblogs}
  1313.                 {/block:RebloggedFrom}
  1314.             {/block:Caption}
  1315.        
  1316.             {block:PermalinkPage}
  1317.                 {block:ContentSource}
  1318.                     <a href="{SourceURL}" class="content-source">Source <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z"/></svg></a>
  1319.                 {/block:ContentSource}
  1320.             {/block:PermalinkPage}
  1321.            
  1322.             {block:HasTags}
  1323.                 <div class="tags">
  1324.                     {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1325.                 </div>
  1326.             {/block:HasTags}
  1327.                
  1328.             <a href="{RelativePermalink}" class="hover-info"></a>
  1329.             </div>
  1330.             {block:Date}
  1331.             <div class="notes-wrap">
  1332.                 {block:PermalinkPage}
  1333.                 <h2>{lang:Notes}</h2>
  1334.                 {/block:PermalinkPage}
  1335.                 {PostNotes-64}
  1336.             </div>
  1337.             {/block:Date}
  1338.             </article>
  1339.            
  1340.            
  1341.             {/block:Posts}
  1342.             <!-- end posts -->
  1343.            
  1344.             {block:SearchPage}
  1345.                 {block:NoSearchResults}
  1346.                 <div class="no-results">{lang:No posts containing SearchQuery 2}</div>
  1347.                 {/block:NoSearchResults}
  1348.             {/block:SearchPage}
  1349.  
  1350.         </section>
  1351.                
  1352.         {block:Pagination}
  1353.             <div class="pagination">
  1354.                 {block:PreviousPage}    
  1355.                     <span class="page">
  1356.                         <a href="{PreviousPage}"></a>
  1357.                     </span>
  1358.                 {/block:PreviousPage}
  1359.                
  1360.                 {block:NextPage}
  1361.                     <span class="page">
  1362.                         <a class="next-page" href="{NextPage}"></a>
  1363.                     </span>
  1364.                 {/block:NextPage}
  1365.             </div>
  1366.            
  1367.             <div class="load-wrapper">            
  1368.                 <button class="load-more-btn">{lang:Load more posts}</button>
  1369.             </div>
  1370.         {/block:Pagination}
  1371.         </div>
  1372.  
  1373.         </main>
  1374.        
  1375.         <footer>
  1376.        
  1377.         <a id="to-top" class="tooltip-link-top">
  1378.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/>
  1379.         </svg>
  1380.         <span id="to-top-tooltip" role="tooltip">Scroll to Top</span>
  1381.         </a>
  1382.        
  1383.         <a href="https://mephistia-themes.tumblr.com" class="tooltip-link-top">
  1384.         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"/>
  1385.         </svg>
  1386.         <span id="code-tooltip" role="tooltip">Theme by Mephistia</span>
  1387.         </a>
  1388.         </footer>
  1389.  
  1390.         <!--jQuery-->
  1391.         <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  1392.        
  1393.         <!-- masonry -->
  1394.         <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  1395.        
  1396.         <!-- images loaded -->
  1397.         <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  1398.        
  1399.         <!-- infinite scroll -->
  1400.         <script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
  1401.  
  1402.            
  1403.         <!-- Unnest captions -->
  1404.         <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1405.  
  1406.         <!-- prettify code -->
  1407.         <script src="https://static.tumblr.com/xiit3w8/zxtqmkzo0/prettify.js"></script>
  1408.  
  1409.         <!-- Resizing videos -->
  1410.         <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1411.        
  1412.         <script type="text/javascript">
  1413.        
  1414.         $(document).ready(function() {    
  1415.  
  1416.             $('pre').addClass('prettyprint');
  1417.             $('code').addClass('prettyprint');
  1418.        
  1419.             $(function(){  
  1420.                 $('article').unnest({
  1421.                     yourCaption: ".post-text",
  1422.                     wrapName: ".tumblr_blog",
  1423.                     newCaptionUsername: true,
  1424.                     originalPostCaptionUsername: false,
  1425.                     tumblrAvatars: false,
  1426.                     usernameColon: false
  1427.                 });
  1428.            
  1429.             });
  1430.         });
  1431.        
  1432.         $(window).load(function(){
  1433.             prettyPrint();
  1434.            
  1435.                        
  1436.             var $grid = $('#posts').masonry({
  1437.                 percentPosition: true,
  1438.                 itemSelector: 'article',
  1439.                 //fitWidth: true,
  1440.                 isAnimated: true,
  1441.                 columnWidth: '.grid-sizer',
  1442.                 gutter: {text:Post Gutter}
  1443.              });
  1444.              
  1445.              $grid.imagesLoaded().progress( function() {
  1446.                  $grid.masonry('layout');
  1447.              });
  1448.              
  1449.              let msnry = $grid.data('masonry') ;
  1450.              
  1451.              $grid.infiniteScroll({
  1452.                 path: '.next-page',
  1453.                 append: 'article',
  1454.                 history: false,
  1455.                 outlayer: msnry,
  1456.                 hideNav: '.pagination',
  1457.                 button: '.load-more-btn',
  1458.                 {block:ifNotInfiniteScroll}
  1459.                 scrollThreshold: false,
  1460.                 {/block:ifNotInfiniteScroll}
  1461.             }, function(){
  1462.             resizeVideos();
  1463.             var $newElems = $( newElements ).css({ opacity: 0 });
  1464.             $newElems.unnest();
  1465.             });
  1466.                                    
  1467.            
  1468.              var $menu = $('.blog-menu'),
  1469.              pathname = location.pathname.split('/'),
  1470.              pathname1 = (pathname[1]),
  1471.              pathname2 = (pathname[2]);    
  1472.            
  1473.              if ( pathname1 != '' && pathname2 === undefined ) {        
  1474.                  // for when your link contains one part. e.g. /ask
  1475.                  $menu.find('a[href$="/' + pathname1 + '"]').addClass('active-link');    
  1476.              }
  1477.              else if ( pathname1 != '' && pathname2 != undefined ) {        
  1478.                  // for when your link contains two parts. e.g. /tagged/ask
  1479.                  $menu.find('a[href$="/' + pathname1 + '/' + pathname2 + '"]').addClass('active-link');    
  1480.              }
  1481.             });
  1482.  
  1483.        
  1484.         var toTop = $('#to-top');
  1485.                
  1486.         toTop.on('click', function(e) {
  1487.           e.preventDefault();
  1488.           $('html, body').animate({scrollTop:0}, '300');
  1489.         });
  1490.        
  1491.         $(window).scroll(function() {
  1492.           if ($(window).scrollTop() > 300) {
  1493.             toTop.addClass('show');
  1494.           } else {
  1495.             toTop.removeClass('show');
  1496.           }
  1497.         });
  1498.  
  1499.        
  1500.         </script>
  1501.     </body>
  1502. </html>
  1503.  
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!