API tools faq
paste
Advertisement
userbru

theme ten.

userbru
Mar 24th, 2021 (edited)
398
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.30 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. // theme by bru // base by egg.design //
  3.  
  4. tumblr controls by magnusthemes, custom scrollbar by shythemes
  5.  
  6. -->
  7.  
  8.  
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12.  
  13. <!-- favicon -->
  14. <link rel="shortcut icon" href="{Favicon}" />
  15. <!-- rss -->
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  17. <!-- title and description -->
  18. <title>{Title}</title>
  19. {block:Description}
  20. <meta name="description" content="{MetaDescription}" />
  21. {/block:Description}
  22. <!-- stylesheets -->
  23. <link href="https://fonts.googleapis.com/css?family={text:Google Font}:700,400" rel="stylesheet">
  24. <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  25. <link href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" rel="stylesheet">
  26. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  27. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:200,
  34. tip_fade_speed:300
  35. });
  36. });
  37. })(jQuery);
  38. </script>
  39.  
  40.  
  41.  
  42. <!-- this line ensures that your theme will be mobile friendly -->
  43. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  44.  
  45. <!-- image options -->
  46. <meta name="image:background" content="" />
  47. <meta name="image:header" content=""/>
  48.  
  49. <!-- color options -->
  50. <meta name="color:background" content="#f8f8f8" />
  51. <meta name="color:text" content="#222" />
  52. <meta name="color:blockquote border" content="#222"/>
  53. <meta name="color:links" content="#222" />
  54. <meta name="color:sidebar" content="#fff" />
  55. <meta name="color:sidebar header" content="#f2dadc" />
  56. <meta name="color:posts" content="#fff" />
  57. <meta name="color:answer posts" content="#f8f8f8" />
  58. <meta name="color:link post" content="#222" />
  59. <meta name="color:link text" content="#fff" />
  60. <meta name="color:quotes" content="#222" />
  61. <meta name="color:quote text" content="#fff" />
  62.  
  63. <!-- text options -->
  64. <meta name="text:Google Font" content="Poppins" />
  65. <meta name="text:Link 1" content="" />
  66. <meta name="text:Link 1 Title" content="" />
  67. <meta name="text:Link 2" content="" />
  68. <meta name="text:Link 2 Title" content="" />
  69. <meta name="text:Link 3" content="" />
  70. <meta name="text:Link 3 Title" content="" />
  71. <meta name="text:Link 4" content="" />
  72. <meta name="text:Link 4 Title" content="" />
  73. <meta name="text:Link 5" content=""/>
  74. <meta name="text:Link 5 Title" content=""/>
  75. <!-- booleans -->
  76. <meta name="if:full background" content="" />
  77. <meta name:"if:header image" content="" />
  78.  
  79. <!--- npf fix -->
  80.  
  81. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  82. <!--
  83. NPF images fix v3.0 by @glenthemes [2021]
  84. 💌 git.io/JRBt7
  85. --->
  86. <script src="//npf-images-v3.github.io/script.js"></script>
  87. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  88. <style tmblr-npf>
  89. :root {
  90. --NPF-Caption-Spacing:1em;
  91. --NPF-Image-Spacing:4px;
  92. }
  93. </style>
  94.  
  95. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  96.  
  97.  
  98. <style>
  99.  
  100. ::-webkit-scrollbar {
  101. width:17px;
  102. height:17px;
  103. }
  104. ::-webkit-scrollbar {
  105. background-color:rgb(255,255,255); /* background color */
  106. }
  107. ::-webkit-scrollbar-track {
  108. border:8px solid rgb(255,255,255); /* background color */
  109. background-color:rgb(230,230,230); /* light border color */
  110. }
  111. ::-webkit-scrollbar-thumb {
  112. border:8px solid rgb(255,255,255); /* background color */
  113. background-color:rgb(144,144,144); /* dark border color */
  114. min-height:24px;
  115. min-width:24px;
  116. }
  117.  
  118. .iframe-controls--desktop {
  119. position:fixed;
  120. top:0px;
  121. right:0px;
  122. z-index:214748364789123456789;
  123. filter:invert(100%);
  124. -webkit-filter:invert(100%);
  125. -webkit-transform:scale(0.6,0.6);
  126. -webkit-transform-origin: 100% 0%;
  127. -ms-transform-origin:100% 0%;
  128. -ms-transform:scale(0.6,0.6);
  129. transform:scale(0.6,0.6);
  130. transform-origin:100% 0%;
  131. }
  132.  
  133.  
  134.  
  135. body {
  136. margin:0;
  137. font-size:12px;
  138. color:{color:text};
  139. background:{color:background} url({image:background});
  140. {block:iffullbackground}
  141. background-size:cover;
  142. {/block:iffullbackground}
  143. background-attachment:fixed;
  144. font-family:Helvetica;
  145. word-wrap:break-word;
  146. }
  147.  
  148.  
  149. .flex {
  150. display:flex;
  151. flex-wrap:wrap;
  152. }
  153. .centered {
  154. align-items:center;
  155. justify-content:center;
  156. }
  157.  
  158. blockquote {
  159. border-left:2px solid {color:blockquote border};
  160. padding-left:10px;
  161. }
  162.  
  163.  
  164. main {
  165. width:100%;
  166. justify-content:space-around;
  167. align-items:flex-start;
  168. }
  169.  
  170.  
  171.  
  172. section {
  173. width:100%;
  174.  
  175. }
  176.  
  177.  
  178. {block:indexpage}
  179. section.grid {
  180. column-count:2;
  181. grid-gap:20px;
  182. margin-top:50px;
  183. max-width:1000px;
  184. width:70%;
  185. }
  186. section.grid article {
  187. width:100%;
  188. break-inside:avoid;
  189. margin:0 0 20px 0;
  190. }
  191.  
  192. section.grid .caption, section.grid .info, section.grid .tags {
  193. padding:10px;
  194. }
  195. {/block:indexpage}
  196.  
  197. article {
  198. background:{color:posts};
  199. max-width:540px;
  200. width:50%;
  201. margin:50px auto 100px auto;
  202. }
  203.  
  204.  
  205. /* post note styling */
  206. ol.notes li {
  207. padding:10px;
  208. }
  209. ol.notes img {
  210. display:none;
  211. }
  212.  
  213.  
  214. article img {
  215. max-width:100%;
  216. display:block;
  217. margin: auto;
  218. }
  219.  
  220. a {
  221. text-decoration:none;
  222. color:{color:links};
  223. }
  224.  
  225.  
  226. aside.header {
  227. position:relative;
  228. width:640px;
  229. left:auto;
  230. max-width:640px;
  231. margin:50px auto 100px auto;
  232. }
  233.  
  234.  
  235. /* this is the avatar image.*/
  236. aside img {
  237. width:80px;
  238. display:block;
  239. margin:auto;
  240. transform:translateY(317px);
  241.  
  242.  
  243. }
  244.  
  245. aside img { -webkit-filter:grayscale(100%);}
  246.  
  247. aside img.square {
  248. border-radius:3.2px;
  249. }
  250.  
  251. aside img.circle {
  252. border-radius:100%;
  253. }
  254.  
  255.  
  256. .sideheader {
  257. background:url({image:header}) center;
  258. background-size:640px;
  259. background-repeat:no-repeat;
  260. background-size:640px;
  261. background-color:{color:sidebar header};
  262. height:390px;
  263.  
  264. }
  265.  
  266.  
  267. .description, .links {
  268. padding:16px;
  269. text-align:center;
  270. }
  271.  
  272. /* sidebar links */
  273. .links a {
  274. margin:0 10px;
  275. text-transform:uppercase;
  276. font-family:'Roboto';
  277. font-size:13px;
  278. font-weight:600;
  279. }
  280. .description {
  281. margin-top:10px;
  282. font-size:13px;
  283. border-top:1px solid rgba(0,0,0,.04);
  284.  
  285. }
  286.  
  287. .title {
  288. text-align:center;
  289. font-family:'ABeeZee';
  290. font-size:14px;
  291. font-weight:bold;
  292. margin-top:25px;
  293. }
  294.  
  295. .subtitle {
  296. text-align:center;
  297. font-family:'ABeeZee';
  298. margin-top:1px;
  299. font-weight:300;
  300. }
  301.  
  302. /* text post */
  303.  
  304. .textpost h1 {
  305. padding:20px;
  306. border-bottom:1px solid rgba(0,0,0,.04);
  307. margin:0;
  308. }
  309.  
  310. /* photoposts */
  311. .photopost img {
  312. width:100%;
  313. }
  314.  
  315. /* quote post */
  316.  
  317. .quote {
  318. background:{color:quotes};
  319. color:{color:quote text};
  320. }
  321. .quote, .source {
  322. padding:20px;
  323. }
  324.  
  325. /* link post */
  326. .link {
  327. background:{color:link post};
  328. padding:10px;
  329. }
  330. .link a {
  331. color:{color:link text};
  332. }
  333.  
  334. /* chat post */
  335.  
  336. .chat {
  337. margin:0;
  338. padding:0;
  339. }
  340. .chat li {
  341. list-style:none;
  342. padding:10px;
  343. }
  344.  
  345. .chat li:nth-of-type(odd) {
  346. background:{color:text};
  347. color:{color:posts};
  348. }
  349.  
  350. /*answer posts */
  351. .question {
  352. padding:20px;
  353. background:{color:answer posts};
  354. }
  355.  
  356.  
  357. .replies {
  358. padding:20px;
  359. }
  360.  
  361. /*Audio posts */
  362.  
  363. .audiopost img {
  364. width:120px;
  365. height:120px;
  366. }
  367. .audiopost iframe {
  368. width:100%;
  369. }
  370.  
  371. .audioinfo {
  372. width:calc(100% - 140px);
  373. align-items:center;
  374. padding:0 10px;
  375. }
  376. .theinfo {
  377. padding:20px;
  378. }
  379. /* captions */
  380. .caption {
  381. padding:20px;
  382. }
  383.  
  384. .reblog-header a {
  385. font-weight:bold;
  386. }
  387.  
  388. /* post info */
  389. .info {
  390. padding:20px;
  391. text-transform:lowercase;
  392. border-top:1px solid rgba(0,0,0,.04);
  393. }
  394.  
  395. pre {
  396. word-wrap:break-word!Important;
  397. white-space: pre-wrap;
  398. }
  399.  
  400. /* tags */
  401. .tags {
  402. padding:10px 20px;
  403. }
  404. .tags a:after { content:","; } .tags a:last-child:after { content:"."; }
  405. }
  406.  
  407. .inactive:hover:after {
  408. content:'deactivated';
  409. }
  410.  
  411. /* pagination */
  412. .pagination {
  413. width:90%;
  414. text-align:center;
  415. margin:40px auto;
  416. }
  417.  
  418. /*credit */
  419. footer {
  420. width:50%;
  421. margin:20px auto;
  422. text-align:center;
  423. }
  424.  
  425. /* mobile friendly sidebar */
  426.  
  427.  
  428. @media only screen and (max-width: 1100px) {
  429. aside {
  430. position:relative;
  431. width:60%;
  432. left:auto;
  433. max-width:540px;
  434. margin:50px auto;
  435. }
  436.  
  437. }
  438.  
  439. {CustomCSS}
  440. </style>
  441. </head>
  442. <body>
  443.  
  444. <!-- main container -->
  445.  
  446. <main class="flex">
  447.  
  448. <!-- sidebar -->
  449. <aside class="header">
  450.  
  451.  
  452.  
  453. <div class="sideheader">
  454. <img src="{portraiturl-128}" class="{AvatarShape}">
  455. </div>
  456. <div class="title">{Title}</div>
  457. <div class="subtitle">@{name}</div>
  458. <div class="description">
  459. {Description}
  460. </div>
  461.  
  462. <div class="links">
  463. <a href="/">{lang:Home}</a>
  464. {block:askenabled}
  465. <a href="/ask">Ask</a>
  466. {/block:askenabled}
  467. <a href="{text:Link 1}">{text:Link 1 Title}</a>
  468. <a href="{text:Link 2}">{text:Link 2 Title}</a>
  469. <a href="{text:Link 3}">{text:Link 3 Title}</a>
  470. <a href="{text:Link 4}">{text:Link 4 Title}</a>
  471. <a href="{text:Link 5}">{text:Link 5 Title}</a>
  472.  
  473. {block:HasPages}<p>
  474. {block:Pages}
  475. <a href="{URL}">{Label}</a>
  476. {/block:Pages}
  477. </div>
  478. {/block:HasPages}
  479. </aside>
  480.  
  481.  
  482.  
  483. <!-- posts -->
  484.  
  485. <section {block:ifgrid} class="grid" {/block:ifgrid}>
  486.  
  487. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  488. <!-- {block:NoRebloggedFrom}
  489. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  490. {/block:NoRebloggedFrom} -->
  491. {block:ContentSource}<!-- {SourceURL}
  492. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  493. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  494. {/block:ContentSource}
  495.  
  496.  
  497. <article class="{posttype}post posts" post-type="{PostType}">
  498.  
  499. <!-- text posts -->
  500. {block:Text}
  501. {block:Title}
  502. <h1>{Title}</h1>
  503. {/block:Title}
  504. {block:Notreblog}
  505. <div class="caption">
  506. {Body}
  507. </div>
  508. {/block:Notreblog}
  509.  
  510. {block:Rebloggedfrom}
  511. <div class="reblog-list">
  512. {block:Reblogs}
  513. <div class="reblogs">
  514. <div class="reblog-header source-head">
  515. {block:isactive}
  516. <a href="{permalink}">{username}</a>
  517. {/block:isactive}
  518. {block:isdeactivated}
  519. <a href="{permalink}" class="inactive">{username}</a>
  520. {/block:isdeactivated}
  521. </div>
  522. <div class="reblog-content">
  523. {Body}
  524. </div>
  525. </div>
  526. {/block:Reblogs}
  527. </div>
  528. {/block:RebloggedFrom}
  529. {/block:Text}
  530.  
  531. <!-- photo posts -->
  532. {block:Photo}
  533. <!-- photo alts add a description to the image for screen readers and for if the image doesn't load -->
  534. <img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
  535. {/block:Photo}
  536.  
  537. <!-- photoset -->
  538. {block:Photoset}
  539. {Photoset}
  540. {/block:Photoset}
  541.  
  542. <!-- panorama -->
  543. {block:Panorama}
  544. <img src="{photourl-panorama}" alt="{photoalt}">
  545. {/block:Panorama}
  546.  
  547. <!-- quote posts -->
  548. {block:Quote}
  549. <div class="quote">
  550. "{Quote}"
  551. </div>
  552. <div class="source">
  553. -{Source}
  554. </div>
  555. {/block:Quote}
  556.  
  557. <!-- chat posts -->
  558. {block:Chat}
  559. <ul class="chat">
  560. {block:Lines}
  561. <li>{block:Label}{Label}{/block:Label} {Line}</li>
  562. {/block:Lines}
  563. </ul>
  564. {/block:Chat}
  565.  
  566. <!--Link posts-->
  567. {block:link}
  568. <div class="link">
  569. <a href="{URL}"><span class="lnr lnr-link" aria-hidden="true"></span> {Name}</a>
  570. </div>
  571. {/block:link}
  572.  
  573. <!-- video posts -->
  574. {block:Video}
  575. {Video-500}
  576. {/block:Video}
  577.  
  578. <!--Audio posts-->
  579. {block:Audio}
  580. <div class="audio flex">
  581. {block:albumart}
  582. <img src="{AlbumArtURL}" alt="Album art for {block:trackname}{Trackname}{/block:trackname}">
  583. {/block:albumart}
  584. <div class="audioinfo flex">
  585.  
  586. {block:trackname}{Trackname}{/block:trackname}<br>
  587. {block:Album}{Album}{/block:Album} <br>
  588. {block:Artist}{Artist}{/block:Artist}
  589.  
  590.  
  591. </div>
  592.  
  593. </div>
  594. <div class="player">
  595. {AudioPlayer}
  596. </div>
  597. {/block:Audio}
  598.  
  599. <!--answer posts-->
  600. {block:Answer}
  601. <div class="question">
  602. {Asker}:{Question}
  603. </div>
  604. <div class="replies">
  605. {block:Answerer}
  606. {Answerer}: {Answer}
  607. {/block:Answerer}
  608. {Replies}
  609. </div>
  610. {/block:Answer}
  611.  
  612. <!-- captions -->
  613. {block:Caption}
  614. <div class="caption">
  615. {block:notreblog}
  616. {Caption}
  617. {/block:notreblog}
  618. {block:Rebloggedfrom}
  619. <div class="reblog-list">
  620. {block:Reblogs}
  621. <div class="reblogs">
  622. <div class="reblog-header">
  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.  
  640.  
  641. <!-- post info -->
  642. {block:Date}
  643. <div class="info">
  644.  
  645. <a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{DayOfMonthWithZero} {ShortMonth}, {Year} </a>
  646. {block:NoteCount} with
  647. <a href="{permalink}">{NoteCountWithLabel}</a>
  648. {/block:NoteCount}
  649.  
  650. {block:permalinkpage}
  651. <br>
  652.  
  653. {block:rebloggedfrom}
  654. <a href="{reblogparenturl}">reblogged from {reblogparentname}</a> / <a href="{reblogrooturl}">posted by {reblogrootname} </a>
  655. {/block:rebloggedfrom}
  656. {/block:permalinkpage}
  657. </div>
  658. {/block:Date}
  659.  
  660.  
  661. <!-- tags -->
  662. {block:Hastags}
  663. <div class="tags">
  664. <span class="lnr lnr-heart"></span><b> tagged as:</b>{block:Tags}
  665. <a href="{TagURL}">{Tag}</a>
  666. {/block:Tags}
  667. </div>
  668. {/block:Hastags}
  669.  
  670. <!-- post note list -->
  671. {PostNotes}
  672. </article> <!-- end posts -->
  673. {/block:Posts}
  674. </section> <!-- end post section -->
  675.  
  676. <!-- pagination -->
  677. {block:Pagination}
  678. <div class="pagination">
  679. {block:previouspage}
  680. <a href="{previouspage}">prev</a>
  681. {/block:previouspage}
  682. {block:nextpage}
  683. <a href="{nextpage}">next</a>
  684. {/block:nextpage}
  685. </div>
  686. {/block:pagination}
  687. </main> <!-- end container -->
  688.  
  689. <footer><a href="https://geminicodes.tumblr.com/" title="by bru"><span class="lnr lnr-moon"></span></a> </footer>
  690.  
  691. </body>
  692. </html>
  693.  
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!