API tools faq
paste
enbythemes

theme 03: folk

enbythemes
May 29th, 2020 (edited)
414
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.92 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. folk © xroub.tumblr.com
  3. -->
  4.  
  5. <!-- credits -->
  6. <!--
  7. dashboard style captions base: espoirthemes & annasthms
  8. photoset.css: annasthms & espoirthemes
  9. audio player: shudesigns
  10. responsive videos: nouvae
  11. fixed tumblr controls: magnusthemes
  12. -->
  13.  
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17. <link rel="shortcut icon" href="{Favicon}" />
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  19. <title>{Title}</title>
  20. {block:Description}
  21. <meta name="description" content="{MetaDescription}" />
  22. {/block:Description}
  23.  
  24. <meta name="color:background" content="#fafafa">
  25. <meta name="color:font color" content="#222222">
  26. <meta name="color:header" content="#ffffff">
  27. <meta name="color:posts" content="#ffffff">
  28. <meta name="color:accent" content="#ffc8e7">
  29. <meta name="color:link posts" content="#f0f0f0">
  30. <meta name="color:ask posts" content="#f0f0f0">
  31. <meta name="color:audio player" content="ffc8e7">
  32.  
  33. <meta name="select:post size" content="500px">
  34. <meta name="select:post size" content="540px">
  35. <meta name="select:post size" content="600px">
  36. <meta name="select:post size" content="650px">
  37. <meta name="select:post size" content="700px">
  38.  
  39. <meta name="select:photoset gutter" content="1px">
  40. <meta name="select:photoset gutter" content="2px">
  41. <meta name="select:photoset gutter" content="3px">
  42. <meta name="select:photoset gutter" content="4px">
  43. <meta name="select:photoset gutter" content="5px">
  44.  
  45. <meta name="text:google font" content="Open Sans">
  46. <meta name="text:font size" content="12px">
  47.  
  48. <meta name="text:link one" content="link one">
  49. <meta name="text:link one url" content="">
  50. <meta name="text:link two" content="link two">
  51. <meta name="text:link two url" content="">
  52. <meta name="text:link three" content="link three">
  53. <meta name="text:link three url" content="">
  54.  
  55. <!-- scripts -->
  56. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  57.  
  58. <link href="https://fonts.googleapis.com/css?family={text:Google Font}:700,400" rel="stylesheet">
  59.  
  60. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  61.  
  62. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  63.  
  64. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  65.  
  66. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  67.  
  68. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  69. <script>
  70. function gatherData(images, arr) {
  71. for (let i = 0; i < images.length; i++) {
  72. let currentData = {
  73. "width": images[i].getAttribute('data-width'),
  74. "height": images[i].getAttribute('data-height'),
  75. "low_res": images[i].getAttribute('data-lowres'),
  76. "high_res": images[i].getAttribute('data-highres')
  77. };
  78. arr.push(currentData);
  79. }
  80. }
  81. function getIndex(elem) {
  82. let i = 0;
  83. while( (elem = elem.previousElementSibling) != null ) i++;
  84. return i;
  85. }
  86. function lightbox(elem) {
  87. let currentPhotoset = elem.parentNode;
  88. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  89. let data = [];
  90. gatherData(photosetPhotos, data);
  91. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  92. }
  93. </script>
  94.  
  95. <script>
  96. $(document).ready(function() {
  97. // audio player
  98. var $audio = $('iframe.tumblr_audio_player');
  99. $audio.load(function() {
  100. $(this).contents().find('head').append('<style type="text/css">' +
  101. '.audio-player { background: {color:audio player}; color: #fff !important; }' +
  102. '.audio-player .audio-info .track-artist { color: #fff !important; }' +
  103. '</style>');
  104. });
  105. });
  106. </script>
  107.  
  108. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  109. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  110.  
  111. <script>
  112. function flexFrame() {
  113. $(".caption").each(function() {
  114. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  115. flexibleFrames($(".capframe"));
  116. });
  117. flexibleFrames($(".video"));
  118. }
  119.  
  120. $(document).ready(flexFrame);
  121. </script>
  122.  
  123. <style>
  124. body {
  125. margin: 0;
  126. background: {color:background};
  127. font-family: {text:google font};
  128. font-size: {text:font size};
  129. color: {text:font color};
  130. word-wrap: break-word;
  131. }
  132.  
  133. h1, h2, h3, h4, h5, small, big {
  134. font-size: 1em;
  135. }
  136.  
  137. blockquote {
  138. border-left: 2px solid {color:accent};
  139. padding-left: 10px;
  140. margin: 1em 0;
  141. }
  142.  
  143. ul {
  144. margin-left: -25px;
  145. }
  146.  
  147. ol {
  148. margin-left: -27px;
  149. }
  150.  
  151. a {
  152. text-decoration: none;
  153. color: {color:accent};
  154. -webkit-transition: all 0.3s ease;
  155. -moz-transition: all 0.3s ease;
  156. -o-transition: all 0.3s ease;
  157. }
  158.  
  159. a:hover {
  160. color: {color:font color};
  161. border-bottom: 2px solid {color:accent};
  162. -webkit-transition: all 0.3s ease;
  163. -moz-transition: all 0.3s ease;
  164. -o-transition: all 0.3s ease;
  165. }
  166.  
  167. /* header */
  168. header {
  169. width: calc(90% - 40px);
  170. min-width: 160px;
  171. max-width: calc({select:post size} - 40px);
  172. margin: 5% auto;
  173. background: {color:header};
  174. padding: 20px;
  175. }
  176.  
  177. header img {
  178. border-radius: 100%;
  179. width: 24px;
  180. float: left;
  181. }
  182.  
  183. header h1 {
  184. display: inline-block;
  185. margin-left: 5px;
  186. margin-top: 3px;
  187. }
  188.  
  189. .links {
  190. width: 100%;
  191. margin: 15px 0 0 -20px;
  192. padding: 15px 20px 0;
  193. border-top: 3px solid {color:accent};
  194. }
  195.  
  196. .links a {
  197. color: {color:font color};
  198. margin: 0 .5em .5em 0;
  199. }
  200.  
  201. .links a:hover {
  202. color: {color:accent};
  203. }
  204.  
  205. /* posts */
  206. section {
  207. width: 90%;
  208. min-width: 200px;
  209. max-width: {select:post size};
  210. margin: 1em auto 0;
  211. }
  212.  
  213. article {
  214. background: {color:posts};
  215. padding: 0px 20px 20px;
  216. margin-bottom: 100px;
  217. }
  218.  
  219. /* post info */
  220. .permalinks {
  221. width: 100%;
  222. margin: 0 0 20px -20px;
  223. padding: 15px 20px;
  224. border-bottom: 3px solid {color:accent};
  225. }
  226.  
  227. .permalinks a {
  228. color: {color:font color};
  229. margin: 0 .25em;
  230. }
  231.  
  232. .permalinks a:hover, .tags a:hover {
  233. color: {color:accent};
  234. border-bottom: none;
  235. }
  236.  
  237. /* like and reblog buttons */
  238. .like-reblog a {
  239. position: relative;
  240. display: inline-block;
  241. overflow: hidden;
  242. }
  243.  
  244. .like-reblog .like .liked + svg path {
  245. fill: #ec5a5a;
  246. }
  247.  
  248. .like-reblog .like .like_button {
  249. position: relative;
  250. }
  251.  
  252. .like-reblog .like .like_button iframe {
  253. position: absolute;
  254. top: 0;
  255. left: 0;
  256. bottom: 0;
  257. right: 0;
  258. z-index: 2;
  259. opacity: 0.000001;
  260. }
  261.  
  262. /* photo posts */
  263. .photo {
  264. width: 100%;
  265. }
  266.  
  267. article img {
  268. max-width: 100%;
  269. height: auto!important;
  270. }
  271.  
  272. /* photosets */
  273. [photoset-layout] {
  274. grid-gap: {select:photoset gutter};
  275. }
  276.  
  277. [photoset-layout] div {
  278. cursor: pointer;
  279. }
  280.  
  281. /* quote posts */
  282. .quote {
  283. font-size: 2em;
  284. margin-bottom: 5px;
  285. }
  286.  
  287. /* chat posts */
  288. .chat {
  289. margin: 0;
  290. padding: 0;
  291. list-style: none;
  292. }
  293.  
  294. .chat li {
  295. padding: 7px 0;
  296. }
  297.  
  298. .chat .label {
  299. font-weight: bold;
  300. border-bottom: 3px solid {color:accent};
  301. }
  302.  
  303. /* link posts */
  304. .link {
  305. font-size: 1.2em;
  306. padding: 20px;
  307. background: {color:link posts};
  308. text-align: center;
  309. }
  310.  
  311. /* audio posts */
  312. iframe.tumblr_audio_player {
  313. height: 85px;
  314. width: 100%;
  315. }
  316.  
  317. /* answer posts */
  318. .question_container {
  319. background: {color:ask posts};
  320. padding: 10px;
  321. }
  322.  
  323. .answer_container, .reply_container {
  324. margin-top: 20px;
  325. }
  326.  
  327. .question_container img, .answer_container img, .reply_container img {
  328. border-radius: 100%;
  329. vertical-align: middle;
  330. width: 24px;
  331. margin-right: 6px;
  332. }
  333.  
  334. /* captions */
  335. .reblog-header {
  336. margin-top: 20px;
  337. }
  338.  
  339. .reblog-header a {
  340. font-weight: bold;
  341. margin-bottom: -1px;
  342. }
  343.  
  344. /* tags*/
  345. .tags {
  346. margin: -80px 0 100px;
  347. padding: 0 20px;
  348. }
  349.  
  350. .tags a {
  351. display: inline-block;
  352. margin: 0 1em 1em 0;
  353. padding: 8px 10px;
  354. background: {color:posts};
  355. }
  356.  
  357. .tags a:hover {
  358. color: {color:font color};
  359. }
  360.  
  361. /* pagination */
  362. .pagination {
  363. margin: -50px auto 50px;
  364. text-align: center;
  365. }
  366.  
  367. .pagination a {
  368. margin: 0 1em;
  369. }
  370.  
  371. /* post notes */
  372. ol.notes {
  373. width: 90%;
  374. min-width: 200px;
  375. max-width: {select:post size};
  376. background: {color:posts};
  377. padding: 20px 35px;
  378. margin: -50px auto 50px;
  379. }
  380.  
  381. ol.notes li {
  382. padding: 0;
  383. margin: 10px 5px;
  384. list-style-type: none;
  385. }
  386.  
  387. ol.notes li img {
  388. vertical-align: middle;
  389. border-radius: 100%;
  390. margin-right: 5px;
  391. }
  392.  
  393. .iframe-controls--desktop {
  394. position:fixed;
  395. top:0px;
  396. right:0px;
  397. z-index:214748364789123456789;
  398. filter:invert(100%);
  399. -webkit-filter:invert(100%);
  400. -webkit-transform:scale(0.6,0.6);
  401. -webkit-transform-origin: 100% 0%;
  402. -ms-transform-origin:100% 0%;
  403. -ms-transform:scale(0.6,0.6);
  404. transform:scale(0.6,0.6);
  405. transform-origin:100% 0%;
  406. }
  407.  
  408. /*credit */
  409. .crd {
  410. bottom: 10px;
  411. right: 10px;
  412. position: fixed;
  413. }
  414.  
  415. .crd svg {
  416. width: 1em;
  417. }
  418.  
  419. {CustomCSS}
  420. </style>
  421. </head>
  422. <body>
  423.  
  424. <header>
  425. <img src="{PortraitURL-128}">
  426. <h1>{Title}</h1>
  427.  
  428. {block:Description}<div class="desc">{Description}</div>{/block:Description}
  429.  
  430. <div class="links">
  431. <a href="/">index</a>
  432. <a href="/ask">message</a>
  433. <a href="{text:link one url}">{text:link one}</a>
  434. <a href="{text:link two url}">{text:link two}</a>
  435. <a href="{text:link three url}">{text:link three}</a>
  436. </div>
  437. </header>
  438.  
  439. <section>
  440. {block:Posts}
  441. <!-- {block:NoRebloggedFrom}
  442. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  443. {/block:NoRebloggedFrom} -->
  444. {block:ContentSource}<!-- {SourceURL}
  445. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  446. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  447. {/block:ContentSource}
  448. <article class="{posttype}post posts" id="{PostID}">
  449.  
  450. <!-- post info -->
  451. {block:Date}
  452. <div class="permalinks">
  453. <a href="{Permalink}" title="posted {TimeAgo}"><i class="far fa-clock"></i></a>
  454. {block:RebloggedFrom}
  455. <a href="{ReblogParentURL}" title="reblogged from {ReblogParentName}"><i class="far fa-user" style="font-size: .97em"></i></a>
  456. {/block:RebloggedFrom}
  457. {block:RebloggedFrom}
  458. {block:ContentSource}
  459. <a href="{ReblogRootURL}" title="original by {ReblogRootName}"><i class="far fa-copyright"></i></a>
  460. {/block:ContentSource}
  461. {/block:RebloggedFrom}
  462.  
  463. <div class="like-reblog" style="float:right;">
  464. <a href="{ReblogURL}"><i class="fas fa-redo-alt" style="opacity: .6"></i></a>
  465. <a href="#" class="like">{LikeButton}<i class="far fa-heart"></i></a>
  466. </div>
  467. </div>
  468. {/block:Date}
  469.  
  470. <!-- text posts -->
  471. {block:Text}
  472. {block:Title}
  473. <h1 class="ttl">{Title}</h1>
  474. {/block:Title}
  475.  
  476. {block:Notreblog}
  477. <div class="caption">
  478. {Body}
  479. </div>
  480. {/block:Notreblog}
  481.  
  482. {block:Rebloggedfrom}
  483. <div class="caption">
  484. <div class="reblog-list">
  485. {block:Reblogs}
  486. <div class="reblogs">
  487. <div class="reblog-header">
  488. {block:IsActive}
  489. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  490. <img src="{PortraitURL-64}" style="width:24px; float:left; margin-right: 6px; border-radius: 100%">
  491. </a>
  492. {/block:IsActive}
  493. {block:IsDeactivated}
  494. <span class="inactive {block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}">
  495. <img src="{PortraitURL-64}" style="width:24px; float:left; margin-right: 6px; border-radius: 100%">
  496. </span>
  497. {/block:IsDeactivated}
  498. {block:isactive}
  499. <a href="{permalink}">{username}</a>
  500. {/block:isactive}
  501. {block:isdeactivated}
  502. <a href="{permalink}" class="inactive">{username}</a>
  503. {/block:isdeactivated}
  504. </div>
  505. <div class="reblog-content">
  506. {Body}
  507. </div>
  508. </div>
  509. {/block:Reblogs}
  510. </div>
  511. </div>
  512. {/block:RebloggedFrom}
  513. {/block:Text}
  514.  
  515. <!-- photo posts -->
  516. {block:Photo}
  517. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="photo">
  518. {/block:Photo}
  519.  
  520. <!-- photoset posts -->
  521. {block:Photoset}
  522. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  523. {/block:Photoset}
  524.  
  525. <!-- panorama -->
  526. {block:Panorama}
  527. <img src="{photourl-panorama}" alt="{photoalt}">
  528. {/block:Panorama}
  529.  
  530. <!-- quote posts -->
  531. {block:Quote}
  532. <div class="quote">
  533. <i class="fas fa-quote-left" style="opacity: .8"></i> {Quote}
  534. </div>
  535. <div class="source">
  536. {Source}
  537. </div>
  538. {/block:Quote}
  539.  
  540. <!-- chat posts -->
  541. {block:Chat}
  542. <ul class="chat">
  543. {block:Lines}
  544. <li>{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>
  545. {/block:Lines}
  546. </ul>
  547. {/block:Chat}
  548.  
  549. <!-- link posts -->
  550. {block:Link}
  551. <div class="link">
  552. <a href="{URL}">{Name}</a>
  553. </div>
  554. {/block:Link}
  555.  
  556. <!-- video posts -->
  557. {block:Video}
  558. <div class="video">{Video-500}</div>
  559. {/block:Video}
  560.  
  561. <!-- audio posts -->
  562. {block:Audio}
  563. {AudioEmbed}
  564. {/block:Audio}
  565.  
  566. <!-- answer posts-->
  567. {block:Answer}
  568. <div class="question_container">
  569. <div class="asker">
  570. <img src="{AskerPortraitURL-24}">
  571. {Asker}
  572. </div>
  573. <div class="question_text">{Question}</div>
  574. </div>
  575.  
  576. {block:Answerer}
  577. <div class="answer_container">
  578. <div class="answerer">
  579. <img src="{AnswererPortraitURL-24}"/>
  580. {Answerer}
  581. </div>
  582. <div class="answer_text">{Answer}</div>
  583. </div>
  584. {block:Reblogs}
  585. <div class="reply_container">
  586. <div class="replier">
  587. <img src="{PortraitURL-64}" style="border-radius: 100%; vertical-align: middle">
  588. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a> {/block:HasPermalink}
  589. </div>
  590. <div class="reply">{Body}</div>
  591. </div>
  592. {/block:Reblogs}
  593. {/block:Answerer}
  594.  
  595. {block:NotReblog}
  596. <div class="answer_container">
  597. <div class="answer_text">{Answer}</div>
  598. </div>
  599. {/block:NotReblog}
  600. {/block:Answer}
  601.  
  602. <!-- captions -->
  603. {block:Caption}
  604. <div class="caption">
  605. {block:notreblog}
  606. {Caption}
  607. {/block:notreblog}
  608. {block:Rebloggedfrom}
  609. <div class="reblog-list">
  610. {block:Reblogs}
  611. <div class="reblogs">
  612. <div class="reblog-header">
  613. {block:IsActive}
  614. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  615. <img src="{PortraitURL-64}" style="width:24px; float:left; margin-right: 6px; border-radius: 100%">
  616. </a>
  617. {/block:IsActive}
  618. {block:IsDeactivated}
  619. <span class=“inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}”>
  620. <img src="{PortraitURL-64}" style="width:18px; float:left; margin-right: 6px; border-radius: 100%">
  621. </span>
  622. {/block:IsDeactivated}
  623. {block:isactive}
  624. <a href="{permalink}">{username}</a>
  625. {/block:isactive}
  626. {block:isdeactivated}
  627. <a href="{permalink}" class="inactive">{username}</a>
  628. {/block:isdeactivated}
  629. </div>
  630. <div class="reblog-content">
  631. {Body}
  632. </div>
  633. </div>
  634. {/block:Reblogs}
  635. </div>
  636. {/block:RebloggedFrom}
  637. </div>
  638. {/block:Caption}
  639. </article>
  640.  
  641. {block:HasTags}
  642. <div class="tags">
  643. {block:Tags}
  644. <a href="{TagURL}">{Tag}</a>
  645. {/block:Tags}
  646. </div>
  647. {/block:HasTags}
  648.  
  649. {block:PermalinkPage}{block:PostNotes}<div classs="postnotes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
  650.  
  651. {/block:Posts}
  652. </section> <!-- end post section -->
  653.  
  654. {block:Pagination}
  655. <div class="pagination">
  656. {block:PreviousPage}<a href="{PreviousPage}">backward</a>{/block:PreviousPage}
  657. {block:NextPage}<a href="{NextPage}">forward</a>{/block:NextPage}
  658. </div>
  659. {/block:Pagination}
  660.  
  661. <!-- credit -->
  662. <!-- if you ever want to move my credit, please send me an ask or message to let me know -->
  663. <div class="crd"><a href="https://enbythemes.tumblr.com" title="code by roub"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 299.429 299.429" style="enable-background:new 0 0 299.429 299.429;" xml:space="preserve"><g><path style="fill:#010002;" d="M245.185,44.209H54.245L0,116.533l149.715,138.688l149.715-138.682L245.185,44.209z M206.746,121.778l-57.007,112.1l-56.53-112.1H206.746z M98.483,109.844l51.232-51.232l51.232,51.232H98.483z M164.119,56.142 h69.323L213.876,105.9L164.119,56.142z M86.311,105.142l-16.331-49h65.331L86.311,105.142z M79.849,121.778l49.632,98.429 L23.223,121.778H79.849z M220.136,121.778h56.071l-106.013,98.203L220.136,121.778z M225.148,109.844l18.694-47.538l35.652,47.538 H225.148z M58.266,58.738l17.035,51.112H19.929L58.266,58.738z"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></a></div>
  664. </body>
  665. </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!