API tools faq
paste
Advertisement
userbru

theme fourteen.

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