API tools faq
paste
Mangolias

Ariel Theme (Updated)

Mangolias
Aug 11th, 2019
1,273
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. Ariel Theme by Mangolias
  7.  
  8. ~ mangolias.tumblr.com ~
  9.  
  10. Credits: pxu photosets by pixel union
  11. icons by fontawesome
  12. responsive videos by nouvae.tumblr.com
  13. unnest by neothm and magnusthemes
  14.  
  15. -->
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. {block:Description}
  20. <meta name="description" content="{MetaDescription}">
  21. {/block:Description}
  22. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  23.  
  24. <meta name="image:Sidebar" content="">
  25. <meta name="if:Show Avatar" content="">
  26. <meta name="if:Show Captions" content="">
  27. <meta name="if:Show Tags" content="">
  28. <meta name="if:Show Search" content="">
  29. <meta name="if:Full Photosets" content="">
  30. <meta name="if:Dashboard Captions" content="">
  31.  
  32. <meta name="select:Post Width" content="400px">
  33. <meta name="select:Post Width" content="500px">
  34.  
  35. <meta name="select:Font" content="Karla"/>
  36. <meta name="select:Font" content="Crimson Text"/>
  37. <meta name="select:Font" content="Roboto Mono"/>
  38. <meta name="select:Font" content="Vollkorn"/>
  39.  
  40. <meta name="color:Background" content="#f3f3f3"/>
  41. <meta name="color:Sidebar" content"#f3f3f3"/>
  42. <meta name="color:Posts" content="#ffffff"/>
  43. <meta name="color:Title" content="#979797"/>
  44. <meta name="color:Text" content="#aeaeae"/>
  45. <meta name="color:Question Text" content="#ffffff"/>
  46. <meta name="color:Question Background" content"#dcdcdc"/>
  47. <meta name="color:Borders" content="#ffffff"/>
  48. <meta name="color:Audio Color" content="#f5f5f5"/>
  49. <meta name="color:Hover Color" content="#e4e4e4"/>
  50. <meta name="color:Scrollbar" content="#aeaeae"/>
  51.  
  52. <meta name="text:Title Font Size" content="20px">
  53. <meta name="text:Body Font Size" content="11px">
  54. <meta name="text:Header Font Size" content="13px">
  55.  
  56. <meta name="text:Home" content="Home">
  57. <meta name="text:Ask" content="Ask">
  58. <meta name="text:Submit" content="Submit">
  59. <meta name="text:Archive" content="Archive">
  60.  
  61. <meta name="text:Link One" content="">
  62. <meta name="text:Link One URL" content="">
  63. <meta name="text:Link Two" content="">
  64. <meta name="text:Link Two URL" content="">
  65. <meta name="text:Link Three" content="">
  66. <meta name="text:Link Three URL" content="">
  67. <meta name="text:Link Four" content="">
  68. <meta name="text:Link Four URL" content="">
  69.  
  70. <meta name="text:Instagram URL" content="">
  71. <meta name="text:Facebook URL" content="">
  72. <meta name="text:Youtube URL" content="">
  73. <meta name="text:Vimeo URL" content="">
  74. <meta name="text:Twitter URL" content="">
  75. <meta name="text:Tumblr URL" content="">
  76. <meta name="text:Google URL" content="">
  77. <meta name="text:Behance URL" content="">
  78. <meta name="text:Codepen URL" content="">
  79. <meta name="text:Youtube URL" content="">
  80. <meta name="text:Twitch URL" content="">
  81. <meta name="text:Dribbble URL" content="">
  82. <meta name="text:Linkedin URL" content="">
  83. <meta name="text:Pinterest URL" content="">
  84. <meta name="text:Snapchat URL" content="">
  85. <meta name="text:Spotify URL" content="">
  86. <meta name="text:Social Link URL" content="">
  87.  
  88. <link href="https://fonts.googleapis.com/css?family={select:Font}:400,400i,700,700i&display=swap" rel="stylesheet">
  89.  
  90. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  91. <script>
  92. $(document).ready(function(){
  93. $('.search').submit(function(event){
  94. var value = $('input:first').val();
  95. location.replace('http://{Name}.tumblr.com/tagged/' + value);
  96. });
  97. });
  98. </script>
  99.  
  100. <style type="text/css">
  101.  
  102. iframe.tmblr-iframe {
  103. z-index: 1000000000000000001!important;
  104. top: 0;
  105. right: 0;
  106. opacity: .2;
  107. filter: invert(100%);
  108. padding: 10px;
  109. -webkit-transition: 0.4s;
  110. transition: 0.4s;
  111. }
  112.  
  113. iframe.tmblr-iframe:hover {
  114. opacity: .5;
  115.  
  116. }
  117.  
  118. #tumblr_lightbox, .tmblr-lightbox {
  119. background-color: {color:Background}!important;
  120. z-index:999999!important;
  121. }
  122.  
  123. #vignette, .vignette {
  124. opacity: 0;
  125.  
  126. }
  127.  
  128. #tumblr_lightbox img, .lightbox-image {
  129. box-shadow: none!important;
  130. border-radius: 0!important;
  131. }
  132.  
  133. body {
  134. margin: 0;
  135. background-color: {color:Background};
  136. color: {color:Text};
  137. font-size: {text:Body Font Size};
  138. font-family: {select:Font};
  139. word-spacing: 1px;
  140. word-wrap: break-word;
  141. -webkit-font-smoothing: antialiased;
  142. font-smoothing: antialiased
  143. }
  144.  
  145. a {
  146. text-decoration: none;
  147. color: {color:Text};
  148. -webkit-transition: 0.4s ease;
  149. transition: 0.4s ease;
  150. }
  151.  
  152. a:hover {
  153. color: {color:Hover Color};
  154. }
  155.  
  156. .photoset a {
  157. background-color: transparent;
  158. border: none;
  159. }
  160.  
  161. h1, h2, h3, h4 {
  162. font-size: {text:Header Font Size};
  163. font-weight: 600;
  164. }
  165.  
  166. hr {
  167. border: none;
  168. box-shadow: 0;
  169. margin: 1em auto;
  170. border-top: 1px solid {color:Borders};
  171. }
  172.  
  173. img {
  174. border: 0;
  175. max-width: 100%;
  176. height: auto;
  177. }
  178.  
  179. b, strong {
  180. font-weight: 600;
  181. }
  182.  
  183. ul {
  184. margin-left: 0;
  185. }
  186.  
  187. .up {
  188. text-transform: uppercase;
  189. }
  190.  
  191. .accent {
  192. font-style: italic;
  193. }
  194.  
  195. blockquote {
  196. margin-left: 10px;
  197. {block:IfNotDashboardCaptions}
  198. padding: 5px;
  199. border-left: 2px solid {color:Hover Color};
  200. margin-block-start: 1em;
  201. margin-block-end: 1em;
  202. margin-inline-start: 15px;
  203. margin-inline-end: 15px;
  204. {block:IfNotDashboardCaptions}
  205. background-color: {color:Audio Color};
  206. }
  207.  
  208. blockquote blockquote {
  209. {block:IfNotDashboardCaptions}
  210. padding: 5px;
  211. background-color: {color:Posts};
  212. {block:IfNotDashboardCaptions}
  213. }
  214.  
  215. blockquote img {
  216. width: 100%;
  217. height: auto;
  218. }
  219.  
  220. p img {
  221. width: 100%;
  222. height: auto;
  223. }
  224.  
  225. /* aside */
  226.  
  227. aside {
  228. padding: 80px 90px 40px;
  229. background-color: {color:Sidebar};
  230. }
  231.  
  232. nav li {
  233. list-style-type: none;
  234. display: inline-block;
  235. }
  236.  
  237. nav a {
  238. display: inline-block;
  239. margin: 0 .5em .5em 0;
  240. color: {color:Text};
  241. border-bottom: 2px solid {color:Hover Color};
  242. }
  243.  
  244. nav a:hover {
  245. color: {color:Hover Color};
  246. }
  247.  
  248. nav .icon {
  249. display: none;
  250. border: none;
  251. }
  252.  
  253. aside section {
  254. margin: 0 auto;
  255. max-width: {select:Post Width};
  256. min-width: 200px;
  257. }
  258.  
  259. aside section:not(:first-child) {
  260. margin-top: 1.8em;
  261. }
  262.  
  263. aside .sideimg {
  264. display: none;
  265. border-radius: 5px;
  266. max-width: 200px;
  267. }
  268.  
  269. aside .avatar {
  270. margin: 0 0 .2em;
  271. width: 40px;
  272. border-radius: 5px;
  273. }
  274.  
  275. aside .avatar.circle {
  276. border-radius: 50%;
  277. }
  278.  
  279. aside .avatar img {
  280. display: block;
  281. }
  282.  
  283. aside h1.blogtitle a {
  284. color: {color:Title};
  285. font-size: {text:Title Font Size};
  286. font-weight: 700;
  287. }
  288.  
  289. aside .description {
  290. margin-bottom: 10px;
  291. }
  292.  
  293. .search {
  294. display: inline-block;
  295. margin-left: 2px;
  296. }
  297.  
  298. .search input[type=text] {
  299. padding: 5px;
  300. font-family: 'Karla' , sans-serif;
  301. border: none;
  302. background-color: {color:Sidebar};
  303. }
  304.  
  305. .search input[type=text]:focus {
  306. color: {color:Text};
  307. outline: none;
  308. font-size: {text:Body Font Size};
  309. }
  310.  
  311. ::-webkit-input-placeholder {
  312. color: {color:Text};
  313. font-size: {text:Body Font Size};
  314. }
  315.  
  316. :-ms-input-placeholder {
  317. color: {color:Text};
  318. font-size: {text:Body Font Size};
  319. }
  320.  
  321. ::placeholder {
  322. color: {color:Text};
  323. font-size: {text:Body Font Size};
  324. }
  325.  
  326. .icons li {
  327. list-style: none;
  328. display: inline-block;
  329. margin: 5px 3px 0 0;
  330. text-align: center;
  331. font-size: 15px;
  332. font-family: 'Karla' , sans-serif;
  333. }
  334.  
  335. .icons {
  336. line-height: 30px;
  337. margin-left: -5px;
  338. }
  339.  
  340. .icons a {
  341. color: {color:Question Text};
  342. background-color: {color:Question Background};
  343. padding: 6px 8px;
  344. border-radius: 5px;
  345. }
  346.  
  347. .icons a:hover {
  348. color: {color:Sidebar};
  349. background-color: {color:Text};
  350. }
  351.  
  352. /* content */
  353.  
  354. .content {
  355. background-color: {color:Background};
  356.  
  357. }
  358.  
  359. .entry {
  360. position: relative;
  361. width: 100%;
  362. padding: 40px;
  363. -moz-box-sizing: border-box;
  364. box-sizing: border-box;
  365. }
  366.  
  367. .entry:last-child {
  368. margin-bottom: 0;
  369. }
  370.  
  371. .post {
  372. max-width: {select:Post Width};
  373. padding-bottom: 10px;
  374. margin: 0 auto;
  375. border-radius: 5px;
  376. background-color: {color:Posts};
  377. border: 1px solid {color:Borders};
  378. }
  379.  
  380. .post img {
  381. border-radius: 5px;
  382. }
  383.  
  384.  
  385. .post .media {
  386. position: relative;
  387. }
  388.  
  389. /* posts */
  390.  
  391. .text {
  392. {block:IfNotDashboardCaptions}
  393. margin: 15px 20px 20px;
  394. margin-block-start: 1em;
  395. margin-block-end: 1em;
  396. margin-inline-start: 15px;
  397. margin-inline-end: 15px;
  398. {block:IfNotDashboardCaptions}
  399. line-height: 15px;
  400. }
  401.  
  402. .text blockquote {
  403. {block:IfNotDashboardCaptions}
  404. padding: 15px;
  405. {block:IfNotDashboardCaptions}
  406. }
  407.  
  408. .text blockquote blockquote {
  409. {block:IfDashboardCaptions}
  410. border-left: 2px solid {color:Hover Color};
  411. padding: 5px 10px;
  412. margin: 20px 30px;
  413. background-color: {color:Question Background};
  414. color: {color:Question Text};
  415. {block:IfDashboardCaptions}
  416. }
  417.  
  418. .title {
  419. font-weight: 600;
  420. font-size: 13px;
  421. }
  422.  
  423. .quote {
  424. margin: 30px 30px 10px 30px;
  425. font-weight: 600;
  426. font-size: 13px;
  427. }
  428.  
  429. .quotetext {
  430. margin: 0 0 30px 30px;
  431. }
  432.  
  433. .chat {
  434. margin: 30px;
  435. }
  436.  
  437. .lines {
  438. padding: 20px 30px;
  439. }
  440.  
  441. .lines:nth-child(odd) {
  442. background-color: {color:Posts};
  443.  
  444. }
  445.  
  446. .lines:nth-child(even) {
  447. background-color: {color:Audio Color};
  448. }
  449.  
  450. .asker a {
  451. margin: 0;
  452. border-bottom: 2px solid {color:Hover Color};
  453. color: {color:Question Text};
  454. }
  455.  
  456. .asker {
  457. margin: 5px 0;
  458. }
  459.  
  460. .question {
  461. padding: 15px;
  462. margin: 20px 15px 0 15px;
  463. border-radius: 10px 0 10px 10px;
  464. background-color: {color:Question Background};
  465. line-height: 15px;
  466. color: {color:Question Text};
  467. }
  468.  
  469. .answer {
  470. margin: 0 15px 15px 15px;
  471. line-height: 15px;
  472. }
  473.  
  474. .answer blockquote {
  475. margin: 15px -5px;
  476. {block:IfNotDashboardCaptions}
  477. margin: 15px;
  478. {block:IfNotDashboardCaptions}
  479. }
  480.  
  481. .link {
  482. position: relative;
  483. background-color: {color:Audio Color};
  484. padding: 30px 20px;
  485. border-radius: 5px 5px 0 0;
  486. }
  487.  
  488. .linkname {
  489. margin: 0 30px 0 35px;
  490. vertical-align: middle;
  491. font-weight: 600;
  492. font-size: 20px;
  493. padding-left: 20px;
  494. }
  495.  
  496. .link a {
  497. border-bottom: 2px solid {color:Hover Color};
  498. }
  499.  
  500. .linkicon {
  501. font-size: 20px;
  502. overflow: hidden;
  503. position: absolute;
  504. margin: 0 0 0 10px;
  505. }
  506.  
  507. .linkdesc {
  508. padding-top: 10px;
  509. font-weight: normal;
  510. font-size: {text:Body Font Size};
  511. }
  512.  
  513. .video {
  514. max-width: 100% !important;
  515. height: auto;
  516. }
  517.  
  518. /* audio */
  519.  
  520. .audio {
  521. position: relative;
  522. background-color: {color:Audio Color};
  523. padding: 40px 20px;
  524. border-radius: 5px 5px 0 0;
  525. }
  526.  
  527. .player {
  528. width: 30px;
  529. height: 30px;
  530. overflow: hidden;
  531. position: absolute;
  532. margin: 10px 0 0 10px;
  533. opacity: .5;
  534. }
  535.  
  536. .track {
  537. margin: 5px 20px 0 45px;
  538. vertical-align: middle;
  539. font-weight: 600;
  540. font-size: 20px;
  541. padding-left: 20px;
  542. line-height: 16px;
  543. }
  544.  
  545. .artist {
  546. font-weight: normal;
  547. font-size: {text:Body Font Size};
  548. }
  549.  
  550. /* controls */
  551.  
  552. .controls {
  553. margin: 0 5px 5px 5px;
  554. padding: 3px 10px 0;
  555. }
  556.  
  557. .controlsreblog {
  558. float: right;
  559. border-bottom: 2px solid {color:Hover Color};
  560. }
  561.  
  562. .timestamp {
  563. border-bottom: 2px solid {color:Hover Color};
  564. }
  565.  
  566. .pagination {
  567. position: relative;
  568. width: 85%;
  569. max-width: {select:Post Width};
  570. text-align: center;
  571. margin: 20px auto 60px;
  572. }
  573.  
  574. /* info */
  575.  
  576. .info {
  577. margin: 10px 0 0 0;
  578. padding: 0;
  579. }
  580.  
  581. .comma:last-child {
  582. display: none;
  583. }
  584.  
  585. .tags {
  586. padding: 0 15px 5px;
  587. opacity: .7;
  588. }
  589.  
  590. .button {
  591. margin: 5px 3px;
  592. border-bottom: 2px solid {color:Hover Color};
  593. }
  594.  
  595. .caption {
  596. padding: 5px;
  597. }
  598.  
  599. .caption img {
  600. max-width: 100%;
  601. height: auto;
  602. }
  603.  
  604. .permalink {
  605. padding: 10px 15px;
  606. }
  607.  
  608. /* notecontainer */
  609.  
  610. .notecontainer {
  611. padding-top: 20px;
  612. }
  613.  
  614. .notestitle {
  615. padding: 0 10px 0 20px;
  616. font-weight: 700;
  617. }
  618.  
  619. .notecontainer ol.notes {
  620. list-style-type: none;
  621. padding: 0 10px;
  622.  
  623. }
  624.  
  625. .notecontainer img.avatar {
  626. border-radius: 50%;
  627. vertical-align: middle;
  628. width: 30px;
  629. margin: 5px 10px;
  630. }
  631.  
  632. .notecontainer ol.notes li.note a {
  633. opacity: .7;
  634. }
  635.  
  636. .notecontainer ol.notes li.note a:hover {
  637. opacity: 1;
  638. }
  639.  
  640. .notecontainer ol.notes li.note {
  641. overflow: hidden;
  642. width: 41.5px;
  643. height: 40px;
  644. display: inline-block;
  645. }
  646.  
  647. .notecontainer ol.notes li.note:last-child {
  648. display: block;
  649. width: calc({select:Post Width} - 25px);
  650. padding-top: 20px;
  651. }
  652.  
  653. /* unnest */
  654.  
  655. {block:IfDashboardCaptions}
  656.  
  657. .tumblr_parent {
  658. margin: 10px;
  659. padding: 15px;
  660. background-color: {color:Audio Color};
  661. border-radius: 0 10px 10px 10px;
  662. }
  663.  
  664. .tumblr_parent a {
  665. font-weight: bold;
  666. border-bottom: 2px solid {color:Hover Color};
  667. }
  668.  
  669. .tumblr_parent a::after {
  670. content: ":";
  671. }
  672.  
  673. .tumblr_parent blockquote {
  674. margin: 0;
  675. }
  676.  
  677. .tumblr_avatar {
  678. display: none;
  679. width: 10px;
  680. border-radius: 50%;
  681. }
  682. {/block:IfDashboardCaptions}
  683.  
  684.  
  685. /* media screen */
  686.  
  687.  
  688. @media only screen and (min-width: 900px) {
  689. .content {
  690. margin: 40px 40px 40px 400px;
  691.  
  692. }
  693.  
  694. .post {
  695. margin: 0;
  696. }
  697.  
  698. aside {
  699. position: fixed;
  700. float: right;
  701. top: 0;
  702. left: 0;
  703. bottom: 0;
  704. margin: 0;
  705. width: 400px;
  706. -moz-box-sizing:border-box;
  707. box-sizing:border-box;
  708. }
  709.  
  710. aside .sideimg {
  711. display: block;
  712. }
  713.  
  714. aside .description {
  715. width: 180px;
  716. }
  717.  
  718. aside nav li {
  719. display: block;
  720. }
  721.  
  722. .pagination {
  723. margin: 40px;
  724. bottom: 20px;
  725. }
  726.  
  727. }
  728.  
  729. /* other */
  730.  
  731. .theme {
  732. position: fixed;
  733. font-size: 13px;
  734. right: 15px;
  735. bottom: 25px;
  736. width: 16px;
  737. height: 15px;
  738. padding: 2px 2px 3px;
  739. text-align: center;
  740. color: #ffffff;
  741. background-color: #ebebeb;
  742. border-radius: 50%;
  743.  
  744. }
  745.  
  746. ::-webkit-scrollbar {
  747. width: 15px;
  748. height: 15px;
  749. }
  750.  
  751. ::-webkit-scrollbar {
  752. background-color: {color:Background};
  753. }
  754.  
  755. ::-webkit-scrollbar-track {
  756. background-color: {color:Background};
  757. border: 5px solid {color:Background};
  758. }
  759.  
  760. ::-webkit-scrollbar-thumb {
  761. background-color: {color:Scrollbar};
  762. border: 5px solid {color:Background};
  763. border-radius: 10px;
  764. min-height: 24px;
  765. min-width: 24px;
  766. }
  767.  
  768. ::-webkit-scrollbar-corner {
  769. background-color:{color:Background};
  770. }
  771.  
  772. </style>
  773.  
  774. <!-- jquery library-->
  775. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  776.  
  777. <!-- pixel union photoset for margins -->
  778. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  779. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  780.  
  781. <!-- Font Awesome 4.7.0 by @davegandy -->
  782. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  783.  
  784. <!-- nouvae responsive videos -->
  785. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  786.  
  787. <script>
  788.  
  789. $(document).ready(function() {
  790. flexibleFrames($(".video"));
  791. });
  792.  
  793. </script>
  794.  
  795. <!-- neothm and magnusthemes unnest -->
  796.  
  797. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  798.  
  799. {block:ifDashboardCaptions}
  800. <script>
  801. $(document).ready(function(){
  802. $('.post').unnest({
  803. yourCaption: ".caption",
  804. wrapName: ".tumblr_parent",
  805. newCaptionUsername: true,
  806. originalPostCaptionUsername: false,
  807. tumblrAvatars: true,
  808. tumblrAvatarClass: ".tumblr_avatar",
  809. usernameColon: false
  810. });
  811. });
  812. </script>
  813. {/block:ifDashboardCaptions}
  814.  
  815. </head>
  816.  
  817. <body>
  818.  
  819. <aside>
  820.  
  821. {block:IfSidebarImage}
  822. <section>
  823. <a href="/"><img class="sideimg" src="{image:Sidebar}"></a>
  824. </section>
  825. {/block:IfSidebarImage}
  826.  
  827. <section>
  828.  
  829. {block:IfShowAvatar}
  830. <a href="/"><img src="{PortraitURL-128}" class="avatar {AvatarShape}"></a>
  831. {/block:IfShowAvatar}
  832.  
  833. <h1 class="blogtitle"><a href="/">{Title}</a></h1>
  834. <div class="description">{Description}</div>
  835.  
  836. </section>
  837.  
  838. <section><nav>
  839.  
  840. {block:IfHome}
  841. <a href="/">{text:Home}</a>
  842. {/block:IfHome}
  843.  
  844. {block:AskEnabled}
  845. <li><a href="/ask">{text:Ask}</a></li>
  846. {/block:AskEnabled}
  847.  
  848. {block:SubmissionsEnabled}
  849. <li><a href="/submit">{text:Submit}</a></li>
  850. {/block:SubmissionsEnabled}
  851.  
  852. {block:IfArchive}
  853. <li><a href="/archive">{text:Archive}</a></li>
  854. {/block:IfArchive}
  855.  
  856. {block:HasPages}{block:Pages}
  857. <li><a href="{URL}">{Label}</a></li>
  858. {/block:Pages}{/block:HasPages}
  859.  
  860.  
  861. {block:IfLinkOne}<li><a href="{text:Link One URL}">{text:Link One}</a>{/block:IfLinkOne}
  862.  
  863. {block:IfLinkTwo}<li><a href="{text:Link Two URL}">{text:Link Two}</a>{/block:IfLinkTwo}
  864.  
  865. {block:IfLinkThree}<li><a href="{text:Link Three URL}">{text:Link Three}</a>{/block:IfLinkThree}
  866.  
  867.  
  868. {block:IfLinkFour}<li><a href="{text:Link Four URL}">{text:Link Four}</a>{/block:IfLinkFour}
  869.  
  870. </nav></section>
  871.  
  872. {block:IfShowSearch}
  873. <section>
  874. <i class="fa fa-search"></i>
  875. <form class="search" action="javascript:return false">
  876. <input type="text" class="query" placeholder="Search tags">
  877. </form></section>{/block:IfShowSearch}
  878.  
  879. <section><div class="icons">
  880. {block:IfInstagramURL}<li><a href="{text:Instagram URL}"><i class="fa fa-instagram"></i></a></li>{/block:IfInstagramURL}
  881.  
  882. {block:IfFacebookURL}<li><a href="{text:Facebook URL}"><i class="fa fa-facebook-square"></i></a></li>{/block:IfFacebookURL}
  883.  
  884. {block:IfYoutubeURL}<li><a href="{text:Youtube URL}"><i class="fa fa-youtube-play"></i></a></li>{/block:IfYoutubeURL}
  885.  
  886. {block:IfVimeoURL}<li><a href="{text:Vimeo URL}"><i class="fa fa-vimeo"></i></a></li>{/block:IfVimeoURL}
  887.  
  888. {block:IfTwitterURL}<li><a href="{text:Twitter URL}"><i class="fa fa-twitter"></i></a></li>{/block:IfTwitterURL}
  889.  
  890. {block:IfTumblrURL}<li><a href="{text:Tumblr URL}"><i class="fa fa-tumblr-square"></i></a></li>{/block:IfTumblrURL}
  891.  
  892. {block:IfGoogleURL}<li><a href="{text:Google URL}"><i class="fa fa-google"></i></a></li>{/block:IfGoogleURL}
  893.  
  894. {block:IfBehanceURL}<li><a href="{text:Behance URL}"><i class="fa fa-behance"></i></a></li>{/block:IfBehanceURL}
  895.  
  896. {block:IfCodepenURL}<li><a href="{text:Codepen URL}"><i class="fa fa-codepen"></i></a></li>{/block:IfCodepenURL}
  897.  
  898. {block:IfTwitchURL}<li><a href="{text:Twitch URL}"><i class="fa fa-twitch"></i></a></li>{/block:IfTwitchURL}
  899.  
  900. {block:IfDribbbleURL}<li><a href="{text:Dribbble URL}"><i class="fa fa-dribbble"></i></a></li>{/block:IfDribbbleURL}
  901.  
  902. {block:IfLinkedinURL}<li><a href="{text:Linkedin URL}"><i class="fa fa-linkedin"></i></a></li>{/block:IfLinkedinURL}
  903.  
  904. {block:IfPinterestURL}<li><a href="{text:Pinterest URL}"><i class="fa fa-pinterest-p"></i></a></li>{/block:IfPinterestURL}
  905.  
  906. {block:IfSnapchatURL}<li><a href="{text:Snapchat URL}"><i class="fa fa-snapchat-ghost"></i></a></li>{/block:IfSnapchatURL}
  907.  
  908. {block:IfSpotifyURL}<li><a href="{text:Spotify URL}"><i class="fa fa-spotify"></i></a></li>{/block:IfSpotifyURL}
  909.  
  910. {block:IfSocialLinkURL}<li><a href="{text:Social Link URL}"><i class="fa fa-share-alt"></i></a></li>{/block:IfSocialLinkURL}
  911. </div></section>
  912.  
  913. </aside>
  914.  
  915. <div class="content"> {block:Posts}
  916.  
  917. <article class="entry" id="{PostID}">
  918.  
  919. <section class="post">
  920.  
  921. <!-- audio -->
  922. {block:Audio}
  923. <div class="audio">
  924.  
  925. {block:AudioPlayer}
  926. <div class="player">{AudioPlayer}</div>
  927. {/block:AudioPlayer}
  928.  
  929. {block:TrackName}
  930. <div class="track">{TrackName}
  931. {/block:TrackName}
  932. <br>
  933. {block:Artist}
  934. <span class="artist accent">by {Artist}</span></div>
  935. {/block:Artist}
  936.  
  937. </div>
  938. {/block:Audio}
  939.  
  940. <!-- photo -->
  941. {block:Photo}
  942. <div class="media">
  943. <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">
  944. <img src="{PhotoURL-HighRes}" style="display:block;">
  945. </a>
  946. </div>
  947. {/block:Photo}
  948.  
  949. <!-- photoset -->
  950. {block:Photoset}
  951. <div class="media photoset">
  952.  
  953. {block:PermalinkPage}
  954. <!-- pixel union photosets -->
  955. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  956. {block:Photos}
  957. <div class="photo-data">
  958. <div class="pxu-photo">
  959. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  960. </div>
  961. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  962. </div>{/block:Photos}
  963. </div>
  964. <!-- pxel union photoset ends -->
  965. {/block:PermalinkPage}
  966.  
  967. {block:ifFullPhotosets}
  968. {block:IndexPage}
  969.  
  970. <!-- pixel union photosets -->
  971. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  972. {block:Photos}
  973. <div class="photo-data">
  974. <div class="pxu-photo">
  975. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  976. </div>
  977. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  978. </div>{/block:Photos}
  979. </div>
  980. <!-- pxel union photoset ends -->
  981.  
  982. {/block:IndexPage}
  983. {/block:ifFullPhotosets}
  984.  
  985. {block:ifNotFullPhotosets}
  986. {block:IndexPage}
  987. {block:Photos}<img src="{PhotoURL-HighRes}">
  988. <!--{/block:Photos}-->
  989. {/block:IndexPage}
  990. {/block:ifNotFullPhotosets}
  991.  
  992. </div>
  993. {/block:Photoset}
  994.  
  995. <!-- text -->
  996. {block:Text}<div class="caption text">
  997. {block:Title}<h1>{Title}</h1>{/block:Title}
  998. {Body}</div>
  999. {/block:Text}
  1000.  
  1001. <!-- quote -->
  1002. {block:Quote}
  1003. <div class="quote">{Quote}</div>
  1004. {block:Source}<div class="quotetext">— {Source}</div>{/block:Source}
  1005. {/block:Quote}
  1006.  
  1007. <!-- video -->
  1008. {block:Video}
  1009. <div class="video">
  1010. {Video-400}
  1011. </div>
  1012. {/block:Video}
  1013.  
  1014. <!-- questions and answers -->
  1015. {block:Answer}
  1016. <div class="question">
  1017. <div class="asker"><strong style="border-bottom: 2px solid {color:Hover Color};">{Asker}</strong>:<br/></div>
  1018. {Question}<br/></div>
  1019. <div class="answer caption">{Answer}</div>
  1020. {/block:Answer}
  1021.  
  1022.  
  1023. <!-- chat posts -->
  1024. {block:Chat}
  1025. {block:Title}<div class="title chat">{Title}</div>{/block:Title}
  1026. {block:Lines}
  1027. <div class="lines">
  1028. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br/>
  1029. </div>{/block:Lines}
  1030. {/block:Chat}
  1031.  
  1032. <!-- link posts -->
  1033. {block:Link}<div class="link">
  1034. <div class="linkicon"><i class="fa fa-link"></i></div>
  1035. <div class="linkname"><a href="{URL}">{Name}</a>
  1036. <div class="linkdesc accent">{block:Host}{Host}{/block:Host}<br>{block:Excerpt}{Excerpt}{/block:Excerpt}</div></div>
  1037. </div>{/block:Link}
  1038.  
  1039. <!-- info -->
  1040. {block:Date}
  1041. <div class="info">
  1042.  
  1043. <!-- controls -->
  1044. <div class="controls">
  1045. <a href="{Permalink}" class="timestamp">{month} {dayofmonth}{dayofmonthsuffix}</a>
  1046. <a href="{ReblogURL}" target="_blank" class="controlsreblog">Reblog</a>
  1047. </div>
  1048.  
  1049. <!-- caption -->
  1050. {block:IfShowCaptions}
  1051. {block:Caption}
  1052. <div class="captionwrap">
  1053. <div class="text caption">{Caption}</div></div>
  1054. {/block:Caption}
  1055. {/block:IfShowCaptions}
  1056.  
  1057. <!-- source permalink page -->
  1058. {block:PermalinkPage}
  1059. <div class="permalink">
  1060. {block:RebloggedFrom}
  1061. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  1062. {block:ContentSource}
  1063. Source: <a href="{ReblogRootURL}">{ReblogRootName}</a>
  1064. {/block:ContentSource}
  1065. {/block:RebloggedFrom}
  1066. </div>
  1067. {/block:PermalinkPage}
  1068.  
  1069. <!-- tags -->
  1070. {block:IfShowTags}
  1071. {block:HasTags}
  1072. <div class="tags accent"> Tagged
  1073. {block:Tags}
  1074. <a href="{TagURL}"><span class="button">{Tag} </span></a>
  1075. {/block:Tags}
  1076. </div>
  1077. {/block:HasTags}
  1078. {/block:IfShowTags}
  1079.  
  1080. </div> {/block:Date}
  1081.  
  1082. </section>
  1083.  
  1084. </article>
  1085.  
  1086. <!-- post notes -->
  1087. {block:PostNotes}
  1088. <article class="entry">
  1089. <section class="post notecontainer">
  1090. <div class="notestitle">{NoteCount} Notes</div>
  1091. {PostNotes-64}
  1092. </section>
  1093. </article>
  1094. {/block:PostNotes}
  1095.  
  1096. {/block:Posts}
  1097.  
  1098. <!-- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} -->
  1099.  
  1100.  
  1101. <!-- pagination -->
  1102. <div class="pagination">
  1103. {/block:Pagination}
  1104. {block:PreviousPage}
  1105. <a class="previous_page" href="{PreviousPage}">Previous</a>
  1106. {/block:PreviousPage}
  1107.  
  1108. {block:NextPage}
  1109. <a class="next_page" href="{NextPage}">Next page</a>
  1110. {/block:NextPage}
  1111.  
  1112. </div>
  1113. {/block:Pagination}
  1114.  
  1115. </div> <!-- div class content end -->
  1116.  
  1117. <a class="theme" href="https://mangolias.tumblr.com/" target="_blank">+</a>
  1118. </div>
  1119.  
  1120. <!-- pixel union photosets -->
  1121. <script>
  1122. $(document).ready(function(){
  1123. $('.photo-slideshow').pxuPhotoset({
  1124. lightbox: true,
  1125. rounded: false,
  1126. gutter: '3px',
  1127. borderRadius: '0px',
  1128. photoset: '.photo-slideshow',
  1129. photoWrap: '.photo-data',
  1130. photo: '.pxu-photo'
  1131. });
  1132. });
  1133. </script>
  1134.  
  1135. </body>
  1136. </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!