API tools faq
paste
longituddeonda

theme one: lemonade

longituddeonda
Oct 3rd, 2020 (edited)
3,264
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 25.35 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <html lang="en-US">
  4. <head>
  5.  
  6. <!-----
  7.  
  8. ;; lemonade ;;
  9.  
  10. theme by ebrothemes
  11.  
  12. CREDITS
  13.  
  14. normalize.css by necolas on github
  15. responsive videos by @nouvae
  16.  
  17. base code by me, patchworked from the official tumblr theme
  18.    -> most class/id names are the same as in the official theme
  19.  
  20. TERMS OF USE:
  21. - do not remove the credit.
  22. - feel free to modify as long as the credit stays on.
  23. - do not repost/redistribute.
  24. - do not take parts of the code and use it as your own.
  25. - do not use as a base code.
  26.  
  27. ----->
  28.  
  29. <title>{Title}</title>
  30.  
  31. <link rel="shortcut icon" href="{Favicon}">
  32. {block:Description}
  33.     <meta name="description" content="{MetaDescription}" />
  34. {/block:Description}
  35.  
  36. <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  37.  
  38. <link href="https://fonts.googleapis.com/css2?family=Grenze:ital,wght@0,400;0,700;1,400;1,700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  39.  
  40. <!-- META COLORS -->
  41.  
  42. <meta name="color:Text" content="#000000"/>
  43. <meta name="color:Background" content="#ffffff"/>
  44. <meta name="color:Borders" content="#bbbbbb"/>
  45. <meta name="color:Accent Color" content="#fdd835"/>
  46. <meta name="color:Accent Light" content="#ffff6b"/>
  47. <meta name="color:Accent Dark" content="#c6a700"/>
  48.  
  49. <!-- META CUSTOM LINKS -->
  50.  
  51. <meta name="if:Link One" content="0"/>
  52. <meta name="if:Link Two" content="0"/>
  53. <meta name="if:Link Three" content="0"/>
  54.  
  55. <meta name="text:Link One Name" content=""/>
  56. <meta name="text:Link One URL" content=""/>
  57. <meta name="text:Link Two Name" content=""/>
  58. <meta name="text:Link Two URL" content=""/>
  59. <meta name="text:Link Three Name" content=""/>
  60. <meta name="text:Link Three URL" content=""/>
  61.  
  62. <style>
  63. /* HEADER */
  64.  
  65. body {
  66.     color: {color:Text};
  67.     font-family: 'Karla', sans-serif;
  68.     font-size: 15px;
  69.     background: {color:Background};
  70. }
  71.  
  72. a {
  73.     text-decoration: none;
  74.     color: {color:Text};
  75. }
  76.  
  77. h1 {
  78.     color: {color:Accent Color};
  79.     font-family: 'Grenze', cursive;
  80.     font-size: 3em;
  81.     margin: 0;
  82. }
  83.  
  84. h2 {
  85.     margin: 0;
  86. }
  87.  
  88. img {
  89.     margin: 0;
  90.     padding: 0;
  91.     width: 100%;
  92.     height: auto;
  93.     display: block;
  94. }
  95.  
  96. p {
  97.     margin-top: 0;
  98.     margin-bottom: 1em;
  99. }
  100.  
  101. p:last-child {
  102.     margin-bottom: 0;
  103.     padding-bottom: 0;
  104. }
  105.  
  106. .credit {
  107.     position: fixed;
  108.     border: 2px solid {color:Accent Color};
  109.     bottom: 20px;
  110.     right: 20px;
  111.     height: 25px;
  112.     width: 25px;
  113.     display: flex;
  114.     justify-content: center;
  115.     align-items: center;
  116.     font-size:17.5px;
  117.     border-radius: 100%;
  118.     background: {color:Background};
  119.     font-weight: 400;
  120.     opacity: 0.5;
  121.     transition: 200ms;
  122. }
  123.  
  124. .credit a {
  125.     text-decoration: none;
  126. }
  127.  
  128. .credit:hover {
  129.     opacity: 1;
  130. }
  131.  
  132. .heading {
  133.     width: 500px;
  134.     padding: 100px 0 50px 0;
  135.     margin: auto;
  136.     background: {color:Background};
  137.     display: flex;
  138.     flex-wrap: wrap;
  139. }
  140.  
  141. .heading-inner {
  142.     width: 350px;
  143. }
  144.  
  145. .heading-inner h1 {
  146.     padding-bottom: 10px;
  147. }
  148.  
  149. .headava {
  150.     margin-left: 22px;
  151. }
  152.  
  153. #description {
  154.     color: {color:Accent Dark};
  155.     font-size: 1.2em;
  156. }
  157.  
  158. .headava img {
  159.     border-radius: 100%;
  160. }
  161.  
  162. .navigation-links {
  163.     width: 100%;
  164.     display: flex;
  165.     margin-top: 20px;
  166. }
  167.  
  168. .navigation-links a {
  169.     margin-right: 20px;
  170.     font-size: 1.1em;
  171.     text-decoration: none;
  172.     color: {color:Text};
  173.     transition: 500ms;
  174. }
  175.  
  176. .navigation-links:last-child {
  177.     margin-right: 0;
  178. }
  179.  
  180. .navigation-links a:hover {
  181.     color: {color:Accent Dark};
  182. }
  183.  
  184. .posts {
  185.     background: {color:Background};
  186.     display: flex;
  187.     flex-direction: column;
  188.     align-items: center;
  189. }
  190.  
  191. .post-wrapper {
  192.     width: 680px;
  193.     margin-bottom: 50px;
  194.     display: flex;
  195. }
  196.  
  197. /* POST FORMATTING */
  198.  
  199. .date-outer {
  200.     width: 90px;
  201. }
  202.  
  203. .left-wrapper {
  204.     width: 90px;
  205.     position: sticky;
  206.     top: 15px;
  207. }
  208.  
  209. .date-box {
  210.     width: 73px;
  211.     height: 73px;
  212.     border: 1px solid {color:Borders};
  213.     margin-right: 15px;
  214.     margin-bottom: 15px;
  215.     /*position: sticky;
  216.     top: 15px;*/
  217.     display: flex;
  218.     flex-direction: column;
  219.     justify-content: center;
  220.     align-items: center;
  221.     transition: 600ms;
  222. }
  223.  
  224. .date-box:hover {
  225.     background: {color:Accent Color};
  226. }
  227.  
  228. .date-inner {
  229.     width: 57px;
  230.     height: 57px;
  231.     margin: 8px;
  232.     text-align: center;
  233.     display: flex;
  234.     flex-direction: column;
  235.     justify-content: center;
  236.     align-items: center;
  237. }
  238.  
  239. .note-count {
  240.     width: 53px;
  241.     text-align: center;
  242.     border: 1px solid {color:Borders};
  243.     position: sticky;
  244.     top: 105px;
  245.     padding: 10px;
  246.     transition: 500ms;
  247. }
  248.  
  249. .note-count:hover {
  250.     background: {color:Accent Color};
  251.     color: {color:Background};
  252. }
  253.  
  254. .post {
  255.     width: 498px;
  256.     border: 1px solid {color:Borders};
  257. }
  258.  
  259. .post a {
  260.     color: {color:Text};
  261.     background-image: linear-gradient({color:Background} 50%, {color:Accent Light} 50%);
  262.     background-position-y: 45%;
  263.     transition: background 500ms ease;
  264.     background-size: auto 200%;
  265. }
  266.  
  267. .post a:hover {
  268.     background-position-y: 100%;
  269. }
  270.  
  271. .post-reblog-trail-item {
  272.     border-top: 1px solid {color:Borders};
  273.     padding: 20px;
  274. }
  275.  
  276. .post-reblog-header {
  277.     margin-bottom: 1em;
  278. }
  279.  
  280. .rb-text:first-child {
  281.     border-top: none;
  282.     padding: 20px;
  283. }
  284.  
  285. .post-content {
  286.     padding: 20px;
  287. }
  288.  
  289. .post-content h2 {
  290.     margin: 0;
  291.     color: {color:Accent Dark};
  292. }
  293.  
  294. h2 > a {
  295.     font-size: 1.3em;
  296. }
  297.  
  298. .post-content.title {
  299.     border-bottom: 1px solid {color:Borders};
  300. }
  301.  
  302. /* AUDIO POSTS */
  303.  
  304. .audio_container {
  305.     width: 100%;
  306. }
  307.  
  308. .tumblr_audio_player {
  309.     width: 100%;
  310. }
  311.  
  312. /* VIDEO POSTS */
  313.  
  314. .video-wrapper {
  315.     width: 100%;
  316. }
  317.  
  318. /* QUOTE POSTS */
  319.  
  320. .quote-short {
  321.     font-size: 1.5em;
  322. }
  323.  
  324. .quote-medium {
  325.     font-size: 1.3em;
  326. }
  327.  
  328. .quote-long {
  329.     font-size: 1.2em;
  330. }
  331.  
  332. /* CHAT POSTS */
  333.  
  334. .conversation {
  335.     list-style: none;
  336.     margin: 0;
  337.     padding: 0;
  338. }
  339.  
  340. .conversation .label {
  341.     font-weight: 700;
  342. }
  343.  
  344. /* ANSWER POSTS */
  345.  
  346. .note-item {
  347.     display: flex;
  348.     /*justify-content: space-between;*/
  349. }
  350.  
  351. .note-item .avatar {
  352.     width: 75px;
  353.     min-width: 75px;
  354.     height: 75px;
  355. }
  356.  
  357. .note-item .text {
  358.     flex-grow: 10;
  359. }
  360.  
  361. .note-item-asker {
  362.     border: 1px solid {color:Borders};
  363.     padding: 20px;
  364. }
  365.  
  366. .note-item-asker .text {
  367.    
  368. }
  369.  
  370. .note-item-asker .avatar {
  371.     margin-right: 20px;
  372. }
  373.  
  374. .asker-avatar /* img class */ {
  375.    
  376. }
  377.  
  378. .note-item-answerer {
  379.     border: 1px solid {color:Borders};
  380.     padding: 20px;
  381.     margin-top: 20px;
  382. }
  383.  
  384. .note-item-answerer .text {
  385.    
  386. }
  387.  
  388. .note-item-answerer .avatar {
  389.     margin-left: 20px;
  390.    
  391. }
  392.  
  393. .answer-post .replies {
  394.     padding-top: 20px;
  395. }
  396.  
  397. /* TAGS */
  398.  
  399. .tag-section {
  400.     border-top: 1px solid {color:Borders};
  401.     padding: 20px;
  402. }
  403.  
  404. .tag-link {
  405. }
  406.  
  407. .tag-link-a {
  408.     margin-right: 20px;
  409.     font-size: 0,8em;
  410. }
  411.  
  412. .tag-link-a:last-child {
  413.     margin-right: 0;
  414. }
  415.  
  416. /* LIKE AND REBLOG BOX */
  417.  
  418. .likerb {
  419.     height: 75px;
  420.     width: 75px;
  421.     margin-left: 15px;
  422.     position: sticky;
  423.     top: 15px;
  424. }
  425.  
  426. .likerb-box-outer {
  427.     width: 30px;
  428. }
  429.  
  430. .likerb-box {
  431.     width: 28px;
  432.     height: 28px;
  433.     border: 1px solid {color:Borders};
  434.     margin-bottom: 15px;
  435.     display: flex;
  436.     justify-content: center;
  437.     align-items: center;
  438. }
  439.  
  440. /* DATE and TIME FORMATTING */
  441.  
  442. .date {
  443.     color: {color:Accent Dark};
  444.     text-transform: uppercase;
  445.     transition: 600ms;
  446. }
  447.  
  448. .time {
  449.     transition: 500ms;
  450. }
  451.  
  452. .divide {
  453.     width: 15px;
  454.     height: 0px;
  455.     border-bottom: 1px solid {color:Text};
  456.     margin: 3px;
  457.     transition: 600ms;
  458. }
  459.  
  460. .date-box:hover .divide {
  461.    border-color: {color:Background};
  462. }
  463.  
  464. .date-box:hover .date,
  465. .date-box:hover .time {
  466.     color: {color:Background};
  467. }
  468.  
  469. /* POST NOTES */
  470.  
  471. .notes-wrapper {
  472.     width: 458px;
  473.     margin: auto;
  474.     border: 1px solid {color:Borders};
  475.     padding: 20px;
  476. }
  477.  
  478. li.more_notes_link_container {
  479.     font-size: 1.1em;
  480. }
  481.  
  482.  
  483. ol.notes img {
  484.     display: none;
  485. }
  486.  
  487. ol.notes {
  488.     list-style-type: none;
  489.     max-width: 100%;
  490.     padding: 0;
  491.     margin: 0;
  492. }
  493.  
  494. ol.notes li.note {
  495.     padding-bottom: 20px;
  496.     display: flex;
  497. }
  498.  
  499. ol.notes li:last-child {
  500.     padding: 0;
  501. }
  502.  
  503. ol.notes a {
  504.     color: {color:Text};
  505.     background-image: linear-gradient({color:Background} 50%, {color:Accent Light} 50%);
  506.     background-position-y: 45%;
  507.     transition: background 500ms ease;
  508.     background-size: auto 200%;
  509. }
  510.  
  511. ol.notes a:hover {
  512.     background-position-y: 100%;
  513. }
  514.  
  515. /* FOOTER */
  516.  
  517. footer {
  518.     height: 150px;
  519. }
  520.  
  521. /* PAGINATION */
  522.  
  523. .pagination {
  524.     width: 500px;
  525.     padding: 0;
  526.     margin: 50px auto;
  527.     text-align: center;
  528.     display: flex;
  529.     justify-content: center;
  530. }
  531.  
  532. .previous, .next-page {
  533.     margin: 0 10px;
  534.     height: 30px;
  535.     text-decoration: none;
  536.     background: none;
  537.     border: 1px solid {color:Borders};
  538.     display: flex;
  539.     justify-content: center;
  540.     align-items: center;
  541.     padding: 0 10px;
  542.     transition: 500ms;
  543. }
  544.  
  545. .jump_page {
  546.     text-decoration: none;
  547.     background: none;
  548.     height: 30px;
  549.     width: 30px;
  550.     display: flex;
  551.     justify-content: center;
  552.     align-items: center;
  553.     border: 1px solid {color:Borders};
  554.     margin: 0 10px;
  555.     transition: 500ms;
  556. }
  557.  
  558. .current_page {
  559.     text-decoration: none;
  560.     background: none;
  561.     height: 30px;
  562.     width: 30px;
  563.     display: flex;
  564.     justify-content: center;
  565.     align-items: center;
  566.     border: 1px solid {color:Borders};
  567.     margin: 0 10px;
  568.     background: {color:Accent Color};
  569. }
  570.  
  571. .previous:hover, .jump_page:hover, .next-page:hover {
  572.     background: {color:Accent Color};
  573. }
  574.  
  575.  
  576. </style>
  577.  
  578. </head>
  579.  
  580.  
  581.  
  582. <body>
  583. <div class="heading">
  584. <div class="heading-inner">
  585.     <h1>{Title}</h1>
  586.     {block:Description}
  587.     <p id="description">{Description}</p>
  588.     {/block:Description}
  589. </div>
  590.  
  591. <div class="headava"><img src="{PortraitURL-128}"></div>
  592. <div class="navigation-links">
  593.     <a href="/">home.</a>
  594.     <a href="/ask">ask.</a>
  595.     <a href="/archive">archive.</a>
  596.     {block:IfLinkOne}<a href="{text:Link One URL}">{text:Link One Name}.</a>{/block:IfLinkOne}
  597.     {block:IfLinkTwo}<a href="{text:Link Two URL}">{text:Link Two Name}.</a>{/block:IfLinkTwo}
  598.     {block:IfLinkThree}<a href="{text:Link Three URL}">{text:Link Three Name}.</a>{/block:IfLinkThree}
  599. </div>
  600. </div>
  601.  
  602. <!-- POSTS -->
  603. <div class="posts">
  604.  
  605. {block:Posts}
  606.  
  607. <div class="post-wrapper">
  608.  
  609. <div class="date-outer">{block:Date}
  610. <div class="left-wrapper"><div class="date-box"><a href="{Permalink}"><div class="date-inner">
  611.     <div class="date">{ShortMonth} {DayOfMonth}<br>{Year}</div>
  612.     <div class="divide"></div>
  613.     <div class="time">{24Hour}:{Minutes}</div>
  614. </div></a></div>
  615.  
  616. <a class="notecountlink" href="{Permalink}">
  617. <div class="note-count">
  618.     {NoteCountWithLabel}
  619. </div></a></div>
  620. {/block:Date}</div>
  621.  
  622.  
  623.  
  624. <div class="post">
  625.  
  626. <!-- TEXT POST -->  
  627.  
  628. {block:Text}
  629.     {block:Title}
  630.         <div class="post-content text-post title">
  631.         <h2 class="title"><a href="{Permalink}">{Title}</a></h2>
  632.         </div>
  633.     {/block:Title}
  634.     {block:NotReblog}
  635.         <div class="post-content text-post body">
  636.         <div class="body-text">{Body}</div>
  637.         </div>
  638.     {/block:NotReblog}
  639.    
  640.     <!-- REBLOG -->
  641.  
  642. {block:RebloggedFrom}
  643.         <div class="reblog-list">
  644.             {block:Reblogs}
  645.             <div class="post-reblog-trail-item rb-{PostType}">
  646.                 <div class="post-reblog-header">
  647.                     {block:IsActive}
  648.                     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}:</a>
  649.                     {/block:IsActive}
  650.                     {block:IsDeactivated}
  651.                     <span class="inactive post-tumblelog-name">{Username}:</span>
  652.                     {/block:IsDeactivated}
  653.                 </div>
  654.                 <div class="post-reblog-content">
  655.                     <div class="post-body">
  656.                         {Body}
  657.                     </div>
  658.                 </div>
  659.             </div>
  660.             {/block:Reblogs}
  661.         </div>
  662.     {/block:RebloggedFrom}
  663.    
  664. {/block:Text}
  665.  
  666.  
  667.  
  668. <!-- PHOTO POSTS -->
  669.  
  670. {block:Photo}
  671.     <div class="post-content photo" data-photo-width="{PhotoWidth-HighRes}">
  672.         <div class="photo-wrapper">
  673.             <div class="photo-wrapper-inner">
  674.                 {LinkOpenTag}<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}>{LinkCloseTag}
  675.             </div>
  676.         </div>
  677.         {block:NotReblog}
  678.             <figcaption class="caption">
  679.                 {Caption}
  680.             </figcaption>
  681.         {/block:NotReblog}
  682.     </div>
  683.    
  684.     <!-- REBLOG -->
  685.  
  686. {block:RebloggedFrom}
  687.         <div class="reblog-list">
  688.             {block:Reblogs}
  689.             <div class="post-reblog-trail-item rb-{PostType}">
  690.                 <div class="post-reblog-header">
  691.                     {block:IsActive}
  692.                     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}:</a>
  693.                     {/block:IsActive}
  694.                     {block:IsDeactivated}
  695.                     <span class="inactive post-tumblelog-name">{Username}:</span>
  696.                     {/block:IsDeactivated}
  697.                 </div>
  698.                 <div class="post-reblog-content">
  699.                     <div class="post-body">
  700.                         {Body}
  701.                     </div>
  702.                 </div>
  703.             </div>
  704.             {/block:Reblogs}
  705.         </div>
  706.     {/block:RebloggedFrom}
  707.    
  708. {/block:Photo}
  709.                
  710.                
  711. <!-- PANO POSTS??? IDK IF ANYONE USES THESE -->                
  712. {block:Panorama}
  713.     <div class="post panorama">
  714.         {LinkOpenTag}
  715.             <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  716.         {LinkCloseTag}
  717.         {block:Caption}
  718.             <div class="caption">{Caption}</div>
  719.         {/block:Caption}
  720.     </div>
  721.    
  722.     <!-- REBLOG -->
  723.  
  724. {block:RebloggedFrom}
  725.         <div class="reblog-list">
  726.             {block:Reblogs}
  727.             <div class="post-reblog-trail-item rb-{PostType}">
  728.                 <div class="post-reblog-header">
  729.                     {block:IsActive}
  730.                     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}:</a>
  731.                     {/block:IsActive}
  732.                     {block:IsDeactivated}
  733.                     <span class="inactive post-tumblelog-name">{Username}:</span>
  734.                     {/block:IsDeactivated}
  735.                 </div>
  736.                 <div class="post-reblog-content">
  737.                     <div class="post-body">
  738.                         {Body}
  739.                     </div>
  740.                 </div>
  741.             </div>
  742.             {/block:Reblogs}
  743.         </div>
  744.     {/block:RebloggedFrom}
  745.    
  746. {/block:Panorama}
  747.  
  748.  
  749. <!-- PHOTOSET POSTS -->              
  750.                
  751. {block:Photoset}
  752.     <div class="post-content photoset">
  753.         {Photoset}
  754.        
  755.         {block:NotReblog}
  756.             <figcaption class="caption">
  757.                 {Caption}
  758.             </figcaption>
  759.         {/block:NotReblog}
  760.     </div>
  761.    
  762.     <!-- REBLOG -->
  763.  
  764. {block:RebloggedFrom}
  765.         <div class="reblog-list">
  766.             {block:Reblogs}
  767.             <div class="post-reblog-trail-item rb-{PostType}">
  768.                 <div class="post-reblog-header">
  769.                     {block:IsActive}
  770.                     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}:</a>
  771.                     {/block:IsActive}
  772.                     {block:IsDeactivated}
  773.                     <span class="inactive post-tumblelog-name">{Username}:</span>
  774.                     {/block:IsDeactivated}
  775.                 </div>
  776.                 <div class="post-reblog-content">
  777.                     <div class="post-body">
  778.                         {Body}
  779.                     </div>
  780.                 </div>
  781.             </div>
  782.             {/block:Reblogs}
  783.         </div>
  784.     {/block:RebloggedFrom}
  785.    
  786. {/block:Photoset}
  787.                
  788.  
  789. <!-- QUOTE POSTS -->                
  790.                
  791. {block:Quote}
  792.     <div class="post-content quote">
  793.         <div class="quote-{Length}">
  794.             {Quote}
  795.         </div>
  796.         {block:Source}
  797.             <div class="source">{Source}</div>
  798.         {/block:Source}
  799.     </div>
  800. {/block:Quote}
  801.  
  802.  
  803.  
  804. <!-- LINK POSTS -->
  805.                
  806. {block:Link}
  807.     <div class="post-content link-post">
  808.         <div class="link-wrapper">
  809.             <a {Target} href="{URL}" class="link">
  810.                 {block:Thumbnail}
  811.                 <div class="link-thumbnail"><img src="{Thumbnail-HighRes}" alt="" /></div>
  812.                 {/block:Thumbnail}
  813.                 <div class="link-text-wrapper">
  814.                     <div class="link-text">
  815.                         {block:Host}
  816.                             <div class="link-host">{Host}</div>
  817.                         {/block:Host}
  818.                         <h2 class="link-title">{Name}</h2>
  819.                         {block:Excerpt}
  820.                             <div class="link-excerpt">{Excerpt}</div>
  821.                         {/block:Excerpt}
  822.                         {block:Author}
  823.                             <div class="link-author">{Author}</div>
  824.                         {/block:Author}
  825.                     </div>
  826.                 </div>
  827.             </a>
  828.         </div>
  829.     {block:NotReblog}
  830.         <div class="caption">
  831.             {Description}
  832.         </div>
  833.     {/block:NotReblog}
  834.     </div>
  835.    
  836.     <!-- REBLOG -->
  837.  
  838. {block:RebloggedFrom}
  839.         <div class="reblog-list">
  840.             {block:Reblogs}
  841.             <div class="post-reblog-trail-item rb-{PostType}">
  842.                 <div class="post-reblog-header">
  843.                     {block:IsActive}
  844.                     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}:</a>
  845.                     {/block:IsActive}
  846.                     {block:IsDeactivated}
  847.                     <span class="inactive post-tumblelog-name">{Username}:</span>
  848.                     {/block:IsDeactivated}
  849.                 </div>
  850.                 <div class="post-reblog-content">
  851.                     <div class="post-body">
  852.                         {Body}
  853.                     </div>
  854.                 </div>
  855.             </div>
  856.             {/block:Reblogs}
  857.         </div>
  858.     {/block:RebloggedFrom}
  859.    
  860. {/block:Link}
  861.                
  862.                
  863. <!-- CHAT POSTS -->                
  864. {block:Chat}
  865.     <div class="post-content chat">
  866.         {block:Title}
  867.             <h2 class="title"><a href="{Permalink}">{Title}</a></h2>
  868.         {/block:Title}
  869.         <ul class="conversation">
  870.             {block:Lines}
  871.                 <li class="chat-{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>
  872.             {/block:Lines}
  873.         </ul>
  874.     </div>
  875. {/block:Chat}  
  876.  
  877.  
  878. <!-- AUDIO POSTS -->
  879.  
  880. {block:Audio}
  881.     <div class="post-content audio">
  882.         <div class="audio_container">
  883.             {block:AudioEmbed}
  884.                 {AudioEmbed color="white"}
  885.             {/block:AudioEmbed}
  886.         </div>
  887.         {block:NotReblog}
  888.             <div class="caption">
  889.                 {Caption}
  890.             </div>
  891.         {/block:NotReblog}
  892.     </div>
  893.    
  894.     <!-- REBLOG -->
  895.  
  896. {block:RebloggedFrom}
  897.         <div class="reblog-list">
  898.             {block:Reblogs}
  899.             <div class="post-reblog-trail-item rb-{PostType}">
  900.                 <div class="post-reblog-header">
  901.                     {block:IsActive}
  902.                     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}:</a>
  903.                     {/block:IsActive}
  904.                     {block:IsDeactivated}
  905.                     <span class="inactive post-tumblelog-name">{Username}:</span>
  906.                     {/block:IsDeactivated}
  907.                 </div>
  908.                 <div class="post-reblog-content">
  909.                     <div class="post-body">
  910.                         {Body}
  911.                     </div>
  912.                 </div>
  913.             </div>
  914.             {/block:Reblogs}
  915.         </div>
  916.     {/block:RebloggedFrom}
  917.    
  918. {/block:Audio}
  919.  
  920.  
  921.  
  922.                
  923. <!-- VIDEO POSTS -->
  924.  
  925.  
  926. {block:Video}
  927.     <div class="post-content video">
  928.         <div class="video-wrapper">
  929.             {Video-500}
  930.         </div>
  931.         {block:NotReblog}
  932.             <figcaption class="caption">
  933.                 {Caption}
  934.             </figcaption>
  935.         {/block:NotReblog}
  936.     </div>
  937.    
  938.     <!-- REBLOG -->
  939.  
  940. {block:RebloggedFrom}
  941.         <div class="reblog-list">
  942.             {block:Reblogs}
  943.             <div class="post-reblog-trail-item rb-{PostType}">
  944.                 <div class="post-reblog-header">
  945.                     {block:IsActive}
  946.                     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}:</a>
  947.                     {/block:IsActive}
  948.                     {block:IsDeactivated}
  949.                     <span class="inactive post-tumblelog-name">{Username}:</span>
  950.                     {/block:IsDeactivated}
  951.                 </div>
  952.                 <div class="post-reblog-content">
  953.                     <div class="post-body">
  954.                         {Body}
  955.                     </div>
  956.                 </div>
  957.             </div>
  958.             {/block:Reblogs}
  959.         </div>
  960.     {/block:RebloggedFrom}
  961.    
  962. {/block:Video}
  963.  
  964.  
  965. <!-- ANSWER POST -->
  966.  
  967. {block:Answer}
  968.     <div class="post-content answer-post">
  969.         <div class="note-item note-item-asker">
  970.             <div class="avatar">
  971.                 <img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
  972.             </div>
  973.             <div class="text">
  974.                 <p class="asker"><strong>{Asker}</strong> asked:</p>
  975.                 <div class="asker-question">
  976.                     {Question}
  977.                 </div>
  978.             </div>
  979.         </div>
  980.  
  981.         {block:Answerer}
  982.             <div class="note-item note-item-answerer">
  983.                 <div class="text">
  984.                     <p class="answerer"><strong>{Answerer}</strong> answered:</p>
  985.                     <div class="answerer-answer">
  986.                         {Answer}
  987.                     </div>
  988.                 </div>
  989.                 <div class="avatar">
  990.                     <img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
  991.                 </div>
  992.             </div>
  993.         {/block:Answerer}
  994.  
  995.         {block:NotReblog}
  996.             <div class="replies">
  997.                 {Replies}
  998.             </div>
  999.         {/block:NotReblog}
  1000.        
  1001.     </div>
  1002.    
  1003.     <!-- REBLOG -->
  1004.  
  1005. {block:RebloggedFrom}
  1006.         <div class="reblog-list">
  1007.             {block:Reblogs}
  1008.             <div class="post-reblog-trail-item rb-{PostType}">
  1009.                 <div class="post-reblog-header">
  1010.                     {block:IsActive}
  1011.                     <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}:</a>
  1012.                     {/block:IsActive}
  1013.                     {block:IsDeactivated}
  1014.                     <span class="inactive post-tumblelog-name">{Username}:</span>
  1015.                     {/block:IsDeactivated}
  1016.                 </div>
  1017.                 <div class="post-reblog-content">
  1018.                     <div class="post-body">
  1019.                         {Body}
  1020.                     </div>
  1021.                 </div>
  1022.             </div>
  1023.             {/block:Reblogs}
  1024.         </div>
  1025.     {/block:RebloggedFrom}
  1026.    
  1027. {/block:Answer}
  1028.  
  1029.  
  1030. {block:HasTags}
  1031. <div class="tag-section">
  1032.     <div class="tag-link">
  1033.     {block:Tags}
  1034.         <a class="tag-link-a" href="{TagURL}"># {Tag}</a>
  1035.     {/block:Tags}
  1036.     </div>
  1037. </div>
  1038. {/block:HasTags}
  1039.  
  1040. </div>  <!-- post -->  
  1041.  
  1042. <div class="likerb-box-outer">{block:Date}
  1043. <div class="likerb">
  1044.     <div class="likerb-box">{LikeButton size="15"}</div>
  1045.     <div class="likerb-box">{ReblogButton size="15"}</div>
  1046. </div>
  1047. {/block:Date}</div>
  1048.  
  1049.  
  1050. </div>  <!-- post-wrapper -->    
  1051.  
  1052. {/block:Posts}
  1053. </div>  <!-- posts -->
  1054.  
  1055. {block:PostNotes}
  1056. <div class="notes-wrapper">
  1057.     {PostNotes}
  1058. </div>
  1059. {/block:PostNotes}
  1060.  
  1061. <footer>
  1062.    
  1063.     <div class="pagination">
  1064.         {block:Pagination}
  1065.             {block:PreviousPage}
  1066.                 <a class="previous" href="{PreviousPage}">Previous</a>
  1067.             {/block:PreviousPage}
  1068.             {block:JumpPagination length="5"}
  1069.                 {block:CurrentPage}
  1070.                     <span class="current_page">{PageNumber}</span>
  1071.                 {/block:CurrentPage}
  1072.                 {block:JumpPage}
  1073.                     <a class="jump_page" href="{URL}">{PageNumber}</a>
  1074.                 {/block:JumpPage}
  1075.             {/block:JumpPagination}
  1076.             {block:NextPage}
  1077.                 <a class="next-page"href="{NextPage}">Next</a>
  1078.             {/block:NextPage}
  1079.         {/block:Pagination}
  1080.     </div>      
  1081.  
  1082. </footer>
  1083.  
  1084. <div class="credit"><a href="https://ebrothemes.tumblr.com" title="ebrothemes" style="color:var(--accent);">E</a></div>
  1085.  
  1086. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1087. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  1088. <script>
  1089.     $(document).ready(function() {
  1090.   flexibleFrames($(".video-wrapper"));  // $(".video") is the class selector passed in the argument
  1091. });
  1092. </script>
  1093.     </body>
  1094. </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!