API tools faq
paste
Advertisement
softcodesthemes

november / theme

softcodesthemes
Nov 8th, 2022
7,746
3
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 44.52 KB | None | 3 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!---
  4.  
  5.  
  6.  
  7. november by @softcodes
  8. softcodes.tumblr.com/credits
  9.  
  10. find more icons here:
  11. https://glenthemes.tumblr.com/icons/iconsax
  12.  
  13.  
  14.  
  15. --->
  16. <head>
  17. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  18.  
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  22. <meta charset="utf-8">
  23. <meta name="viewport" contentx="width=device-width, initial-scale=1.0">
  24.  
  25. <script src="//glenthemes.github.io/iconsax/geticons.js"></script>
  26. <link href="//glenthemes.github.io/iconsax/style.css" rel="stylesheet">
  27. <script src="https://unpkg.com/phosphor-icons"></script>
  28.  
  29. <!----- VARIABLES AND OPTIONS ----->
  30.  
  31. <meta name="color:background" content="#ffffff"/>
  32. <meta name="color:text" content="#666666"/>
  33. <meta name="color:link" content="#aaaaaa"/>
  34. <meta name="color:accent" content="#c89a67"/>
  35. <meta name="color:light accent" content="#efe1d2"/>
  36. <meta name="color:headings" content="#444444"/>
  37. <meta name="color:borders" content="#eeeeee"/>
  38. <meta name="color:chat" content="#f2f2f2"/>
  39. <meta name="color:selection text" content="#000000"/>
  40. <meta name="color:selection background" content="#f5eee7"/>
  41.  
  42. <meta name="if:right sidebar" content=""/>
  43. <meta name="if:light tumblr controls" content=""/>
  44.  
  45. <meta name="image:icon" content=""/>
  46. <meta name="image:sidebar" content=""/>
  47. <meta name="image:project image" content=""/>
  48.  
  49. <meta name="select:border style" content="solid"/>
  50. <meta name="select:border style" content="dashed"/>
  51. <meta name="select:border style" content="dotted"/>
  52.  
  53. <meta name="select:letterspacing" content="0px"/>
  54. <meta name="select:letterspacing" content="0.25px"/>
  55. <meta name="select:letterspacing" content="0.5px"/>
  56.  
  57. <meta name="select:Post Width" content="400px" title="400px"/>
  58. <meta name="select:Post Width" content="450px" title="450px"/>
  59. <meta name="select:Post Width" content="500px" title="500px"/>
  60. <meta name="select:Post Width" content="540px" title="540px"/>
  61.  
  62. <meta name="select:photoset gutter" content="1px" title="1px"/>
  63. <meta name="select:photoset gutter" content="2px" title="2px"/>
  64. <meta name="select:photoset gutter" content="3px" title="3px"/>
  65. <meta name="select:photoset gutter" content="4px" title="4px"/>
  66.  
  67. <meta name="text:body font" content="Karla"/>
  68. <meta name="text:font size" content="12px"/>
  69. <meta name="text:title" content="your title here">
  70. <meta name="text:post margin" content="150px"/>
  71.  
  72. <meta name="text:home icon" content="home-2"/>
  73. <meta name="text:home link" content="home"/>
  74. <meta name="text:ask icon" content="messages-1"/>
  75. <meta name="text:ask link" content="contact"/>
  76. <meta name="text:archive icon" content="cloud"/>
  77. <meta name="text:archive link" content="archive"/>
  78.  
  79. <meta name="text:link 1 icon" content="user-2"/>
  80. <meta name="text:link 1 URL" content=""/>
  81. <meta name="text:link 1" content=""/>
  82.  
  83. <meta name="text:link 2 icon" content="folder-favorite"/>
  84. <meta name="text:link 2 URL" content=""/>
  85. <meta name="text:link 2" content=""/>
  86.  
  87. <meta name="text:link 3 icon" content="star"/>
  88. <meta name="text:link 3 URL" content=""/>
  89. <meta name="text:link 3" content=""/>
  90.  
  91. <meta name="text:link 4 icon" content="map-1"/>
  92. <meta name="text:link 4 URL" content=""/>
  93. <meta name="text:link 4" content=""/>
  94.  
  95. <meta name="text:link 5 icon" content="bookmark"/>
  96. <meta name="text:link 5 URL" content=""/>
  97. <meta name="text:link 5" content=""/>
  98.  
  99. <link rel="preconnect" href="https://fonts.googleapis.com">
  100. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  101. <link href="https://fonts.googleapis.com/css2?family={text:body font}:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
  102.  
  103. <link rel="preconnect" href="https://fonts.googleapis.com">
  104. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  105. <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  106.  
  107. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  108.  
  109. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  110.  
  111. <script src="//npf-images-v3.github.io/script.js"></script>
  112. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  113. <script src="https://glenthemes.s3.eu-west-2.amazonaws.com/other/npf-images-v3-ps-mod.js"></script>
  114.  
  115. <style tmblr-npf>
  116. :root {
  117. --NPF-Caption-Spacing:20px;
  118. --NPF-Image-Spacing:{select:photoset gutter};
  119. }
  120. </style>
  121.  
  122. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  123.  
  124. <!----- CSS ----->
  125.  
  126. <style type="text/css">
  127.  
  128. /* --- fade in --- */
  129.  
  130. @-webkit-keyframes fadein {
  131. 0% {opacity: 0;}
  132. 100% { opacity: 1; } }
  133.  
  134. @-moz-keyframes fadein {
  135. 0% { opacity: 0; }
  136. 100% { opacity: 1; } }
  137.  
  138. @keyframes fadein {
  139. 0% { opacity: 0; }
  140. 100% { opacity: 1; } }
  141.  
  142. ::-webkit-scrollbar {width:14px;height:9px;}
  143. ::-webkit-scrollbar {background-color:transparent;}
  144. ::-webkit-scrollbar-track {border:6px solid {color:background};background-color:{color:borders};}
  145. ::-webkit-scrollbar-thumb {border:4px solid {color:background};background-color:{color:accent};min-height:50px;min-width:50px;border-radius:10px;}
  146.  
  147. ::-moz-selection {background:{color:selection background};color:{color:selection text};}
  148. ::selection {background:{color:selection background};color:{color:selection text};}
  149.  
  150. /*----- BASIC STYLING -----*/
  151.  
  152. body {
  153. font-family: {text:body font}, sans-serif;
  154. font-size: {text:font size};
  155. color: {color:text};
  156. background-color: {color:background};
  157. text-align: left;
  158. letter-spacing:{select:letterspacing};
  159. line-height: 175%;
  160. word-wrap: break-word;
  161. margin: 0;
  162. padding: 0;
  163. -moz-osx-font-smoothing:grayscale;
  164. -webkit-font-smoothing:antialiased;
  165. font-smoothing:antialiased;
  166. -webkit-animation: fadein 1.5s;
  167. -moz-animation:fadein 1.5s;
  168. animation:fadein 1.5s;
  169. }
  170.  
  171. a {
  172. color: {color:link};
  173. text-decoration: none;
  174. -webkit-transition: all 0.3s;
  175. -moz-transition: all 0.3s;
  176. -ms-transition: all 0.3s;
  177. -o-transition: all 0.3s;
  178. transition: all 0.3s;
  179. }
  180.  
  181. a:hover {
  182. color: {color:accent};
  183. -webkit-transition: all 0.3s;
  184. -moz-transition: all 0.3s;
  185. -ms-transition: all 0.3s;
  186. -o-transition: all 0.3s;
  187. transition: all 0.3s;
  188. }
  189.  
  190. blockquote {
  191. padding:0.5em 0 0.5em 1em;
  192. margin: 0.5em 0 0.5em 1em;
  193. border-left:2px solid {color:light accent};
  194. }
  195.  
  196. h1, h2, h3, h4, h5 {
  197. line-height: 145%;
  198. font-size:calc({text:font size} + 1px);
  199. font-weight:600;
  200. letter-spacing:0px;
  201. color:{color:headings};
  202. }
  203.  
  204. small {font-size: {text:font size};}
  205. big {font-size: 1.1em;}
  206.  
  207. hr {
  208. height: 1px;
  209. border: none;
  210. box-shadow: none;
  211. background-color: {color:borders};
  212. }
  213.  
  214. pre {
  215. line-height: inherit;
  216. font-size: inherit;
  217. white-space: pre-wrap;
  218. white-space: -moz-pre-wrap;
  219. white-space: -pre-wrap;
  220. white-space: -o-pre-wrap;
  221. word-wrap: break-word;
  222. }
  223.  
  224. li {max-width: 100%; list-style-type: circle;}
  225.  
  226. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  227.  
  228. /*---- buttons ----*/
  229.  
  230. .button {
  231. display:inline-block;
  232. box-shadow:0 0 0 inset!important;
  233. margin-right:5px;
  234. padding:4px 8px 5px 8px;
  235. background-color:{color:light accent};
  236. color:{color:text};
  237. }
  238.  
  239. .button:hover {
  240. background-color:{color:accent}!important;
  241. color:#000!important;
  242. }
  243.  
  244. /*----- CONTAINERS -----*/
  245.  
  246. main {
  247. position: relative;
  248. width:calc({select:post width} + 625px);
  249. margin:70px auto 0 auto;
  250. display: flex;
  251. flex-direction: row;
  252. align-items: flex-start;
  253. justify-content: space-between;
  254. }
  255.  
  256. section {
  257. position: relative;
  258. width: {select:post width};
  259. }
  260.  
  261. article {
  262. width: 100%;
  263. position: relative;
  264. margin:0 auto {text:post margin} auto;
  265. }
  266.  
  267. #left-sidebar {
  268. display:block;
  269. width:225px;
  270. height:auto;
  271. }
  272.  
  273. #right-sidebar {
  274. display:block;
  275. width:225px;
  276. height:auto;
  277. padding-top:5px;
  278. }
  279.  
  280. /*----- left sidebar -----*/
  281.  
  282. #left-wrap {position:fixed;width:225px;}
  283.  
  284. #blogname {
  285. font-size:calc({text:font size} + 2px);
  286. font-weight:600;
  287. color:{color:text};
  288. text-transform:lowercase;
  289. vertical-align:middle;
  290. margin:1em 0 0.2em 0;
  291. letter-spacing:0;
  292. }
  293.  
  294. #blogname a {color:{color:headings};}
  295. #blogname a:hover {color:{color:accent};}
  296.  
  297. #handle {display:block;}
  298.  
  299. #handle .iconsax {
  300. --Iconsax-Size:18px;
  301. --Iconsax-Color:{color:accent};
  302. vertical-align:middle;
  303. margin-top:-3px;
  304. margin-right:0.5em;
  305. }
  306.  
  307. #icon {
  308. position:relative;
  309. width:50px;
  310. height:50px;
  311. border-radius:100%;
  312. padding:7px;
  313. margin:0 auto -28px auto;
  314. background-color:{color:accent};
  315. }
  316.  
  317. #icon img {
  318. width:50px;
  319. height:50px;
  320. border-radius:100%;
  321. border:4px solid {color:background};
  322. margin-left:-4px;
  323. margin-top:-4px;
  324. }
  325.  
  326. #sidebarimg {
  327. width:100%;
  328. height:auto;
  329. z-index:-1;
  330. }
  331.  
  332. #sidebarimg img {
  333. width:100%;
  334. height:auto;
  335. border-radius:3px;
  336. }
  337.  
  338. #description {display:block;margin-top:0.75em;}
  339.  
  340.  
  341. nav {
  342. display:grid;
  343. grid-template-columns:49.5% 49.5%;
  344. grid-gap:3px;
  345. margin:50px 0;
  346. }
  347.  
  348. nav a {
  349. display:block;
  350. color:{color:text};
  351. padding:3px 6px;
  352. border-radius:3px;
  353. margin-left:-2px;
  354. }
  355.  
  356. nav a:hover {
  357. color:{color:text};
  358. background-color:{color:light accent};
  359. }
  360.  
  361. nav .iconsax {
  362. --Iconsax-Size:16px;
  363. --Iconsax-Color:{color:text};
  364. vertical-align:middle;
  365. margin-top:-3px;
  366. margin-right:0.75em;
  367. }
  368.  
  369. .search-box {
  370. display:block;
  371. border:1px {select:border style} {color:borders};
  372. border-radius:3px;
  373. }
  374.  
  375. .search-box .iconsax {
  376. --Iconsax-Size:16px;
  377. --Iconsax-Color:{color:link};
  378. display:inline-block;
  379. float:right;
  380. padding:0.65em 1em;
  381. }
  382.  
  383. .search .query {
  384. display:inline-block;
  385. border:0px;
  386. outline:0;
  387. font-family:inherit;
  388. font-size:inherit!important;
  389. color:{color:link};
  390. background-color:transparent;
  391. text-align:left;
  392. padding:0.75em 1.25em;
  393. }
  394.  
  395. ::-webkit-input-placeholder {color: inherit;}
  396. :-moz-placeholder {color:inherit; opacity:0.5;}
  397. ::-moz-placeholder {color:inherit; opacity:0.5;}
  398. :-ms-input-placeholder {color:inherit;}
  399. input:focus::-webkit-input-placeholder {color:transparent;}
  400. input:focus:-moz-placeholder {color:transparent;}
  401. input:focus::-moz-placeholder {color:transparent;}
  402. input:focus:-ms-input-placeholder {color:transparent;}
  403.  
  404.  
  405. /*----- right sidebar -----*/
  406.  
  407. {block:ifnotrightsidebar}
  408. #right-wrap {display:none;}
  409. {/block:ifnotrightsidebar}
  410.  
  411. #right-wrap {position:fixed;width:225px;}
  412.  
  413. #updates {display:block;margin-bottom:50px;}
  414.  
  415. #updates span {display:block;margin-bottom:3px;}
  416.  
  417. #updates .iconsax {
  418. --Iconsax-Size:16px;
  419. --Iconsax-Color:{color:text};
  420. margin-right:0.7em;
  421. margin-top:-1px;
  422. }
  423.  
  424. #projects {display:block;margin-bottom:60px;}
  425.  
  426. #pro-wrap {
  427. display:block;
  428. border:1px {select:border style} {color:borders};
  429. border-radius:3px;
  430. }
  431.  
  432. #pro-top {
  433. border-bottom:1px {select:border style} {color:borders};
  434. padding:1.25em 1.25em 1em 1.25em;
  435. }
  436.  
  437. #pro-top .iconsax {
  438. --Iconsax-Size:16px;
  439. --Iconsax-Color:{color:accent};
  440. float:right;
  441. vertical-align:middle;
  442. padding-right:5px;
  443. }
  444.  
  445. #pro-image {
  446. width:40px;
  447. height:40px;
  448. padding:3px;
  449. border-radius:100%;
  450. border:2px solid {color:light accent};
  451. display:block;
  452. position:relative;
  453. margin:0 auto -18px auto;
  454. background-color:#fff!important;
  455. }
  456.  
  457. #pro-image img {
  458. width:40px;
  459. height:40px;
  460. border-radius:100%;
  461. background-color:#fff!important;
  462. }
  463.  
  464. #pro-title {
  465. display:inline-block;
  466. font-weight:600;
  467. vertical-align:middle;
  468. line-height:125%;
  469. }
  470.  
  471. #pro-title span {font-weight:400;display:block;}
  472.  
  473. #pro-bottom {padding:1.25em;}
  474.  
  475. #pro-bottom span {display:block;}
  476.  
  477. #pro-bottom span b {display:inline-block;width:38%;}
  478.  
  479. .meter {
  480. height: 6px;
  481. position: relative;
  482. background:{color:borders};
  483. -moz-border-radius:2px;
  484. -webkit-border-radius:2px;
  485. border-radius:2px;
  486. padding:0px;
  487. margin:1.25em 0 1.75em 0;
  488. }
  489.  
  490. .meter > span {
  491. display: block;
  492. height: 100%;
  493. border-top-right-radius:0px;
  494. border-bottom-right-radius:0px;
  495. border-top-left-radius:2px;
  496. border-bottom-left-radius:2px;
  497. background-color:{color:accent};
  498. position: relative;
  499. overflow: hidden;
  500. }
  501.  
  502. .meter > span:after {
  503. content: "";
  504. position: absolute;
  505. top: 0; left: 0; bottom: 0; right: 0;
  506. background-image: linear-gradient(
  507. -45deg,
  508. rgba(255, 255, 255, .2) 25%,
  509. transparent 25%,
  510. transparent 50%,
  511. rgba(255, 255, 255, .2) 50%,
  512. rgba(255, 255, 255, .2) 75%,
  513. transparent 75%,
  514. transparent
  515. );
  516. z-index: 1;
  517. background-size: 50px 50px;
  518. animation: move 2s linear infinite;
  519. border-top-right-radius:0px;
  520. border-bottom-right-radius:0px;
  521. border-top-left-radius:2px;
  522. border-bottom-left-radius:2px;
  523. overflow: hidden;
  524. }
  525.  
  526. #pro-buttons {
  527. display:grid;
  528. grid-template-columns:50% 50%;
  529. grid-gap:5px;
  530. margin-top:1em;
  531. }
  532.  
  533. #pro-buttons a {
  534. display:block;
  535. background-color:{color:light accent};
  536. text-align:center;
  537. border-radius:3px;
  538. padding:0.2em 1em;
  539. color:{color:text};
  540. margin-bottom:0.5em;
  541. font-size:calc({text:font size} - 1px);
  542. }
  543.  
  544. #pro-buttons a:hover {background-color:{color:accent};color:{color:headings};}
  545.  
  546. #stats {display:block;}
  547.  
  548. #stats span {display:block;margin-bottom:3px;}
  549.  
  550. #stats span b {display:inline-block;width:35%;}
  551.  
  552. #stats span i {display:inline-block;font-style:normal;}
  553. #stats span a {color:{color:text};}
  554. #stats span a:hover {color:{color:accent};}
  555.  
  556. #stats .iconsax {
  557. --Iconsax-Size:16px;
  558. --Iconsax-Color:{color:accent};
  559. margin-right:0.75em;
  560. vertical-align:middle;
  561. margin-top:-2px;
  562. }
  563.  
  564. /*----- CAPTIONS -----*/
  565.  
  566. .caption {
  567. list-style-type:none;
  568. padding:1.5em 0;
  569. border-bottom:1px {select:border style} {color:borders};
  570. }
  571.  
  572. .caption a {
  573. box-shadow:0 -7px 0 {color:light accent} inset;
  574. color:{color:text};
  575. -webkit-transition: all 0.5s;
  576. -moz-transition: all 0.5s;
  577. -ms-transition: all 0.5s;
  578. -o-transition: all 0.5s;
  579. transition: all 0.5s;
  580. }
  581.  
  582. .caption a:hover {
  583. box-shadow:0 -14px 0 {color:light accent} inset;
  584. color:{color:headings};
  585. -webkit-transition: all 0.5s;
  586. -moz-transition: all 0.5s;
  587. -ms-transition: all 0.5s;
  588. -o-transition: all 0.5s;
  589. transition: all 0.5s;
  590. }
  591.  
  592. .caption p {margin:1em 0;}
  593. .caption p:last-of-type {margin-bottom: 0;}
  594.  
  595. .caption blockquote p:first-of-type {margin-top: 0;}
  596.  
  597. .original-caption p:first-of-type {margin-top: 0;}
  598. .text-caption:first-of-type {margin-top: 0;}
  599. .caption iframe, .caption img {max-width: 100%;}
  600. .reblog-wrap blockquote {margin-bottom:0;}
  601.  
  602. .tmblr-attribution {display:none;}
  603.  
  604. .user-icon {
  605. display: inline-block;
  606. vertical-align: middle;
  607. border-radius: 50%;
  608. width: 2em;
  609. height: 2em;
  610. margin-right:0.75em;
  611. padding:3px;
  612. background-color:{color:background};
  613. border:2px solid {color:light accent};
  614. }
  615.  
  616. .username {
  617. font-weight:600;
  618. display: inline-block;
  619. vertical-align: middle;
  620. text-transform:lowercase;
  621. }
  622.  
  623. .username a {
  624. color:{color:headings};
  625. background:none!important;
  626. box-shadow:0 0 0 inset;
  627. }
  628.  
  629. .username a:hover {color:{color:accent};box-shadow:0 0 0 inset;}
  630.  
  631. .deactive::after {
  632. content: '(deactivated)';
  633. margin-left: 0.5em;
  634. opacity: 0.75;
  635. color: {color:text};
  636. }
  637.  
  638. /*---- BORDER RADIUS ----*/
  639.  
  640. .border-radius, .photo, .video, .button, .link-wrap a, .npf-link-block, .ask-wrap, .chat li {
  641. border-radius:3px!important;
  642. overflow:hidden!important;
  643. }
  644.  
  645. /*----- TEXT -----*/
  646.  
  647. h1.post-title {
  648. margin:0;
  649. font-size:calc({text:font size} + 3px);
  650. padding:0;
  651. font-weight:600;
  652. letter-spacing:0px;
  653. }
  654.  
  655. h1.post-title a {
  656. color:{color:headings};
  657. }
  658.  
  659. /*----- LINK -----*/
  660.  
  661. a.link-wrap {
  662. display: block;
  663. border: 1px {select:border style} {color:borders};
  664. }
  665.  
  666. .linkwrap-image, .linkwrap-image img {
  667. border-radius:3px 3px 0 0;
  668. }
  669.  
  670. .link {padding: 2em;}
  671. .link-host, .link-txt {margin-top: 1.5em;}
  672.  
  673. .npf-link-block {
  674. margin-top: 1.5em;
  675. background-color: initial;
  676. }
  677.  
  678. .npf-link-block a {box-shadow:0 0 0 inset;}
  679. .npf-link-block a:hover {box-shadow:0 0 0 inset;}
  680.  
  681. .npf-link-block .poster .title {padding: 1.5em;}
  682. .npf-link-block.no-poster .title {padding: 1.5em 1.5em 0 1.5em;}
  683. .npf-link-block .title {font-size: 1.25em; border-bottom: none;}
  684. .npf-link-block .bottom {padding: 1.5em !important;}
  685.  
  686. /* video */
  687.  
  688. .tumblr_video_container {
  689. width:{select:post width}!important;
  690. height:auto;
  691. }
  692.  
  693. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
  694.  
  695.  
  696. /*----- PHOTO -----*/
  697.  
  698. img {
  699. max-width:100%;
  700. height:auto;
  701. display:block;
  702. border:none;
  703. text-decoration:none;
  704. }
  705.  
  706. .photo img {
  707. max-width:100%;
  708. max-height:100%;
  709. overflow:hidden;
  710. display:block;
  711. }
  712.  
  713.  
  714. /*----- LIGHTBOX -----*/
  715.  
  716. .vignette, #vignette {opacity: 0;}
  717. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  718.  
  719. .lightbox-image, #tumblr_lightbox img {
  720. box-shadow: none !important;
  721. border-radius: 0 !important;
  722. max-width: none;
  723. }
  724.  
  725. #tumblr_lightbox_caption, .lightbox-caption {
  726. color: #fff !important;
  727. font-family: inherit;
  728. margin-top: 1em !important;
  729. }
  730.  
  731. /*----- PHOTOSET -----*/
  732.  
  733. .photo-slideshow {visibility: hidden;} .photo-slideshow.processed {visibility: visible;} .photo-slideshow .row {clear: both;width: 100%;} .photo-slideshow .pxu-photo {display: block;float: clear;width: 100%;overflow: hidden;} .photo-slideshow .pxu-photo img {display: block;} .photo-slideshow.processed .pxu-photo img {width:100%;height: auto;} .photo-slideshow .pxu-photo:first-child img {margin:auto;} .photo-slideshow .count-1 {max-width:100%;height: auto;} .set {margin-left:10px;} .photo-slideshow .count-2 {width:50%;height: auto;} .photo-slideshow .count-3 {width:33.33%;height: auto;}
  734.  
  735. .post-content div.npf_row, .post div.npf_row, body div.npf_row {margin-left: 0 !important;margin-right: 0 !important;}
  736.  
  737. .npf_inst, .npf_row_parent, .photo img, [photoset-layout], iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track'], .tmblr-full > video, .npf-link-block {
  738. border-radius:3px!important;
  739. overflow:hidden!important;
  740. }
  741.  
  742. /*----- QUOTE -----*/
  743.  
  744. .quote, p.npf_quote {
  745. line-height: 150%;
  746. font-size:calc({text:font size} + 4px);
  747. color:{color:headings};
  748. }
  749.  
  750. .quote .iconsax {
  751. --Iconsax-Size:16px;
  752. --Iconsax-Color:{color:accent};
  753. vertical-align:middle;
  754. margin-top:-3px;
  755. }
  756.  
  757. .right {margin-right:0.25em;}
  758. .left {margin-left:0.25em;}
  759.  
  760. .quote p:first-of-type {margin-top: 0;}
  761. .quote p:last-of-type {margin-bottom: 0;}
  762. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  763.  
  764. .source {
  765. margin: 1em 0;
  766. font-weight:600;
  767. text-align:right;
  768. }
  769.  
  770. .source .iconsax {
  771. --Iconsax-Size:16px;
  772. --Iconsax-Color:{color:text};
  773. margin-right:0.25em;
  774. vertical-align:middle;
  775. margin-top:-1px;
  776. }
  777.  
  778. /* audio */
  779.  
  780. iframe.tumblr_audio_player {width:100%;border-radius:3px;}
  781.  
  782. .audio iframe {margin-bottom:-7px;}
  783.  
  784. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  785. height:80px!important;
  786. width:100%;
  787. }
  788.  
  789.  
  790. /*----- CHAT -----*/
  791.  
  792. .chat {
  793. margin:0;
  794. padding:0;
  795. }
  796.  
  797. .chat li {
  798. list-style-type: none;
  799. margin-top: 0.25em;
  800. padding:1em 1.5em;
  801. }
  802.  
  803. .chat li:nth-of-type(odd) {background-color:{color:chat};}
  804.  
  805. .chat li:nth-of-type(even) {background-color:{color:light accent};}
  806.  
  807. .chat li:first-of-type {margin-top:0;}
  808.  
  809. .chatter {
  810. display:inline-block;
  811. margin-right:5px;
  812. font-weight:600;
  813. color:{color:headings};
  814. }
  815.  
  816. .chattxt {display:inline-block;}
  817.  
  818. p.npf_chat {font-family: inherit; margin-top: 1em;}
  819. p.npf_chat b {font-family: inherit;}
  820.  
  821. /*----- answer -----*/
  822.  
  823. .ask-wrap {display:block;}
  824.  
  825. .ask-padding {
  826. height:1em;
  827. display:block;
  828. background-color:{color:background};
  829. }
  830.  
  831. .asker {
  832. display:inline-block;
  833. float:left;
  834. text-transform:lowercase;
  835. color:{color:headings};
  836. font-weight:700;
  837. }
  838.  
  839. .asker a {color:{color:headings};display:inline-block;}
  840.  
  841. .asker a:hover {color:{color:accent};}
  842.  
  843. .askerimg {
  844. display:block;
  845. position:relative;
  846. width:100%;
  847. margin:0px auto -15px auto;
  848. width:26px;
  849. height:26px;
  850. border-radius:100%;
  851. padding:3px;
  852. border:2px solid {color:accent};
  853. background-color:{color:background};
  854. }
  855.  
  856. .askerimg img {
  857. width:26px;
  858. height:26px;
  859. border-radius:100%;
  860. }
  861.  
  862. .question {
  863. display:block;
  864. padding:1.75em;
  865. border-radius:3px;
  866. border:1px solid {color:borders};
  867. background-color:{color:background};
  868. }
  869.  
  870. .question p:first-of-type {margin-top: 0;}
  871. .question p:last-of-type {margin-bottom: 0;}
  872.  
  873.  
  874. /*----- INFO -----*/
  875.  
  876. .info {
  877. margin-top:1.5em;
  878. display: flex;
  879. flex-direction: row;
  880. align-items: flex-start;
  881. justify-content: space-between;
  882. text-transform:lowercase;
  883. }
  884.  
  885. .info a {
  886. display: inline-block;
  887. vertical-align: middle;
  888. color:{color:headings};
  889. margin-right:1em;
  890. font-weight:600;
  891. }
  892.  
  893. .info a:hover {color:{color:accent};}
  894.  
  895. .info-left .iconsax {
  896. --Iconsax-Size:16px;
  897. --Iconsax-Color:{color:headings};
  898. vertical-align:middle;
  899. margin-right:0.6em;
  900. }
  901.  
  902. .likeb {
  903. position: relative;
  904. display: inline-block;
  905. height: inherit;
  906. margin-bottom:0px;
  907. }
  908.  
  909. .notecount {font-weight:400!important;}
  910.  
  911. .post-controls a {margin-left:0.3em!important;margin-right:0;}
  912.  
  913. .post-controls i {
  914. font-size:16px;
  915. color:{color:headings};
  916. vertical-align:middle;
  917. }
  918.  
  919. .likeb .like_button iframe {
  920. position: absolute;
  921. top: 0;
  922. left: 0;
  923. bottom: 0;
  924. right: 0;
  925. z-index: 2;
  926. opacity: 0;
  927. }
  928.  
  929. .like_button iframe {width: 100% !important; height: 100% !important;}
  930. .likeb .liked + .actual-button i {color:#ff0000!important;}
  931.  
  932. /* pinned post */
  933.  
  934. .pinned-post {
  935. display:inline-block;
  936. font-weight:600;
  937. }
  938.  
  939. .pinned-post a {color:{color:accent};}
  940.  
  941. .pinned-post .iconsax {
  942. --Iconsax-Size:16px;
  943. --Iconsax-Color:{color:accent};
  944. margin-top:-2px;
  945. margin-right:0.4em!important;
  946. }
  947.  
  948.  
  949. /* source info */
  950.  
  951. .source-info {margin-top:75px;}
  952.  
  953. .source-info li {list-style-type: none;text-transform:lowercase;}
  954.  
  955. .source-info li:first-of-type {margin-top:2em;}
  956.  
  957.  
  958. /*---- tags -----*/
  959.  
  960. .tags {display:block;margin-top:0.75em;}
  961.  
  962. .tags a {margin-right:1.2em;color:{color:link};vertical-align:middle;}
  963.  
  964. .tags a:hover {color:{color:text};}
  965.  
  966. .tags .iconsax {
  967. --Iconsax-Size:16px;
  968. --Iconsax-Color:{color:link};
  969. vertical-align:middle;
  970. margin-top:-1px;
  971. margin-right:0.6em;
  972. }
  973.  
  974. /*---- tagday page ----*/
  975.  
  976. .tagday-page {
  977. text-align:center;
  978. text-transform:lowercase;
  979. margin:10px 0 100px 0;
  980. }
  981.  
  982. .tag-day {
  983. display:block;
  984. font-size:calc({text:font size} + 3px);
  985. font-weight:600;
  986. color:{color:accent};
  987. }
  988.  
  989.  
  990. /*---- POST NOTES -----*/
  991.  
  992. .notes {
  993. margin:2.5em 0 100px 0;
  994. text-transform:lowercase;
  995. }
  996.  
  997. ol.notes {
  998. max-width: 100%;
  999. padding: 0;
  1000. margin: 2em 0 0 0;
  1001. }
  1002.  
  1003. ol.notes li.note {padding: 0.5em 0; list-style-type: none;text-align:left!important;}
  1004.  
  1005. ol.notes li.note img.avatar {
  1006. border-radius: 50%;
  1007. margin-right: 1em;
  1008. vertical-align: middle;
  1009. display: inline-block;
  1010. width: 1.25em;
  1011. height: 1.25em;
  1012. }
  1013.  
  1014. /*---- PAGINATION -----*/
  1015.  
  1016. #page-navigation {text-align: center;font-weight:400;}
  1017.  
  1018. #page-navigation a {margin: 0 1em;}
  1019.  
  1020. .current-page {
  1021. color: {color:accent};
  1022. margin: 0 1em;
  1023. font-weight:600;
  1024. }
  1025.  
  1026. #page-navigation .iconsax {
  1027. --Iconsax-Size:16px;
  1028. --Iconsax-Color:{color:link};
  1029. vertical-align:middle;
  1030. margin-top:-1px;
  1031. }
  1032.  
  1033.  
  1034. /* tooltip */
  1035.  
  1036. .tippy-box[data-theme~='rosemary'] {
  1037. background-color:#333;
  1038. color:#fff;
  1039. font-size:11px;
  1040. letter-spacing:0.5px;
  1041. text-transform:lowercase;
  1042. z-index:99999999999999;
  1043. }
  1044.  
  1045.  
  1046. /* scroll to top */
  1047.  
  1048. .scrollToTopBtn {
  1049. background-color:transparent;
  1050. border: none;
  1051. --Iconsax-Size:16px;
  1052. --Iconsax-Color:{color:link};
  1053. cursor: pointer;
  1054. width:20px;
  1055. height:16px;
  1056. position: fixed;
  1057. bottom:45px;
  1058. right:21px;
  1059. z-index:9999999;
  1060. opacity: 0;
  1061. transition: all .5s ease
  1062. }
  1063.  
  1064. .showBtn {
  1065. opacity: 1;
  1066. }
  1067.  
  1068.  
  1069. /* credit - don't remove */
  1070.  
  1071. #soft {
  1072. position: fixed;
  1073. bottom: 15px;
  1074. right: 25px;
  1075. --Iconsax-Size:16px;
  1076. --Iconsax-Color:{color:link};
  1077. }
  1078.  
  1079. /* tumblr controls via @cyantists */
  1080.  
  1081. iframe.tmblr-iframe {
  1082. z-index:99999999999999!important;
  1083. top:2px!important;
  1084. right:0!important;
  1085. opacity:0.5;
  1086. {block:ifnotlighttumblrcontrols}
  1087. filter:invert(1) contrast(150%);
  1088. -webkit-filter:invert(1) contrast(150%);
  1089. -o-filter:invert(1) contrast(150%);
  1090. -moz-filter:invert(1) contrast(150%);
  1091. -ms-filter:invert(1) contrast(150%);
  1092. {/block:ifnotlighttumblrcontrols}
  1093. transform:scale(0565);
  1094. transform-origin:100% 0;
  1095. -webkit-transform:scale(0.65);
  1096. -webkit-transform-origin:100% 0;
  1097. -o-transform:scale(0.65);
  1098. -o-transform-origin:100% 0;
  1099. -moz-transform:scale(0.65);
  1100. -moz-transform-origin:100% 0;
  1101. -ms-transform:scale(0.65);
  1102. -ms-transform-origin:100% 0;
  1103. -moz-transition-duration: 0.3s;
  1104. -o-transition-duration: 0.3s;
  1105. -webkit-transition-duration: 0.3s;
  1106. transition-duration: 0.3s;
  1107. }
  1108.  
  1109. iframe.tmblr-iframe:hover {
  1110. opacity:0.8!important;
  1111. -moz-transition-duration: 0.3s;
  1112. -o-transition-duration: 0.3s;
  1113. -webkit-transition-duration: 0.3s;
  1114. transition-duration: 0.3s;
  1115. }
  1116.  
  1117. /*--- for small desktop/tablet screens. converts sidebar to header ---*/
  1118.  
  1119. @media only screen and (max-width: 1100px) {
  1120. main {width:90%;}
  1121.  
  1122. #sidebar {
  1123. position: relative;
  1124. margin: {text:post margin}px auto;
  1125. width: 100%;
  1126. top:50px;
  1127. left:0;
  1128. }
  1129.  
  1130. section {margin-left: 0;}
  1131. }
  1132.  
  1133. /*--- for mobile devices ---*/
  1134.  
  1135. @media only screen and (max-width: 720px) {
  1136. main, section {width: 80vw;}
  1137. }
  1138.  
  1139. /*---- END OF MEDIA QUERIES -----*/
  1140.  
  1141. {CustomCSS}
  1142.  
  1143. </style>
  1144. </head>
  1145. <body>
  1146.  
  1147. <!-- scroll to top -->
  1148. <div class="scrollToTopBtn"><i class="iconsax" icon-name="arrow-up"></i>️</div>
  1149.  
  1150.  
  1151. <!-- main = main container -->
  1152.  
  1153. <main>
  1154.  
  1155. <!---------------------------------------------------------->
  1156. <!---------------------- LEFT SIDEBAR ---------------------->
  1157. <!---------------------------------------------------------->
  1158.  
  1159. <aside id="left-sidebar">
  1160. <div id="left-wrap">
  1161.  
  1162. <div id="icon"><img src="{image:icon}"/></div>
  1163.  
  1164. <div id="sidebarimg"><img src="{image:sidebar}"/></div>
  1165.  
  1166. <div id="blogname"><a href="/">{text:title}</a></div>
  1167. <div id="handle"><i class="iconsax" icon-name="user-1-square"></i>{name}</div>
  1168.  
  1169. <div id="description">{Description}</div>
  1170.  
  1171. <nav>
  1172. <a href="/"><i class="iconsax" icon-name="{text:home icon}"></i>{text:home link}</a>
  1173. <a href="/ask"><i class="iconsax" icon-name="{text:ask icon}"></i>{text:ask link}</a>
  1174. <a href="/archive"><i class="iconsax" icon-name="{text:archive icon}"></i>{text:archive link}</a>
  1175.  
  1176. {block:iflink1}<a href="{text:link 1 url}"><i class="iconsax" icon-name="{text:link 1 icon}"></i>{text:link 1}</a>{/block:iflink1}
  1177.  
  1178. {block:iflink2}<a href="{text:link 2 url}"><i class="iconsax" icon-name="{text:link 2 icon}"></i>{text:link 2}</a>{/block:iflink2}
  1179.  
  1180. {block:iflink3}<a href="{text:link 3 url}"><i class="iconsax" icon-name="{text:link 3 icon}"></i>{text:link 3}</a>{/block:iflink3}
  1181.  
  1182. {block:iflink4}<a href="{text:link 4 url}"><i class="iconsax" icon-name="{text:link 4 icon}"></i>{text:link 4}</a>{/block:iflink4}
  1183.  
  1184. {block:iflink5}<a href="{text:link 5 url}"><i class="iconsax" icon-name="{text:link 5 icon}"></i>{text:link 5}</a>{/block:iflink5}
  1185. </nav>
  1186.  
  1187. <div class="search-box">
  1188. <form class="search" action="javascript:return false">
  1189. <input type="text" class="query" placeholder="looking for something?"><i class="iconsax" icon-name="search-normal-2"></i></form>
  1190. </div>
  1191.  
  1192. </div>
  1193. </aside>
  1194.  
  1195. <!---------------------------------------------------------->
  1196. <!---------------------------------------------------------->
  1197. <!---------------------------------------------------------->
  1198.  
  1199. <section><!-- post container -->
  1200.  
  1201. {block:TagPage}
  1202. <article class="tagday-page">
  1203. Viewing posts filed under <span class="tag-day">#{Tag}</span>
  1204. </article>
  1205. {/block:TagPage}
  1206.  
  1207. {block:DayPage}
  1208. <article class="tagday-page">
  1209. Viewing posts made on <span class="tag-day">{Month} {DayOfMonth}, {Year}</span>
  1210. </article>
  1211. {/block:DayPage}
  1212.  
  1213. <!----- POST TYPES ----->
  1214.  
  1215. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1216. <article class="posts" id="{PostID}" post-type="{PostType}">
  1217.  
  1218. {block:Text}
  1219. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1220. {block:NotReblog}
  1221. <li class="caption original-caption text-caption">
  1222. <div class="caption-text">{Body}</div>
  1223. </li>
  1224. {/block:NotReblog}
  1225. {block:RebloggedFrom}
  1226. <div class="reblog-wrap">
  1227. {block:Reblogs}
  1228. <li class="caption text-caption">
  1229. <img src="{PortraitURL-64}" class="user-icon">
  1230. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1231. <div class="caption-text">{Body}</div>
  1232. </li>
  1233. {/block:Reblogs}
  1234. </div>
  1235. {/block:RebloggedFrom}
  1236. {/block:Text}
  1237.  
  1238. {block:Link}
  1239. <a href="{URL}" class="link-wrap">
  1240. {block:Thumbnail}<div class="linkwrap-image"><img src="{Thumbnail-HighRes}"></div>{/block:Thumbnail}
  1241. <div class="link">
  1242. <div class="title">{Name}</div>
  1243. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1244. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1245. </div>
  1246. </a>
  1247. {block:Description}
  1248. {block:NotReblog}
  1249. <li class="caption original-caption">
  1250. <div class="caption-text">{Description}</div>
  1251. </li>
  1252. {/block:NotReblog}
  1253. {/block:Description}
  1254. {block:RebloggedFrom}
  1255. <div class="reblog-wrap">
  1256. {block:Reblogs}
  1257. <li class="caption">
  1258. <img src="{PortraitURL-64}" class="user-icon">
  1259. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1260. <div class="caption-text">{Body}</div>
  1261. </li>
  1262. {/block:Reblogs}
  1263. </div>
  1264. {/block:RebloggedFrom}
  1265. {/block:Link}
  1266.  
  1267. {block:Photo}
  1268. <div class="photo">
  1269. {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}
  1270. </div>
  1271. {block:Caption}
  1272. {block:NotReblog}
  1273. <li class="caption original-caption">
  1274. <div class="caption-text">{Caption}</div>
  1275. </li>
  1276. {/block:NotReblog}
  1277. {block:RebloggedFrom}
  1278. <div class="reblog-wrap">
  1279. {block:Reblogs}
  1280. <li class="caption">
  1281. <img src="{PortraitURL-64}" class="user-icon">
  1282. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1283. <div class="caption-text">{Body}</div>
  1284. </li>
  1285. {/block:Reblogs}
  1286. </div>
  1287. {/block:RebloggedFrom}
  1288. {/block:Caption}
  1289. {/block:Photo}
  1290.  
  1291. {block:Photoset}
  1292. <div class="border-radius"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div></div>
  1293. {block:Caption}
  1294. {block:NotReblog}
  1295. <li class="caption original-caption">
  1296. <div class="caption-text">{Caption}</div>
  1297. </li>
  1298. {/block:NotReblog}
  1299. {block:RebloggedFrom}
  1300. <div class="reblog-wrap">
  1301. {block:Reblogs}
  1302. <li class="caption">
  1303. <img src="{PortraitURL-64}" class="user-icon">
  1304. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1305. <div class="caption-text">{Body}</div>
  1306. </li>
  1307. {/block:Reblogs}
  1308. </div>
  1309. {/block:RebloggedFrom}
  1310. {/block:Caption}
  1311. {/block:Photoset}
  1312.  
  1313. {block:Video}
  1314. <div class="video">{Video-700}</div>
  1315. {block:Caption}
  1316. {block:NotReblog}
  1317. <li class="caption original-caption">
  1318. <div class="caption-text">{Caption}</div>
  1319. </li>
  1320. {/block:NotReblog}
  1321. {block:RebloggedFrom}
  1322. <div class="reblog-wrap">
  1323. {block:Reblogs}
  1324. <li class="caption">
  1325. <img src="{PortraitURL-64}" class="user-icon">
  1326. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1327. <div class="caption-text">{Body}</div>
  1328. </li>
  1329. {/block:Reblogs}
  1330. </div>
  1331. {/block:RebloggedFrom}
  1332. {/block:Caption}
  1333. {/block:Video}
  1334.  
  1335. {block:Quote}
  1336. <div class="caption">
  1337. <div class="quote"><i class="iconsax right" icon-name="quote-start"></i>{Quote}<i class="iconsax left" icon-name="quote-end"></i></div>
  1338. {block:Source}<div class="source"><i class="iconsax" icon-name="minus"></i>{Source}</div>{/block:Source}
  1339. </div>
  1340. {/block:Quote}
  1341.  
  1342. {block:Chat}
  1343. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1344. <ul class="chat">{block:Lines}
  1345. <li>
  1346. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1347. <div class="chattxt">{Line}</div>
  1348. </li>
  1349. {/block:Lines}</ul>
  1350. {/block:Chat}
  1351.  
  1352. {block:Audio}
  1353. <div class="audio">
  1354. {AudioEmbed}
  1355. </div>
  1356. {block:Caption}
  1357. {block:NotReblog}
  1358. <li class="caption original-caption">
  1359. <div class="caption-text">{Caption}</div>
  1360. </li>
  1361. {/block:NotReblog}
  1362. {block:RebloggedFrom}
  1363. <div class="reblog-wrap">
  1364. {block:Reblogs}
  1365. <li class="caption">
  1366. <img src="{PortraitURL-64}" class="user-icon">
  1367. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1368. <div class="caption-text">{Body}</div>
  1369. </li>
  1370. {/block:Reblogs}
  1371. </div>
  1372. {/block:RebloggedFrom}
  1373. {/block:Caption}
  1374. {/block:Audio}
  1375.  
  1376. {block:Answer}
  1377. <div class="ask-wrap">
  1378. <div class="askerimg">
  1379. <img src="{AskerPortraitURL-64}"/>
  1380. </div>
  1381.  
  1382. <div class="question">
  1383. <div class="asker">{asker}&nbsp;said:&nbsp;</div>
  1384.  
  1385. {Question}
  1386. </div>
  1387. </div>
  1388. {block:Answerer}
  1389. <li class="caption">
  1390. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1391. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer} answered:</a></div>
  1392. <div class="caption-text answer">{Answer}</div>
  1393. </li>
  1394. {/block:Answerer}
  1395. {block:NotReblog}
  1396. <li class="caption original-caption">
  1397. <div class="caption-text answer">{Replies}</div>
  1398. </li>
  1399. {/block:NotReblog}
  1400. {block:RebloggedFrom}
  1401. <div class="reblog-wrap">
  1402. {block:Reblogs}
  1403. <li class="caption">
  1404. <img src="{PortraitURL-64}" class="user-icon">
  1405. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer} answered:</a></div>
  1406. <div class="caption-text">{Body}</div>
  1407. </li>
  1408. {/block:Reblogs}
  1409. </div>
  1410. {/block:RebloggedFrom}
  1411. {/block:Answer}
  1412.  
  1413. {block:Date}
  1414. <div class="info">
  1415. <div class="info-left">
  1416. {block:PinnedPostLabel}
  1417. <div class="pinned-post">
  1418. <a href="{Permalink}" class="pinned-post"><i class="iconsax" icon-name="info-badge"></i> pinned</a>
  1419. </div>{/block:PinnedPostLabel}
  1420.  
  1421. <i class="iconsax" icon-name="calendar-1"></i><a href="{Permalink}" title="{timeago}">{ShortMonth} {DayofMonth}</a>
  1422.  
  1423. <i class="iconsax" icon-name="message-dots-favorite"></i><a class="notecount" href="{Permalink}">{NoteCountWithLabel}</a>
  1424. </div>
  1425.  
  1426. <div class="post-controls">
  1427. <a class="likeb" href="#" title="like">{LikeButton}<span class="actual-button"><i class="ph-heart"></i></span></a>
  1428.  
  1429. <a href="{ReblogURL}" target="_blank" title="reblog"><i class="ph-arrow-clockwise"></i></a>
  1430. </div>
  1431. </div>
  1432.  
  1433. {block:HasTags}
  1434. <div class="tags">
  1435. <i class="iconsax" icon-name="hashtag"></i>
  1436.  
  1437. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1438. </div>
  1439. {/block:HasTags}
  1440.  
  1441. {block:PermalinkPage}
  1442. <div class="source-info">
  1443. {block:RebloggedFrom}
  1444. <li><b>reblogged via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
  1445. <li><b>originally from:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a></li>
  1446. {/block:RebloggedFrom}
  1447. {block:ContentSource}<li>{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
  1448. </div>
  1449. {/block:PermalinkPage}
  1450. {/block:Date}
  1451.  
  1452. {block:PermalinkPage}{block:Date}
  1453. {block:NoteCount}{block:PostNotes}
  1454. <div class="notes">
  1455. {PostNotes-64}
  1456. </div>
  1457. {/block:PostNotes}{/block:NoteCount}
  1458. {/block:Date}{/block:PermalinkPage}
  1459.  
  1460. </article>
  1461. {/block:Posts}
  1462.  
  1463. <!-- end of posts container -->
  1464.  
  1465. <!----- PAGINATION ----->
  1466.  
  1467. {block:Pagination}
  1468. <article id="page-navigation">
  1469. {block:PreviousPage}<a href="{PreviousPage}" title="previous page"><i class="iconsax" icon-name="arrow-left"></i></a>{/block:PreviousPage}
  1470. {block:JumpPagination length="5"}
  1471. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1472. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1473. {/block:JumpPagination}
  1474. {block:NextPage}<a href="{NextPage}" title="next page"><i class="iconsax" icon-name="arrow-right"></i></a>{/block:NextPage}
  1475. </article>
  1476. {/block:Pagination}
  1477.  
  1478. </section>
  1479.  
  1480. <!----------------------------------------------------------->
  1481. <!--------------- RIGHT SIDEBAR CUSTOMIZATION --------------->
  1482. <!----------------------------------------------------------->
  1483.  
  1484. <aside id="right-sidebar">
  1485. <div id="right-wrap">
  1486.  
  1487. <!-- updates - change icons to whatever you like! -->
  1488.  
  1489. <div id="updates">
  1490. <span><i class="iconsax" icon-name="cloud-rain"></i>waiting for sweater weather</span>
  1491. <span><i class="iconsax" icon-name="book-open"></i>experiencing book hangover</span>
  1492. <span><i class="iconsax" icon-name="monitor"></i>house of the dragon</span>
  1493. <span><i class="iconsax" icon-name="music"></i>midnights (3am songs)</span>
  1494. <span><i class="iconsax" icon-name="game-controller"></i>animal crossing new horizons</span>
  1495. </div>
  1496.  
  1497. <!-- project -->
  1498.  
  1499. <div id="projects">
  1500. <div id="pro-image">
  1501. <img src="{image:project image}"/>
  1502. </div>
  1503. <div id="pro-wrap">
  1504. <div id="pro-top">
  1505. <div id="pro-title">project name
  1506. </div>
  1507.  
  1508. <!-- magic wand icon -->
  1509. <i class="iconsax" icon-name="magic-wand"></i>
  1510. </div>
  1511.  
  1512. <!-- project description -->
  1513. <div id="pro-bottom">
  1514. <span><b>genre:</b>romance</span>
  1515. <span><b>started:</b>august 2020</span>
  1516. <span><b>status:</b>first draft</span>
  1517.  
  1518. <!-- project bar - adject the percentage -->
  1519. <div class="meter">
  1520. <span style="width: 75%"></span>
  1521. </div>
  1522.  
  1523. <!-- project links -->
  1524. <div id="pro-buttons">
  1525. <a href="/">pinterest</a>
  1526. <a href="/">sideblog</a>
  1527. </div>
  1528. </div>
  1529. </div>
  1530. </div>
  1531.  
  1532. <!-- site info -->
  1533.  
  1534. <div id="stats">
  1535. <span><i class="iconsax" icon-name="chevron-circle-right"></i><b>about:</b>writeblr</span>
  1536. <span><i class="iconsax" icon-name="chevron-circle-right"></i><b>est:</b>2019</span>
  1537. <span><i class="iconsax" icon-name="chevron-circle-right"></i><b>online:</b>
  1538. <i>paste counter code between these i tags</i></span>
  1539. <span><i class="iconsax" icon-name="chevron-circle-right"></i><b>total:</b>
  1540. <i>paste counter code between these i tags</i></span>
  1541. </div>
  1542.  
  1543. </div>
  1544. </aside>
  1545.  
  1546. <!----------------------------------------------------------->
  1547. <!----------------------------------------------------------->
  1548. <!----------------------------------------------------------->
  1549.  
  1550. </main>
  1551. <!--- end of main container - don't edit after this point --->
  1552.  
  1553. <a href="https://softcodes.tumblr.com" title="theme by @softcodes" id="soft"><i class="iconsax" icon-name="heart"></i></a>
  1554.  
  1555. <!-- scripts -->
  1556. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  1557. <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  1558. <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
  1559. <script src="https://unpkg.com/@popperjs/core@2"></script>
  1560. <script src="https://unpkg.com/tippy.js@6"></script>
  1561. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1562. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1563. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1564.  
  1565.  
  1566. <script>
  1567. $(document).ready(function(){
  1568. $('.photo-slideshow').pxuPhotoset({
  1569. lightbox: true,
  1570. highRes: true,
  1571. gutter: '{select:photoset gutter}',
  1572. borderRadius: '0px',
  1573. photoset: '.photo-slideshow',
  1574. photoWrap: '.photo-data',
  1575. photo: '.pxu-photo'
  1576. });
  1577.  
  1578. }); </script>
  1579.  
  1580. <script>
  1581. var $container = $('.posts');
  1582. $container.find('.notecount').each(function(){
  1583. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1584. if (n > 999) {
  1585. n = Math.floor(n / 100) / 10;
  1586. $(this).text(n + 'k notes');
  1587. }
  1588. });
  1589. </script>
  1590.  
  1591. <script>
  1592. var scrollToTopBtn = document.querySelector(".scrollToTopBtn")
  1593. var rootElement = document.documentElement
  1594.  
  1595. function handleScroll() {
  1596. var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
  1597. if ((rootElement.scrollTop / scrollTotal ) > 0.05) {
  1598. scrollToTopBtn.classList.add("showBtn")
  1599. } else {
  1600. scrollToTopBtn.classList.remove("showBtn")
  1601. }
  1602. }
  1603.  
  1604. function scrollToTop() {
  1605. rootElement.scrollTo({
  1606. top: 0,
  1607. behavior: "smooth"
  1608. })
  1609. }
  1610. scrollToTopBtn.addEventListener("click", scrollToTop)
  1611. document.addEventListener("scroll", handleScroll)
  1612. </script>
  1613.  
  1614. <script>
  1615. tippy('[title]', {
  1616. role: 'tooltip',
  1617. theme: 'rosemary',
  1618. arrow: true,
  1619. placement: 'bottom',
  1620.  
  1621. content(reference) {
  1622. const title = reference.getAttribute('title');
  1623. reference.removeAttribute('title');
  1624. return title;
  1625. },
  1626. });
  1627. </script>
  1628.  
  1629. <script>
  1630. $(document).ready(function() {
  1631. // audio player
  1632. var $audio = $('iframe.tumblr_audio_player');
  1633. $audio.load(function() {
  1634. $(this).contents().find('head').append('<style type="text/css">' +
  1635. '.audio-player { background: {color:light accent}; color:{color:headings}!important; }' +
  1636. '.audio-player .audio-info .track-artist { color:{color:headings}!important; }' +
  1637. '</style>');
  1638. });
  1639. });
  1640. </script>
  1641.  
  1642. <script>
  1643. $(document).ready(function(){
  1644. $('.search').submit(function(event){
  1645. var value = $('input:first').val();
  1646. location.replace('http://{Name}.tumblr.com/tagged/' + value);
  1647. });
  1648. });
  1649. </script>
  1650.  
  1651. </body>
  1652. </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!