dhyas

THEME 06 - JUST LIKE MAGIC (V2 GLITCH FIX)

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