API tools faq
paste
Advertisement
BOOdalinski

COBBLESTONE (Tumblr Theme) WIP grid

BOOdalinski
Mar 18th, 2020
248
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 46.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="https://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5.  
  6. <!--------------------------------------------------------------------
  7.  
  8.                        Cobblestone GRID
  9.  
  10. --------------------------------------------------------------------->
  11.  
  12.  
  13.     <meta charset="utf-8">
  14.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  15.     <meta name="theme-color" content="#35465D">
  16.     <link rel="shortcut icon" href="{Favicon}">
  17.     <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  18.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19.     <link rel="stylesheet" href="https://static.tumblr.com/mftixld/AmMpjzwer/main-min.css">
  20.  
  21.  
  22.     <title>{Title}</title>
  23.     {block:Description}
  24.     <meta name="description" content="{MetaDescription}">
  25.     {/block:Description}
  26.     <link rel="shortcut icon" href="{Favicon}">
  27.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  28.    
  29.     <meta name="if:Banner Aa" content=""/>
  30.     <meta name="if:Banner Italic" content=""/>
  31.     <meta name="if:Style 2" content=""/>
  32.     <meta name="if:Tags Section" content=""/>
  33.     <meta name="if:Show Archive" content=""/>
  34.    
  35.     <!----COLORS---->
  36.     <meta name="color:Posts" content="#FFFFFF">
  37.     <meta name="color:Navbar" content="#FFFFFF">
  38.     <meta name="color:Banner" content="#d3b987">
  39.     <meta name="color:Nav Links" content="#AEAEAE">
  40.     <meta name="color:Overlay" content="#000000">
  41.     <meta name="color:Link Hover" content="#bb860b">
  42.     <meta name="color:Answer Posts" content="#bb860b">
  43.     <meta name="color:Text" content="#666666">
  44.     <meta name="color:Bold" content="#222222">
  45.    
  46.     <!----FONT SIZE---->
  47.     <meta name="select:Body Font Size" content="15px">
  48.     <meta name="select:Body Font Size" content="10px">
  49.     <meta name="select:Body Font Size" content="11px">
  50.     <meta name="select:Body Font Size" content="12px">
  51.     <meta name="select:Body Font Size" content="13px">
  52.     <meta name="select:Body Font Size" content="14px">
  53.     <meta name="select:Body Font Size" content="16px">
  54.     <meta name="select:Body Font Size" content="17px">
  55.     <meta name="select:Body Font Size" content="18px">
  56.  
  57.     <!----Layout---->
  58.     <meta name="select:Post Width" content="700px" title="Wide"/>
  59.     <meta name="select:Post Width" content="640px" title="Regular"/>
  60.     <meta name="select:Post Width" content="45vw" title="2 Columns"/>
  61.     <meta name="select:Post Width" content="30vw" title="3 Columns"/>
  62.    
  63.     <!----FONT WEIGHT---->
  64.     <meta name="select:Banner Font Weight" content="300" title="Light"/>
  65.     <meta name="select:Banner Font Weight" content="400" title="Regular"/>
  66.     <meta name="select:Banner Font Weight" content="500" title="Medium"/>
  67.     <meta name="select:Banner Font Weight" content="600" title="Semi-Bold"/>
  68.     <meta name="select:Banner Font Weight" content="700" title="Bold"/>
  69.     <meta name="select:Banner Font Weight" content="800" title="Extra-Bold"/>
  70.     <meta name="select:Banner Font Weight" content="900" title="Black"/>
  71.  
  72.     <!----FONTS---->    
  73.     <meta name="text:Banner Font" content="Raleway">
  74.     <meta name="text:Header Font" content="Raleway">
  75.     <meta name="text:Body Font" content="Source Sans Pro">
  76.     <meta name="text:Navbar Font" content="Source Sans Pro">
  77.  
  78.     <meta name="select:Navbar Opacity" content="1" title="100%"/>
  79.     <meta name="select:Navbar Opacity" content="0" title="0%"/>
  80.     <meta name="select:Navbar Opacity" content="0.1" title="10%"/>
  81.     <meta name="select:Navbar Opacity" content="0.2" title="20%"/>
  82.     <meta name="select:Navbar Opacity" content="0.3" title="30%"/>
  83.     <meta name="select:Navbar Opacity" content="0.4" title="40%"/>
  84.     <meta name="select:Navbar Opacity" content="0.5" title="50%"/>
  85.     <meta name="select:Navbar Opacity" content="0.6" title="60%"/>
  86.     <meta name="select:Navbar Opacity" content="0.7" title="70%"/>
  87.     <meta name="select:Navbar Opacity" content="0.8" title="80%"/>
  88.     <meta name="select:Navbar Opacity" content="0.9" title="90%"/>
  89.  
  90.     <meta name="select:Overlay Opacity" content="0.1" title="10%"/>
  91.     <meta name="select:Overlay Opacity" content="0.2" title="20%"/>
  92.     <meta name="select:Overlay Opacity" content="0.3" title="30%"/>
  93.     <meta name="select:Overlay Opacity" content="0.4" title="40%"/>
  94.     <meta name="select:Overlay Opacity" content="0.5" title="50%"/>
  95.     <meta name="select:Overlay Opacity" content="0.6" title="60%"/>
  96.     <meta name="select:Overlay Opacity" content="0.7" title="70%"/>
  97.     <meta name="select:Overlay Opacity" content="0.8" title="80%"/>
  98.     <meta name="select:Overlay Opacity" content="0.9" title="90%"/>
  99.     <meta name="select:Overlay Opacity" content="1" title="100%"/>
  100.  
  101. <link rel="stylesheet" href="https://static.tumblr.com/qexbavb/uw2pxzjxv/main-min.css">
  102. <script src="https://static.tumblr.com/27gzhx7/Z5qorjizb/main-min.js"></script>
  103. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  104.  
  105. <!----FONTS---->
  106. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  107. <script src="https://kit.fontawesome.com/2ed3465afc.js"></script>
  108. <link href="https://fonts.googleapis.com/css?family={text:Body Font}:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  109. <link href="https://fonts.googleapis.com/css?family={text:Header Font}:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext" rel="stylesheet">
  110. <link href="https://fonts.googleapis.com/css?family={text:Banner Font}:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext" rel="stylesheet">
  111. <link href="https://fonts.googleapis.com/css?family={text:Navbar Font}:300,300i,400,400i&subset=latin-ext" rel="stylesheet">
  112.  
  113. <!-------------------------------------------------------JS FILES-->
  114. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  115. <script src="//dl.dropbox.com/s/iwnkhkks5tiu6sl/pxu.js"></script>
  116. <script src="//dl.dropbox.com/s/8u7kjsamc0soapp/tltps.js"></script>
  117. <script src="//dl.dropbox.com/s/liwh4ldg8ugsevm/vdrsz.js"></script>
  118. <script src="//dl.dropbox.com/s/llj3ecb0so19lfa/msnr.js"></script>
  119.  
  120. <!-------------------------------------------------------- SCRIPTS-->
  121. <script src="https://unpkg.com/feather-icons"></script>
  122. <script type="text/javascript" charset="utf-8">$(document).ready(function(){
  123.  
  124. // MASONRY
  125. var $grid = $(".position").masonry({ // posts wrapper
  126.  itemSelector: ".post", // posts selector
  127.  initLayout: !1
  128. });
  129. $grid.on("layoutComplete", function(o, r) {
  130.  console.log(r.length)
  131. }), $grid.masonry({
  132.  fitWidth: !0,
  133.  horizontalOrder: !0,
  134.  gutter: 0, // spacing between posts
  135.  resize: !0,
  136. }), $grid.imagesLoaded().progress(function() {
  137.  $grid.masonry("layout")
  138. });
  139.  
  140. //ADD YOUR SCRIPTS UNDER THIS LINE
  141.  
  142. });</script>
  143.  
  144. <!------------------------------------------------------ META DATA -->
  145.  
  146. </head>
  147.  
  148. <style type="text/css"> /* BLOG STYLE STARTS */
  149.  
  150. * {
  151.     -webkit-font-smoothing: antialiased;
  152.     -moz-osx-font-smoothing: grayscale;
  153.     }
  154.  
  155. /*----HIDE SPECIFIC TAGS ON INDEX PAGE----*/
  156. a.meta-item.tag-link[name~= x],
  157. a.meta-item.tag-link[name~=james],
  158. a.meta-item.tag-link[name~=wax],
  159. a.meta-item.tag-link[name~=male],
  160. a.meta-item.tag-link[name~=winter],
  161. a.meta-item.tag-link[name~=mad-eye],
  162. a.meta-item.tag-link[name~=nsfw],
  163. a.meta-item.tag-link[name~=gif],
  164. a.meta-item.tag-link[name~=boodalinski],
  165. a.meta-item.tag-link[name~=boy],
  166. a.meta-item.tag-link[name~=featured],
  167. a.meta-item.tag-link[name~=texas],
  168. a.meta-item.tag-link[name~=predator],
  169. a.meta-item.tag-link[name~=predators],
  170. a.meta-item.tag-link[name~=avp],
  171. a.meta-item.tag-link[name~=tcm],
  172. a.meta-item.tag-link[name~=beginning],
  173. a.meta-item.tag-link[name~=friday],
  174. a.meta-item.tag-link[name~=camp],
  175. a.meta-item.tag-link[name~=Camp],
  176. a.meta-item.tag-link[name~=horror],
  177. a.meta-item.tag-link[name~=imagine],
  178. a.meta-item.tag-link[name~=hp],
  179. a.meta-item.tag-link[name~=imagines],
  180. a.meta-item.tag-link[name~=slasher] {
  181.     {block:IndexPage}display:none;{/block:IndexPage}}    
  182.  
  183. body, .base {
  184.     margin: 0;
  185.     color:{color:Text};
  186.     background:{BackgroundColor};
  187.     font-size:{select:Body Font Size};
  188.     font-family:{text:Body Font}, Helvetica Neue, sans-serif;
  189.     line-height:1.6em;
  190.     text-decoration:none;
  191.     text-rendering:optimizeLegibility;
  192.     }
  193.  
  194. /*----TUMBLR CONTROLS----*/
  195. iframe.tmblr-iframe {
  196.     z-index:9999999;
  197.     top:50px;
  198.     left:auto;
  199.     padding-right:2em;
  200.     opacity:0;
  201.      filter:invert(1) contrast(200%);
  202.         -webkit-filter:invert(1) contrast(200%);
  203.         -o-filter:invert(1) contrast(200%);
  204.         -moz-filter:invert(1) contrast(200%);
  205.         -ms-filter:invert(1) contrast(200%);
  206.     transform:scale(.5);
  207.     transform-origin:right top;
  208.     vertical-align:top;
  209.     -webkit-transition: all 300ms ease-out;
  210.     -moz-transition: all 300ms ease-out;
  211.     -o-transition: all 300ms ease-out;
  212.     -ms-transition: all 300ms ease-out;
  213.     transition: all 300ms ease-out;
  214.     }
  215. iframe.tmblr-iframe:hover {opacity:0.4;}
  216.  
  217. /*------------------------------------------------------------POSTS----*/
  218. .position {margin:5em auto;display:flex;justify-content:space-between}
  219.  
  220. @media only screen and (max-width: 600px) {
  221.   article.post {width:90vw;}}
  222.  
  223. @media only screen and (min-width:600px) {
  224.   article.post {
  225.     {block:IndexPage}
  226.     min-width:250px;width:{select:Post Width};{/block:IndexPage}
  227.     {block:PermalinkPage}width:700px;{/block:PermalinkPage}}}
  228.  
  229. article.post {
  230.     font-size:{select:Body Font Size};
  231.     box-sizing:border-box;
  232.     margin:10px;
  233.     max-width:95vw;
  234.     text-align:left;
  235.     padding:1em;
  236.     background:{color:Posts};
  237.     border-radius:2px;
  238.     box-shadow:0 1px 2px #00000010;
  239.     }
  240.    
  241.  
  242. /*----------------------------------------------------------TOP BAR----*/
  243. aside.laterale {
  244.     padding:12px 0em;
  245.     top:0;
  246.     z-index:999;
  247.     position:fixed;
  248.     width:100vw;
  249.     background:rgba({RGBcolor:Navbar},{select:Navbar Opacity});
  250.     word-break:break-word;
  251.     height:auto;
  252.     display:flex;
  253.     justify-content:center;
  254.     }
  255. .nav-links {
  256.     width:100vw;
  257.     display:flex;
  258.     flex-flow:row nowrap;
  259.     justify-content:space-around;
  260.     align-content:center;
  261.     align-items:center
  262.     }
  263.  
  264. .nav-links a.label {text-align:center;}
  265. .nav-links a:hover {color:{color:Link Hover};cursor:pointer;}
  266. .dropbtn {
  267.     cursor:pointer;
  268.     border:none;
  269.     outline:none;
  270.     background:transparent;}
  271.  
  272. /*----AVATAR or TITLE----*/
  273. .nav-links a img {width:30px;height:30px;}
  274. .avatar-circle {border-radius:100%;}
  275. .avatar-square {border-radius:4px;}  
  276. .title {
  277.     letter-spacing:5px;
  278.     padding-left:5px;
  279.     font-size:12px;
  280.     display:flex-item;
  281.     font-weight:{select:Banner Font Weight};
  282.     font-family:{text:Banner Font}, sans-serif;
  283.     font-style:{block:ifBannerItalic}italic{/block:ifBannerItalic};
  284.     text-transform:{block:ifBannerAa}uppercase{/block:ifBannerAa};
  285.     color:{color:Banner};
  286.     }
  287.    
  288. /*----ICONS------------------------------------*/
  289. .f-menu {height:9px;width:9px;margin-right:4px;}
  290. .feather-nav {height:12px;width:12px;display:flex-item;}
  291. .f-menu, .feather-nav {stroke-width:1;color:{color:Nav Links};}
  292. a.label {padding:0px;display:flex-item;}
  293.  
  294. /*----LIGHTBOX------------------------------------*/
  295. .vignette, #vignette {opacity:0;}
  296. img.lightbox-image {
  297.     box-shadow:none !important;
  298.     border-radius:3px !important;
  299.     border:none !important;
  300.     -moz-box-sizing:border-box;
  301.     box-sizing:border-box;
  302.     }
  303. .lightbox-caption, #tumblr_lightbox_caption {
  304.     font-family:{text:Body Font};
  305.     font-weight:normal;
  306.     }
  307.  
  308. /*----SEARCH------------------------------------*/
  309. .search .query:focus {outline:none;}
  310. .search {border:none;padding:0px;}
  311. .search .query::placeholder {font-size:12px;color:{color:Nav Links};margin-left:0px;padding:0px;}
  312. .search .query {
  313.     border:none;
  314.     background:transparent;
  315.     font-family:{text:Navbar Font};
  316.     padding:0px;
  317.     font-size:12px;color:{color:Nav Links};
  318.     }
  319.  
  320. .overlay, .overlay-2 {
  321.     height:100%;
  322.     width:100%;
  323.     top:0;
  324.     left:0;
  325.     background:rgba({RGBcolor:Overlay},{select:Overlay Opacity});
  326.     position:fixed;
  327.     display:none;}    
  328.  
  329. .drop-1, .drop-2 {
  330.     display:flex-item;
  331.     box-sizing:border-box;
  332.     margin:3em auto;
  333.     line-height:140%;
  334.     background:transparent;
  335.     }
  336. .row {
  337.     min-width:400px;
  338.     max-width:70vw;
  339.     height:auto;
  340.     padding:1em;
  341.     display:flex;
  342.     flex-flow:row wrap;
  343.     justify-content:flex-start;
  344.     align-content:baseline;
  345.     align-items:baseline
  346.     }
  347.  
  348. #ask-form {line-height:160%;font-size:12px;}
  349. #ask-form h2 {text-align:center;}
  350. #ask-form h1 {
  351.     color:{TitleColor};
  352.     font-family:{text:Header Font}, Helvetica Neue, sans-serif;
  353.     font-weight:600;
  354.     line-height:150%;
  355.     text-align:center;
  356.     font-size:1.2em;
  357.     letter-spacing:0.25px;
  358.     padding-left:0.25px;
  359.     }
  360.    
  361. /*----DROPDOWN BOXES----*/
  362. .menu-label {margin:0 auto;padding;0.5em;text-align:center;}
  363. .menu-group {
  364.     min-width:400px;
  365.     max-width:70vw;
  366.     box-sizing:border-box;
  367.     margin:3em auto;
  368.     background:white;
  369.     border-radius:2px;
  370.     overflow:hidden;
  371.     box-shadow:0 1px 2px #00000010;
  372.     }
  373. .drop-1, .drop-2 {
  374.     display:none;
  375.     position:absolute;
  376.     z-index:1;
  377.     line-height:20px!important;
  378.     }
  379.  
  380.  
  381. /*----COLUMNS----*/
  382. .drop-1 .column, .drop-2 .column {margin:1em;}  
  383. .drop-1 .column ul, .drop-2 .column ul {
  384.     margin-left:0;
  385.     padding-left:0;
  386.     margin-top:0px;
  387.     margin-bottom:0px;
  388.     list-style-type:none;
  389.     }
  390. .drop-1 .column a.view-all {font-style:italic}
  391. .drop-1 h3, .drop-2 h3 {
  392.     font-family:{text:Header Font};
  393.     letter-spacing:1.5px;
  394.     padding-left:1.5px;
  395.     text-transform:uppercase;
  396.     color:black;
  397.     font-size:8px;
  398.     font-weight:normal;
  399.     margin:0;
  400.     text-align:center;
  401.     border-bottom:0.5px solid {color:Nav Links}60;
  402.     }
  403. .drop-1 h2, .drop-2 h2 {
  404.     font-family:{text:Banner Font};
  405.     letter-spacing:1.5px;
  406.     padding-left:1.5px;
  407.     text-transform:uppercase;
  408.     color:black;
  409.     font-size:8px;
  410.     font-weight:normal;
  411.     margin:0;
  412.     }        
  413. .drop-1 a, .drop-2 a  {
  414.     color:{color:Nav Links};
  415.     font-family:{text:Navbar Font};
  416.     font-size:12px;
  417.     }
  418.    
  419.  
  420.  
  421. /*----HEADERS and TITLES----*/
  422. .post-content h2 b,.post-content h2 strong {font-weight:700;color:black;}
  423. .post-content h2 {
  424.     color:{TitleColor};
  425.     font-family:{text:Header Font}, Helvetica Neue, sans-serif;
  426.     font-size:calc({select:Body Font Size} + 20%);line-height:140%;}    
  427. .post-content h1 a:hover, .post-title a:hover {color:{TitleColor};}
  428. .post-content h1, .post-content h1 a {
  429.     color:{TitleColor};
  430.     font-weight:600;
  431.     font-size:calc({select:Body Font Size} + 40%);
  432.     font-family:{text:Header Font}, Helvetica Neue, sans-serif;
  433.     text-transform:none;
  434.     width:100%;
  435.     margin-bottom:10px;
  436.     text-align:center;
  437.     line-height:150%;
  438.     }
  439.  
  440. /*----POST CONTENT----*/
  441. b, strong {color:{color:Bold};font-weight:600;}
  442. article hr {width:100%;margin-left:0px;border:.5px solid rgba({RGBcolor:Text},0.15);}
  443. code:not(blockquote code) {
  444.     background:rgba({RGBcolor:Text},0.15);
  445.     padding:0px 4px;
  446.     border-radius:2px;
  447.     opacity:0.8;}
  448. blockquote code {font-family:Source Code Pro, monospace;font-size:0.8em;}
  449. .caption small {font-size:80%}        
  450. .caption blockquote code {
  451.     font-family:Source Code Pro, Consolas, monospace;
  452.     font-size:0.8em;
  453.     }
  454.  
  455. /*----Links----*/
  456. a {color:{TitleColor};transition:all 200ms ease-in-out;}
  457. p a {font-weight:normal;transition: all 200ms ease-in-out;}
  458. .post-content a {color:{TitleColor};}
  459.  
  460. /*----Link Hover----*/
  461. a, a:hover {text-decoration:none;}
  462. a:hover, a:hover .feather {color:{color:Link Hover};}
  463. p a:hover, .post-content a:hover {color:{color:Link Hover};}
  464.  
  465. /*----LISTS----*/
  466. ul, menu, dir {list-style-type: circle;}
  467. li + ul {list-style-type:none}
  468. li + ul li:before {
  469.     content:'•';
  470.     color:{color:Bold};
  471.     font-size:1em;
  472.     position:absolute;
  473.     margin-left:-1em;
  474.     line-height:1.5em;
  475.     vertical-align:middle;
  476.     }
  477.    
  478. /*----HORIZONTAL LINES----*/
  479. article hr, hr {width:100%;margin-left:0px;}
  480. article hr {border:.5px solid rgba({RGBcolor:Text},.2);}    
  481. hr {border:.1px dashed rgba({RGBcolor:Text},.2);}    
  482.  
  483. /*----BLOCKQUOTES----*/
  484. .post-content blockquote b,
  485. .post-content blockquote strong {color:{color:Text};}
  486. .post-content blockquote {
  487.     color:{color:Text}90;
  488.     border-left:1px solid rgba({RGBcolor:Text},0.15);
  489.     margin-left:2em;
  490.     padding-left:1em;
  491.     }
  492.  
  493. /*----READ MORE----*/
  494. .read_more_container {text-align:center;}
  495. a.read_more {
  496.     background:rgba({RGBTitleColor},0.15);
  497.     color:{TitleColor};
  498.     font-family:{text:Header Font}, Helvetica Neue, arial, sans-serif;
  499.     text-transform:uppercase;
  500.     text-align:center;
  501.     letter-spacing:1.5px;
  502.     font-size:calc({select:Body Font Size} - 20%);
  503.     font-weight:500;
  504.     text-decoration:none;
  505.     padding:5px;
  506.     border:0.5px solid rgba({RGBTitleColor},0.4);
  507.     border-radius:3px;
  508.     transition: all 200ms ease-in-out;
  509.     box-shadow: 0 1px 2px #00000010;
  510.     }    
  511. a.read_more:hover {
  512.     background:rgba({RGBcolor:Link Hover},0.15);
  513.     color:{color:Link Hover};
  514.     border:0.5px solid rgba({RGBcolor:Link Hover},0.7);
  515.     }    
  516.  
  517. /*-----------------------------------------------------------------------
  518.                                 POST TYPES
  519. -----------------------------------------------------------------------*/
  520.  
  521. /*----AUDIO POST----*/
  522. .audio_container{border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.2);}
  523.  
  524. /*----LINK POST----*/
  525. .link-wrapper {
  526.     border-radius:4px;
  527.     box-shadow:0 1px 2px #00000010;
  528.     transition:all 200ms ease-in-out;
  529.     }
  530. .link .with-thumbnail .link-host {
  531.     color:{TitleColor};
  532.     -webkit-backdrop-filter:blur(6px);
  533.     backdrop-filter:blur(6px);
  534.     line-height:120%;
  535.     padding:0.3em 0.8em;
  536.     background:rgba({RGBTitleColor},0.2);
  537.     border:0.5px solid rgba({RGBTitleColor},0.2);
  538.     box-shadow:0 1px 2px rgba(0,0,0,0.1);
  539.     border-radius:2em;
  540.     width:auto;
  541.     margin: 15px 20px;
  542.     top: 0;
  543.     left: 0;
  544.     right: auto;
  545.     }    
  546. .link-text-wrapper{color:{color:Text};transition: all 200ms ease-in-out;}
  547. .link-text-wrapper:hover {color:{color:Link Hover};}
  548. div.link-text-wrapper.clearfix {background-color:white;}
  549. .link-wrapper .link-thumbnail:after, .link-title::after {display:none;}
  550. .link-wrapper .link-text-wrapper .link-excerpt {
  551.     font-size:10px;
  552.     line-height:160%;
  553.     color:rgba({RGBcolor:Text},.9);
  554.     }
  555.    
  556. /*----ANSWER POST----*/
  557. .note-item .avatar img {border-radius:2em;padding:2px;}
  558. .note-item-answerer .avatar img {border:1px solid rgba({RGBcolor:Text},.3);}
  559. .note-item-asker .avatar img {border:1px solid rgba({RGBcolor:Answer Posts},.3);}
  560. .note-item .text:after {display:none;}
  561. .note-item .text {font-size:{select:Body Font Size};line-height:150%;}
  562. .note-item-asker .text {
  563.     background:rgba({RGBcolor:Answer Posts},.1);
  564.     border: 1px solid rgba({RGBcolor:Answer Posts},.16);
  565.     color:rgba({RGBcolor:Answer Posts},1);}
  566. .note-item-answerer .text {
  567.     background:rgba({RGBcolor:Text},.06);
  568.     border: 1px solid rgba({RGBcolor:Text},.1);
  569.     color:rgba({RGBcolor:Text},.7);}    
  570. .note-item .text .answerer,
  571. .note-item .text .asker {
  572.     color:rgba({RGBcolor:Bold},.9);
  573.     font-style:italic;
  574.     font-size:calc({select:Body Font Size} - 20%);}
  575.  
  576. /*----CHAT POST----*/
  577. .conversation .chat {font-family:{text:Body Font};margin-bottom:8px;}
  578. .conversation .label {
  579.     color:{color:Bold};
  580.     font-family:{text:Header Font};
  581.     font-size:calc({select:Body Font Size} - 20%);
  582.     font-weight:700;
  583.     text-transform:uppercase;
  584.     letter-spacing:1.25px;
  585.     }
  586. .chat.chat-even {margin-bottom:8px;}
  587. .chat.chat-odd {margin-bottom:8px;}    
  588. .chat hr {border:0.5px dashed rgba({RGBcolor:Text},0.2);}
  589.  
  590. /*----PHOTO and VIDEO POST----*/
  591. article.photo .photo-wrapper {padding:0px;}
  592. article.photo .photo-wrapper-inner {padding:0px;}
  593. article.photo .post-content img {width:100%;height:100%;}
  594. img{height:auto;width:auto;margin:0 auto;max-height:100%;max-width:100%;}
  595. .video-wrapper {height:auto;max-width:700px;margin:0 auto;}
  596. .video .posts {min-width:700px;}
  597.  
  598.  
  599. /*----PHOTO and VIDEO within TEXT POST----*/
  600. .npf-link-block>a,
  601. .post-content .answerer-answer .tmblr-full>img,
  602. .post-content .asker-question .tmblr-full>img,
  603. .post-content .body-text .tmblr-full>img,
  604. .post-content .caption .tmblr-full>img,
  605. .post-content .replies .tmblr-full>img,
  606. .post-content .source .tmblr-full>img {
  607.     border-top-left-radius:2px;
  608.     border-top-right-radius:2px;
  609.     }
  610.  
  611. .post-content .answerer-answer figure p.tmblr-attribution,
  612. .post-content .asker-question figure p.tmblr-attribution,
  613. .post-content .body-text figure p.tmblr-attribution,
  614. .post-content .caption figure p.tmblr-attribution,
  615. .post-content .replies figure p.tmblr-attribution,
  616. .post-content .source figure p.tmblr-attribution {
  617.     border-bottom-left-radius:2px;
  618.     border-bottom-right-radius:2px;
  619.     }
  620. article.photo img {border-radius:2px;}
  621.  
  622. /*----QUOTE POST----*/
  623. .quote .source {
  624.     margin-top:10px;
  625.     position:relative;
  626.     font-size:calc({select:Body Font Size} - 20%);
  627.     text-align:right;
  628.     }
  629. .quote .source:before {content: "";display:none;}
  630. .quote .post-content blockquote:before {letter-spacing:1px;}
  631. .quote .post-content blockquote:after {margin-left:0;letter-spacing:1px;}
  632. .quote .post-content blockquote {
  633.     color:{color:Bold};
  634.     border:none;
  635.     font-family:{text:Header Font}, Helvetica Neue, sans-serif;
  636.     font-weight:bold;
  637.     line-height:160%;
  638.     margin:0;
  639.     padding:0 5px 0 0;
  640.     quotes: "“" "”" "‘" "’";
  641.     word-break:break-word;
  642.     }
  643. .quote .post-content blockquote.short {font-size:2.5em;}    
  644. .quote .post-content blockquote.medium {font-size:2em;}  
  645. .quote .post-content blockquote.long {font-size:1.5em;}        
  646.  
  647. /*----REBLOG POST----*/
  648. .reblog-list .post-reblog-header .post-tumblelog-name {
  649.     line-height:130%;
  650.     font-size:10px;
  651.     padding:0.3em 0.8em;
  652.     border-radius:2em;
  653.     color:rgba({RGBTitleColor},0.8);
  654.     font-weight:normal;
  655.     font-style:italic;
  656.     background:rgba({RGBTitleColor},0.15);
  657.     transition: all 200ms ease-in-out;}
  658. .post-avatar, .post-avatar img {display:none}
  659. .reblog-list .post-reblog-header .post-tumblelog-name:hover {color:{color:Link Hover};background:rgba({RGBcolor:Link Hover},0.15);}
  660.  
  661. /*-----------------------------------------------------------------------
  662.                 POST FOOTER: Like/Reblog, Date, Note Count, etc.
  663. -----------------------------------------------------------------------*/
  664.  
  665. /*----TAGS----*/
  666. a.meta-item.tag-link:before {content:none;}
  667. a.meta-item.tag-link{
  668.     font-size:10px;
  669.     line-height:13px;
  670.     color:rgba({RGBcolor:Text},1);
  671.     text-transform:none;
  672.     padding:0.3em 0.8em;
  673.     background:rgba({RGBcolor:Text},0.1);
  674.     border-radius:2px;
  675.     margin:0.5em 0.5em 0.5em 0em;
  676.     transition: all 200ms ease-in-out;
  677.     }
  678. a.meta-item.tag-link:hover {
  679.     color:rgba({RGBcolor:Link Hover},1);
  680.     background:rgba({RGBcolor:Link Hover},0.1);
  681.     box-shadow:0 0 0 1px rgba({RGBcolor:Link Hover},0.4);
  682.     }
  683. .post-extra {display:flex;flex-flow:row wrap;justify-content:flex-start;align-content:flex-end;align-items:center;}
  684.  
  685.  
  686. /*----LIKE and REBLOG----*/
  687. .post-controls {color:{TitleColor};transition: all 200ms ease-in-out;}
  688.  
  689. /*----POST NOTES----*/
  690. .date-notes, .post-notes, .post-extra {font-family:{text:Body Font};}
  691. .date-notes {font-size:.8em;transition: all 200ms ease-in-out;}
  692. .post-notes {color:{TitleColor};}
  693. .post-extra {
  694.     font-size:calc({select:Body Font Size} - 33.333%);
  695.     line-height:130%;
  696.     width:auto;
  697.     margin:1em auto;
  698.     }
  699. a.meta-item.post-notes:hover,
  700. a.meta-item.note-count:hover {color:{color:Link Hover};}
  701. a.meta-item.post-notes, a.meta-item.note-count {
  702.     color:{TitleColor};transition:all 200ms ease-in-out;}
  703.  
  704. /*----PERMALINK POST NOTES----*/
  705. .post-notes ol li {list-style:none;}
  706. .post-notes ol.notes li.note {padding:1em;color:{color:Text}90;}
  707. .like .avatar_frame:after {padding:2px;}
  708. .reply .avatar_frame:after {padding:2px;}
  709. .reblog:not(.original_post) .avatar_frame:after {padding:2px;}
  710. .post-notes ol.notes li.note img.avatar {
  711.     height:26px;
  712.     width:26px;
  713.     border-radius:2px;
  714.     margin-right:5px;
  715.     }
  716. .post-notes ol.notes li.note span.action {font-weight:normal;}
  717. .post-notes ol.notes li.note .answer_content {font-weight:normal;}
  718. .post-notes ol.notes li.note blockquote a {
  719.     text-decoration:none;
  720.     color:{color:Text}90;
  721.     }
  722. .post-notes ol.notes li.note blockquote {
  723.     border-left:1px solid rgba({RGBcolor:Text},0.15);
  724.     margin-left:4em;
  725.     padding-left:1em;
  726.     }
  727. .post-notes {width:100%;}
  728.  
  729.  
  730. /*----PAGINATION----*/
  731. .pagination {margin:5% 0 5% 0;text-align:center;}
  732. .pagination a, .perma-pagination a, .current_page {
  733.     border-radius:2px;
  734.     padding:6px 16px;
  735.     font-family:{text:Header Font};
  736.     font-size:10px;
  737.     text-transform:uppercase;
  738.     letter-spacing:1.5px;
  739.     text-decoration:none;
  740.     margin:0 2px;
  741.     transition: all 200ms ease-in-out;
  742.     }
  743. .current_page {color:{color:Link Hover};background:{color:Posts}80;}  
  744. .jump_page {
  745.     color:{color:Current Page}60;
  746.     background:#ffffff;
  747.     box-shadow:0 1px 2px #00000010;
  748.     transition: all 300ms ease-in-out;
  749.     }
  750. .jump_page:hover {box-shadow:0 1px 2px {color:Link Hover}50;}
  751.  
  752.  
  753.  
  754.  
  755. /* -------------------------------------------------- CUSTOM CSS -- */
  756.  
  757. {CustomCSS}
  758. .post-controls {font-size:10px;text-transform:uppercase;letter-spacing:.25px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}
  759. .reblog-b {padding-right:10px;}
  760. .like-b {
  761.   position:relative;
  762.   display:flex-item;
  763.   height:1em;
  764.   padding-right:1em;
  765.   line-height:1em;
  766.   overflow:hidden;
  767. }
  768. .like-b .like_button iframe {
  769.    position:absolute;
  770.    top:0;
  771.    left:0;
  772.    bottom:0;
  773.    right:0;
  774.    z-index:2;
  775.    opacity:0;
  776. }
  777. .like-b .liked + .b {
  778.   color:inherit;
  779. }
  780. .like-b .liked + .b:after {
  781.    content:'';
  782. }
  783. </style>
  784.  
  785.  
  786. <body>
  787.  
  788. <!------------------------------------------------- SIDEBAR STARTS -->
  789. <aside class="laterale">
  790.     <div class="nav-links">  
  791.         <a class="askbtn" id="label">
  792.         <i class="feather-nav" data-feather="mail"></i></a>
  793.        
  794.     <!---TITLE or AVATAR--->    
  795.         {block:ifStyle2}
  796.         <a href="/" id="label">
  797.         <img class="avatar-{AvatarShape}" src="{PortraitURL-128}"></a>
  798.         {/block:ifStyle2}
  799.            
  800.         {block:ifNotStyle2}
  801.         <a href="/" class="title" id="label">{Title}</a>
  802.         {/block:ifNotStyle2}
  803.     <!---TITLE or AVATAR--->        
  804.  
  805.         <a class="dropbtn" id="label">
  806.         <i class="feather-nav" data-feather="menu"></i></a>
  807.     </div><!---nav-links--->    
  808.     <!----ASK FORM---->
  809. <div class="overlay-2"></div>
  810. <div class="drop-2">
  811.     <div class="menu-group">
  812.     <section class="row">
  813.     <div id="ask-form">
  814.         <h2>{AskLabel}</h2>
  815.         <iframe class="ask-frame" frameborder="0" scrolling="no" width="height:auto" height="auto" src="https://www.tumblr.com/ask_form/boodaloo.tumblr.com" style="font-size:12px;margin-top:1em;min-width:500px;background-color:transparent; overflow:scroll;" id="ask_form"></iframe>
  816.         </div>
  817.     </section>
  818.     </div><!---menu-group--->
  819. </div> <!---drop-2--->
  820.     <!----ASK FORM---->
  821.  
  822.  
  823. <div class="overlay"></div>
  824.  
  825. <!---- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  826.                                DROPDOWN
  827. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ---->
  828. <div class="drop-1">
  829.     <div class="menu-group">
  830.     <section class="row">
  831.  
  832.         <!----LINKS---->
  833.         <div class="column">
  834.         {block:HasPages}
  835.             <h3>{lang:Pages}</h3>
  836.             <ul>
  837.             {block:HasPages}{block:Pages}
  838.             <li>
  839.             <a href="{URL}" class="label {CurrentState} {ExternalState}">
  840.             {Label}</a></li>{/block:Pages}
  841.             </ul>
  842.         {/block:HasPages}    
  843.         </div>
  844.         <!----LINKS---->
  845.        
  846.         <!----HELP CENTER---->
  847.         <div class="column">
  848.         <h3>{lang:Navigate}</h3>
  849.             <ul>
  850.             <li><form action="/search" method="get" class="search">
  851.             <i class="f-menu" data-feather="search"></i>
  852.             <input type="text" name="q" value="{SearchQuery}" class="query" placeholder="{lang:Search}"></form></li>
  853.             {block:ifShowArchive}
  854.             <li><a href="/archive">
  855.             <i class="f-menu" data-feather="archive"></i>{lang:Archive}</a></li>
  856.             {/block:ifShowArchive}
  857.             </ul>
  858.         </div>
  859.         <!----HELP CENTER---->
  860.     </section>
  861.     </div><!---menu-group--->
  862.  
  863. <!----TAGS SECTION---->
  864. {block:ifTagsSection}
  865. <div class="menu-group">
  866. <section class="row">
  867.    
  868.     <!----BY TYPE---->
  869.     <div class="column">
  870.         <h3>By Type</h3>
  871.         <ul>
  872.         <li>
  873.         <a href="/tagged/featured">
  874.         <i class="f-menu" data-feather="star"></i>
  875.             Featured</a></li>
  876.             <li><a href="/tagged/nsfw">
  877.             <i class="f-menu" data-feather="bookmark">
  878.             </i>NSFW</a></li>
  879.             <li><a href="/tagged/art">
  880.             <i class="f-menu" data-feather="image"></i>Art</a></li></ul>
  881.         </div>
  882.     <!----BY TYPE---->
  883.    
  884.  
  885.     <!----GROUP 1---->
  886.     <div class="column">
  887.         <h3>The Guys</h3>
  888.         <ul>
  889.         <li><a href="/tagged/dexter">Dexter</a></li>
  890.         <li><a href="/tagged/zeno">Zeno</a></li>
  891.         <li><a href="/tagged/ollie">Ollie</a></li></ul>
  892.     </div>
  893.     <!----GROUP 1---->
  894.    
  895.     <!----GROUP 2---->
  896.     <div class="column">
  897.         <h3>Hobbies</h3>
  898.         <ul>
  899.         <li><a href="/tagged/tag">Babysitting</a></li>
  900.         <li><a href="/tagged/tag">Rockhounding</a></li>
  901.         <li><a href="/tagged/tag">Random Tangents</a></li></ul>
  902.     </div>
  903.     <!----GROUP 2---->
  904.    
  905.     <!----GROUP 3---->
  906.     <div class="column">
  907.         <h3>Deep Thoughts</h3>
  908.         <ul>
  909.         <li><a href="/tagged/tag">Mental Illness</a></li>
  910.         <li><a href="/tagged/tag">Little Life Thoughts</a></li>
  911.         <li><a href="/tagged/tag">Questions</a></li></ul>
  912.     </div>
  913.     <!----GROUP 3---->
  914.    
  915.     <!----GROUP 4---->
  916.     <div class="column">
  917.         <h3>Daily Journal</h3>
  918.         <ul>
  919.         <li><a href="/tagged/tag">All Entries</a></li>
  920.         <li><a href="/tagged/tag">Favorite Days</a></li>
  921.         <li><a href="/tagged/tag">Less Favorite Days</a></li></ul>
  922.     </div>
  923.     <!----GROUP 4---->
  924.  
  925. </section> <!---row--->
  926. </div><!---menu-group--->
  927. {/block:ifTagsSection}
  928. </div> <!---drop-content--->
  929. </aside>
  930.  
  931. <script>
  932. $(document).ready(function(){
  933.   $(".dropbtn").click(function(){
  934.     $(".drop-1").slideToggle();
  935.     $(".overlay").fadeToggle();
  936.     $(".drop-2").Hide();
  937.   });
  938. });    
  939.  
  940. $(document).click(function(event) {
  941.   //if you click on anything except the modal itself or the "open modal" link, close the modal
  942.   if (!$(event.target).closest(".dropbtn,.drop-1").length) {
  943.     $("body").find(".drop-1").slideUp("");
  944.     $("body").find(".overlay").fadeOut("");
  945.   }
  946. });
  947. </script>
  948. <script>
  949. $(document).ready(function(){
  950.   $(".askbtn").click(function(){
  951.     $(".drop-2").slideToggle();
  952.     $(".overlay-2").fadeToggle();
  953.   });
  954. });    
  955.  
  956. $(document).click(function(event) {
  957.   //if you click on anything except the modal itself or the "open modal" link, close the modal
  958.   if (!$(event.target).closest(".askbtn,.drop-2").length) {
  959.     $("body").find(".drop-2").slideUp("");
  960.     $("body").find(".overlay-2").fadeOut("");
  961.   }
  962. });
  963. </script>
  964. <!--------------------------------------------------- SIDEBAR ENDS -->
  965.  
  966. <!---------------------------------------------------- BLOG STARTS -->
  967. <div class="position">
  968. <blog>
  969. {block:Posts}
  970.  
  971. <article class="post {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}">
  972.  
  973. <!--------------------------------------------------------------TEXT---->
  974. {block:Text}
  975. <div class="post-content">
  976.     {block:Title}
  977.     <h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>
  978.     {/block:Title}
  979.     {block:NotReblog}
  980.     <div class="body-text">{Body}</div>
  981.     {/block:NotReblog}
  982. {block:RebloggedFrom}<div class="reblog-list">
  983. {block:Reblogs}
  984. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  985.     <div class="post-reblog-header">
  986.     {block:HasPermalink}
  987.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  988.     {Username}</a>
  989.     {/block:HasPermalink}
  990.     {block:HasNoPermalink}
  991.     <span class="post-tumblelog-name
  992.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  993.     {Username}</span>
  994.     {/block:HasNoPermalink}
  995.     </div> <!-- post-reblog-header -->
  996.     <div class="post-reblog-content"><div class="body-text">{Body}</div>
  997.     </div> <!-- post-reblog-content -->
  998. </div>{/block:Reblogs}</div>{/block:RebloggedFrom}</div>
  999. {/block:Text}
  1000.  
  1001. <!-------------------------------------------------------------QUOTE---->
  1002.  
  1003. {block:Quote}
  1004. <div class="post-content">
  1005.     <blockquote class="{Length}">{Quote}</blockquote>
  1006.     {block:Source}<div class="source">{Source}</div>{/block:Source}
  1007. </div>
  1008. {/block:Quote}
  1009.  
  1010. <!--------------------------------------------------------------CHAT---->
  1011. {block:Chat}
  1012. <div class="post-content">
  1013.     {block:Title}
  1014.     <h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>
  1015.     {/block:Title}
  1016.     <div class="conversation">
  1017.     {block:Lines}
  1018.     <div class="chat chat-{Alt}">
  1019.         {block:Label}<span class="label">{Label}</span>
  1020.         {/block:Label}{Line}<hr></div>
  1021.     {/block:Lines}
  1022.     </div><!----conversation---->
  1023. {block:RebloggedFrom}
  1024. <div class="reblog-list">
  1025. {block:Reblogs}
  1026. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1027.     <div class="post-reblog-header">
  1028.     {block:HasPermalink}
  1029.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1030.     {Username}</a>{/block:HasPermalink}
  1031.     {block:HasNoPermalink}
  1032.     <span class="post-tumblelog-name
  1033.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1034.     {Username}</span>{/block:HasNoPermalink}
  1035.     </div> <!-- post-reblog-header -->
  1036. <div class="post-reblog-content"><div class="body-text">{Body}</div>
  1037. </div> <!-- post-reblog-content -->
  1038. </div> <!-- original-reblog-content -->
  1039. {/block:Reblogs}
  1040. </div> <!-- reblog-list -->
  1041. {/block:RebloggedFrom}
  1042. </div> <!-- post-content -->
  1043. {/block:Chat}
  1044.  
  1045. <!-------------------------------------------------------------VIDEO---->
  1046.  
  1047. {block:Video}
  1048. <div class="video-wrapper">{Video-700}</div>
  1049. <div class="post-content">
  1050. {block:NotReblog}
  1051. <figcaption class="caption" style="border:none;">{Caption}</figcaption>
  1052. {/block:NotReblog}
  1053. {block:RebloggedFrom}
  1054. <div class="reblog-list">
  1055. {block:Reblogs}
  1056. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1057.     <div class="post-reblog-header">
  1058.     {block:HasPermalink}
  1059.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1060.     {Username}</a>
  1061.     {/block:HasPermalink}
  1062.     {block:HasNoPermalink}
  1063.     <span class="post-tumblelog-name
  1064.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1065.     {Username}</span>
  1066.     {/block:HasNoPermalink}
  1067.     </div> <!-- post-reblog-header -->
  1068. <div class="post-reblog-content">
  1069.     <div class="body-text">{Body}</div>
  1070. </div> <!-- post-reblog-content -->
  1071. </div> <!-- original-reblog-content -->
  1072. {/block:Reblogs}
  1073. </div> <!-- reblog-list -->
  1074. {/block:RebloggedFrom}
  1075. </div>
  1076. {/block:Video}
  1077.  
  1078. <!-------------------------------------------------------------PHOTO---->
  1079.  
  1080. {block:Photo}<div class="post-content">
  1081. <a href="{Permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>
  1082. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1083. </div>
  1084. {block:RebloggedFrom}
  1085. <div class="reblog-list">
  1086. {block:Reblogs}
  1087. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1088.     <div class="post-reblog-header">
  1089.     {block:HasPermalink}
  1090.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1091.     {Username}</a>
  1092.     {/block:HasPermalink}
  1093.     {block:HasNoPermalink}
  1094.     <span class="post-tumblelog-name
  1095.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1096.     {Username}</span>
  1097.     {/block:HasNoPermalink}
  1098.     </div> <!-- post-reblog-header -->
  1099. <div class="post-reblog-content">{Body}</div></div>{/block:Reblogs}</div>
  1100. {/block:RebloggedFrom}
  1101. {/block:Photo}
  1102.  
  1103. <!----------------------------------------------------------PHOTOSET---->
  1104.  
  1105. {block:Photoset}
  1106. <figure class="post-content photoset">{Photoset}
  1107.    
  1108. {block:NotReblog}
  1109. <figcaption class="caption">{Caption}</figcaption>
  1110. {/block:NotReblog}
  1111.  
  1112. {block:RebloggedFrom}
  1113. <div class="reblog-list">
  1114.    
  1115. {block:Reblogs}
  1116. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1117.    
  1118.     <div class="post-reblog-header">
  1119.     {block:HasPermalink}
  1120.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1121.     {Username}</a>
  1122.     {/block:HasPermalink}
  1123.  
  1124.     {block:HasNoPermalink}
  1125.     <span class="post-tumblelog-name
  1126.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1127.     {Username}</span>
  1128.     {/block:HasNoPermalink}
  1129.     </div> <!-- post-reblog-header -->
  1130.  
  1131. <div class="post-reblog-content">
  1132.     <div class="post-body">{Body}</div>
  1133. </div> <!-- post-reblog-content -->
  1134.  
  1135. </div> <!-- original-reblog-content -->
  1136. {/block:Reblogs}
  1137. </div> <!-- reblog-list -->
  1138. {/block:RebloggedFrom}
  1139. </figure> <!-- post-content -->
  1140. {/block:Photoset}
  1141. <!-------------------------------------------------------------LINK---->
  1142.  
  1143. {block:Link}
  1144. <div class="post-content
  1145. {block:Description} with-caption{/block:Description}
  1146. {block:Thumbnail} with-thumbnail{/block:Thumbnail}">
  1147. <div class="link-wrapper">
  1148.     <a {Target} href="{URL}" class="link link-container">
  1149.         {block:Thumbnail}<div class="link-thumbnail">
  1150.         <img src="{Thumbnail-HighRes}" alt="" /></div>
  1151.         {/block:Thumbnail}
  1152.  
  1153.         <div class="link-text-wrapper clearfix">
  1154.         <div class="link-text">
  1155.             {block:Host}
  1156.             <div class="link-host" style="font-weight:normal;font-size:10px;">{Host}</div>
  1157.             {/block:Host}
  1158.             <h1 class="link-title">{Name}<i class="feather" data-feather="external-link" style="margin-left:5px;height:15px;width:15px;stroke-width:1"></i></h1>
  1159.                 {block:Excerpt}
  1160.                 <div class="link-excerpt">{Excerpt}</div>
  1161.                 {/block:Excerpt}
  1162.                 {block:Author}
  1163.                 <div class="link-author">{Author}</div>
  1164.                 {/block:Author}
  1165.         </div> <!-- link-text -->
  1166.         </div> <!-- link-text-wrapper clearfix -->
  1167.     </a> <!-- link -->
  1168. </div> <!-- link-wrapper -->
  1169.  
  1170. {block:NotReblog}
  1171. <div class="caption">{Description}</div>
  1172. {/block:NotReblog}
  1173. {block:RebloggedFrom}<div class="reblog-list">
  1174. {block:Reblogs}
  1175. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1176.     <div class="post-reblog-header">
  1177.     {block:HasPermalink}
  1178.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1179.     {Username}</a>
  1180.     {/block:HasPermalink}
  1181.     {block:HasNoPermalink}
  1182.     <span class="post-tumblelog-name
  1183.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1184.     {Username}</span>
  1185.     {/block:HasNoPermalink}
  1186.     </div> <!-- post-reblog-header -->
  1187. <div class="post-reblog-content"><div class="body-text">{Body}</div>
  1188. </div> <!-- post-reblog-content --></div>{/block:Reblogs}
  1189. </div>{/block:RebloggedFrom}</div>
  1190. {/block:Link}
  1191.  
  1192. <!-------------------------------------------------------------AUDIO---->
  1193.  
  1194. {block:Audio}
  1195. <div class="audio_container">
  1196. {block:AudioEmbed}{AudioEmbed color="white"}{/block:AudioEmbed}
  1197. </div>
  1198. <div class="post-content">
  1199. {block:NotReblog}
  1200. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1201. {/block:NotReblog}
  1202. {block:RebloggedFrom}
  1203. <div class="reblog-list">
  1204. {block:Reblogs}
  1205. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1206.     <div class="post-reblog-header">
  1207.     {block:HasPermalink}
  1208.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1209.     {Username}</a>{/block:HasPermalink}
  1210.     {block:HasNoPermalink}
  1211.     <span class="post-tumblelog-name
  1212.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1213.     {Username}</span>
  1214.     {/block:HasNoPermalink}
  1215.     </div> <!-- post-reblog-header -->
  1216. <div class="post-reblog-content">{Body}</div></div>{/block:Reblogs}
  1217. </div>{/block:RebloggedFrom}</div>
  1218. {/block:Audio}
  1219.  
  1220. <!------------------------------------------------------------ANSWER---->
  1221.  
  1222. {block:Answer}
  1223. <div class="post-content">
  1224. <div class="note-item note-item-asker">
  1225.     <!----Text---->
  1226.     <div class="text">
  1227.     <div class="asker">
  1228.     <span class="asker-name">{Asker}</span> asked:</div><!--asker-->
  1229.     <div class="asker-question">{Question}</div>
  1230.     </div>
  1231.     <!----Text---->
  1232.    
  1233.     <!----Avatar---->
  1234.     <div class="avatar">
  1235.     <img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
  1236.     </div>
  1237.     <!----Avatar---->
  1238. </div> <!----note-item-asker---->
  1239.  
  1240. {block:Answerer}
  1241. <div class="note-item note-item-answerer">
  1242.     <!----Text---->
  1243.     <div class="text">
  1244.     <p class="answerer">
  1245.     <span class="asker-name">{Answerer}</span> answered:</p>
  1246.     <div class="answerer-answer">{Answer}</div>
  1247.     </div>
  1248.     <!----Text---->
  1249.    
  1250.     <!----Avatar---->
  1251.     <div class="avatar">
  1252.     <img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
  1253.     </div>
  1254.     <!----Avatar---->
  1255.    
  1256. </div> <!----note-item-answerer---->
  1257. {/block:Answerer}
  1258. {block:NotReblog}
  1259. <div class="replies">{Replies}</div>
  1260. {/block:NotReblog}
  1261. {block:RebloggedFrom}
  1262. <div class="reblog-list">
  1263. {block:Reblogs}
  1264. <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  1265.     <div class="post-reblog-header">
  1266.     {block:HasPermalink}
  1267.     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">
  1268.     {Username}</a>
  1269.     {/block:HasPermalink}
  1270.     {block:HasNoPermalink}
  1271.     <span class="post-tumblelog-name
  1272.    {block:IsDeactivated} inactive{/block:IsDeactivated}">
  1273.     {Username}</span>
  1274.     {/block:HasNoPermalink}
  1275.     </div> <!-- post-reblog-header -->
  1276. <div class="post-reblog-content">{Body}</div></div>{/block:Reblogs}
  1277. </div>{/block:RebloggedFrom}</div>
  1278. {/block:Answer}
  1279.  
  1280. <!--------------------------------------------------------POST EXTRA---->
  1281.  
  1282. <section class="inline-meta post-extra{block:RebloggedFrom} has-reblog
  1283. {/block:RebloggedFrom}{block:ContentSource} has-source
  1284. {/block:ContentSource}{block:HasTags} has-tags{/block:HasTags}">
  1285.  
  1286.     {block:ContentSource}
  1287.     <a class="meta-item source-link" href="{SourceURL}">
  1288.     {lang:Source}: {SourceTitle}</a>
  1289.     {/block:ContentSource}
  1290.  
  1291.     {block:HasTags} <!-----TAGS---->
  1292.     {block:Tags}
  1293.     <a class="meta-item tag-link" href="{TagURL}" name="{Tag}">{Tag}</a>
  1294.     {/block:Tags}
  1295.     {/block:HasTags}
  1296. </section> <!-- inline-meta post-extra -->
  1297.  
  1298. {block:Date}
  1299. <section class="panel">
  1300. <footer class="post-footer">
  1301.     <section class="panel">
  1302.         <section class="inline-meta date-notes">
  1303.             <div class="date-note-wrapper">
  1304.                 {block:NoteCount}
  1305.                 <span>
  1306.                 <a href="{Permalink}#notes" class="meta-item note-count">
  1307.                 {NoteCountWithLabel}</a>
  1308.                 </span>
  1309.                 {/block:NoteCount}
  1310.            
  1311.                 <a href="{Permalink}" title="{TimeAgo}"
  1312.                class="meta-item post-date">
  1313.                 {ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>
  1314.             </div>
  1315.         </section> <!-- inline-meta date-notes -->
  1316.    
  1317.         <section class="post-controls">
  1318.               <a class="reblog-b" href="{ReblogURL}" target="_blank">reblog</a>
  1319.               <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  1320.           </section>
  1321.     </section> <!-- panel -->
  1322.  
  1323.     {block:PermalinkPage}
  1324.         <div class="post-notes">
  1325.         {block:PostNotes}{PostNotes-64}{/block:PostNotes}
  1326.         </div>
  1327.     {/block:PermalinkPage}
  1328. </footer> <!-- post-footer -->
  1329. </section> <!-- panel -->
  1330. {/block:Date}
  1331. <script>
  1332.       feather.replace()
  1333. </script>                                            
  1334. {block:PermalinkPage}
  1335. {block:Date}
  1336. {block:IfDisqusShortname}
  1337. <section class="comments">
  1338. <div id="disqus_thread"></div>
  1339. <script type="text/javascript">
  1340.                                                       (function() {
  1341.                                                        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  1342.                                                        dsq.src = 'https://{text:Disqus Shortname}.disqus.com/embed.js';
  1343.                                                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  1344.                                                       })();
  1345. </script>
  1346. <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript>
  1347. <a href="https://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
  1348. </section> <!-- comments -->
  1349. {/block:IfDisqusShortname}
  1350. {/block:Date}
  1351. {/block:PermalinkPage}
  1352.  
  1353. </article>
  1354. {/block:Posts}
  1355.  
  1356. </blog>
  1357. </div>
  1358. <!------------------------------------------------------ BLOG ENDS -->
  1359. {block:Pagination}
  1360. <div class="pagination">
  1361.     {block:PreviousPage}
  1362.     <a href="{PreviousPage}" class="previous jump_page">{lang:Previous}</a>
  1363.     {/block:PreviousPage}
  1364.    
  1365.     {block:JumpPagination length="7"}
  1366.         {block:CurrentPage}
  1367.         <span class="current_page">{PageNumber}</span>
  1368.         {/block:CurrentPage}
  1369.         {block:JumpPage}
  1370.         <a class="jump_page" href="{URL}">{PageNumber}</a>
  1371.         {/block:JumpPage}
  1372.     {/block:JumpPagination}
  1373.     {block:NextPage}
  1374.     <a href="{NextPage}" class="next jump_page">{lang:Next}</a>
  1375.     <a class="jump_page" id="last" href="{BlogURL}page/{TotalPages}">Last</a>
  1376.     {/block:NextPage}
  1377. </div><!-- end of .pagination -->
  1378. {/block:Pagination}
  1379. <!------------------------------------------------------ CREDIT -->
  1380. <script>
  1381.       feather.replace()
  1382. </script>      
  1383. </body><!----------------------------------------------- BODY ENDS -->
  1384. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!