API tools faq
paste
Advertisement
userbru

theme twenty-eight.

userbru
Mar 22nd, 2023 (edited)
1,100
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!---
  13. CODE BY USERBRU
  14.  
  15. base code by seyche
  16. scrollbar by shythemes
  17. npf fix by glenthemes
  18. tumblr controls, masonry by maziekeen
  19. icons by phosphoricons
  20. day/night by eggthemes
  21. pagination by ricecodes
  22.  
  23.  
  24. <!----- VARIABLES AND OPTIONS ----->
  25.  
  26. <meta name="image:Sidebar" content=""/>
  27. <meta name="image:Avatar" content=""/>
  28.  
  29. <meta name="color:Background" content="#ffffff"/>
  30. <meta name="color:Text" content="#707070"/>
  31. <meta name="color:Link" content="#313131"/>
  32. <meta name="color:Accent" content="#ffd800"/>
  33. <meta name="color:Borders" content="#dcdcdc"/>
  34. <meta name="color:Sections" content="#f1f1f1"/>
  35. <meta name="color:Dark Mode Post Backgrounds" content="#1a1717"/>
  36. <meta name="color:Dark Mode Links" content="#fffff"/>
  37. <meta name="color:Dark Mode Text" content="#fffff"/>
  38. <meta name="color:Gradient 1" content="#5ac9e1"/>
  39. <meta name="color:Gradient 2" content="#7bd4e7"/>
  40. <meta name="color:Gradient 3" content="#9cdfed"/>
  41. <meta name="color:Gradient 4" content="#7bd4e7"/>
  42. <meta name="color:Gradient 5" content="#5ac9e1"/>
  43.  
  44. <meta name="select:Post Width" content="400px" title="400px"/>
  45. <meta name="select:Post Width" content="500px" title="500px"/>
  46. <meta name="select:Post Width" content="540px" title="540px"/>
  47.  
  48. <meta name="text:Post Margin" content="150"/>
  49. <meta name="text:desktop description" content=""/>
  50.  
  51. <meta name="text:link 1 URL" content=""/>
  52. <meta name="text:link 1" content=""/>
  53. <meta name="text:link 2 URL" content=""/>
  54. <meta name="text:link 2" content=""/>
  55. <meta name="text:link 3 URL" content=""/>
  56. <meta name="text:link 3" content=""/>
  57. <meta name="text:link 4 URL" content=""/>
  58. <meta name="text:link 4" content=""/>
  59.  
  60. <!-- scripts -->
  61. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  62.  
  63.  
  64. <!-- fonts ---->
  65.  
  66. <link rel="preconnect" href="https://fonts.googleapis.com">
  67. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  68. <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  69. <link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
  70.  
  71. <!-- icons -->
  72. <script src="https://unpkg.com/phosphor-icons"></script>
  73. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>
  74.  
  75.  
  76. <!--
  77. NPF images fix v3.0 by @glenthemes [2021]
  78. 💌 git.io/JRBt7
  79. --->
  80. <script src="//npf-images-v3.github.io/script.js"></script>
  81. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  82. <style tmblr-npf>
  83. :root {
  84. --NPF-Caption-Spacing:1em;
  85. --NPF-Image-Spacing:4px;
  86. }
  87. </style>
  88.  
  89. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  90.  
  91.  
  92. <!----- CSS ----->
  93. <style type="text/css">
  94.  
  95. /*----- BASIC STYLING -----*/
  96.  
  97. /* CONTROLS ---- */
  98.  
  99.  
  100. .controls-button {
  101. position: fixed;
  102. cursor: help;
  103. top: 20px;
  104. right: 2rem;
  105. z-index: 1000;
  106. cursor: pointer;
  107. right:1.5rem;
  108. color:{color:Accent};
  109. }
  110.  
  111. .tmblr-iframe {
  112. z-index: 999999999!important;
  113. opacity: 0;
  114. visibility: hidden;
  115. width:30px;
  116. -webkit-transition: all 0.5s;
  117. -moz-transition: all 0.5s;
  118. -ms-transition: all 0.5s;
  119. -o-transition: all 0.5s;
  120. transition: all 0.5s;
  121. }
  122.  
  123. body.controls-click .tmblr-iframe {
  124. opacity: 1;
  125. margin-right: 4rem;
  126. display:inline;
  127. vertical-align:bottom;
  128. visibility: visible;
  129. -webkit-transition: all 0.5s;
  130. -moz-transition: all 0.5s;
  131. -ms-transition: all 0.5s;
  132. -o-transition: all 0.5s;
  133. transition: all 0.5s;
  134. }
  135.  
  136.  
  137. /*--- SCROLLBAR ---*/
  138.  
  139. ::-webkit-scrollbar {
  140. width:0px;
  141. height:1px;
  142. }
  143. ::-webkit-scrollbar {
  144. background-color:rgb(255,255,255); /* background color */
  145. }
  146. ::-webkit-scrollbar-track {
  147. border:8px solid rgb(255,255,255); /* background color */
  148. background-color:rgb(230,230,230); /* light border color */
  149. }
  150. ::-webkit-scrollbar-thumb {
  151. border:8px solid rgb(255,255,255); /* background color */
  152. background-color:rgb(144,144,144); /* dark border color */
  153. min-height:24px;
  154. min-width:24px;
  155. }
  156.  
  157. /* TOOLTIPS */
  158.  
  159. .tippy-tooltip.gradient-theme {
  160. background-image: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2}, {color:Gradient 3}, {color:Gradient 4}, {color:Gradient 5});
  161. color:{color:Link};
  162. text-align:center;
  163. font-family:'Montserrat', sans-serif!important;
  164. font-weight:bold;
  165. text-transform:uppercase;
  166. letter-spacing:1px;
  167. font-size:0.90em;
  168. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  169.  
  170. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  171. fill:var(--text);}
  172.  
  173.  
  174. body {
  175. font-family: 'Karla', sans-serif!important;
  176. font-size: 14px;
  177. color: {color:text};
  178. background-color: {color:background};
  179. line-height: 160%;
  180. word-wrap: break-word;
  181. letter-spacing: 0.04em;
  182. margin: 0;
  183. padding: 0;
  184. }
  185.  
  186.  
  187. a {
  188. color: {color:link};
  189. text-decoration: none;
  190. -webkit-transition: all 0.3s;
  191. -moz-transition: all 0.3s;
  192. -ms-transition: all 0.3s;
  193. -o-transition: all 0.3s;
  194. transition: all 0.3s;
  195. }
  196.  
  197. a:hover {
  198. color: {color:accent};
  199. -webkit-transition: all 0.3s;
  200. -moz-transition: all 0.3s;
  201. -ms-transition: all 0.3s;
  202. -o-transition: all 0.3s;
  203. transition: all 0.3s;
  204. }
  205.  
  206. ::selection {
  207. background-color:{color:Accent};
  208. }
  209.  
  210. blockquote {
  211. padding: 0 0 0 1.5em;
  212. border-left: 1px solid {color:borders};
  213. margin: 1.5em 0 1.5em 1.5em;
  214. }
  215.  
  216. h1, h2, h3, h4, h5, .title {
  217. letter-spacing: 0.06em;
  218. line-height: 145%;
  219. font-weight: bold;
  220. }
  221.  
  222. h1, .title {font-size: 1.5em;}
  223. h2 {font-size: 1.3em;}
  224. h3 {font-size: 1.25em;}
  225. h4 {font-size: 1.1em;}
  226. h5 {font-size: 1em;}
  227.  
  228. small {font-size: 0.9em;}
  229. big {font-size: 1.1em;}
  230.  
  231. hr {
  232. height: 1px;
  233. border: none;
  234. box-shadow: none;
  235. background-color: {color:borders};
  236. }
  237.  
  238. pre {
  239. line-height: inherit;
  240. font-size: inherit;
  241. white-space: pre-wrap;
  242. white-space: -moz-pre-wrap;
  243. white-space: -pre-wrap;
  244. white-space: -o-pre-wrap;
  245. word-wrap: break-word;
  246. }
  247.  
  248. u {
  249. font-weight:600;
  250. border-bottom:2px solid {color:Accent};
  251. text-decoration:none;
  252. padding:1px;
  253. }
  254.  
  255. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  256.  
  257.  
  258. /*---- day/night toggle ---*/
  259.  
  260. body.night {
  261. background:#1a1a1a;
  262. color:{color:Dark Mode Text}!important;
  263. transition:.6s;
  264. }
  265.  
  266. .daynight span {
  267. font-size: 13px;
  268. cursor:pointer;
  269. padding-top:30px;
  270. }
  271.  
  272. body.night credit, body.night a, body.night b, body.night i, body.night search, body.night h1, body.night h2, body.night h3, body.night h4, body.night h5, body.night title, body.night nav { color:{color:Dark Mode Links}!important; }
  273.  
  274. body.night aside, body.night scrollbar, body.night footer, body.night article { background:{color:Dark Mode Post Backgrounds}!important; }
  275.  
  276. body.night html {
  277. background:#1a1a1a;
  278. }
  279.  
  280. /*----- SIDEBAR -----*/
  281.  
  282. #sidebar {
  283. width: 300px;
  284. position: fixed;
  285. top: calc(80px + {text:post margin}px);
  286. text-align: center;
  287. margin-left:700px;
  288. background:{color:sections};
  289. padding:20px;
  290. border-radius:10px;
  291. border:1px solid {color:borders};
  292. }
  293.  
  294. {block:ifSidebarImage}
  295. #side-img {
  296. margin-bottom: 1.5em;
  297. border-radius:10px;
  298. }
  299. {/block:ifSidebarImage}
  300.  
  301. #description, nav {margin-top: 1.25em;}
  302. nav a {
  303. margin: auto 0.5em;
  304. color:{color:accent};
  305. }
  306.  
  307. nav a :hover {
  308. color:{color:text};
  309. }
  310.  
  311. .title a {
  312. position:relative;
  313. }
  314.  
  315. .title a::before {
  316. content: "";
  317. position: absolute;
  318. display: block;
  319. width: 100%;
  320. height: 2px;
  321. bottom: 0;
  322. left: 0;
  323. background-image: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2}, {color:Gradient 3}, {color:Gradient 4}, {color:Gradient 5});
  324. transform: scaleX(0);
  325. transition: transform 0.3s ease;
  326. }
  327.  
  328. .title a:hover::before {
  329. transform: scaleX(1);
  330. }
  331.  
  332.  
  333. .subtitle {
  334. font-family: 'Montserrat', sans-serif!important;
  335. text-align:left;
  336. font-size:14px;
  337. font-weight:600;
  338. margin-bottom:10px;
  339. margin-top:-30px;
  340. width:300px;
  341. background-image: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2}, {color:Gradient 3}, {color:Gradient 4}, {color:Gradient 5});
  342. padding:20px;
  343. border-radius:10px 10px 0 0;
  344. margin-left:-21px;
  345. display:flex;
  346. align-items:center;
  347. height:20px;
  348. border:1px solid {color:borders};
  349. }
  350.  
  351. .subtitle a:hover {
  352. color:{color:text};
  353. }
  354.  
  355. .avatar img {
  356. width:40px;
  357. border-radius:100px;
  358. display: flex;
  359. align-items:center;
  360. margin-right:10px;
  361.  
  362.  
  363. }
  364.  
  365. /*----- POSTS -----*/
  366.  
  367. main {
  368. position: relative;
  369. width: calc(250px + {select:post width} + 150px);
  370. margin:auto;
  371. }
  372.  
  373. section {
  374. position: relative;
  375. width: {select:post width};
  376. margin-left:10px;
  377. }
  378.  
  379. article {
  380. width: 100%;
  381. position: relative;
  382. margin: {text:post margin}px auto;
  383. background:{color:sections};
  384. padding:20px;
  385. border-radius:10px;
  386. border:1px solid {color:borders};
  387. }
  388.  
  389. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  390.  
  391. /*----- CAPTIONS -----*/
  392.  
  393. .caption {margin-top: 2em; list-style-type: none;}
  394. .text-caption:first-of-type {margin-top: 0;}
  395.  
  396. .user-icon, .ask-icon {
  397. display: inline-block;
  398. vertical-align: middle;
  399. width: 3em;
  400. height: 3em;
  401. margin-right: 1em;
  402. border-radius:100px;
  403.  
  404. }
  405.  
  406. .username {
  407. display: inline-block;
  408. vertical-align: middle;
  409. font-weight: bold;
  410. background-image: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2}, {color:Gradient 3}, {color:Gradient 4}, {color:Gradient 5});
  411. padding:5px;
  412. border-radius:10px;
  413. }
  414.  
  415. .username a:hover{
  416. color:#fff;
  417. }
  418.  
  419. .deactive::after {
  420. content: '(deactivated)';
  421. margin-left: 1em;
  422. opacity: 0.75;
  423. color: {color:text};
  424. }
  425.  
  426. p.tmblr-attribution {margin-top: 1em !important;}
  427.  
  428. /*----- TEXT -----*/
  429.  
  430. h1.post-title {margin-top: 0;}
  431.  
  432. /*----- LINK -----*/
  433.  
  434. a.link-wrap {display: block; border: 1px solid {color:borders};}
  435. .link {padding: 2em;}
  436. .link-host, .link-txt {margin-top: 1.5em;}
  437.  
  438. .npf-link-block {
  439. margin-top: 1.5em;
  440. background-color: inherit;
  441. border: 1px solid inherit;
  442. color: inherit;
  443. }
  444.  
  445. /*----- PHOTO -----*/
  446.  
  447. img {
  448. margin: 0;
  449. display: block;
  450. height: auto;
  451. max-width: 100%;
  452. }
  453.  
  454. .photo img {width: 100%;}
  455. .vignette, #vignette {opacity: 0;}
  456. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  457.  
  458. .lightbox-image, #tumblr_lightbox img {
  459. box-shadow: none !important;
  460. border-radius: 0 !important;
  461. max-width: none;
  462. }
  463.  
  464. #tumblr_lightbox_caption, .lightbox-caption {
  465. color: #fff !important;
  466. font-family: inherit;
  467. margin-top: 1em !important;
  468. }
  469.  
  470. /*----- PHOTOSET -----*/
  471.  
  472. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  473. margin-left: 0 !important;
  474. margin-right: 0 !important;
  475. }
  476.  
  477. /*----- QUOTE -----*/
  478.  
  479. .quote {line-height: 160%; font-size: 1.25em;}
  480.  
  481. .quote p:first-of-type {margin-top: 0;}
  482. .quote p:last-of-type {margin-bottom: 0;}
  483.  
  484. .source {margin-top: 1.5em;}
  485.  
  486. /*----- CHAT -----*/
  487.  
  488. .chat {padding: 0; margin: 0;}
  489. .chat li {list-style-type: none; margin-top: 1em;}
  490. .chat li:first-of-type {margin-top: 0;}
  491. .chatter {font-weight: bold;}
  492.  
  493. p.npf_chat, p.npf_chat b {font-family: inherit;}
  494.  
  495. /*----- ANSWER -----*/
  496.  
  497. .ask-wrap {border-bottom: 1px solid {color:borders}; padding-bottom: 2em;}
  498.  
  499. .ask-wrap .asking {
  500. display: inline-block;
  501. margin-left: 0em;
  502. font-weight: bold;
  503. }
  504.  
  505. .question {
  506. margin-top: 0em;
  507. background:{color:accent};
  508. padding:10px;
  509. color:#000;
  510. border-radius:0px 30px 20px 20px;
  511. width:auto;
  512. margin-left:50px;
  513. height:auto;
  514. }
  515. .question p:first-of-type {margin-top: 0;}
  516. .question p:last-of-type {margin-bottom: 0;}
  517.  
  518. /*----- AUDIO -----*/
  519.  
  520. .audiopost {padding: 2em; border: 1px solid {color:borders};}
  521.  
  522. .album-art {
  523. z-index: 1;
  524. display: inline-block;
  525. vertical-align: middle;
  526. float: left;
  527. width: 100px;
  528. height: 100px;
  529. }
  530.  
  531. .audio-player-wrap {
  532. width: 100px;
  533. height: 100px;
  534. display: inline-block;
  535. }
  536.  
  537. .button {
  538. width: 30px;
  539. height: 30px;
  540. overflow: hidden;
  541. position: relative;
  542. z-index: 2;
  543. margin: 7px;
  544. }
  545.  
  546. .audiobox {
  547. background-color: #f2f2f2;
  548. z-index: 3;
  549. position: absolute;
  550. margin: 28px 0 0 28px;
  551. border-radius: 50%;
  552. }
  553.  
  554. .audioinfo {
  555. display: inline-block;
  556. height: 100px;
  557. max-width: calc(100% - 100px);
  558. margin-left: 100px;
  559. display: flex;
  560. justify-content: center;
  561. flex-direction: column;
  562. box-sizing: border-box;
  563. padding-left: 2em;
  564. }
  565.  
  566. .audioinfo li {list-style-type: none;}
  567. .track {font-weight: bold;}
  568.  
  569. /*----- INFO -----*/
  570.  
  571. .info {
  572. margin-top: 2em;
  573. font-family: 'Montserrat', sans-serif;
  574. font-size:13px;
  575. font-weight:600;
  576. text-transform:lowercase;
  577. border-top:1px solid {color:borders};
  578. }
  579.  
  580. .info a {display: inline-block; vertical-align: middle;position:relative;}
  581.  
  582.  
  583. .info a::before {
  584. content: "";
  585. position: absolute;
  586. display: block;
  587. width: 100%;
  588. height: 2px;
  589. bottom: 0;
  590. left: 0;
  591. background-image: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2}, {color:Gradient 3}, {color:Gradient 4}, {color:Gradient 5});
  592. transform: scaleX(0);
  593. transition: transform 0.3s ease;
  594. }
  595.  
  596. .info a:hover::before {
  597. transform: scaleX(1);
  598. }
  599.  
  600.  
  601. .likeb {
  602. position: relative;
  603. display: inline-block;
  604. height:1.4em;
  605. margin-top:-36px;
  606. margin-bottom: -1px;
  607. float:right;
  608. font-size:16px;
  609. font-weight:bold;
  610. background:{color:accent};
  611. padding:5px;
  612. border-radius:100px;
  613. padding-bottom:0;
  614. color:white;
  615. }
  616.  
  617.  
  618.  
  619. .likeb .like_button iframe {
  620. position: absolute;
  621. top: 0;
  622. left: 0;
  623. bottom: 0;
  624. right: 0;
  625. z-index: 2;
  626. opacity: 0;
  627. }
  628.  
  629. .like_button iframe {width: 100% !important; height: 100% !important;}
  630. .likeb .liked + .actual-button {color: red;}
  631. .likeb .liked + .actual-button:after {content: '';}
  632.  
  633. .info a, .tags a {margin-right: 0.75em;}
  634.  
  635. a.pinned-post {font-weight: bold; color: {color:accent};}
  636.  
  637. /*---- POST NOTES -----*/
  638.  
  639. .notes {margin: {text:post margin}px 0;}
  640.  
  641. ol.notes {
  642. max-width: 100%;
  643. padding: 0;
  644. margin: 2em 0 0 0;
  645. }
  646.  
  647. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  648.  
  649. ol.notes li.note img.avatar {
  650. margin-right: 1em;
  651. vertical-align: middle;
  652. display: inline-block;
  653. width: 1.25em;
  654. height: 1.25em;
  655. }
  656.  
  657. /*---- PAGINATION -----*/
  658.  
  659. .pagination { display:flex; justify-content:space-between; margin:40px 0; margin-left:20px; width:540px; }
  660. .jump { max-width:90%; }
  661.  
  662. .pagination a, .pagination span, .current {
  663. display:inline-block;
  664. padding:7px;
  665. background:{color:Accent};
  666. color:{color:Background};
  667. border-radius:5px;
  668. overflow:hidden;
  669. -webkit-transition:all 0.4s ease;
  670. -moz-transition:all 0.4s ease;
  671. -o-transition:all 0.4s ease;
  672. -ms-transition:all 0.4s ease;
  673. transition:all 0.4s ease;
  674. }
  675.  
  676. .jump a, .current { margin:0 7px; }
  677. .current { background:transparent; color:{color:Links};}
  678. .prev {color:{color:Links};}
  679. .prev a, .next a { position:absolute; margin:0; z-index:99999;}
  680. .pagination span { background:transparent; color:rgba(0,0,0,0.4); }
  681.  
  682. .pagination a:hover { background:#e35552; color:#fff; }
  683.  
  684. /*---- CREDIT -----*/
  685.  
  686. #credit {
  687. position: fixed;
  688. bottom: 20px;
  689. right: 20px;
  690. font-size: 16px;
  691. }
  692.  
  693. /* MASONRY NAVIGATION CSS PART */
  694. .masonry-navigation {
  695. width: 100%;
  696. border-bottom: 1px solid #e2e2e2;
  697. margin-bottom:15px;
  698. }
  699.  
  700. .masonry-navigation:last-child {
  701. border:none;
  702. }
  703.  
  704. .masonry-navigation-item.one-column {
  705. width: 100%;
  706. padding: 0 5px;
  707. margin-bottom: 10px;
  708. }
  709.  
  710. .masonry-navigation-item.one-column ul {
  711. display: flex;
  712. flex-wrap: wrap;
  713. margin: 0;
  714. padding: 0;
  715. }
  716.  
  717. /* if you have any problem with one colum lists (ul li) you edit here */
  718. .masonry-navigation-item.one-column ul li {
  719. margin: 4px 15px;
  720. padding: 0;
  721. }
  722.  
  723. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  724. .masonry-navigation-item.two-columns {
  725. width: 240px;
  726. padding: 0 5px;
  727. margin-bottom: 10px;
  728. }
  729.  
  730. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  731. .masonry-navigation-item.three-columns {
  732. width: 160px;
  733. padding: 0 5px;
  734. margin-bottom: 10px;
  735. }
  736.  
  737. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  738. .masonry-navigation-item.scroll {
  739. height:215px;
  740. overflow-y: scroll;
  741. }
  742.  
  743.  
  744.  
  745. /*----
  746.  
  747. MEDIA QUERIES AND RESPONSIVENESS:
  748.  
  749. if you change the basic layout (i.e. sidebar to header), you MUST modify or delete this section, or else your theme will get screwed up on smaller screen sizes. if you're unfamiliar with media queries and/or you aren't interested in making responsive themes, I recommend deleting this whole section.
  750.  
  751. -----*/
  752.  
  753. /*--- for small desktop/tablet screens. converts sidebar to header ---*/
  754.  
  755. @media only screen and (max-width: 1100px) {
  756. main {width: {select:post width};}
  757.  
  758. #sidebar {
  759. position: relative;
  760. margin: {text:post margin}px auto;
  761. width: 100%;
  762. top: auto;
  763.  
  764. }
  765.  
  766. .subtitle {
  767. width:100%;
  768. }
  769.  
  770.  
  771. #sidebar img {
  772. display:none;
  773. }
  774.  
  775. section {margin-left: 0;}
  776. }
  777.  
  778. /*--- for mobile devices ---*/
  779.  
  780. @media only screen and (max-width: 720px) {
  781. main, section {width: 80vw;}
  782. }
  783.  
  784. /*---- END OF MEDIA QUERIES -----*/
  785.  
  786. {CustomCSS}
  787.  
  788. </style>
  789. </head>
  790.  
  791. <!----- HTML ----->
  792.  
  793. <body>
  794.  
  795. <!-- main = main container -->
  796.  
  797. <main>
  798.  
  799. <!----- SIDEBAR ----->
  800.  
  801.  
  802.  
  803. <aside id="sidebar">
  804. <div class="subtitle">
  805. <div class="avatar"><img src="{image:avatar}"></div><a href="https://{name}.tumblr.com/">@{name}</a>
  806. </div>
  807.  
  808. <div class="daynight">
  809. <i class="ph-lightbulb-bold" style="float:right; margin-top:-50px; font-size:16px; font-weight:600;" title="Turn off the lights"></i></div>
  810.  
  811. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>{/block:ifSidebarImage}
  812.  
  813. <div class="title"><a href="/">{Title}</a></div>
  814.  
  815. {block:Description}<div id="description">{text:Desktop Description}</div>{/block:Description}
  816. <nav>
  817. <a href="/" title="home"><i class="fas fa-home"></i></a>
  818. <a href="/ask" title"message"><i class="far fa-comment-alt"></i></a>
  819. <a href="{text:Link 1 URL}" title="{text:Link 1}"><i class="fas fa-at"></i></a>
  820. <a href="{text:Link 2 URL}" title="{text:Link 2}"><i class="fas fa-tasks"></i></a>
  821. <a href="{text:Link 3 URL}" title="{text:Link 3}"><i class="far fa-edit"></i></a>
  822. <a href="{text:Link 4 URL}" title="{text:Link 4}"><i class="far fa-heart"></i></a>
  823. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  824. </nav>
  825. </aside>
  826.  
  827. <!----- TAG AND DAY PAGES ----->
  828.  
  829. <!-- section = post container -->
  830.  
  831. <section>
  832.  
  833. {block:TagPage}
  834. <article>
  835. Viewing posts filed under #{Tag}
  836. </article>
  837. {/block:TagPage}
  838.  
  839. {block:DayPage}
  840. <article>
  841. Viewing posts made on {Month} {DayOfMonth}, {Year}
  842. </article>
  843. {/block:DayPage}
  844.  
  845. <!----- POSTS ----->
  846.  
  847. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  848.  
  849.  
  850. <article class="posts" id="{PostID}" post-type="{PostType}">
  851.  
  852.  
  853. {block:Text}
  854. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  855. {block:NotReblog}
  856. <li class="caption text-caption">
  857. {Body}
  858. </li>
  859. {/block:NotReblog}
  860. {block:RebloggedFrom}
  861. {block:Reblogs}
  862. <li class="caption text-caption source-head">
  863. <img src="{PortraitURL-64}" class="user-icon">
  864. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  865. {Body}
  866. </li>
  867. {/block:Reblogs}
  868. {/block:RebloggedFrom}
  869. {/block:Text}
  870.  
  871. {block:Link}
  872. <a href="{URL}" class="link-wrap">
  873. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  874. <div class="link">
  875. <div class="title">{Name}</div>
  876. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  877. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  878. </div>
  879. </a>
  880. {block:Description}
  881. {block:NotReblog}
  882. <li class="caption">
  883. {Description}
  884. </li>
  885. {/block:NotReblog}
  886. {/block:Description}
  887. {block:RebloggedFrom}
  888. {block:Reblogs}
  889. <li class="caption">
  890. <img src="{PortraitURL-64}" class="user-icon">
  891. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  892. {Body}
  893. </li>
  894. {/block:Reblogs}
  895. {/block:RebloggedFrom}
  896. {/block:Link}
  897.  
  898. {block:Photo}
  899. <div class="photo">
  900. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  901. </div>
  902. {block:Caption}
  903. {block:NotReblog}
  904. <li class="caption">
  905. {Caption}
  906. </li>
  907. {/block:NotReblog}
  908. {block:RebloggedFrom}
  909. {block:Reblogs}
  910. <li class="caption">
  911. <img src="{PortraitURL-64}" class="user-icon">
  912. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  913. {Body}
  914. </li>
  915. {/block:Reblogs}
  916. {/block:RebloggedFrom}
  917. {/block:Caption}
  918. {/block:Photo}
  919.  
  920. {block:Photoset}
  921. <div class="photo">{Photoset-700}</div>
  922. {block:Caption}
  923. {block:NotReblog}
  924. <li class="caption">
  925. {Caption}
  926. </li>
  927. {/block:NotReblog}
  928. {block:RebloggedFrom}
  929. {block:Reblogs}
  930. <li class="caption">
  931. <img src="{PortraitURL-64}" class="user-icon">
  932. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  933. {Body}
  934. </li>
  935. {/block:Reblogs}
  936. {/block:RebloggedFrom}
  937. {/block:Caption}
  938. {/block:Photoset}
  939.  
  940. {block:Video}
  941. <div class="video">{Video-500}</div>
  942. {block:Caption}
  943. {block:NotReblog}
  944. <li class="caption">
  945. {Caption}
  946. </li>
  947. {/block:NotReblog}
  948. {block:RebloggedFrom}
  949. {block:Reblogs}
  950. <li class="caption">
  951. <img src="{PortraitURL-64}" class="user-icon">
  952. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  953. {Body}
  954. </li>
  955. {/block:Reblogs}
  956. {/block:RebloggedFrom}
  957. {/block:Caption}
  958. {/block:Video}
  959.  
  960. {block:Quote}
  961. <div class="quote">{Quote}</div>
  962. {block:Source}<div class="source">{Source}</div>{/block:Source}
  963. {/block:Quote}
  964.  
  965. {block:Chat}
  966. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  967. <ul class="chat">{block:Lines}
  968. <li>
  969. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  970. {Line}
  971. </li>
  972. {/block:Lines}</ul>
  973. {/block:Chat}
  974.  
  975. {block:Answer}
  976. <div class="ask-wrap">
  977. <img src="{AskerPortraitURL-128}" class="ask-icon">
  978. <div class="asking">{Asker} asked:</div>
  979. <div class="question">{Question}</div>
  980. </div>
  981. {block:Answerer}
  982. <li class="caption">
  983. <img src="{AnswererPortraitURL-64}" class="user-icon">
  984. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  985. {Answer}
  986. </li>
  987. {/block:Answerer}
  988. {block:NotReblog}
  989. <li class="caption">
  990. {Replies}
  991. </li>
  992. {/block:NotReblog}
  993. {block:RebloggedFrom}
  994. {block:Reblogs}
  995. <li class="caption">
  996. <img src="{PortraitURL-64}" class="user-icon">
  997. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  998. {Body}
  999. </li>
  1000. {/block:Reblogs}
  1001. {/block:RebloggedFrom}
  1002. {/block:Answer}
  1003.  
  1004. {block:Audio}
  1005. <div class="audiopost">
  1006. <div class="audiobox">
  1007. <div class="button">
  1008. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1009. </div>
  1010. </div>
  1011. {block:AlbumArt}
  1012. <img src="{AlbumArtURL}" class="album-art">
  1013. {/block:AlbumArt}
  1014. <div class="audioinfo">
  1015. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1016. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1017. {block:Album}<li>{Album}</li>{/block:Album}
  1018. </div>
  1019. </div>
  1020. {block:Caption}
  1021. {block:NotReblog}
  1022. <li class="caption">
  1023. {Caption}
  1024. </li>
  1025. {/block:NotReblog}
  1026. {block:RebloggedFrom}
  1027. {block:Reblogs}
  1028. <li class="caption">
  1029. <img src="{PortraitURL-64}" class="user-icon">
  1030. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1031. {Body}
  1032. </li>
  1033. {/block:Reblogs}
  1034. {/block:RebloggedFrom}
  1035. {/block:Caption}
  1036. {/block:Audio}
  1037.  
  1038. <!----- INFO ----->
  1039.  
  1040. {block:Date}
  1041. <div class="info">
  1042. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"><i class="ph-push-pin-bold" style="font-size:15px;margin-top:5px"></i></a>{/block:PinnedPostLabel}
  1043. <a href="{Permalink}">{TimeAgo}</a>
  1044. {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  1045.  
  1046. <!-- reblog info and content source on permalink pages -->
  1047.  
  1048. {block:PermalinkPage}
  1049.  
  1050. {block:RebloggedFrom}
  1051. <a href="{ReblogParentURL}">via</a>
  1052. <a href="{ReblogRootURL}">originally</a>
  1053. {/block:RebloggedFrom}
  1054. {block:ContentSource}<a href="{SourceURL}">{lang:Source}</a>{/block:ContentSource}
  1055.  
  1056. {/block:PermalinkPage}
  1057.  
  1058. <!-- like and reblog buttons -->
  1059.  
  1060. <a href="{ReblogURL}" target="_blank">reblog</a>
  1061.  
  1062.  
  1063. </div>
  1064.  
  1065. <a class="likeb" href="#">{LikeButton}<span class="actual-button"><i class="ph-heart-bold"></i></span></a>
  1066. {/block:Date}
  1067.  
  1068. <!----- TAGS ----->
  1069.  
  1070. {block:HasTags}
  1071. <div class="tags">
  1072. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1073. </div>
  1074. {/block:HasTags}
  1075.  
  1076. <!----- POST NOTES ----->
  1077.  
  1078. {block:PermalinkPage}{block:Date}
  1079. {block:NoteCount}{block:PostNotes}
  1080. <div class="notes">
  1081. {PostNotes-64}
  1082. </div>
  1083. {/block:PostNotes}{/block:NoteCount}
  1084. {/block:Date}{/block:PermalinkPage}
  1085.  
  1086. </article>
  1087. {/block:Posts}
  1088.  
  1089. <!-- end of posts container -->
  1090.  
  1091. </section>
  1092.  
  1093. <!----- PAGINATION ----->
  1094.  
  1095. {block:Pagination}
  1096. <div class="pagination">
  1097. <div class="prev">{block:PreviousPage}<a href="{PreviousPage}">Previous</a>{/block:PreviousPage}<span>Previous</span></div>
  1098.  
  1099. <div class="next">{block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}<span>Next</span></div>
  1100. </div>
  1101. {/block:Pagination}
  1102.  
  1103.  
  1104.  
  1105. <!--- TUMBLR CONTROLS -->
  1106.  
  1107.  
  1108. <div title="Tumblr Controls" class="controls-button"><i class="ph-list" style="font-size:20px"></i></div>
  1109.  
  1110. <!-- end of main container -->
  1111.  
  1112. </main>
  1113.  
  1114.  
  1115. <!----- CREDIT: if you make significant modifications, feel free to replace with your own. if you use this as a theme without changes, leave in place. ----->
  1116.  
  1117. <a href="https://userbru.tumblr.com" title="code by userbru" id="credit"><i class="ph-moon-bold"></i></a>
  1118.  
  1119. <!---- day/night toggle----->
  1120.  
  1121. <script>
  1122. const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
  1123.  
  1124. if (currentTheme === 'night') {
  1125. $( 'body' ).addClass( 'night');
  1126. }
  1127.  
  1128. $(document).ready(function(){
  1129. $('.daynight').click(function(){
  1130. $(document).ready(function(){
  1131. $('.daynight').click(function(){
  1132. let theme = 'daynight';
  1133. $('body').toggleClass('night');
  1134. $('.daynight span').toggleClass('fa-sun');
  1135. if ($('body').hasClass('night')) {
  1136. theme = 'night';
  1137. }
  1138. localStorage.setItem('theme', theme);
  1139. });
  1140. });
  1141. });
  1142. });
  1143. </script>
  1144.  
  1145.  
  1146. <!--- TUMBLR CONTROLS -->
  1147.  
  1148. <script src=“//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  1149.  
  1150. <script>
  1151. $('.controls-button').click(function(){
  1152. $('body').toggleClass('controls-click');
  1153. });
  1154. </script>
  1155.  
  1156. <!-- masonry navigation -->
  1157. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  1158.  
  1159. <script type="text/javascript">
  1160. // masonry navigation
  1161. var elements = document.getElementsByClassName('masonry-navigation');
  1162. var msnry;
  1163. var nElements = elements.length;
  1164. for(var i = 0; i < nElements; i++){
  1165. msnry = new Masonry( elements[i], {
  1166. // columnWidth: 268,
  1167. gutter: 10,
  1168. itemSelector: '.masonry-navigation-item',
  1169. });
  1170. }
  1171. </script>
  1172.  
  1173. <script src="https://unpkg.com/popper.js@1"></script>
  1174. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1175. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1176.  
  1177. <script>
  1178.  
  1179. tippy('a[title]', {
  1180. theme: 'gradient',
  1181. arrow: false,
  1182. zIndex: 9999999999,
  1183. maxWidth: 300,
  1184.  
  1185. content(reference) {
  1186. const title = reference.getAttribute('title');
  1187. reference.removeAttribute('title');
  1188. return title;
  1189. },
  1190. });
  1191.  
  1192.  
  1193. </script>
  1194.  
  1195.  
  1196.  
  1197. </body>
  1198. </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!