SHARE
TWEET

She-ra Theme

a guest Apr 22nd, 2019 86 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <!--
  5.        
  6.         Designed by ShuDesigns
  7.         shudesigns.tumblr.com
  8.         2019 ⓒ All Rights Reserved.
  9.  
  10.         ---
  11.  
  12.         >> CREDITS
  13.  
  14.         Google Fonts
  15.         Feather Icons     by Cole Bemis
  16.         FontAwesome(v4.7) by Fonticons, Inc.
  17.  
  18.         style-my-tooltips by malihu
  19.         imgLiquid         by Alejandro Emparan
  20.         Sticky Sidebar    by Ahmed Bouhuolia
  21.         Extended photoset by PixelUnion, modified by bychloethemes
  22.         Video width fix   by shythemes
  23.  
  24.     -->
  25.     <meta charset="UTF-8" />
  26.     {block:Description}<meta name="descripttion" content="{MetaDescription}" />{/block:Description}
  27.     {block:Hidden}
  28.     <meta name="color:Text Color" content="#656565" />
  29.     <meta name="color:Color One" content="#bdc2e8" />
  30.     <meta name="color:Color Two" content="#e6dee9" />
  31.     <meta name="color:Border Color" content="#eeeeee" />
  32.     <meta name="color:Body Background" content="#f5f5f5" />
  33.     <meta name="color:Navbar Top Background" content="#333333" />
  34.     <meta name="color:Navbar Background" content="#fafafa" />
  35.     <meta name="color:Banner Text Color" content="#ffffff" />
  36.     <meta name="color:Post Background" content="#ffffff" />
  37.    
  38.     <meta name="image:Home Banner" content="" />
  39.     <meta name="image:Page Banner" content="" />
  40.     <meta name="image:Sidebar Intro" content="" />
  41.    
  42.     <meta name="if:Show Banner" content="1" />
  43.     <meta name="if:Show Banner Text" content="1" />
  44.    
  45.     <meta name="select:Tumblr Controls Style" content="light-controls" title="Light" />
  46.     <meta name="select:Tumblr Controls Style" content="dark-controls" title="Dark" />
  47.    
  48.     <meta name="select:Banner Blending Mode" content="normal" title="Normal" />
  49.     <meta name="select:Banner Blending Mode" content="multiply" title="Multiply" />
  50.     <meta name="select:Banner Blending Mode" content="overlay" title="Overlay" />
  51.     <meta name="select:Banner Blending Mode" content="screen" title="Screen" />
  52.    
  53.     <meta name="select:Sidebar Position" content="left" title="Left" />
  54.     <meta name="select:Sidebar Position" content="right" title="Right" />
  55.    
  56.     <meta name="select:Sidebar Width" content="300px" title="300px" />
  57.     <meta name="select:Sidebar Width" content="225px" title="225px" />
  58.     <meta name="select:Sidebar Width" content="250px" title="250px" />
  59.     <meta name="select:Sidebar Width" content="275px" title="275px" />
  60.    
  61.     <meta name="select:Post Width" content="540px" title="540px" />
  62.     <meta name="select:Post Width" content="400px" title="400px" />
  63.     <meta name="select:Post Width" content="500px" title="500px" />
  64.  
  65.     <meta name="text:Body Font Size" content="14px" />
  66.    
  67.     <meta name="text:Tumblr Controls Opacity" content="1" />
  68.     <meta name="text:Banner Image Opacity" content="1" />
  69.    
  70.     <meta name="text:Navbar Title" content="" />
  71.     <meta name="text:Banner Title" content="" />
  72.     <meta name="text:Banner Subtitle" content="" />
  73.  
  74.     <meta name="text:Link 1 Title" content="home" />
  75.     <meta name="text:Link 1 Url" content="/" />
  76.     <meta name="text:Link 2 Title" content="ask" />
  77.     <meta name="text:Link 2 Url" content="/ask" />
  78.     <meta name="text:Link 3 Title" content="" />
  79.     <meta name="text:Link 3 Url" content="" />
  80.     <meta name="text:Link 4 Title" content="" />
  81.     <meta name="text:Link 4 Url" content="" />
  82.     <meta name="text:Link 5 Title" content="" />
  83.     <meta name="text:Link 5 Url" content="" />
  84.     {/block:Hidden}
  85.     <title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title>
  86.     <link rel="shortcut icon" href="{Favicon}" type="image/x-icon" />
  87.     <link rel="alternate" href="{RSS}" type="application/rss+xml" />
  88.     <link rel="stylesheet" href="https://static.tumblr.com/ickcbh2/Fofpn8amw/layout.min.css" />
  89.    
  90.     <style type="text/css">
  91.    
  92.     /* -------------------------------------------
  93.      *  variables
  94.      * ------------------------------------------ */
  95.    
  96.     :root {
  97.    
  98.         /* fonts */
  99.         --sans: 'Source Sans Pro', 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
  100.         --serif: 'Playfair Display', 'Times', 'Times New Roman', serif;
  101.         --icons: 'FontAwesome' !important;
  102.         --body-font-size: 14px;
  103.    
  104.         /* colors */
  105.         --body-background: {color:Body Background};
  106.         --post-background: {color:Post Background};
  107.         --text-color: {color:Text Color};
  108.         --border-color: {color:Border Color};
  109.         --navbar-top: {color:Navbar Top Background};
  110.         --navbar-background: {color:Navbar Background};
  111.         --banner-text: {color:Banner Text};
  112.         --color-one: {color:Color One};
  113.         --color-two: {color:Color Two};
  114.         --gradient: {color:Color One}, {color:Color Two};
  115.    
  116.     }
  117.    
  118.     /* -------------------------------------------
  119.      *  layout
  120.      * ------------------------------------------ */
  121.    
  122.     .wrapper {
  123.         min-width: calc({select:Sidebar Width} + 50px + {select:Post Width});
  124.     }
  125.     .container {
  126.         width: calc({select:Sidebar Width} + 50px + {select:Post Width});
  127.         margin: 0 auto;
  128.     }
  129.    
  130.     /* -------------------------------------------
  131.      *  tumblr controls
  132.      * ------------------------------------------ */
  133.    
  134.     .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  135.         position: fixed;
  136.         z-index: 1001;
  137.         top: -1px;
  138.         right: calc(50% - {select:Sidebar Width}/2 - 30px - {select:Post Width}/2);
  139.         max-width: 350px;
  140.         -webkit-transform: scale(0.6);
  141.            -moz-transform: scale(0.6);
  142.             -ms-transform: scale(0.6);
  143.                 transform: scale(0.6);
  144.         -webkit-transform-origin: top right;
  145.            -moz-transform-origin: top right;
  146.             -ms-transform-origin: top right;
  147.                 transform-origin: top right;
  148.         opacity: {text:Tumblr Controls Opacity};
  149.     }
  150.     .light-controls .tmblr-iframe--unified-controls {
  151.         mix-blend-mode: screen;
  152.     }
  153.     .dark-controls .tmblr-iframe--unified-controls {
  154.         mix-blend-mode: multiply;
  155.         -webkit-filter: invert(100%);
  156.         filter: invert(100%);
  157.     }
  158.    
  159.     /* -------------------------------------------
  160.      *  header
  161.      * ------------------------------------------ */
  162.    
  163.     /* navbar basic */
  164.     #header .navbar {
  165.         position: fixed;
  166.         z-index: 999;
  167.         top: 0;
  168.         left: 0;
  169.         right: 0;
  170.     }
  171.    
  172.     /* navbar top */
  173.     #header .navbar .navbar-top {
  174.         height: 30px;
  175.         background-color: {color:Navbar Top Background};
  176.     }
  177.     #header .navbar .navbar-top .search {
  178.         padding: 5px 0 5px 80px;
  179.     }
  180.     #header .navbar .navbar-top .search .search-bar {
  181.         position: relative;
  182.         display: -webkit-box;
  183.         display: -webkit-flex;
  184.         display: -ms-flexbox;
  185.         display: flex;
  186.         height: 20px;
  187.         margin-left: 10px;
  188.     }
  189.     #header .navbar .navbar-top .search .search-bar input,
  190.     #header .navbar .navbar-top .search .search-bar button {
  191.         display: block;
  192.         color: {color:Banner Text Color};
  193.     }
  194.     #header .navbar .navbar-top .search .search-bar input {
  195.         font-size: 0.95rem;
  196.         width: 150px;
  197.     }
  198.     #header .navbar .navbar-top .search .search-bar input::-webkit-input-placeholder {
  199.         color: {color:Banner Text Color};
  200.         opacity: 0.5;
  201.     }
  202.     #header .navbar .navbar-top .search .search-bar button svg {
  203.         display: block;
  204.         width: 15px;
  205.         height: 15px;
  206.         stroke: url('#gradient');
  207.     }
  208.    
  209.     /* navbar main */
  210.     #header .navbar .navbar-main {
  211.         background-color: {color:Navbar Background};
  212.     }
  213.     #header .navbar .navbar-main .container {
  214.         position: relative;
  215.         display: -webkit-box;
  216.         display: -webkit-flex;
  217.         display: -ms-flexbox;
  218.         display: flex;
  219.         -webkit-box-pack: justify;
  220.         -ms-flex-pack: justify;
  221.         justify-content: space-between;
  222.         -webkit-box-align: center;
  223.         -ms-flex-align: center;
  224.         align-items: center;
  225.         color: {color:Text Color};
  226.     }
  227.     #header .navbar .navbar-main .title {
  228.         margin: 0;
  229.         font-family: var(--serif);
  230.         font-size: 1.285rem;
  231.     }
  232.     #header .navbar .navbar-main .title.title-style {
  233.         margin-left: 90px;
  234.     }
  235.     #header .navbar .navbar-main .title.title-style:before,
  236.     #header .navbar .navbar-main .title.title-style:after {
  237.         position: absolute;
  238.         left: 0;
  239.         display: block;
  240.     }
  241.     #header .navbar .navbar-main .title.title-style:before {
  242.         content: attr(data-first-letter);
  243.         top: -30px;
  244.         width: 80px;
  245.         height: 100px;
  246.         padding-top: 30px;
  247.         background-image: linear-gradient(to bottom, var(--gradient));
  248.         background-size: 101%;
  249.         font-size: 3rem;
  250.         text-align: center;
  251.         line-height: 60px;
  252.         text-transform: uppercase;
  253.         color: #fff;
  254.         transition-property: height, line-height;
  255.         transition-duration: .3s;
  256.         transition-timing-function: ease-in-out;
  257.     }
  258.     #header .navbar .navbar-main.on-scroll .title.title-style:before {
  259.         height: 85px;
  260.         line-height: 50px;
  261.     }
  262.     #header .navbar .navbar-main .title.title-style:after {
  263.         content: '';
  264.         bottom: -20px;
  265.         border-left: 40px solid transparent;
  266.         border-right: 40px solid transparent;
  267.         border-top: 20px solid {color:Color Two};
  268.     }
  269.     #header .navbar .navbar-main .menu {
  270.         display: -webkit-box;
  271.         display: -webkit-flex;
  272.         display: -ms-flexbox;
  273.         display: flex;
  274.         -webkit-box-align: center;
  275.         -ms-flex-align: center;
  276.         align-items: center;
  277.         height: 70px;
  278.         transition: height .3s ease-in-out;
  279.     }
  280.     #header .navbar .navbar-main.on-scroll .menu {
  281.         height: 55px;
  282.     }
  283.     #header .navbar .navbar-main .menu > li {
  284.         position: relative;
  285.         display: -webkit-box;
  286.         display: -webkit-flex;
  287.         display: -ms-flexbox;
  288.         display: flex;
  289.         -webkit-box-pack: justify;
  290.         -ms-flex-pack: justify;
  291.         justify-content: space-between;
  292.         -webkit-box-align: center;
  293.         -ms-flex-align: center;
  294.         align-items: center;
  295.         height: 100%;
  296.         background-image: linear-gradient(to bottom, var(--gradient));
  297.         background-size: 101%;
  298.     }
  299.     #header .navbar .navbar-main .menu > li:hover > a,
  300.     #header .navbar .navbar-main .menu > li:hover > span {
  301.         background-color: transparent;
  302.         color: #fff;
  303.     }
  304.     #header .navbar .navbar-main .menu > li a {
  305.         white-space: nowrap;
  306.         text-transform: uppercase;
  307.         line-height: 1em;
  308.     }
  309.     #header .navbar .navbar-main .menu > li > a,
  310.     #header .navbar .navbar-main .menu > li > span {
  311.         position: relative;
  312.         display: -webkit-box;
  313.         display: -webkit-flex;
  314.         display: -ms-flexbox;
  315.         display: flex;
  316.         -webkit-box-pack: justify;
  317.         -ms-flex-pack: justify;
  318.         justify-content: space-between;
  319.         -webkit-box-align: center;
  320.         -ms-flex-align: center;
  321.         align-items: center;
  322.         height: 100%;
  323.         background-color: {color:Navbar Background};
  324.         padding: 0 25px;
  325.         font-size: 0.75rem;
  326.         font-weight: 600;
  327.         letter-spacing: 0.1em;
  328.         text-transform: uppercase;
  329.         transition-property: color, background-color;
  330.     }
  331.     #header .navbar .navbar-main .menu > li > span {
  332.         cursor: default;
  333.     }
  334.     #header .navbar .navbar-main .menu > li .submenu {
  335.         display: none;
  336.         position: absolute;
  337.         top: 70px;
  338.         min-width: 100%;
  339.         padding: 20px;
  340.         background-color: {color:Navbar Top Background};
  341.         text-align: center;
  342.         transition: top .3s ease-in-out;
  343.     }
  344.     #header .navbar .navbar-main.on-scroll .menu > li .submenu {
  345.         top: 55px;
  346.     }
  347.     #header .navbar .navbar-main .menu > li .submenu:before {
  348.         content: "";
  349.         position: absolute;
  350.         z-index: 1;
  351.         top: 0;
  352.         left: calc(50% - 5px);
  353.         display: block;
  354.         border-top: 7px solid {color:Color Two};
  355.         border-left: 5px solid transparent;
  356.         border-right: 5px solid transparent;
  357.     }
  358.     #header .navbar .navbar-main .menu > li .submenu li + li {
  359.         margin-top: 10px;
  360.     }
  361.     #header .navbar .navbar-main .menu > li .submenu li a {
  362.         position: relative;
  363.         display: inline-block;
  364.         font-size: 0.75rem;
  365.         letter-spacing: 0.1em;
  366.         color: {color:Banner Text Color};
  367.     }
  368.     #header .navbar .navbar-main .menu > li .submenu li a:after {
  369.         content: '';
  370.         position: absolute;
  371.         top: calc(0.5em - 1px);
  372.         left: 0;
  373.         right: 0;
  374.         display: block;
  375.         height: 2px;
  376.         background-image: linear-gradient(135deg, var(--gradient));
  377.         background-size: 101%;
  378.         -moz-transform: scaleX(0);
  379.         -o-transform: scaleX(0);
  380.         -ms-transform: scaleX(0);
  381.         -webkit-transform: scaleX(0);
  382.         transform: scaleX(0);
  383.         transition: transform 0.5s ease-in-out;
  384.         transform-origin: center left;
  385.     }
  386.     #header .navbar .navbar-main .menu > li .submenu li a:hover:after {
  387.         -moz-transform: scaleX(1);
  388.         -o-transform: scaleX(1);
  389.         -ms-transform: scaleX(1);
  390.         -webkit-transform: scaleX(1);
  391.         transform: scaleX(1);
  392.     }
  393.    
  394.     /* banner */
  395.     #header .banner {
  396.         position: relative;
  397.         display: -webkit-box;
  398.         display: -webkit-flex;
  399.         display: -ms-flexbox;
  400.         display: flex;
  401.         -webkit-box-align: center;
  402.         -ms-flex-align: center;
  403.         align-items: center;
  404.         height: 15vw;
  405.         min-height: 200px;
  406.         margin-top: 100px;
  407.         background-image: linear-gradient(135deg, var(--gradient));
  408.         background-size: 101%;
  409.     }
  410.     #header .banner.page-1 {
  411.         height: 30vw;
  412.         min-height: 400px;
  413.     }
  414.     #header .banner .banner-img {
  415.         position: absolute;
  416.         top: 0;
  417.         left: 0;
  418.         right: 0;
  419.         bottom: 0;
  420.         mix-blend-mode: {select:Banner Blending Mode};
  421.         opacity: {text:Banner Image Opacity};
  422.     }
  423.     #header .banner .home-banner,
  424.     #header .banner.page-1 .page-banner {
  425.         display: none;
  426.     }
  427.     #header .banner.page-1 .home-banner {
  428.         display: block;
  429.     }
  430.     #header .banner .banner-text {
  431.         position: relative;
  432.         z-index: 1;
  433.         color: {color:Banner Text Color};
  434.     }
  435.     #header .banner .banner-text .title {
  436.         margin: 0;
  437.         font-family: var(--serif);
  438.         font-size: 2.5rem;
  439.         font-weight: 700;
  440.         line-height: 1.1em;
  441.     }
  442.     #header .banner .banner-text .title + .subtitle {
  443.         margin-top: 5px;
  444.     }
  445.     #header .banner .banner-text .subtitle {
  446.         display: block;
  447.         font-size: 0.85rem;
  448.         line-height: 1.1em;
  449.     }
  450.     #header .banner .banner-text .links {
  451.         margin-top: 25px;
  452.         display: -webkit-box;
  453.         display: -webkit-flex;
  454.         display: -ms-flexbox;
  455.         display: flex;
  456.         -webkit-box-align: center;
  457.         -ms-flex-align: center;
  458.         align-items: center;
  459.     }
  460.     #header .banner .banner-text .links li + li {
  461.         margin-left: 10px;
  462.     }
  463.     #header .banner .banner-text .links li a {
  464.         display: -webkit-box;
  465.         display: -webkit-flex;
  466.         display: -ms-flexbox;
  467.         display: flex;
  468.         -webkit-box-pack: center;
  469.         -ms-flex-pack: center;
  470.         justify-content: center;
  471.         -webkit-box-align: center;
  472.         -ms-flex-align: center;
  473.         align-items: center;
  474.         width: 2.25rem;
  475.         height: 2.25rem;
  476.         border: 1px solid {color:Banner Text Color};
  477.         border-radius: 50%;
  478.         color: {color:Banner Text Color};
  479.         transition-property: color, background-color;
  480.     }
  481.     #header .banner .banner-text .links li a svg {
  482.         width: 1rem;
  483.         height: 1rem;
  484.     }
  485.     #header .banner .banner-text .links li a:hover {
  486.         background-color: {color:Banner Text Color};
  487.         color: {color:Color One};
  488.     }
  489.    
  490.     /* -------------------------------------------
  491.      *  main
  492.      * ------------------------------------------ */
  493.    
  494.     /* basic */
  495.     #main {
  496.         {block:ifnotShowBanner}margin-top: 100px;{/block:ifnotShowBanner}
  497.         padding: 100px 0;
  498.     }
  499.     #main .primary {
  500.         margin-{select:Sidebar Position}: calc({select:Sidebar Width} + 50px);
  501.     }
  502.    
  503.     /* pagination */
  504.     #main .primary .pagination {
  505.         position: relative;
  506.         margin-top: 50px;
  507.         overflow: hidden;
  508.         background-color: {color:Post Background};
  509.     }
  510.     #main .primary .pagination a {
  511.         display: block;
  512.     }
  513.     #main .primary .pagination .arrow {
  514.         position: absolute;
  515.         top: 0;
  516.     }
  517.     #main .primary .pagination .arrow:not(.active) {
  518.         background-color: {color:Navbar Background};
  519.     }
  520.     #main .primary .pagination .arrow:not(.active) a {
  521.         pointer-events: none;
  522.         color: {color:Text Color};
  523.         opacity: 0.5;
  524.     }
  525.     #main .primary .pagination .arrow.active {
  526.         background-image: linear-gradient(135deg, var(--gradient));
  527.         background-size: 101%;
  528.     }
  529.     #main .primary .pagination .arrow.active a {
  530.         color: #fff;
  531.     }
  532.     #main .primary .pagination .arrow.prev {
  533.         left: 0;
  534.     }
  535.     #main .primary .pagination .arrow.next {
  536.         right: 0;
  537.     }
  538.     #main .primary .pagination .arrow a {
  539.         display: -webkit-box;
  540.         display: -webkit-flex;
  541.         display: -ms-flexbox;
  542.         display: flex;
  543.         -webkit-box-pack: center;
  544.         -ms-flex-pack: center;
  545.         justify-content: center;
  546.         -webkit-box-align: center;
  547.         -ms-flex-align: center;
  548.         align-items: center;
  549.         width: 45px;
  550.         height: 45px;
  551.     }
  552.     #main .primary .pagination .arrow a svg {
  553.         display: block;
  554.         width: 1rem;
  555.         height: 1rem;
  556.     }
  557.     #main .primary .pagination .jump {
  558.         display: -webkit-box;
  559.         display: -webkit-flex;
  560.         display: -ms-flexbox;
  561.         display: flex;
  562.         -webkit-box-pack: center;
  563.         -ms-flex-pack: center;
  564.         justify-content: center;
  565.         -webkit-box-align: center;
  566.         -ms-flex-align: center;
  567.         align-items: center;
  568.         padding: 5px 0;
  569.     }
  570.     #main .primary .pagination .jump li {
  571.         background-image: linear-gradient(135deg, var(--gradient));
  572.         background-size: 101%;
  573.         border-radius: 50%;
  574.         overflow: hidden;
  575.         width: 35px;
  576.         height: 35px;
  577.     }
  578.     #main .primary-400px .pagination .jump {
  579.         padding: 10px 0;
  580.     }
  581.     #main .primary-400px .pagination .jump li {
  582.         width: 25px;
  583.         height: 25px;
  584.     }
  585.     #main .primary .pagination .jump li a {
  586.         display: -webkit-box;
  587.         display: -webkit-flex;
  588.         display: -ms-flexbox;
  589.         display: flex;
  590.         -webkit-box-pack: center;
  591.         -ms-flex-pack: center;
  592.         justify-content: center;
  593.         -webkit-box-align: center;
  594.         -ms-flex-align: center;
  595.         align-items: center;
  596.         height: 100%;
  597.         background-color: {color:Post Background};
  598.         font-size: 0.85rem;
  599.         text-align: center;
  600.         transition-property: color, background-color;
  601.     }
  602.     #main .primary .pagination .jump li a:hover {
  603.         background-color: transparent;
  604.         color: #fff;
  605.     }
  606.     #main .primary .pagination .jump li.current {
  607.         padding: 2px;
  608.     }
  609.     #main .primary .pagination .jump li.current a {
  610.         border-radius: 50%;
  611.         pointer-events: none;
  612.     }
  613.     #main .primary .pagination .jump li + li {
  614.         margin-left: 5px;
  615.     }
  616.    
  617.     /* -------------------------------------------
  618.      *  sidebar
  619.      * ------------------------------------------ */
  620.    
  621.     /* basic */
  622.     .sidebar {
  623.         width: {select:Sidebar Width};
  624.         float: {select:Sidebar Position};
  625.         will-change: min-height;
  626.     }
  627.     .sidebar .sidebar-inner {
  628.         -moz-transform: translate(0, 0);
  629.         -o-transform: translate(0, 0);
  630.         -ms-transform: translate(0, 0);
  631.         -webkit-transform: translate(0, 0);
  632.         transform: translate(0, 0);
  633.         -moz-transform: translate3d(0, 0, 0);
  634.         -o-transform: translate3d(0, 0, 0);
  635.         -ms-transform: translate3d(0, 0, 0);
  636.         -webkit-transform: translate3d(0, 0, 0);
  637.         transform: translate3d(0, 0, 0);
  638.         will-change: position, transform;
  639.     }
  640.    
  641.     /* section */
  642.     .sidebar .section + .section {
  643.         margin-top: 50px;
  644.     }
  645.    
  646.     /* section head */
  647.     .sidebar .section .section-head {
  648.         display: -webkit-box;
  649.         display: -webkit-flex;
  650.         display: -ms-flexbox;
  651.         display: flex;
  652.         -webkit-box-align: center;
  653.         -ms-flex-align: center;
  654.         align-items: center;
  655.         background-color: {color:Navbar Background};
  656.     }
  657.     .sidebar .section .section-head .icon {
  658.         position: relative;
  659.         display: -webkit-box;
  660.         display: -webkit-flex;
  661.         display: -ms-flexbox;
  662.         display: flex;
  663.         -webkit-box-pack: center;
  664.         -ms-flex-pack: center;
  665.         justify-content: center;
  666.         -webkit-box-align: center;
  667.         -ms-flex-align: center;
  668.         align-items: center;
  669.         width: 50px;
  670.         height: 50px;
  671.         background-image: linear-gradient(to bottom, var(--gradient));
  672.         background-size: 101%;
  673.         color: #fff;
  674.     }
  675.     .sidebar .section .section-head .icon:after {
  676.         content: '';
  677.         position: absolute;
  678.         top: 100%;
  679.         left: 0;
  680.         right: 0;
  681.         display: block;
  682.         border-left: 25px solid transparent;
  683.         border-right: 25px solid transparent;
  684.         border-top: 12.5px solid {color:Color Two};
  685.     }
  686.     .sidebar .section .section-head .icon svg {
  687.         width: 1.425rem;
  688.         height: 1.425rem;
  689.     }
  690.     .sidebar .section .section-head .title {
  691.         margin: 0 0 0 15px;
  692.         font-family: var(--serif);
  693.         font-size: 1.15rem;
  694.     }
  695.    
  696.     /* section content */
  697.     .sidebar .section .section-content {
  698.         padding: 20px;
  699.         background-color: {color:Post Background};
  700.     }
  701.    
  702.     /* intro */
  703.     .sidebar .intro .intro-img {
  704.         margin: -20px;
  705.     }
  706.     .sidebar .intro .intro-img img {
  707.         display: block;
  708.     }
  709.     .sidebar .intro .intro-img+.intro-text {
  710.         margin-top: 40px;
  711.     }
  712.     .sidebar .intro .intro-text {
  713.         font-size: 0.925rem;
  714.     }
  715.    
  716.     /* sidelinks */
  717.     .sidebar .sidelinks ul {
  718.         display: -webkit-box;
  719.         display: -webkit-flex;
  720.         display: -ms-flexbox;
  721.         display: flex;
  722.     }
  723.     .sidebar .sidelinks ul + ul {
  724.         margin-top: 5px;
  725.     }
  726.     .sidebar .sidelinks ul li {
  727.         background-image: linear-gradient(135deg, var(--gradient));
  728.         background-size: 101%;
  729.     }
  730.     .sidebar .sidelinks ul li a {
  731.         display: -webkit-box;
  732.         display: -webkit-flex;
  733.         display: -ms-flexbox;
  734.         display: flex;
  735.         -webkit-box-align: center;
  736.         -ms-flex-align: center;
  737.         align-items: center;
  738.         background-color: {color:Post Background};
  739.         border: 1px solid {color:Border Color};
  740.         transition-property: color, background-color, border-color;
  741.     }
  742.     .sidebar .sidelinks ul li a svg {
  743.         stroke: url("#gradient");
  744.     }
  745.     .sidebar .sidelinks ul li a:hover {
  746.         color: #fff;
  747.         background-color: transparent;
  748.         border-color: transparent;
  749.     }
  750.     .sidebar .sidelinks ul li a:hover svg {
  751.         stroke: #fff;
  752.     }
  753.     .sidebar .sidelinks ul.grid {
  754.         -ms-flex-wrap: wrap;
  755.         flex-wrap: wrap;
  756.     }
  757.     .sidebar .sidelinks ul.grid li {
  758.         position: relative;
  759.         width: calc(20% - 4px);
  760.         margin: 5px 5px 0 0;
  761.     }
  762.     .sidebar .sidelinks ul.grid li:nth-child(-n+5) {
  763.         margin-top: 0;
  764.     }
  765.     .sidebar .sidelinks ul.grid li:nth-child(5n+0) {
  766.         margin-right: 0;
  767.     }
  768.     .sidebar .sidelinks ul.grid li:before {
  769.         content: "";
  770.         display: block;
  771.         height: 0;
  772.         padding-bottom: 100%;
  773.     }
  774.     .sidebar .sidelinks ul.grid li a {
  775.         position: absolute;
  776.         top: 0;
  777.         left: 0;
  778.         right: 0;
  779.         bottom: 0;
  780.         -webkit-box-pack: center;
  781.         -ms-flex-pack: center;
  782.         justify-content: center;
  783.     }
  784.     .sidebar .sidelinks ul.grid li a svg {
  785.         width: 1.25rem;
  786.         height: 1.25rem;
  787.     }
  788.     .sidebar .sidelinks ul.list {
  789.         -webkit-box-orient: vertical;
  790.         -webkit-box-direction: normal;
  791.         -ms-flex-direction: column;
  792.         flex-direction: column;
  793.     }
  794.     .sidebar .sidelinks ul.list li + li {
  795.         margin-top: 5px;
  796.     }
  797.     .sidebar .sidelinks ul.list li a {
  798.         padding: 10px;
  799.         font-size: 0.925rem;
  800.     }
  801.     .sidebar .sidelinks ul.list li a svg {
  802.         width: 1.25rem;
  803.         height: 1.25rem;
  804.         margin-right: 10px;
  805.     }
  806.    
  807.     /* events */
  808.     .sidebar .events .event {
  809.         display: -webkit-box;
  810.         display: -webkit-flex;
  811.         display: -ms-flexbox;
  812.         display: flex;
  813.     }
  814.     .sidebar .events .event + .event {
  815.         margin-top: 10px;
  816.     }
  817.     .sidebar .events .event li {
  818.         position: relative;
  819.     }
  820.     .sidebar .events .event li > div {
  821.         position: absolute;
  822.         top: 0;
  823.         left: 0;
  824.         right: 0;
  825.         bottom: 0;
  826.         display: -webkit-box;
  827.         display: -webkit-flex;
  828.         display: -ms-flexbox;
  829.         display: flex;
  830.         -webkit-box-orient: vertical;
  831.         -webkit-box-direction: normal;
  832.         -ms-flex-direction: column;
  833.         flex-direction: column;
  834.         -webkit-box-pack: center;
  835.         -ms-flex-pack: center;
  836.         justify-content: center;
  837.     }
  838.     .sidebar .events .event li > div span {
  839.         display: block;
  840.     }
  841.     .sidebar .events .event li:first-child {
  842.         -webkit-box-flex: 1;
  843.         -ms-flex: 1;
  844.         flex: 1;
  845.     }
  846.     .sidebar .events .event li:first-child:before {
  847.         content: "";
  848.         display: block;
  849.         padding-bottom: 100%;
  850.     }
  851.     .sidebar .events .event li:first-child .event-date {
  852.         -webkit-box-align: center;
  853.         -ms-flex-align: center;
  854.         align-items: center;
  855.         background-image: linear-gradient(135deg, var(--gradient));
  856.         background-size: 101%;
  857.         text-align: center;
  858.         text-transform: uppercase;
  859.         color: #fff;
  860.     }
  861.     .sidebar .events .event li:first-child .event-date .month {
  862.         font-size: 0.7rem;
  863.         line-height: 1em;
  864.         letter-spacing: 0.01em;
  865.     }
  866.     .sidebar .events .event li:first-child .event-date .day {
  867.         margin: 5px 0 -0.5rem;
  868.         font-size: 1.75rem;
  869.         font-weight: 700;
  870.         line-height: 1em;
  871.         letter-spacing: -0.05em;
  872.     }
  873.     .sidebar .events .event li:first-child .event-date .day sub {
  874.         margin-left: 0.1rem;
  875.         font-size: 0.85rem;
  876.         vertical-align: text-bottom;
  877.         letter-spacing: 0;
  878.     }
  879.     .sidebar .events .event li:last-child {
  880.         -webkit-box-flex: 3;
  881.         -ms-flex: 3;
  882.         flex: 3;
  883.     }
  884.     .sidebar-225px .events .event li:last-child,
  885.     .sidebar-250px .events .event li:last-child {
  886.         -webkit-box-flex: 2.5;
  887.         -ms-flex: 2.5;
  888.         flex: 2.5;
  889.     }
  890.     .sidebar .events .event li:last-child .event-info {
  891.         padding: 0 15px;
  892.         border: 1px solid {color:Border Color};
  893.         border-left: none;
  894.     }
  895.     .sidebar-225px .events .event li:last-child .event-info {
  896.         padding: 0 10px;
  897.     }
  898.     .sidebar-250px .events .event li:last-child .event-info {
  899.         padding: 0 12.5px;
  900.     }
  901.     .sidebar .events .event li:last-child .event-info .title {
  902.         font-size: 1.125rem;
  903.         font-weight: 600;
  904.         line-height: 1.1em;
  905.     }
  906.     .sidebar .events .event li:last-child .event-info .title + .detail {
  907.         margin-top: 5px;
  908.     }
  909.     .sidebar .events .event li:last-child .event-info .detail {
  910.         font-size: 0.75rem;
  911.         line-height: 1.1em;
  912.     }
  913.    
  914.  
  915.    
  916.     /* members */
  917.     .sidebar .members ul li {
  918.         background-image: linear-gradient(135deg, var(--gradient));
  919.         background-size: 101%;
  920.     }
  921.     .sidebar .members ul li + li {
  922.         margin-top: 5px;
  923.     }
  924.     .sidebar .members ul li a {
  925.         display: -webkit-box;
  926.         display: -webkit-flex;
  927.         display: -ms-flexbox;
  928.         display: flex;
  929.     }
  930.     .sidebar .members ul li a > div {
  931.         position: relative;
  932.     }
  933.     .sidebar .members ul li a > div > * {
  934.         position: absolute;
  935.         top: 0;
  936.         left: 0;
  937.         right: 0;
  938.         bottom: 0;
  939.     }
  940.     .sidebar .members ul li a .member-avatar {
  941.         -webkit-box-flex: 1;
  942.         -ms-flex: 1;
  943.         flex: 1;
  944.         background-image: linear-gradient(135deg, var(--gradient));
  945.         background-size: 101%;
  946.     }
  947.     .sidebar .members ul li a .member-avatar:before {
  948.         content: '';
  949.         display: block;
  950.         padding-bottom: 100%;
  951.     }
  952.     .sidebar .members ul li a .member-avatar span {
  953.         display: block;
  954.         background-size: cover;
  955.         -webkit-filter: grayscale(100%);
  956.         -ms-filter: grayscale(100%);
  957.         filter: grayscale(100%);
  958.         mix-blend-mode: overlay;
  959.     }
  960.     .sidebar .members ul li a .member-avatar img {
  961.         display: block !important;
  962.         opacity: 0;
  963.         transition: opacity 0.3s ease-in-out;
  964.     }
  965.     .sidebar .members ul li a .member-avatar + .member-info {
  966.         border-left: none;
  967.     }
  968.     .sidebar .members ul li a .member-info {
  969.         -webkit-box-flex: 3.5;
  970.         -ms-flex: 3.5;
  971.         flex: 3.5;
  972.         background-color: {color:Post Background};
  973.         border: 1px solid {color:Border Color};
  974.         transition-property: color, background-color, border-color;
  975.         transition-duration: 0.3s;
  976.         transition-timing-function: ease-in-out;
  977.     }
  978.     .sidebar-225px .members ul li a .member-info {
  979.         -webkit-box-flex: 2.5;
  980.         -ms-flex: 2.5;
  981.         flex: 2.5;
  982.     }
  983.     .sidebar-250px .members ul li a .member-info {
  984.         -webkit-box-flex: 3;
  985.         -ms-flex: 3;
  986.         flex: 3;
  987.     }
  988.     .sidebar .members ul li a .member-info dl {
  989.         display: -webkit-box;
  990.         display: -webkit-flex;
  991.         display: -ms-flexbox;
  992.         display: flex;
  993.         -webkit-box-orient: vertical;
  994.         -webkit-box-direction: normal;
  995.         -ms-flex-direction: column;
  996.         flex-direction: column;
  997.         -webkit-box-pack: center;
  998.         -ms-flex-pack: center;
  999.         justify-content: center;
  1000.         -webkit-box-align: start;
  1001.         -ms-flex-align: start;
  1002.         align-items: flex-start;
  1003.         margin: 0;
  1004.         padding: 0 15px;
  1005.     }
  1006.     .sidebar-225px .members ul li a .member-info dl {
  1007.         padding: 0 10px;
  1008.     }
  1009.     .sidebar-250px .members ul li a .member-info dl {
  1010.         padding: 0 12.5px;
  1011.     }
  1012.     .sidebar .members ul li a .member-info dl dt {
  1013.         display: block;
  1014.         font-size: 1.05rem;
  1015.         font-weight: 600;
  1016.         line-height: 0.85em;
  1017.     }
  1018.     .sidebar .members ul li a .member-info dl dt + dd {
  1019.         margin-top: 5px;
  1020.     }
  1021.     .sidebar .members ul li a .member-info dl dd {
  1022.         margin: 0;
  1023.         font-size: 0.85rem;
  1024.         line-height: 1.15em;
  1025.     }
  1026.     .sidebar .members ul li a:hover .member-avatar img {
  1027.         opacity: 1;
  1028.     }
  1029.     .sidebar .members ul li a:hover .member-info {
  1030.         color: {color:Banner Text Color};
  1031.         background-color: transparent;
  1032.         border-color: transparent;
  1033.     }
  1034.    
  1035.     /* affiliates */
  1036.     .sidebar .affiliates ul {
  1037.         display: -webkit-box;
  1038.         display: -webkit-flex;
  1039.         display: -ms-flexbox;
  1040.         display: flex;
  1041.         -ms-flex-wrap: wrap;
  1042.         flex-wrap: wrap;
  1043.     }
  1044.     .sidebar .affiliates ul li {
  1045.         width: calc(25% - 15px/4);
  1046.         margin: 5px 5px 0 0;
  1047.         background-image: linear-gradient(135deg, var(--gradient));
  1048.         background-size: 101%;
  1049.     }
  1050.     .sidebar .affiliates ul li:nth-child(-n+4) {
  1051.         margin-top: 0;
  1052.     }
  1053.     .sidebar .affiliates ul li:nth-child(4n+0) {
  1054.         margin-right: 0;
  1055.     }
  1056.     .sidebar .affiliates ul li a {
  1057.         position: relative;
  1058.         display: block;
  1059.     }
  1060.     .sidebar .affiliates ul li a span {
  1061.         position: absolute;
  1062.         top: 0;
  1063.         left: 0;
  1064.         right: 0;
  1065.         bottom: 0;
  1066.         display: block;
  1067.         background-size: cover;
  1068.         -webkit-filter: grayscale(100%);
  1069.         -ms-filter: grayscale(100%);
  1070.         filter: grayscale(100%);
  1071.         mix-blend-mode: overlay;
  1072.     }
  1073.     .sidebar .affiliates ul li a img {
  1074.         position: relative;
  1075.         z-index: 1;
  1076.         display: block;
  1077.         opacity: 0;
  1078.         transition: opacity 0.3s ease-in-out;
  1079.     }
  1080.     .sidebar .affiliates ul li a:hover img {
  1081.         opacity: 1;
  1082.     }
  1083.    
  1084.     /* site info */
  1085.     .sidebar .siteinfo dl {
  1086.         margin: 0;
  1087.     }
  1088.     .sidebar .siteinfo dl dt {
  1089.         background-image: linear-gradient(135deg, var(--gradient));
  1090.         background-size: 101%;
  1091.         float: left;
  1092.         margin-right: 5px;
  1093.         padding: 0 5px;
  1094.         font-size: 0.7rem;
  1095.         line-height: 1.25rem;
  1096.         text-transform: uppercase;
  1097.         letter-spacing: 0.05em;
  1098.         color: {color:Banner Text Color};
  1099.     }
  1100.     .sidebar .siteinfo dl dd {
  1101.         margin: 0 0 5px;
  1102.         font-size: 0.85rem;
  1103.         line-height: 1.25rem;
  1104.     }
  1105.     .sidebar .siteinfo dl dd:last-child {
  1106.         margin-bottom: 0;
  1107.     }
  1108.    
  1109.     /* -------------------------------------------
  1110.      *  posts
  1111.      * ------------------------------------------ */
  1112.    
  1113.     /* basic */
  1114.     .posts .post {
  1115.         overflow: hidden;
  1116.         background-color: {color:Post Background};
  1117.         color: {color:Text Color};
  1118.     }
  1119.     .posts .post + .post {
  1120.         margin-top: 50px;
  1121.     }
  1122.     .post .post-head,
  1123.     .post .post-title,
  1124.     .post .post-body,
  1125.     .post .post-foot {
  1126.         padding: 20px;
  1127.     }
  1128.    
  1129.     /* post head */
  1130.     .post .post-head {
  1131.         display: -webkit-box;
  1132.         display: -webkit-flex;
  1133.         display: -ms-flexbox;
  1134.         display: flex;
  1135.         -webkit-box-pack: justify;
  1136.         -ms-flex-pack: justify;
  1137.         justify-content: space-between;
  1138.         -webkit-box-align: center;
  1139.         -ms-flex-align: center;
  1140.         align-items: center;
  1141.         border-bottom: 1px solid {color:Border Color};
  1142.     }
  1143.     .post .post-head ul {
  1144.         display: -webkit-box;
  1145.         display: -webkit-flex;
  1146.         display: -ms-flexbox;
  1147.         display: flex;
  1148.         -webkit-box-align: center;
  1149.         -ms-flex-align: center;
  1150.         align-items: center;
  1151.     }
  1152.     .post .post-head ul.left {
  1153.         font-size: 11px;
  1154.         letter-spacing: 0.01em;
  1155.     }
  1156.     .post .post-head ul.left li+li {
  1157.         margin-left: 10px;
  1158.     }
  1159.     .post .post-head ul.left li svg {
  1160.         display: inline-block;
  1161.         vertical-align: -2px;
  1162.         margin-right: 5px;
  1163.         width: 12px;
  1164.         height: 12px;
  1165.         stroke: url("#gradient");
  1166.     }
  1167.     .post .post-head ul.left li .divider {
  1168.         display: block;
  1169.         width: 3px;
  1170.         height: 3px;
  1171.         border-radius: 50%;
  1172.         background-image: linear-gradient(135deg, var(--gradient));
  1173.         background-size: 101%;
  1174.     }
  1175.     .post .post-head ul.right li + li {
  1176.         margin-left: 5px;
  1177.     }
  1178.     .post .post-head ul.right li a {
  1179.         display: block;
  1180.         width: 15px;
  1181.         height: 15px;
  1182.         overflow: hidden;
  1183.         border-radius: 3px;
  1184.     }
  1185.    
  1186.     /* post foot */
  1187.     .post .post-foot {
  1188.         border-top: 1px solid {color:Border Color};
  1189.     }
  1190.     .post .post-foot .top {
  1191.         font-size: 10px;
  1192.         line-height: 1.1em;
  1193.         letter-spacing: 0.05em;
  1194.     }
  1195.     .post .post-foot .top ul {
  1196.         margin-top: -10px;
  1197.     }
  1198.     .post .post-foot .top ul li {
  1199.         display: inline-block;
  1200.         margin: 10px 10px 0 0;
  1201.         overflow: hidden;
  1202.         border-radius: 3px;
  1203.         background-image: linear-gradient(135deg, var(--gradient));
  1204.         background-size: 101%;
  1205.     }
  1206.     .post .post-foot .top ul li a {
  1207.         display: block;
  1208.         padding: 5px 10px;
  1209.         background-color: {color:Post Background};
  1210.         border: 1px solid {color:Border Color};
  1211.         border-radius: 3px;
  1212.         transition-property: color, background-color, border-color;
  1213.     }
  1214.     .post .post-foot .top ul li a:hover {
  1215.         color: {color:Post Background};
  1216.         background-color: transparent;
  1217.         border-color: transparent;
  1218.     }
  1219.     .post .post-foot .top + .bottom {
  1220.         margin-top: 15px;
  1221.     }
  1222.     .post .post-foot .bottom {
  1223.         display: -webkit-box;
  1224.         display: -webkit-flex;
  1225.         display: -ms-flexbox;
  1226.         display: flex;
  1227.         -webkit-box-pack: justify;
  1228.         -ms-flex-pack: justify;
  1229.         justify-content: space-between;
  1230.         -webkit-box-align: center;
  1231.         -ms-flex-align: center;
  1232.         align-items: center;
  1233.     }
  1234.     .post .post-foot .bottom .left a {
  1235.         display: block;
  1236.         font-size: 14px;
  1237.         font-weight: 600;
  1238.     }
  1239.     .post .post-foot .bottom .left a:after {
  1240.         content: 'notes';
  1241.         font-size: 12px;
  1242.         margin-left: 3px;
  1243.     }
  1244.     .post .post-foot .bottom .left a.note-1:after {
  1245.         content: 'note';
  1246.     }
  1247.     .post .post-foot .bottom .right {
  1248.         display: -webkit-box;
  1249.         display: -webkit-flex;
  1250.         display: -ms-flexbox;
  1251.         display: flex;
  1252.         -webkit-box-pack: end;
  1253.         -ms-flex-pack: end;
  1254.         justify-content: flex-end;
  1255.         -webkit-box-align: center;
  1256.         -ms-flex-align: center;
  1257.         align-items: center;
  1258.     }
  1259.     .post .post-foot .bottom .right li + li {
  1260.         margin-left: 10px;
  1261.     }
  1262.     .post .post-foot .bottom .right li a,
  1263.     .post .post-foot .bottom .right li span,
  1264.     .post .post-foot .bottom .right li svg {
  1265.         display: block;
  1266.     }
  1267.     .post .post-foot .bottom .right li svg {
  1268.         width: 14px;
  1269.         height: 14px;
  1270.     }
  1271.     .post .post-foot .bottom .right li.like {
  1272.         position: relative;
  1273.     }
  1274.     .post .post-foot .bottom .right li.like .like_button {
  1275.         position: absolute;
  1276.         top: 0;
  1277.         left: 0;
  1278.         width: 14px;
  1279.         height: 14px;
  1280.         z-index: 5;
  1281.         overflow: hidden;
  1282.         opacity: 0;
  1283.     }
  1284.     .post .post-foot .bottom .right li.like .like_button.liked + .custom-like svg {
  1285.         fill: #ff5550;
  1286.         stroke: #ff5550;
  1287.     }
  1288.    
  1289.     /* post media */
  1290.     .post .post-content .post-media img {
  1291.         display: block;
  1292.     }
  1293.     .post .post-content .post-media .width_fix iframe {
  1294.         display: block;
  1295.         width: {select:Post Width} !important;
  1296.         margin: 0;
  1297.     }
  1298.     .post .post-content .post-media .width_fix iframe.tumblr_audio_player {
  1299.         height: 85px;
  1300.     }
  1301.    
  1302.     /* link post */
  1303.     .post .post-media .link-button {
  1304.         word-break: break-word;
  1305.         overflow: hidden;
  1306.         display: block;
  1307.         position: relative;
  1308.         text-decoration: none;
  1309.     }
  1310.     .post .post-media .link-button .thumbnail img {
  1311.         display: block;
  1312.         margin: 0px;
  1313.     }
  1314.     .post .post-media .link-button .thumbnail:after {
  1315.         background-image: linear-gradient(rgba(0, 0, 0, 0.439216), transparent 50%);
  1316.         content: '';
  1317.         display: block;
  1318.         position: absolute;
  1319.         top: 0;
  1320.         left: 0;
  1321.         right: 0;
  1322.         bottom: 0;
  1323.     }
  1324.     .post .post-media .publisher-container {
  1325.         margin-bottom: 4px;
  1326.         display: block;
  1327.         font-size: 13px;
  1328.         line-height: 1em;
  1329.         font-weight: 700;
  1330.         word-break: break-all;
  1331.     }
  1332.     .post .post-media .publisher-container .publisher {
  1333.         font-size: 12px;
  1334.         font-weight: 400;
  1335.         line-height: 1em;
  1336.         display: inline-block;
  1337.         margin: 0px;
  1338.         letter-spacing: 0.05em;
  1339.     }
  1340.     .post .post-media .publisher-container.if-thumbnail {
  1341.         position: absolute;
  1342.         top: 15px;
  1343.         left: 20px;
  1344.         right: 20px;
  1345.     }
  1346.     .post .post-media .publisher-container.if-thumbnail .publisher {
  1347.         color: {color:Post Background};
  1348.     }
  1349.     .post .post-media .info-container {
  1350.         padding: 15px 20px;
  1351.         overflow: hidden;
  1352.         background-color: #fafafa;
  1353.         color: {color:Text Color};
  1354.     }
  1355.     .post .post-media .info-container .title {
  1356.         display: block;
  1357.         font-size: 24px;
  1358.         font-weight: 700;
  1359.         line-height: 1.1em;
  1360.         text-align: left;
  1361.     }
  1362.     .post .post-media .info-container .title:after {
  1363.         font-family: var(--icons);
  1364.         content: '\f105';
  1365.         font-size: 16px;
  1366.         display: inline;
  1367.         margin-left: 5px;
  1368.         vertical-align: 1px;
  1369.     }
  1370.     .post .post-media .info-container .excerpt {
  1371.         display: block;
  1372.         margin-top: 5px;
  1373.         font-size: 14px;
  1374.         line-height: 1.5em;
  1375.     }
  1376.     .post .post-media .info-container .author {
  1377.         margin-top: 5px;
  1378.         display: block;
  1379.         font-size: 12px;
  1380.         font-weight: 400;
  1381.         letter-spacing: 0.01em;
  1382.         line-height: 1.25em;
  1383.         opacity: 0.5;
  1384.     }
  1385.    
  1386.     /* post title */
  1387.     .post .post-content .post-container .post-title + .post-body {
  1388.         margin-top: -20px;
  1389.     }
  1390.     .post .post-title .title {
  1391.         margin: 0;
  1392.         font-size: 1.5em;
  1393.         font-weight: 600;
  1394.         line-height: 1.1em;
  1395.     }
  1396.    
  1397.     /* quote */
  1398.     .post .post-title .quote {
  1399.         font-family: var(--serif);
  1400.         font-size: 1.25em;
  1401.         line-height: 1.35em;
  1402.     }
  1403.     .post .post-title .quote:before,
  1404.     .post .post-title .quote:after {
  1405.         font-size: 0.85em;
  1406.     }
  1407.     .post .post-title .quote:before {
  1408.         content: '\201C';
  1409.         margin-right: 0.35rem;
  1410.     }
  1411.     .post .post-title .quote:after {
  1412.         content: '\201D';
  1413.         margin-left: 0.35rem;
  1414.     }
  1415.    
  1416.     /* caption */
  1417.     .post .post-body .caption + .caption {
  1418.         margin: 20px -20px 0;
  1419.         padding: 20px 20px 0;
  1420.         border-top: 1px solid {color:Border Color};
  1421.     }
  1422.     .post .post-body .caption .reblog-head {
  1423.         display: -webkit-box;
  1424.         display: -webkit-flex;
  1425.         display: -ms-flexbox;
  1426.         display: flex;
  1427.         -webkit-box-align: center;
  1428.         -ms-flex-align: center;
  1429.         align-items: center;
  1430.     }
  1431.     .post .post-body .caption .reblog-head .reblog-avatar {
  1432.         width: 25px;
  1433.         height: 25px;
  1434.         border-radius: 5px;
  1435.         overflow: hidden;
  1436.         margin-right: 10px;
  1437.     }
  1438.     .post .post-body .caption .reblog-head .reblog-avatar img {
  1439.         width: 100%;
  1440.     }
  1441.     .post .post-body .caption .reblog-head .reblog-username {
  1442.         color: {color:Text Color};
  1443.         font-size: 0.95em;
  1444.         font-weight: 600;
  1445.         padding: 0;
  1446.         background: none;
  1447.     }
  1448.     .post .post-body .caption .reblog-content {
  1449.         margin-top: 10px;
  1450.     }
  1451.    
  1452.     /* figure */
  1453.     .post .post-body .caption figure.tmblr-full:last-child {
  1454.         margin-bottom: -20px !important;
  1455.     }
  1456.    
  1457.     /* quote source */
  1458.     .post .post-body .caption .quote-source {
  1459.         margin-top: -10px !important;
  1460.     }
  1461.     .post .post-body .caption .quote-source:before {
  1462.         content: '\2014';
  1463.         margin-right: 5px;
  1464.     }
  1465.    
  1466.     /* chat */
  1467.     .post .post-body ul.chat {
  1468.         padding: 0;
  1469.         border: 1px solid {color:Border Color};
  1470.         border-top: none;
  1471.     }
  1472.     .post .post-body ul.chat li {
  1473.         display: -webkit-box;
  1474.         display: -webkit-flex;
  1475.         display: -ms-flexbox;
  1476.         display: flex;
  1477.         border-top: 1px solid {color:Border Color};
  1478.         line-height: 1.15em;
  1479.     }
  1480.     .post .post-body ul.chat li span {
  1481.         display: block;
  1482.         padding: 10px;
  1483.     }
  1484.     .post .post-body ul.chat li .label {
  1485.         -webkit-flex-shrink: 0;
  1486.         -moz-flex-shrink: 0;
  1487.         -ms-flex-negative: 0;
  1488.         flex-shrink: 0;
  1489.         border-right: 1px solid {color:Border Color};
  1490.         font-weight: 600;
  1491.     }
  1492.    
  1493.     /* ask */
  1494.     .post .post-body .ask,
  1495.     .post .post-body .answer {
  1496.         position: relative;
  1497.         padding: 30px 15px 15px;
  1498.         border-radius: 5px;
  1499.     }
  1500.     .post .post-body .ask .asker,
  1501.     .post .post-body .ask .answerer,
  1502.     .post .post-body .answer .asker,
  1503.     .post .post-body .answer .answerer {
  1504.         padding-bottom: 15px;
  1505.     }
  1506.     .post .post-body .asker-avatar,
  1507.     .post .post-body .answerer-avatar {
  1508.         position: absolute;
  1509.         top: -25px;
  1510.         width: 50px;
  1511.         height: 50px;
  1512.         overflow: hidden;
  1513.         padding: 5px;
  1514.         border-radius: 50%;
  1515.     }
  1516.     .post .post-body .asker-avatar:before,
  1517.     .post .post-body .answerer-avatar:before {
  1518.         content: '';
  1519.         position: absolute;
  1520.         top: 0;
  1521.         left: 0;
  1522.         right: 0;
  1523.         bottom: 0;
  1524.         display: block;
  1525.     }
  1526.     .post .post-body .asker-avatar img,
  1527.     .post .post-body .answerer-avatar img {
  1528.         position: relative;
  1529.         display: block;
  1530.         width: 100%;
  1531.         border-radius: 50%;
  1532.     }
  1533.     .post .post-body .asker-name,
  1534.     .post .post-body .answerer-name {
  1535.         margin-top: 10px;
  1536.         font-size: 1.15em;
  1537.         font-weight: 600;
  1538.         line-height: 1em;
  1539.     }
  1540.     .post .post-body .asker-name:after,
  1541.     .post .post-body .answerer-name:after {
  1542.         font-size: 0.85em;
  1543.         font-weight: 400;
  1544.         opacity: 0.7;
  1545.         margin-left: 0.35em
  1546.     }
  1547.     .post .post-body .asker-name a,
  1548.     .post .post-body .answerer-name a {
  1549.         background: none;
  1550.         padding: 0;
  1551.         border: none;
  1552.         color: inherit;
  1553.     }
  1554.     .post .post-body .asker-question,
  1555.     .post .post-body .answerer-answer {
  1556.         margin-top: 10px;
  1557.     }
  1558.     .post .post-body .ask + .caption,
  1559.     .post .post-body .answer + .caption {
  1560.         margin-top: 20px;
  1561.     }
  1562.     .post .post-body .ask {
  1563.         margin-top: 25px !important;
  1564.         background-color: #f2f2f2;
  1565.     }
  1566.     .post .post-body .ask .asker {
  1567.         border-bottom: 1px solid #e5e5e5;
  1568.     }
  1569.     .post .post-body .ask .asker .asker-avatar:before {
  1570.         background-image: linear-gradient(135deg, {color:Color One} 50%, {color:Color Two} 50%);
  1571.     }
  1572.     .post .post-body .ask .asker .asker-name:after {
  1573.         content: 'sent a message';
  1574.     }
  1575.     .post .post-body .answer {
  1576.         margin-top: 40px;
  1577.         background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  1578.         color: #fff;
  1579.     }
  1580.     .post .post-body .answer .answerer {
  1581.         border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  1582.     }
  1583.     .post .post-body .answer .answerer .answerer-avatar:before {
  1584.         background-image: linear-gradient(135deg, #e5e5e5 50%, #f2f2f2 50%);
  1585.     }
  1586.     .post .post-body .answer .answerer .answerer-name:after {
  1587.         content: 'answered';
  1588.     }
  1589.     .post .post-body .answer .answerer-answer a {
  1590.         background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.75) 0);
  1591.         color: {color:Banner Text Color};
  1592.     }
  1593.     .post .post-body .answer .answerer-answer a:hover {
  1594.         color: rgba(255, 255, 255, 0.85);
  1595.     }
  1596.     .post .post-body .answer .answerer-answer figure.tmblr-full {
  1597.         margin-left: -15px;
  1598.         margin-right: -15px;
  1599.     }
  1600.    
  1601.     /* post notes*/
  1602.     .posts .post-notes {
  1603.         margin-top: 25px;
  1604.         padding: 20px;
  1605.         background-color: {color:Post Background};
  1606.         border-radius: 5px;
  1607.         overflow: hidden;
  1608.         color: {color:Text Color};
  1609.     }
  1610.     .posts .post-notes ol.notes {
  1611.         margin: 0;
  1612.         padding: 0;
  1613.         list-style-type: none;
  1614.         font-size: 0.85em;
  1615.         line-height: 1.5em;
  1616.         letter-spacing: 0.05em;
  1617.     }
  1618.     .posts .post-notes ol.notes li.note + li.note {
  1619.         margin-top: 15px;
  1620.     }
  1621.     .posts .post-notes ol.notes li.note img.avatar {
  1622.         display: inline-block;
  1623.         vertical-align: -6px;
  1624.         margin-right: 10px;
  1625.         width: 20px;
  1626.         height: 20px;
  1627.         border-radius: 50%;
  1628.     }
  1629.     .posts .post-notes ol.notes li.note .action a {
  1630.         font-weight: 600;
  1631.     }
  1632.     .posts .post-notes ol.notes li.note blockquote {
  1633.         border-left: 2px solid {color:Color Two};
  1634.         margin: 1em 0 0 30px;
  1635.         padding-left: 15px;
  1636.     }
  1637.    
  1638.     /* -------------------------------------------
  1639.      *  CustomCss
  1640.      * ------------------------------------------ */
  1641.      
  1642.      {CustomCss}
  1643.        
  1644.     </style>
  1645. </head>
  1646. <body class="{select:Tumblr Controls Style}">
  1647.     <div class="wrapper">
  1648.         <header id="header">
  1649.             <nav class="navbar">
  1650.                 <div class="navbar-top">
  1651.                     <div class="search container">
  1652.                         <form action="/search" method="get">
  1653.                             <div class="search-bar">
  1654.                                 <input type="text" name="q" value="{SearchQuery}" placeholder="Search..." />
  1655.                                 <button type="submit"><i data-feather="search"></i></button>
  1656.                             </div>
  1657.                         </form>
  1658.                     </div>
  1659.                 </div>
  1660.                 <div class="navbar-main">
  1661.                     <div class="container">
  1662.                         <h1 class="title title-style">{block:ifnotNavbarTitle}{Title}{/block:ifnotNavbarTitle}{block:ifNavbarTitle}{text:Navbar Title}{/block:ifNavbarTitle}</h1>
  1663.                         <ul class="menu noneStyle">
  1664.                             {block:ifLink1Title}
  1665.                             <li>
  1666.                                 <a href="{text:Link 1 Url}">{text:Link 1 Title}</a>
  1667.                             </li>
  1668.                             {/block:ifLink1Title}
  1669.                             {block:ifLink2Title}
  1670.                             <li>
  1671.                                 <a href="{text:Link 2 Url}">{text:Link 2 Title}</a>
  1672.                             </li>
  1673.                             {/block:ifLink2Title}
  1674.                             {block:ifLink3Title}
  1675.                             <li>
  1676.                                 <a href="{text:Link 3 Url}">{text:Link 3 Title}</a>
  1677.                             </li>
  1678.                             {/block:ifLink3Title}
  1679.                             {block:ifLink4Title}
  1680.                             <li>
  1681.                                 <a href="{text:Link 4 Url}">{text:Link 4 Title}</a>
  1682.                             </li>
  1683.                             {/block:ifLink4Title}
  1684.                             {block:ifLink5Title}
  1685.                             <li>
  1686.                                 <a href="{text:Link 5 Url}">{text:Link 5 Title}</a>
  1687.                             </li>
  1688.                             {/block:ifLink5Title}
  1689.                             <!--
  1690.                            
  1691.                             [ Dropdown Submenu Examples ]
  1692.                            
  1693.                             If your dropdown title is a link:
  1694.                            
  1695.                             <li>
  1696.                                 <a href="#">Dropdown Title</a>
  1697.                                 <ul class="submenu noneStyle">
  1698.                                     <li><a href="#">Link 1</a></li>
  1699.                                     <li><a href="#">Link 2</a></li>
  1700.                                 </ul>
  1701.                             </li>
  1702.                            
  1703.                             --
  1704.                            
  1705.                             If your dropdown title is NOT a link:
  1706.                            
  1707.                             <li>
  1708.                                 <span>Dropdown Title</span>
  1709.                                 <ul class="submenu noneStyle">
  1710.                                     <li><a href="#">Link 1</a></li>
  1711.                                     <li><a href="#">Link 2</a></li>
  1712.                                 </ul>
  1713.                             </li>
  1714.                            
  1715.                             -->
  1716.                         </ul>
  1717.                     </div>
  1718.                 </div>
  1719.             </nav>
  1720.             {block:ifShowBanner}<div class="banner {block:HomePage}page-{CurrentPage}{/block:HomePage}">
  1721.                 <div class="banner-img home-banner imgFill">
  1722.                     <img src="{image:Home Banner}" alt="" />
  1723.                 </div>
  1724.                 <div class="banner-img page-banner imgFill">
  1725.                     <img src="{image:Page Banner}" alt="" />
  1726.                 </div>
  1727.                 {block:ifShowBannerText}<div class="banner-text container">
  1728.                     <h1 class="title">{block:ifnotBannerTitle}{Title}{/block:ifnotBannerTitle}{block:ifBannerTitle}{text:Banner Title}{/block:ifBannerTitle}</h1>
  1729.                     <span class="subtitle">{block:ifnotBannerSubtitle}{Name}.tumblr.com{/block:ifnotBannerSubtitle}{block:ifBannerSubtitle}{text:Banner Subtitle}{/block:ifBannerSubtitle}</span>
  1730.                     <!-- start of banner links -->
  1731.                     <ul class="links noneStyle">
  1732.                         <li>
  1733.                             <a href="https://www.instagram.com/ashesbear/" title="Instagram">
  1734.                                 <i data-feather="instagram"></i>
  1735.                             </a>
  1736.                         </li>
  1737.                         <li>
  1738.                             <a href="https://sherasaidgaywrites.tumblr.com/" title="Fanfic">
  1739.                                 <i data-feather="pen-tool"></i>
  1740.                             </a>
  1741.                         </li>
  1742.                         <li>
  1743.                             <a href="https://catradora-kiss.tumblr.com/tagged/ashes-blabs" title="Ramblings">
  1744.                            
  1745.                                 <i data-feather="message-circle"></i>
  1746.                             </a>
  1747.                         </li>
  1748.                     </ul>
  1749.                     <!-- end of banner links -->
  1750.                            
  1751.             </div>{block:ifShowBanner}
  1752.         </header>
  1753.         <main id="main">
  1754.             <div class="container clearfix">
  1755.                 <div class="sidebar sidebar-{select:Sidebar Width}">
  1756.                     <div class="sidebar-inner">
  1757.  
  1758.                         <div class="section">
  1759.                             <div class="section-head">
  1760.                                 <div class="icon"><i data-feather="home"></i></div>
  1761.                                 <h3 class="title">Intro</h3>
  1762.                             </div>
  1763.                             <div class="section-content intro">
  1764.                                 {block:ifSidebarIntroImage}<div class="intro-img">
  1765.                                     <img src="{image:Sidebar Intro}" alt="" />
  1766.                                 </div>{/block:ifSidebarIntroImage}
  1767.                                 {block:Description}<div class="intro-text post-style">
  1768.                                     {Description}
  1769.                                 </div>{/block:Description}
  1770.                             </div><!-- //section-content -->
  1771.                         </div><!-- //section -->
  1772.  
  1773.                         <div class="section">
  1774.                             <div class="section-head">
  1775.                                 <div class="icon"><i data-feather="heart"></i></div>
  1776.                                 <h3 class="title">Mutuals</h3>
  1777.                             </div>
  1778.                             <div class="section-content sidelinks">
  1779.                                 <ul class="list noneStyle">
  1780.                                     <li>
  1781.                                         <a href="https://aboveowl-books.tumblr.com/">
  1782.                                             <i data-feather="user"></i>@aboveowl-books
  1783.                                         </a>
  1784.                                     </li>
  1785.                                     <li>
  1786.                                         <a href="https://that1impala.tumblr.com">
  1787.                                             <i data-feather="user"></i>@that1impala
  1788.                                         </a>
  1789.                                     </li>
  1790.                                      <li>
  1791.                                         <a href="https://gwcouldclapmycheeks.tumblr.com">
  1792.                                             <i data-feather="user"></i>@gwcouldclapmycheeks
  1793.                                         </a>
  1794.                                     </li>
  1795.                                      <li>
  1796.                                         <a href="https://something-facetious.tumblr.com">
  1797.                                             <i data-feather="user"></i>@something-facetious
  1798.                                         </a>
  1799.                                     </li>
  1800.                                                                          <li>
  1801.                                         <a href="https://justtowatchitglow.tumblr.com">
  1802.                                             <i data-feather="user"></i>@justtowatchitglow
  1803.                                         </a>
  1804.                                     </li>
  1805.                                 </ul>
  1806.                                 <!-- end of list links -->
  1807.                             </div><!-- //section-content -->
  1808.                         </div><!-- //section -->
  1809.  
  1810.                         <div class="section">
  1811.                             <div class="section-head">
  1812.                                 <div class="icon"><i data-feather="calendar"></i></div>
  1813.                                 <h3 class="title">Events</h3>
  1814.                             </div>
  1815.                             <div class="section-content events">
  1816.                                 <!-- start of an event -->
  1817.                                 <ul class="event noneStyle">
  1818.                                     <li>
  1819.                                         <div class="event-date">
  1820.                                             <span class="month">april 2018</span>
  1821.                                             <span class="day">17<sub>th</sub></span>
  1822.                                         </div>
  1823.                                     </li>
  1824.                                     <li>
  1825.                                         <div class="event-info">
  1826.                                             <span class="title">Anniversary</span>
  1827.                                             <span class="detail">The day I started dating @aboveowl-books</span>
  1828.                                         </div>
  1829.                                     </li>
  1830.                                 </ul>
  1831.                                  <ul class="event noneStyle">
  1832.                                     <li>
  1833.                                         <div class="event-date">
  1834.                                             <span class="month">april 2019</span>
  1835.                                             <span class="day">26<sub>th</sub></span>
  1836.                                         </div>
  1837.                                     </li>
  1838.                                     <li>
  1839.                                         <div class="event-info">
  1840.                                             <span class="title">She-ra S2</span>
  1841.                                             <span class="detail">Season Two of She-ra: Princesses of Power! (Also lesbian visibility day)</span>
  1842.                                         </div>
  1843.                                     </li>
  1844.                                 </ul>
  1845.                                 <!-- end of an event -->
  1846.  
  1847.  
  1848.                             </div><!-- //section-content -->
  1849.                         </div><!-- //section -->
  1850.  
  1851.                         <div class="section">
  1852.                             <div class="section-head">
  1853.                                 <div class="icon"><i data-feather="info"></i></div>
  1854.                                 <h3 class="title">Site info</h3>
  1855.                             </div>
  1856.                             <div class="section-content siteinfo">
  1857.                                 <dl>
  1858.                                     <dt>Joined</dt>
  1859.                                     <dd>04/30/2016</dd>
  1860.                                     <dt>theme by</dt>
  1861.                                     <dd><a href="https://shudesigns.tumblr.com" target="_blank">ShuDesigns</a></dd>
  1862.                                 </dl>
  1863.                             </div><!-- //section-content -->
  1864.                         </div><!-- //section -->
  1865.                        
  1866.                     </div><!-- //sidebar-inner -->
  1867.                 </div><!-- //sidebar -->
  1868.                 <div class="primary primary-{select:Post Width}">
  1869.                     <div class="posts">
  1870.                         {block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
  1871.                         <article class="post wow fadeInUp">
  1872.                             {block:Date}<div class="post-head">
  1873.                                 <ul class="noneStyle left">
  1874.                                     <li class="date">
  1875.                                         <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/">
  1876.                                             <i data-feather="calendar"></i> {ShortMonth} {DayOfMonthWithZero} {Year}
  1877.                                         </a>
  1878.                                     </li>
  1879.                                     <li class="time"><i data-feather="clock"></i>{12HourWithZero}:{Minutes} {CapitalAmPm}</li>
  1880.                                 </ul>
  1881.                                 {block:RebloggedFrom} <ul class="noneStyle right">
  1882.                                     <li class="source">
  1883.                                         <a href="{ReblogRootURL}" target="_blank" title="Source">
  1884.                                             <img src="{ReblogRootPortraitURL-48}" alt="" />
  1885.                                         </a>
  1886.                                        </li>
  1887.                                     <li class="via">
  1888.                                         <a href="{ReblogParentURL}" target="_blank" title="From">
  1889.                                             <img src="{ReblogParentPortraitURL-48}" alt="" />
  1890.                                         </a>
  1891.                                     </li>
  1892.                                 </ul>{/block:RebloggedFrom}
  1893.                             </div><!-- //post-head -->{/block:Date}
  1894.                             <div class="post-content">
  1895.                            
  1896.                                 {block:Text}
  1897.                                 <div class="post-container">
  1898.                                     {block:Title}
  1899.                                     <div class="post-title">
  1900.                                         <h1 class="title">{Title}</h1>
  1901.                                     </div>
  1902.                                     {/block:Title}
  1903.                                     <div class="post-body post-style">
  1904.                                         {block:NotReblog}
  1905.                                         <div class="caption">
  1906.                                             {block:AskPage}{/block:AskPage}
  1907.                                             {Body}
  1908.                                         </div>
  1909.                                         {/block:NotReblog}
  1910.                                         {block:RebloggedFrom}{block:Reblogs}
  1911.                                         <div class="caption">
  1912.                                             <div class="reblog-head">
  1913.                                                 <div class="reblog-avatar">
  1914.                                                     {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1915.                                                     {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1916.                                                 </div>
  1917.                                                 {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1918.                                                 {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1919.                                             </div>
  1920.                                             <div class="reblog-content">{Body}</div>
  1921.                                         </div>
  1922.                                         {/block:Reblogs}{/block:RebloggedFrom}
  1923.                                     </div><!-- //post-body -->
  1924.                                 </div><!-- //post-container -->
  1925.                                 {/block:Text}
  1926.                                
  1927.                                 {block:Photo}
  1928.                                 <div class="post-media">
  1929.                                     {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%" style="display:block;" />{LinkCloseTag}
  1930.                                 </div><!-- //post-media -->
  1931.                                 {block:Caption}
  1932.                                 <div class="post-container">
  1933.                                     <div class="post-body post-style">
  1934.                                         {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1935.                                         {block:RebloggedFrom}{block:Reblogs}
  1936.                                         <div class="caption">
  1937.                                             <div class="reblog-head">
  1938.                                                 <div class="reblog-avatar">
  1939.                                                     {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1940.                                                     {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1941.                                                 </div>
  1942.                                                 {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1943.                                                 {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1944.                                             </div>
  1945.                                             <div class="reblog-content">{Body}</div>
  1946.                                         </div>
  1947.                                         {/block:Reblogs}{/block:RebloggedFrom}
  1948.                                     </div><!-- //post-body -->
  1949.                                 </div><!-- //post-container -->
  1950.                                 {/block:Caption}
  1951.                                 {/block:Photo}
  1952.                                
  1953.                                 {block:Photoset}
  1954.                                 <div class="post-media">
  1955.                                     <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1956.                                         {block:Photos}
  1957.                                         <div class="photo-data">
  1958.                                             <div class="pxu-photo">
  1959.                                                 <img src="{PhotoURL-HighRes}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" />
  1960.                                             </div><!-- //pxu-photo -->
  1961.                                             <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1962.                                         </div><!-- //photo-data -->
  1963.                                         {/block:Photos}
  1964.                                     </div><!-- //photo-slideshow-->
  1965.                                 </div><!-- //post-media -->
  1966.                                 {block:Caption}
  1967.                                 <div class="post-container">
  1968.                                     <div class="post-body post-style">
  1969.                                         {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1970.                                         {block:RebloggedFrom}{block:Reblogs}
  1971.                                         <div class="caption">
  1972.                                             <div class="reblog-head">
  1973.                                                 <div class="reblog-avatar">
  1974.                                                     {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1975.                                                     {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1976.                                                 </div>
  1977.                                                 {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1978.                                                 {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1979.                                             </div>
  1980.                                             <div class="reblog-content">{Body}</div>
  1981.                                         </div>
  1982.                                         {/block:Reblogs}{/block:RebloggedFrom}
  1983.                                     </div><!-- //post-body -->
  1984.                                 </div><!-- //post-container -->
  1985.                                 {/block:Caption}
  1986.                                 {block:Hidden}{block:ContentSource}
  1987.                                 {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  1988.                                 {/block:ContentSource}{/block:Hidden}
  1989.                                 {/block:Photoset}
  1990.                                
  1991.                                 {block:Video}
  1992.                                 <div class="post-media">
  1993.                                     <div class="video" style="margin-bottom:-5px;">{Video-500}</div>
  1994.                                 </div><!-- //post-media -->
  1995.                                 {block:Caption}
  1996.                                 <div class="post-container">
  1997.                                     <div class="post-body post-style">
  1998.                                         {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  1999.                                         {block:RebloggedFrom}{block:Reblogs}
  2000.                                         <div class="caption">
  2001.                                             <div class="reblog-head">
  2002.                                                 <div class="reblog-avatar">
  2003.                                                     {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2004.                                                     {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2005.                                                 </div>
  2006.                                                 {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2007.                                                 {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2008.                                             </div>
  2009.                                             <div class="reblog-content">{Body}</div>
  2010.                                         </div>
  2011.                                         {/block:Reblogs}{/block:RebloggedFrom}
  2012.                                     </div><!-- //post-body -->
  2013.                                 </div><!-- //post-container -->
  2014.                                 {/block:Caption}
  2015.                                 {/block:Video}
  2016.                                
  2017.                                 {block:Audio}
  2018.                                 <div class="post-media">
  2019.                                     <div class="width_fix">{AudioEmbed-500}</div>
  2020.                                 </div><!-- //post-media -->
  2021.                                 {block:Caption}
  2022.                                 <div class="post-container">
  2023.                                     <div class="post-body post-style">
  2024.                                         {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  2025.                                         {block:RebloggedFrom}{block:Reblogs}
  2026.                                         <div class="caption">
  2027.                                             <div class="reblog-head">
  2028.                                                 <div class="reblog-avatar">
  2029.                                                     {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2030.                                                     {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2031.                                                 </div>
  2032.                                                 {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2033.                                                 {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2034.                                             </div>
  2035.                                             <div class="reblog-content">{Body}</div>
  2036.                                         </div>
  2037.                                         {/block:Reblogs}{/block:RebloggedFrom}
  2038.                                     </div><!-- //post-body -->
  2039.                                 </div><!-- //post-container -->
  2040.                                 {/block:Caption}
  2041.                                 {/block:Audio}
  2042.                                
  2043.                                 {block:Link}
  2044.                                 <div class="post-media">
  2045.                                     <a href="{Url}" target="_blank" class="link-button">
  2046.                                         {block:Thumbnail}<div class="thumbnail"><img src="{Thumbnail}" width="100%" /></div>{/block:Thumbnail}
  2047.                                         <div class="info-container">
  2048.                                             {block:Host}<div class="publisher-container {block:Thumbnail}if-thumbnail{/block:Thumbnail}">
  2049.                                                 <div class="publisher">{Host}</div>
  2050.                                             </div>{/block:Host}
  2051.                                             <div class="title">{Name}</div>
  2052.                                             {block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt}
  2053.                                             {block:Author}<div class="author">{Author}</div>{/block:Author}
  2054.                                         </div>
  2055.                                     </a>
  2056.                                 </div><!-- //post-media -->
  2057.                                 {block:Description}
  2058.                                 <div class="post-container">
  2059.                                     <div class="post-body post-style">
  2060.                                         {block:NotReblog}<div class="caption">{Description}</div>{/block:NotReblog}
  2061.                                         {block:RebloggedFrom}{block:Reblogs}
  2062.                                         <div class="caption">
  2063.                                             <div class="reblog-head">
  2064.                                                 <div class="reblog-avatar">
  2065.                                                     {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2066.                                                     {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2067.                                                 </div>
  2068.                                                 {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2069.                                                 {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2070.                                             </div>
  2071.                                             <div class="reblog-content">{Body}</div>
  2072.                                         </div>
  2073.                                         {/block:Reblogs}{/block:RebloggedFrom}
  2074.                                     </div><!-- //post-body -->
  2075.                                 </div><!-- //post-container -->
  2076.                                 {/block:Description}
  2077.                                 {/block:Link}
  2078.                                
  2079.                                 {block:Quote}
  2080.                                 <div class="post-container">
  2081.                                     <div class="post-title">
  2082.                                         <span class="quote">{Quote}</span>
  2083.                                     </div><!-- //post-title -->
  2084.                                     {block:Source}
  2085.                                     <div class="post-body post-style">
  2086.                                         <div class="caption">
  2087.                                             <p class="quote-source">{Source}</p>
  2088.                                         </div>
  2089.                                     </div><!-- //post-body -->
  2090.                                     {/block:Source}
  2091.                                 </div><!-- //post-container -->
  2092.                                 {/block:Quote}
  2093.                                
  2094.                                 {block:Chat}
  2095.                                 <div class="post-container">
  2096.                                     {block:Title}
  2097.                                     <div class="post-title">
  2098.                                         <h1 class="title">{Title}</h1>
  2099.                                     </div>
  2100.                                     {/block:Title}
  2101.                                     <div class="post-body post-style">
  2102.                                         <ul class="noneStyle chat">
  2103.                                             {block:Lines}<li class="user_{UserNumber}">
  2104.                                                 {block:Label}<span class="label">{Label}</span>{/block:Label}
  2105.                                                 <span class="line">{Line}</span>
  2106.                                             </li>{/block:Lines}
  2107.                                         </ul>
  2108.                                     </div><!-- //post-body -->
  2109.                                 </div><!-- //post-container -->
  2110.                                 {/block:Chat}
  2111.                                
  2112.                                 {block:Answer}
  2113.                                 <div class="post-container">
  2114.                                     <div class="post-body post-style">
  2115.                                         <div class="ask">
  2116.                                             <div class="asker">
  2117.                                                 <div class="asker-avatar"><img src="{AskerPortraitURL-64}" alt="" /></div>
  2118.                                                 <div class="asker-name">{Asker}</div>
  2119.                                             </div>
  2120.                                             <div class="asker-question">{Question}</div>
  2121.                                         </div>
  2122.                                         {block:NotReblog}<div class="caption">{Replies}</div>{/block:NotReblog}
  2123.                                         {block:Answerer}
  2124.                                         <div class="answer">
  2125.                                             <div class="answerer">
  2126.                                                 <div class="answerer-avatar"><img src="{AnswererPortraitURL-48}" alt="" /></div>
  2127.                                                 <div class="answerer-name">{Answerer}</div>
  2128.                                             </div>
  2129.                                             <div class="answerer-answer">{Answer}</div>
  2130.                                         </div>
  2131.                                         {/block:Answerer}
  2132.                                         {block:RebloggedFrom}{block:Reblogs}
  2133.                                         <div class="caption">
  2134.                                             <div class="reblog-head">
  2135.                                                 <div class="reblog-avatar">
  2136.                                                     {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  2137.                                                     {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  2138.                                                 </div>
  2139.                                                 {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  2140.                                                 {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  2141.                                             </div>
  2142.                                             <div class="reblog-content">{Body}</div>
  2143.                                         </div>
  2144.                                         {/block:Reblogs}{/block:RebloggedFrom}
  2145.                                     </div><!-- //post-body -->
  2146.                                 </div><!-- //post-container -->
  2147.                                 {/block:Answer}
  2148.                                
  2149.                             </div><!-- //post-content -->
  2150.                             {block:Date}<div class="post-foot">
  2151.                                 {block:HasTags}<div class="top">
  2152.                                     <ul class="noneStyle">
  2153.                                         {block:Tags}<li><a href="{TagUrl}">#{Tag}</a></li>{/block:Tags}
  2154.                                     </ul>
  2155.                                 </div>{/block:HasTags}
  2156.                                 <div class="bottom">
  2157.                                     <div class="left">
  2158.                                         {block:NoteCount}<a href="{Permalink}" class="notes note-{NoteCount}">{NoteCount}</a>{/block:NoteCount}
  2159.                                     </div>
  2160.                                     <ul class="noneStyle right">
  2161.                                         <li class="reblog">
  2162.                                             <a href="{ReblogURL}"><i data-feather="refresh-cw"></i></a>
  2163.                                         </li>
  2164.                                         <li class="like">
  2165.                                             {LikeButton size="24" color="black"}
  2166.                                             <span class="custom-like"><i data-feather="heart"></i></span>
  2167.                                         </li>
  2168.                                     </ul>
  2169.                                 </div><!-- //bottom -->
  2170.                             </div><!-- //post-foot -->{/block:Date}
  2171.                         </article>
  2172.                         {block:PostNotes}<div class="post-notes">{PostNotes}</div>{/block:PostNotes}
  2173.                         {/block:Posts}
  2174.                     </div><!-- //posts -->
  2175.                     {block:Pagination}<div class="pagination">
  2176.                         <div class="arrow prev {block:PreviousPage}active{/block:PreviousPage}">
  2177.                             <a href="{block:PreviousPage}{PreviousPage}{/block:PreviousPage}"><i data-feather="arrow-left"></i></a>
  2178.                         </div>
  2179.                         <ul class="noneStyle jump">
  2180.                             {block:JumpPagination length="10"}
  2181.                             {block:CurrentPage}<li class="current"><a href="{URL}">{PageNumber}</a></li>{/block:CurrentPage}
  2182.                             {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
  2183.                             {/block:JumpPagination}
  2184.                         </ul>
  2185.                         <div class="arrow next {block:NextPage}active{/block:NextPage}">
  2186.                             <a href="{block:NextPage}{NextPage}{/block:NextPage}"><i data-feather="arrow-right"></i></a>
  2187.                         </div>
  2188.                     </div>{/block:Pagination}
  2189.                 </div><!-- //primary -->
  2190.             </div><!-- //container -->
  2191.         </main>
  2192.         <footer id="footer">
  2193.             <div class="footer-inner container">© {CopyrightYears} <a href="#">{Name}</a> all rights reserved. Theme by <a href="https://shudesigns.tumblr.com/" target="_blank">ShuDesigns</a> • Powered by <a href="https://tumblr.com/" target="_blank">Tumblr</a>
  2194.         </footer>
  2195.     </div><!-- //wrapper -->
  2196.     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="0" height="0" style="display:block">
  2197.         <defs>
  2198.             <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%" gradientTransform="rotate(-45)" gradientUnits="userSpaceOnUse">
  2199.                 <stop offset="0%" stop-color="{color:Color One}" />
  2200.                 <stop offset="100%" stop-color="{color:Color Two}" />
  2201.             </linearGradient>
  2202.         </defs>
  2203.     </svg>
  2204.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  2205.     <script src="//unpkg.com/feather-icons"></script>
  2206.     <script src="https://static.tumblr.com/ickcbh2/XHXpmk6si/browser.js"></script>
  2207.     <script src="https://static.tumblr.com/ickcbh2/uaspn5sdc/plugins.js"></script>
  2208.     <script src="https://static.tumblr.com/a0dmjhi/MGlp5b8wd/pxuphotoset.min.js"></script>
  2209.     <script src="https://static.tumblr.com/ickcbh2/kjJpn8amj/main.min.js"></script>
  2210.     <script>
  2211.         (function($) {
  2212.             // photoset
  2213.             var $window = $(window),
  2214.                 $photoset = $('.photo-slideshow');
  2215.             $photoset.pxuPhotoset({
  2216.                 lightbox: true,
  2217.                 gutter: '4px',
  2218.                 borderRadius: '0px',        
  2219.                 photoset: '.photo-slideshow',
  2220.                 photoWrap: '.photo-data',
  2221.                 photo: '.pxu-photo'      
  2222.             });
  2223.             // audio player
  2224.             var $audio = $('iframe.tumblr_audio_player');
  2225.             $audio.load(function() {
  2226.                 $(this).contents().find('head').append('<style type="text/css">' +
  2227.                     '.audio-player{ background-image: linear-gradient(135deg, {color:Color One}, {color:Color Two}); color: {color:Banner Text Color} !important; }' +
  2228.                     '.audio-player .audio-info .track-artist { color: {color:Banner Text Color} !important; }' +
  2229.                 '</style>');
  2230.             });
  2231.         })(jQuery);
  2232.     </script>
  2233.  
  2234. </body>
  2235. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top