dhyas

THEME 04 - CINNAMON GIRL V1

Dec 16th, 2019 (edited)
3,084
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.50 KB | None | 0 0
  1. <!--
  2.  
  3. ♡ CINNAMON GIRL / THEME 04 (V1) by DHYA @ARIANAGRANDRE ♡
  4. [EDITED AS OF 8 MAY 2023]
  5. arianagrandre.tumblr.com
  6.  
  7. base code by @sorrism, icon fonts by Perxis (linearicons) / gradient tutorial by cssgradient.io / - NPF (mobile) photoset fix by @glenthemes / - no.js photosets by @annasthms & @eggdesign
  8.  
  9.  
  10.  
  11. Please DO NOT remove any credits. DO NOT claim or redistribute this theme, take parts as your own or use it as a base code. Feel free to edit it as much you like. Full terms and credits are on my theme page. Enjoy!
  12.  
  13.  
  14. -->
  15.  
  16. <!DOCTYPE html>
  17. <head>
  18.  
  19. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  20.  
  21. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  22.  
  23. <link rel="shortcut icon" href="{favicon}">
  24.  
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  27.  
  28. <!--Default Variables-->
  29.  
  30. <meta name="color:Background" content="#ffffff"/>
  31. <meta name="color:Posts" content="#f5f5f5"/>
  32. <meta name="color:Text" content="#868686"/>
  33. <meta name="color:Link" content="#81c0ce"/>
  34. <meta name="color:Link Hover" content="#aae2b1"/>
  35. <meta name="color:Title"content="#ffffff"/>
  36. <meta name="color:Scrollbar" content="#aabcff" />
  37. <meta name="color:Gradient Color 1" content="#a4c984" />
  38. <meta name="color:Gradient Color 2" content="#63bdc3" />
  39. <meta name="color:Gradient Color 3" content="#afc7f0" />
  40. <meta name="if:Show Title" content="0" />
  41. <meta name="if:Show Archive" content="0" />
  42.  
  43. <meta name="text:Link 1" content="" />
  44. <meta name="text:Link 1 URL" content="" />
  45. <meta name="text:Link 2" content="" />
  46. <meta name="text:Link 2 URL" content="" />
  47. <meta name="text:Link 3" content="" />
  48. <meta name="text:Link 3 URL" content="" />
  49. <meta name="text:Link 4" content="" />
  50. <meta name="text:Link 4 URL" content="" />
  51.  
  52. <meta name="image:Header" content=""/>
  53.  
  54.  
  55. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  56.  
  57. <link href="https://fonts.googleapis.com/css?family=Nunito|Palanquin+Dark&display=swap" rel="stylesheet">
  58.  
  59. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  60. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  61.  
  62.  
  63.  
  64. <!--
  65. NPF images fix v3.0 by @glenthemes [2021]
  66. 💌 git.io/JRBt7
  67. --->
  68. <script src="//npf-images-v3.github.io/script.js"></script>
  69. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  70. <style tmblr-npf>
  71. :root {
  72. --NPF-Caption-Spacing:1em;
  73. --NPF-Image-Spacing:4px;
  74. }
  75. </style>
  76.  
  77. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  78.  
  79. <!--CSS customization here. -->
  80.  
  81. <style type="text/css">
  82.  
  83.  
  84. /*tumblr controls and lightbox*/
  85.  
  86. .tmblr-lightbox {background:rgba({RGBcolor:background}, .95)!important;}
  87.  
  88. .tmblr-lightbox img {opacity:0;}
  89.  
  90. .lightbox-caption {
  91. color:{color:title}!important;
  92. font-family:inherit!important;
  93. font-size:1em!important;
  94. font-weight:normal!important;
  95. text-shadow:none!important;
  96. }
  97.  
  98. .lightbox-image {
  99. -moz-box-shadow:none!important;
  100. -webkit-box-shadow:none!important;
  101. box-shadow:none!important;
  102. -moz-border-radius:0px!important;
  103. -webkit-border-radius:0px!important;
  104. border-radius:0px!important;
  105. padding:0px!important;
  106. border:0!important;
  107. opacity:1!important;
  108. }
  109.  
  110. .vignette {opacity:0!Important;}
  111.  
  112. .iframe-controls--desktop {
  113. white-space:nowrap!important;
  114. top:5px!important;
  115. right:5px!important;
  116. opacity:1!important;
  117. position:fixed!important;
  118. }
  119.  
  120. /*tooltip*/
  121.  
  122. .ui-tooltip {
  123. position:Absolute;
  124. z-index:9999;
  125. padding-top:10px;
  126. }
  127.  
  128. .ui-tooltip-content {
  129. background:{color:background};
  130. padding:0 4px;
  131. font-style:italic;
  132. color:{color:link};
  133. text-transform:lowercase;
  134. border:1px solid {color:borders};
  135. }
  136.  
  137. /*scrollbar*/
  138.  
  139. ::-webkit-scrollbar{
  140. height:11px;
  141. width:11px;
  142. background:inherit;
  143. }
  144.  
  145. ::-webkit-scrollbar-thumb {background:{color:scrollbar};}
  146.  
  147. ::-webkit-scrollbar-track {background:{color:borders};}
  148.  
  149. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid {color:background};}
  150.  
  151.  
  152. /*main structure*/
  153.  
  154. body {
  155. background:{color:background};
  156. color:{color:text};
  157. font-size:11.5px;
  158. font-family:'nunito', sans-serif;
  159. line-height:1.5em;
  160. word-wrap:break-word;
  161. text-align:justify;
  162. text-transform:none;
  163. }
  164.  
  165. a {
  166. color:{color:link};
  167. text-decoration:none;
  168. transition:all .3s linear;
  169. -webkit-transition:all .3s linear;
  170. -o-transition:all .3s linear;
  171. -moz-transition:all .3s linear;
  172. }
  173.  
  174. a, a img {cursor:pointer;}
  175.  
  176. a:hover {
  177. color:{color:link hover}!important;
  178. text-decoration:none;
  179. }
  180.  
  181. img {
  182. opacity:1;
  183. border:0;
  184. text-decoration:none;
  185. max-width:100%;
  186. height:auto;
  187. display:block;
  188. }
  189.  
  190. blockquote {
  191. padding:.25em 0 .25em 15px;
  192. margin:.5em 0;
  193.  
  194.  
  195. }
  196.  
  197. pre {
  198. padding:0;
  199. margin:0;
  200. line-height:inherit!important;
  201. background:transparent;
  202. font-family:inherit!Important;
  203. font-size:inherit!important;
  204. white-space:pre-wrap;
  205. white-space:-moz-pre-wrap;
  206. white-space:-pre-wrap;
  207. white-space:-o-pre-wrap;
  208. word-wrap:break-word;
  209. }
  210.  
  211. p {margin:1em 0;}
  212.  
  213. p:first-of-type {margin-top:0;}
  214.  
  215. p:last-of-type {margin-bottom:0;}
  216.  
  217. b, strong, b a, strong a {
  218. font-weight:bold!important;
  219. color:{color:text};
  220. }
  221.  
  222. small, big, sub, pre {
  223. font-size:1em!important;
  224. line-height:1.4em!important;
  225. vertical-align:baseline!important;
  226. }
  227.  
  228. i {
  229. font-style:italic;
  230. }
  231.  
  232. h1, h2, h3, h4 {
  233. margin:1.5em 0;
  234. font-size:13px;
  235. letter-spacing:0.5px;
  236. font-weight:500;
  237. color:{color:text};
  238. font-weight:bold;
  239. }
  240.  
  241. .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%;}
  242.  
  243.  
  244. .posts ul li {
  245. list-style:none;
  246. line-height:150%;
  247. margin-left:0px;
  248. }
  249.  
  250. .posts ul li:before {
  251. content:'›';
  252. margin-right:1em;
  253. font-weight:100;
  254. font-size:10px;
  255.  
  256.  
  257. }
  258.  
  259. .posts h1:first-child, .posts h2:first-child, .posts h3:first-child, .posts h4:first-child {margin-top:0;}
  260.  
  261. hr {
  262. border:none;
  263. box-shadow:0;
  264. margin:2em auto;
  265. width:75px;
  266. }
  267.  
  268. /*header*/
  269.  
  270. header {
  271. width:540px;
  272. margin:80px auto;
  273. padding:0px;
  274. height:auto;
  275. background: linear-gradient(to right, {color:Gradient Color 1} , {color:Gradient Color 2} , {color:Gradient Color 3});
  276.  
  277.  
  278. }
  279.  
  280. .headerimg img {
  281. display:block;
  282. margin-top:10px;
  283. max-width:540px;
  284. height:auto;
  285. margin-bottom:10px;
  286. }
  287.  
  288. .nav {
  289.  
  290. padding-left:20px;
  291. padding-top:20px;
  292. padding-bottom:20px;
  293. text-align:left;
  294. line-height:13px;
  295. display:block;
  296.  
  297. }
  298.  
  299.  
  300. .nav a {
  301. font-size:12px;
  302. width:220px;
  303. font-weight:400;
  304. font-family: 'palanquin dark', sans-serif;
  305. text-transform:lowercase;
  306. color: #ffffff;
  307. -moz-transition-duration: 0.3s;
  308. -o-transition-duration: 0.3s;
  309. -webkit-transition-duration: 0.3s;
  310. transition-duration: 0.3s;
  311. padding-left:15px;
  312. }
  313.  
  314. .nav a:hover {
  315. color:{color:Link Hover};
  316. text-decoration:none;
  317. -moz-transition-duration: 0.3s;
  318. -o-transition-duration: 0.3s;
  319. -webkit-transition-duration: 0.3s;
  320. transition-duration: 0.3s;
  321. }
  322.  
  323. .longheader {
  324. top:0;
  325. left:0;
  326. right:0;
  327. position:fixed;
  328. padding: 20px;
  329. text-align: left;
  330. z-index: 9999;
  331. background-color: {color:background};
  332. width: 100%;
  333. font-family: 'palanquin dark', sans-serif;
  334. font-weight:400;
  335. text-transform:lowercase;
  336. color: #ffffff;
  337. display:none;
  338. }
  339.  
  340. .longheader a {
  341. margin:10px;
  342. padding:0px;
  343. }
  344.  
  345. .blogtitle {
  346. text-align:left;
  347. padding-top:20px;
  348. padding-left:20px;
  349. }
  350.  
  351. .blogtitle a {
  352. font-family: 'palanquin dark', sans-serif;
  353. letter-spacing:0.5px;
  354. font-weight:700;
  355. font-size:15px;
  356. color:{color:title};
  357. text-transform:uppercase;
  358. }
  359.  
  360.  
  361. #description {
  362. margin-top:15px;
  363. padding:25px;
  364. font-size:11px;
  365. text-align:left;
  366. font-family: {text:body};
  367. color:{color:text};
  368. background-color:{color:Posts};
  369.  
  370. }
  371.  
  372.  
  373. /*pagination*/
  374.  
  375. .pagination {
  376. width:540px;
  377. padding-bottom:50px;
  378. margin-top:100px;
  379. text-align:center;
  380. font-size:12.5px;
  381. font-family:'palanquin dark', sans-serif;
  382. text-transform:none;
  383. }
  384.  
  385.  
  386. .pagination a {
  387. color:{color:Link};
  388. padding:10px;
  389. -moz-transition-duration: 0.2s;
  390. -o-transition-duration: 0.2s;
  391. -webkit-transition-duration: 0.2s;
  392. transition-duration: 0.2s;
  393. }
  394.  
  395. .pagination a:hover {
  396. color:{color:Link Hover};
  397. text-decoration:none;
  398. -moz-transition-duration: 0.2s;
  399. -o-transition-duration: 0.2s;
  400. -webkit-transition-duration: 0.2s;
  401. transition-duration: 0.2s;
  402. }
  403.  
  404.  
  405. /*posts*/
  406.  
  407. section {
  408. width:540px;
  409. margin:0px auto 100px auto;
  410.  
  411. }
  412. .posts {
  413. width:540px;
  414. margin-bottom:100px;
  415. background-color:{color:Posts};
  416. text-align:justify;
  417.  
  418. }
  419.  
  420. .ph {
  421. position:relative;
  422. overflow:hidden;
  423. margin:0;
  424. }
  425.  
  426. .ph img {
  427. width:auto;
  428. display:block;
  429. }
  430.  
  431. .posts ul li {
  432. list-style:none;
  433. line-height:100%;
  434. margin-left:0px;
  435. }
  436.  
  437. .posts ul li:before {
  438. content:"›";
  439. color:{color:accent};
  440. padding-right:5px;
  441. }
  442.  
  443.  
  444.  
  445. /*titles*/
  446.  
  447. .title {
  448. font-family:{text:body};
  449. line-height:110%;
  450. margin-bottom:5px;
  451. font-size:13px;
  452. color:{color:text};
  453. text-transform:none;
  454. letter-spacing:0.5px;
  455. font-weight: 500;
  456. padding-left:20px;
  457. padding-top:20px;
  458. padding-right:20px;
  459. }
  460.  
  461. .title a {color:{color:link};}
  462.  
  463. .title a:hover {color:{color:link hover};}
  464.  
  465. /*captions*/
  466.  
  467. .userheader{
  468. padding:12px;
  469. width:100%;
  470. background: linear-gradient(to right, {color:Gradient Color 1} , {color:Gradient Color 2} , {color:Gradient Color 3});
  471. overflow:hidden;
  472.  
  473. }
  474.  
  475. .user {
  476.  
  477. line-height:20px;
  478. font-family:'palanquin dark',sans-serif;
  479. font-style:bold;
  480. font-weight:700;
  481. font-size:12px;
  482. color:#ffffff;
  483.  
  484.  
  485. }
  486.  
  487. .userrb {
  488. margin-bottom:0px;
  489. margin-left:10px;
  490. font-family:'palanquin dark',sans-serif;
  491. font-style:bold;
  492. font-weight:700;
  493. font-size:12px;
  494. color:{color:text};
  495. display:inline-block;
  496. padding-top:0px;
  497.  
  498. }
  499.  
  500.  
  501. .userrbuser {
  502. margin-top:23px;
  503. margin-left:5px;
  504. display:inline-block;
  505. color:{color:link};
  506. }
  507.  
  508.  
  509. .userrb img {
  510. border-radius: 20%;
  511. width: 18px;
  512. height: 18px;
  513. margin-right:10px;
  514. display:inline-block;
  515. margin-left:10px;
  516. margin-top:2em;
  517. float:left;
  518.  
  519. }
  520.  
  521. .user img {
  522. border-radius: 20%;
  523. width: 18px;
  524. height: 18px;
  525. margin-right:10px;
  526. margin-top:1px;
  527. display:inline-block;
  528. float:left;
  529. }
  530.  
  531.  
  532.  
  533. .comment {
  534.  
  535. list-style:none;
  536. overflow:hidden;
  537.  
  538. }
  539.  
  540. .comment:last-of-type {padding-bottom:0!important;}
  541.  
  542.  
  543. .captioned .comment:first-of-type {margin-top:1em; }
  544.  
  545. .tex {margin-top:1.5em;font:{text:body};
  546. padding-left:20px;
  547. padding-right:20px;
  548. padding-top:10px;
  549. line-height:1.5em;
  550.  
  551. }
  552.  
  553.  
  554. .tex li, .tex blockquote {
  555. margin-top:10px;
  556. margin-bottom:10px;
  557. text-align:left;
  558.  
  559. }
  560.  
  561. /*----- PHOTOSET -----*/
  562.  
  563. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  564. margin-left: 0 !important;
  565. margin-right: 0 !important;
  566. }
  567.  
  568. [photoset-layout] {
  569. grid-gap:4px;
  570. }
  571.  
  572. [photoset-layout] div {
  573. cursor:pointer;
  574. }
  575.  
  576. .photo-slideshow {
  577. width:auto!important;
  578. }
  579.  
  580. /*quote*/
  581.  
  582. .qsource {
  583.  
  584. padding:20px
  585. }
  586.  
  587.  
  588. /*audio*/
  589.  
  590. .playerwrap {
  591. padding:20px;
  592. padding-bottom:20px;
  593. background: linear-gradient(to right, {color:Gradient Color 1} , {color:Gradient Color 2} , {color:Gradient Color 3});
  594. }
  595.  
  596. .player {
  597. width:33px;
  598. position:absolute;
  599. z-index:9;
  600. margin-left:24px;
  601. overflow:hidden;
  602. border-radius: 10px;
  603. margin-top:25px;
  604. margin-bottom:5px;
  605. opacity:0.5;
  606. background-color:{color:Posts};
  607. }
  608.  
  609. .player a {
  610. opacity:1;
  611. }
  612.  
  613. .trname{
  614.  
  615. font-family:'palanquin dark',sans-serif;
  616. font-weight:bold;
  617. font-size:13px;
  618. font-style:italic;
  619. color:#ffffff;
  620. }
  621.  
  622.  
  623. .audio_info {
  624. margin-left:100px;
  625. margin-top:-90px;
  626. position:relative;
  627. padding:10px;
  628. line-height:2.5em;
  629. max-width:calc(100% - 35px);
  630. color:#ffffff;
  631. }
  632.  
  633. .audio_info span {
  634. white-space:nowrap;
  635. overflow:hidden;
  636. text-overflow:ellipsis;
  637. display:block;
  638. }
  639.  
  640. .albumart img {
  641. position:relative;
  642. height:80px;
  643. width:80px;
  644. border-radius:5px;
  645. margin-bottom:10px;
  646. margin-top:0px;
  647. }
  648.  
  649. .spotify_audio_player {
  650.  
  651. height: 80px !important;
  652. width:540px;
  653.  
  654. }
  655.  
  656.  
  657.  
  658. /*asks*/
  659.  
  660. .q {
  661. text-align:left;
  662. padding:20px;
  663. margin-bottom:-1em;
  664. font:{text:body};
  665. color:#ffffff;
  666. background: linear-gradient(to right, {color:Gradient Color 1} , {color:Gradient Color 2} , {color:Gradient Color 3});
  667. }
  668.  
  669. .qn {
  670. padding-left:20px;
  671. padding-right:20px;
  672. padding-top:40px;
  673. padding-bottom:30px;
  674. border-bottom:3px solid {color:background};
  675.  
  676. }
  677.  
  678. .askr {
  679. font-weight:700;
  680. font-family:'palanquin dark',sans-serif;
  681. font-size:12px;
  682. text-transform:lowercase;
  683. color:#ffffff;
  684. }
  685.  
  686. .askr a {
  687. margin-right:0px;
  688. color:#ffffff;
  689. }
  690.  
  691. .ansr {
  692. margin-top:2em;
  693. padding-left:20px;
  694. padding-right:20px;
  695. }
  696.  
  697. .as {text-transform:lowercase;}
  698.  
  699. .as a {color:{color:text};}
  700.  
  701. .as a:hover {color:{color:link hover};}
  702.  
  703. /*chat*/
  704.  
  705. .chat {
  706. text-align:left;
  707. margin:0;
  708. padding:20px;
  709. list-style:none;
  710. }
  711.  
  712. .l {
  713. padding:15px 0;
  714. border-bottom:1px solid {color:borders};
  715. }
  716.  
  717. .label {
  718. font-weight:bold;
  719. color:{color:title};
  720. display:inline-block;
  721. }
  722.  
  723. .l:first-of-type {padding-top:0;}
  724.  
  725. .l:last-of-type {
  726. padding-bottom:0;
  727. border:0;
  728. }
  729. /*permalink and notes*/
  730.  
  731. footer {
  732. margin: 30px auto;
  733. background-color:{color:background};
  734. }
  735.  
  736. .when {
  737. margin-top:1em;
  738. padding-top:15px;
  739. padding-left:10px;
  740. padding-bottom:15px;
  741. padding-right:10px;
  742. display:block;
  743. color:#ffffff;
  744. font-weight:700;
  745. font-size:12px;
  746. font-family:'palanquin dark',sans-serif;
  747. text-transform:lowercase;
  748. background: linear-gradient(to right, {color:Gradient Color 1} , {color:Gradient Color 2} , {color:Gradient Color 3});
  749.  
  750. }
  751.  
  752. .when a {
  753. font-weight:700;
  754. font-size:12px;
  755. font-family:'palanquin dark',sans-serif;
  756. color:#ffffff;
  757. text-transform:lowercase;
  758.  
  759. }
  760.  
  761. .tags {
  762. margin-top:1.5em;
  763. line-height:2em;
  764. font-size:11px;
  765. padding-top:0px;
  766. padding-right:5px;
  767. padding-left:5px;
  768. display:block;
  769. background:{color:background};
  770.  
  771. }
  772.  
  773. .tags a {
  774. font-style:normal;
  775. word-spacing:1,7px;
  776. font-family: {text:body};
  777. color:{color:text};
  778. display:inline;
  779. margin:0 5px;
  780. }
  781.  
  782. .pagenotes {
  783.  
  784. margin-top:-30px;
  785. color:#656464;
  786. padding:20px;
  787. background:{color:background};
  788.  
  789. }
  790.  
  791. ol.notes {
  792. list-style-type:none;
  793. padding:0px;
  794. margin:0px;
  795. }
  796.  
  797. ol.notes li.note {
  798. display:block;
  799. padding:0;
  800. margin:5px 0;
  801. }
  802.  
  803. ol.notes li.note img.avatar {display:none!important;}
  804.  
  805. a.more_notes_link {
  806. display:block;
  807. text-align:center;
  808. color:{color:link};
  809. font-family:{text:body};
  810. padding:20px;
  811. }
  812.  
  813. .credit {
  814. position:fixed;
  815. right:12.5px;
  816. bottom:15px;
  817. color:#3c3c3c;
  818. }
  819.  
  820.  
  821. {CustomCSS}
  822.  
  823. </style>
  824.  
  825. </head>
  826.  
  827. <body>
  828.  
  829. <header>
  830.  
  831. <div class="longheader"><a href="/"><span class="lnr lnr-map"></span> Home</a> <a href="/ask"><span class="lnr lnr-bubble"></span> Message</a> {block:ifLink1}<a href="{text:Link 1 URL}"><span class="lnr lnr-list"></span> {text:Link 1}</a>{/block:ifLink1} {block:ifLink2}<a href="{text:Link 2 URL}"><span class="lnr lnr-user"></span> {text:Link 2}</a>{/block:ifLink2} {block:ifLink3}<a href="{text:Link 3 URL}"><span class="lnr lnr-inbox"></span> {text:Link 3}</a>{/block:ifLink3} {block:ifLink4}<a href="{text:Link 4 Url}"><span class="lnr lnr-bookmark"></span> {text:Link 4}</a>{/block:ifLink4} {block:ifShowArchive}<a href="/archive"><span class="lnr lnr-calendar-full"></span></a> {/block:ifShowArchive}</div> </div>
  832.  
  833. {block:ifHeaderImage}<div class="headerimg"><a href="/"><img src="{image:Header}"/></a></div>{/block:ifHeaderImage}
  834. {block:ifShowTitle}<div class="blogtitle"><a href="/">{Title}</a>
  835. </div>{/block:ifShowTitle}
  836.  
  837. <div id="description">{Description}</div>
  838.  
  839.  
  840. <div class="nav"><a href="/"><span class="lnr lnr-map"></span> Home</a> <a href="/ask"><span class="lnr lnr-bubble"></span> Message</a> {block:ifLink1}<a href="{text:Link 1 URL}"><span class="lnr lnr-list"></span> {text:Link 1}</a>{/block:ifLink1} {block:ifLink2}<a href="{text:Link 2 URL}"><span class="lnr lnr-user"></span> {text:Link 2}</a>{/block:ifLink2} {block:ifLink3}<a href="{text:Link 3 URL}"><span class="lnr lnr-inbox"></span> {text:Link 3}</a>{/block:ifLink3} {block:ifLink4}<a href="{text:Link 4 Url}"><span class="lnr lnr-bookmark"></span> {text:Link 4}</a>{/block:ifLink4} {block:ifShowArchive}<a href="/archive"><span class="lnr lnr-calendar-full"></span></a> {/block:ifShowArchive}</div>
  841. </header>
  842.  
  843. <section id="entries">
  844.  
  845. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  846.  
  847. <article class="posts" post-type="{PostType}" {block:caption}captioned{/block:caption}>
  848.  
  849.  
  850. {block:Quote}
  851. <div class="title quote">{quote}</div>
  852. {block:Source}<div class="qsource">{source}</div>{/block:Source}
  853. {/block:Quote}
  854.  
  855.  
  856. {block:Text}
  857. {block:Title}<div class="title">{title}</div>{/block:Title}
  858. {block:RebloggedFrom}
  859. {block:Reblogs}
  860. <div class="comment">
  861. {block:Title}<li class="ted">{/block:Title}
  862. <a {block:haspermalink}href="{Permalink}"{/block:haspermalink} class="userrb" target="_blank"><img src="{PortraitURL-64}"> <div class="userrbuser">{username}</div></a>
  863. <div class="tex">{body}</div>
  864. </div>
  865. {/block:Reblogs}
  866. {/block:RebloggedFrom}
  867. {block:NotReblog}
  868. <li class="comment {block:Title}ted{/block:Title}">
  869. <div class="tex">{body}</div>
  870. </li>
  871. {/block:NotReblog}
  872. {/block:Text}
  873.  
  874. {block:Link}<div class="title"><a href="{URL}">{name}</a></div>
  875. {block:Description}
  876. {block:NotReblog}
  877. <li class="comment ted">
  878. <div class="tex">{description}</div>
  879. </li>
  880. {/block:NotReblog}
  881. {/block:Description}
  882. {block:RebloggedFrom}
  883. {block:Reblogs}
  884. <li class="comment">
  885. <a {block:haspermalink}href="{Permalink}"{/block:haspermalink}</a>
  886. <div class="tex">{body}</div>
  887. </li>
  888. {/block:Reblogs}
  889. {/block:RebloggedFrom}
  890. {/block:Link}
  891.  
  892. {block:Chat}
  893. {block:Title}<div id="title">{title}</div>{/block:Title}
  894. <ol class="chat {block:Title}ted{/block:Title}">
  895. {block:lines}
  896. <li class="l {Alt}">
  897. {block:label}<span class="label">{label}</span>{/block:label} {line}
  898. </li>
  899. {/block:lines}
  900. </ol>
  901. {/block:Chat}
  902.  
  903. <div class="ph">
  904.  
  905. {block:Photo}{linkopentag}<img src="{photoURL-HighRes}" alt="{PhotoAlt}"/>{linkclosetag}{/block:Photo}
  906.  
  907. {block:Photoset}<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:Photoset}
  908.  
  909. {block:Video}<div class="video">{VideoEmbed-700}</div>{/block:Video}
  910.  
  911.  
  912. {block:Audio}
  913.  
  914. <div class="playerwrap">
  915. <div class="player">{audioplayerwhite}</div>
  916. {block:albumart}<div class="albumart"><img src="{albumartURL}"></div class="albumart">{/block:albumart}
  917. <div class="audio_info">
  918. {block:trackname}<span class="trname">{trackname}</span>{/block:trackname}
  919. {block:album}<span class="album">{album}{/block:album} by {block:artist}{artist}{/block:artist}</span>
  920.  
  921. </div></div>
  922.  
  923. {/block:Audio}
  924.  
  925. {block:caption}
  926. {block:Reblogs}
  927. <li class="comment">
  928. <div class="userheader"><a {block:haspermalink}href="{Permalink}"{/block:haspermalink} class="user" target="_blank"> <img src="{PortraitURL-64}"> {username}</a></div>
  929. <div class="tex">{body}</div>
  930. </li>
  931. {/block:Reblogs}
  932. {block:NotReblog}
  933. <li class="comment" style="padding:0">
  934. <div class="tex">{caption}</div>
  935. </li>
  936. {/block:NotReblog}
  937. {/block:caption}
  938. </div>
  939.  
  940. {block:Answer}
  941. <div class="q">
  942. <span class="askr"><div class="user"><img src="{AskerPortraitURL-64}"> {username}</a></div>{Asker} asked</span></div> <div class="qn">{Question}</div>
  943. {block:Answerer}
  944. <div class="ansr">
  945. <div class="user"><img src="{AnswererPortraitURL-64}"> {username}</a> {answerer}</div> <div class="tex">{answer}</div>
  946. </div>
  947. {/block:Answerer}
  948. {block:NotReblog}
  949. <li class="comment">
  950. <div class="tex">{replies}</div>
  951. </li>
  952. {/block:NotReblog}
  953. {block:RebloggedFrom}
  954. {block:Reblogs}
  955. <li class="comment">
  956. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank"><img src="{PortraitURL-64}">{username}</a>
  957. <div class="tex">{body}</div>
  958. </li>
  959. {/block:Reblogs}
  960. {/block:RebloggedFrom}
  961. {/block:Answer}
  962.  
  963.  
  964. {block:Date}
  965.  
  966. <footer>
  967. <div class="when">
  968. <span><a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero}</a>{block:NoteCount} {NoteCountWithLabel}{/block:NoteCount}
  969.  
  970. {block:Permalink}{block:ContentSource} <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}
  971. {/block:Permalink}
  972. <div style="float:right">
  973. {block:RebloggedFrom}<a href="{ReblogParentURL}">Via</a>{/block:RebloggedFrom} 
  974. <a href="{ReblogURL}" target="_blank" class="reblog">
  975. Reblog
  976. </a>
  977. </a></div></div></span></div>
  978. <div class="tags">
  979. {block:hastags}
  980. <span class="tags">{block:Tags}<a href="{TagUrl}"> <span class="lnr lnr-tag"></span> {Tag}</a>{/block:Tags}</span>
  981. {/block:hasTags}
  982. </div>
  983. </footer>
  984. {/block:Date}
  985.  
  986. </article>
  987.  
  988. {block:PostNotes}
  989. <article class="posts pagenotes">
  990. <hr>
  991. {PostNotes}
  992. </article>
  993. {/block:PostNotes}
  994.  
  995. {/block:Posts}
  996.  
  997. {block:Pagination}
  998. <div class="pagination">
  999. <span>
  1000. {block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage}
  1001. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage} </span>
  1002. </div>
  1003. {/block:Pagination}
  1004.  
  1005. </section>
  1006.  
  1007. <script>
  1008. $(window).scroll(function() {
  1009. var ScrollTop = parseInt($(window).scrollTop());
  1010. //console.log(scroll);
  1011. if (ScrollTop > 420) {
  1012. //console.log('ScrollTop');
  1013. $(".longheader").fadeIn(700);
  1014. } else {
  1015. //console.log('ScrollTop ');
  1016. $(".longheader").fadeOut(700);
  1017. }
  1018. });
  1019.  
  1020. </script>
  1021.  
  1022. <script>
  1023. function gatherData(images, arr) {
  1024. for (let i = 0; i < images.length; i++) {
  1025. let currentData = {
  1026. "width": images[i].getAttribute('data-width'),
  1027. "height": images[i].getAttribute('data-height'),
  1028. "low_res": images[i].getAttribute('data-lowres'),
  1029. "high_res": images[i].getAttribute('data-highres')
  1030. };
  1031. arr.push(currentData);
  1032. }
  1033. }
  1034. function getIndex(elem) {
  1035. let i = 0;
  1036. while( (elem = elem.previousElementSibling) != null ) i++;
  1037. return i;
  1038. }
  1039. function lightbox(elem) {
  1040. let currentPhotoset = elem.parentNode;
  1041. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1042. let data = [];
  1043. gatherData(photosetPhotos, data);
  1044. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1045. }
  1046. </script>
  1047.  
  1048. {block:ContentSource}
  1049. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1050. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1051. {/block:SourceLogo}
  1052. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1053. {/block:ContentSource}
  1054.  
  1055. <div class="credit"><a href="https://arianagrandre.tumblr.com/" title="arianagrandre"><span class="lnr lnr-star"></span></span></a></div>
  1056.  
  1057. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment