API tools faq
paste
Advertisement
enbythemes

theme 01: daniel (original 2019)

enbythemes
Jun 9th, 2022
263
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.87 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. daniel © xroub.tumblr.com
  3.  
  4. credits:
  5. base code by https://egg.design/
  6. credit icon made by https://www.flaticon.com/authors/freepik/
  7. tumblr controls by https://magnusthemes.tumblr.com/
  8. change audio player color script by https://shudesigns.tumblr.com
  9. video resize by https://shythemes.tumblr.com/
  10.  
  11. -->
  12. <!DOCTYPE html>
  13. <html>
  14. <head>
  15. <link rel="shortcut icon" href="{Favicon}" />
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  17. <title>{Title}</title>
  18. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  19.  
  20. <meta name="image:sidebar" content="{PortraitURL-128}"/>
  21. <meta name="image:mobile header" content="{HeaderImage}"/>
  22.  
  23. <meta name="color:background" content="#ffffff" />
  24. <meta name="color:text" content="#222" />
  25. <meta name="color:scrollbar" content="#619cf3"/>
  26. <meta name="color:borders on hover" content="#619cf3"/>
  27. <meta name="color:sidebar" content="#fafafa" />
  28. <meta name="color:links" content="#619cf3"/>
  29. <meta name="color:links hover" content="#222" />
  30. <meta name="color:blockquote border" content="#fafafa"/>
  31. <meta name="color:mobile header" content="#619cf3" />
  32. <meta name="color:posts" content="#fff" />
  33. <meta name="color:text headings" content="#619cf3" />
  34. <meta name="color:text headings text" content="#fff" />
  35. <meta name="color:question posts" content="#fafafa" />
  36. <meta name="color:question text" content="#222222" />
  37. <meta name="color:link post" content="#fafafa" />
  38. <meta name="color:link text" content="#fff" />
  39. <meta name="color:link text hover" content="#222"/>
  40. <meta name="color:quotes" content="#fafafa" />
  41. <meta name="color:quote text" content="#222" />
  42. <meta name="color:chat odd" content="#619cf3"/>
  43. <meta name="color:chat odd text" content="#fff"/>
  44. <meta name="color:chat even" content="#fff"/>
  45. <meta name="color:chat even text" content="#222"/>
  46. <meta name="color:audio player" content="#619cf3"/>
  47. <meta name="color:post info" content="#fafafa"/>
  48.  
  49. <meta name="text:Google Font" content="Poppins" />
  50. <meta name="text:text size" content="13px"/>
  51.  
  52. <meta name="text:link one" content="link one"/>
  53. <meta name="text:link one url" content=""/>
  54. <meta name="text:link two" content="two one"/>
  55. <meta name="text:link two url" content=""/>
  56. <meta name="text:link three" content="three one"/>
  57. <meta name="text:link three url" content=""/>
  58.  
  59. <meta name="select:sidebar size" content="100px"/>
  60. <meta name="select:sidebar size" content="150px"/>
  61. <meta name="select:sidebar size" content="200px"/>
  62. <meta name="select:sidebar size" content="250px"/>
  63.  
  64. <meta name="select:post size" content="400px"/>
  65. <meta name="select:post size" content="450px"/>
  66. <meta name="select:post size" content="500px"/>
  67. <meta name="select:post size" content="540px"/>
  68.  
  69. <meta name="if:shrinking sidebar image" content=""/>
  70. <meta name="if:hover tags" content=""/>
  71.  
  72. <!-- scripts -->
  73. <link href="https://fonts.googleapis.com/css?family={text:Google Font}:700,400" rel="stylesheet"><link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  74.  
  75. <script>
  76. $(document).ready(function() {
  77. // audio player
  78. var $audio = $('iframe.tumblr_audio_player');
  79. $audio.load(function() {
  80. $(this).contents().find('head').append('<style type="text/css">' +
  81. '.audio-player { background: {color:audio player}; color: #fff !important; }' +
  82. '.audio-player .audio-info .track-artist { color: #fff !important; }' +
  83. '</style>');
  84. });
  85. });
  86. </script>
  87.  
  88. <style>
  89. /* html */
  90. body {
  91. margin: 0;
  92. font-family: {text:Google Font};
  93. font-size: {text:text size};
  94. word-wrap: break-word;
  95. }
  96.  
  97. a, .info a:hover, .tags a:hover {
  98. cursor: help;
  99. text-decoration: none;
  100. color: {color:links};
  101. }
  102.  
  103. a:hover, .info a, .tags a {
  104. color: {color:links hover};
  105. }
  106.  
  107. blockquote {
  108. margin: 1em 0;
  109. border-left: 2px solid {color:blockquote border};
  110. padding-left: 10px;
  111. }
  112.  
  113. h1, h2, h3, h4, h5, small, big {
  114. font-size: 1em;
  115. }
  116.  
  117. b, strong {
  118. color: {color:accent};
  119. }
  120.  
  121. pre {
  122. word-wrap: break-word!Important;
  123. white-space: pre-wrap;
  124. }
  125.  
  126. /* transitions */
  127. a, aside, aside img, .info, .tags, .heading {
  128. transition: all 0.5s ease;
  129. -webkit-transition: all 0.5s ease;
  130. -moz-transition: all 0.5s ease;
  131. -o-transition: all 0.5s ease;
  132. }
  133.  
  134. /* scrollbar */
  135. ::-webkit-scrollbar {
  136. width: 5px;
  137. }
  138.  
  139. ::-webkit-scrollbar-thumb {
  140. background: {color:scrollbar};
  141. }
  142.  
  143. /* lists styling */
  144. .captions ol {
  145. padding: 0 15px;
  146. }
  147.  
  148. .captions ol, ul {
  149. margin: 1em 0;
  150. }
  151.  
  152. .captions ul {
  153. padding: 0;
  154. list-style: none;
  155. }
  156.  
  157. .captions ul li:before {
  158. content: "›";
  159. font-size: 1em;
  160. padding-right: .5em;
  161. position: relative;
  162. }
  163.  
  164. /* general */
  165. main {
  166. width: 100%;
  167. justify-content: space-around;
  168. align-items: flex-start;
  169. }
  170.  
  171. article {
  172. max-width: {select:post size};
  173. width: 90%;
  174. margin: 50px auto 100px auto;
  175. }
  176.  
  177. article img {
  178. max-width: 100%;
  179. height: auto!important;
  180. }
  181.  
  182. /* sidebar */
  183. aside {
  184. width: 25%;
  185. position: fixed;
  186. top: 50px;
  187. left: 5%;
  188. background: {color:sidebar};
  189. max-width: {select:sidebar size};
  190. margin-top: 0px;
  191. border: 1px solid {color:sidebar};
  192. }
  193.  
  194. aside:hover {
  195. background: {color:background};
  196. border: 1px solid {color:borders on hover};
  197. }
  198.  
  199. aside img {
  200. max-width: {select:sidebar size};
  201. display: block;
  202. margin: auto;
  203. }
  204.  
  205. {block:IfShrinkingSidebarImage}
  206. aside:hover img {transform: scale(0.90);}
  207. {block:IfShrinkingSidebarImage}
  208.  
  209. .blogttl, .desc, .links {
  210. text-align: center;
  211. }
  212.  
  213. .desc, .links {
  214. padding: 5px 10px;
  215. }
  216.  
  217. .links a, .info a {
  218. margin: 0 3px;
  219. }
  220.  
  221. .theading, .lheading {
  222. padding: 20px 10px;
  223. text-align: center;
  224. }
  225.  
  226. /* text post */
  227. .theading {
  228. background: {color:text headings};
  229. color: {color:text headings text};
  230. }
  231.  
  232. h1.ttl {
  233. padding: 20px;
  234. background: {color:text heading};
  235. color: {color:text heading text};
  236. }
  237.  
  238. div.npf_row {
  239. margin: 0!important;
  240. }
  241.  
  242. /* photoposts */
  243. .photopost img {
  244. width: 100%;
  245. }
  246.  
  247. /* link posts */
  248. .lheading {
  249. background: {color:link post};
  250. }
  251.  
  252. .lheading a {
  253. color: {color:link text};
  254. }
  255.  
  256. .lheading a:hover {
  257. color: {color:link text hover};
  258. }
  259.  
  260. /* quote posts */
  261. .quote, .source {
  262. padding: 20px;
  263. margin-bottom: 20px;
  264. }
  265.  
  266. .quote {
  267. background: {color:quotes};
  268. color: {color:quote text};
  269. text-align: center;
  270. }
  271.  
  272. /* chat posts */
  273. .chat {
  274. margin: 0;
  275. padding: 0;
  276. }
  277.  
  278. .chat li {
  279. list-style: none;
  280. padding: 10px;
  281. }
  282.  
  283. .chat li:nth-of-type(even) {
  284. background: {color:chat even};
  285. color: {color:chat even text};
  286. }
  287.  
  288. .chat li:nth-of-type(odd) {
  289. background: {color:chat odd};
  290. color: {color:chat odd text};
  291. }
  292.  
  293. /*answer posts */
  294. .question {
  295. padding: 20px;
  296. background: {color:question posts};
  297. color: {color:question text};
  298. }
  299.  
  300. .replies {
  301. padding: 20px;
  302. }
  303.  
  304. /*audio posts */
  305. iframe.tumblr_audio_player {
  306. height: 85px;
  307. width: 100%;
  308. }
  309.  
  310. /* captions */
  311. .captions, .reblogs {
  312. padding: 10px;
  313. }
  314.  
  315. .reblog-header a {
  316. font-weight: bold;
  317. }
  318.  
  319. /* post info */
  320. .info {
  321. padding: 20px;
  322. background: {color:post info};
  323. border: 1px solid {color:post info};
  324. text-align: center;
  325. margin-top: 10px;
  326. }
  327.  
  328. .posts:hover .info {
  329. border: 1px solid {color:borders on hover};
  330. background: {color:background};
  331. }
  332.  
  333. .like-b {
  334. position: relative;
  335. display: inline-block;
  336. height: 1em;
  337. line-height: 1em;
  338. overflow: hidden;
  339. margin-bottom: -1px;
  340. vertical-align: middle;
  341. }
  342.  
  343. .like-b .like_button iframe {
  344. position: absolute;
  345. top: 0;
  346. left: 0;
  347. bottom: 0;
  348. right: 0;
  349. z-index: 2;
  350. opacity: 0;
  351. }
  352.  
  353. .like-b .liked + .b {
  354. color: inherit;
  355. }
  356.  
  357. .like-b .liked + .b:after {
  358. content: 'd';
  359. }
  360.  
  361. /* tags */
  362. {block:IfHoverTags}
  363. {block:IndexPage}
  364. .tags {
  365. opacity: 0;
  366. }
  367.  
  368. .posts:hover .tags {
  369. opacity: 1;
  370. }
  371. {/block:IndexPage}
  372. {/block:IfHoverTags}
  373.  
  374. .tags {
  375. padding: 10px;
  376. }
  377.  
  378. .tags a {
  379. margin: 0 8px 8px 0;
  380. }
  381.  
  382. .tags span {
  383. font-size: .8em;
  384. margin-right: 3px;
  385. }
  386.  
  387. .inactive:hover:after {
  388. content:'deactivated';
  389. }
  390.  
  391. /* pagination */
  392. .pagination {
  393. width: 90%;
  394. text-align: center;
  395. margin: 40px auto;
  396. }
  397.  
  398. /*credit */
  399. .crd {
  400. position: fixed;
  401. bottom: 10px;
  402. right: 10px;
  403. background: {color:posts};
  404. padding: .75em;
  405. text-transform: uppercase;
  406. font-size: .9em;
  407. }
  408.  
  409. /* permalink post note styling */
  410. ol.notes {
  411. padding: 0 10px;
  412. margin-top: 20px;
  413. }
  414.  
  415. ol.notes li {
  416. padding: 10px 0;
  417. list-style-type: none;
  418. }
  419.  
  420. ol.notes img {
  421. display: none;
  422. }
  423.  
  424. /* tumblr controls by magnusthemes */
  425. .iframe-controls--desktop {
  426. position:fixed;
  427. top:0px;
  428. right:0px;
  429. z-index:214748364789123456789;
  430. filter:invert(100%);
  431. -webkit-filter:invert(100%);
  432. -webkit-transform:scale(0.6,0.6);
  433. -webkit-transform-origin: 100% 0%;
  434. -ms-transform-origin:100% 0%;
  435. -ms-transform:scale(0.6,0.6);
  436. transform:scale(0.6,0.6);
  437. transform-origin:100% 0%;
  438. }
  439.  
  440. .tmblr-iframe--app-cta-button {display:none!important;}
  441. .iframe-controls--phone-mobile {display:none!important;}
  442. .tmblr-iframe-pushdown {padding-top:0!important;}
  443.  
  444. /* mobile */
  445. @media only screen and (max-width: 1150px) {
  446. ::-webkit-scrollbar {
  447. width: 0;
  448. }
  449.  
  450. .sideheader {
  451. background: url({image:mobile header}) center;
  452. background-color: {color:mobile header};
  453. height: 150px;
  454. margin-bottom: 40px;
  455. }
  456.  
  457. aside.sideheader {
  458. position: relative;
  459. width: 90%;
  460. left: auto;
  461. max-width: {select:post size};
  462. margin: 3em auto 80px;
  463. }
  464.  
  465. aside img {
  466. width: 70px;
  467. display:block;
  468. margin: auto;
  469. border: 2px solid {color:sidebar};
  470. transform:translateY(107px);
  471. }
  472.  
  473. aside {
  474. position: relative;
  475. width: 90%;
  476. left: auto;
  477. max-width: {select:post size};
  478. margin: 1em auto 100px;
  479. border: none;
  480. }
  481.  
  482. aside:hover {
  483. border: none;
  484. background: {color:sidebar};
  485. }
  486.  
  487. aside:hover img {
  488. transform: none;
  489. transform: translateY(107px);
  490. }
  491.  
  492. .info {
  493. border: none;
  494. }
  495.  
  496. .posts:hover .info {
  497. background: {color:post info};
  498. border: none;
  499. }
  500.  
  501. .tags {
  502. opacity: 1;
  503. max-height: 300px;
  504. }
  505.  
  506. iframe.iframe-controls--phone-mobile{display:none!important}
  507.  
  508. }
  509. {CustomCSS}
  510. </style>
  511. </head>
  512. <body>
  513. <main>
  514.  
  515. <!-- sidebar -->
  516. <aside>
  517.  
  518. <div class="sideheader">
  519. <img src="{image:sidebar}"/>
  520. </div>
  521.  
  522. <h1 class="blogttl">{Title}</h1>
  523. {block:Description}<div class="desc">{Description}</div>{/block:Description}
  524.  
  525. <div class="links" style="text-transform:lowercase">
  526. <a href="/">{lang:home}</a>
  527. {block:askenabled}
  528. <a href="/ask">Ask</a>
  529. {/block:askenabled}
  530. <a href="/archive">Archive</a>
  531.  
  532. <a href="{text:link one url}">{text:link one}</a>
  533. <a href="{text:link two url}">{text:link two}</a>
  534. <a href="{text:link three url}">{text:link three}</a>
  535. </aside>
  536.  
  537. {block:Posts}
  538. <!-- {block:NoRebloggedFrom}
  539. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  540. {/block:NoRebloggedFrom} -->
  541. {block:ContentSource}<!-- {SourceURL}
  542. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  543. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  544. {/block:ContentSource}
  545.  
  546. <article class="{posttype}post posts" id="{PostID}">
  547.  
  548. <!-- text posts -->
  549. {block:Text}
  550. {block:Title}
  551. <h1 class="theading">{Title}</h1>
  552. {/block:Title}
  553.  
  554. {block:Notreblog}
  555. <div class="captions">
  556. {Body}
  557. </div>
  558. {/block:Notreblog}
  559.  
  560. {block:Rebloggedfrom}
  561. <div class="reblog-list">
  562. {block:Reblogs}
  563. <div class="reblogs">
  564. <div class="reblog-header">
  565. {block:isactive}
  566. <a href="{permalink}">{username}</a>
  567. {/block:isactive}
  568. {block:isdeactivated}
  569. <a href="{permalink}" class="inactive">{username}</a>
  570. {/block:isdeactivated}
  571. </div>
  572. <div class="reblog-content">
  573. {Body}
  574. </div>
  575. </div>
  576. {/block:Reblogs}
  577. </div>
  578. {/block:RebloggedFrom}
  579. {/block:Text}
  580.  
  581. <!-- photo posts -->
  582. {block:Photo}
  583. <img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
  584. {/block:Photo}
  585.  
  586. <!-- photoset -->
  587. {block:Photoset}
  588. {Photoset}
  589. {/block:Photoset}
  590.  
  591. <!-- panorama -->
  592. {block:Panorama}
  593. <img src="{photourl-panorama}" alt="{photoalt}">
  594. {/block:Panorama}
  595.  
  596. <!-- quote posts -->
  597. {block:Quote}
  598. <h1 class="quote">{Quote}</h1>
  599. <div class="source">-{Source}</div>
  600. {/block:Quote}
  601.  
  602. <!-- chat posts -->
  603. {block:Chat}
  604. <ul class="chat">
  605. {block:Lines}
  606. <li>{block:Label}{Label}{/block:Label} {Line}</li>
  607. {/block:Lines}
  608. </ul>
  609. {/block:Chat}
  610.  
  611. <!--Link posts-->
  612. {block:link}
  613. <div class="lheading" style="margin-bottom: 20px;">
  614. <a href="{URL}"><span class="lnr lnr-link" aria-hidden="true"></span> {Name}</a>
  615. </div>
  616. {/block:link}
  617.  
  618. <!-- video posts -->
  619. {block:Video}
  620. <div class="video">{Video-500}</div>
  621. {/block:Video}
  622.  
  623. <!--Audio posts-->
  624. {block:Audio}<div class="audio flex">{AudioEmbed}</div>{/block:Audio}
  625.  
  626. <!--answer posts-->
  627. {block:Answer}
  628. <div class="question">
  629. <div class="asker">
  630. <img src="{AskerPortraitURL-24}" style="display:inline-block;vertical-align: middle;"> <span style="display:inline-block;vertical-align: middle;">{Asker} left a message</span>
  631. </div>
  632.  
  633. <div style="margin-top: 10px;">
  634. {Question}
  635. </div>
  636. </div>
  637.  
  638. <div class="replies">
  639. {block:Answerer}
  640. {Answerer}: {Answer}
  641. {/block:Answerer}
  642. {Replies}
  643. </div>
  644. {/block:Answer}
  645.  
  646. <!-- captions -->
  647. {block:Caption}
  648. <div class="captions">
  649. {block:notreblog}
  650. {Caption}
  651. {/block:notreblog}
  652. {block:Rebloggedfrom}
  653. <div class="reblog-list">
  654. {block:Reblogs}
  655. <div class="reblogs">
  656. <div class="reblog-header">
  657. {block:isactive}
  658. <a href="{permalink}">{username}</a>
  659. {/block:isactive}
  660. {block:isdeactivated}
  661. <a href="{permalink}" class="inactive">{username}</a>
  662. {/block:isdeactivated}
  663. </div>
  664. <div class="reblog-content">
  665. {Body}
  666. </div>
  667. </div>
  668. {/block:Reblogs}
  669. </div>
  670. {/block:RebloggedFrom}
  671. </div>
  672. {/block:Caption}
  673.  
  674. <!-- post info -->
  675. {block:Date}
  676. <div class="info">
  677. <a href="{Permalink}">{DayOfMonthWithZero}.{MonthNumber}.{ShortYear}</a>
  678. {block:NoteCount}<a href="{Permalink}">{NoteCount}</a>{/block:NoteCount}
  679.  
  680. {block:RebloggedFrom}
  681. <a href="{ReblogParentURL}" title="reblogged from {ReblogParentName}">via</a>
  682. {/block:RebloggedFrom}
  683.  
  684. {block:RebloggedFrom}{block:ContentSource}
  685. <a href="{ReblogRootURL}" title="originally posted by {ReblogRootName}">src</a>
  686. {block:ContentSource}{/block:RebloggedFrom}
  687.  
  688. <a href="{ReblogURL}" target="_blank" >reblog</a>
  689. <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  690. </div>
  691. {/block:Date}
  692.  
  693. <!-- tags -->
  694. {block:Hastags}
  695. <div class="tags">
  696. {block:Tags}
  697. <a href="{TagURL}"><span>#</span>{Tag}</a>
  698. {/block:Tags}
  699. </div>
  700. {/block:Hastags}
  701.  
  702. <!-- post note list -->
  703. {PostNotes}
  704. </article> <!-- end posts -->
  705. {/block:Posts}
  706.  
  707. <!-- pagination -->
  708. {block:Pagination}
  709. <div class="pagination">
  710. {block:previouspage}
  711. <a href="{previouspage}">Prev</a>
  712. {/block:previouspage}
  713. {block:nextpage}
  714. <a href="{nextpage}">Next</a>
  715. {/block:nextpage}
  716. </div>
  717. {/block:pagination}
  718. </main> <!-- end container -->
  719.  
  720. <!-- credit -->
  721. <!-- if you ever want to move my credit, please send me an ask or message to let me know -->
  722. <a href="https://enbythemes.tumblr.com" class="crd" title="code by roub">enby</a>
  723. </body>
  724. </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!