API tools faq
paste
dhyas

THEME 06 - JUST LIKE MAGIC

dhyas
Aug 11th, 2021 (edited)
3,786
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.17 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ♡ JUST LIKE MAGIC / THEME 06 by DHYA @ARIANAGRANDRE ♡
  4. arianagrandre.tumblr.com
  5.  
  6. - base code by @seyche
  7. - no.js photosets by @annasthms & @eggdesign
  8. - NPF (mobile) photoset fix by @glenthemes
  9. - cappuccicons (icon font) by suiomi
  10. - tippy js. tooltips by atomiks / tutorial by @silbrigthemes
  11. - custom like button by @shythemes
  12. - styling tumblr controls by @odeysseus
  13.  
  14. DO NOT remove any credits.
  15. DO NOT claim or redistribute this theme.
  16. DO NOT take parts as your own or use it as a base code.
  17. Feel free to edit it as much you like.
  18. Enjoy!
  19.  
  20.  
  21. -->
  22.  
  23. <!DOCTYPE html>
  24. <html>
  25. <head>
  26.  
  27. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  28.  
  29.  
  30. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  31.  
  32. <link rel="shortcut icon" href="{Favicon}">
  33. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  34. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  35. <meta charset="utf-8">
  36. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  37.  
  38.  
  39. <!----- VARIABLES AND OPTIONS ----->
  40.  
  41. <meta name="image:Sidebar" content=""/>
  42.  
  43. <meta name="color:Background" content="#f3f3f3"/>
  44. <meta name="color:Posts" content="#ffffff"/>
  45. <meta name="color:Gradient Color 1" content="#97b0f9" />
  46. <meta name="color:Gradient Color 2" content="#e8f0ff" />
  47. <meta name="color:Sidebar" content="#ffffff"/>
  48. <meta name="color:Title" content="#ffffff"/>
  49. <meta name="color:Text" content="#707070"/>
  50. <meta name="color:Sidebar Link" content="#8fb7fc"/>
  51. <meta name="color:Sidebar Link Hover" content="#ffffff"/>
  52. <meta name="color:Link" content="#76a2ee"/>
  53. <meta name="color:Link Hover" content="#d7d7d7"/>
  54. <meta name="color:Footer" content="#ededed" />
  55. <meta name="color:Footer Link" content="#767676" />
  56. <meta name="color:Borders" content="#dcdcdc"/>
  57. <meta name="color:Scrollbar" content="#657bdd" />
  58.  
  59. <meta name="select:Post Width" content="400px" title="400px"/>
  60. <meta name="select:Post Width" content="500px" title="500px"/>
  61. <meta name="select:Post Width" content="540px" title="540px"/>
  62.  
  63. <meta name="select:Font" content="Barlow"/>
  64. <meta name="select:Font" content="Bai Jamjuree"/>
  65. <meta name="select:Font" content="Karla"/>
  66. <meta name="select:Font" content="Nunito Sans"/>
  67. <meta name="select:Font" content="Overpass"/>
  68. <meta name="select:Font" content="Rubik"/>
  69. <meta name="select:Font" content="Saira"/>
  70.  
  71. <meta name="select:Font Size" content="15px"/>
  72. <meta name="select:Font Size" content="14px"/>
  73. <meta name="select:Font Size" content="13px"/>
  74. <meta name="select:Font Size" content="12px"/>
  75. <meta name="select:Font Size" content="11px"/>
  76.  
  77. <meta name="text:Home icon" content="\eb0e"/>
  78. <meta name="text:Ask icon" content="\e9d8"/>
  79. <meta name="text:Archive icon" content="\ebe1"/>
  80. <meta name="text:Link 1 icon" content="\eca1"/>
  81. <meta name="text:Link 1" content=""/>
  82. <meta name="text:Link 1 hover title" content=""/>
  83. <meta name="text:Link 2 icon" content="\ecb6"/>
  84. <meta name="text:Link 2" content=""/>
  85. <meta name="text:Link 2 hover title" content=""/>
  86. <meta name="text:Link 3 icon" content="\ecf0"/>
  87. <meta name="text:Link 3" content=""/>
  88. <meta name="text:Link 3 hover title" content=""/>
  89. <meta name="text:Link 4 icon" content="\e97d"/>
  90. <meta name="text:Link 4" content=""/>
  91. <meta name="text:Link 4 hover title" content=""/>
  92. <meta name="text:Link 5 icon" content="\eabc"/>
  93. <meta name="text:Link 5" content=""/>
  94. <meta name="text:Link 5 hover title" content=""/>
  95.  
  96. <link rel="preconnect" href="https://fonts.googleapis.com">
  97. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  98. <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500&family=Barlow:wght@300;400;500&family=Karla:wght@300;400;500&family=Nunito+Sans:wght@300;400;600&family=Overpass:wght@300;400;600&family=Rubik:wght@300;400;500&family=Saira:wght@300;400;500&display=swap" rel="stylesheet">
  99.  
  100. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  101.  
  102. <!-- NPF IMAGES READJUSTMENT | @glenthemes v2.0 [last updated: 2021-06-03] --> <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet"> <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script> <style type="text/css"> :root { --NPF-Image-Spacing:4px; --NPF-Bottom-Gap-From-Captions:2em; } </style>
  103.  
  104. <script src="//pull.cappuccicons.com/cpf.js"></script>
  105.  
  106. <!----- CSS ----->
  107.  
  108. <style type="text/css">
  109.  
  110.  
  111. /*----- TUMBLR CONTROLS -----*/
  112.  
  113. .tmblr-iframe{ white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:.2;transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;position:fixed!important;right:-20px!important;transform:scale(0.7,0.7); } .tmblr-iframe:hover { opacity:0.7; }
  114.  
  115.  
  116. /*----- BASIC STYLING -----*/
  117.  
  118. body {
  119. font-family: {select:font}, sans-serif;
  120. font-size: {select:font size};
  121. color: {color:text};
  122. background-color: {color:background};
  123. line-height: 160%;
  124. word-wrap: break-word;
  125. letter-spacing: 0.04em;
  126. margin: 0;
  127. padding: 0;
  128. }
  129.  
  130. a {
  131. color: {color:link};
  132. text-decoration: none;
  133. -webkit-transition: all 0.3s;
  134. -moz-transition: all 0.3s;
  135. -ms-transition: all 0.3s;
  136. -o-transition: all 0.3s;
  137. transition: all 0.3s;
  138. }
  139.  
  140. a:hover {
  141. color: {color:Link Hover};
  142. -webkit-transition: all 0.3s;
  143. -moz-transition: all 0.3s;
  144. -ms-transition: all 0.3s;
  145. -o-transition: all 0.3s;
  146. transition: all 0.3s;
  147. }
  148.  
  149. blockquote {
  150. padding: 0 0 0 1.5em;
  151. border-left: 1px solid {color:borders};
  152. margin: 1.5em 0 1.5em 1.5em;
  153. }
  154.  
  155. h1, h2, h3, h4, h5, .title {
  156. letter-spacing: 0.06em;
  157. line-height: 145%;
  158. font-weight: bold;
  159. }
  160.  
  161. h1, .title {font-size: 1.5em;}
  162. h2 {font-size: 1.3em;}
  163. h3 {font-size: 1.25em;}
  164. h4 {font-size: 1.1em;}
  165. h5 {font-size: 1em;}
  166.  
  167. small {font-size: 0.9em;}
  168. big {font-size: 1.1em;}
  169.  
  170. hr {
  171. height: 1px;
  172. border: none;
  173. box-shadow: none;
  174. background-color: {color:borders};
  175. }
  176.  
  177. pre {
  178. line-height: inherit;
  179. font-size: inherit;
  180. white-space: pre-wrap;
  181. white-space: -moz-pre-wrap;
  182. white-space: -pre-wrap;
  183. white-space: -o-pre-wrap;
  184. word-wrap: break-word;
  185. }
  186.  
  187. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  188.  
  189. /*----- SCROLLBAR -----*/
  190.  
  191. ::-webkit-scrollbar{
  192. height:11px;
  193. width:11px;
  194. background:inherit;
  195. }
  196.  
  197. ::-webkit-scrollbar-thumb {background:{color:scrollbar};}
  198.  
  199. ::-webkit-scrollbar-track {background:{color:borders};}
  200.  
  201. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid {color:background};
  202.  
  203. }
  204.  
  205. /*----- ICONS -----*/
  206.  
  207. .icon1:before{
  208.  
  209. content:'{text:home icon}';
  210. font-family:'cappuccicons';
  211. font-weight:400;
  212.  
  213. }
  214.  
  215. .icon2:before{
  216.  
  217. content:'{text:ask icon}';
  218. font-family:'cappuccicons';
  219. font-weight:400;
  220.  
  221. }
  222.  
  223. .icon3:before{
  224.  
  225. content:'{text:archive icon}';
  226. font-family:'cappuccicons';
  227. font-weight:400;
  228. }
  229.  
  230. .icon4:before{
  231.  
  232. content:'{text:link 1 icon}';
  233. font-family:'cappuccicons';
  234. font-weight:400;
  235.  
  236. }
  237.  
  238. .icon5:before{
  239.  
  240. content:'{text:link 2 icon}';
  241. font-family:'cappuccicons';
  242. font-weight:400;
  243. }
  244.  
  245. .icon6:before{
  246.  
  247. content:'{text:link 3 icon}';
  248. font-family:'cappuccicons';
  249. font-weight:400;
  250. }
  251.  
  252. .icon7:before{
  253.  
  254. content:'{text:link 4 icon}';
  255. font-family:'cappuccicons';
  256. font-weight:400;
  257. }
  258.  
  259. .icon8:before{
  260.  
  261. content:'{text:link 5 icon}';
  262. font-family:'cappuccicons';
  263. font-weight:400;
  264.  
  265. }
  266.  
  267. .chevron-right{
  268. font-size: 10px;
  269. color: {color:link};
  270.  
  271. }
  272.  
  273. .chevron-left{
  274. font-size: 10px;
  275. color: {color:link};
  276.  
  277. }
  278.  
  279. /*----- TOOLTIPS -----*/
  280.  
  281. .tippy-tooltip.custom-theme {
  282. background-color: {color:Posts};
  283. color: {color:Link};
  284. text-align:center;
  285. }
  286.  
  287. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  288. opacity:0;
  289. }
  290. /*----- TITLE -----*/
  291.  
  292. .blogtitle {
  293. text-align:left;
  294. padding:20px;
  295. margin-bottom:0px;
  296. background: linear-gradient(to right, {color:Gradient Color 1}, {color:Gradient Color 2});
  297. border-radius:7px 7px 0 0;
  298.  
  299. }
  300. .blogtitle a {
  301. font-family:{text:Body};
  302. letter-spacing:0.5px;
  303. font-weight:600;
  304. font-size:15px;
  305. color:{color:Title};
  306. text-transform:lowercase;
  307.  
  308. }
  309.  
  310.  
  311. /*----- SIDEBAR -----*/
  312.  
  313. #sidebar {
  314. width: 250px;
  315. position: fixed;
  316. top: {text:post margin}px;
  317. text-align: center;
  318. background-color:{color:Sidebar};
  319. border-radius:7px;
  320. box-shadow:0px 1px 1px {color:borders};
  321.  
  322. }
  323.  
  324. {block:ifSidebarImage}
  325.  
  326. #side-img {
  327. margin: auto;
  328.  
  329. }
  330.  
  331. {/block:ifSidebarImage}
  332.  
  333. #description {
  334. padding:16px;
  335. line-height:1.5em;
  336. font-size:{select:font size};
  337. font-family:{text:body};
  338.  
  339. }
  340.  
  341. .nav {
  342. width:250px;
  343. margin:10px 0px 0px 0px;
  344. position:fixed;
  345. display:block;
  346. background-color:{color:Sidebar};
  347. border-radius:7px;
  348. box-shadow:0px 1px 1px {color:borders};
  349. height:auto;
  350. text-align:center;
  351. }
  352.  
  353. .nav a {
  354. display:inline-block;
  355. text-align:center;
  356. padding:12px;
  357. margin:5px 6px 5px 6px;
  358. color:{color:sidebar link};
  359. font-weight:500;
  360. font-size:15px;
  361. border-radius:5px;
  362. width:23px;
  363. height:23px;
  364.  
  365.  
  366. }
  367. .nav a:hover {
  368.  
  369. color:{color:sidebar link hover};
  370. background:linear-gradient(to right, {color:Gradient Color 1}, {color:Gradient Color 2});
  371. -webkit-transition: all 0.3s;
  372. -moz-transition: all 0.3s;
  373. -ms-transition: all 0.3s;
  374. -o-transition: all 0.3s;
  375. transition: all 0.3s;
  376. }
  377.  
  378.  
  379. /*----- POSTS -----*/
  380.  
  381. main {
  382. position: relative;
  383. width: calc(250px + {select:post width} + 150px);
  384. margin: auto;
  385. }
  386.  
  387. section {
  388. position: relative;
  389. width: {select:post width};
  390. margin-left: 440px;
  391. }
  392.  
  393. article {
  394. width: 100%;
  395. position: relative;
  396. margin: 150px auto;
  397. border-radius:7px;
  398.  
  399. }
  400.  
  401. .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%;}
  402.  
  403. .posts ul li {
  404. list-style:none;
  405. line-height:150%;
  406. margin-left:0px;
  407. }
  408.  
  409. .posts ul li:before {
  410. content:'\e9e4';
  411. margin-right:1em;
  412. font-family:'cappuccicons';
  413. font-weight:100;
  414. font-size:10px;
  415.  
  416. }
  417.  
  418. /*----- CAPTIONS -----*/
  419.  
  420.  
  421. .caption {
  422. background:{color:posts};
  423. margin-top: 1em;
  424. list-style-type: none;
  425. padding:1em, 1em, 0.5em,2em;
  426. border-radius:7px;
  427. box-shadow:0px 1px 1px {color:borders};
  428.  
  429. }
  430.  
  431. .text-caption:first-of-type {
  432. margin-top: 0;
  433.  
  434. }
  435.  
  436. .comment {
  437.  
  438. list-style:none;
  439. overflow:hidden;
  440. padding:20px 30px 30px 30px;
  441.  
  442. }
  443.  
  444.  
  445. .user-icon {
  446. display: inline-block;
  447. vertical-align: middle;
  448. width: 2em;
  449. height: 2em;
  450. margin-right: 1em;
  451. border-radius:3px;
  452. margin-left:2em;
  453. margin-top:2em;
  454. margin-bottom:0.2em;
  455. }
  456.  
  457. .username {
  458. display: inline-block;
  459. vertical-align: middle;
  460. font-weight: bold;
  461. margin-top:2em;
  462. margin-bottom:0.2em;
  463. }
  464.  
  465. .deactive::after {
  466. content: '(deactivated)';
  467. margin-left: 1em;
  468. opacity: 0.75;
  469. color: {color:text};
  470. }
  471.  
  472. p.tmblr-attribution {margin-top: 1em !important;}
  473.  
  474. /*----- TEXT -----*/
  475.  
  476. h1.post-title {margin-top: 0;}
  477.  
  478. /*----- LINK -----*/
  479.  
  480. a.link-wrap {display: block; border: 1px solid {color:borders};}
  481. .link {padding: 2em;}
  482. .link-host, .link-txt {margin-top: 1.5em;}
  483.  
  484. .npf-link-block {
  485. margin-top: 1.5em;
  486. background-color: inherit;
  487. border: 1px solid inherit;
  488. color: inherit;
  489. }
  490.  
  491. /*----- PHOTO -----*/
  492.  
  493. img {
  494. margin: 0;
  495. display: block;
  496. height: auto;
  497. max-width: 100%;
  498. }
  499.  
  500. .photo img {width: 100%;}
  501. .vignette, #vignette {opacity: 0;}
  502. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  503.  
  504. .lightbox-image, #tumblr_lightbox img {
  505. box-shadow: none !important;
  506. border-radius: 0 !important;
  507. max-width: none;
  508. }
  509.  
  510. #tumblr_lightbox_caption, .lightbox-caption {
  511. color: #fff !important;
  512. font-family: inherit;
  513. margin-top: 1em !important;
  514. }
  515.  
  516. /*----- PHOTOSET -----*/
  517.  
  518. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  519. margin-left: 0 !important;
  520. margin-right: 0 !important;
  521. }
  522.  
  523. [photoset-layout] {
  524. grid-gap:4px;
  525. }
  526.  
  527. [photoset-layout] div {
  528. cursor:pointer;
  529. }
  530. /*----- QUOTE -----*/
  531.  
  532. .quote {
  533. line-height: 160%;
  534. font-size: 1.15em;
  535. padding:25px;
  536. background:{color:Posts};
  537. border-radius:7px 7px 0 0;
  538. box-shadow:0px 1px 1px {color:borders};
  539. margin-bottom:0;
  540.  
  541. }
  542.  
  543. .quote p:first-of-type {margin-top: 0;}
  544. .quote p:last-of-type {margin-bottom: 0;}
  545.  
  546. .source {
  547. margin-top:0;
  548. padding:10px 25px 10px 25px;
  549. border-radius:0px 0px 7px 7px;
  550. background: linear-gradient(to right, {color:Gradient Color 1}, {color:Gradient Color 2});
  551. color:{color:title};
  552. box-shadow:0px 1px 1px {color:borders};
  553. }
  554.  
  555. .source a {
  556. color:{color:link};
  557. }
  558.  
  559. .source a:hover {
  560. color:{color:link hover};
  561. }
  562.  
  563. /*----- CHAT -----*/
  564.  
  565. .chat {padding: 0; margin: 0;}
  566. .chat li {list-style-type: none; margin-top: 1em;}
  567. .chat li:first-of-type {margin-top: 0;}
  568. .chatter {font-weight: bold;}
  569.  
  570. p.npf_chat, p.npf_chat b {font-family: inherit;}
  571.  
  572. /*----- ANSWER -----*/
  573.  
  574. .ask-wrap {
  575. padding:20px;
  576. border-radius:7px 7px 0 0;
  577. background: linear-gradient(to right, {color:Gradient Color 1}, {color:Gradient Color 2});
  578. }
  579.  
  580. .ask-icon {
  581. display: inline-block;
  582. vertical-align: middle;
  583. width: 2em;
  584. height: 2em;
  585. margin-right: 1em;
  586. border-radius:3px;
  587. margin-left:2em;
  588. margin-top:2em;
  589. margin-bottom:2em;
  590. }
  591.  
  592. .asking {
  593. display: inline-block;
  594. margin-left: 1em;
  595. margin-right:1em;
  596. font-weight: bold;
  597. margin-bottom:0.2em;
  598. margin-top:1.5em;
  599. color:{color:title};
  600. }
  601.  
  602. .question {
  603. margin-top:0.2em;
  604. margin-left:2em;
  605. margin-right:2em;
  606. margin-bottom:2em;
  607. padding:15px;
  608. background:{color:Posts};
  609. border-radius:7px;
  610.  
  611. }
  612.  
  613.  
  614. .question p:first-of-type {margin-top: 0;}
  615. .question p:last-of-type {margin-bottom: 0;}
  616.  
  617. .answr {
  618. padding: 20px 40px 20px 20px;
  619. list-style:none;
  620. background:{color:posts};
  621. border-radius:0 0 7px 7px;
  622. box-shadow:0px 1px 1px {color:borders};
  623. }
  624.  
  625. .reps {
  626. margin-top: 2em;
  627. margin-left:2em;
  628. margin-bottom:2em;
  629. }
  630.  
  631.  
  632. /*----- AUDIO -----*/
  633.  
  634. .audiopost {
  635. margin-bottom: 2em;
  636. margin-top:2em;
  637.  
  638. }
  639.  
  640.  
  641. .album-art {
  642. z-index: 1;
  643. display: inline-block;
  644. vertical-align: middle;
  645. border-radius:7px;
  646. float: left;
  647. width: 100px;
  648. height: 100px;
  649. }
  650.  
  651. .audio-player-wrap {
  652. width: 100px;
  653. height: 100px;
  654. display: inline-block;
  655. }
  656.  
  657. .button {
  658. width: 30px;
  659. height: 30px;
  660. overflow: hidden;
  661. position: relative;
  662. z-index: 2;
  663. margin: 7px;
  664. }
  665.  
  666. .audiobox {
  667. background-color: #f2f2f2;
  668. z-index: 3;
  669. position: absolute;
  670. margin: 28px 0 0 28px;
  671. border-radius: 50%;
  672. opacity:0.5;
  673. }
  674.  
  675. .audioinfo {
  676. display: inline-block;
  677. height: 100px;
  678. max-width: calc(100% - 100px);
  679. margin-left: 100px;
  680. display: flex;
  681. justify-content: center;
  682. flex-direction: column;
  683. box-sizing: border-box;
  684. padding-left: 2em;
  685. }
  686.  
  687. .audioinfo li {
  688. list-style-type: none;
  689.  
  690. }
  691. .track {
  692. font-weight: bold;
  693. color:{color:Title};
  694. padding:15px;
  695. border-radius:7px 7px 0 0;
  696. background: linear-gradient(to right, {color:Gradient Color 1}, {color:Gradient Color 2});
  697. }
  698.  
  699.  
  700. .artist {
  701. padding:15px;
  702. background:{color:Posts};
  703. background:{color:Posts};
  704. border-radius:0 0 7px 7px;
  705. box-shadow:0px 1px 1px {color:borders};
  706.  
  707. }
  708.  
  709. .spotify_audio_player {
  710.  
  711. height: 80px !important;
  712. width:540px;
  713.  
  714. }
  715.  
  716.  
  717. /*----- INFO -----*/
  718.  
  719.  
  720. .info {
  721. margin-top: 1em;
  722. font-size:13.5px;
  723. background:{color:footer};
  724. border-radius:7px;
  725.  
  726. }
  727. .info a {
  728. display: inline-block;
  729. vertical-align: middle;
  730. position:relative;
  731. padding:6px 0px 6px 0px;
  732. color:{color:footer link};
  733. margin-left:1em;
  734. }
  735.  
  736. .info a:hover{
  737. color:{color:link hover};
  738. }
  739.  
  740.  
  741. svg {
  742. width:15px;
  743. height:15px;
  744. opacity:1;
  745. display:block;
  746. overflow:visible;
  747. margin-top:3px;
  748. fill:{color:sidebar link hover};
  749. padding:12px;
  750.  
  751. }
  752.  
  753.  
  754. .controls a {
  755. margin-top:1.2em;
  756. position:absolute;
  757. display:block;
  758. z-index: 999;
  759. text-align: center;
  760. background:{color:Gradient Color 1};
  761. border-radius:7px;
  762. box-shadow:0px 1px 1px {color:borders};
  763.  
  764. }
  765.  
  766. svg:hover {
  767. fill:{color:sidebar link};
  768. -webkit-transition: all 0.3s;
  769. -moz-transition: all 0.3s;
  770. -ms-transition: all 0.3s;
  771. -o-transition: all 0.3s;
  772. transition: all 0.3s;
  773. }
  774.  
  775. .controls .like .liked + svg {
  776. opacity:1;
  777. }
  778. .controls .like .liked + svg path {
  779. fill:#ec5a5a;
  780. }
  781. .controls .like .like_button {
  782. position:relative;
  783. }
  784. .controls .like .like_button iframe {
  785. position:absolute;
  786. top:0;
  787. left:0;
  788. bottom:0;
  789. right:0;
  790. z-index:2;
  791. opacity:0;
  792. }
  793.  
  794.  
  795. .info a, .tags a {
  796. margin-right: 0.75em;
  797.  
  798. }
  799.  
  800. a.pinned-post {font-weight: bold;}
  801.  
  802. .reb {
  803. position:absolute;
  804. display:block;
  805. font-size:17px;
  806. z-index: 999;
  807. padding-top:10px;
  808. height:100px;
  809. right:-60px;
  810. }
  811.  
  812. .reb a {
  813. text-align: center;
  814. color:{color:sidebar link hover};
  815. border-radius:7px;
  816. background:{color:Gradient Color 1};
  817. box-shadow:0px 1px 1px {color:borders};
  818. }
  819.  
  820. .reb a:hover{
  821. color:{color:sidebar link};
  822. background:{color:sidebar};
  823. -webkit-transition: all 0.3s;
  824. -moz-transition: all 0.3s;
  825. -ms-transition: all 0.3s;
  826. -o-transition: all 0.3s;
  827. transition: all 0.3s;
  828. }
  829.  
  830. .rebbutton a {
  831. padding:10px;
  832. }
  833.  
  834. /*---- POST NOTES -----*/
  835.  
  836. .notes {
  837. margin-top: 1em;
  838. position:relative;
  839. display:inline-block;
  840. }
  841.  
  842. ol.notes {
  843. max-width: 100%;
  844. padding: 0;
  845. margin: 2em 0 0 0;
  846. }
  847.  
  848. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  849.  
  850. ol.notes li.note img.avatar {
  851. margin-right: 1em;
  852. vertical-align: middle;
  853. display: inline-block;
  854. width: 1.25em;
  855. height: 1.25em;
  856. }
  857.  
  858. /*---- PAGINATION -----*/
  859.  
  860. .pagination {
  861. text-align: center;
  862. padding:20px;
  863. width: auto
  864. position:relative;
  865. margin:50px;
  866.  
  867. }
  868.  
  869. .pagination a {
  870. color:{color:link};
  871. background:{color:sidebar};
  872. padding:10px;
  873. font-size:10px;
  874. margin:30px;
  875. border-radius:5px;
  876. box-shadow:0px 1px 1px {color:borders};
  877. }
  878.  
  879. .pagination a:hover {
  880. color:{color:sidebar link hover};
  881. background:linear-gradient(to right, {color:Gradient Color 1}, {color:Gradient Color 2});
  882. }
  883.  
  884. /*---- TAGS -----*/
  885.  
  886. .tags {
  887. margin-top:2em;
  888. display:block;
  889. padding:0px;
  890. margin-bottom:3em;
  891. font-size:13px;
  892. line-height:2em;
  893. word-break: break-all;
  894.  
  895. }
  896.  
  897. .tags a {
  898. font-style:normal;
  899. display:inline;
  900. line-height:2em;
  901. margin-right:2em;
  902. }
  903.  
  904. /*---- CREDIT -----*/
  905.  
  906. #credit {
  907. position: fixed;
  908. bottom: 20px;
  909. right: 20px;
  910. font-size: 15px;
  911. }
  912.  
  913.  
  914.  
  915. {CustomCSS}
  916.  
  917. </style>
  918. </head>
  919.  
  920. <!----- HTML ----->
  921.  
  922. <body>
  923.  
  924. <!-- main = main container -->
  925.  
  926. <main>
  927.  
  928. <!----- SIDEBAR ----->
  929.  
  930.  
  931. <aside id="sidebar">
  932.  
  933. <div class="blogtitle"><a href="/">{Title}</a></div>
  934.  
  935. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>{/block:ifSidebarImage}
  936.  
  937. {block:Description}<div id="description">{Description}</div>{/block:Description}
  938.  
  939. <div class="nav">
  940.  
  941. {block:ifHomeicon}<a href="/" title="home" ><div class="icon1"></div>{icon1}</a>
  942. {/block:ifHomeicon}
  943.  
  944. {block:AskEnabled}{block:ifAskicon}<a href="/ask" title="message"> <div class="icon2"></div>{icon2}</a>{/block:ifAskicon}{/block:AskEnabled}
  945.  
  946. {block:ifArchiveicon}<a href="/archive" title="archive"><div class="icon3"></div>{icon3}</a>{/block:ifArchiveicon}
  947.  
  948. {block:ifLink1}<a href="{text:Link 1}" title="{text:Link 1 hover title}"> <div class="icon4"></div>{icon4}</a>{/block:ifLink1}
  949.  
  950. {block:ifLink2}<a href="{text:Link 2}" title="{text:Link 2 hover title}"> <div class="icon5"></div>{icon5}</a>{/block:ifLink2}
  951.  
  952. {block:ifLink3}<a href="{text:Link 3}" title="{text:Link 3 hover title}"><div class="icon6"></div>{icon6}</a>{/block:ifLink3}
  953.  
  954. {block:ifLink4}<a href="{text:Link 4}" title="{text:Link 4 hover title}"><div class="icon7"></div>{icon7}</a>{/block:ifLink4}
  955.  
  956. {block:ifLink5}<a href="{text:Link 5}" title="{text:Link 5 hover title}"><div class="icon8"></div>{icon8}</a>{/block:ifLink5}
  957.  
  958. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  959.  
  960. </div>
  961.  
  962.  
  963. </aside>
  964.  
  965. <!-- POST CONTAINER -->
  966.  
  967. <section>
  968.  
  969. <!----- POSTS ----->
  970.  
  971. {block:posts inlineMediaWidth="1280"}
  972.  
  973. {block:Date} <div class="reb">
  974. <div class="rebbutton"><a href="{ReblogURL}" target="_blank"><i class="cp cp-reblog-alt"></i></a></div>
  975.  
  976. <div class="controls"><a href="#" class="like">{LikeButton}
  977. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95 c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1 c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1 c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4 c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5 c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767 c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45 c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg>
  978. </a>
  979. </div>
  980. </div>
  981.  
  982.  
  983. {/block:Date}
  984.  
  985.  
  986. <article class="posts" post-type="{PostType}">
  987.  
  988.  
  989. {block:Text}
  990. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  991. {block:NotReblog}
  992. <li class="caption text-caption">
  993. <div class="comment">{Body}</div>
  994. </li>
  995. {/block:NotReblog}
  996. {block:RebloggedFrom}
  997. {block:Reblogs}
  998. <li class="caption text-caption">
  999. <img src="{PortraitURL-64}" class="user-icon">
  1000. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1001. <div class="comment">{Body}</div>
  1002. </li>
  1003. {/block:Reblogs}
  1004. {/block:RebloggedFrom}
  1005. {/block:Text}
  1006.  
  1007. {block:Link}
  1008. <a href="{URL}" class="link-wrap">
  1009. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1010. <div class="link">
  1011. <div class="title">{Name}</div>
  1012. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1013. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1014. </div>
  1015. </a>
  1016. {block:Description}
  1017. {block:NotReblog}
  1018. <li class="caption">
  1019. <div class="comment"> {Description} </div>
  1020. </li>
  1021. {/block:NotReblog}
  1022. {/block:Description}
  1023. {block:RebloggedFrom}
  1024. {block:Reblogs}
  1025. <li class="caption">
  1026. <img src="{PortraitURL-64}" class="user-icon">
  1027. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1028. <div class="comment"> {Body} </div>
  1029. </li>
  1030. {/block:Reblogs}
  1031. {/block:RebloggedFrom}
  1032. {/block:Link}
  1033.  
  1034. {block:Photo}
  1035. <div class="photo">
  1036. {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}
  1037. </div>
  1038. {block:Caption}
  1039. {block:NotReblog}
  1040. <li class="caption">
  1041. <div class="comment"> {Caption} </div>
  1042. </li>
  1043. {/block:NotReblog}
  1044. {block:RebloggedFrom}
  1045. {block:Reblogs}
  1046. <li class="caption">
  1047. <img src="{PortraitURL-64}" class="user-icon">
  1048. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1049. <div class="comment"> {Body} </div>
  1050. </li>
  1051. {/block:Reblogs}
  1052. {/block:RebloggedFrom}
  1053. {/block:Caption}
  1054. {/block:Photo}
  1055.  
  1056. {block:Photoset}
  1057. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>{block:Caption}
  1058. {block:NotReblog}
  1059. <li class="caption">
  1060. <div class="comment">{Caption}</div>
  1061. </li>
  1062. {/block:NotReblog}
  1063. {block:RebloggedFrom}
  1064. {block:Reblogs}
  1065. <li class="caption">
  1066. <img src="{PortraitURL-64}" class="user-icon">
  1067. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1068. <div class="comment">{Body}</div>
  1069. </li>
  1070. {/block:Reblogs}
  1071. {/block:RebloggedFrom}
  1072. {/block:Caption}
  1073.  
  1074. {/block:Photoset}
  1075.  
  1076.  
  1077. {block:Video}
  1078. <div class="video">{VideoEmbed-700}</div>
  1079. {block:Caption}
  1080. {block:NotReblog}
  1081. <li class="caption">
  1082. <div class="comment">{Caption}</div>
  1083. </li>
  1084. {/block:NotReblog}
  1085. {block:RebloggedFrom}
  1086. {block:Reblogs}
  1087. <li class="caption">
  1088. <img src="{PortraitURL-64}" class="user-icon">
  1089. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1090. <div class="comment"> {Body} </div>
  1091. </li>
  1092. {/block:Reblogs}
  1093. {/block:RebloggedFrom}
  1094. {/block:Caption}
  1095. {/block:Video}
  1096.  
  1097. {block:Quote}
  1098. <div class="quote">{Quote}</div>
  1099. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1100. {/block:Quote}
  1101.  
  1102. {block:Chat}
  1103. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1104. <ul class="chat">{block:Lines}
  1105. <li>
  1106. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1107. {Line}
  1108. </li>
  1109. {/block:Lines}</ul>
  1110. {/block:Chat}
  1111.  
  1112. {block:Answer}
  1113. <div class="ask-wrap">
  1114. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1115. <div class="asking">{Asker} asked</div>
  1116. <div class="question">{Question}</div>
  1117. </div>
  1118. {block:Answerer}
  1119. <li class="answr">
  1120. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1121. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1122. <div class="reps"> {Answer} </div>
  1123. </li>
  1124. {/block:Answerer}
  1125. {block:NotReblog}
  1126. <li class="answr">
  1127. <div class="reps"> {Replies} </div>
  1128. </li>
  1129. {/block:NotReblog}
  1130. {block:RebloggedFrom}
  1131. {block:Reblogs}
  1132. <li class="caption">
  1133. <img src="{PortraitURL-64}" class="user-icon">
  1134. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1135. <div class="comment"> {Body} </div>
  1136. </li>
  1137. {/block:Reblogs}
  1138. {/block:RebloggedFrom}
  1139. {/block:Answer}
  1140.  
  1141. {block:Audio}
  1142. <div class="audiopost">
  1143. <div class="audiobox">
  1144. <div class="button">
  1145. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1146. </div>
  1147. </div>
  1148. {block:AlbumArt}
  1149. <img src="{AlbumArtURL}" class="album-art">
  1150. {/block:AlbumArt}
  1151. <div class="audioinfo">
  1152. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1153.  
  1154. {block:Artist}<li class="artist">{Artist}</li>{/block:Artist}
  1155. </div>
  1156. </div>
  1157. {block:Caption}
  1158. {block:NotReblog}
  1159. <li class="caption">
  1160. <div class="comment">{Caption}</div>
  1161. </li>
  1162. {/block:NotReblog}
  1163. {block:RebloggedFrom}
  1164. {block:Reblogs}
  1165. <li class="caption">
  1166. <img src="{PortraitURL-64}" class="user-icon">
  1167. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1168. <div class="comment"> {Body} </div>
  1169. </li>
  1170. {/block:Reblogs}
  1171. {/block:RebloggedFrom}
  1172. {/block:Caption}
  1173. {/block:Audio}
  1174.  
  1175. <!----- INFO ----->
  1176.  
  1177.  
  1178. {block:Date}
  1179. <div class="info">
  1180. {block:PinnedPostLabel}<a href="{Permalink}" title="pinned post" class="pinned-post"><i class="cp cp-pin-o"></i>
  1181. </a>{/block:PinnedPostLabel}
  1182.  
  1183. <a href="{Permalink}" title="{TimeAgo}"><i class="cp cp-clock-o"></i></a>{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  1184.  
  1185.  
  1186. <!-- reblog info and content source on permalink pages -->
  1187.  
  1188. {block:PermalinkPage}
  1189.  
  1190. {block:RebloggedFrom}
  1191. <a href="{ReblogParentURL}">via</a>
  1192. {/block:RebloggedFrom}
  1193. {block:ContentSource}<a href="{SourceURL}">source</a>{/block:ContentSource}
  1194.  
  1195. {/block:PermalinkPage}
  1196.  
  1197.  
  1198. </div>
  1199. {/block:Date}
  1200. <!----- TAGS ----->
  1201.  
  1202. {block:HasTags}
  1203. <div class="tags">
  1204. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1205. </div>
  1206. {/block:HasTags}
  1207.  
  1208. <!----- POST NOTES ----->
  1209.  
  1210. {block:PermalinkPage}{block:Date}
  1211. {block:NoteCount}{block:PostNotes}
  1212. <div class="notes">
  1213. {PostNotes-64}
  1214. </div>
  1215. {/block:PostNotes}{/block:NoteCount}
  1216. {/block:Date}{/block:PermalinkPage}
  1217.  
  1218.  
  1219. </article>
  1220.  
  1221. {/block:Posts}
  1222.  
  1223.  
  1224.  
  1225. {block:Pagination}
  1226. <div class="pagination">
  1227.  
  1228. <span>{block:PreviousPage}<a href="{PreviousPage}"><i class="cp cp-chevron-left"></i></a>{/block:PreviousPage}
  1229.  
  1230. {block:NextPage}<a href="{NextPage}"><i class="cp cp-chevron-right"></i></a>{/block:NextPage}</span>
  1231. </div>
  1232.  
  1233. {/block:Pagination}
  1234.  
  1235. <!-- end of posts container -->
  1236.  
  1237. </section>
  1238.  
  1239.  
  1240. <!-- end of main container -->
  1241.  
  1242. </main>
  1243.  
  1244. <!-- DO NOT REMOVE THE CREDITS -->
  1245.  
  1246. <a href="https://arianagrandre.tumblr.com" title="credit" id="credit"><i class="cp cp-star-o"></i></a>
  1247.  
  1248. <script>
  1249. function gatherData(images, arr) {
  1250. for (let i = 0; i < images.length; i++) {
  1251. let currentData = {
  1252. "width": images[i].getAttribute('data-width'),
  1253. "height": images[i].getAttribute('data-height'),
  1254. "low_res": images[i].getAttribute('data-lowres'),
  1255. "high_res": images[i].getAttribute('data-highres')
  1256. };
  1257. arr.push(currentData);
  1258. }
  1259. }
  1260. function getIndex(elem) {
  1261. let i = 0;
  1262. while( (elem = elem.previousElementSibling) != null ) i++;
  1263. return i;
  1264. }
  1265. function lightbox(elem) {
  1266. let currentPhotoset = elem.parentNode;
  1267. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1268. let data = [];
  1269. gatherData(photosetPhotos, data);
  1270. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1271. }
  1272. </script>
  1273.  
  1274. <script src="https://unpkg.com/popper.js@1"></script>
  1275. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1276. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1277.  
  1278. <script>
  1279. tippy('a[title]', {
  1280. theme: 'custom',
  1281. arrow: tippy.roundArrow,
  1282. zIndex: 9999999999,
  1283. maxWidth: 300,
  1284.  
  1285. content(reference) {
  1286. const title = reference.getAttribute('title');
  1287. reference.removeAttribute('title');
  1288. return title;
  1289. },
  1290. });
  1291. </script>
  1292.  
  1293.  
  1294. </body>
  1295.  
  1296. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!