API tools faq
paste
Advertisement
usergiu

theme 06

usergiu
May 24th, 2022
2,325
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 52.28 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.  
  14. theme 06 by giulia (@orla-mcool)
  15.  
  16. CREDIT:
  17. base code by seyche
  18. pixel union photosets by shythemes
  19. NPF images fix by glenthemes
  20. day/night mode by egg.design
  21. full page menu by mistletoe
  22. tippy.js tooltips by atomiks
  23. scrollbar style by shythemes
  24. tumblr controls by cyantists
  25. smooth scrolling by zachary fury
  26. lineawesome icons
  27. google fonts
  28.  
  29. --->
  30.  
  31. <!----- VARIABLES AND OPTIONS ----->
  32.  
  33. <meta name="text:Desktop Description" content="desktop description here"/>
  34. <meta name="text:Tracking Tag" content=""/>
  35.  
  36. <meta name="image:Sidebar" content=""/>
  37.  
  38. <meta name="color:Gradient 1" content="#313131"/>
  39. <meta name="color:Gradient 2" content="#71d3d7"/>
  40. <meta name="color:Background" content="#ffffff"/>
  41. <meta name="color:Text" content="#070707"/>
  42. <meta name="color:Link" content="#313131"/>
  43. <meta name="color:Accent" content="#71d3d7"/>
  44. <meta name="color:Captions" content="#dcdcdc"/>
  45. <meta name="color:Blockquote" content="#cdcdcd"/>
  46.  
  47. <meta name="color:Night Gradient 1" content="#313131"/>
  48. <meta name="color:Night Gradient 2" content="#71d3d7"/>
  49. <meta name="color:Night Background" content="#121212"/>
  50. <meta name="color:Night Text" content="#ffffff"/>
  51. <meta name="color:Night Link" content="#313131"/>
  52. <meta name="color:Night Accent" content="#71d3d7"/>
  53. <meta name="color:Night Captions" content="#1d1d1d"/>
  54. <meta name="color:Night Blockquote" content="#3d3d3d"/>
  55.  
  56. <meta name="if:Hover Tags" content="1" />
  57. <meta name="if:DayNight Mode" content="1" />
  58. <meta name="if:Rounded Corners" content="1" />
  59. <meta name="if:Tracking Tag" content="1" />
  60. <meta name="if:About Tab" content="1" />
  61. <meta name="if:Search Box" content="0" />
  62. <meta name="if:Glow" content="0" />
  63.  
  64. <meta name="select:Font Family" content="Work Sans" title="Work Sans"/>
  65. <meta name="select:Font Family" content="Mulish" title="Mulish"/>
  66. <meta name="select:Font Family" content="'Karla'" title="Karla"/>
  67. <meta name="select:Font Family" content="'ABeeZee'" title="ABeezee"/>
  68. <meta name="select:Font Family" content="'Sarabun'" title="Sarabun"/>
  69. <meta name="select:Font Family" content="'Inter'" title="Inter"/>
  70. <meta name="select:Font Family" content="'Libre Franklin'" title="Libre Franklin"/>
  71. <meta name="select:Font Family" content="'Roboto'" title="Roboto"/>
  72.  
  73. <meta name="select:Font Size" content="12px" title="12px"/>
  74. <meta name="select:Font Size" content="13px" title="13px"/>
  75. <meta name="select:Font Size" content="14px" title="14px"/>
  76. <meta name="select:Font Size" content="15px" title="15px"/>
  77.  
  78. <meta name="select:Post Width" content="400px" title="400px"/>
  79. <meta name="select:Post Width" content="500px" title="500px"/>
  80. <meta name="select:Post Width" content="540px" title="540px"/>
  81.  
  82. <meta name="select:Sidebar Width" content="250px" title="250px"/>
  83. <meta name="select:Sidebar Width" content="268px" title="268px"/>
  84. <meta name="select:Sidebar Width" content="300px" title="300px"/>
  85.  
  86. <meta name="text:Post Margin" content="100"/>
  87.  
  88. <meta name="text:Home Link icon" content=""/>
  89. <meta name="text:Ask Link icon" content=""/>
  90. <meta name="text:Link 1" content=""/>
  91. <meta name="text:Link 1 URL" content=""/>
  92. <meta name="text:Link 1 icon" content=""/>
  93. <meta name="text:Link 2" content=""/>
  94. <meta name="text:Link 2 URL" content=""/>
  95. <meta name="text:Link 2 icon" content=""/>
  96. <meta name="text:Link 3" content=""/>
  97. <meta name="text:Link 3 URL" content=""/>
  98. <meta name="text:Link 3 icon" content=""/>
  99. <meta name="text:Link 4" content=""/>
  100. <meta name="text:Link 4 URL" content=""/>
  101. <meta name="text:Link 4 icon" content=""/>
  102.  
  103. <meta name="text:Name" content=""/>
  104. <meta name="text:Age" content=""/>
  105. <meta name="text:Location" content=""/>
  106. <meta name="text:Pronouns" content=""/>
  107. <meta name="text:Sexuality" content=""/>
  108. <meta name="text:Sign" content=""/>
  109.  
  110. <meta name="text:Likes 1" content=""/>
  111. <meta name="text:Likes 2" content=""/>
  112. <meta name="text:Likes 3" content=""/>
  113. <meta name="text:Likes 4" content=""/>
  114. <meta name="text:Likes 5" content=""/>
  115. <meta name="text:Likes 6" content=""/>
  116.  
  117. <meta name="text:About Link 1" content=""/>
  118. <meta name="text:About Link 1 URL" content=""/>
  119. <meta name="text:About Link 2" content=""/>
  120. <meta name="text:About Link 2 URL" content=""/>
  121. <meta name="text:About Link 3" content=""/>
  122. <meta name="text:About Link 3 URL" content=""/>
  123. <meta name="text:About Link 4" content=""/>
  124. <meta name="text:About Link 4 URL" content=""/>
  125.  
  126.  
  127. <!----- GOOGLE FONTS ----->
  128.  
  129. <link rel="preconnect" href="https://fonts.googleapis.com">
  130. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  131. <link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Fira+Sans:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;700&family=Karla:ital,wght@0,400;0,700;1,400&family=Libre+Franklin:ital,wght@0,400;0,700;1,400&family=Roboto:ital,wght@0,400;0,700;1,400&family=Sarabun:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  132. <link rel="preconnect" href="https://fonts.googleapis.com">
  133. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  134. <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,700;1,400&family=Overpass:ital,wght@0,400;0,700;1,400&family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  135.  
  136. <link rel="preconnect" href="https://fonts.googleapis.com">
  137. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  138. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
  139.  
  140. <!----- ICONS ----->
  141.  
  142. <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  143.  
  144. <!----- SCRIPTS ----->
  145.  
  146. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  147.  
  148. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  149.  
  150. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>
  151.  
  152. <!--
  153. NPF images fix v3.0 by @glenthemes [2021]
  154. 💌 git.io/JRBt7
  155. --->
  156. <script src="//npf-images-v3.github.io/script.js"></script>
  157. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  158. <style tmblr-npf>
  159. :root {
  160. --NPF-Caption-Spacing:1em;
  161. --NPF-Image-Spacing: 4px;
  162. }
  163. </style>
  164.  
  165. <!----- CSS ----->
  166.  
  167. <style type="text/css">
  168.  
  169. /*------ TIPPY TOOLTIPS -----*/
  170.  
  171. .tippy-tooltip.custom-theme {
  172. background-color: {color:link};
  173. color: {color:background};
  174. font-family: {select:font family};
  175. font-size: {select:font size};
  176. text-align:center;
  177. text-transform:uppercase;
  178. letter-spacing:0.07em;
  179. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  180. }
  181.  
  182. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  183. fill: {color:link};
  184. }
  185.  
  186. /*----- SCROLLBAR -----*/
  187.  
  188. ::-webkit-scrollbar {
  189. width:10px;
  190. height:10px;
  191. background-color:{color:background};
  192. }
  193. ::-webkit-scrollbar-track {
  194. border:1px solid {color:captions};
  195. background-color:{color:background};
  196. }
  197. ::-webkit-scrollbar-thumb {
  198. background-color:{color:accent};
  199. min-height:100px;
  200. min-width:100px;
  201. {block:IfRoundedCorners}border-radius:20px{/block:IfRoundedCorners};
  202. }
  203.  
  204. /*----- SELECTION -----*/
  205.  
  206. ::-moz-selection {
  207. background:{color:accent};
  208. color:{color:background}
  209. }
  210.  
  211. ::selection {
  212. background:{color:accent};
  213. color:{color:background}
  214. }
  215.  
  216. /*----- BASIC STYLING -----*/
  217.  
  218. body {
  219. font-family: {select:font family};
  220. font-size: {select:font size};
  221. color: {color:text};
  222. background-color: {color:background};
  223. line-height: 170%;
  224. word-wrap: break-word;
  225. letter-spacing: 0.05em;
  226. margin: 0;
  227. padding: 0;
  228. }
  229.  
  230. a {
  231. color: {color:link};
  232. text-decoration: none;
  233. -webkit-transition: all 0.3s;
  234. -moz-transition: all 0.3s;
  235. -ms-transition: all 0.3s;
  236. -o-transition: all 0.3s;
  237. transition: all 0.3s;
  238. }
  239.  
  240. a:hover {
  241. color: {color:accent};
  242. -webkit-transition: all 0.3s;
  243. -moz-transition: all 0.3s;
  244. -ms-transition: all 0.3s;
  245. -o-transition: all 0.3s;
  246. transition: all 0.3s;
  247. }
  248.  
  249. blockquote {
  250. padding: 0 0 0 1.5em;
  251. border-left: 1px solid {color:blockquote};
  252. margin: 1.5em 0 1.5em 1.5em;
  253. }
  254.  
  255. h1, h2, h3, h4, h5, .title {
  256. letter-spacing: 0.06em;
  257. line-height: 145%;
  258. font-weight: bold;
  259. }
  260.  
  261. .title {font-size:1.4em;}
  262. h1 {font-size: 1.5em;}
  263. h2 {font-size: 1.3em;}
  264. h3 {font-size: 1.25em;}
  265. h4 {font-size: 1.1em;}
  266. h5 {font-size: 1em;}
  267.  
  268. small {font-size: 0.9em;}
  269. big {font-size: 1.1em;}
  270.  
  271. hr {
  272. height: 1px;
  273. border: none;
  274. box-shadow: none;
  275. background-color: {color:blockquote};
  276. }
  277.  
  278. pre {
  279. line-height: inherit;
  280. font-size: inherit;
  281. white-space: pre-wrap;
  282. white-space: -moz-pre-wrap;
  283. white-space: -pre-wrap;
  284. white-space: -o-pre-wrap;
  285. word-wrap: break-word;
  286. }
  287.  
  288. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  289.  
  290. /*----- HEADER -----*/
  291.  
  292. header {
  293. position: fixed;
  294. top: 0;
  295. left: 0;
  296. right: 0;
  297. width: 100%;
  298. padding: 1em;
  299. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  300. z-index: 10;
  301. }
  302.  
  303. header .blogtitle {
  304. font-family: 'Montserrat', sans-serif;
  305. text-transform:uppercase;
  306. text-align:center;
  307. font-weight:bold;
  308. font-size:1.25em;
  309. letter-spacing: 0.1em;
  310. }
  311.  
  312. header .blogtitle a {
  313. color:{color:text};
  314. }
  315.  
  316. /*----- TUMBLR CONTROLS -----*/
  317.  
  318. iframe.tmblr-iframe {
  319. z-index:99999999999999!important;
  320. top:0px!important;
  321. right:0!important;
  322. opacity:0;
  323. padding-right:38px;
  324. transform:scale(0.75);
  325. transform-origin:100% 0;
  326. -webkit-transform:scale(0.75);
  327. -webkit-transform-origin:100% 0;
  328. -o-transform:scale(0.75);
  329. -o-transform-origin:100% 0;
  330. -moz-transform:scale(0.75);
  331. -moz-transform-origin:100% 0;
  332. -ms-transform:scale(0.75);
  333. -ms-transform-origin:100% 0;}
  334.  
  335. iframe.tmblr-iframe:hover {
  336. opacity:1!important;
  337. color:{color:text};}
  338.  
  339. .hcontrols {
  340. position:fixed;
  341. top:0;
  342. right:0;
  343. z-index:999999999;
  344. }
  345.  
  346. .hcontrols svg {
  347. width:20px;
  348. height:20px;
  349. padding:0.5em;
  350. margin:5px 0;
  351. }
  352.  
  353. .hcontrols svg path {
  354. fill:{color:text};
  355. }
  356.  
  357. /*---- ABOUT ----*/
  358.  
  359. .about {
  360. position:fixed;
  361. top:5px;
  362. margin-left:0px;
  363. z-index:1001;
  364. }
  365.  
  366. .about i {
  367. font-size:20px;
  368. color:{color:text};
  369. padding:0.5em;
  370. border-radius:10px;
  371. }
  372.  
  373. #about-tab {
  374. transition: 0.4s;
  375. text-align:center;
  376. top:30px;
  377.  
  378. /*** IMPORTANT ***/
  379.  
  380. width: 0;
  381. height:100vh;
  382. position: fixed;
  383. text-align: center;
  384. background:{color:captions};
  385. top:0;
  386. left:-60px;
  387. bottom:0;
  388. overflow-x: hidden;
  389. }
  390.  
  391. .about-title {
  392. font-family: 'Montserrat', sans-serif;
  393. text-transform:uppercase;
  394. text-align:right;
  395. font-weight:bold;
  396. font-size:1.25em;
  397. letter-spacing: 0.1em;
  398. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  399. padding:1em;
  400. }
  401.  
  402. .about-title i {
  403. float:right;
  404. font-size:20px;
  405. color:{color:text};
  406. padding:0.5em;
  407. border-radius:10px;
  408. margin-top:-10px;
  409. }
  410.  
  411. .about-title i:hover {
  412. color:{color:accent};
  413. }
  414.  
  415. .about-subtitle {
  416. font-family: 'Montserrat', sans-serif;
  417. text-align:center;
  418. font-size:1.1em;
  419. text-transform:uppercase;
  420. letter-spacing:0.09em;
  421. margin-top:10px;
  422. color:{color:accent};
  423. }
  424.  
  425. .about-box {
  426. border-bottom:1px solid {color:blockquote};
  427. }
  428.  
  429. .about-box:last-of-type {
  430. border-bottom:0px;
  431. }
  432.  
  433. .about-info {
  434. padding:1em;
  435. }
  436.  
  437. .about-info i {
  438. margin:0.3em;
  439. font-size:20px;
  440. padding:0.3em;
  441. color:{color:link};
  442. background:{color:background};
  443. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  444. {block:IfRoundedCorners}border-radius:10px;{/block:IfRoundedCorners}
  445. }
  446.  
  447. .about-info li {
  448. display:inline-block;
  449. width:49%;
  450. text-align:left;
  451. }
  452.  
  453. .about-likes {
  454. padding:20px;
  455. }
  456.  
  457. .about-likes i {
  458. margin:0.3em;
  459. font-size:20px;
  460. padding:0.3em;
  461. color:{color:link};
  462. background:{color:background};
  463. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  464. {block:IfRoundedCorners}border-radius:10px;{/block:IfRoundedCorners}
  465. }
  466.  
  467. .about-likes li {
  468. display:inline-block;
  469. width:49%;
  470. text-align:left;
  471. }
  472.  
  473. .about-nav {
  474. padding:20px;
  475. }
  476.  
  477. .about-nav i {
  478. margin:0.3em;
  479. font-size:20px;
  480. padding:0.3em;
  481. color:{color:link};
  482. background:{color:background};
  483. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  484. {block:IfRoundedCorners}border-radius:10px;{/block:IfRoundedCorners}
  485. }
  486.  
  487. .about-nav li {
  488. display:inline-block;
  489. width:49%;
  490. text-align:left;
  491. }
  492.  
  493. .about-nav a {
  494. color:{color:link};
  495. border-bottom: 2px solid {color:blockquote};
  496. }
  497.  
  498. .about-nav a:hover {
  499. color:{color:accent};
  500. border-bottom: 2px solid {color:accent};
  501. }
  502.  
  503. /*----- SIDEBAR -----*/
  504.  
  505. .trackingtag {
  506. letter-spacing: 0.06em;
  507. font-size:1.3em;
  508. font-weight: bold;
  509. padding: 1em;
  510. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  511. {block:ifRoundedCorners}border-radius: 10px 10px 0 0;{/block:ifRoundedCorners}
  512. }
  513.  
  514. .trackingtag a {
  515. color:{color:text};
  516. {block:IfGlow}text-shadow:0 0 15px;{/block:IfGlow}
  517. }
  518.  
  519. #sidebar {
  520. width: {select:sidebar width};
  521. top: {text:post margin}px auto;
  522. text-align: center;
  523. position: fixed;
  524. margin-left: calc({select:post width} + 125px);
  525. }
  526.  
  527. {block:ifSidebarImage}
  528. #side-img {
  529. {block:IfNotTrackingTag}{block:IfRoundedCorners}
  530. border-radius: 10px 10px 0 0;
  531. {/block:IfRoundedCorners}{/block:IfNotTrackingTag}
  532. }
  533. {/block:ifSidebarImage}
  534.  
  535. #description {
  536. background-color: {color:captions};
  537. padding: 1em;
  538. }
  539.  
  540. #description a {
  541. border-bottom: 2px solid {color:blockquote};
  542. }
  543.  
  544. #description a:hover{
  545. letter-spacing: 0.05em;
  546. border-bottom: 2px solid {color:link};
  547. color:{color:link};
  548. }
  549.  
  550. nav {
  551. padding: 1em;
  552. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});;
  553. {block:ifRoundedCorners}border-radius: 0 0 10px 10px;{/block:ifRoundedCorners}
  554. white-space: nowrap;
  555. }
  556.  
  557. nav a {
  558. display:inline-block;
  559. margin: auto 0.3em;
  560. font-size: 21px;
  561. color: {color:text};
  562. {block:ifGlow}text-shadow: 0 0 10px;{/block:ifGlow}
  563. }
  564.  
  565. /*----- SEARCH BOX -----*/
  566.  
  567. .search-box {
  568. margin-top:1em;
  569. }
  570.  
  571. .sfm input {
  572. font-family: {select:font family};
  573. color: {color:text};
  574. background-color: {color:captions};
  575. border: 0px;
  576. padding: 0.5em;
  577. width: calc({select:sidebar width} - 50px);
  578. {block:ifRoundedCorners}border-radius: 10px;{/block:ifRoundedCorners}}
  579. #sb {
  580. width:15px;
  581. vertical-align: top;}
  582.  
  583. /*----- POSTS -----*/
  584.  
  585. main {
  586. position: relative;
  587. width: calc(250px + {select:post width} + 150px);
  588. margin: auto;
  589. }
  590.  
  591. section {
  592. position: relative;
  593. width: {select:post width};
  594. margin: 125px 0;
  595. }
  596.  
  597. article {
  598. width: 100%;
  599. position: relative;
  600. margin: {text:post margin}px auto;
  601. border-radius:10px;
  602. }
  603.  
  604. .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%;}
  605.  
  606. /*----- CAPTIONS -----*/
  607.  
  608. .caption {
  609. margin-top: 0px;
  610. margin-bottom: 0px;
  611. padding:1em;
  612. list-style-type: none;
  613. background-color:{color:captions};
  614. border-bottom: 1px solid {color:blockquote};
  615. }
  616.  
  617. .caption a {
  618. color:{color:link};
  619. border-bottom:2px solid {color:blockquote};
  620. }
  621.  
  622. .caption a:hover {
  623. color:{color:link};
  624. border-bottom:2px solid {color:link};
  625. }
  626.  
  627. .text-caption:first-of-type {
  628. margin-top: 0;
  629. {block:ifRoundedCorners}border-radius: 10px 10px 0 0;{/block:ifRoundedCorners}
  630. }
  631.  
  632. .user-icon, .ask-icon {
  633. display: inline-block;
  634. vertical-align: middle;
  635. width: 2em;
  636. height: 2em;
  637. border-radius:100%;
  638. }
  639.  
  640. .user-icon:hover, .ask-icon:hover {
  641. transform:rotate(360deg);
  642. -webkit-transition: all 0.4s;
  643. -moz-transition: all 0.4s;
  644. -ms-transition: all 0.4s;
  645. -o-transition: all 0.4s;
  646. transition: all 0.4s;
  647. }
  648.  
  649. .username {
  650. display: inline-block;
  651. vertical-align: middle;
  652. margin-left:1em;
  653. font-weight: bold;
  654. }
  655.  
  656. .deactive::after {
  657. content: '(deactivated)';
  658. margin-left: 1em;
  659. opacity: 0.75;
  660. color: {color:text};
  661. }
  662.  
  663. p.tmblr-attribution {margin-top: 1em !important;}
  664.  
  665. /*----- TEXT -----*/
  666.  
  667. h1.post-title {
  668. margin-top: 0;
  669. margin-bottom:0.1em;
  670. padding:1em;
  671. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  672. {block:ifRoundedCorners}border-radius: 10px;{/block:ifRoundedCorners}
  673. }
  674.  
  675. h1.post-title a {
  676. color:{color:text};
  677. }
  678.  
  679. /*----- LINK -----*/
  680.  
  681. a.link-wrap {
  682. display: block;
  683. padding: 1.5em;
  684. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  685. {block:ifRoundedCorners}border-radius: 10px 10px 0 0;{/block:ifRoundedCorners}
  686. }
  687.  
  688. .link {
  689. padding: 0;
  690. }
  691.  
  692. .link-host, .link-txt {
  693. margin-top: 1.5em;
  694. }
  695.  
  696. .npf-link-block {
  697. margin-top: 1.5em;
  698. background-color: inherit;
  699. color: inherit;
  700. }
  701.  
  702. /*----- PHOTO -----*/
  703.  
  704. img {
  705. margin: 0;
  706. display: block;
  707. height: auto;
  708. max-width: 100%;
  709. }
  710.  
  711. .photo img {
  712. width: 100%;
  713. {block:ifRoundedCorners}border-radius: 10px 10px 0 0; {/block:ifRoundedCorners}
  714. }
  715.  
  716. .vignette, #vignette {
  717. opacity: 0;
  718. }
  719.  
  720. .tmblr-lightbox, #tumblr_lightbox {
  721. background-color: rgba(130, 130, 130, 0.75) !important;
  722. }
  723.  
  724. .lightbox-image, #tumblr_lightbox img {
  725. box-shadow: none !important;
  726. border-radius: 0 !important;
  727. max-width: none;
  728. }
  729.  
  730. #tumblr_lightbox_caption, .lightbox-caption {
  731. color: #fff !important;
  732. font-family: inherit;
  733. margin-top: 1em !important;
  734. }
  735.  
  736. /*----- PHOTOSET -----*/
  737.  
  738. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  739. margin-left: 0 !important;
  740. margin-right: 0 !important;
  741. }
  742.  
  743. .photo-slideshow, .npf_photoset {
  744. {block:ifRoundedCorners}border-radius: 10px 10px 0 0;{/block:ifRoundedCorners}
  745. overflow: hidden;
  746. }
  747.  
  748. /*----- QUOTE -----*/
  749.  
  750. .quote {
  751. line-height: 160%;
  752. font-size: 1.3em;
  753. font-weight: bold;
  754. padding:1.5em;
  755. background:{color:captions};
  756. {block:ifRoundedCorners}border-radius: 10px;{/block:ifRoundedCorners}
  757. }
  758.  
  759. .quotearrow {
  760. width: 0;
  761. margin-left:calc({select:post width} - 100px);
  762. border-top: 1.4em solid {color:captions};
  763. border-left:1.4em solid transparent;
  764. border-right:1.4em solid transparent;
  765. }
  766.  
  767. .quote p:first-of-type {margin-top: 0;}
  768. .quote p:last-of-type {margin-bottom: 0;}
  769.  
  770. .quotesource {
  771. padding:1.5em;
  772. text-align:right;
  773. }
  774.  
  775. /*----- CHAT -----*/
  776.  
  777. .chat {
  778. padding: 1.5em;
  779. margin: 0;
  780. background:{color:captions};
  781. {block:ifRoundedCorners}border-radius: 10px 10px 0 0;{/block:ifRoundedCorners}
  782. }
  783.  
  784. .chat li {
  785. list-style-type: none;
  786. margin-top: 1em;
  787. }
  788.  
  789. .chat li:first-of-type {margin-top: 0;}
  790. .chatter {font-weight: bold;}
  791.  
  792. p.npf_chat, p.npf_chat b {font-family: inherit;}
  793.  
  794. /*----- ANSWER -----*/
  795.  
  796. .ask-wrap .asking {
  797. display: inline-block;
  798. font-weight: bold;
  799. margin-left:1em;
  800. }
  801.  
  802. .question {
  803. margin-bottom: 1em;
  804. margin-left:3em;
  805. padding:1em;
  806. background:{color:captions};
  807. {block:ifRoundedCorners}border-radius: 10px;{/block:ifRoundedCorners}
  808. }
  809.  
  810. .questionarrow {
  811. width: 0;
  812. margin-left:6em;
  813. border-bottom: 1em solid {color:captions};
  814. border-left:1em solid transparent;
  815. border-right:1em solid transparent;
  816. }
  817.  
  818. .answer {
  819. margin-top: 0px;
  820. margin-bottom: 0px;
  821. padding:1em;
  822. list-style-type: none;
  823. background-color:{color:captions};
  824. {block:ifRoundedCorners}border-radius: 10px 10px 0 0;{/block:ifRoundedCorners}
  825. }
  826.  
  827. .question p:first-of-type {margin-top: 0;}
  828. .question p:last-of-type {margin-bottom: 0;}
  829.  
  830. /*----- AUDIO -----*/
  831.  
  832. .audiopost {
  833. padding: 1.5em;
  834. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  835. {block:ifRoundedCorners}border-radius: 10px 10px 0 0;{/block:ifRoundedCorners}
  836. }
  837.  
  838. .album-art {
  839. z-index: 1;
  840. display: inline-block;
  841. vertical-align: middle;
  842. float: left;
  843. width: 100px;
  844. height: 100px;
  845. {block:ifRoundedCorners}border-radius: 10px;{/block:ifRoundedCorners}
  846. }
  847.  
  848. .audio-player-wrap {
  849. width: 100px;
  850. height: 100px;
  851. display: inline-block;
  852. }
  853.  
  854. .button {
  855. width: 30px;
  856. height: 30px;
  857. opacity:70%;
  858. overflow: hidden;
  859. position: relative;
  860. z-index: 2;
  861. margin: 5px;
  862. }
  863.  
  864. .audiobox {
  865. background-color: #f2f2f2;
  866. z-index: 3;
  867. position: absolute;
  868. margin: 28px 0 0 28px;
  869. border-radius: 50%;
  870. opacity:70%;
  871. }
  872.  
  873. .audioinfo {
  874. display: inline-block;
  875. height: 100px;
  876. max-width: calc(100% - 100px);
  877. margin-left: 100px;
  878. display: flex;
  879. justify-content: center;
  880. flex-direction: column;
  881. box-sizing: border-box;
  882. padding-left: 2em;
  883. }
  884.  
  885. .audioinfo li {list-style-type: none;}
  886. .track {font-weight: bold;}
  887.  
  888. /*----- INFO -----*/
  889.  
  890. .info {
  891. text-transform:lowercase;
  892. display: flex;
  893. flex-direction: row;
  894. align-items: flex-start;
  895. justify-content: space-between;
  896. padding:1.5em;
  897. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  898. {block:ifRoundedCorners}border-radius: 0 0 10px 10px;{/block:ifRoundedCorners}
  899. }
  900.  
  901. .info a {
  902. display: inline-block;
  903. vertical-align: middle;
  904. margin-right: 1em;
  905. color:{color:text};
  906. }
  907.  
  908. .pinned-post {
  909. font-size:20px;
  910. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  911.  
  912. }
  913.  
  914. .post-notes {
  915. margin-left:1em;
  916. font-size:1.1em;
  917. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  918. }
  919.  
  920. .icon {
  921. display: inline-block;
  922. vertical-align: middle;
  923. width: 2em;
  924. height: 2em;
  925. border-radius:100%;
  926. }
  927.  
  928. .icon:hover {
  929. transform:rotate(360deg);
  930. -webkit-transition: all 0.4s;
  931. -moz-transition: all 0.4s;
  932. -ms-transition: all 0.4s;
  933. -o-transition: all 0.4s;
  934. transition: all 0.4s;
  935. }
  936.  
  937. .post-controls {
  938. float: right;
  939. font-size: 21px;
  940. margin-left:0.5em;
  941. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  942. }
  943.  
  944. .likeb {
  945. position: relative;
  946. display: inline-block;
  947. height: 1.3em;
  948. }
  949.  
  950. .likeb .like_button iframe {
  951. position: absolute;
  952. top: 0;
  953. left: 0;
  954. bottom: 0;
  955. right: 0;
  956. z-index: 2;
  957. opacity: 0;
  958. }
  959.  
  960. .like_button iframe {
  961. width: 100% !important;
  962. height: 100% !important;
  963. }
  964.  
  965. .likeb .liked + .actual-button {
  966. color: red;
  967. }
  968.  
  969. .likeb .liked + .actual-button:after {
  970. content: '';
  971. }
  972.  
  973. /*----- TAGS -----*/
  974.  
  975. .tags {
  976. margin-top: 1em;
  977. {block:IfRoundedCorners}margin-left:0.5em;{/block:IfRoundedCorners}
  978. {block:IfHoverTags}
  979. opacity:0;
  980. max-height:0px;
  981. }
  982.  
  983. .posts:hover .tags{
  984. opacity:1;
  985. max-height:300px;
  986. -webkit-transition: all 1.3s ease;
  987. transition: all 1.3s ease;
  988. -moz-transition: all 1.3s ease;
  989. -o-transition: all 1.3s ease;
  990. {/block:IfHoverTags}
  991. }
  992.  
  993. .tags a {
  994. display:inline-block;
  995. vertical-align:top;
  996. color:{color:text};
  997. background:{color:captions};
  998. padding:0.3em;
  999. margin-bottom:0.5em;
  1000. margin-right:0.5em;
  1001. {block:ifRoundedCorners}border-radius: 5px;{/block:ifRoundedCorners}
  1002. }
  1003.  
  1004. .tags a:hover {
  1005. font-weight:normal;
  1006. letter-spacing:0.05em;
  1007. color:{color:background};
  1008. background:{color:link};
  1009. }
  1010.  
  1011. .tagicon i {
  1012. display:inline-block;
  1013. font-size:1.5em;
  1014. padding:0.3em;
  1015. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  1016. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  1017. {block:ifRoundedCorners}border-radius: 5px;{/block:ifRoundedCorners}
  1018. }
  1019.  
  1020. /*---- POST NOTES -----*/
  1021.  
  1022. .notes {
  1023. margin: {text:post margin}px 0;
  1024. }
  1025.  
  1026. ol.notes {
  1027. max-width: 100%;
  1028. padding: 0;
  1029. margin: 2em 0 0 0;
  1030. }
  1031.  
  1032. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  1033.  
  1034. ol.notes li.note img.avatar {
  1035. margin-right: 1em;
  1036. vertical-align: middle;
  1037. display: inline-block;
  1038. width: 1.25em;
  1039. height: 1.25em;
  1040. }
  1041.  
  1042. /*---- PAGINATION -----*/
  1043.  
  1044. #page-navigation {
  1045. text-align: center;
  1046. width:{select:post width};
  1047. margin: 125px 0;
  1048. }
  1049.  
  1050. #page-navigation a, .current-page {
  1051. margin: 0 0.5em;
  1052. }
  1053.  
  1054. .current-page {
  1055. font-weight: bold;
  1056. color: {color:accent};
  1057. }
  1058.  
  1059. /*----- NIGHT MODE -----*/
  1060.  
  1061. body.night {
  1062. background: {color:night background};
  1063. color: {color:night text};
  1064. transition:.5s;
  1065. }
  1066.  
  1067. body.night a {color: {color:night link};}
  1068. body.night a:hover {color: {color:night accent};}
  1069. body.night .caption {background:{color:night captions}; border-bottom: 1px solid {color:night blockquote};}
  1070. body.night .caption a {border-bottom:2px solid {color:night blockquote};}
  1071. body.night .caption a:hover {color:{color:night link}; border-bottom:2px solid {color:night link};}
  1072. body.night #description {background:{color:night captions}; color:{color:night text};}
  1073. body.night #description a {border-bottom:2px solid {color:night blockquote};}
  1074. body.night #description a:hover {color:{color:night link}; border-bottom:2px solid {color:night link};}
  1075. body.night .trackingtag a {color: {color:night text};}
  1076. body.night nav a {color: {color:night text};}
  1077. body.night .info a {color:{color:night text};}
  1078. body.night .tags a {color:{color:night text}; background:{color:night captions};}
  1079. body.night .tags a:hover {color:{color:night background}; background:{color:night link};}
  1080. body.night .chat {background:{color:night captions};}
  1081. body.night .answer {background:{color:night captions};}
  1082. body.night .question {background:{color:night captions};}
  1083. body.night .questionarrow {border-bottom: 1em solid {color:night captions};}
  1084. body.night .quote {background:{color:night captions};}
  1085. body.night .quotearrow {border-top: 1.4em solid {color:night captions};}
  1086. body.night blockquote {border-left: 1px solid {color:night blockquote};}
  1087. body.night h1.post-title a {color:{color:night text};}
  1088. body.night .blogtitle a {color:{color:night text};}
  1089. body.night .hcontrols svg path {fill:{color:night text};}
  1090. body.night .about i {color:{color:night text};}
  1091. body.night #about-tab {background:{color:night captions};}
  1092. body.night .about-title i {color:{color:night text};}
  1093. body.night .about-title i:hover {color:{color:night accent};}
  1094. body.night .about-subtitle {color:{color:night accent};}
  1095. body.night .about-info i {color:{color:night link}; background:{color:night background};}
  1096. body.night .about-likes i {color:{color:night link}; background:{color:night background};}
  1097. body.night .about-nav i {color:{color:night link}; background:{color:night background};}
  1098. body.night .about-nav a {color:{color:night link}; border-bottom:2px solid {color:night blockquote};}
  1099. body.night .about-nav a:hover {color:{color:night accent}; border-bottom:2px solid {color:night accent};}
  1100. body.night .about-box {border-bottom:1px solid {color:night blockquote};}
  1101. body.night .deactive::after {color: {color:night text};}
  1102. body.night .sfm input {color:{color:night text}; background:{color:night captions};}
  1103. body.night #credit {border:1px solid {color:night captions}; color:{color:night text};}
  1104. body.night #backtop i {border:1px solid {color:night captions}; color:{color:night text};}
  1105. body.night .daynight span {border:1px solid {color:night captions}; color:{color:night text};}
  1106. body.night .tippy-tooltip.custom-theme {background-color:{color:night link}; color:{color:night background};}
  1107. body.night .tippy-tooltip.custom-theme .tippy-svg-arrow {fill: {color:night link};}
  1108. body.night::-webkit-scrollbar {background-color:{color:night background};}
  1109. body.night::-webkit-scrollbar-track {border:1px solid {color:night captions}; background-color:{color:night background};}
  1110. body.night::-webkit-scrollbar-thumb {background-color:{color:night accent};}
  1111.  
  1112. body.night header {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1113. body.night .trackingtag {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1114. body.night nav {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1115. body.night .info {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1116. body.night .audiopost {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1117. body.night h1.post-title {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1118. body.night a.link-wrap {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1119. body.night .tagicon i {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1120. body.night .about-title {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1121. body.night .daynight span:hover {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1122. body.night #backtop i:hover {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1123. body.night #credit:hover {background: linear-gradient(to right, {color:Night Gradient 1}, {color:Night Gradient 2});}
  1124.  
  1125. /*----- DAYNIGHT MODE TOGGLE -----*/
  1126.  
  1127. .daynight span {
  1128. position: fixed;
  1129. bottom: 140px;
  1130. right: 20px;
  1131. font-size: 20px;
  1132. padding:0.5em;
  1133. color:{color:text};
  1134. border:1px solid {color:captions};
  1135. {block:ifRoundedCorners}border-radius: 10px;{/block:ifRoundedCorners}
  1136. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  1137. }
  1138.  
  1139. .daynight span:hover {
  1140. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  1141. }
  1142.  
  1143. /*---- SCROLL TO TOP -----*/
  1144.  
  1145. #backtop i {
  1146. position: fixed;
  1147. bottom: 80px;
  1148. right: 20px;
  1149. font-size: 20px;
  1150. padding:0.5em;
  1151. color:{color:text};
  1152. border:1px solid {color:captions};
  1153. {block:ifRoundedCorners}border-radius: 10px;{/block:ifRoundedCorners}
  1154. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  1155. }
  1156.  
  1157. #backtop i:hover {
  1158. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  1159. }
  1160.  
  1161. /*---- CREDIT -----*/
  1162.  
  1163. #credit {
  1164. position: fixed;
  1165. bottom: 20px;
  1166. right: 20px;
  1167. font-size: 20px;
  1168. padding:0.5em;
  1169. color:{color:text};
  1170. border:1px solid {color:captions};
  1171. {block:ifRoundedCorners}border-radius: 10px;{/block:ifRoundedCorners}
  1172. {block:IfGlow}text-shadow:0 0 10px;{/block:IfGlow}
  1173. }
  1174.  
  1175. #credit:hover {
  1176. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  1177. }
  1178.  
  1179. /*---- MEDIA QUERIES AND RESPONSIVENESS: -----*/
  1180.  
  1181. /*--- for small desktop/tablet screens. converts sidebar to header ---*/
  1182.  
  1183. @media only screen and (max-width: 1100px) {
  1184.  
  1185. main {
  1186. width: {select:post width};
  1187. }
  1188.  
  1189. section {
  1190. margin-left: 0;
  1191. }
  1192.  
  1193. #sidebar {
  1194. position: relative;
  1195. margin: {text:post margin}px auto;
  1196. width: {select:post width};
  1197. top: auto;
  1198. }
  1199.  
  1200. #side-img {
  1201. display:none;
  1202. }
  1203.  
  1204. #description {
  1205. {block:IfNotTrackingTag}{block:IfRoundedCorners}
  1206. border-radius: 10px 10px 0 0;
  1207. {/block:IfRoundedCorners}{/block:IfNotTrackingTag}
  1208. }
  1209.  
  1210. .sfm input {
  1211. width: calc({select:post width} - 50px);
  1212. }
  1213.  
  1214. }
  1215.  
  1216. /*--- for mobile devices ---*/
  1217.  
  1218. @media only screen and (max-width: 720px) {
  1219.  
  1220. main, section {
  1221. width: 80vw;
  1222. }
  1223.  
  1224. .post-notes {
  1225. margin-left:0;
  1226. font-size:0.9em;
  1227. }
  1228.  
  1229. #sidebar {
  1230. position: relative;
  1231. margin: {text:post margin}px auto;
  1232. width: {select:sidebar width};
  1233. top: auto;
  1234. }
  1235.  
  1236. #side-img {
  1237. display:none;
  1238. }
  1239.  
  1240. .sfm input {
  1241. width: calc({select:sidebar width} - 50px);
  1242. }
  1243.  
  1244. #backtop {
  1245. display:none;
  1246. }
  1247.  
  1248. #credit {
  1249. bottom: 10px;
  1250. right: 10px;
  1251. font-size: 10px;
  1252. }
  1253.  
  1254. .daynight span {
  1255. bottom: 50px;
  1256. right: 10px;
  1257. font-size: 10px;
  1258. }
  1259.  
  1260. }
  1261.  
  1262. /*---- END OF MEDIA QUERIES -----*/
  1263.  
  1264. {CustomCSS}
  1265.  
  1266. </style>
  1267.  
  1268. <!----- PXU PHOTOSETS ----->
  1269.  
  1270. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1271. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1272. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1273.  
  1274. <script>
  1275. $(document).ready(function(){
  1276. $('.photo-slideshow').pxuPhotoset({
  1277. lightbox: true,
  1278. rounded: false,
  1279. gutter: '4px',
  1280. borderRadius: '0px',
  1281. photoset: '.photo-slideshow',
  1282. photoWrap: '.photo-data',
  1283. photo: '.pxu-photo'
  1284. });
  1285. });
  1286. </script>
  1287.  
  1288. </head>
  1289.  
  1290. <!----- HTML ----->
  1291.  
  1292. <body>
  1293.  
  1294. <script src="https://unpkg.com/popper.js@1"></script>
  1295. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1296. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1297.  
  1298. <!-- main = main container -->
  1299.  
  1300. <main>
  1301.  
  1302. <!----- HEADER ----->
  1303.  
  1304. <header class="align-flex">
  1305.  
  1306. <div class="header">
  1307.  
  1308. <!----- ABOUT TAB ----->
  1309.  
  1310. {block:IfAboutTab}
  1311. <div class="about" onclick="openNav()"><i title="about" class="las la-bars"></i></div>
  1312. <div id="about-tab">
  1313. <div class="about-box"><div class="about-title">ABOUT<a href="javascript:void(0)" onclick="closeNav()"><i class="las la-times-circle"></i></a></div>
  1314. <div class="about-subtitle"><b>info</b></div>
  1315. <ul class="about-info">
  1316. {block:ifName}
  1317. <li><i class="las la-user-circle"></i>{text:Name}</li>
  1318. {/block:ifName}
  1319.  
  1320. {block:ifAge}
  1321. <li><i class="las la-birthday-cake"></i>{text:Age}</li>
  1322. {/block:ifAge}
  1323.  
  1324. {block:ifLocation}
  1325. <li><i class="las la-map-marker"></i>{text:Location}</li>
  1326. {/block:ifLocation}
  1327.  
  1328. {block:ifPronouns}
  1329. <li><i class="las la-user-check"></i>{text:Pronouns}</li>
  1330. {/block:ifPronouns}
  1331.  
  1332. {block:ifSexuality}
  1333. <li><i class="lab la-font-awesome-flag"></i>{text:Sexuality}</li>
  1334. {/block:ifSexuality}
  1335.  
  1336. {block:ifSign}
  1337. <li><i class="lar la-star"></i>{text:Sign}</li>
  1338. {/block:ifSign}
  1339. </ul>
  1340. </div>
  1341.  
  1342. <div class="about-box">
  1343. <div class="about-subtitle"><b>likes</b></div>
  1344. <div class="about-likes">
  1345. {block:ifLikes1}
  1346. <li><i class="lar la-heart"></i>{text:Likes 1}</li>
  1347. {/block:ifLikes1}
  1348.  
  1349. {block:ifLikes2}
  1350. <li><i class="lar la-heart"></i>{text:Likes 2}</li>
  1351. {/block:ifLikes2}
  1352.  
  1353. {block:ifLikes3}
  1354. <li><i class="lar la-heart"></i>{text:Likes 3}</li>
  1355. {/block:ifLikes3}
  1356.  
  1357. {block:ifLikes4}
  1358. <li><i class="lar la-heart"></i>{text:Likes 4}</a></li>
  1359. {/block:ifLikes4}
  1360.  
  1361. {block:ifLikes5}
  1362. <li><i class="lar la-heart"></i>{text:Likes 5}</a></li>
  1363. {/block:ifLikes5}
  1364.  
  1365. {block:ifLikes6}
  1366. <li><i class="lar la-heart"></i>{text:Likes 6}</a></li>
  1367. {block:ifLikes6}
  1368. </div>
  1369. </div>
  1370.  
  1371. <div class="about-box">
  1372. <div class="about-subtitle"><b>links</b></div>
  1373. <div class="about-nav">
  1374.  
  1375. {block:ifAboutLink1}
  1376. <li><i class="las la-link"></i>
  1377. <a href="{text:About Link 1 URL}">{text:About Link 1}</a></li>
  1378. {/block:ifAboutLink1}
  1379.  
  1380. {block:ifAboutLink2}
  1381. <li><i class="las la-link"></i>
  1382. <a href="{text:About Link 2 URL}">{text:About Link 2}</a></li>
  1383. {/block:ifAboutLink2}
  1384.  
  1385. {block:ifAboutLink3}
  1386. <li><i class="las la-link"></i>
  1387. <a href="{text:About Link 3 URL}">{text:About Link 3}</a></li>
  1388. {/block:ifAboutLink3}
  1389.  
  1390. {block:ifAboutLink4}
  1391. <li><i class="las la-link"></i>
  1392. <a href="{text:About Link 4 URL}">{text:About Link 4}</a></li>
  1393. {/block:ifAboutLink4}
  1394.  
  1395. </div>
  1396. </div>
  1397.  
  1398. </div>
  1399. {/block:IfAboutTab}
  1400.  
  1401. <div class="blogtitle"><a href="/">{Title}</a></div>
  1402.  
  1403. </div>
  1404. </header>
  1405.  
  1406. <!----- SIDEBAR ----->
  1407.  
  1408. <aside id="sidebar">
  1409.  
  1410. {block:IfTrackingTag}
  1411. <div class="trackingtag"><a href="https://tumblr.com/tagged/{text:Tracking Tag}">#{text:Tracking Tag}</a></div>
  1412. {/block:IfTrackingTag}
  1413.  
  1414. {block:ifSidebarImage}
  1415. <img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>
  1416. {/block:ifSidebarImage}
  1417.  
  1418. {block:IfDesktopDescription}<div id="description">{text:Desktop Description}</div>{/block:IfDesktopDescription}
  1419.  
  1420. <nav>
  1421. <a href="/" title='Home'><i class="las la-{text:Home Link Icon}"></i></a>
  1422. {block:AskEnabled}
  1423. <a href="/ask" title='Ask'><i class="las la-{text:Ask Link Icon}"></i></a>
  1424. {/block:AskEnabled}
  1425. {block:ifLink1}
  1426. <a href="{text:Link 1 URL}" title='{text:Link 1}'><i class="las la-{text:Link 1 icon}"></i></a>
  1427. {/block:ifLink1}
  1428. {block:ifLink2}
  1429. <a href="{text:Link 2 URL}" title='{text:Link 2}'><i class="las la-{text:Link 2 icon}"></i></a>
  1430. {/block:ifLink2}
  1431. {block:ifLink3}
  1432. <a href="{text:Link 3 URL}" title='{text:Link 3}'><i class="las la-{text:Link 3 icon}"></i></a>
  1433. {/block:ifLink3}
  1434. {block:ifLink4}
  1435. <a href="{text:Link 4 URL}" title='{text:Link 4}'><i class="las la-{text:Link 4 icon}"></i></a>
  1436. {/block:ifLink4}
  1437. {block:HasPages}{block:Pages}
  1438. <a href="{URL}">{Label}</a>
  1439. {/block:Pages}{/block:HasPages}
  1440. </nav>
  1441.  
  1442. <!----- SEARCH BOX ----->
  1443.  
  1444. {block:IfSearchBox}
  1445. <div class="search-box">
  1446.  
  1447. <form action="/search" method="get" class="sfm">
  1448. <input type="text" name="q" value="{SearchQuery}" id="sf" autocomplete="off"/>
  1449. <input type="image" value="Search" src="https://static.tumblr.com/f1skqpy/Oxbn13qun/search_icon.png" id="sb"/>
  1450. </form>
  1451. </div>
  1452. {/block:IfSearchBox}
  1453.  
  1454. </aside>
  1455.  
  1456. <!----- TAG AND DAY PAGES ----->
  1457.  
  1458. <!-- section = post container -->
  1459.  
  1460. <section>
  1461.  
  1462. {block:TagPage}
  1463. <article>
  1464. viewing <b>{tagresultcount}</b> posts filed under <b>#{Tag}</b>
  1465. </article>
  1466. {/block:TagPage}
  1467.  
  1468. {block:DayPage}
  1469. <article>
  1470. viewing all posts made on {Month} {DayOfMonth}, {Year}
  1471. </article>
  1472. {/block:DayPage}
  1473.  
  1474.  
  1475. <!----- POSTS ----->
  1476.  
  1477. {block:Posts}
  1478. <article class="posts" id="{PostID}">
  1479.  
  1480. {block:Text}
  1481. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1482. {block:NotReblog}
  1483. <li class="caption text-caption">
  1484. {Body}
  1485. </li>
  1486. {/block:NotReblog}
  1487. {block:RebloggedFrom}
  1488. {block:Reblogs}
  1489. <li class="caption text-caption">
  1490. <img src="{PortraitURL-64}" class="user-icon">
  1491. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1492. {Body}
  1493. </li>
  1494. {/block:Reblogs}
  1495. {/block:RebloggedFrom}
  1496. {/block:Text}
  1497.  
  1498. {block:Link}
  1499. <a href="{URL}" class="link-wrap">
  1500. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1501. <div class="link">
  1502. <div class="title">{Name}</div>
  1503. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1504. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1505. </div>
  1506. </a>
  1507. {block:Description}
  1508. {block:NotReblog}
  1509. <li class="caption">
  1510. {Description}
  1511. </li>
  1512. {/block:NotReblog}
  1513. {/block:Description}
  1514. {block:RebloggedFrom}
  1515. {block:Reblogs}
  1516. <li class="caption">
  1517. <img src="{PortraitURL-64}" class="user-icon">
  1518. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1519. {Body}
  1520. </li>
  1521. {/block:Reblogs}
  1522. {/block:RebloggedFrom}
  1523. {/block:Link}
  1524.  
  1525. {block:Photo}
  1526. <div class="photo">
  1527. {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}
  1528. </div>
  1529. {block:Caption}
  1530. {block:NotReblog}
  1531. <li class="caption">
  1532. {Caption}
  1533. </li>
  1534. {/block:NotReblog}
  1535. {block:RebloggedFrom}
  1536. {block:Reblogs}
  1537. <li class="caption">
  1538. <img src="{PortraitURL-64}" class="user-icon">
  1539. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1540. {Body}
  1541. </li>
  1542. {/block:Reblogs}
  1543. {/block:RebloggedFrom}
  1544. {/block:Caption}
  1545. {/block:Photo}
  1546.  
  1547. {block:Photoset}
  1548. <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>
  1549. {block:Caption}
  1550. {block:NotReblog}
  1551. <li class="caption original-caption">
  1552. <div class="caption-text">{Caption}</div>
  1553. </li>
  1554. {/block:NotReblog}
  1555. {block:RebloggedFrom}
  1556. <div class="reblog-wrap">
  1557. {block:Reblogs}
  1558. <li class="caption">
  1559. <img src="{PortraitURL-64}" class="user-icon">
  1560. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1561. <div class="caption-text">{Body}</div>
  1562. </li>
  1563. {/block:Reblogs}
  1564. </div>
  1565. {/block:RebloggedFrom}
  1566. {/block:Caption}
  1567. {/block:Photoset}
  1568.  
  1569. {block:Video}
  1570. <div class="video">{Video-500}</div>
  1571. {block:Caption}
  1572. {block:NotReblog}
  1573. <li class="caption">
  1574. {Caption}
  1575. </li>
  1576. {/block:NotReblog}
  1577. {block:RebloggedFrom}
  1578. {block:Reblogs}
  1579. <li class="caption">
  1580. <img src="{PortraitURL-64}" class="user-icon">
  1581. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1582. {Body}
  1583. </li>
  1584. {/block:Reblogs}
  1585. {/block:RebloggedFrom}
  1586. {/block:Caption}
  1587. {/block:Video}
  1588.  
  1589. {block:Quote}
  1590. <div class="quote">{Quote}</div>
  1591. <div class="quotearrow"></div>
  1592. {block:Source}<div class="quotesource">— {Source}</div>{/block:Source}
  1593. {/block:Quote}
  1594.  
  1595. {block:Chat}
  1596. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1597. <ul class="chat">{block:Lines}
  1598. <li>
  1599. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1600. {Line}
  1601. </li>
  1602. {/block:Lines}</ul>
  1603. {/block:Chat}
  1604.  
  1605. {block:Answer}
  1606. <div class="ask-wrap">
  1607. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1608. <div class="asking">{Asker} asked:</div>
  1609. <div class="questionarrow"></div>
  1610. <div class="question">{Question}</div>
  1611. </div>
  1612. {block:Answerer}
  1613. <li class="answer">
  1614. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1615. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer} answered:</a></div>
  1616. {Answer}
  1617. </li>
  1618. {/block:Answerer}
  1619. {block:NotReblog}
  1620. <li class="answer">
  1621. {Replies}
  1622. </li>
  1623. {/block:NotReblog}
  1624. {block:RebloggedFrom}
  1625. {block:Reblogs}
  1626. <li class="caption">
  1627. <img src="{PortraitURL-64}" class="user-icon">
  1628. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1629. {Body}
  1630. </li>
  1631. {/block:Reblogs}
  1632. {/block:RebloggedFrom}
  1633. {/block:Answer}
  1634.  
  1635. {block:Audio}
  1636. <div class="audiopost">
  1637. <div class="audiobox">
  1638. <div class="button">
  1639. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1640. </div>
  1641. </div>
  1642. {block:AlbumArt}
  1643. <img src="{AlbumArtURL}" class="album-art">
  1644. {/block:AlbumArt}
  1645. <div class="audioinfo">
  1646. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1647. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1648. {block:Album}<li>{Album}</li>{/block:Album}
  1649. </div>
  1650. </div>
  1651. {block:Caption}
  1652. {block:NotReblog}
  1653. <li class="caption">
  1654. {Caption}
  1655. </li>
  1656. {/block:NotReblog}
  1657. {block:RebloggedFrom}
  1658. {block:Reblogs}
  1659. <li class="caption">
  1660. <img src="{PortraitURL-64}" class="user-icon">
  1661. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1662. {Body}
  1663. </li>
  1664. {/block:Reblogs}
  1665. {/block:RebloggedFrom}
  1666. {/block:Caption}
  1667. {/block:Audio}
  1668.  
  1669. <!----- INFO ----->
  1670.  
  1671. <!----- post notes and date ----->
  1672.  
  1673. {block:Date}
  1674.  
  1675. <div class="info">
  1676. <div class="post-notes">
  1677. {block:PinnedPostLabel}
  1678. <a href="{Permalink}" class="pinned-post" title="pinned post"><i class="las la-thumbtack"></i></a>
  1679. {/block:PinnedPostLabel}
  1680.  
  1681. <a href="{Permalink}" title="{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}">{NoteCountWithLabel}</a>
  1682. </div>
  1683.  
  1684. <!----- source and via ----->
  1685.  
  1686. <div class="post-source">
  1687. {block:RebloggedFrom}
  1688. <a href="{ReblogParentURL}" title="via: {ReblogParentName}</a>"><img src="{ReblogParentPortraitURL-64}" class="icon"></a></a>
  1689. <a href="{ReblogRootURL}" title="source: {ReblogRootName}"><img src="{ReblogRootPortraitURL-64}" class="icon"></a>
  1690. {/block:RebloggedFrom}
  1691.  
  1692. <!----- like and reblog ----->
  1693.  
  1694. <div class="post-controls">
  1695. <a href="{ReblogURL}" title="reblog" target="_blank"><i class="las la-sync"></i></a>
  1696. <a class="likeb" href="#" title="like">{LikeButton}<span class="actual-button"><i class="lar la-heart"></i></span></a>
  1697. </div>
  1698. </div>
  1699. </div>
  1700. {/block:Date}
  1701.  
  1702. <!----- TAGS ----->
  1703.  
  1704. {block:HasTags}
  1705. <div class="tags">
  1706. <i class="tagicon"><i class="las la-tag"></i></i>
  1707. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1708. </div>
  1709. {/block:HasTags}
  1710.  
  1711. <!----- POST NOTES ----->
  1712.  
  1713. {block:PermalinkPage}{block:Date}
  1714. {block:NoteCount}{block:PostNotes}
  1715. <div class="notes">
  1716. {PostNotes-64}
  1717. </div>
  1718. {/block:PostNotes}{/block:NoteCount}
  1719. {/block:Date}{/block:PermalinkPage}
  1720.  
  1721. </article>
  1722. {/block:Posts}
  1723.  
  1724. <!-- end of posts container -->
  1725.  
  1726. </section>
  1727.  
  1728. <!----- PAGINATION ----->
  1729.  
  1730. {block:Pagination}
  1731. <article id="page-navigation">
  1732. {block:PreviousPage}<a href="{PreviousPage}">previous page</a>{/block:PreviousPage}
  1733. {block:JumpPagination length="5"}
  1734. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1735. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1736. {/block:JumpPagination}
  1737. {block:NextPage}<a href="{NextPage}">next page</a>{/block:NextPage}
  1738. </article>
  1739. {/block:Pagination}
  1740.  
  1741. <!-- end of main container -->
  1742.  
  1743. </main>
  1744.  
  1745. <!----- TUMBLR CONTROLS ----->
  1746.  
  1747. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  1748.  
  1749. <!----- CREDIT ----->
  1750.  
  1751. <a href="https://orla-mcool.tumblr.com" title="theme by giulia" id="credit"><i class="las la-leaf"></i></a>
  1752.  
  1753. <!----- DAYNIGHT MODE ----->
  1754.  
  1755. {block:IfDayNightMode}
  1756. <div class="daynight"> <span><i class="las la-moon"></i></span></div>
  1757. {/block:IfDayNightMode}
  1758.  
  1759. <!-- DAYNIGHT MODE SCRIPTS -->
  1760.  
  1761. <script>const btn = document.querySelector(".daynight span");
  1762.  
  1763. const currentTheme = localStorage.getItem("theme");
  1764. if (currentTheme == "night") {
  1765. document.body.classList.add("night");
  1766. }
  1767.  
  1768. btn.addEventListener("click", function () {
  1769. document.body.classList.toggle("night");
  1770.  
  1771. let theme = "body";
  1772. if (document.body.classList.contains("night")) {
  1773. theme = "night";
  1774. }
  1775. localStorage.setItem("theme", theme);
  1776. });
  1777. </script>
  1778.  
  1779. <!----- SCROLL TO TOP ----->
  1780.  
  1781. <div id="backtop"><a href="#top" target="_self"><i class="las la-arrow-up"></i></a></div>
  1782.  
  1783. <!-- SCROLL TO TOP SCRIPTS -->
  1784.  
  1785. <script>
  1786. $(document).ready(function(){
  1787. $('#backtop a').click(function(){
  1788. $('html, body').animate({scrollTop : 0},800);
  1789. return false;
  1790. });
  1791. });
  1792. </script>
  1793.  
  1794. <!----- TIPPY TOOLTIPS ----->
  1795.  
  1796. <script src="https://unpkg.com/popper.js@1"></script>
  1797. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1798. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1799.  
  1800. <script>
  1801. tippy('a[title]', {
  1802. theme: 'custom',
  1803. arrow: tippy.roundArrow,
  1804. followCursor: false,
  1805. placement: 'top',
  1806. zIndex: 9999999999,
  1807. maxWidth: 300,
  1808.  
  1809. content(reference) {
  1810. const title = reference.getAttribute('title');
  1811. reference.removeAttribute('title');
  1812. return title;
  1813. },
  1814. });
  1815. </script>
  1816.  
  1817. <!----- ABOUT TAB SCRIPTS ----->
  1818.  
  1819. <script>
  1820. // nav
  1821. function openNav() {
  1822. // adjust to your desired width
  1823. // change "width" to "height" if you want it to be top/bottom
  1824. document.getElementById("about-tab").style.width = "350px";
  1825. // change "right" to where you want it to come from (i.e. left/top)
  1826. document.getElementById("about-tab").style.left = "0px";
  1827. }
  1828.  
  1829. function closeNav() {
  1830. // change "width" to "height" if you want it to be top/bottom
  1831. document.getElementById("about-tab").style.width = "0";
  1832. // change "right" to where you want it to come from (i.e. left/top)
  1833. document.getElementById("about-tab").style.left = "-60px";
  1834. }
  1835. </script>
  1836.  
  1837. </body>
  1838. </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!