API tools faq
paste
BOOdalinski

ORDERLY (Tumblr Theme)

BOOdalinski
May 26th, 2019 (edited)
684
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 50.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7.                            ORDERLY by BOO
  8.                        
  9.                        
  10. Quick Notes: As someone who's used others' themes before, I understand the struggle of an obtrusive credit stamp. Thus, I tried to make the credit fairly inconspicuous--only seen when a visiter reaches the bottom of a page. Please, don't remove it.
  11.  
  12. That being said...
  13.  
  14.    If you want to make the font-size smaller, feel free to do so.
  15.    If you want to fiddle with the font-style, go ahead.
  16.  
  17.  
  18. Credits:
  19.    - Tumblr Controls by cyantists (though I did a few modifications)
  20.    - Search Tags jQuery by shythemes
  21.    - Post Structure largely based on Tumblr's Offical Theme (Optica)                        
  22.  
  23. ------------------------------------------------------------------------>
  24.  
  25. <meta charset="utf-8">
  26. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  27. <meta name="theme-color" content="#35465D">
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  30. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  31. <link rel="stylesheet" href="https://static.tumblr.com/mftixld/AmMpjzwer/main-min.css">
  32.  
  33.     <title>{Title}</title>
  34.     {block:Description}
  35.     <meta name="description" content="{MetaDescription}">
  36.     {/block:Description}
  37.     <link rel="shortcut icon" href="{Favicon}">
  38.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  39.     <meta name="if:Sidebar Italic" content=""/>
  40.     <meta name="if:Sidebar Uppercase" content=""/>
  41.     <meta name="if:Tags Section" content=""/>
  42.     <meta name="if:Show Search" content="">
  43.  
  44.     <meta name="color:Background" content="#FFFFFF">
  45.     <meta name="color:Sidebar" content="#FFFFFF">
  46.     <meta name="color:Borders" content="#EEEEEE">
  47.     <meta name="color:Avatar Border" content="#DDDDDD">
  48.     <meta name="color:Sidebar Headers" content="#222222">
  49.     <meta name="color:Sidebar Links" content="#888888">
  50.     <meta name="color:Accent" content="#888888">
  51.     <meta name="color:Link Hover" content="#007AFF">
  52.     <meta name="color:Answer Posts" content="#007AFF">
  53.     <meta name="color:Text" content="#555555">
  54.     <meta name="color:Bold" content="#222222">
  55.    
  56.     <meta name="select:Bold Weight" content="600" title="Semibold"/>
  57.     <meta name="select:Bold Weight" content="700" title="Bold"/>
  58.     <meta name="select:Bold Weight" content="400" title="Normal"/>
  59.     <meta name="select:Bold Weight" content="800" title="Extra Bold"/>
  60.     <meta name="select:Bold Weight" content="900" title="Black"/>
  61.  
  62.     <meta name="select:Avatar Size" content="35%"/>
  63.     <meta name="select:Avatar Size" content="15%"/>
  64.     <meta name="select:Avatar Size" content="20%"/>
  65.     <meta name="select:Avatar Size" content="25%"/>
  66.     <meta name="select:Avatar Size" content="30%"/>
  67.     <meta name="select:Avatar Size" content="40%"/>
  68.     <meta name="select:Avatar Size" content="45%"/>
  69.     <meta name="select:Avatar Size" content="50%"/>
  70.     <meta name="select:Avatar Size" content="55%"/>
  71.     <meta name="select:Avatar Size" content="60%"/>
  72.     <meta name="select:Avatar Size" content="65%"/>
  73.  
  74.     <meta name="select:Sidebar Max Width" content="200px"/>
  75.     <meta name="select:Sidebar Max Width" content="150px"/>
  76.    
  77.     <meta name="select:Sidebar Letter Spacing" content="0.25px" />
  78.     <meta name="select:Sidebar Letter Spacing" content="0px" />
  79.     <meta name="select:Sidebar Letter Spacing" content="0.5px" />
  80.     <meta name="select:Sidebar Letter Spacing" content="1px" />
  81.     <meta name="select:Sidebar Font Weight" content="400" title="Normal"/>
  82.     <meta name="select:Sidebar Font Weight" content="300" title="Light"/>
  83.     <meta name="select:Sidebar Font Weight" content="600" title="Semibold"/>
  84.    
  85.     <meta name="select:Sidebar Font Size" content="10px"/>
  86.     <meta name="select:Sidebar Font Size" content="7px"/>
  87.     <meta name="select:Sidebar Font Size" content="8px"/>
  88.     <meta name="select:Sidebar Font Size" content="9px"/>
  89.     <meta name="select:Sidebar Font Size" content="11px"/>
  90.     <meta name="select:Sidebar Font Size" content="12px"/>
  91.     <meta name="select:Sidebar Font Size" content="14px"/>
  92.  
  93.     <meta name="select:Post Width" content="700px"/> <!--Recommended-->
  94.     <meta name="select:Post Width" content="640px"/>
  95.     <meta name="select:Post Width" content="750px"/>
  96.     <meta name="select:Post Width" content="800px"/>
  97.     <meta name="select:Post Width" content="850px"/>
  98.     <meta name="select:Post Width" content="900px"/>
  99.    
  100.     <meta name="text:Header Font" content="Lato"/>
  101.     <meta name="text:Body Font" content="Source Sans Pro"/>
  102.     <meta name="text:Sidebar Font" content="Source Sans Pro"/>
  103.    
  104.     <meta name="select:Body Font Size" content="15px"/>
  105.     <meta name="select:Body Font Size" content="12px"/>
  106.     <meta name="select:Body Font Size" content="14px"/>
  107.     <meta name="select:Body Font Size" content="16px"/>
  108.     <meta name="select:Body Font Size" content="17px"/>
  109.     <meta name="select:Body Font Size" content="18px"/>
  110.  
  111.     <meta name="text:Home Label" content="Home"/>
  112.     <meta name="text:Navigation Title" content="Links"/>
  113.     <meta name="text:Tag 1" content="Example 1"/>
  114.     <meta name="text:Tag 1 url" content="/tagged/"/>
  115.     <meta name="text:Tag 2" content="Example 2"/>
  116.     <meta name="text:Tag 2 url" content="/tagged/"/>
  117.     <meta name="text:Tag 3" content="Example 3"/>
  118.     <meta name="text:Tag 3 url" content="/tagged/"/>
  119.     <meta name="text:Tag 4" content="Example 4"/>
  120.     <meta name="text:Tag 4 url" content="/tagged/"/>
  121.     <meta name="text:Tag 5" content="Example 5"/>
  122.     <meta name="text:Tag 5 url" content="/tagged/"/>
  123.  
  124. <!----- Fonts ---->
  125. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  126. <link href="https://fonts.googleapis.com/css?family={text:Body Font}:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  127. <link href="https://fonts.googleapis.com/css?family={text:Header Font}:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  128. <link href="https://fonts.googleapis.com/css?family={text:Sidebar Font}:300,300i,400,400i,600,600i" rel="stylesheet">
  129. <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400,500,600,700,900&display=swap&subset=latin-ext" rel="stylesheet">
  130. <!----- Fonts ---->
  131.  
  132.  
  133. <!----- Scripts ---->
  134. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  135. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  136. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  137. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  138. <!----- Scripts ---->
  139.  
  140. <!---------------------------------------------------------------------->
  141.  
  142. <style type="text/css">
  143.  
  144. * {
  145.     -webkit-font-smoothing: antialiased;
  146.     -moz-osx-font-smoothing: grayscale;
  147.     }
  148.  
  149. /*----------------------------------------------------------SIDEBAR----*/
  150.  
  151.     /*----RESPONSIVE SIDEBAR----*/
  152.  
  153.     @media screen and (max-width:700px) {
  154.         .blogtitle, .description {display:none;}}
  155.    
  156.     @media screen and (max-width:900px) {
  157.         sidebar {max-width:10vw;}
  158.         .banner-group img {margin-top:15px;}
  159.         .nav-wrapper {padding:1px 2px;}
  160.         .blogtitle {
  161.             max-width:9.5vw;
  162.             word-break:break-word;
  163.             line-height:140%;}
  164.         .group-label, .group-label a {font-size:10px;}
  165.         .nav-links {padding:5px;text-align:center;}
  166.         .nav-links li a {
  167.             font-size:calc({select:Sidebar Font Size} - 10%);
  168.             line-height:140%;}
  169.         .description {font-size:calc({select:Sidebar Font Size} - 30%);}         .posts {padding-left:12vw;max-width:80vw;}
  170.         form.search .query {
  171.             font-size:calc({select:Sidebar Font Size} - 10%);
  172.             text-align:center;
  173.             line-height:140%;
  174.         }
  175.         }
  176.    
  177.     @media screen and (min-width:900px) {
  178.         sidebar {width:auto;max-width:{select:Sidebar Max Width};}
  179.         .banner-group img {margin-top:30px;}
  180.         .nav-wrapper {padding:1em 2em;}
  181.         .group-label, .group-label a {font-size:12px;}  
  182.         .nav-links, .group-label {padding:0em;}
  183.         .nav-links li a {font-size:{select:Sidebar Font Size};line-height:140%;}  
  184.         .description {font-size:calc({select:Sidebar Font Size} - 20%);}
  185.         form.search .query {
  186.             font-size:{select:Sidebar Font Size};
  187.             padding:0px;
  188.         }
  189.         form.search {border:none;padding:0px;}
  190.         }
  191.        
  192.  
  193.     /*----RESPONSIVE SIDEBAR----*/
  194.  
  195. sidebar {
  196.     z-index:999;
  197.     height:100%;
  198.     position:fixed;
  199.     background:{color:Sidebar};
  200.     border-right:1px solid {color:Borders};
  201.     line-height:140%;
  202.     word-break:break-word;
  203.     }
  204.  
  205. .group {padding:0px;margin:0 auto;border-top:1px solid {color:Borders};}
  206. .group-label, .group-label a {
  207.     color:{color:Sidebar Headers}; /*----Sidebar Headers: Links, Tags, and Title----*/
  208.     font-family:{text:Header Font};
  209.     font-weight:700;
  210.     font-style:normal;
  211.     text-transform:uppercase;
  212.     letter-spacing:1px;
  213.     padding-top:.5em;
  214.     padding-bottom:.5em;
  215.     }    
  216.  
  217. .nav-links .label.current-page {color:{color:Link Hover};}
  218. .nav-links .label.current-page:after {content:'∙';font-style:normal;}
  219. .nav-links {list-style-type:none;}
  220. .nav-links a:hover {color:{color:Link Hover};}
  221. .nav-links li a {
  222.     width:100%;
  223.     color:{color:Sidebar Links};
  224.     font-family:{text:Sidebar Font};
  225.     font-weight:{select:Sidebar Font Weight};
  226.     letter-spacing:{select:Sidebar Letter Spacing};
  227.     {block:ifSidebarItalic}
  228.     font-style:italic;
  229.     {/block:ifSidebarItalic}
  230.     {block:ifSidebarUppercase}
  231.     text-transform:uppercase;
  232.     {/block:ifSidebarUppercase}
  233.     }    
  234.  
  235. .avatar {text-align:center;}
  236. .avatar-circle {border-radius:100%;text-align:center;}
  237. .avatar-square {border-radius:4px;text-align:center;}
  238. .banner-group img {
  239.     height:{select:Avatar Size};
  240.     width:{select:Avatar Size};
  241.     padding:2px;
  242.     border:1px solid {color:Avatar Border};
  243.     transition: all 200ms ease-in-out;
  244.     }
  245. .banner-group img:hover {border-color:{color:Link Hover};}    
  246. .description {
  247.     color:{color:Sidebar Links}90;
  248.     text-align:justify;
  249.     margin-top:-1em;
  250.     padding-top:.5em;
  251.     padding-bottom:1em;
  252.     width:auto;
  253.     max-width:calc({select:Sidebar Max Width} - 10%);
  254.     line-height:140%;}
  255.  
  256. form.search .query::placeholder {color:{color:Sidebar Links};opacity:1;}
  257. form.search .query {
  258.     width:100%;
  259.     border:none;
  260.     background:transparent;
  261.     border-radius:2em;
  262.     color:{color:Bold};
  263.     font-family:{text:Sidebar Font};
  264.     font-weight:{select:Sidebar Font Weight};
  265.     letter-spacing:{select:Sidebar Letter Spacing};
  266.     {block:ifSidebarItalic}
  267.     font-style:italic;
  268.     {/block:ifSidebarItalic}
  269.     {block:ifSidebarUppercase}
  270.     text-transform:uppercase;
  271.     {/block:ifSidebarUppercase}
  272.     }
  273.  
  274. form.search .query:focus {outline:none;}
  275.  
  276. /*------------------------------------------------------MAIN LAYOUT----*/
  277.  
  278. main {margin-left:0 auto;width:100%;position:relative;min-height:100%;}
  279. article {width:auto;margin:5% auto;{block:IndexPage}border-bottom:1px solid {color:Borders};{/block:IndexPage}}
  280. .posts{
  281.     text-align:left;width:{select:Post Width};margin:5% auto;max-width:80vw;}
  282.  
  283. body {
  284.     color: {color:Text};
  285.     background-color:{color:Background};
  286.     font-size:{select:Body Font Size};
  287.     width:100%;
  288.     font-family:{text:Body Font}, Helvetica Neue, sans-serif;
  289.     line-height:160%;
  290.     text-decoration: none;
  291.     text-rendering: optimizeLegibility;
  292.     }
  293.  
  294.  
  295. /*----POSTS TAGGED BY----*/
  296. .tag-page, .search-page {
  297.     font-style:italic;
  298.     text-align:center;
  299.     font-size:14px;
  300.     letter-spacing:0.25px;
  301.     font-family:{text:Body Font};
  302.     color:rgba({RGBcolor:Current Page},0.8);
  303.     font-weight:300;
  304.     margin-top:4em;
  305.     margin-bottom:2em;
  306.     text-transform:none;
  307.     }
  308. span.tag, span.search_query {font-weight:bold;text-transform:capitalize;}
  309.  
  310. /*------------------------------------------------------------POSTS----*/
  311.  
  312. /*----HEADERS and TITLES----*/
  313. .post-content h2 b, .post-content h2 strong {color:#000000;font-weight:700;}
  314. .post-content h1 {margin-bottom:1em;}  
  315. .post-content h1, .post-content h2 {
  316.     color:{TitleColor};
  317.     font-family:{text:Header Font}, Helvetica Neue, sans-serif;
  318.     font-weight:700;
  319.     }
  320. .post-title a:hover {color:{color:Link Hover};}
  321. .post-title a {
  322.     color:{TitleColor};
  323.     font:bold 1.6em {text:Header Font}, Helvetica Neue, sans-serif;
  324.     text-transform:none;
  325.     width:auto;
  326.     }
  327.    
  328.  
  329. /*----POST CONTENT----*/
  330. b, strong {color:{color:Bold};font-weight:{select:Bold Weight};}
  331. hr {width:100%;margin-left:0px;border:.1px dashed {color:Text}40;}
  332. code:not(blockquote code) {
  333.     background:{color:Text}20;
  334.     padding:0px 4px;
  335.     border-radius:2px;
  336.     opacity:0.8;}
  337. blockquote code {font-family:Source Code Pro, monospace;font-size:0.8em;}
  338. .caption small {font-size:80%}        
  339. .caption blockquote code {
  340.     font-family:Source Code Pro, Consolas, monospace;
  341.     font-size:0.8em;
  342.     }
  343.  
  344. /*----LINKS----*/
  345. a {color:{TitleColor};transition:all 200ms ease-in-out;}
  346. a:hover {color:{color:Link Hover};}
  347. a, a:hover {text-decoration:none;}
  348. p a {font-weight:normal;transition: all 200ms ease-in-out;}
  349. p a:hover {color:{color:Link Hover};}
  350. .post-content a {color:{TitleColor};}
  351. .post-content a:hover {color:{color:Link Hover};}
  352.  
  353. /*----LISTS----*/
  354. ul, menu, dir {list-style-type: circle;}
  355. li + ul {list-style-type:none;}
  356. li + ul li:before {content:'•';padding:.5em;color:{color:Bold};}
  357. hr {width:100%;margin-left:0px;border:.1px dashed {color:Text}40;}
  358.  
  359. /*----BLOCKQUOTES----*/
  360. .post-content blockquote b,.post-content blockquote strong {color:{color:Text};}
  361. .post-content blockquote {
  362.     color:{color:Text}90;
  363.     border-left:1px solid {color:Text}20;
  364.     margin-left:2em;
  365.     padding-left:1em;
  366.     }
  367.  
  368. /*----READ MORE----*/
  369. .read_more_container {width:100%;text-align:center;}
  370. a.read_more {
  371.     color:{TitleColor};
  372.     background:{color:Background};
  373.     font-family:{text:Header Font}, Helvetica Neue, sans-serif;
  374.     font-size:calc({select:Body Font Size} - 20%);
  375.     font-weight:500;
  376.     text-align:center;
  377.     text-transform:uppercase;
  378.     text-decoration:none;
  379.     letter-spacing:1.5px;
  380.     padding:5px;
  381.     border:.5px solid {TitleColor};
  382.     border-radius:3px;
  383.     box-shadow: 0 1px 2px #00000010;
  384.     transition: all 200ms ease-in-out;
  385.     }
  386. a.read_more:hover {
  387.     color:{color:Link Hover};
  388.     border-color:{color:Link Hover};}
  389.  
  390. /*-------------------------------------------------------POST TYPES----*/
  391.  
  392. /*----LINK----*/
  393. .link-wrapper {
  394.     background:{color:Text}20;
  395.     border:1px solid {color:Text}30;
  396.     border-radius:4px;
  397.     box-shadow: 0 1px 2px #00000010;
  398.     transition: all 200ms ease-in-out;
  399.     }
  400. .link-wrapper:hover {border-color:{color:Link Hover}60;background:{color:Link Hover}20;}
  401. .link-text-wrapper{color:{color:Text};transition: all 200ms ease-in-out;}
  402. .link-text-wrapper:hover {color:{color:Link Hover};}
  403. .link-title::after {display:none;}
  404.  
  405. /*----ASK----*/
  406. .note-item .avatar img {border-radius:2em;padding:2px;}
  407. .note-item-answerer .avatar img {border:1px solid {color:Text}30;}
  408. .note-item-asker .avatar img {border:1px solid {color:Answer Posts}30;}
  409. .note-item .text:after {display:none;}
  410. .note-item .text {font-size:{select:Body Font Size};line-height:150%;}
  411. .note-item-asker .text {
  412.     background:{color:Answer Posts}20;
  413.     border: 1px solid {color:Answer Posts}20;
  414.     color:{color:Answer Posts};
  415.     }
  416. .note-item-answerer .text {
  417.     background:{color:Text}10;
  418.     border: 1px solid {color:Text}10;
  419.     color:{color:Text}90;
  420.     }    
  421. .note-item .text .answerer,
  422. .note-item .text .asker {
  423.     color:{color:Bold};
  424.     font-style:italic;
  425.     font-size:calc({select:Body Font Size} - 20%);
  426.     }
  427.  
  428. /*----CHAT----*/
  429. .conversation .label {
  430.     color:{color:Bold};
  431.     font-family:{text:Header Font};
  432.     font-size:calc({select:Body Font Size} - 20%);
  433.     font-weight:700;
  434.     text-transform:uppercase;
  435.     letter-spacing:1.25px;
  436.     }
  437. .conversation .chat, .chat-alt {
  438.     font-family:{text:Body Font};
  439.     margin:0px;
  440.     padding-bottom:14px;
  441.     padding-top:14px;
  442.     border-bottom:0.5px dashed rgba({RGBcolor:Text},0.2);}  
  443.  
  444. /*----PHOTO and VIDEO----*/
  445. img{height:auto;width:auto;max-height:100%;max-width:100%;margin:0 auto;}
  446. .video-wrapper {height:auto;max-width:700px;margin:0 auto;}
  447. .video .posts {min-width:700px;}
  448.  
  449. /*----QUOTES----*/
  450. .quote .source {margin-top:10px;position:relative;font-size:calc({select:Body Font Size} - 20%);text-align:right;}
  451. .quote .source:before {content: "";display:none;}
  452. .quote .post-content blockquote:before {letter-spacing:1px;}
  453. .quote .post-content blockquote:after {margin-left:0;letter-spacing:1px;}
  454. .quote .post-content blockquote {
  455.     color:{color:Bold};
  456.     border:none;
  457.     font-family:{text:Header Font}, Helvetica Neue, sans-serif;
  458.     font-size:calc({select:Body Font Size} + 150%);
  459.     font-weight:bold;
  460.     line-height:160%;
  461.     margin:0;
  462.     padding:0 5px 0 0;
  463.     quotes: "“" "”" "‘" "’";
  464.     word-break:break-word;
  465.     }
  466.  
  467. /*----REBLOG----*/
  468. .post-avatar-image {border-radius:100%;padding:1px;border:1px solid {color:Borders};}
  469.  
  470. /*------------------------------------------------------POST FOOTER----*/
  471.  
  472. /*----TAGS----*/
  473. a.meta-item.tag-link:before {content:'';} /* removes the # */
  474. a.meta-item.tag-link{
  475.     color:{color:Accent};
  476.     background:{color:Accent}20;
  477.     padding: 0.3em 0.8em;
  478.     text-transform:none;
  479.     border-radius: 3px;
  480.     transition: all 200ms ease-in-out;
  481.     margin:.5em;
  482.     }
  483.  
  484. a.meta-item.tag-link:hover {
  485.     color:{color:Link Hover};
  486.     background:{color:Link Hover}20;
  487.     }
  488.  
  489. /*----LIKE and REBLOG----*/
  490. .post-controls {color:{color:Titles};transition: all 200ms ease-in-out;transform:scale(0.8,0.8);}
  491. .post-controls .control .like_button:hover,
  492. .post-controls .control .reblog_button:hover,
  493. .post-controls .control .share:hover {
  494.     color: {color:Link Hover};
  495.     transition: all 200ms ease-in-out;
  496.     }
  497. .reblog-link:hover:before {color:{color:Titles};}
  498.  
  499. /*----POST NOTES----*/
  500. .date-notes, .post-notes, .post-extra {font-family:{text:Body Font};}
  501. .date-notes {font-size:.8em;transition: all 200ms ease-in-out;}
  502. .post-notes {color:{color:Titles};}
  503. .post-extra {
  504.     font-size:calc({select:Body Font Size} - 33.333%);
  505.     line-height:130%;
  506.     width:auto;
  507.     margin:1em auto;
  508.     }
  509. a.meta-item.post-notes:hover,
  510. a.meta-item.note-count:hover {color:{color:Link Hover};}
  511. a.meta-item.post-notes, a.meta-item.note-count {
  512.     color:{color:Titles};transition:all 200ms ease-in-out;}
  513.  
  514. /*----PERMALINK POST NOTES----*/
  515. .post-notes ol li {list-style:none;}
  516. .post-notes ol.notes li.note {padding:1em;color:{color:Text}90;}
  517. .post-notes ol.notes li.note img.avatar {
  518.     height:26px;
  519.     width:26px;
  520.     border-radius:2px;
  521.     margin-right:5px;
  522.     }
  523. .post-notes ol.notes li.note span.action {font-weight:normal;}
  524. .post-notes ol.notes li.note .answer_content {font-weight:normal;}
  525. .post-notes ol.notes li.note blockquote a {
  526.     text-decoration:none;
  527.     color:{color:Text}90;
  528.     }
  529. .post-notes ol.notes li.note blockquote {
  530.     border-left:1px solid rgba({RGBcolor:Text},0.15);
  531.     margin-left:4em;
  532.     padding-left:1em;
  533.     }
  534. .post-notes {width:100%;}
  535. .avatar_frame:after {padding:2px;font-size:10px;text-align:center;}
  536. .answer .avatar_frame:after{text-align:left;}
  537. .like .avatar_frame::after {
  538.     content:"\EA05";
  539.     background-color: #d95e40}
  540. .reblog .like .avatar_frame::after {
  541.     content:"\EA05";
  542.     background-color: #d95e40;
  543.     padding:2px;font-size:11px;text-align:center;
  544. }
  545.  
  546. /*-----------------------------------------------------------FOOTER----*/
  547.  
  548. /*----PAGINATION----*/
  549. .pagination {margin:5% 0 5% 0;text-align:center;}
  550. .pagination a, .perma-pagination a, .current_page {
  551.     border-radius:4px;
  552.     padding:6px 16px;
  553.     font-family:{text:Header Font};
  554.     font-size:10px;
  555.     text-transform:uppercase;
  556.     letter-spacing:1.5px;
  557.     text-decoration:none;
  558.     margin:0 2px;
  559.     }
  560. .jump_page {
  561.     color:{color:Accent};
  562.     background-color:{color:Background};
  563.     }    
  564. .current_page, .jump_page:hover {
  565.     color:{color:Link Hover};
  566.     background:rgba({RGBcolor:Link Hover},.1);
  567.     }  
  568.  
  569. /*----SCROLL TO TOP----*/    
  570. #totop {
  571.     z-index:900;
  572.     cursor:pointer;
  573.     width:51px;
  574.     height:51px;
  575.     bottom:10px;
  576.     right:10px;
  577.     position:fixed;
  578.     display:none;
  579.     text-decoration:none;
  580.     overflow:hidden;
  581.     border:none;
  582.     }
  583.  
  584. /*----TUMBLR CONTROLS ICON----*/
  585. .hcontrols .lnr {
  586.     font-size:12px;
  587.     color:{color:Sidebar Links};
  588.     border-radius:100%;
  589.     padding:.5em;
  590.     }
  591. .hcontrols {
  592.     position:fixed;
  593.     top:1em;
  594.     right:1em;
  595.     z-index:999999999;
  596.     display:inline-block;
  597.     vertical-align:middle;
  598.     }
  599.  
  600. /*----TUMBLR CONTROLS----*/
  601. iframe.tmblr-iframe {
  602.     z-index:9999999999;
  603.     top:0.7em;
  604.     left:auto;
  605.     padding-right:4em;
  606.     opacity:0;
  607.      filter:invert(1) contrast(200%);
  608.         -webkit-filter:invert(1) contrast(150%);
  609.         -o-filter:invert(1) contrast(150%);
  610.         -moz-filter:invert(1) contrast(150%);
  611.         -ms-filter:invert(1) contrast(150%);
  612.     transform:scale(.6);
  613.     transform-origin:right top;
  614.     vertical-align:top;
  615.     transition:all 200ms ease-in-out;
  616.     }
  617. iframe.tmblr-iframe:hover {opacity:0.4;}
  618.  
  619. /*-------------------------------------------------------CUSTOM CSS----*/
  620.  
  621. {CustomCSS}
  622.  
  623.  
  624. /*---------------------------------------------------------------------*/
  625.  
  626. </style>
  627. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  628. <script type="text/javascript">
  629. $(function() {      
  630.       $(window).scroll(function() {
  631.         if($(this).scrollTop() != 0) {
  632.             $('#totop').fadeIn();        
  633.         }
  634.         else {
  635.             $('#totop').fadeOut();      
  636.         }
  637.       });
  638.  
  639.       $('#totop').click(function() {
  640.         $('body,html').animate({scrollTop:0},800);
  641.       });
  642. });
  643. </script>
  644.  
  645. <!-----------------------------------------------------------------------
  646.  
  647.                                ASK FORM
  648.  
  649. Want to add text to your ask page? Here's a quick tutorial!
  650.  
  651. STEP 1 - Create you desired content in HTML format
  652.  
  653. Example: <p><strong>Question 1?<strong></p><ul><li>Answer 1.</li></ul>
  654.  
  655. STEP 2 - Insert the text within the '' of $('#ask_form').before('');
  656.        
  657.        ex: $('#ask_form').before('<p><strong>Question 1?<strong></p><ul><li>Answer 1.</li></ul>');
  658.        
  659. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  660.  
  661. QUICK TIPS...
  662.  
  663. TIP 1 - Make sure there are no spaces between the elements.
  664.  
  665. Do:     <p><strong>Question 1?<strong></p><ul><li>Answer 1.</li></ul>
  666. Don't:  <p><strong>Question 1?<strong></p>
  667.        <ul><li>Answer 1.</li></ul>
  668.  
  669. TIP 2 - Avoid using contractions. The script will read it as you closing the .before('') content. As a result, your content will not appear.
  670.  
  671.  
  672. ------------------------------------------------------------------------>
  673.  
  674. <script type="text/javascript">
  675. $(document).ready(function(){
  676.    $('#ask_form').before('');
  677. });
  678. </script>
  679.  
  680. <!----------------------------------------------------------ASK FORM---->
  681. </head>
  682. <body>
  683. <div id="totop"><span class="lnr lnr-chevron-up"></span></div>
  684.  
  685. <div class="container">
  686. <div class="hcontrols"><i class="lnr lnr-cog"></i></div>
  687. <!-----------------------------------------------------------SIDEBAR---->
  688. <header>
  689. <sidebar>
  690. <section class="group banner-group" style="border:none;">
  691.     <div class="avatar-{AvatarShape}">
  692.         {block:ShowAvatar}
  693.         <a href="/">
  694.         <img class="avatar-{AvatarShape}" src="{PortraitURL-128}"></a>
  695.         {/block:ShowAvatar}
  696.     </div>
  697.     <div class="nav-wrapper">    
  698.     <ul class="nav-links">
  699.         {block:ShowTitle}
  700.         <div class="group-label blogtitle">
  701.         <a href="/">{Title}</a></div>
  702.         {/block:ShowTitle}
  703.    
  704.         {block:ShowDescription}
  705.         <div class="description">{Description}</div>
  706.         {/block:ShowDescription}
  707.        
  708.         <li><a href="/" class="label label-home
  709.        {block:HomePage}current-page{/block:HomePage}">
  710.         {text:Home Label}</a></li>
  711.    
  712.         {block:AskEnabled}
  713.         <li><a href="/ask" class="label
  714.        {block:AskPage}current-page{/block:AskPage}">{AskLabel}</a>
  715.         </li>
  716.         {/block:AskEnabled}
  717.  
  718.         {block:SubmissionsEnabled}
  719.         <li><a href="/submit" class="label
  720.        {block:SubmitPage}current-page{/block:SubmitPage}">{SubmitLabel}</a>
  721.         </li>
  722.         {/block:SubmissionsEnabled}
  723.        
  724.         {block:ifShowSearch}
  725.         <form class="search" action="javascript:return false">
  726. <input type="text" class="query" name="q" placeholder="{lang:Search}">
  727. </form>
  728. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  729. <script>
  730. $(document).ready(function(){
  731.    $('.search').submit(function(event){
  732.        var value = $('input:first').val();
  733.        location.replace('http://{Name}.tumblr.com/tagged/' + value);
  734.    });
  735. });
  736. </script>
  737.         {/block:ifShowSearch}
  738.     </ul> <!-- nav-links -->
  739.     </div> <!-- nav-wrapper -->
  740. </section> <!-- banner-group -->
  741.  
  742. {block:HasPages}
  743. <section class="group links-group">
  744.     <div class="nav-wrapper">
  745.     <ul class="nav-links">
  746.         <div class="group-label">{text:Navigation Title}</div>
  747.         {block:Pages}
  748.         <li><a href="{URL}" class="label {CurrentState} {ExternalState}">
  749.         {Label}</a></li>
  750.         {/block:Pages}
  751.         {block:ifNotTagsSection}
  752.         {block:TagPage}
  753.         <li><a href="{TagURL}" class="label current-page"><i class="lnr lnr-bookmark" style="font-size:calc({select:Sidebar Font Size} - 10%);"></i> <span style="text-transform:capitalize">{Tag}</span></a>
  754.         {/block:TagPage}
  755.         {/block:ifNotTagsSection}
  756.     </ul> <!-- nav-links -->
  757.     </div> <!-- nav-wrapper -->
  758. </section> <!-- links-group -->
  759. {/block:HasPages}
  760.  
  761. {block:ifTagsSection}
  762. <section class="group tags-group">
  763. <div class="nav-wrapper">
  764.     <ul class="nav-links">
  765.     <div class="group-label">{lang:Tags}</div>
  766.         <li><a href="{text:Tag 1 url}">{text:Tag 1}</a></li>
  767.         <li><a href="{text:Tag 2 url}">{text:Tag 2}</a></li>
  768.         <li><a href="{text:Tag 3 url}">{text:Tag 3}</a></li>
  769.         <li><a href="{text:Tag 4 url}">{text:Tag 4}</a></li>
  770.         <li><a href="{text:Tag 5 url}">{text:Tag 5}</a></li>
  771.         {block:TagPage}
  772.         <li><a href="{TagURL}" class="label current-page"><i class="lnr lnr-bookmark" style="font-size:calc({select:Sidebar Font Size} - 10%);"></i> <span style="text-transform:capitalize">{Tag}</span></a>
  773.         {/block:TagPage}
  774. <!-----------------------------------------------------------------------
  775. WANT MORE TAGS?
  776.  
  777. <li><a href="{text:Tag 6 url}">{text:Tag 6}</a></li>
  778. <li><a href="{text:Tag 7 url}">{text:Tag 7}</a></li>
  779. <li><a href="{text:Tag 8 url}">{text:Tag 8}</a></li>
  780.  
  781. ------------------------------------------------------------------------>
  782.     </ul> <!-- nav-links -->
  783. </div> <!-- nav-wrapper -->
  784. </section> <!-- tags-group -->
  785. {/block:ifTagsSection}
  786.  
  787. </sidebar>
  788. </header>
  789.  
  790. <!-------------------------------------------------------------POSTS---->
  791.  
  792. <main>
  793.  
  794.     {block:TagPage}
  795.     <div class="tag-page">{lang:TagResultCount posts tagged Tag 2}</div>
  796.     {/block:TagPage}
  797.    
  798.     {block:SearchPage}
  799.     <div class="search-page">{lang:Found SearchResultCount results for SearchQuery 2}</div>
  800.     {/block:SearchPage}
  801.    
  802. {block:Posts}
  803. <article class="{block:Text}text{/block:Text}{block:Photoset}photoset{/block:Photoset}{block:Photo}photo{/block:Photo}{block:RebloggedFrom}reblog{/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}" id="{PostID}">
  804.  
  805. <div class="posts">
  806.    
  807. {block:Text}
  808. <div class="post-content">
  809.     {block:Title}
  810.     <h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>
  811.     {/block:Title}
  812.     {block:NotReblog}
  813.     <div class="body-text">{Body}</div>
  814.     {/block:NotReblog}
  815.    
  816. {block:RebloggedFrom}
  817. <div class="reblog-list">
  818.    
  819. {block:Reblogs}
  820. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  821.    
  822.     <div class="post-reblog-header">
  823.     {block:HasAvatar}
  824.     <div class="post-avatar">
  825.     <div class="post-avatar-wrapper">
  826.         {block:HasPermalink}
  827.         <a class="post-avatar-link
  828.        {block:isNotOriginalEntry} sub-icon-reblog
  829.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  830.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  831.         {/block:HasPermalink}
  832.  
  833.         {block:HasNoPermalink}
  834.         <span class="reblog-avatar
  835.        {block:IsDeactivated} inactive{/block:IsDeactivated}
  836.        {block:isNotOriginalEntry} sub-icon-reblog
  837.        {/block:isNotOriginalEntry}">
  838.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  839.         {/block:HasNoPermalink}
  840.  
  841.     </div> <!-- post-avatar-wrapper -->
  842.     </div> <!-- post-avatar -->
  843.     {/block:HasAvatar}
  844.  
  845.     {block:HasPermalink}
  846.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  847.     {Username}</a>
  848.     {/block:HasPermalink}
  849.  
  850.     {block:HasNoPermalink}
  851.     <span class="post-tumblelog-name
  852.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  853.     {Username}</span>
  854.     {/block:HasNoPermalink}
  855.     </div> <!-- post-reblog-header -->
  856.  
  857.     <div class="post-reblog-content">
  858.     <div class="post-body">{Body}</div>
  859.     </div> <!-- post-reblog-content -->
  860.  
  861. </div> <!-- original-reblog-content -->
  862. {/block:Reblogs}
  863. </div> <!-- reblog-list -->
  864. {/block:RebloggedFrom}
  865. </div> <!-- post-content -->
  866. {/block:Text}
  867.  
  868. <!------------------------------------------------------------ANSWER---->
  869.  
  870. {block:Answer}
  871. <div class="post-content">
  872.  
  873. <div class="note-item note-item-asker">
  874.     <div class="text">
  875.         <p class="asker"><strong>{Asker}</strong> asked:</p>
  876.         <div class="asker-question">{Question}</div>
  877.     </div> <!-- text -->
  878.     <div class="avatar">
  879.         <img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
  880.     </div> <!-- avatar -->
  881. </div> <!-- note-item note-item-asker -->
  882.  
  883. {block:Answerer}
  884. <div class="note-item note-item-answerer">
  885.     <div class="text">
  886.         <p class="answerer"><strong>{Answerer}</strong> answered:</p>
  887.         <div class="answerer-answer">{Answer}</div>
  888.     </div> <!-- text -->
  889.    
  890.     <div class="avatar">
  891.     <img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
  892.     </div> <!-- avatar -->
  893. </div> <!-- note-item note-item-answerer -->
  894. {/block:Answerer}
  895.  
  896. {block:NotReblog}
  897. <div class="replies">{Replies}</div>
  898. {/block:NotReblog}
  899.  
  900. {block:RebloggedFrom}
  901. <div class="reblog-list">
  902.    
  903. {block:Reblogs}
  904. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  905.    
  906.     <div class="post-reblog-header">
  907.     {block:HasAvatar}
  908.     <div class="post-avatar">
  909.     <div class="post-avatar-wrapper">
  910.         {block:HasPermalink}
  911.         <a class="post-avatar-link
  912.        {block:isNotOriginalEntry} sub-icon-reblog
  913.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  914.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  915.         {/block:HasPermalink}
  916.  
  917.         {block:HasNoPermalink}
  918.         <span class="reblog-avatar
  919.        {block:IsDeactivated} inactive{/block:IsDeactivated}
  920.        {block:isNotOriginalEntry} sub-icon-reblog
  921.        {/block:isNotOriginalEntry}">
  922.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  923.         {/block:HasNoPermalink}
  924.  
  925.     </div> <!-- post-avatar-wrapper -->
  926.     </div> <!-- post-avatar -->
  927.     {/block:HasAvatar}
  928.  
  929.     {block:HasPermalink}
  930.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  931.     {Username}</a>
  932.     {/block:HasPermalink}
  933.  
  934.     {block:HasNoPermalink}
  935.     <span class="post-tumblelog-name
  936.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  937.     {Username}</span>
  938.     {/block:HasNoPermalink}
  939.     </div> <!-- post-reblog-header -->
  940.  
  941. <div class="post-reblog-content">
  942.     <div class="post-body">{Body}</div>
  943. </div> <!-- post-reblog-content -->
  944.  
  945. </div> <!-- original-reblog-content -->
  946. {/block:Reblogs}
  947. </div> <!-- reblog-list -->
  948. {/block:RebloggedFrom}
  949. </div> <!-- post-content -->
  950. {/block:Answer}
  951.  
  952. <!-------------------------------------------------------------QUOTE---->
  953.  
  954. {block:Quote}
  955. <div class="post-content">
  956.     <blockquote class="{Length}">{Quote}</blockquote>
  957.         {block:Source}
  958.         <div class="source">{Source}</div>
  959.         {/block:Source}
  960. </div>
  961. {/block:Quote}
  962.  
  963. <!-------------------------------------------------------------LINK---->
  964.  
  965. {block:Link}
  966. <div class="post-content
  967. {block:Description} with-caption{/block:Description}
  968. {block:Thumbnail} with-thumbnail{/block:Thumbnail}">
  969. <div class="link-wrapper">
  970.     <a {Target} href="{URL}" class="link link-container">
  971.         {block:Thumbnail}<div class="link-thumbnail">
  972.         <img src="{Thumbnail-HighRes}" alt="" /></div>
  973.         {/block:Thumbnail}
  974.  
  975.         <div class="link-text-wrapper clearfix">
  976.         <div class="link-text">
  977.             {block:Host}
  978.             <div class="link-host" style="font-weight:normal;font-size:10px;">{Host}</div>
  979.             {/block:Host}
  980.             <h1 class="link-title">{Name} . . .</h1>
  981.                 {block:Excerpt}
  982.                 <div class="link-excerpt">{Excerpt}</div>
  983.                 {/block:Excerpt}
  984.                 {block:Author}
  985.                 <div class="link-author">{Author}</div>
  986.                 {/block:Author}
  987.         </div> <!-- link-text -->
  988.         </div> <!-- link-text-wrapper clearfix -->
  989.     </a> <!-- link -->
  990. </div> <!-- link-wrapper -->
  991.  
  992. {block:NotReblog}
  993. <div class="caption">{Description}</div>
  994. {/block:NotReblog}
  995.  
  996. {block:RebloggedFrom}
  997. <div class="reblog-list">
  998.    
  999. {block:Reblogs}
  1000. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1001.    
  1002.     <div class="post-reblog-header">
  1003.     {block:HasAvatar}
  1004.     <div class="post-avatar">
  1005.     <div class="post-avatar-wrapper">
  1006.         {block:HasPermalink}
  1007.         <a class="post-avatar-link
  1008.        {block:isNotOriginalEntry} sub-icon-reblog
  1009.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1010.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  1011.         {/block:HasPermalink}
  1012.  
  1013.         {block:HasNoPermalink}
  1014.         <span class="reblog-avatar
  1015.        {block:IsDeactivated} inactive{/block:IsDeactivated}
  1016.        {block:isNotOriginalEntry} sub-icon-reblog
  1017.        {/block:isNotOriginalEntry}">
  1018.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  1019.         {/block:HasNoPermalink}
  1020.  
  1021.     </div> <!-- post-avatar-wrapper -->
  1022.     </div> <!-- post-avatar -->
  1023.     {/block:HasAvatar}
  1024.  
  1025.     {block:HasPermalink}
  1026.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1027.     {Username}</a>
  1028.     {/block:HasPermalink}
  1029.  
  1030.     {block:HasNoPermalink}
  1031.     <span class="post-tumblelog-name
  1032.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1033.     {Username}</span>
  1034.     {/block:HasNoPermalink}
  1035.     </div> <!-- post-reblog-header -->
  1036.  
  1037. <div class="post-reblog-content">
  1038.     <div class="post-body">{Body}</div>
  1039. </div> <!-- post-reblog-content -->
  1040.  
  1041. </div> <!-- original-reblog-content -->
  1042. {/block:Reblogs}
  1043. </div> <!-- reblog-list -->
  1044. {/block:RebloggedFrom}
  1045. </div> <!-- post-content -->
  1046. {/block:Link}
  1047.  
  1048. <!--------------------------------------------------------------CHAT---->
  1049.  
  1050. {block:Chat}
  1051. <div class="post-content">
  1052.  
  1053. {block:Title}
  1054. <h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>
  1055. {/block:Title}
  1056.  
  1057. <div class="conversation">
  1058.     {block:Lines}
  1059.         <div class="chat chat-{Alt}">
  1060.             {block:Label}<span class="label">{Label}</span>{/block:Label}
  1061.             {Line}
  1062.         </div>
  1063.     {/block:Lines}
  1064. </div> <!-- conversation -->
  1065.  
  1066. {block:RebloggedFrom}
  1067. <div class="reblog-list">
  1068.    
  1069. {block:Reblogs}
  1070. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1071.    
  1072.     <div class="post-reblog-header">
  1073.     {block:HasAvatar}
  1074.     <div class="post-avatar">
  1075.     <div class="post-avatar-wrapper">
  1076.         {block:HasPermalink}
  1077.         <a class="post-avatar-link
  1078.        {block:isNotOriginalEntry} sub-icon-reblog
  1079.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1080.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  1081.         {/block:HasPermalink}
  1082.  
  1083.         {block:HasNoPermalink}
  1084.         <span class="reblog-avatar
  1085.        {block:IsDeactivated} inactive{/block:IsDeactivated}
  1086.        {block:isNotOriginalEntry} sub-icon-reblog
  1087.        {/block:isNotOriginalEntry}">
  1088.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  1089.         {/block:HasNoPermalink}
  1090.  
  1091.     </div> <!-- post-avatar-wrapper -->
  1092.     </div> <!-- post-avatar -->
  1093.     {/block:HasAvatar}
  1094.  
  1095.     {block:HasPermalink}
  1096.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1097.     {Username}</a>
  1098.     {/block:HasPermalink}
  1099.  
  1100.     {block:HasNoPermalink}
  1101.     <span class="post-tumblelog-name
  1102.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1103.     {Username}</span>
  1104.     {/block:HasNoPermalink}
  1105.     </div> <!-- post-reblog-header -->
  1106.  
  1107. <div class="post-reblog-content">
  1108.     <div class="post-body">{Body}</div>
  1109. </div> <!-- post-reblog-content -->
  1110.  
  1111. </div> <!-- original-reblog-content -->
  1112. {/block:Reblogs}
  1113. </div> <!-- reblog-list -->
  1114. {/block:RebloggedFrom}
  1115. </div> <!-- post-content -->
  1116. {/block:Chat}
  1117.  
  1118.  
  1119. <!-------------------------------------------------------------PHOTO---->
  1120.  
  1121. {block:Photo}
  1122. <figure class="post-content {block:HighRes}high-res{/block:HighRes}" data-photo-width="{PhotoWidth-HighRes}">
  1123.  
  1124. <div class="photo-wrapper">
  1125. <div class="photo-wrapper-inner">
  1126. {LinkOpenTag}
  1127. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}"{block:LivePhoto}data-live-photo="{LivePhotoURL}" data-live-photo-still-image-time="{LivePhotoStillImageTime}"{/block:LivePhoto}>
  1128. {LinkCloseTag}
  1129. </div> <!-- photo-wrapper-inner -->
  1130. </div> <!-- photo-wrapper -->
  1131.  
  1132. {block:NotReblog}
  1133. <figcaption class="caption" style="border:none;">{Caption}</figcaption>
  1134. {/block:NotReblog}
  1135.    
  1136. {block:RebloggedFrom}
  1137. <div class="reblog-list">
  1138.    
  1139. {block:Reblogs}
  1140. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1141.    
  1142.     <div class="post-reblog-header">
  1143.     {block:HasAvatar}
  1144.     <div class="post-avatar">
  1145.     <div class="post-avatar-wrapper">
  1146.         {block:HasPermalink}
  1147.         <a class="post-avatar-link
  1148.        {block:isNotOriginalEntry} sub-icon-reblog
  1149.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1150.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  1151.         {/block:HasPermalink}
  1152.  
  1153.         {block:HasNoPermalink}
  1154.         <span class="reblog-avatar
  1155.        {block:IsDeactivated} inactive{/block:IsDeactivated}
  1156.        {block:isNotOriginalEntry} sub-icon-reblog
  1157.        {/block:isNotOriginalEntry}">
  1158.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  1159.         {/block:HasNoPermalink}
  1160.  
  1161.     </div> <!-- post-avatar-wrapper -->
  1162.     </div> <!-- post-avatar -->
  1163.     {/block:HasAvatar}
  1164.  
  1165.     {block:HasPermalink}
  1166.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1167.     {Username}</a>
  1168.     {/block:HasPermalink}
  1169.  
  1170.     {block:HasNoPermalink}
  1171.     <span class="post-tumblelog-name
  1172.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1173.     {Username}</span>
  1174.     {/block:HasNoPermalink}
  1175.     </div> <!-- post-reblog-header -->
  1176.  
  1177. <div class="post-reblog-content">
  1178.     <div class="post-body">{Body}</div>
  1179. </div> <!-- post-reblog-content -->
  1180.  
  1181. </div> <!-- original-reblog-content -->
  1182. {/block:Reblogs}
  1183. </div> <!-- reblog-list -->
  1184. {/block:RebloggedFrom}
  1185. </figure> <!-- post-content -->
  1186. {/block:Photo}
  1187.  
  1188. <!----------------------------------------------------------PHOTOSET---->
  1189.  
  1190. {block:Photoset}
  1191. <figure class="post-content photoset">{Photoset}
  1192.    
  1193. {block:NotReblog}
  1194. <figcaption class="caption">{Caption}</figcaption>
  1195. {/block:NotReblog}
  1196.  
  1197. {block:RebloggedFrom}
  1198. <div class="reblog-list">
  1199.    
  1200. {block:Reblogs}
  1201. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1202.    
  1203.     <div class="post-reblog-header">
  1204.     {block:HasAvatar}
  1205.     <div class="post-avatar">
  1206.     <div class="post-avatar-wrapper">
  1207.         {block:HasPermalink}
  1208.         <a class="post-avatar-link
  1209.        {block:isNotOriginalEntry} sub-icon-reblog
  1210.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1211.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  1212.         {/block:HasPermalink}
  1213.  
  1214.         {block:HasNoPermalink}
  1215.         <span class="reblog-avatar
  1216.        {block:IsDeactivated} inactive{/block:IsDeactivated}
  1217.        {block:isNotOriginalEntry} sub-icon-reblog
  1218.        {/block:isNotOriginalEntry}">
  1219.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  1220.         {/block:HasNoPermalink}
  1221.  
  1222.     </div> <!-- post-avatar-wrapper -->
  1223.     </div> <!-- post-avatar -->
  1224.     {/block:HasAvatar}
  1225.  
  1226.     {block:HasPermalink}
  1227.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1228.     {Username}</a>
  1229.     {/block:HasPermalink}
  1230.  
  1231.     {block:HasNoPermalink}
  1232.     <span class="post-tumblelog-name
  1233.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1234.     {Username}</span>
  1235.     {/block:HasNoPermalink}
  1236.     </div> <!-- post-reblog-header -->
  1237.  
  1238. <div class="post-reblog-content">
  1239.     <div class="post-body">{Body}</div>
  1240. </div> <!-- post-reblog-content -->
  1241.  
  1242. </div> <!-- original-reblog-content -->
  1243. {/block:Reblogs}
  1244. </div> <!-- reblog-list -->
  1245. {/block:RebloggedFrom}
  1246. </figure> <!-- post-content -->
  1247. {/block:Photoset}
  1248.  
  1249. <!-------------------------------------------------------------AUDIO---->
  1250.  
  1251. {block:Audio}
  1252. <div class="post-content">
  1253. <div class="audio_container">
  1254. {block:AudioEmbed}{AudioEmbed color="white"}{/block:AudioEmbed}
  1255. </div>
  1256.  
  1257. {block:NotReblog}
  1258. <div class="caption">{Caption}</div>
  1259. {/block:NotReblog}
  1260.  
  1261. {block:RebloggedFrom}
  1262. <div class="reblog-list">
  1263.    
  1264. {block:Reblogs}
  1265. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1266.    
  1267.     <div class="post-reblog-header">
  1268.     {block:HasAvatar}
  1269.     <div class="post-avatar">
  1270.     <div class="post-avatar-wrapper">
  1271.         {block:HasPermalink}
  1272.         <a class="post-avatar-link
  1273.        {block:isNotOriginalEntry} sub-icon-reblog
  1274.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1275.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  1276.         {/block:HasPermalink}
  1277.  
  1278.         {block:HasNoPermalink}
  1279.         <span class="reblog-avatar
  1280.        {block:IsDeactivated} inactive{/block:IsDeactivated}
  1281.        {block:isNotOriginalEntry} sub-icon-reblog
  1282.        {/block:isNotOriginalEntry}">
  1283.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  1284.         {/block:HasNoPermalink}
  1285.  
  1286.     </div> <!-- post-avatar-wrapper -->
  1287.     </div> <!-- post-avatar -->
  1288.     {/block:HasAvatar}
  1289.  
  1290.     {block:HasPermalink}
  1291.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1292.     {Username}</a>
  1293.     {/block:HasPermalink}
  1294.  
  1295.     {block:HasNoPermalink}
  1296.     <span class="post-tumblelog-name
  1297.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1298.     {Username}</span>
  1299.     {/block:HasNoPermalink}
  1300.     </div> <!-- post-reblog-header -->
  1301.  
  1302. <div class="post-reblog-content">
  1303.     <div class="post-body">{Body}</div>
  1304. </div> <!-- post-reblog-content -->
  1305.  
  1306. </div> <!-- original-reblog-content -->
  1307. {/block:Reblogs}
  1308. </div> <!-- reblog-list -->
  1309. {/block:RebloggedFrom}
  1310. </div> <!-- post-content -->
  1311. {/block:Audio}
  1312.  
  1313. <!-------------------------------------------------------------VIDEO---->
  1314.  
  1315. {block:Video}
  1316. <figure class="post-content">
  1317. <div class="video-wrapper">{Video-700}</div>
  1318.  
  1319. {block:NotReblog}
  1320. <figcaption class="caption" style="border:none;">{Caption}</figcaption>
  1321. {/block:NotReblog}
  1322.  
  1323. {block:RebloggedFrom}
  1324. <div class="reblog-list">
  1325.    
  1326. {block:Reblogs}
  1327. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1328.    
  1329.     <div class="post-reblog-header">
  1330.     {block:HasAvatar}
  1331.     <div class="post-avatar">
  1332.     <div class="post-avatar-wrapper">
  1333.         {block:HasPermalink}
  1334.         <a class="post-avatar-link
  1335.        {block:isNotOriginalEntry} sub-icon-reblog
  1336.        {/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1337.         <img class="post-avatar-image" src="{PortraitURL-64}"></a>
  1338.         {/block:HasPermalink}
  1339.  
  1340.         {block:HasNoPermalink}
  1341.         <span class="reblog-avatar
  1342.        {block:IsDeactivated} inactive{/block:IsDeactivated}
  1343.        {block:isNotOriginalEntry} sub-icon-reblog
  1344.        {/block:isNotOriginalEntry}">
  1345.         <img class="post-avatar-image" src="{PortraitURL-64}"></span>
  1346.         {/block:HasNoPermalink}
  1347.  
  1348.     </div> <!-- post-avatar-wrapper -->
  1349.     </div> <!-- post-avatar -->
  1350.     {/block:HasAvatar}
  1351.  
  1352.     {block:HasPermalink}
  1353.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1354.     {Username}</a>
  1355.     {/block:HasPermalink}
  1356.  
  1357.     {block:HasNoPermalink}
  1358.     <span class="post-tumblelog-name
  1359.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1360.     {Username}</span>
  1361.     {/block:HasNoPermalink}
  1362.     </div> <!-- post-reblog-header -->
  1363.  
  1364. <div class="post-reblog-content">
  1365.     <div class="post-body">{Body}</div>
  1366. </div> <!-- post-reblog-content -->
  1367.  
  1368. </div> <!-- original-reblog-content -->
  1369. {/block:Reblogs}
  1370. </div> <!-- reblog-list -->
  1371. {/block:RebloggedFrom}
  1372. </figure> <!-- post-content -->
  1373. {/block:Video}
  1374.  
  1375. <!--------------------------------------------------------POST EXTRA---->
  1376.  
  1377. <section class="inline-meta post-extra{block:RebloggedFrom} has-reblog
  1378. {/block:RebloggedFrom}{block:ContentSource} has-source
  1379. {/block:ContentSource}{block:HasTags} has-tags{/block:HasTags}">
  1380.  
  1381.     {block:ContentSource}
  1382.     <a class="meta-item source-link" href="{SourceURL}">
  1383.     {lang:Source}: {SourceTitle}</a>
  1384.     {/block:ContentSource}
  1385.  
  1386.     {block:HasTags} <!-----TAGS---->
  1387.         {block:Tags}
  1388.         <a class="meta-item tag-link" href="{TagURL}">{Tag}</a>
  1389.         {/block:Tags}
  1390.     {/block:HasTags}
  1391. </section> <!-- inline-meta post-extra -->
  1392.  
  1393. {block:Date}
  1394. <section class="panel">
  1395. <footer class="post-footer">
  1396.     <section class="panel">
  1397.         <section class="inline-meta date-notes">
  1398.             <div class="date-note-wrapper">
  1399.                 {block:NoteCount}
  1400.                 <span>
  1401.                 <a href="{Permalink}#notes" class="meta-item post-notes" style="font-weight:normal">
  1402.                 {NoteCountWithLabel}</a>
  1403.                 </span>
  1404.                 {/block:NoteCount}
  1405.            
  1406.                 <a href="{Permalink}" title="{TimeAgo}"
  1407.                class="meta-item post-date">
  1408.                 {ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>
  1409.             </div>
  1410.         </section> <!-- inline-meta date-notes -->
  1411.    
  1412.         <section class="post-controls">
  1413.             <div class="controls-wrapper">
  1414.                 <div class="control reblog-control">
  1415.                 {ReblogButton size="24" color="black"}</div>
  1416.                 <div class="control like-control">
  1417.                 {LikeButton size="24" color="black"}</div>
  1418.             </div> <!-- controls-wrapper -->
  1419.         </section> <!-- post-controls -->
  1420.     </section> <!-- panel -->
  1421.  
  1422.     {block:PermalinkPage}
  1423.         <div class="post-notes">
  1424.         {block:PostNotes}{PostNotes-64}{/block:PostNotes}
  1425.         </div>
  1426.     {/block:PermalinkPage}
  1427. </footer> <!-- post-footer -->
  1428. </section> <!-- panel -->
  1429. {/block:Date}
  1430.                                        
  1431. {block:PermalinkPage}
  1432. {block:Date}
  1433. {block:IfDisqusShortname}
  1434. <section class="comments">
  1435. <div id="disqus_thread"></div>
  1436. <script type="text/javascript">
  1437.                                                       (function() {
  1438.                                                        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  1439.                                                        dsq.src = 'https://{text:Disqus Shortname}.disqus.com/embed.js';
  1440.                                                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  1441.                                                       })();
  1442. </script>
  1443. <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript>
  1444. <a href="https://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
  1445. </section> <!-- comments -->
  1446. {/block:IfDisqusShortname}
  1447. {/block:Date}
  1448. {/block:PermalinkPage}
  1449.  
  1450. <!---------------------------------------------------------------------->
  1451. </article><!-- end of article -->
  1452. </div><!-- end of .posts -->
  1453. {/block:Posts}
  1454.  
  1455. <!---------------------------------------------------------------------->
  1456. {block:Pagination}
  1457. <div class="pagination">
  1458.     {block:PreviousPage}
  1459.     <a href="{PreviousPage}" class="previous jump_page">
  1460.     {lang:Previous}</a>
  1461.     {/block:PreviousPage}
  1462.    
  1463.     {block:JumpPagination length="7"}
  1464.         {block:CurrentPage}
  1465.         <span class="current_page">{PageNumber}</span>
  1466.         {/block:CurrentPage}
  1467.         {block:JumpPage}
  1468.         <a class="jump_page" href="{URL}">{PageNumber}</a>
  1469.         {/block:JumpPage}
  1470.     {/block:JumpPagination}
  1471.     {block:NextPage}
  1472.     <a href="{NextPage}" class="next jump_page">
  1473.     {lang:Next}</a>
  1474.     <a class="jump_page" href="{BlogURL}page/{TotalPages}">Last</a>
  1475.     {/block:NextPage}
  1476. </div><!-- end of .pagination -->
  1477. <div><p style="letter-spacing:.5px;text-align:center;font-size:8px;margin-top:1em;color:{TitleColor}70;"><i>Theme by  </i><a href="https://boodaloo.tumblr.com">BOO</a></p></div>
  1478. {/block:Pagination}
  1479.  
  1480. </main><!-- end of main -->
  1481.  
  1482. </body>
  1483. </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!