plutoniumthm

Theme 03 - Arroyo

Jul 3rd, 2019 (edited)
771
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.11 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5. <!--
  6.  
  7. Arroyo
  8. astrocodes @ tumblr
  9.  
  10. Credits:
  11. > PXU photosets by pixelunion (https://github.com/PixelUnion/Extended-Tumblr-Photoset)
  12. > FontAwesome
  13. > Un-nested captions by @neothm and @magnusthemes
  14.  
  15. -->
  16.  
  17. <meta name="color:Accent" content="#ff9e4f">
  18. <meta name="color:Gradient Color 1" content="#ff9e4f">
  19. <meta name="color:Gradient Color 2" content="#c26dff">
  20.  
  21. <meta name="select:Font" content="Overpass" title="Overpass">
  22. <meta name="select:Font" content="Space Mono" title="Space Mono">
  23. <meta name="select:Font" content="Roboto Mono" title="Roboto Mono">
  24. <meta name="select:Font" content="Roboto" title="Roboto">
  25. <meta name="select:Font" content="Segoe UI" title="Segoe UI">
  26. <meta name="select:Font" content="Karla" title="Karla">
  27.  
  28. <meta name="text:Intro Blurb" content="This is where you'll tell people a little bit about your blog :^)">
  29.  
  30. <meta name="text:Custom Link 1 URL" content="/">
  31. <meta name="text:Custom Link 1 Name" content="One">
  32.  
  33. <meta name="text:Custom Link 2 URL" content="/">
  34. <meta name="text:Custom Link 2 Name" content="Two">
  35.  
  36. <meta name="text:Custom Link 3 URL" content="/">
  37. <meta name="text:Custom Link 3 Name" content="Three">
  38.  
  39. <meta name="text:Custom Link 4 URL" content="/">
  40. <meta name="text:Custom Link 4 Name" content="Four">
  41.  
  42. <meta name="text:Footer Title" content="More">
  43.  
  44. <meta name="text:Footer Tag 1 URL" content="/">
  45. <meta name="text:Footer Tag 1 Name" content="Tag one">
  46.  
  47. <meta name="text:Footer Tag 2 URL" content="/">
  48. <meta name="text:Footer Tag 2 Name" content="Tag two">
  49.  
  50. <meta name="text:Footer Tag 3 URL" content="/">
  51. <meta name="text:Footer Tag 3 Name" content="Tag three">
  52.  
  53. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,500,500i,700,700i|Space+Mono:400,400i,700,700i|Overpass:400,400i,700,700i|Roboto:400,400i,700,700i|Karla:400,700&display=swap" rel="stylesheet">
  54.  
  55. <script src="https://kit.fontawesome.com/c2d255a331.js" crossorigin="anonymous"></script>
  56.  
  57. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  58.  
  59. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  60.  
  61. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  62. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  63.  
  64. <script> $(function(){ $('article').unnest({
  65. yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
  66. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  67. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  68. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  69. tumblrAvatars: false, //”dashboard style” caption, have the avatar of the blog next to the username
  70. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  71. usernameColon: false //if turned to false, removes the colon at the end of usernames
  72. }); }); </script>
  73.  
  74.  
  75. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  76. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  77.  
  78. <style type="text/css">
  79.  
  80.  
  81.  
  82. /* ---- THE BASICS ---- */
  83.  
  84. body {
  85. background-color:#fff;
  86. font-family:'{select:font}';
  87. margin:0;
  88. }
  89.  
  90. ::selection {
  91. background-color:{color:accent};
  92. color:#fff;
  93. }
  94.  
  95. a {
  96. font-weight:700;
  97. color:#111;
  98. border-bottom:3px solid {color:gradient color 1};
  99. text-decoration:none;
  100. transition:.4s;
  101. border-radius:3px;
  102. }
  103.  
  104. a:hover {
  105. transition:.4s;
  106. color:#111;
  107. background:{color:gradient color 1};;
  108. }
  109.  
  110.  
  111. /* ---- TOP BAR ---- */
  112.  
  113. .topbar {
  114. background-color:rgba(0,0,0,0.85);
  115. position:fixed;
  116. padding:20px;
  117. top:0;
  118. width:calc(100% - 40px);
  119. z-index:9999999;
  120. overflow:hidden;
  121. }
  122.  
  123. .topbar_title {
  124. text-align:center;
  125. font-size:30px;
  126. color:#fff;
  127. text-transform:capitalize;
  128. letter-spacing:0.5px;
  129. font-weight:700;
  130. }
  131.  
  132. .nav1 {
  133. float:left;
  134. color:#1a3c34;
  135. letter-spacing:0.5px;
  136. margin-top:-35px;
  137. font-size:18px;
  138. margin-left:20px;
  139. }
  140.  
  141. .nav1 a {
  142. display:inline-block;
  143. text-transform:capitalize;
  144. text-decoration:none;
  145. margin-right:30px;
  146. color:#fff;
  147. font-weight:400;
  148. transition:.4s;
  149. padding:9px;
  150. padding-bottom:4px;
  151. padding-top:4px;
  152. border-radius:3px;
  153. border:none;
  154. }
  155.  
  156. .nav1 a:hover {
  157. color:{color:gradient color 2};
  158. transition:.4s;
  159. background:none;
  160. transform:scale(1.15);
  161. }
  162.  
  163. .nav2 {
  164. float:right;
  165. color:#1a3c34;
  166. letter-spacing:0.5px;
  167. margin-top:-33px;
  168. font-size:14px;
  169. margin-right:10px;
  170. }
  171.  
  172. .nav2 a {
  173. display:inline-block;
  174. text-transform:capitalize;
  175. text-decoration:none;
  176. margin-right:30px;
  177. color:#fff;
  178. font-weight:700;
  179. transition:.4s;
  180. padding:9px;
  181. padding-bottom:4px;
  182. padding-top:4px;
  183. border-radius:3px;
  184. border:none;
  185. }
  186.  
  187. .nav2 a:hover {
  188. color:{color:gradient color 2};
  189. transition:.4s;
  190. background:none;
  191. transform:scale(1.1);
  192. }
  193.  
  194.  
  195.  
  196. /* ---- INTRO ---- */
  197.  
  198. .intro {
  199. background-image: linear-gradient(50deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  200. width:calc(100% - 40px);
  201. padding:20px;
  202. height:950px;
  203. margin-top:-10px;
  204. }
  205.  
  206. .intro_greeting {
  207. color:rgba(0,0,0,0.7);
  208. font-weight:300;
  209. font-size:50px;
  210. text-align:center;
  211. width:calc(100% - 500px);
  212. margin-top:300px;
  213. margin-left:250px;
  214. }
  215.  
  216. .intro_greeting p {
  217. font-size:17px;
  218. margin-top:50px;
  219. line-height:30px;
  220. font-weight:400;
  221. }
  222.  
  223. .fa-arrow-circle-down {
  224. font-size:55px;
  225. margin-top:90px;
  226. color:rgba(0,0,0,0.6);
  227. transition:.4s;
  228. }
  229.  
  230. button {
  231. background:none;
  232. border:none;
  233. transition:.4s;
  234. transform:scale(1.0);
  235. cursor:hand;
  236. }
  237.  
  238. button:focus {
  239. outline:none;
  240. cursor:hand;
  241. }
  242.  
  243. button:hover {
  244. transition:.4s;
  245. cursor:pointer;
  246. }
  247.  
  248. button:hover .fa-arrow-circle-down {
  249. color:rgba(0,0,0,0.76);
  250. transition:.4s;
  251. transform:scale(1.1);
  252. }
  253.  
  254.  
  255.  
  256. /* ---- POSTS WRAPPER ---- */
  257.  
  258. .wrapper {
  259. margin-left:220px;
  260. width:calc(100% - 425px);
  261. padding:20px;
  262. height:auto;
  263. margin-top:150px;
  264. padding-top:120px;
  265. }
  266.  
  267.  
  268.  
  269. /* ---- POSTS ---- */
  270.  
  271. article {
  272. width:600px;
  273. padding:30px;
  274. padding-bottom:0px;
  275. margin-bottom:150px;
  276. margin-top:100px;
  277. background-color:#fff;
  278. transition:.4s;
  279. border-radius:5px;
  280. border:1px solid #f0f0f0;
  281. box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.15);
  282. }
  283.  
  284. article img {
  285. width:600px;
  286. }
  287.  
  288. article .caption img {
  289. border-radius:5px;
  290. max-width:500px;
  291. }
  292.  
  293. article img.photo {
  294. border-radius:5px;
  295. }
  296.  
  297. article .video {
  298. margin-top:10px;
  299. width:500px!important;
  300. border-radius:5px!important;
  301. }
  302.  
  303. .caption {
  304. margin-left:0px;
  305. padding-top:10px;
  306. text-align:left;
  307. line-height:25px;
  308. margin-top:10px;
  309. }
  310.  
  311. .caption img {
  312. max-width:500px;
  313. margin-top:10px;
  314. }
  315.  
  316. /* reblogs */
  317. blockquote.tumblr_parent {
  318. padding-left:20px;
  319. padding-top:00px;
  320. padding-bottom:10px;
  321. padding-right:20px;
  322. width:600px;
  323. margin-left:-20px;
  324. word-break:break-word;
  325. color:#222;
  326. margin-top:0px;
  327. font-size:14px;
  328. line-height:25px;
  329. text-align:left;
  330. }
  331.  
  332. /* non-reblogged original post */
  333. .originalpost blockquote.tumblr_parent {
  334. width:480px;
  335. margin:0;
  336. color:#222;
  337. border:none;
  338. background:transparent!important;
  339. padding-left:0px;
  340. font-size:14px;
  341. padding-top:30px;
  342. }
  343.  
  344. /* non-reblogged original post */
  345. .caption.originalpost {
  346. margin:-5px 0;
  347. line-height:30px;
  348. background:transparent!important;
  349. border:none;
  350. font-size:14px;
  351. padding-top:30px;
  352. }
  353.  
  354. /* reblogs; tumblr user icons */
  355. img.tumblr_avatar {
  356. margin-right:10px;
  357. margin-top:2px!important;
  358. height:30px;
  359. width:30px;
  360. margin-left:0px;
  361. float:left;
  362. border-radius:100%!important;
  363. vertical-align:middle!important;
  364. color:#fff;
  365. }
  366.  
  367. /* reblogs; tumblr user names */
  368. .caption a.tumblr_blog {
  369. font-size:14px;
  370. text-decoration:none;
  371. line-height:20px;
  372. color:#222;
  373. display:block;
  374. padding:5px;
  375. padding-bottom:10px;
  376. text-align:left;
  377. font-weight:700;
  378. background:transparent;
  379. margin-top:2px;
  380. margin-bottom:0px;
  381. transition:.3s;
  382. border-bottom:1px solid #f0f0f0;
  383. border-radius:0px;
  384. }
  385.  
  386. /* reblogs; tumblr user names hover */
  387. .caption a:hover.tumblr_blog {
  388. color:{color:accent};
  389. transition:.3s;
  390. }
  391.  
  392. .quote {
  393. font-size:28px;
  394. font-weight:700;
  395. color:#222;
  396. letter-spacing:-0.5px;
  397. }
  398.  
  399. .text_title {
  400. font-weight:700;
  401. font-size:22px;
  402. color:#222;
  403. }
  404.  
  405.  
  406.  
  407. /* ---- FOOTER ---- */
  408.  
  409. .footer {
  410. background-color:#111;
  411. width:calc(100% - 60px);
  412. padding:10px;
  413. padding-left:50px;
  414. color:#fff;
  415. bottom:0;
  416. height:180px;
  417. }
  418.  
  419. h1 {
  420. font-size:30px;
  421. color:#fff;
  422. letter-spacing:-1px;
  423. font-weight:700;
  424. text-transform:capitalize;
  425. }
  426.  
  427. .footer_nav {
  428. margin-top:10px;
  429. font-size:13.5px;
  430. }
  431.  
  432. .footer_nav a {
  433. display:inline;
  434. color:#fff;
  435. margin-left:20px;
  436. text-transform:capitalize;
  437. text-decoration:none;
  438. transition:.3s;
  439. border-radius:5px;
  440. padding-left:5px;
  441. padding-right:5px;
  442. border:none;
  443. font-weight:400;
  444. }
  445.  
  446. .footer_nav a:hover {
  447. color:#fff;
  448. background:rgba(255,255,255,0.2);
  449. transition:.3s;
  450. }
  451.  
  452. .credit {
  453. border-top:1px solid rgba(255,255,255,0.1);
  454. color:rgba(255,255,255,0.7);
  455. margin-top:30px;
  456. padding-top:20px;
  457. font-size:12px;
  458. width:calc(100% - 50px);
  459. }
  460.  
  461. .credit a {
  462. color:#fff;
  463. transition:.3s;
  464. border-radius:0px;
  465. padding-left:5px;
  466. padding-right:5px;
  467. text-decoration:none;
  468. }
  469.  
  470. .credit a:hover {
  471. color:#fff;
  472. background:rgba(255,255,255,0.2);
  473. transition:.3s;
  474. }
  475.  
  476. .description {
  477. float:right;
  478. font-size:12px;
  479. margin-top:-30px;
  480. text-align:right;
  481. margin-right:40px;
  482. width:calc(100% - 540px);
  483. }
  484.  
  485.  
  486.  
  487. /* ---- TUMBLR CONTROLS ---- */
  488.  
  489. iframe.tmblr-iframe {
  490. z-index:99999999999999!important;
  491. top:0!important;
  492. right:0!important;
  493. opacity:0;
  494. transform:scale(0.55);
  495. transform-origin:100% 0;
  496. transition:.5s;
  497. margin-right:30px;
  498. }
  499.  
  500. iframe.tmblr-iframe:hover {
  501. transform:scale(0.6);
  502. transform-origin:100% 0;
  503. transition:.5s;
  504. }
  505.  
  506.  
  507.  
  508. /* ---- SCROLL PROGRESS BAR ---- */
  509.  
  510. .progress-container {
  511. width: 100%;
  512. height: 8px;
  513. background: transparent;
  514. z-indeX:999999999999999999999999999999999;
  515. left:0;
  516. margin-top:16px;
  517. position:absolute;
  518. border-bottom-left-radius:50px;
  519. border-bottom-right-radius:50px;
  520. }
  521.  
  522. .progress-bar {
  523. height: 5px;
  524. background-image: linear-gradient(50deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  525. width: 0%;
  526. }
  527.  
  528.  
  529.  
  530. /* ---- AUDIO POSTS ---- */
  531.  
  532. iframe.tumblr_audio_player {
  533. height:85px;!important
  534. }
  535.  
  536. .audio_player {
  537. width:32px;
  538. overflow:hidden;
  539. transform:scale(1.1);
  540. }
  541.  
  542. .audio_player_container {
  543. margin-left:20px;
  544. margin-top:30px;
  545. }
  546.  
  547. .audio_player_bg {
  548. width:75px;
  549. height:75px;
  550. text-align:center;
  551. padding:5px;
  552. background:#111;
  553. margin-bottom:30px;
  554. z-index:1;
  555. position:absolute;
  556. margin-left:250px;
  557. margin-top:-35px;
  558. border-radius:100%;
  559. }
  560.  
  561. .audio_info {
  562. text-align:center;
  563. margin-top:0px;
  564. font-size:12px;
  565. color:#fff;
  566. background:#111;
  567. margin-right:0px;
  568. margin-bottom:30px;
  569. width:590px;
  570. padding-top:50px;
  571. padding-bottom:20px;
  572. border-bottom-left-radius:5px;
  573. border-bottom-right-radius:5px;
  574. }
  575.  
  576. .fa-music {
  577. margin-right:5px;
  578. padding-right:10px;
  579. }
  580.  
  581. .album-art-container {
  582. width:590px;
  583. height:200px;
  584. overflow:hidden;
  585. background-image: linear-gradient(50deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  586. z-index:-1;
  587. border-top-left-radius:5px;
  588. border-top-right-radius:5px;
  589. }
  590.  
  591. .album-art-container img {
  592. margin-top:-100px;
  593. opacity:0.35;
  594. width:590px;
  595. transition:0.4s;
  596. }
  597.  
  598. article:hover .album-art-container img {
  599. transform:scale(1.05);
  600. transition:0.4s;
  601. }
  602.  
  603.  
  604.  
  605. /* ---- PHOTOSETS ---- */
  606.  
  607. .photo-slideshow {
  608. visibility: hidden;
  609. }
  610.  
  611. .photo-slideshow.processed {
  612. visibility: visible;
  613. }
  614.  
  615. .photo-slideshow .row {
  616. clear: both;
  617. width: 100%;
  618. }
  619.  
  620. .photo-slideshow .pxu-photo {
  621. display: block;
  622. float: left;
  623. margin-right:5px;
  624. width: 100%;
  625. overflow: hidden;
  626. }
  627.  
  628. .photo-slideshow .pxu-photo img {
  629. display: block;
  630. border:none;
  631. }
  632.  
  633. .photo-slideshow.processed .pxu-photo img {
  634. width: 100%;
  635. height: auto;
  636. border:none;
  637. }
  638.  
  639. .photo-slideshow .pxu-photo:first-child img {
  640. margin-left: 0;
  641. border:none;
  642. }
  643.  
  644. .photo-slideshow .count-1 {
  645. width: 100%;
  646. }
  647.  
  648. .photo-slideshow .count-2 {
  649. width: 50%;
  650. }
  651.  
  652. .photo-slideshow .count-3 {
  653. width: 33.33%;
  654. }
  655.  
  656. .photo-slideshow .count-4 {
  657. width: 25%;
  658. }
  659.  
  660. .photo-slideshow .count-5 {
  661. width: 20%;
  662. }
  663.  
  664. .photo-slideshow .info {
  665. display: none;
  666. }
  667.  
  668.  
  669.  
  670. /* ---- POST INFO AND TAGS ---- */
  671.  
  672. .postinfo {
  673. border-bottom:1px solid #f0f0f0;
  674. background:#fafafa;
  675. padding:15px;
  676. margin-left:-30px;
  677. width:630px;
  678. margin-top:-30px;
  679. text-align:left;
  680. margin-bottom:30px;
  681. font-size:17px;
  682. }
  683.  
  684. .fa-image, .fa-images, .fa-quote-left, .fa-file-alt, .fa-volume-up, .fa-video, .fa-comments-alt, .fa-question-circle, .fa-share-square {
  685. font-size:25px;
  686. vertical-align:middle;
  687. margin-right:10px;
  688. }
  689.  
  690. .fa-sync-alt, .fa-info-circle {
  691. font-size:25px;
  692. vertical-align:middle;
  693. margin-right:15px;
  694. }
  695.  
  696. .reblog-perma {
  697. float:right;
  698. }
  699.  
  700. .reblog-perma a {
  701. border:none;
  702. }
  703.  
  704. .reblog-perma a:hover {
  705. background:none;
  706. opacity:.7;
  707. }
  708.  
  709. .tags {
  710. padding:30px;
  711. margin-left:-30px;
  712. margin-top:40px;
  713. bottom:0;
  714. width:600px;
  715. color:#222;
  716. font-size:13px;
  717. text-align:left;
  718. border-top:1px solid #f0f0f0;
  719. background:#fafafa;
  720. }
  721.  
  722. .tags a {
  723. color:#222;
  724. font-weight:700;
  725. padding:2px;
  726. letter-spacing:0.5px;
  727. border-radius:0px;
  728. border-color:{color:accent};
  729. }
  730.  
  731. .tags a:hover {
  732. background:{color:accent};
  733. color:#111;
  734. border-radius:3px;
  735. }
  736.  
  737. .fa-tags {
  738. font-size:18px;
  739. vertical-align:middle;
  740. margin-right:10px;
  741. float:left;
  742. }
  743.  
  744.  
  745.  
  746.  
  747. /* ---- BACK-TO-TOP BUTTON ---- */
  748.  
  749. #top {
  750. width: 40px;
  751. line-height: 40px;
  752. overflow: hidden;
  753. z-index: 999;
  754. display: none;
  755. cursor: pointer;
  756. position: fixed;
  757. bottom: 10px;
  758. right: 10px;
  759. color: {color:accent};
  760. text-align: center;
  761. font-size: 33px;
  762. text-decoration: none;
  763. border-radius:100%;
  764. border:none;
  765. }
  766. #top:hover {
  767. transform:scale(1.15);
  768. background:none;
  769. }
  770.  
  771.  
  772.  
  773. /* ---- PERMALINK PAGE ---- */
  774.  
  775. {block:PermalinkPage}
  776. .intro {
  777. display:none;
  778. }
  779.  
  780. article {
  781. margin-top:-45px;
  782. padding-bottom:30px;
  783. }
  784.  
  785. .postinfo {
  786. display:none;
  787. }
  788. {/block:PermalinkPage}
  789.  
  790. .post-notes {
  791. width:660px;
  792. text-align:center;
  793. font-size:13px;
  794. line-height:35px;
  795. border-top:1px solid #f0f0f0;
  796. padding-top:20px;
  797. margin-bottom:50px;
  798. list-style-type: none;
  799. background-color:#fff;
  800. }
  801.  
  802. .notes {
  803. list-style-type: none;
  804. }
  805.  
  806. .notes {
  807. list-style-type: none;
  808. }
  809.  
  810. .notes img {
  811. display:none;
  812. list-style-type: none;
  813. }
  814.  
  815. .permalink-info {
  816. margin-top:-70px;
  817. margin-bottom:20px;
  818. background-color:#fff;
  819. padding:30px;
  820. }
  821.  
  822.  
  823.  
  824. /* ---- CHAT POSTS ---- */
  825.  
  826. .chat-line {
  827. text-align:left;
  828. }
  829.  
  830. .chat-label {
  831. text-align:left;
  832. }
  833.  
  834.  
  835.  
  836. /* ---- ASK POSTS ---- */
  837.  
  838. .question {
  839. font-size:13px;
  840. padding:10px;
  841. border-bottom:1px solid rgba(0,0,0,0.05);
  842. text-align:left;
  843. }
  844.  
  845. .asker {
  846. padding:10px;
  847. border-radius:0px;
  848. text-align:left;
  849. }
  850.  
  851. .asker a {
  852. color:#111;
  853. border-radius:0px;
  854. padding:2px;
  855. }
  856.  
  857. .asker a:hover {
  858. border-radius:3px;
  859. }
  860.  
  861. .asker-question {
  862. padding:10px;
  863. }
  864.  
  865. .answer {
  866. margin-left:0px;
  867. text-align:right;
  868. font-size:13px;
  869. }
  870.  
  871.  
  872.  
  873. /* ---- LINK POSTS ---- */
  874.  
  875. .link {
  876. background:{color:accent};
  877. padding:10px;
  878. padding-top:25px;
  879. padding-bottom:25px;
  880. border-radius:5px;
  881. text-align:center;
  882. }
  883.  
  884. .link a {
  885. border:none;
  886. color:#fff;
  887. padding:10px;
  888. padding-top:25px;
  889. padding-bottom:25px;
  890. border-radius:5px;
  891. transition:0.3s;
  892. letter-spacing:0.5px;
  893. }
  894.  
  895. .link a:hover .fa-arrow-right {
  896. transform:translateX(5px);
  897. transition:0.3s;
  898. color:#fff;
  899. opacity:1;
  900. }
  901.  
  902. .link a:hover {
  903. background-color:{color:accent};
  904. opacity:0.8;
  905. }
  906.  
  907. .fa-arrow-right {
  908. color:#fff;
  909. font-size:20px;
  910. vertical-align:middle;
  911. margin-left:10px;
  912. transition:0.3s;
  913. opacity:0.7;
  914. }
  915.  
  916. .link-description {
  917. font-size:14px;
  918. line-height:25px;
  919. background:#fafafa;
  920. padding:10px;
  921. margin-top:10px;
  922. margin-bottom:30px;
  923. border-radius:5px;
  924. }
  925.  
  926.  
  927.  
  928. /* ---- PAGINATION ---- */
  929.  
  930. .pagination {
  931. padding:20px;
  932. padding-bottom:80px;
  933. width:660px;
  934. font-size:35px;
  935. margin-left:50px;
  936. }
  937.  
  938. .pagination_next {
  939. float:right;
  940. }
  941.  
  942. .pagination_previous {
  943. float:left;
  944. }
  945.  
  946. .pagination a {
  947. border-radius:0px;
  948. border:none;
  949. }
  950.  
  951. .pagination a:hover {
  952. color:{color:accent};
  953. background:none;
  954. transform:scale(1.15);
  955. }
  956.  
  957.  
  958. </style>
  959. </head>
  960.  
  961. <!--- audio player styling --->
  962. <script>
  963. $(document).ready(function() {
  964. $('iframe.tumblr_audio_player').load( function() {
  965. $('iframe.tumblr_audio_player').contents().find("head")
  966. .append($("<style type='text/css'> .audio-player{background:transparent; color:#fff;} </style>"));
  967. });
  968. });
  969. </script>
  970.  
  971. <body>
  972.  
  973. <div class="topbar">
  974.  
  975. <div class="topbar_title">{Title}</div>
  976. <div class="nav1">
  977. <a href="/"><i class="fal fa-home-alt"></i></a>
  978. <a href="/ask"><i class="fal fa-comment-alt-edit"></i></a>
  979. <a href="/archive"><i class="fal fa-calendar-week"></i></a>
  980. <a href="/submit"><i class="fal fa-inbox-in"></i></a>
  981. <a href="https://tumblr.com/follow/{Name}"><i class="fal fa-user-plus"></i></a>
  982. </div>
  983. <div class="nav2">
  984. <a href="{text:custom link 1 url}">{text:custom link 1 name}</a>
  985. <a href="{text:custom link 2 url}">{text:custom link 2 name}</a>
  986. <a href="{text:custom link 3 url}">{text:custom link 3 name}</a>
  987. <a href="{text:custom link 4 url}">{text:custom link 4 name}</a>
  988. </div>
  989.  
  990. <div class="progress-container">
  991. <div class="progress-bar" id="myBar"></div>
  992. </div>
  993.  
  994. </div>
  995.  
  996. <div class="intro">
  997. <div class="intro_greeting">
  998. Welcome to <span style="color:#111;font-weight:700;">{Name}</span>
  999. <p>{text:intro blurb}<br>
  1000. <button type="button"><span class="fal fa-arrow-circle-down"></span></button><p>
  1001. </div>
  1002. </div>
  1003.  
  1004. <div class="wrapper">
  1005. {block:Posts}
  1006. <div align="center">
  1007. <article id="p-{PostType}" class="post">
  1008.  
  1009.  
  1010.  
  1011. {block:Quote}
  1012. <div class="postinfo">
  1013. <span class="fas fa-quote-left"></span> Post: <b>Quote</b>
  1014. <div class="reblog-perma">
  1015. <a href="{ReblogURL}"><span class="far fa-sync-alt"></span></a>
  1016. <a href="{Permalink}"><span class="far fa-info-circle"></span></a>
  1017. </div>
  1018. </div>
  1019.  
  1020. <div class="quote">{Quote}</div>
  1021. {/block:Quote}
  1022.  
  1023.  
  1024.  
  1025. {block:Photo}
  1026. <div class="postinfo">
  1027. <span class="fas fa-image"></span> Post: <b>Photo</b>
  1028. <div class="reblog-perma">
  1029. <a href="{ReblogURL}"><span class="far fa-sync-alt"></span></a>
  1030. <a href="{Permalink}"><span class="far fa-info-circle"></span></a>
  1031. </div>
  1032. </div>
  1033.  
  1034. <img src="{PhotoURL-500}">
  1035. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1036. {/block:Photo}
  1037.  
  1038.  
  1039.  
  1040. {block:Text}
  1041. <div class="postinfo">
  1042. <span class="far fa-file-alt"></span> Post: <b>Text</b>
  1043. <div class="reblog-perma">
  1044. <a href="{ReblogURL}"><span class="far fa-sync-alt"></span></a>
  1045. <a href="{Permalink}"><span class="far fa-info-circle"></span></a>
  1046. </div>
  1047. </div>
  1048.  
  1049. {block:Title}<div class="text_title">{Title}</div>{/block:Title}
  1050. <div class="caption">{Body}</div>
  1051. {/block:Text}
  1052.  
  1053.  
  1054.  
  1055. {block:Audio}
  1056. <div class="postinfo">
  1057. <span class="fas fa-volume-up"></span> Post: <b>Audio</b>
  1058. <div class="reblog-perma">
  1059. <a href="{ReblogURL}"><span class="far fa-sync-alt"></span></a>
  1060. <a href="{Permalink}"><span class="far fa-info-circle"></span></a>
  1061. </div>
  1062. </div>
  1063.  
  1064. {block:AlbumArt}
  1065. <div class="album-art-container">
  1066. <img src="{AlbumArtURL}">
  1067. </div>
  1068. {/block:AlbumArt}
  1069.  
  1070. <div class="audio_player_bg">
  1071. <div class="audio_player_container">
  1072. <div class="audio_player">{AudioPlayer}</div>
  1073. </div>
  1074. </div>
  1075.  
  1076. <div class="audio_info">
  1077. {block:TrackName}
  1078. <span style="font-size:20px;font-weight:700;letter-spacing:1px;">{TrackName}</span>
  1079. {/block:TrackName}
  1080. <br>
  1081. {block:Artist}
  1082. <span style="opacity:0.7;font-size:14px;font-style:italic;letter-spacing:1px;font-weight:400;">{Artist}</span>
  1083. {/block:Artist}
  1084. </div>
  1085. {/block:Audio}
  1086.  
  1087.  
  1088.  
  1089. {block:Photoset}
  1090. <div class="postinfo">
  1091. <span class="far fa-images"></span> Post: <b>Photoset</b>
  1092. <div class="reblog-perma">
  1093. <a href="{ReblogURL}"><span class="far fa-sync-alt"></span></a>
  1094. <a href="{Permalink}"><span class="far fa-info-circle"></span></a>
  1095. </div>
  1096. </div>
  1097.  
  1098. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div></div>{/block:Photos}</div>
  1099.  
  1100. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1101. {/block:Photoset}
  1102.  
  1103.  
  1104.  
  1105. {block:Video}
  1106. <div class="postinfo">
  1107. <span class="fas fa-video"></span> Post: <b>Video</b>
  1108. <div class="reblog-perma">
  1109. <a href="{ReblogURL}"><span class="far fa-sync-alt"></span></a>
  1110. <a href="{Permalink}"><span class="far fa-info-circle"></span></a>
  1111. </div>
  1112. </div>
  1113. {Video-500}
  1114. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1115. {/block:Video}
  1116.  
  1117.  
  1118.  
  1119. {block:Chat}
  1120. <div class="postinfo">
  1121. <span class="far fa-comments-alt"></span> Post: <b>Chat</b>
  1122. <div class="reblog-perma">
  1123. <a href="{ReblogURL}"><span class="far fa-sync-alt"></span></a>
  1124. <a href="{Permalink}"><span class="far fa-info-circle"></span></a>
  1125. </div>
  1126. </div>
  1127. {block:Title}
  1128. <div class="text_title">{Title}</div>
  1129. {/block:Title}
  1130.  
  1131. <ul class="chat">
  1132. {block:Lines}
  1133.  
  1134. {block:Label}
  1135. <div class="chat-label"><b>{Label}</b>
  1136. {/block:Label}{Line}</div><br>
  1137. {/block:Lines}
  1138. </ul>
  1139. </li>
  1140. {/block:Chat}
  1141.  
  1142.  
  1143. {block:Answer}
  1144. <div class="postinfo">
  1145. <span class="far fa-question-circle"></span> Post: <b>Question</b>
  1146. <div class="reblog-perma">
  1147. <a href="{ReblogURL}"><span class="far fa-sync-alt"></span></a>
  1148. <a href="{Permalink}"><span class="far fa-info-circle"></span></a>
  1149. </div>
  1150. </div>
  1151. <div class="question">
  1152. <div class="asker">{Asker} sent:</div>
  1153. <div class="asker-question">{Question}</div>
  1154. </div>
  1155.  
  1156. <div class="caption"><div class="answer">{Answer}</div></div>
  1157. {/block:Answer}
  1158.  
  1159.  
  1160. {block:Link}
  1161. <div class="postinfo">
  1162. <span class="fas fa-share-square"></span> Post: <b>Link</b>
  1163. <div class="reblog-perma">
  1164. <a href="{ReblogURL}"><span class="far fa-sync-alt"></span></a>
  1165. <a href="{Permalink}"><span class="far fa-info-circle"></span></a>
  1166. </div>
  1167. </div>
  1168.  
  1169. <div class="link">
  1170. <a href="{URL}">{Name} <i class="far fa-arrow-right"></i></a>
  1171. </div>
  1172. <div class="link-description">{Description}</div>
  1173. {/block:Link}
  1174.  
  1175.  
  1176. {block:HasTags}
  1177. <div class="tags">
  1178. <i class="far fa-tags"></i>
  1179. {block:Tags}
  1180. <a href="{TagURL}">{Tag}</a>&nbsp;
  1181. {/block:Tags}
  1182. </div>
  1183. {/block:HasTags}
  1184.  
  1185. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}{block:RebloggedFrom}<!-- {ReblogParentName} -->{/block:RebloggedFrom}
  1186.  
  1187.  
  1188. </article>
  1189.  
  1190. {block:PermalinkPage}
  1191. <div class="permalink-info">
  1192. Posted on {Month} {DayOfMonthWithSuffix}, {Year} with {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
  1193. </div>
  1194. {block:PostNotes}
  1195. <div class="post-notes">
  1196. {PostNotes}
  1197. </div>
  1198. {/block:PostNotes}
  1199. {/block:PermalinkPage}
  1200. </div>
  1201.  
  1202. {/block:Posts}
  1203. </div>
  1204. </div>
  1205.  
  1206. <div align="center">
  1207. {block:Pagination}
  1208. <div class="pagination">
  1209. {block:NextPage}
  1210. <div class="pagination_next"><a href="{NextPage}"><i class="fas fa-chevron-right"></i></a></div>
  1211. {/block:NextPage}
  1212.  
  1213. {block:PreviousPage}
  1214. <div class="pagination_previous"><a href="{PreviousPage}"><i class="fas fa-chevron-left"></i></a></div>
  1215. {/block:PreviousPage}
  1216. </div>
  1217. {/block:Pagination}
  1218. </div>
  1219.  
  1220. <div class="footer">
  1221. <h1>{text:footer title}</h1>
  1222. <div class="footer_nav">
  1223. Tags: <a href="{text:footer tag 1 url}">{text:footer tag 1 name}</a> <a href="{text:footer tag 2 url}">{text:footer tag 2 name}</a> <a href="{text:footer tag 3 url}">{text:footer tag 3 name}</a>
  1224. </div>
  1225. <div class="description">{Description}</div>
  1226. <div class="credit">Created by <a href="https://astrocodes.tumblr.com">astrocodes</a></div>
  1227. </div>
  1228.  
  1229. <a id="top" title="Back to top" href="#"><span class="fal fa-arrow-circle-up"></span></a>
  1230.  
  1231.  
  1232. <script>
  1233. window.onscroll = function() {myFunction()};
  1234.  
  1235. function myFunction() {
  1236. var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  1237. var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  1238. var scrolled = (winScroll / height) * 100;
  1239. document.getElementById("myBar").style.width = scrolled + "%";
  1240. }
  1241. </script>
  1242.  
  1243. <script>
  1244. $("button").click(function() {
  1245. $('html,body').animate({
  1246. scrollTop: $(".wrapper").offset().top},
  1247. 'slow');
  1248. });
  1249. </script>
  1250.  
  1251. <script>
  1252. $(document).ready(function(){
  1253. $('.photo-slideshow').pxuPhotoset({
  1254. lightbox: true,
  1255. rounded: false,
  1256. gutter: '5px',
  1257. borderRadius: '0px',
  1258. photoset: '.photo-slideshow',
  1259. photoWrap: '.photo-data',
  1260. photo: '.pxu-photo'
  1261. });
  1262. });
  1263. </script>
  1264.  
  1265. <script>
  1266. $(window).scroll(function() {
  1267. var height = $(window).scrollTop();
  1268. if (height > 100) {
  1269. $('#top').fadeIn();
  1270. } else {
  1271. $('#top').fadeOut();
  1272. }
  1273. });
  1274. $(document).ready(function() {
  1275. $("#top").click(function(event) {
  1276. event.preventDefault();
  1277. $("html, body").animate({ scrollTop: 0 }, "slow");
  1278. return false;
  1279. });
  1280.  
  1281. });
  1282. </script>
  1283.  
  1284. </body>
  1285. </html>
Advertisement
Add Comment
Please, Sign In to add comment