API tools faq
paste
BOOdalinski

BOOdalinski Theme (Tumblr Optica Theme Revamp)

BOOdalinski
Apr 1st, 2019
189
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 49.89 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2.  
  3.                BOODALINKSI by BOOdalinksi  
  4.  
  5. CREDIT: True credit goes to the developers of Tumblr's Optica theme, as this is more of a revamp.                                                  
  6. ------------------------------------------------------------------------>
  7.  
  8. <!DOCTYPE html>
  9. <!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
  10. <!--[if IE 9]><html class="lt-ie10"> <![endif]-->
  11. <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
  12.     <head>
  13.     <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  14.     <script src="https://kit.fontawesome.com/2ed3465afc.js"></script>
  15.     <link href="https://static.tumblr.com/z7gkkl2/FeDpt9qt9/stylesheet.css" rel="stylesheet">
  16.     <link href="https://fonts.googleapis.com/css?family={text:Body Font}:300,300i,400,400i,500,500i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,hebrew,latin-ext,vietnamese" rel="stylesheet">
  17.     <link href="https://fonts.googleapis.com/css?family={text:Header Font}:300,300i,400,400i,500,500i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,hebrew,latin-ext,vietnamese" rel="stylesheet">
  18.     <link href="https://fonts.googleapis.com/css?family={text:Nav Font}:300,300i,400,400i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,hebrew,latin-ext,vietnamese" rel="stylesheet">
  19.         {MobileAppHeaders}
  20.         <meta charset="utf-8">
  21.         <title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
  22.         {block:Description}
  23.         <meta name="description" content="{MetaDescription}">
  24.         {/block:Description}
  25.  
  26.         {block:Hidden}
  27.         <meta name="if:Sliding header" content="">
  28.         <meta name="if:Show navigation" content="">
  29.         <meta name="if:Endless scrolling" content="">
  30.         <meta name="if:Syntax highlighting" content="">
  31.         <meta name="select:Layout" content="regular" title="Regular">
  32.         <meta name="select:Layout" content="narrow" title="Minimal">
  33.         <meta name="select:Layout" content="wide" title="Wide">
  34.         <meta name="select:Layout" content="grid" title="Grid">
  35.         <meta name="text:Disqus shortname" content="">
  36.         <meta name="text:Google analytics ID" content="">
  37.         {/block:Hidden}
  38.  
  39.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  40.         <meta name="theme-color" content="#35465D">
  41.         <link rel="shortcut icon" href="{Favicon}">
  42.         <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  43.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  44.         <link rel="stylesheet" href="https://static.tumblr.com/mftixld/AmMpjzwer/main-min.css">
  45.         {block:IfSyntaxHighlighting}
  46.         <link rel="stylesheet" href="https://static.tumblr.com/ehm1tdz/2VWnye81h/tumblr-highlightjs.css">
  47.         {/block:IfSyntaxHighlighting}
  48.         {PostTypographyStyles}
  49.  
  50.         <!-- HTML5 Shiv -->
  51.         <!--[if lt IE 9]>
  52.            <script src="https://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  53.        <![endif]-->
  54.  
  55. <!-- DEFAULT COLORS -->
  56.         <meta name="color:Accent" content="#703d00"/>
  57.         <meta name="color:Content Background" content="#fff"/>
  58.         <meta name="color:Link Hover" content="#c16e0b"/>
  59.         <meta name="color:Text" content="#66635d"/>
  60.         <meta name="color:Bold" content="#333333"/>
  61.         <meta name="color:Answer Posts" content="#C69050"/>
  62.        
  63.         <meta name="text:Header Size" content="auto"/>
  64.        
  65.         <meta name="text:Body Font" content="Spectral"/>
  66.         <meta name="text:Header Font" content="Lato"/>
  67.         <meta name="text:Nav Font" content="Spectral"/>
  68.         <meta name="select:Body Font Size" content="15px" title="15px"/>
  69.         <meta name="select:Body Font Size" content="12px" title="12px"/>
  70.         <meta name="select:Body Font Size" content="14px" title="14px"/>
  71.         <meta name="select:Body Font Size" content="16px" title="16px"/>
  72.  
  73. <meta name="select:Post Shadow" content="0 1px 2px #00000010" title="Subtle"/>
  74. <meta name="select:Post Shadow" content="none" title="No Shadow"/>
  75. <meta name="select:Post Shadow" content="0 1px 2px rgba(0,0,0,0.15);" title="Slight" />
  76. <meta name="select:Post Shadow" content="rgba(0, 0, 0, .15) 0 1px 3px;" title="Bold" />
  77. <meta name="select:Post Shadow" content="0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)" title="Levitate 1" />
  78. <meta name="select:Post Shadow" content="0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)" title="Levitate 2" />
  79. <meta name="select:Post Shadow" content="0 0.125em 0.313em rgba(50,50,93,.09), 0 0.063em 0.125em rgba(0,0,0,.07)" title="Float 1" />
  80. <meta name="select:Post Shadow" content="0 0.250em 0.375em rgba(50,50,93,.09), 0 0.063em 0.188em rgba(0,0,0,.08)" title="Float 2" />
  81.  
  82.         <style>
  83.  
  84. /*-----------------------------------------------------------NAVBAR----*/
  85.  
  86. #navbar {transition: top 0.3s;}
  87. .nav-fixed {background-color:{BackgroundColor};} /* Sticky nav colors */
  88. .nav-item,.label{padding:0 .5em 0 .5em;transition:all 300ms ease-in-out;}
  89. .nav-item:hover .label:hover {color:{color:Link Hover};}
  90. .nav-wrapper .nav-item .label {
  91.     color: {color:Accent};
  92.     font-weight:400;
  93.     display:inline-block;
  94.     font-size:calc({select:Body Font Size} - 20%);
  95.     letter-spacing:.5px;
  96.     text-transform:none;
  97.     font-style:italic;
  98.     font-family:{text:Nav Font}, Helvetica Neue, sans-serif;
  99.     transition: all 300ms ease-in-out;
  100.     }    
  101. .nav-wrapper .nav-item .label.current-page {
  102.     padding-bottom:0px;
  103.     background:white;
  104.     border:none;
  105.     border-radius:3px;
  106.     color:{TitleColor};
  107.     box-shadow: 0 1px 2px #00000010;}
  108. .nav-wrapper {border-bottom:0.5px solid white;}
  109. .description {font-size:0.7em;color:{TitleColor}90;}
  110. .blog-title, .blog-title a {
  111.     font-size:30px;
  112.     font-weight:700;
  113.     text-transform:uppercase;
  114.     letter-spacing: 5px;
  115.     color:{TitleColor};
  116.     transition: all 300ms ease-in-out;
  117.     }
  118.    
  119. /*------------------------------------------------------MAIN LAYOUT----*/
  120. li + ul {list-style-type:none;}
  121. li + ul li:before {content:'•';padding:.5em;color:{color:Bold};}
  122. body {
  123.     font-family:{text:Body Font}, Helvetica Neue, sans-serif;
  124.     font-size:{select:Body Font Size};
  125.     line-height:160%;
  126.     color:{color:Text};
  127.     background:{BackgroundColor};
  128.     text-rendering: optimizeLegibility;
  129.     }
  130. .post-wrapper {background:transparent;border:none;padding:0px;}  
  131. .post {padding:1em;}
  132. .post-content {padding:0px;margin-top:0;}
  133. article {
  134.     background:{color:Content Background};
  135.     border:{color:Content Background};
  136.     padding:0px;
  137.     border-radius:8px;
  138.     box-shadow:{select:Post Shadow};
  139.     }
  140.  
  141. .tagged-page {text-align:center;color:{TitleColor};margin-bottom:2em;}
  142.  
  143. /*----SCROLL TO TOP----*/    
  144. #totop {
  145.     z-index:900;
  146.     cursor:pointer;
  147.     padding:5px 9.5px;
  148.     bottom:20px;
  149.     left:20px;
  150.     font-size:10px;
  151.     font-weight:300;
  152.     text-align:center;
  153.     position:fixed;
  154.     display:none;
  155.     text-decoration:none;
  156.     overflow:hidden;
  157.     border:none;
  158.     border-radius:3px;
  159.     color:{color:Accent};
  160.     }
  161.    
  162. /*------------------------------------------------------------POSTS----*/
  163.  
  164. /*----TITLES and HEADERS----*/
  165. .post-wrapper a {text-decoration:none;}
  166. .post-wrapper h1, .post-wrapper h2 {font-size: 1.2em;font-weight:700;color:{TitleColor};}
  167. .post-wrapper h1.title {font-size: 1.5em;}
  168. .post-wrapper h1.title, .post-wrapper h2.title {
  169.     font-weight: bold;
  170.     color:{TitleColor};
  171.     text-align:center;
  172.     margin-top:.9em;
  173.     line-height:140%;
  174.     padding-bottom:.7em;
  175.     margin-bottom:-.5em;
  176.     border-bottom:1px solid {BackgroundColor};
  177.     width:auto;
  178.     transition: all 300ms ease-in-out;
  179.     }  
  180. .post-wrapper a.title-link {padding-left:4px;padding-right:4px;}
  181. .post-wrapper h1.title, .post-wrapper h2.title,
  182. .post-wrapper h1, .post-wrapper h2,
  183. .blog-title, .blog-title a, .description {
  184.     font-family: {text:Header Font}, Helvetica Neue, sans-serif;}
  185.  
  186. /*----LINKS----*/
  187. a {color:{AccentColor};transition: all 300ms ease-in-out;}
  188. a:hover {color:{color:Link Hover};}    
  189. p a {font-weight:normal;transition: all 300ms ease-in-out;}
  190. p a:hover{color:{color:Link Hover};}
  191. .post-content a:hover {color: {color:Link Hover};}
  192. .post-content a {
  193.     color:{TitleColor};
  194.     text-decoration: none;
  195.     transition: all 300ms ease-in-out;}
  196.  
  197. a.read_more, a.special-link, .special-link {
  198.     color:{TitleColor};
  199.     font-family:{text:Header Font}, Helvetica Neue, arial, sans-serif;
  200.     text-transform:uppercase;
  201.     background:white;
  202.     text-align:center;
  203.     letter-spacing:1.5px;
  204.     font-size:calc({select:Body Font Size} - 20%);
  205.     font-weight:500;
  206.     text-decoration:none;
  207.     padding:5px;
  208.     border:.5px solid {TitleColor};
  209.     border-radius:3px;
  210.     transition: all 300ms ease-in-out;
  211.     box-shadow: 0 1px 2px #00000010;
  212.     }
  213.  
  214. .read_more_container, .special-link-container {text-align:center;}
  215. a.read_more:hover, a.special-link:hover {
  216.     color:{color:Link Hover};
  217.     border:.5px solid {color:Link Hover};
  218.     }    
  219.  
  220. /*----LISTS----*/
  221. hr {width:100%;border-top:1px solid {BackgroundColor};}
  222. ul, menu, dir {list-style-type: circle;}
  223.  
  224. /*----TEXT----*/
  225. small {font-size:12px;line-height:140%;}
  226. b, strong {color: {color:Bold};font-weight:600;}
  227. h2 b, h2 strong {color:#000000;}  
  228.  
  229. /*----BLOCKQUOTES----*/
  230. blockquote:first-child {margin-top:0em;}
  231. blockquote b, blockquote strong {color:{color:Text};}  
  232. .post-content blockquote {
  233.     border-left:1px solid {color:Text}20;
  234.     padding-left:1em;
  235.     margin-left:2em;
  236.     color:{color:Text}90;
  237.     }
  238. code:not(blockquote code) {
  239.     font-family:Source Code Pro}
  240. blockquote code {font-family:Source Code Pro, monospace;font-size:0.8em;}
  241. .caption small {font-size:80%}        
  242. .caption blockquote code {
  243.     font-family:Source Code Pro, Consolas, monospace;
  244.     font-size:0.8em;
  245.     }    
  246.  
  247. /*-------------------------------------------------------POST TYPES----*/
  248.  
  249. /*----Q/A----*/
  250. .note-item .text .answerer,
  251. .note-item .text .asker {color:{color:Bold};font-style:italic;}
  252. .note-item .text:after {display:none;}
  253. .note-item .avatar img {
  254.     border-radius:2em;
  255.     padding:2px;
  256.     border: 1px solid {color:Answer Posts}30;
  257.     }
  258. .note-item .text {
  259.     background:{color:Answer Posts}15;
  260.     border: 1px solid {color:Answer Posts}20;
  261.     font-size:{select:Body Font Size};
  262.     color:{color:Answer Posts};
  263.     border-radius:2em .5em;
  264.     font-weight:300;
  265.     font-size:12px;
  266.     line-height:150%;
  267.     }
  268.    
  269. /*----CHAT----*/
  270. .conversation .chat {font-family:{text:Body Font};margin-bottom:8px;}
  271. .conversation .label {
  272.     color:{color:Bold};
  273.     font-family:{text:Header Font};
  274.     font-size:calc({select:Body Font Size} - 20%);
  275.     font-weight:700;
  276.     text-transform:uppercase;
  277.     letter-spacing:1.25px;
  278.     }    
  279.  
  280. /*----QUOTES----*/
  281. .quote .source {margin-top:10px;position:relative;font-size:calc({select:Body Font Size} - 20%);text-align:right;}
  282. .quote .source:before {content: "";display:none;}
  283. .quote .post-content blockquote:before {letter-spacing:1px;}
  284. .quote .post-content blockquote:after {margin-left:0;letter-spacing:1px;}
  285. .quote .post-content blockquote {
  286.     color:{color:Bold};
  287.     border:none;
  288.     font-family:{text:Header Font}, Helvetica Neue, sans-serif;
  289.     font-size:calc({select:Body Font Size} + 150%);
  290.     font-weight:bold;
  291.     line-height:160%;
  292.     margin:0;
  293.     padding:0 5px 0 0;
  294.     quotes: "“" "”" "‘" "’";
  295.     word-break:break-word;
  296.     }
  297.  
  298. /*------------------------------------------------------POST FOOTER----*/
  299. footer.post-footer {max-width:100%;}
  300. .post-extra {
  301.     font-family:{text:Body Font};
  302.     font-size: calc({select:Body Font Size} - 33.333%);
  303.     width:auto;
  304.     line-height:130%;
  305.     }
  306.  
  307. /*----SHARE POPUP MENU----*/
  308. a.share-item .label {width:75%;display:inline-block}
  309. a.share-item .icon {max-width:10%;display:inline-block;font-size:0.9em;}
  310. a.share-item {display:inline-block}
  311. .pop-menu ul li a {padding: 6px 10px 6px 10px;}
  312. .pop-menu {
  313.     background:{color:Content Background};
  314.     border:{color:Content Background};
  315.     padding:0px;
  316.     border-radius:4px;
  317.     box-shadow:{select:Post Shadow};
  318.     margin-bottom:2%;}
  319.  
  320. /*----LIKE and REBLOG BUTTONS----*/
  321. .post-controls .control .like_button:hover,
  322. .post-controls .control .reblog_button:hover,
  323. .post-controls .control .share:hover {color: {color:Link Hover};}
  324. .reblog-link:hover:before {color:{TitleColor};}
  325. .post-controls {
  326.     -webkit-box-flex: 1;
  327.     -webkit-flex: auto;
  328.     -moz-box-flex: 1;
  329.     -ms-flex: auto;
  330.     flex: auto;
  331.     vertical-align: middle;
  332.     -webkit-box-pack: center;
  333.     -webkit-justify-content: center;
  334.     -moz-box-pack: center;
  335.     -ms-flex-pack: center;
  336.     justify-content: center;
  337.     -webkit-box-orient: vertical;
  338.     -webkit-flex-direction: column;
  339.     -moz-box-orient: vertical;
  340.     -ms-flex-direction: column;
  341.     flex-direction: column;
  342.     min-width: 150px;
  343.     color: {TitleColor};
  344.     }
  345.  
  346. /*----HIDE SPECIFIC TAGS ON INDEX PAGE----*/
  347. a.meta-item.tag-link[title~= x],
  348. a.meta-item.tag-link[title~=imagine],
  349. a.meta-item.tag-link[title~=imagines],
  350. a.meta-item.tag-link[title~=slasher] {
  351.     {block:IndexPage}display:none;{/block:IndexPage}}
  352.  
  353.  
  354. /*----TAGS----*/
  355. a.meta-item.tag-link{
  356.     color:{AccentColor};
  357.     padding: 0.3em 0.85em;
  358.     margin: 0.5em;
  359.     margin-bottom:0px;
  360.     text-transform:none;
  361.     border:1px solid {AccentColor}60;
  362.     border-radius: 2em;
  363.     transition: all 300ms ease-in-out;
  364.     }
  365. a.meta-item.tag-link:before {content:'';}    
  366. a.meta-item.tag-link:hover {
  367.     border-color:{color:Link Hover}60;
  368.     color: {color:Link Hover};}
  369. a.meta-item.post-notes:hover {color:{color:Link Hover};}
  370. a.meta-item.post-notes {
  371.     color:{TitleColor};
  372.     transition: all 300ms ease-in-out;}
  373.  
  374. /*----DATE NOTES----*/
  375. .date-note-wrapper {margin:auto;}
  376. .date-notes {
  377.     font-size:calc({select:Body Font Size} - 20%);
  378.     font-family:{text:Body Font}, Helvetica Neue, sans-serif;
  379.     transition: all 300ms ease-in-out;
  380.     }
  381.  
  382. /*----PERMALINK POST NOTES----*/
  383. .post-notes{font-family:{text:Body Font};color:{TitleColor};}
  384. .notes-wrapper .notes li {border:0px;}
  385. .notes-wrapper .notes {
  386.     background:{color:Content Background};
  387.     box-shadow:0px;
  388.     }
  389. .notes-wrapper {
  390.     position: static;
  391.     bottom: -45px;
  392.     background-color: #fff;
  393.     box-sizing: border-box;
  394.     border: 1px solid white;
  395.     border-radius: 3px;
  396.     width: 100%;
  397.     left: 65px;
  398.     box-shadow: 0 2px 7px 1px white;
  399.     }
  400.  
  401. /*-----------------------------------------------------------FOOTER----*/
  402.  
  403. /*----PAGINATION----*/
  404. {block:IfNotEndlessScrolling}
  405. .pagination {margin:5% 0 5% 0;text-align:center;}
  406. .pagination .lnr {font-size:10px;}
  407. .jump_page {color:{TitleColor};background-color:{BackgroundColor};}
  408. .jump_page, .current_page, .jump_page:hover {
  409.     font-family:{text:Header Font};
  410.     font-size:12px;
  411.     text-decoration:none;
  412.     border-radius:3px;
  413.     padding:6px 16px;
  414.     margin:0 2px;
  415.     }
  416. .current_page, .jump_page:hover {
  417.     color:{color:Link Hover};
  418.     background-color:{color:Link Hover}20;
  419.     }
  420. {/block:IfNotEndlessScrolling}    
  421. {block:IfEndlessScrolling}
  422. #pagination a:after {display:none;}
  423. #pagination a {
  424.     color:{AccentColor};
  425.     font-weight:700;
  426.     display:inline-block;
  427.     font-size:.8em;
  428.     letter-spacing:1px;
  429.     text-transform:uppercase;
  430.     font-style:normal;
  431.     font-family:{text:Body Font}, Helvetica Neue, sans-serif;
  432.     transition: all 300ms ease-in-out;
  433.     }
  434. {/block:IfEndlessScrolling}
  435. /*----LOADING ANIMATION----*/
  436. .loader .loader-bar {height:6px;width:6px;border-radius:100%;}
  437. .animate>.loader-bar {
  438.     display: inline-block;
  439.     -webkit-animation: load 1s infinite;
  440.     -moz-animation: load 1s infinite;
  441.     -o-animation: load 1s infinite;
  442.     animation: load 1s infinite;
  443.     animation-timing-function:ease-in-out;
  444.     }
  445. @-webkit-keyframes load {
  446.     0%   {background-color:{BackgroundColor};}
  447.     75% {background-color:black;}
  448.     100%   {background-color:{BackgroundColor};}}
  449. @-moz-keyframes load {
  450.     0%   {background-color:{BackgroundColor};}
  451.     75% {background-color:black;}
  452.     100%   {background-color:{BackgroundColor};}}
  453. @-o-keyframes load {
  454.     0%   {background-color:{BackgroundColor};}
  455.     75% {background-color:black;}
  456.     100%   {background-color:{BackgroundColor};}}
  457. @keyframes load {
  458.     0%   {background-color:{BackgroundColor};}
  459.     75% {background-color:black;}
  460.     100%   {background-color:{BackgroundColor};}}
  461.  
  462. /*----FOR TAGS PAGE----*/
  463.  
  464. p a.tag-all, p a.tag-media {
  465.     line-height:160%;
  466.     font-size:12px;
  467.     text-align:center;
  468.     border-radius: 3px;
  469.     text-transform:none;
  470.     margin-right: 0.5em;
  471.     margin-bottom:0px;
  472.     padding: 0.3em 0.85em;
  473.     transition: all 300ms ease-in-out;
  474.     }
  475. p a.tag-all {
  476.     color:{TitleColor};
  477.     background:{TitleColor}20;
  478.     border:1px solid {TitleColor}20;
  479.     }
  480. p a.tag-media {
  481.     color:{color:Text};
  482.     background:{color:Text}20;
  483.     border:1px solid {color:Text}20;
  484.     }    
  485. p a.tag-all:hover, p a.tag-media:hover {
  486.     background:#fff;
  487.     color:{color:Link Hover};
  488.     border-color:{color:Link Hover}60;
  489.     box-shadow: 0 1px 2px #00000010;
  490.     }
  491. h3.tags-h3 {
  492.     font-family:{text:Header Font};
  493.     letter-spacing:1px;
  494.     text-transform:uppercase;
  495.     color:#000;
  496.     font-size:12px;
  497.     }
  498.  
  499. /*--------------------------------------------------HEADER & AVATAR----*/
  500.  
  501. .header-image.cover {background-image: url({HeaderImage});}
  502. .user-avatar {
  503.     background-color: {BackgroundColor};
  504.     border-color: {BackgroundColor};
  505.     }
  506.  
  507. .avatar-style-square .user-avatar {
  508.     -webkit-box-shadow: 0 0 0 4px {BackgroundColor};
  509.     box-shadow: 0 0 0 4px {BackgroundColor};
  510.     }
  511.  
  512. .no-header-image .logo-wrapper,
  513. .contain-header-image .logo-wrapper {color: {AccentColor};}
  514.  
  515. /* Adjust logo for light accents on light backgrounds */
  516. .light-on-light.no-header-image .logo-wrapper,
  517. .light-on-light.contain-header-image .logo-wrapper {color: transparent;}
  518.  
  519. /* Adjust logo for dark accents on dark backgrounds */
  520. .dark-on-dark.no-header-image .logo-wrapper,
  521. .dark-on-dark.contain-header-image .logo-wrapper {color: transparent;}
  522.  
  523. @media screen and (max-device-width: 568px) {
  524. .header-image.cover {
  525.     background-image: url({HeaderImage-640});
  526.     -webkit-background-size: cover;
  527.     background-size: cover;}
  528.  
  529. .avatar-style-square .user-avatar {
  530.     -webkit-box-shadow: 0 0 0 3px {BackgroundColor};
  531.     -moz-box-shadow: 0 0 0 3px {BackgroundColor};
  532.     box-shadow: 0 0 0 3px {BackgroundColor};}
  533. }
  534.  
  535. /*-------------------------------------------------------CUSTOM CSS----*/
  536.  
  537. {CustomCSS}
  538.  
  539.  
  540.  
  541.  
  542.  
  543. /*---------------------------------------------------------------------*/
  544.  
  545.  
  546. </style>
  547.        
  548. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  549. <script type="text/javascript">
  550. $(document).ready(function(){
  551.    $('#ask_form').before('');
  552. });
  553. </script>
  554.        
  555. </head>
  556.  
  557. <body data-urlencoded-name="{URLEncodedName}" class="{select:Layout}{block:IndexPage} index-page{/block:IndexPage}{block:PermalinkPage} permalink{/block:PermalinkPage}{block:SearchPage} search-page{block:NoSearchResults} no-results{/block:NoSearchResults}{block:NoPosts} no-posts{/block:NoPosts}{/block:SearchPage}{block:HideHeaderImage} no-header-image{/block:HideHeaderImage}{block:NoStretchHeaderImage} contain-header-image{/block:NoStretchHeaderImage}">
  558. <div id="totop">back to top</div>
  559.  
  560. <section id="page">
  561. <div class="header-wrapper
  562.    {block:HideTitle}
  563.    {block:HideDescription}no-title-desc {/block:HideDescription}
  564.    {/block:HideTitle}
  565.    
  566.    {block:HideHeaderImage}no-image {/block:HideHeaderImage}
  567.    {block:HideAvatar}avatar-hidden{/block:HideAvatar}
  568.    {block:ShowAvatar}avatar-style-{AvatarShape}{/block:ShowAvatar}">
  569.  
  570. <header id="header" class="top-blog-header">
  571.     {block:ShowHeaderImage}
  572.     <div class="header-image-wrapper
  573.    {block:NoStretchHeaderImage}contain{/block:NoStretchHeaderImage}">
  574.    
  575.     <a href="/" class="header-image
  576.    {block:IfSlidingHeader}parallax{/block:IfSlidingHeader}
  577.    {block:StretchHeaderImage}cover{/block:StretchHeaderImage}
  578.    {block:NoStretchHeaderImage}contain{/block:NoStretchHeaderImage}"
  579.    data-bg-image="{HeaderImage}" style="background-image:url({HeaderImage});background-size:{text:Header Size};background-repeat:repeat;">{block:NoStretchHeaderImage}
  580.     <img src="{HeaderImage}" alt="">{/block:NoStretchHeaderImage}</a>
  581.    
  582.     <div class="loader-bg"></div>
  583. </div> <!-- header-wrapper -->
  584. {/block:ShowHeaderImage}
  585.  
  586. <div class="blog-title-wrapper content">
  587.         <figure class="avatar-wrapper{block:IndexPage} animate
  588.        {/block:IndexPage}">
  589.             <a href="/" style="background-image: url({PortraitURL-128})"
  590.            class="user-avatar">
  591.             <img src="{PortraitURL-128}" alt=""
  592.            class="print-only invisible"></a>
  593.         </figure>
  594.  
  595. <div class="title-group{block:IndexPage} animate{/block:IndexPage}">
  596.    
  597.     {block:ShowTitle}
  598.     <h1 class="blog-title"><a href="/">{Title}</a></h1>
  599.     {/block:ShowTitle}
  600.  
  601.     {block:ShowDescription}
  602.     <span class="description">{Description}</span>
  603.     {/block:ShowDescription}
  604.  
  605. </div> <!-- title-group -->
  606. </div> <!-- blog-title-wrapper-content -->
  607. </header> <!-- blog-top-header -->
  608. </div> <!-- header-wrapper -->
  609. <!--------------------------------------------------------NAVIGATION---->
  610. {block:IfShowNavigation}
  611. <div class="{block:HideTitle}{block:HideDescription}no-title-desc {/block:HideDescription}{/block:HideTitle}nav-wrapper nav-responsive" id="navbar">
  612.  
  613. <nav class="nav-menu">
  614. <ul class="inline-nav">
  615.     <li class="nav-item nav-item--posts">
  616.     <a href="/" class="label
  617.    {block:HomePage}current-page{/block:HomePage}">{lang:Posts}</a>
  618.     </li>
  619.  
  620.     {block:AskEnabled}
  621.     <li class="nav-item nav-item--ask">
  622.     <a href="/ask" class="label {block:AskPage}current-page
  623.    {/block:AskPage}">{AskLabel}</a></li>
  624.     {/block:AskEnabled}
  625.    
  626.     {block:SubmissionsEnabled}
  627.     <li class="nav-item nav-item--submit">
  628.     <a href="/submit" class="label {block:SubmitPage}current-page
  629.    {/block:SubmitPage}">{SubmitLabel}</a></li>
  630.     {/block:SubmissionsEnabled}
  631.  
  632.     {block:HasPages}
  633.     {block:Pages}
  634.     <li class="nav-item nav-item--page">
  635.     <a href="{URL}" class="label {CurrentState} {ExternalState}">
  636.     {Label}</a></li>
  637.     {/block:Pages}
  638.     {/block:HasPages}
  639.     </li>
  640. </ul>
  641. </nav> <!-- nav-menu -->
  642. <script>
  643. /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
  644. var prevScrollpos = window.pageYOffset;
  645. window.onscroll = function() {
  646.   var currentScrollPos = window.pageYOffset;
  647.   if (prevScrollpos > currentScrollPos) {
  648.     document.getElementById("navbar").style.top = "";
  649.   } else {
  650.     document.getElementById("navbar").style.top = "-50px";
  651.   }
  652.   prevScrollpos = currentScrollPos;
  653. }    
  654. </script>    
  655. </div> <!-- nav-wrapper nav-responsive -->
  656. {/block:IfShowNavigation}
  657.  
  658. <!-------------------------------------------------------SEARCH PAGE---->
  659.  
  660. {block:SearchPage}
  661.     {block:NoSearchResults}
  662.     <div class="search-no-results content">
  663.     {lang:Sorry no search results found}.</div>
  664.     {/block:NoSearchResults}
  665. {/block:SearchPage}
  666.  
  667. {block:IndexPage}
  668.     {block:NoPosts}
  669.     <div class="posts-no-posts content"></div>
  670.     {/block:NoPosts}
  671. {/block:IndexPage}
  672.  
  673. <!-------------------------------------------------------------POSTS---->
  674.  
  675. <section id="posts" class="content clearfix {block:HideTitle}{block:HideDescription}no-title-desc {/block:HideDescription}{/block:HideTitle}{block:HideHeaderImage}no-image {/block:HideHeaderImage} {block:ShowAvatar}avatar-style-{AvatarShape}{/block:ShowAvatar} {block:HideAvatar}avatar-hidden{/block:HideAvatar} {block:IfShowNavigation}show-nav{/block:IfShowNavigation}">
  676.  
  677. <div class="container">
  678. <div class="main">
  679. {block:TagPage}
  680.     <div class="tagged-page" style="font-weight:300;">Posts tagged <span style="text-transform:capitalize; font-weight:normal;">“{Tag}” </span></div>
  681.     {/block:TagPage}
  682. {block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
  683. <article class="{block:Text}text {/block:Text}{block:Photoset}photoset {/block:Photoset}{block:Photo}photo {/block:Photo}{block:RebloggedFrom}reblogged {/block:RebloggedFrom}{block:Quote}quote {/block:Quote}{block:Link}link {/block:Link}{block:Chat}chat {/block:Chat}{block:Audio}audio {/block:Audio}{block:Video}video {/block:Video}{block:Answer}answer {/block:Answer}{block:Date}not-page post-{PostID}{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="{PostID}"{/block:Date} {block:SupplyLogging}data-supply-logging='{positions}'{/block:SupplyLogging}>
  684.  
  685. <div class="post-wrapper clearfix">
  686.    
  687.     <header class="post-header">
  688.     {block:RebloggedFrom}
  689.         <a class="reblog-link" href="{ReblogParentURL}"
  690.        data-blog-card-username="{ReblogParentName}">
  691.         <i class="reblog_sm"></i>{ReblogParentName}</a>
  692.     {/block:RebloggedFrom}
  693.     </header>
  694.  
  695.     {block:Title}
  696.     <h2 class="title"><a href="{Permalink}" class="title-link">{Title}</a></h2>
  697.     {/block:Title}
  698. <section class="post">
  699.  
  700. <!--------------------------------------------------------------TEXT---->
  701.  
  702. {block:Text}
  703. <div class="post-content">
  704.    
  705. {block:NotReblog}
  706. <div class="body-text">{Body}</div>
  707. {/block:NotReblog}
  708.  
  709.     {block:RebloggedFrom}
  710.     <div class="reblog-list">{block:Reblogs}
  711.     <div class="post-reblog-trail-item
  712.    {block:isOriginalEntry} original-reblog-content
  713.    {/block:isOriginalEntry}">
  714.     <div class="post-reblog-header">
  715.     <div class="post-avatar">
  716.     <div class="post-avatar-wrapper">
  717.         {block:IsActive}
  718.         <a class="post-avatar-link
  719.        {block:isNotOriginalEntry} sub-icon-reblog
  720.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  721.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  722.         {/block:IsActive}
  723.            
  724.         {block:IsDeactivated}
  725.         <span class="inactive reblog-avatar
  726.        {block:isNotOriginalEntry} sub-icon-reblog
  727.        {/block:isNotOriginalEntry}">
  728.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  729.         {/block:IsDeactivated}
  730.     </div> <!-- post-avatar-wrapper -->
  731.     </div> <!-- post-avatar -->
  732.         {block:IsActive}
  733.         <a target="_blank" class="post-tumblelog-name"
  734.        href="{Permalink}">{Username}</a>
  735.         {/block:IsActive}
  736.                
  737.         {block:IsDeactivated}
  738.         <span class="inactive post-tumblelog-name">{Username}</span>
  739.         {/block:IsDeactivated}
  740.     </div> <!-- post-reblog-header -->
  741.    
  742.     <div class="post-reblog-content"><div class="post-body">{Body}</div>
  743.     </div> <!-- post-reblog-content -->
  744.     </div> <!-- post-reblog-trail-item -->
  745.     {/block:Reblogs}
  746.     </div> <!-- reblog-list -->
  747.     {/block:RebloggedFrom}
  748. </div> <!-- post-content -->
  749. {/block:Text}
  750.  
  751. <!-------------------------------------------------------------PHOTO---->
  752.  
  753. {block:Photo}
  754. <figure class="post-content {block:HighRes}high-res{/block:HighRes}{block:Caption} with-caption{/block:Caption}" data-photo-width="{PhotoWidth-HighRes}">
  755. <div class="photo-wrapper">
  756. <div class="photo-wrapper-inner">{LinkOpenTag}
  757. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"
  758. width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}"
  759. {block:LivePhoto}data-live-photo="{LivePhotoURL}"
  760. data-live-photo-still-image-time="{LivePhotoStillImageTime}"
  761. {/block:LivePhoto}>{LinkCloseTag}
  762. </div>
  763. </div>
  764. {block:NotReblog}
  765. <figcaption class="caption">{Caption}</figcaption>
  766. {/block:NotReblog}
  767.  
  768.     {block:RebloggedFrom}
  769.     <div class="reblog-list">{block:Reblogs}
  770.     <div class="post-reblog-trail-item
  771.    {block:isOriginalEntry} original-reblog-content
  772.    {/block:isOriginalEntry}">
  773.     <div class="post-reblog-header">
  774.     <div class="post-avatar">
  775.     <div class="post-avatar-wrapper">
  776.         {block:IsActive}
  777.         <a class="post-avatar-link
  778.        {block:isNotOriginalEntry} sub-icon-reblog
  779.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  780.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  781.         {/block:IsActive}
  782.            
  783.         {block:IsDeactivated}
  784.         <span class="inactive reblog-avatar
  785.        {block:isNotOriginalEntry} sub-icon-reblog
  786.        {/block:isNotOriginalEntry}">
  787.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  788.         {/block:IsDeactivated}
  789.     </div> <!-- post-avatar-wrapper -->
  790.     </div> <!-- post-avatar -->
  791.         {block:IsActive}
  792.         <a target="_blank" class="post-tumblelog-name"
  793.        href="{Permalink}">{Username}</a>
  794.         {/block:IsActive}
  795.                
  796.         {block:IsDeactivated}
  797.         <span class="inactive post-tumblelog-name">{Username}</span>
  798.         {/block:IsDeactivated}
  799.     </div> <!-- post-reblog-header -->
  800.    
  801.     <div class="post-reblog-content"><div class="post-body">{Body}</div>
  802.     </div> <!-- post-reblog-content -->
  803.     </div> <!-- post-reblog-trail-item -->
  804.     {/block:Reblogs}
  805.     </div> <!-- reblog-list -->
  806.     {/block:RebloggedFrom}
  807. </figure>
  808. {/block:Photo}
  809.  
  810. <!----------------------------------------------------------PHOTOSET---->
  811.  
  812. {block:Photoset}
  813. <figure class="post-content photoset {block:Caption}with-caption{/block:Caption}">{Photoset}
  814.  
  815. {block:NotReblog}
  816. <figcaption class="caption">{Caption}</figcaption>
  817. {/block:NotReblog}
  818.  
  819.     {block:RebloggedFrom}
  820.     <div class="reblog-list">{block:Reblogs}
  821.     <div class="post-reblog-trail-item
  822.    {block:isOriginalEntry} original-reblog-content
  823.    {/block:isOriginalEntry}">
  824.     <div class="post-reblog-header">
  825.     <div class="post-avatar">
  826.     <div class="post-avatar-wrapper">
  827.         {block:IsActive}
  828.         <a class="post-avatar-link
  829.        {block:isNotOriginalEntry} sub-icon-reblog
  830.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  831.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  832.         {/block:IsActive}
  833.            
  834.         {block:IsDeactivated}
  835.         <span class="inactive reblog-avatar
  836.        {block:isNotOriginalEntry} sub-icon-reblog
  837.        {/block:isNotOriginalEntry}">
  838.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  839.         {/block:IsDeactivated}
  840.     </div> <!-- post-avatar-wrapper -->
  841.     </div> <!-- post-avatar -->
  842.         {block:IsActive}
  843.         <a target="_blank" class="post-tumblelog-name"
  844.        href="{Permalink}">{Username}</a>
  845.         {/block:IsActive}
  846.                
  847.         {block:IsDeactivated}
  848.         <span class="inactive post-tumblelog-name">{Username}</span>
  849.         {/block:IsDeactivated}
  850.     </div> <!-- post-reblog-header -->
  851.    
  852.     <div class="post-reblog-content"><div class="post-body">{Body}</div>
  853.     </div> <!-- post-reblog-content -->
  854.     </div> <!-- post-reblog-trail-item -->
  855.     {/block:Reblogs}
  856.     </div> <!-- reblog-list -->
  857.     {/block:RebloggedFrom}
  858. </figure>
  859. {/block:Photoset}
  860.  
  861. <!-------------------------------------------------------------QUOTE---->
  862.  
  863. {block:Quote}
  864. <div class="post-content">
  865. <blockquote class="{Length}">{Quote}</blockquote>
  866. {block:Source}
  867. <div class="source">{Source}</div>
  868. {/block:Source}
  869. </div>
  870. {/block:Quote}
  871.  
  872. <!--------------------------------------------------------------LINK---->
  873.  
  874. {block:Link}
  875. <div class="post-content{block:Description} with-caption{/block:Description}{block:Thumbnail} with-thumbnail{/block:Thumbnail}">
  876. <div class="link-wrapper">
  877. <a {Target} href="{URL}" class="link">
  878. {block:Thumbnail}
  879. <div class="link-thumbnail"><img src="{Thumbnail-HighRes}" alt="" />
  880. </div>
  881. {/block:Thumbnail}
  882. <div class="link-text-wrapper clearfix">
  883. <div class="link-text">
  884. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  885. <h2 class="link-title">{Name}</h2>
  886. {block:Excerpt}<div class="link-excerpt">{Excerpt}</div>{/block:Excerpt}
  887. {block:Author}<div class="link-author">{Author}</div>{/block:Author}
  888. </div>
  889. </div>
  890. </a>
  891. </div>
  892. {block:NotReblog}
  893. <div class="caption">{Description}</div>
  894. {/block:NotReblog}
  895.  
  896.     {block:RebloggedFrom}
  897.     <div class="reblog-list">{block:Reblogs}
  898.     <div class="post-reblog-trail-item
  899.    {block:isOriginalEntry} original-reblog-content
  900.    {/block:isOriginalEntry}">
  901.     <div class="post-reblog-header">
  902.     <div class="post-avatar">
  903.     <div class="post-avatar-wrapper">
  904.         {block:IsActive}
  905.         <a class="post-avatar-link
  906.        {block:isNotOriginalEntry} sub-icon-reblog
  907.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  908.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  909.         {/block:IsActive}
  910.            
  911.         {block:IsDeactivated}
  912.         <span class="inactive reblog-avatar
  913.        {block:isNotOriginalEntry} sub-icon-reblog
  914.        {/block:isNotOriginalEntry}">
  915.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  916.         {/block:IsDeactivated}
  917.     </div> <!-- post-avatar-wrapper -->
  918.     </div> <!-- post-avatar -->
  919.         {block:IsActive}
  920.         <a target="_blank" class="post-tumblelog-name"
  921.        href="{Permalink}">{Username}</a>
  922.         {/block:IsActive}
  923.                
  924.         {block:IsDeactivated}
  925.         <span class="inactive post-tumblelog-name">{Username}</span>
  926.         {/block:IsDeactivated}
  927.     </div> <!-- post-reblog-header -->
  928.    
  929.     <div class="post-reblog-content"><div class="post-body">{Body}</div>
  930.     </div> <!-- post-reblog-content -->
  931.     </div> <!-- post-reblog-trail-item -->
  932.     {/block:Reblogs}
  933.     </div> <!-- reblog-list -->
  934.     {/block:RebloggedFrom}
  935. </div>
  936. {/block:Link}
  937.  
  938. <!--------------------------------------------------------------CHAT---->
  939.  
  940. {block:Chat}
  941. {block:Title}<h2 class="title"><a href="{Permalink}">{Title}</a></h2>
  942. {/block:Title}
  943. <div class="post-content">
  944. <ul class="conversation">
  945. {block:Lines}
  946. <li class="chat-{Alt}">
  947. {block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>
  948. {/block:Lines}
  949. </ul>
  950. </div>
  951. {/block:Chat}
  952.  
  953. <!-------------------------------------------------------------AUDIO---->
  954.  
  955. {block:Audio}
  956. <div class="post-content {block:Caption}with-caption{/block:Caption}">
  957. <div class="audio_container">
  958. {block:AudioEmbed}{AudioEmbed color="white"}{/block:AudioEmbed}
  959. </div>
  960.  
  961. {block:NotReblog}
  962. <div class="caption">{Caption}</div>
  963. {/block:NotReblog}
  964.  
  965.     {block:RebloggedFrom}
  966.     <div class="reblog-list">{block:Reblogs}
  967.     <div class="post-reblog-trail-item
  968.    {block:isOriginalEntry} original-reblog-content
  969.    {/block:isOriginalEntry}">
  970.     <div class="post-reblog-header">
  971.     <div class="post-avatar">
  972.     <div class="post-avatar-wrapper">
  973.         {block:IsActive}
  974.         <a class="post-avatar-link
  975.        {block:isNotOriginalEntry} sub-icon-reblog
  976.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  977.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  978.         {/block:IsActive}
  979.            
  980.         {block:IsDeactivated}
  981.         <span class="inactive reblog-avatar
  982.        {block:isNotOriginalEntry} sub-icon-reblog
  983.        {/block:isNotOriginalEntry}">
  984.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  985.         {/block:IsDeactivated}
  986.     </div> <!-- post-avatar-wrapper -->
  987.     </div> <!-- post-avatar -->
  988.         {block:IsActive}
  989.         <a target="_blank" class="post-tumblelog-name"
  990.        href="{Permalink}">{Username}</a>
  991.         {/block:IsActive}
  992.                
  993.         {block:IsDeactivated}
  994.         <span class="inactive post-tumblelog-name">{Username}</span>
  995.         {/block:IsDeactivated}
  996.     </div> <!-- post-reblog-header -->
  997.    
  998.     <div class="post-reblog-content"><div class="post-body">{Body}</div>
  999.     </div> <!-- post-reblog-content -->
  1000.     </div> <!-- post-reblog-trail-item -->
  1001.     {/block:Reblogs}
  1002.     </div> <!-- reblog-list -->
  1003.     {/block:RebloggedFrom}
  1004. </div>
  1005. {/block:Audio}
  1006.  
  1007. <!-------------------------------------------------------------VIDEO---->
  1008.  
  1009. {block:Video}
  1010. <figure class="post-content {block:Caption}with-caption{/block:Caption}">
  1011. <div class="video-wrapper">{Video-700}</div>
  1012.  
  1013. {block:NotReblog}
  1014. <figcaption class="caption">{Caption}</figcaption>
  1015. {/block:NotReblog}
  1016.  
  1017.     {block:RebloggedFrom}
  1018.     <div class="reblog-list">{block:Reblogs}
  1019.     <div class="post-reblog-trail-item
  1020.    {block:isOriginalEntry} original-reblog-content
  1021.    {/block:isOriginalEntry}">
  1022.     <div class="post-reblog-header">
  1023.     <div class="post-avatar">
  1024.     <div class="post-avatar-wrapper">
  1025.         {block:IsActive}
  1026.         <a class="post-avatar-link
  1027.        {block:isNotOriginalEntry} sub-icon-reblog
  1028.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1029.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  1030.         {/block:IsActive}
  1031.            
  1032.         {block:IsDeactivated}
  1033.         <span class="inactive reblog-avatar
  1034.        {block:isNotOriginalEntry} sub-icon-reblog
  1035.        {/block:isNotOriginalEntry}">
  1036.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  1037.         {/block:IsDeactivated}
  1038.     </div> <!-- post-avatar-wrapper -->
  1039.     </div> <!-- post-avatar -->
  1040.         {block:IsActive}
  1041.         <a target="_blank" class="post-tumblelog-name"
  1042.        href="{Permalink}">{Username}</a>
  1043.         {/block:IsActive}
  1044.                
  1045.         {block:IsDeactivated}
  1046.         <span class="inactive post-tumblelog-name">{Username}</span>
  1047.         {/block:IsDeactivated}
  1048.     </div> <!-- post-reblog-header -->
  1049.    
  1050.     <div class="post-reblog-content"><div class="post-body">{Body}</div>
  1051.     </div> <!-- post-reblog-content -->
  1052.     </div> <!-- post-reblog-trail-item -->
  1053.     {/block:Reblogs}
  1054.     </div> <!-- reblog-list -->
  1055.     {/block:RebloggedFrom}
  1056. </figure>
  1057. {/block:Video}
  1058.  
  1059. <!------------------------------------------------------------ANSWER---->
  1060.  
  1061. {block:Answer}
  1062. <div class="post-content">
  1063. <div class="note-item note-item-asker">
  1064. <div class="text">
  1065. <p class="asker"><strong>{Asker}</strong> asked:</p>
  1066. <div class="asker-question">{Question}</div>
  1067. </div>
  1068. <div class="avatar">
  1069. <img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
  1070. </div>
  1071. </div>
  1072.  
  1073. {block:Answerer}
  1074. <div class="note-item note-item-answerer">
  1075. <div class="text">
  1076. <p class="answerer"><strong>{Answerer}</strong> answered:</p>
  1077. <div class="answerer-answer">{Answer}</div>
  1078. </div>
  1079. <div class="avatar">
  1080. <img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
  1081. </div>
  1082. </div>
  1083. {/block:Answerer}
  1084.  
  1085. {block:NotReblog}
  1086. <div class="replies">{Replies}</div>
  1087. {/block:NotReblog}
  1088.  
  1089.     {block:RebloggedFrom}
  1090.     <div class="reblog-list">{block:Reblogs}
  1091.     <div class="post-reblog-trail-item
  1092.    {block:isOriginalEntry} original-reblog-content
  1093.    {/block:isOriginalEntry}">
  1094.     <div class="post-reblog-header">
  1095.     <div class="post-avatar">
  1096.     <div class="post-avatar-wrapper">
  1097.         {block:IsActive}
  1098.         <a class="post-avatar-link
  1099.        {block:isNotOriginalEntry} sub-icon-reblog
  1100.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1101.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  1102.         {/block:IsActive}
  1103.            
  1104.         {block:IsDeactivated}
  1105.         <span class="inactive reblog-avatar
  1106.        {block:isNotOriginalEntry} sub-icon-reblog
  1107.        {/block:isNotOriginalEntry}">
  1108.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  1109.         {/block:IsDeactivated}
  1110.     </div> <!-- post-avatar-wrapper -->
  1111.     </div> <!-- post-avatar -->
  1112.         {block:IsActive}
  1113.         <a target="_blank" class="post-tumblelog-name"
  1114.        href="{Permalink}">{Username}</a>
  1115.         {/block:IsActive}
  1116.                
  1117.         {block:IsDeactivated}
  1118.         <span class="inactive post-tumblelog-name">{Username}</span>
  1119.         {/block:IsDeactivated}
  1120.     </div> <!-- post-reblog-header -->
  1121.    
  1122.     <div class="post-reblog-content"><div class="post-body">{Body}</div>
  1123.     </div> <!-- post-reblog-content -->
  1124.     </div> <!-- post-reblog-trail-item -->
  1125.     {/block:Reblogs}
  1126.     </div> <!-- reblog-list -->
  1127.     {/block:RebloggedFrom}
  1128.     </div> <!-- post-content -->
  1129. {/block:Answer}
  1130.  
  1131. <!--------------------------------------------------------POST EXTRA---->
  1132. <section class="inline-meta post-extra{block:RebloggedFrom} has-reblog{/block:RebloggedFrom}{block:ContentSource} has-source{/block:ContentSource}{block:HasTags} has-tags{/block:HasTags}">
  1133.  
  1134.     {block:ContentSource}
  1135.     <a class="meta-item source-link" href="{SourceURL}">
  1136.     {lang:Source}: {SourceTitle}</a>
  1137.     {/block:ContentSource}
  1138.  
  1139.     {block:HasTags}
  1140.     {block:Tags}
  1141.     <a class="meta-item tag-link" href="{TagURL}" title="{Tag}">{Tag}</a>
  1142.     {/block:Tags}
  1143.     {/block:HasTags}
  1144. </section> <!-- inline-meta post-extra -->
  1145. </section> <!-- post -->
  1146.  
  1147.  
  1148.  
  1149. {block:Date}
  1150. <section class="panel">
  1151. <footer class="post-footer">
  1152.  
  1153. <section class="panel">
  1154. <section class="inline-meta date-notes">
  1155. <div class="date-note-wrapper">
  1156. {block:NoteCount}
  1157. <span>
  1158. <a href="{Permalink}#notes" class="meta-item post-notes">{NoteCountWithLabel}</a>
  1159.  
  1160. <!----------------------------------------------PERMALINK POST NOTES---->
  1161.                                                                     {block:PermalinkPage}
  1162. {block:PostNotes}
  1163. <section id="notes-count" class="clearfix">
  1164. <div class="notes-wrapper-header">
  1165. <span class="notes-wrapper-header-close">
  1166. <svg width="15px" height="15px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  1167. <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  1168. <path d="M12.510351,14.6860639 L0,27.1964147 L2.175713,29.3721278 L14.686064,16.8617771 L27.196415,29.3721278 L29.372128,27.1964147 L16.861777,14.6860639 L29.372128,2.1757132 L27.196415,0 L14.686064,12.5103507 L2.175713,0 L0,2.1757132 L12.510351,14.6860639 L12.510351,14.6860639 Z" fill="#D3D3D3"></path></g></svg></span>{NoteCountWithLabel}</div>
  1169. </section> <!-- notes-count -->
  1170. {/block:PostNotes}
  1171. {/block:PermalinkPage}
  1172. </span> <!-- notes-wrapper-header-close -->
  1173. {/block:NoteCount}
  1174.  
  1175. <a href="{Permalink}" title="{TimeAgo}" class="meta-item post-date">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>
  1176. </div> <!-- notes-wrapper-header -->
  1177. </section> <!-- inline-meta date-notes -->
  1178.  
  1179. <!-----------------------------------------------------POST CONTROLS---->
  1180.  
  1181. <section class="post-controls">
  1182. <div class="controls-wrapper">
  1183.     <div class="control share-control">
  1184.     <nav class="pop">
  1185.     <a href="#" class="share selector"></a>
  1186.     <div class="pop-menu share-menu south" id="share_{PostID}">
  1187.     <ul>
  1188. <li class="open-in-app"><a href="#" class="share-item open-in-app" data-post="{PostID}">{lang:Open in app}</a></li>
  1189.  
  1190. <li><a href="https://facebook.com/sharer.php?u={URLEncodedPermalink}&amp;t={URLEncodedTitle}" class="share-item facebook" target="_blank"><div class="label">{lang:Facebook}</div><i class="fab fa-facebook" style="color:#3C5A99;"></i></a></li>
  1191.  
  1192. <li><a href="https://twitter.com/intent/tweet?text={URLEncodedTweetSummary}" class="share-item twitter" target="_blank"><div class="label">{lang:Tweet}</div><i class="fab fa-twitter" style="color:#1DA1F2"></i></a></li>
  1193.  
  1194. {block:Photo}
  1195. <li><a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&amp;media={PhotoURL-500}" class="share-item pinterest" target="_blank"><div class="label">{lang:Pinterest}</div><i class="fab fa-pinterest" style="color:#BD081C"></i></a></li>
  1196. {/block:Photo}
  1197.  
  1198. {block:Video}{block:VideoThumbnail}
  1199. <li><a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&amp;media={VideoThumbnailURL}&amp;is_video=true" class="share-item pinterest" target="_blank"><div class="label">{lang:Pinterest}</div><i class="fab fa-pinterest" style="color:#BD081C"></i></a></li>
  1200. {/block:VideoThumbnail}{/block:Video}
  1201.  
  1202. <li><a href="https://reddit.com/submit?url={URLEncodedPermalink}" class="share-item reddit" target="_blank"><div class="label">{lang:Reddit}</div><i class="fab fa-reddit-alien" style="color:#FF4500"></i></a></li>
  1203.  
  1204. <li><a href="mailto:?subject={URLEncodedShareString}&amp;body={URLEncodedMailSummary}" class="share-item mail"><div class="label">{lang:Mail}</div><i class="fas fa-paper-plane" style="color:#A3AAAE"></i></a></li>
  1205.  
  1206. <li class="share-link"><a href="{EmbedUrl}" class="share-item permalink"><div class="label">{lang:Embed}</div><i class="fas fa-code" style="color:#2E3033"></i></a></li>
  1207.  
  1208. <li><a href="{Permalink}" class="share-item permalink2"><div class="label">{lang:Permalink}</div><i class="fas fa-eye" style="color:#000000"></i></a></li>
  1209.                                                                         </ul>
  1210. </div> <!-- pop-menu -->
  1211. </nav> <!-- pop -->
  1212. </div> <!-- control share-control -->
  1213.  
  1214. <div class="control reblog-control">{ReblogButton size="24" color="black"}</div>
  1215. <div class="control like-control">{LikeButton size="24" color="black"}</div>
  1216. </div> <!-- controls-wrapper -->
  1217. </section> <!-- post-controls -->
  1218. </section> <!-- panel -->
  1219.  
  1220. <section class="inline-meta date-notes">
  1221.     {block:NoteCount}
  1222.     <span class="notes-pop-container">
  1223.         {block:PermalinkPage}
  1224.         {block:PostNotes}
  1225.             <section class="notes-wrapper clearfix">
  1226.             <div id="notes" class="notes-anchor"></div>{PostNotes-64}
  1227.             </section>
  1228.         {/block:PostNotes}
  1229.         {/block:PermalinkPage}
  1230.     </span>
  1231.     {/block:NoteCount}
  1232. </section> <!-- inline-meta date-notes -->
  1233. </footer> <!-- post-footer -->
  1234. </section> <!-- panel -->
  1235. {/block:Date}
  1236.  
  1237. {block:PermalinkPage}
  1238. {block:Date}
  1239. {block:IfDisqusShortname}
  1240. <section class="comments">
  1241. <div id="disqus_thread"></div>
  1242. <script type="text/javascript">
  1243.                                                       (function() {
  1244.                                                        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  1245.                                                        dsq.src = 'https://{text:Disqus Shortname}.disqus.com/embed.js';
  1246.                                                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  1247.                                                       })();
  1248.                                                     </script>
  1249.                                                     <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript>
  1250. <a href="https://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
  1251. </section> <!-- comments -->
  1252. {/block:IfDisqusShortname}
  1253. {/block:Date}
  1254. {/block:PermalinkPage}
  1255. </div> <!-- post-wrapper -->
  1256. </article>
  1257. {/block:Posts}
  1258. </div> <!-- .main -->
  1259. </div> <!-- .container -->
  1260. </section> <!-- posts -->
  1261.  
  1262. <footer id="footer" class="content clearfix">
  1263. {block:IndexPage}
  1264. {block:Pagination}
  1265.    
  1266.     {block:IfNotEndlessScrolling}
  1267.     <div class="pagination">
  1268.         {block:PreviousPage}
  1269.         <a href="{PreviousPage}" class="jump_page">
  1270.         <i class="lnr lnr-arrow-left"></i></a>
  1271.         {/block:PreviousPage}
  1272.    
  1273.         {block:JumpPagination length="5"}
  1274.             {block:CurrentPage}
  1275.             <span class="current_page">{PageNumber}</span>
  1276.             {/block:CurrentPage}
  1277.             {block:JumpPage}
  1278.             <a class="jump_page" href="{URL}">{PageNumber}</a>
  1279.             {/block:JumpPage}
  1280.         {/block:JumpPagination}
  1281.    
  1282.         {block:NextPage}
  1283.         <a href="{NextPage}" class="jump_page">
  1284.         <i class="lnr lnr-arrow-right"></i></a>
  1285.         {/block:NextPage}
  1286.     </div><!-- end of .pagination -->    
  1287.     {/block:IfNotEndlessScrolling}
  1288.    
  1289.     {block:IfEndlessScrolling}
  1290.     <div id="pagination">
  1291.         {block:PreviousPage}
  1292.         <a href="{PreviousPage}" class="previous"
  1293.       data-current-page="{CurrentPage}"
  1294.       data-total-pages="{TotalPages}">{lang:Previous}
  1295.         <span class="bg"></span></a>
  1296.         {/block:PreviousPage}
  1297.  
  1298.         {block:NextPage}
  1299.         <a href="{NextPage}" class="next"
  1300.       data-current-page="{CurrentPage}"
  1301.       data-total-pages="{TotalPages}">{lang:Next}
  1302.         <span class="bg"></span></a>
  1303.         {/block:NextPage}
  1304.  
  1305.         <div class="loader">
  1306.         <div class="loader-bar" style="animation-delay:.1s"></div>
  1307.         <div class="loader-bar" style="animation-delay:.2s"></div>
  1308.         <div class="loader-bar" style="animation-delay:.3s"></div>
  1309.         </div> <!-- loader -->
  1310.     </div> <!-- #pagination -->
  1311.     {/block:IfEndlessScrolling}
  1312.    
  1313. {/block:Pagination}
  1314. {/block:IndexPage}
  1315. </footer> <!-- #footer -->
  1316. </section> <!-- page -->
  1317.  
  1318. <script>
  1319.             var Optica = {};
  1320.             Optica.ENDLESS_SCROLLING = {block:IfEndlessScrolling}true{/block:IfEndlessScrolling}{block:IfNotEndlessScrolling}false{/block:IfNotEndlessScrolling};
  1321.             Optica.SHOW_NAV = true;
  1322.             Optica.LAYOUT = "{select:Layout}";
  1323.             Optica.GRID_LAYOUT = (Optica.LAYOUT === 'grid');
  1324.             Optica.TITLE_COLOR = "{TitleColor}";
  1325.             Optica.ACCENT_COLOR = "{AccentColor}";
  1326.             Optica.BACKGROUND_COLOR = "{BackgroundColor}";
  1327.  
  1328.             Optica.RELATED_POSTS_CTA_VARIANTS = [];
  1329.             Optica.NO_LIKES_VARIANTS = [];
  1330.             Optica.NO_POSTS_VARIANTS = [];
  1331.             Optica.NO_FOLLOWING_VARIANTS = [];
  1332. </script>
  1333.  
  1334. <script src="https://static.tumblr.com/27gzhx7/Z5qorjizb/main-min.js"></script>
  1335.  
  1336.         {block:IfGoogleAnalyticsID}
  1337.             <script>
  1338.               (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  1339.               (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  1340.               m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  1341.               })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  1342.               ga('create', '{text:Google Analytics ID}', 'auto');
  1343.               ga('send', 'pageview');
  1344.             </script>
  1345.         {/block:IfGoogleAnalyticsID}
  1346.  
  1347.     </body>
  1348. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!