Rivergronrph

Theme 10: IRIS

Jan 8th, 2018
5,040
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.81 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <title>{Title}</title>
  6. <link href="{Favicon}" rel="shortcut icon">
  7. <link href="{RSS}" rel="alternate" type="application/rss+xml">
  8. </head>
  9.  
  10. <body>
  11. {block:Description}
  12. <meta content="{MetaDescription}" name="description">{/block:Description}
  13.  
  14.  
  15. <!---
  16. theme by Stephanie @ Stephwrites
  17.  
  18. Dont: Repost, remove the credit, or use as a base code
  19.  
  20. =-->
  21.  
  22. <meta content="{color:post accent}eee" name="color:Background">
  23. <meta content="#ffffff" name="color:post background">
  24. <meta content="#ffffff" name="color:post accent">
  25. <meta content="#818181" name="color:sidebar">
  26. <meta content="#818181" name="color:sidebar text">
  27. <meta content="#525252" name="color:text">
  28. <meta content="#aa8488" name="color:accent">
  29. <meta content="#818181" name="color:Hover">
  30.  
  31. <meta content="" name="image:sidebar">
  32. <meta content="" name="image:background">
  33.  
  34. <meta content="" name="text:Link1">
  35. <meta content="" name="text:Link1 URL">
  36. <meta content="" name="text:Link2">
  37. <meta content="" name="text:Link2 URL">
  38. <meta content="" name="text:Link3">
  39. <meta content="" name="text:Link3 URL">
  40.  
  41. <meta name="if:grayscale" content="1"/>
  42. <meta name="if:inverttumblrcontrols" content="1"/>
  43.  
  44.  
  45. <link id="webfont_arquitecta" rel="stylesheet" type="text/css" href="https://assets.tumblr.com/fonts/arquitecta/stylesheet.css?v=3"/>
  46.  
  47. <script src="https://use.fontawesome.com/07b1f541af.js">
  48. </script>
  49.  
  50. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  51.  
  52. <script src="https://static.tumblr.com/cphc2pb/F4sp23y83/particles.js"</script>
  53.  
  54. <script src="https://static.tumblr.com/cphc2pb/Ziip23y74/particles.min.js"</script>
  55.  
  56. <script src="https://static.tumblr.com/cphc2pb/JyTp23y6e/app.js"></script>
  57.  
  58. <script type="text/javascript" src="https://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  59.  
  60. <style type="text/css">
  61.  
  62. /*BASICS*/
  63. body {
  64. background:{color:background};
  65. margin:0px;
  66. color:{color:text};
  67. font-family:helvetica;
  68. font-size:12.5px;
  69. line-height:110%;
  70. letter-spacing:0px;
  71. background-image:url('{image:background}');
  72. background-attachment: fixed;
  73. }
  74.  
  75.  
  76. a {
  77. text-decoration:none;
  78. outline:none;
  79. -moz-outline-style:none;
  80. color:{color:accent};
  81. font-weight:bold;
  82. -webkit-transition: all 0.5s ease-in;
  83. -moz-transition: all 0.5s ease-in;
  84. transition: all 0.5s ease-in
  85. }
  86.  
  87. a:hover {
  88. color:{color:hover};
  89. -webkit-transition: all 0.5s ease-in;
  90. -moz-transition: all 0.5s ease-in;
  91. transition: all 0.5s ease-in
  92. }
  93.  
  94. img {
  95. border:none;
  96. {block:Ifgrayscale}-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  97. filter: grayscale(100%);
  98. -webkit-transition: all 0.5s ease-in;
  99. -moz-transition: all 0.5s ease-in;
  100. transition: all 0.5s ease-in{/block:Ifgrayscale}
  101. }
  102.  
  103. img:hover {
  104. {block:Ifgrayscale}-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  105. filter: grayscale(0%);-
  106. webkit-transition: all 0.5s ease-in;
  107. -moz-transition: all 0.5s ease-in;
  108. transition: all 0.5s ease-in{/block:Ifgrayscale}
  109. }
  110.  
  111. .photo {
  112. border:none;
  113. {block:Ifgrayscale}-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  114. filter: grayscale(100%);
  115. -webkit-transition: all 0.5s ease-in;
  116. -moz-transition: all 0.5s ease-in;
  117. transition: all 0.5s ease-in{/block:Ifgrayscale}
  118. }
  119.  
  120. .photo:hover {
  121. {block:Ifgrayscale} -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  122. filter: grayscale(0%);
  123. -webkit-transition: all 0.5s ease-in;
  124. -moz-transition: all 0.5s ease-in;
  125. transition: all 0.5s ease-in{/block:Ifgrayscale}
  126. }
  127.  
  128. small {
  129. font-size:10.5px;
  130. }
  131. pre {
  132. text-align: center;
  133. font-style:italic;
  134. font-weight:bold;
  135. line-height:18px;
  136. letter-spacing:0.5px;
  137. padding:2px;
  138. background-color:{color:accent};
  139. color:{color:post background};
  140. font-family:helvetica;
  141. text-transform:lowercase;
  142. font-size:14px;
  143. border-top-right-radius: 10px;
  144. border-bottom-left-radius: 10px;
  145. font-family:'arquitecta';
  146. }
  147.  
  148. pre a {
  149. color:{color:hover} }
  150.  
  151. ::-webkit-scrollbar {
  152. width:17px;
  153. height:17px;
  154. }
  155. ::-webkit-scrollbar {
  156. background-color:rgb(255,255,255); /* background color */
  157. }
  158. ::-webkit-scrollbar-track {
  159. border:7px solid rgb(255,255,255); /* background color */
  160. background-color:rgb(230,230,230); /* light border color */
  161. }
  162. ::-webkit-scrollbar-thumb {
  163. border:7px solid rgb(255,255,255); /* background color */
  164. background-color:rgb(144,144,144); /* dark border color */
  165. min-height:24px;
  166. min-width:24px;
  167. }
  168.  
  169. blockquote {
  170. padding-left:5px;
  171. border-left:2px solid {color:accent};
  172. background:{color:post accent};
  173. padding:5px;
  174. }
  175.  
  176. blockquote blockquote {
  177. padding-left:5px;
  178. border-left:2px solid {color:accent};
  179. }
  180.  
  181.  
  182. div#qTip {
  183. display: none;
  184. text-align: center;
  185. position :absolute;
  186. letter-spacing: 0.5px;
  187. text-transform: uppercase;
  188. margin-top:10px;
  189. left:5px;
  190. z-index: 5;
  191. font-size:9px;
  192. font-family: helvetica;
  193. font-style:italic;
  194. padding:4px;
  195. color: {color:text};
  196. background: {color:post background};
  197. border-top-right-radius: 10px;
  198. border-bottom-left-radius: 10px;
  199. }
  200.  
  201. h1 {
  202. font-family:'arquitecta';
  203. line-height:28px;
  204. font-size:26px;
  205. font-style:italic;
  206. width:500px;
  207. }
  208.  
  209. h1 small {
  210. font-size:22px;
  211. }
  212.  
  213. h2 {
  214. font-family:'arquitecta';
  215. line-height:24px;
  216. font-size:22px;
  217. font-style:italic;
  218. width:500px;
  219. }
  220.  
  221. h2 small {
  222. font-size:18px;
  223. }
  224.  
  225.  
  226. h3 {
  227. font-family:'arquitecta';
  228. line-height:18px;
  229. font-size:18px;
  230. font-style:italic;
  231. width:500px;
  232. }
  233.  
  234. h3 small {
  235. font-size:14px;
  236. }
  237.  
  238. h4 {
  239. font-family:'arquitecta';
  240. line-height:14px;
  241. font-size:14px;
  242. font-style:italic;
  243. width:500px;
  244. }
  245.  
  246. h4 small {
  247. font-size:14px;
  248. }
  249.  
  250. b, strong {
  251. font-weight:bold;
  252. color:{color:accent};
  253. }
  254.  
  255.  
  256. ::selection {
  257. background: {color:accent};
  258. color: {color:Post background};
  259. }
  260.  
  261. ::-moz-selection {
  262. background: {color:accent};
  263. color: {color:Post background};
  264. }
  265.  
  266. ::-webkit-selection {
  267. background: {color:accent};
  268. color: {color:Post background};
  269. }
  270.  
  271. /*POSTS*/
  272.  
  273.  
  274. .posts {
  275. width:520px;
  276. margin-top:55px;
  277. margin-left:400px;
  278. color:{color:text};
  279. position:absolute;
  280. }
  281.  
  282. .entries {
  283. width:500px;
  284. padding:10px;
  285. margin-left:0px;
  286. padding-bottom:20px;
  287. color:{color:text};
  288. background:{color:post background};
  289. }
  290.  
  291. /*INFO AND TAGS*/
  292.  
  293. .tags {
  294. display:block;
  295. font-size:10px;
  296. padding:10px;
  297. font-family:helvetica;
  298. font-style:italic;
  299. text-align:left;
  300. line-height:16px;
  301. color:{color:text};
  302. background-color:{color:post background};
  303. margin-top:0px;
  304. margin-bottom:30px;
  305. border-top:1px solid {color:post accent};
  306. border-bottom-right-radius: 10px;
  307. border-bottom-left-radius: 10px;
  308. width:500px;}
  309.  
  310.  
  311. .tags a {
  312. color:{color:accent};
  313. -webkit-transition:all 0.5s ease-in-out;
  314. -moz-transition:all 0.5s ease-in-out;
  315. -o-transition:all 0.5s ease-in-out;
  316. transition:all 0.5s ease-in-out;}
  317.  
  318. .tags a:hover {
  319. color:{color:accent};
  320. -webkit-transition:all 0.5s ease-in-out;
  321. -moz-transition:all 0.5s ease-in-out;
  322. -o-transition:all 0.5s ease-in-out;
  323. transition:all 0.5s ease-in-out;}
  324.  
  325. .info {
  326. display:block;
  327. font-size:10px;
  328. padding:20px;
  329. font-family:helvetica;
  330. font-style:italic;
  331. text-align:center;
  332. color:{color:text};
  333. background-color:{color:post background};
  334. margin-top:0px;
  335. margin-bottom:0px;
  336. line-height:100%;
  337. border-top-right-radius: 10px;
  338. border-top-left-radius: 10px;
  339. border-bottom:1px solid {color:post accent};
  340. width:480px;}
  341.  
  342.  
  343. .info a {
  344. color:{color:accent};
  345. -webkit-transition:all 0.5s ease-in-out;
  346. -moz-transition:all 0.5s ease-in-out;
  347. -o-transition:all 0.5s ease-in-out;
  348. transition:all 0.5s ease-in-out;}
  349.  
  350. .info a:hover {
  351. color:{color:accent};
  352. -webkit-transition:all 0.5s ease-in-out;
  353. -moz-transition:all 0.5s ease-in-out;
  354. -o-transition:all 0.5s ease-in-out;
  355. transition:all 0.5s ease-in-out;}
  356.  
  357. /*POST STYLES*/
  358.  
  359. .post_title {
  360. display:block;
  361. padding:5px;
  362. text-align:center;
  363. font-size:22px;
  364. color:{color:text};
  365. font-family:'arquitecta';
  366. line-height:28px;
  367. font-weight:bold;
  368. font-style:italic;}
  369.  
  370.  
  371. .photo img {
  372. display:block;
  373. margin-bottom:5px; }
  374.  
  375.  
  376. /*QUOTE POSTS*/
  377.  
  378. .quote {
  379. display:block;
  380. padding:10px;
  381. text-align:center;
  382. font-style:italic;
  383. font-size:18px;
  384. line-height:22px;
  385. font-family:helvetica;
  386. color:{color:text};
  387. }
  388.  
  389. .source {
  390. display:block;
  391. padding:5px;
  392. text-align:right;
  393. font-size:12px;}
  394.  
  395.  
  396. /*CHAT POSTS*/
  397.  
  398. .chat li {
  399. display:block;
  400. padding:5px;
  401. color:{color:text};}
  402.  
  403. .audioimg img {
  404. width:75px;
  405. height:75px;
  406. color:{color:text};
  407. text-align:center;
  408. text-transform:uppercase;
  409. border-top-left-radius: 100px;
  410. border-top-right-radius: 100px;
  411. border-bottom-left-radius: 100px;
  412. }
  413.  
  414. .audioinfo {
  415. color:{color:text};
  416. font-size:12px;
  417. font-family:helvetica;
  418. padding-left:5px;
  419. }
  420.  
  421. /*ASK POSTS*/
  422.  
  423. #question {
  424. color:{color:text};
  425. text-align: justify;
  426. font-size: 12.5px;
  427. font-family:helvetica;
  428. font-style:none;
  429. margin-left: 65px;
  430. padding: 10px;}
  431.  
  432. #askerportrait {
  433. float:center;
  434. margin-left:30px;
  435. margin-top:-2px;
  436. position: relative;
  437. }
  438.  
  439. #askerportrait img {
  440. margin-left:-30px;
  441. margin-top:2px;
  442. width:64px;
  443. height:64px;
  444. border-top-left-radius: 100px;
  445. border-top-right-radius: 100px;
  446. border-bottom-left-radius: 100px;
  447.  
  448. }
  449.  
  450. #asker {
  451. text-align:right;
  452. border-bottom:1px solid {color:text};
  453. padding-top:8px;
  454. padding-bottom:4px;
  455. font-size:18px;
  456. font-family: helvetica;
  457. font-style:italic;
  458. margin-top:-65px;
  459. font-weight:bold;
  460. color: {color:text};
  461. }
  462.  
  463. #asker a {
  464. color: {color:accent};
  465.  
  466. }
  467.  
  468. #asker a:hover {
  469. color: {color:hover};
  470. }
  471.  
  472. #answer {
  473. padding-top:3px;
  474. text-align: justify;
  475. margin-top: 10px;
  476. }
  477.  
  478.  
  479.  
  480. /*CREDIT*/
  481.  
  482. #cred a {
  483. position:fixed;
  484. z-index:99999;
  485. color:{color:accent};
  486. font-size:px;
  487. font-family:arial;
  488. font-weight: bold;
  489. bottom:5px;
  490. right:5px;
  491. padding:10px;
  492. letter-spacing:.5px;
  493. -webkit-transition: all 0.7s ease-in; -moz-transition: all 0.7s ease-in; transition: all 0.7s ease-in
  494. }
  495.  
  496.  
  497. #cred a:hover{
  498. color:{color:hover};
  499.  
  500. }
  501.  
  502.  
  503.  
  504. /*NOTES INFO*/
  505.  
  506.  
  507.  
  508. ol.notes {
  509. padding: 0px;
  510. margin: 25px 0px;
  511. list-style-type: none;
  512. border-bottom: solid 1px {color:accent};
  513. }
  514.  
  515. ol.notes li.note {
  516. border-top: solid 1px {color:accent};
  517. padding: 10px;
  518. }
  519.  
  520. ol.notes li.note img.avatar {
  521. vertical-align: -4px;
  522. margin-right: 10px;
  523. width: 16px;
  524. height: 16px;
  525. }
  526.  
  527. ol.notes li.note span.action {
  528. font-weight: bold;
  529. }
  530.  
  531. ol.notes li.note .answer_content {
  532. font-weight: normal;
  533. }
  534.  
  535. ol.notes li.note blockquote {
  536. border-color: {color:accent};
  537. padding: 4px 10px;
  538. margin: 10px 0px 0px 25px;
  539. }
  540.  
  541. ol.notes li.note blockquote a {
  542. text-decoration: none;
  543. }
  544.  
  545. /*TUMBLR CONTROLS*/
  546. iframe.tmblr-iframe {
  547. z-index:99999999999999!important;
  548. top:-2px!important;
  549. right:0!important;
  550. opacity:0;
  551. padding-right:38px;
  552. {block:Ifinverttumblrcontrols}
  553. filter:invert(1) contrast(150%);
  554. -webkit-filter:invert(1) contrast(150%);
  555. -o-filter:invert(1) contrast(150%);
  556. -moz-filter:invert(1) contrast(150%);
  557. -ms-filter:invert(1) contrast(150%);
  558. {block:Ifinverttumblrcontrols}
  559. transform:scale(0.65);
  560. transform-origin:100% 0;
  561. -webkit-transform:scale(0.65);
  562. -webkit-transform-origin:100% 0;
  563. -o-transform:scale(0.65);
  564. -o-transform-origin:100% 0;
  565. -moz-transform:scale(0.65);
  566. -moz-transform-origin:100% 0;
  567. -ms-transform:scale(0.65);
  568. -ms-transform-origin:100% 0;}
  569.  
  570. iframe.tmblr-iframe:hover {
  571. opacity:0.6!important;}
  572.  
  573. .hcontrols {
  574. position:fixed;
  575. top:0;
  576. right:0;
  577. z-index:999999999;}
  578.  
  579. .hcontrols svg {
  580. width:14px;
  581. height:14px;
  582. padding:9px;}
  583.  
  584. .hcontrols svg path {
  585. fill:{color:sidebar};/* change this to change the color of the icon */}
  586.  
  587.  
  588. /*SIDEBAR*/
  589.  
  590.  
  591.  
  592. header {
  593. position:fixed;
  594. width:300px;
  595. margin:0px auto 0px auto;
  596. height:100%;
  597. }
  598.  
  599. #particles-js {
  600. position: relative;
  601. width: 350px;
  602. height:100%;
  603. background-color: {color:sidebar};
  604. background-repeat: no-repeat;
  605. background-position: top left;
  606. background-attachment:fixed;
  607. }
  608.  
  609. #desc {
  610. position:fixed;
  611. background:{color:sidebar};
  612. width:250px;
  613. color:{color:sidebar text};
  614. left:50px;
  615. text-align:justify;
  616. top:385px;
  617. opacity: 0.7;
  618. -moz-box-shadow: 0 0 5px 10px {color:sidebar};
  619. -webkit-box-shadow: 0 0 5px 10px {color:sidebar};
  620. box-shadow: 0 0 5px 10px {color:sidebar};
  621. }
  622.  
  623. #sidebar {
  624. position:fixed;
  625. height:200px;
  626. top:150px;
  627. width:200px;
  628. overflow:hidden;
  629. left:55px;
  630. border-top-left-radius: 100px;
  631. border-top-right-radius: 100px;
  632. border-bottom-left-radius: 100px;
  633. border:3px solid {color:sidebar text};
  634. }
  635.  
  636. #sidebar img {
  637. width:200px;
  638. }
  639.  
  640. #pagination {
  641. bottom:10px;
  642. position:relative;
  643. width:500px;
  644. padding:10px;
  645. text-align:center;
  646. background:{color:sidebar};
  647. border-radius:10px;
  648. color:{color:sidebar text};
  649. font-size:16px;
  650. }
  651.  
  652. #nav {
  653. position:fixed;
  654. display: block;
  655. left:275px;
  656. top:250px;
  657. font-size:14px;
  658. line-height:20px;
  659. }
  660.  
  661. #title {
  662. text-align: center;
  663. font-style:italic;
  664. font-weight:bold;
  665. line-height:18px;
  666. letter-spacing:0.5px;
  667. padding:2px;
  668. background-color:{color:accent};
  669. color:{color:post background};
  670. font-family:helvetica;
  671. text-transform:lowercase;
  672. font-size:14px;
  673. border-top-right-radius: 10px;
  674. border-bottom-left-radius: 10px;
  675. font-family:'arquitecta';
  676. }
  677.  
  678.  
  679.  
  680.  
  681.  
  682. {CustomCSS}
  683. </style>
  684.  
  685.  
  686.  
  687.  
  688. <header>
  689. <div id="particles-js"></div>
  690. </header>
  691.  
  692.  
  693.  
  694.  
  695. <div id="desc">
  696. <div id="title">{title}</div><br/>
  697.  
  698. {description}</div>
  699.  
  700. <div id="sidebar"><img src="{image:sidebar}"></div>
  701.  
  702. <div id="nav">
  703. <a href="/" title="refresh"><i class="fa fa-refresh" aria-hidden="true"></i></a><br/>
  704. <a href="/ask" title="askbox"><i class="fa fa-comment" aria-hidden="true"></i></a><br/>
  705. <a href="{text:Link1 URL}" title="{text:Link1}"><i class="fa fa-bars" aria-hidden="true"></i></a><br/>
  706. <a href="{text:Link2 URL}" title="{text:Link2}"><i class="fa fa-heart" aria-hidden="true"></i></a><br/>
  707. <a href="{text:Link3 URL}" title="{text:Link3}"><i class="fa fa-leaf" aria-hidden="true"></i></a>
  708. </div>
  709.  
  710.  
  711. <!--POSTS-->
  712.  
  713.  
  714. <div class="posts">
  715. {block:Posts}
  716.  
  717.  
  718. <div class="info">
  719. <span style="float:left">
  720. {block:RebloggedFrom}<i class="fa fa-retweet" aria-hidden="true"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  721.  
  722. </span>
  723. <span style="float:right"><a href="{Permalink}">{TimeAgo}</a></span>
  724.  
  725. </div>
  726.  
  727. <div class="entries">
  728.  
  729.  
  730. <!--TEXT POSTS-->
  731.  
  732. {block:text} {block:Title}
  733. <div class="post_title">{Title}</div>
  734. {/block:Title}
  735.  
  736. <div class="text">
  737. {Body}
  738. </div>
  739. {/block:text} {block:Photo}
  740.  
  741.  
  742. <!--PHOTOSET POSTS-->
  743.  
  744. <div class="photo">
  745. <center>
  746. <img src="{PhotoURL-500}">
  747. </center>
  748. </div>
  749. <div class="text">
  750. {Caption}
  751. </div>
  752. {/block:Photo} {block:Photoset}
  753.  
  754. <center>
  755. <div class="photo">
  756. {Photoset-500}
  757. </div>
  758. </center>
  759.  
  760.  
  761. <div class="text">
  762. {Caption}
  763. </div>
  764. {/block:Photoset}
  765.  
  766.  
  767. <!--QUOTE POSTS-->
  768.  
  769. {block:Quote}
  770. <div class="quote">
  771. "{Quote}"
  772. </div>
  773. <div class="source">
  774. {Source}
  775. </div>
  776. {/block:Quote}
  777.  
  778.  
  779. <!--QUOTE POSTS-->
  780.  
  781. {block:Link}
  782. <div class="post_title">
  783. <a href="{URL}"><i aria-hidden="true" class="fa fa-link"></i>&nbsp;{Name}</a>
  784. </div>
  785. {block:Description}
  786.  
  787. <div class="text">
  788. {Description}
  789. </div>
  790. {/block:Description} {/block:Link}
  791.  
  792.  
  793. <!--CHAT POSTS-->
  794.  
  795. {block:Chat} {block:Title}
  796.  
  797. <div class="post_title">
  798. {Title}
  799. </div>
  800. {/block:Title}
  801.  
  802. <div class="chat">
  803. <ul>
  804. <li style="list-style: none">{block:Lines}</li>
  805.  
  806.  
  807. <li class="{Alt}">{block:Label}<b>{Label}</b> {/block:Label}{Line}</li>
  808.  
  809.  
  810. <li style="list-style: none">{/block:Lines}</li>
  811. </ul>
  812. </div>
  813. {/block:Chat}
  814.  
  815.  
  816. <!--AUDIO POSTS-->
  817.  
  818. {block:Audio}
  819. {block:AudioPlayer}
  820. <table>
  821. <tr><td>
  822. {block:AlbumArt}
  823. <div class="audioimg"><img src="{AlbumArtURL}">
  824. </div>
  825. {/block:AlbumArt}</td><td>
  826. <div class="audioplayer">
  827. {AudioPlayerWhite}
  828. </div>
  829. <div class="audioinfo">
  830. {block:Artist}<b>Name</b>: {Artist}{/block:Artist}<br>
  831. {block:Album}<b>Album</b>: {Album}<br>
  832. {/block:Album} {block:TrackName}<b>Track</b>: {TrackName}{/block:TrackName}
  833. </div>
  834. </td>
  835. </tr>
  836. </table>
  837.  
  838. {/block:AudioPlayer}
  839.  
  840. {/block:AudioPlayer}
  841. {block:AudioEmbed} {AudioEmbed}{/block:AudioEmbed}
  842.  
  843. <div class="text">
  844. {Caption}
  845. </div>
  846. {/block:Caption} {/block:Audio}
  847. <!--VIDEO POSTS-->
  848.  
  849. {block:Video}
  850.  
  851. <center>
  852. <div class="photo">
  853. {VideoEmbed-500}
  854. </div>
  855. </center>
  856.  
  857.  
  858. <div class="text">
  859. {Caption}
  860. </div>
  861. {/block:Video}
  862.  
  863.  
  864. <!--ASK POSTS-->
  865.  
  866. {block:Answer}
  867.  
  868. <div id="askerportrait"><img src="{AskerPortraitURL-64}"></div>
  869. <div id="asker">
  870. {asker}
  871. </div>
  872.  
  873. <div id="question">
  874. {Question}
  875. </div>
  876.  
  877. <div id="answer">
  878. {Answer}
  879. </div>
  880. {/block:Answer}
  881. </div>
  882.  
  883.  
  884. <!--POST INFO-->
  885.  
  886.  
  887. <div class="tags">
  888. {block:HasTags} tagged as: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}
  889. {/block:HasTags}
  890. </br>{NoteCountWithLabel}
  891. <span style="float:right;"><a class="fa fa-retweet" href="{ReblogURL}" target="_blank" title="reblog"></a></span>
  892.  
  893. {block:PostNotes}
  894. <div id="notes">
  895. {PostNotes}
  896. </div>
  897. {/block:PostNotes}
  898. </div>
  899. {/block:Posts}
  900.  
  901.  
  902.  
  903.  
  904. {block:Pagination}
  905. <div id="pagination"> {block:PreviousPage}<a class="jump" href="{PreviousPage}"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a>{/block:PreviousPage} {block:JumpPagination length="5"}{block:CurrentPage} <span class="current_page">{PageNumber}</span> {/block:CurrentPage}{block:JumpPage} <a class="jump_page" href="{URL}">{PageNumber}</a> {/block:JumpPage}{/block:JumpPagination} {block:NextPage}<a class="jump" href="{NextPage}"><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>{/block:NextPage}
  906. </div>
  907. {/block:Pagination}
  908.  
  909.  
  910. <!--CREDIT-->
  911. <div id="cred">
  912. <a href="https://stephwrites.tumblr.com/tagged/my-themes"><i class="fa fa-code" aria-hidden="true"></i></a>
  913. </div>
  914.  
  915.  
  916. <script>
  917. var count_particles, stats, update;
  918. stats = new Stats;
  919. stats.setMode(0);
  920. stats.domElement.style.position = ‘absolute’;
  921. stats.domElement.style.left = '0px’;
  922. stats.domElement.style.top = '0px’;
  923. document.body.appendChild(stats.domElement);
  924. count_particles = document.querySelector(’.js-count-particles’);
  925. update = function() {
  926. stats.begin();
  927. stats.end();
  928. if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
  929. count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
  930. }
  931. requestAnimationFrame(update);
  932. };
  933. requestAnimationFrame(update);</script>
  934.  
  935. <script>
  936. particlesJS("particles-js", {
  937. "particles": {
  938. "number": {
  939. "value": 120,
  940. "density": {
  941. "enable": true,
  942. "value_area": 600
  943. }
  944. },
  945. "color": {
  946. "value": "{color:accent}"
  947. },
  948. "shape": {
  949. "type": "circle",
  950. "stroke": {
  951. "width": 0,
  952. "color": "{color:accent}"
  953. },
  954. "polygon": {
  955. "nb_sides": 5
  956. },
  957. },
  958. "opacity": {
  959. "value": 0.8,
  960. "random": false,
  961. "anim": {
  962. "enable": false,
  963. "speed": 1,
  964. "opacity_min": 0.3,
  965. "sync": false
  966. }
  967. },
  968. "size": {
  969. "value": 3,
  970. "random": true,
  971. "anim": {
  972. "enable": false,
  973. "speed": 40,
  974. "size_min": 0.1,
  975. "sync": false
  976. }
  977. },
  978. "line_linked": {
  979. "enable": true,
  980. "distance": 150,
  981. "color": "{color:accent}",
  982. "opacity": 0.4,
  983. "width": 1
  984. },
  985. "move": {
  986. "enable": true,
  987. "speed": 6,
  988. "direction": "none",
  989. "random": false,
  990. "straight": false,
  991. "out_mode": "out",
  992. "bounce": false,
  993. "attract": {
  994. "enable": false,
  995. "rotateX": 600,
  996. "rotateY": 1200
  997. }
  998. }
  999. },
  1000. "interactivity": {
  1001. "detect_on": "canvas",
  1002. "events": {
  1003. "onhover": {
  1004. "enable": true,
  1005. "mode": "grab"
  1006. },
  1007. "onclick": {
  1008. "enable": true,
  1009. "mode": "push"
  1010. },
  1011. "resize": true
  1012. },
  1013. "modes": {
  1014. "grab": {
  1015. "distance": 140,
  1016. "line_linked": {
  1017. "opacity": 1
  1018. }
  1019. },
  1020. "bubble": {
  1021. "distance": 400,
  1022. "size": 40,
  1023. "duration": 2,
  1024. "opacity": 8,
  1025. "speed": 3
  1026. },
  1027. "repulse": {
  1028. "distance": 200,
  1029. "duration": 0.4
  1030. },
  1031. "push": {
  1032. "particles_nb": 4
  1033. },
  1034. "remove": {
  1035. "particles_nb": 2
  1036. }
  1037. }
  1038. },
  1039. "retina_detect": true
  1040. });</script>
  1041.  
  1042. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  1043.  
  1044. </body>
  1045. </html>
Advertisement
Add Comment
Please, Sign In to add comment