valkyriethemes

[T#09 - Rain] by Onyxian

Mar 10th, 2017
559
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.83 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5.  
  6. <title>{Title}</title>
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. <link rel="shortcut icon" href="{Favicon}">
  9. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  10.  
  11.  
  12. <meta name="viewport" content="width=device-width, initial-scale=1">
  13. <meta name="color:Accent" content="#e2f0f2">
  14. <meta name="color:Accent Hover" content="#fff">
  15. <meta name="color:Background" content="#fff">
  16. <meta name="color:Border" content="#eee">
  17. <meta name="color:Caption" content="#fafafa">
  18. <meta name="color:Posts" content="#ffffff">
  19. <meta name="color:Sidebar" content="#e2f0f2">
  20. <meta name="color:Text" content="#3f3f3f">
  21.  
  22. <meta name="if:Avatar" content="0">
  23. <meta name="if:Infinite Scroll" content="0">
  24. <meta name="if:Links On Left" content="0">
  25. <meta name="if:Show Captions" content="1">
  26. <meta name="if:Show Tags" content="1">
  27. <meta name="if:Sidebar" content="">
  28. <meta name="if:Unnested Captions" content="1">
  29.  
  30. <meta name="image:Background" content="">
  31. <meta name="image:Sidebar" content="">
  32.  
  33. <meta name="text:Link 1" content="" >
  34. <meta name="text:Link 1 URL" content="" >
  35. <meta name="text:Link 2" content="" >
  36. <meta name="text:Link 2 URL" content="" >
  37. <meta name="text:Link 3" content="" >
  38. <meta name="text:Link 3 URL" content="" >
  39. <meta name="text:Link 4" content="" >
  40. <meta name="text:Link 4 URL" content="" >
  41.  
  42. <meta name="text:Link 5" content="" >
  43. <meta name="text:Link 5 URL" content="" >
  44. <meta name="text:Link 6" content="" >
  45. <meta name="text:Link 6 URL" content="" >
  46. <meta name="text:Link 7" content="" >
  47. <meta name="text:Link 7 URL" content="" >
  48. <meta name="text:Link 8" content="" >
  49. <meta name="text:Link 8 URL" content="" >
  50.  
  51. <meta name="select:Font" content="Karla" title="Karla">
  52. <meta name="select:Font" content="Lato" title="Lato">
  53. <meta name="select:Font" content="Open Sans" title="Open Sans">
  54. <meta name="select:Font" content="Roboto" title="Roboto">
  55. <meta name="select:Font" content="Source Sans Pro" title="Source Sans Pro">
  56.  
  57. <meta name="select:Gutter Size" content="0" title="0px">
  58. <meta name="select:Gutter Size" content="1" title="1px">
  59. <meta name="select:Gutter Size" content="5" title="5px">
  60. <meta name="select:Gutter Size" content="10" title="10px">
  61. <meta name="select:Gutter Size" content="15" title="15px">
  62.  
  63. <meta name="select:Post Size" content="250" title="250px">
  64. <meta name="select:Post Size" content="300" title="300px">
  65. <meta name="select:Post Size" content="350" title="350px">
  66. <meta name="select:Post Size" content="400" title="400px">
  67. <meta name="select:Post Size" content="450" title="450px">
  68. <meta name="select:Post Size" content="500" title="500px">
  69.  
  70.  
  71.  
  72. <!-- Fonts -->
  73. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  74. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
  75. <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i" rel="stylesheet">
  76. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700" rel="stylesheet">
  77. <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700" rel="stylesheet">
  78. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  79. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  80.  
  81. <style type="text/css">
  82.  
  83. /* ------------ General ------------ */
  84.  
  85. body {
  86. margin:0;
  87. font-size: 11px;
  88. font-family: "karla";
  89. line-height: 20px;
  90. color:{color:Text};
  91. background-image:url('{image:Background}');
  92. background: {color:Background};
  93. font-family: {select:Font};
  94. overflow-x: hidden;
  95. -moz-osx-font-smoothing:grayscale;
  96. -webkit-font-smoothing:antialiased;
  97. font-smoothing:antialiased;
  98. }
  99.  
  100. a {
  101. color:inherit;
  102. text-decoration:none;
  103. -webkit-transition:all .2s linear;
  104. transition:all .2s linear;
  105. }
  106.  
  107. small, sub {
  108. font-size:1em;
  109. vertical-align:baseline;
  110. }
  111.  
  112. blockquote {
  113. padding:.6em .6em .6em 2em;
  114. border-left:1px solid {color:Border};
  115. }
  116.  
  117. blockquote, ol, ul, p, pre {
  118. margin:0 0 .6em;
  119. }
  120. h1, h2, h3, h4, h5, h6 {
  121. margin:0 0 .6em;
  122. font-size:1em;
  123. font-weight:inherit;
  124. }
  125. img {
  126. border:0;
  127. max-width:100%;
  128. height:auto;
  129. display:block;
  130. }
  131. hr {
  132. margin:1em 0;
  133. border:0;
  134. height:1px;
  135. -moz-box-sizing:border-box;
  136. box-sizing:border-box;
  137. background-color:{color:Border};
  138. }
  139. .title {
  140. font-size:15px;
  141. font-weight:bold;
  142. }
  143. .accent {
  144. color:{color:Accent};
  145. }
  146.  
  147. ::-webkit-scrollbar {
  148. width: 17px;
  149. height: 17px;}
  150.  
  151. ::-webkit-scrollbar-track {
  152. border: 8px solid rgb(255,255,255);
  153. background-color: {color:Background}}
  154.  
  155. ::-webkit-scrollbar-thumb {
  156. border: 8px solid rgb(255,255,255);
  157. background-color: {color:Accent};}
  158.  
  159. #s-m-t-tooltip{
  160. max-width:300px;
  161. z-index:10;
  162. margin:24px 14px 7px 12px;
  163. padding:5px;
  164. padding-bottom:7px;
  165. background:#fff;
  166. border: 1px solid #eee;
  167. -moz-border-radius:0px;
  168. -webkit-border-radius:0px;
  169. border-radius:0px;
  170. font-family: "karla";
  171. text-transform: uppercase;
  172. font-size: 9px;
  173. letter-spacing: 1px;
  174. color: {color:Text};}
  175.  
  176. /* ------------ Custom Fonts ------------ */
  177.  
  178. @font-face {
  179. font-family: "moon";
  180. src: url("https://dl.dropboxusercontent.com/u/111652179/Moon%20Bold.otf");}
  181.  
  182. @font-face {
  183. font-family: "moonlight";
  184. src: url("https://dl.dropboxusercontent.com/u/111652179/Moon%20Light.otf")}
  185.  
  186. @font-face {
  187. font-family: darleston;
  188. src: url("http://static.tumblr.com/9pxhvqx/4Tkofww1c/darleston.otf");}
  189.  
  190.  
  191. /* ----------- Background Colors ------------- */
  192.  
  193. #left {
  194. width: 50%;
  195. height: 100%;
  196. top: 0px;
  197. left: 0px;
  198. position: fixed;
  199. z-index: 2;
  200. background-color: {color:Sidebar};
  201. }
  202.  
  203.  
  204. #right {
  205. width: 50%;
  206. height: 100%;
  207. top: 0px;
  208. right: 0px;
  209. position: absolute;
  210. background-color: {color:Background};
  211. }
  212.  
  213. /* -------------- Left Container ------------- */
  214.  
  215. #leftcontainer {
  216. width: 100%;
  217. height: 100%;
  218. top: 0px;
  219. left: 0px;
  220. z-index: 2000;
  221. font-size: 15px;
  222. {block:ifSidebar} background-image: url("{image:Sidebar}");
  223. {/block:ifSidebar}
  224. }
  225.  
  226. .ok img {
  227. max-width: 300px;
  228. max-height: 300px;
  229. top: 45%;
  230. left: 50%;
  231. transform: translate(-50%, -50%);
  232. position: absolute;
  233. }
  234.  
  235. .llinks {
  236. top: 55%;
  237. left: 50%;
  238. transform: translate(-50%, -50%);
  239. position: absolute;
  240. }
  241.  
  242. .llinks a {
  243. width: 20px;
  244. height: 20px;
  245. margin: 10px;
  246. font-size: 1.2em;
  247. text-align: center;
  248. padding: 15px;
  249. border-radius: 100%;
  250. display:inline-block;
  251. color: {color:Accent};
  252. background-color: {color:Background};
  253. border: 1px solid {color:Background};
  254. }
  255.  
  256. .llinks a:hover {
  257. color: {color:Accent Hover};
  258. background-color: rgba(255,255,255,0.3);
  259. }
  260.  
  261. /* ------------ Main Container ---------- */
  262.  
  263. .main {
  264. margin: 150px auto;
  265. width: {select:Post Size}px;
  266. }
  267.  
  268. /* ---------------- Left Side ---------------- */
  269.  
  270. .lh {
  271. font-family: "moon";
  272. text-transform: Capitalize;
  273. color: #4e4e4e;
  274. }
  275.  
  276. /* ---------------- Right Side --------------- */
  277.  
  278. .rh {
  279. height: 85vh;
  280. }
  281.  
  282. .topbar {
  283. padding-bottom: 15px;
  284. border-top: 1px solid {color:Border};
  285. }
  286.  
  287. .rhc {
  288. top: 57%;
  289. left: 50%;
  290. transform: translate(-50%, -50%);
  291. position: absolute;
  292. }
  293.  
  294. .tc, .tlinks {
  295. margin-top: 15px;
  296. text-align: center;
  297. position: relative;
  298. font-size: 11px;
  299. font-family: "karla";
  300. line-height: 20px;
  301. word-spacing: 15px;
  302. text-transform: uppercase;
  303. }
  304.  
  305. .tc a:hover, .tlinks a:hover {
  306. color: {color:Accent};
  307. }
  308.  
  309. .tp {
  310. width: 49.8%;
  311. height: 35px;
  312. position: fixed;
  313. top: 0px;
  314. left: 75%;
  315. display: none;
  316. {block:PermalinkPage} display: block; {/block:PermalinkPage}
  317. transform: translate(-50%, 0);
  318. z-index: 9999999999999;
  319. padding-bottom: 15px;
  320. background-color: {color:Background};
  321. border-bottom: 1px solid {color:Border};
  322. }
  323.  
  324.  
  325. .rhtitle {
  326. font-family: "Darleston";
  327. font-size: 20em;
  328. top: -30%;
  329. left: 50%;
  330. letter-spacing: .5px;
  331. transform: translate(-50%, -50%);
  332. position: absolute;
  333. text-transform: lowercase;
  334. color: {color:Accent};}
  335.  
  336. .rhtitle img {
  337. border-radius: 7px;
  338. }
  339.  
  340. .desc {
  341. width: 350px;
  342. text-align: justify;
  343. padding-bottom: 15px;
  344. }
  345.  
  346. /* -------- Post Content --------*/
  347.  
  348. .content {
  349. margin:150px 0;
  350. }
  351.  
  352. /* ---------- Posts -------- */
  353.  
  354. .entry {
  355. width: {select:Post Size}px;
  356. position:relative;
  357. margin:0 0 80px;
  358. }
  359.  
  360. .entry ul li {
  361. margin-left: 10px;
  362. display: block;
  363. list-style-type: none;}
  364.  
  365. .entry ul li:before {
  366. content:"";
  367. width: 13px;
  368. height: 1px;
  369. margin-top: 10px;
  370. margin-left: -25px;
  371. background-color: {color:Border};
  372. position: absolute;}
  373.  
  374.  
  375. .entry:last-child {
  376. margin-bottom:0;
  377. }
  378.  
  379. .text {
  380. margin: 1em 0 0;
  381. padding: 10px;
  382. text-align: justify;
  383. max-width: {select:Post Size}px;
  384. border: 1px solid {color:Border};
  385. background-color: {color:Caption};
  386. }
  387.  
  388. .text:last-child,
  389. .text *:last-child {
  390. margin-bottom:0;
  391. }
  392.  
  393. .chat {
  394. padding: 10px;
  395. max-width: {select:Post Size}px;
  396. border: 1px solid {color:Border};
  397. background-color: {color:Caption};
  398. list-style-type:none;
  399. }
  400.  
  401. .chat .label {
  402. font-weight:bold;
  403. }
  404.  
  405. /* ------------- Quote ----------- */
  406.  
  407. .quote {
  408. font-size: 1.2em;
  409. font-style: italic;
  410. text-align: center;
  411. }
  412.  
  413. .source {
  414. font-style: italic;
  415. padding: 10px;
  416. text-transform: lowercase;
  417. position: relative;
  418. }
  419.  
  420. /* ---------------- Photo ------------- */
  421.  
  422. .media {
  423. position:relative;
  424. display:inline-block;
  425. max-width:100%;
  426. }
  427.  
  428. /* ------------ Question ---------- */
  429.  
  430. .question {
  431. width: {select:Post Size}px;
  432. text-align: justify;
  433. }
  434.  
  435. .sender:before {
  436. content:"";
  437. width: 100px;
  438. height: 1px;
  439. margin-top: 10px;
  440. margin-left: -105px;
  441. background-color: {color:Border};
  442. position: absolute;
  443. }
  444.  
  445. .sender {
  446. font-style: italic;
  447. padding: 10px;
  448. text-transform: lowercase;
  449. position: relative;
  450. margin-top: 8px;
  451. float: right;
  452. }
  453.  
  454. .answer {
  455. padding: 10px;
  456. margin-top: 50px;
  457. position: relative;
  458. border-bottom: 1px solid {color:Border};
  459. background-color: {color:Caption};
  460. }
  461.  
  462. /* --------- Audio -------------*/
  463.  
  464. .audioplayer {
  465. height: 80px;
  466. max-width: {select:Post Size}px;
  467. border: 1px solid {color:Border};
  468. background-color: {color:Posts};}
  469.  
  470. .tumblr_audio_player {
  471. width: 24px;
  472. height: 24px;
  473. margin-top: -22px;
  474. background-color: {color:Posts};}
  475.  
  476. .artist {
  477. top: 39px;
  478. left: 80px;
  479. font-family: "Karla";
  480. position: absolute;}
  481.  
  482. .track {
  483. top: 20px;
  484. left: 80px;
  485. font-family: "Karla";
  486. position: absolute;
  487. }
  488.  
  489. #player {
  490. width: 24px;
  491. height: 24px;
  492. overflow: hidden;
  493. margin: 30px 20px;
  494. padding: 10px;
  495. color: #fff;}
  496.  
  497. /* --------- Post Info ---------- */
  498.  
  499. .date {
  500. margin:1em 0 0;
  501. }
  502.  
  503. .date a {color:{color:Text};}
  504.  
  505. .permalink, .p2 {
  506. text-transform: uppercase;
  507. word-spacing: 2px;
  508. }
  509.  
  510. .permalinka a:nth-child(2) {
  511. margin-left: 25px;
  512. }
  513.  
  514.  
  515. .like-b {
  516. position:relative;
  517. display:inline-block;
  518. height:1em;
  519. line-height:1em;
  520. overflow:hidden;
  521. margin-bottom: -2px;
  522. }
  523.  
  524. .like-b .like_button iframe {
  525. position:absolute;
  526. top:0;
  527. left:0;
  528. bottom:0;
  529. right:0;
  530. z-index:2;
  531. opacity:0;
  532. }
  533.  
  534. .like-b .liked + .b {
  535. color:inherit;
  536. }
  537.  
  538. .like-b .liked + .b:after {
  539. content:'d';
  540. }
  541.  
  542.  
  543. /* -------------- Tags ------------ */
  544.  
  545. .tags {
  546. max-width: {select:Post Size}px;
  547. {block:IndexPage}
  548. {block:ifNotShowTags}display:none;{/block:ifNotShowTags}
  549. {/block:IndexPage}
  550. }
  551.  
  552. .tags a {
  553. margin: 2px;
  554. }
  555.  
  556. .tags svg {
  557. width: 12px;
  558. height: 12px;
  559. margin-top: 10px;
  560. }
  561.  
  562. /* ---------- Draggable Tags ----------*/
  563.  
  564. .post_tags, .post_tags a { color: #A7A7A7; }
  565.  
  566. .post_tags {
  567. position: relative;
  568. margin-top: 0px;
  569. margin-left: -2px;
  570. line-height: 20px;
  571. max-width: {select:Post Size}px;
  572. white-space: nowrap;
  573. overflow: hidden;}
  574.  
  575. .post_tags.draggable .post_tags_inner {
  576. cursor: col-resize;
  577. -webkit-touch-callout: none;
  578. -webkit-user-select: none;
  579. -khtml-user-select: none;
  580. -moz-user-select: none;
  581. -ms-user-select: none;
  582. user-select: none;}
  583.  
  584. .post_tags_inner {
  585. float: left;
  586. position: relative;
  587. padding: 0px 20px 0px 0;}
  588.  
  589. .post_tags a, .post_tags .post_tag {
  590. color: #A7A7A7;
  591. text-decoration: none;
  592. margin-right: 6px;}
  593.  
  594. .post_tags a:before { content: '#'; }
  595.  
  596. .post_tags:after {
  597. content: '';
  598. position: absolute;
  599. top: 0;
  600. right: 0;
  601. bottom: 0;
  602. width: 20px;
  603. background: -moz-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
  604. background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #FFF));
  605. background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, transparent, 100%);
  606. background: -o-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
  607. background: -ms-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
  608. background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, transparent 100%);
  609. }
  610.  
  611. .post_tags a:hover,
  612. .post_tags .post_tag:hover,
  613. .post_tags a:focus,
  614. .post_tags .post_tag:focus,
  615. .post_tags a:active,
  616. .post_tags .post_tag:active { color: {color:accent}; }
  617.  
  618. /* ------------ Captions -------- */
  619.  
  620.  
  621. .caption {
  622. {block:IndexPage}
  623. {block:ifNotShowCaptions}display:none;{/block:ifNotShowCaptions}
  624. {/block:IndexPage}
  625. max-width: {select:Post Size}px;
  626. padding: 10px;
  627. margin-top: 0px;
  628. border-bottom: 1px solid {color:Border};
  629. }
  630.  
  631.  
  632. /* ---------------------- Unnested Captions ------------- */
  633.  
  634. .tumblr_parent {
  635. margin: 10px 10px 10px;
  636. padding: 0px 10px;
  637. border-left: 1px solid {color:Border};
  638. }
  639.  
  640. .tumblr_parent blockquote{
  641. margin-left: 20px;
  642. padding-left: 20px;
  643. border-left: 1px solid {color:Border};
  644. }
  645.  
  646. .tumblr_avatar {
  647. width: 25px;
  648. height: 25px;
  649. padding: 5px;
  650. margin-right: 5px;
  651. border-radius: 5px;
  652. display: inline-block;
  653. vertical-align: middle;
  654. }
  655.  
  656.  
  657.  
  658. /* ------------ Permalink Page --------- */
  659.  
  660. .pp {
  661. width: {select:Post Size}px;
  662. margin-top: 10px;
  663. }
  664.  
  665. .perma {
  666. margin-bottom: 10px;
  667. }
  668.  
  669. /* ---------- Post Notes ----------- */
  670.  
  671.  
  672. .pagenotes {
  673. line-height: 18px;
  674. letter-spacing: .5px;
  675. }
  676.  
  677. .pagenotes ol.notes {
  678. padding: 0px;
  679. text-align: left;
  680. margin: 25px 0px;
  681. list-style-type: none;
  682. }
  683.  
  684. .pagenotes img {
  685. display: none;
  686. }
  687.  
  688. /* ---------- Tumblr Controls -------------*/
  689.  
  690. .ic {
  691. position:fixed;
  692. top: 23px;
  693. right:24px;
  694. opacity: 1.0!important;
  695. z-index: 199999999999999999999999999999999999999999545;
  696. }
  697.  
  698. #tumblr_controls,
  699. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls {
  700. position:fixed!important;
  701. top: 0px!important;
  702. left: 0px!important;
  703. opacity: 0.5!important;
  704. z-index: 9999999999999999999;
  705. -webkit-filter:invert(100%);
  706. -webkit-backface-visibility:hidden;
  707. padding:10px 40px 10px 10px;
  708. -webkit-transition:opacity .3s ease-out;
  709. transition:opacity .3s ease-out;
  710. }
  711.  
  712. #tumblr_controls:hover,
  713. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls:hover {
  714. z-index: 9999999999999999999;
  715. opacity:.8!important;
  716. }
  717.  
  718. {block:ifInfiniteScroll}
  719. .pagination,
  720. #infscr-loading {
  721. display:none!important;
  722. }
  723. {/block:ifInfiniteScroll}
  724.  
  725. </style>
  726.  
  727. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  728.  
  729. </head>
  730. <body>
  731.  
  732.  
  733. <div id="left">
  734. <div id="leftcontainer">
  735.  
  736.  
  737. {block:ifLinksOnLeft}
  738. <div class="llinks">
  739.  
  740. <a href="/" title="index">
  741. <i class="fa fa-home" aria-hidden="true"></i></a>
  742.  
  743. <a href="/ask" title="message">
  744. <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
  745.  
  746. <a href="/archive" title="archive">
  747. <i class="fa fa-calendar" aria-hidden="true"></i></a>
  748.  
  749. <a href="https://onyxian.tumblr.com" title="@onyxian">
  750. <i class="fa fa-code" aria-hidden="true"></i></a>
  751.  
  752.  
  753. </div>
  754. {/block:ifLinksOnLeft}
  755.  
  756.  
  757. </div> <!-- End of Left Container -->
  758. </div> <!-- End of Left -->
  759.  
  760.  
  761.  
  762. <div id="right">
  763.  
  764.  
  765. <!------------------ Header ----------------->
  766.  
  767. {block:IndexPage}
  768. <div class="rh">
  769. <div class="rhc">
  770.  
  771. {block:ifAvatar}
  772. <div class="rhtitle"><img src="{PortraitURL-40}"></div>
  773. {/block:ifAvatar}
  774.  
  775. <div class="desc">{block:Description}
  776. {Description}{/block:Description}</div>
  777.  
  778. <div class="topbar">
  779.  
  780. <div class="tc">
  781.  
  782. {block:ifnoLinksOnLeft}
  783. <a href="/">index</a>
  784. <a href="/ask">message</a>
  785. {block:ifArchive}<a href="/archive">archive</a>{/block:ifArchive}
  786. {/block:ifnoLinksOnLeft}
  787.  
  788. {block:IfLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:IfLink1}
  789. {block:IfLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:IfLink2}
  790. {block:IfLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:IfLink3}
  791. {block:IfLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:IfLink4}
  792.  
  793. {block:IfLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:IfLink5}
  794. {block:IfLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:IfLink6}
  795. {block:IfLink7}<a href="{text:Link 7 URL}">{text:Link 7}</a>{/block:IfLink7}
  796. {block:IfLink8}<a href="{text:Link 8 URL}">{text:Link 8}</a>{/block:IfLink8}
  797.  
  798. <a href="http://onyxian.tumblr.com">theme</a>
  799.  
  800.  
  801. </div>
  802.  
  803. </div>
  804.  
  805.  
  806. </div> <!-- End of Right Header's Container -->
  807. </div> <!-- End of Right Header -->
  808. {/block:IndexPage}
  809.  
  810.  
  811. <div class="tp">
  812.  
  813. <div class="tlinks">
  814.  
  815. {block:ifnoLinksOnLeft}
  816. <a href="/">index</a>
  817. <a href="/ask">message</a>
  818. {block:ifArchive}<a href="/archive">archive</a>{/block:ifArchive}
  819. {/block:ifnoLinksOnLeft}
  820.  
  821. {block:IfLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:IfLink1}
  822. {block:IfLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:IfLink2}
  823. {block:IfLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:IfLink3}
  824. {block:IfLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:IfLink4}
  825.  
  826. {block:IfLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:IfLink5}
  827. {block:IfLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:IfLink6}
  828. {block:IfLink7}<a href="{text:Link 7 URL}">{text:Link 7}</a>{/block:IfLink7}
  829. {block:IfLink8}<a href="{text:Link 8 URL}">{text:Link 8}</a>{/block:IfLink8}
  830. <a href="http://onyxian.tumblr.com">theme</a>
  831.  
  832. </div>
  833.  
  834. </div>
  835.  
  836. <!------------- Container --------------->
  837.  
  838.  
  839. <div class="main">
  840.  
  841. <div class="content">
  842. {block:Posts}
  843. <article class="entry {block:Photo}ph{/block:Photo}{block:Photoset}ph{/block:Photoset}">
  844.  
  845. <section class="post" id="{PostID}">
  846. <!-------------------- Audio ------------------>
  847.  
  848. {block:Audio}
  849. <div class="audioplayer">
  850. <div id="player">{AudioPlayerWhite}</div>
  851.  
  852. {block:TrackName}
  853. <div class="track">{TrackName}</div>
  854. {/block:TrackName}
  855.  
  856. {block:Artist}
  857. <div class="artist">{Artist}</div>
  858. {/block:Artist}
  859.  
  860. </div>
  861. {/block:Audio}
  862.  
  863.  
  864. <!--------------------- Photo --------------------->
  865.  
  866. {block:Photo}
  867. <div class="media">
  868. {LinkOpenTag}
  869. <img src="{PhotoURL-500}">
  870. {LinkCloseTag}
  871. </div>
  872. {/block:Photo}
  873.  
  874. <!--------------------- Photoset --------------------->
  875.  
  876. {block:Photoset}
  877. <div class="media photoset">
  878. <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><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  879. </div>
  880. {/block:Photoset}
  881.  
  882.  
  883. <!--------------------- Video --------------------->
  884.  
  885.  
  886. {block:Video}
  887. <div class="media video">{Video-500}</div>
  888. {/block:Video}
  889.  
  890. <!--------------------- Question --------------------->
  891.  
  892. {block:Answer}
  893. <div class="question">
  894. <span class="inquiry">{Question}</span>
  895. <div class="sender">{Asker}</div>
  896. </div>
  897. <div class="answer">{Answer}</div>
  898. {/block:Answer}
  899.  
  900.  
  901. <!--------------------- Chat --------------------->
  902.  
  903.  
  904. {block:Chat}
  905. {block:Title}<h1 class="title">{Title}</h1>{/block:Title}
  906. <ul class="chat">
  907. {block:Lines}
  908. <li class="line">
  909. {block:Label}
  910. <span class="label">{Label}&nbsp; </span>
  911. {/block:Label}
  912. {Line}
  913. </li>
  914. {/block:Lines}
  915. </ul>
  916. {/block:Chat}
  917.  
  918.  
  919. <!--------------------- Link --------------------->
  920.  
  921.  
  922. {block:Link}
  923. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  924. {block:Description}<div class="text">{Description}</div>{/block:Description}
  925. {/block:Link}
  926.  
  927.  
  928. <!--------------------- Quotes --------------------->
  929.  
  930.  
  931. {block:Quote}
  932. <div class="quote text">{Quote}</div>
  933. {block:Source}
  934. <div class="source"><div style="position: absolute; right: 0px"> — {Source}</div></div>
  935. {/block:Source}
  936. {/block:Quote}
  937.  
  938.  
  939. <!--------------------- Text --------------------->
  940.  
  941.  
  942. {block:Text}
  943. {block:Title}<h1 class="title">{Title}</h1>{/block:Title}
  944. <div class="text">{Body}</div>
  945. {/block:Text}
  946.  
  947.  
  948. <!--------------------- Caption --------------------->
  949.  
  950.  
  951. {block:Caption}
  952. <div class="caption">{Caption}</div>
  953. {/block:Caption}
  954.  
  955.  
  956.  
  957. <!--------------- Post Info ----------->
  958.  
  959.  
  960. {block:Date}{block:IndexPage}
  961. <div class="date accent">
  962. <a class="permalink" href="{Permalink}"> {Month} {DayOfMonthWithZero}</a>
  963.  
  964. <div style="text-transform:uppercase; float: right">
  965. <a href="{Permalink}">{block:NoteCount} {NoteCountWithLabel} {/block:NoteCount}</a>
  966. </div>
  967.  
  968. <!--
  969. <center><div style="top: -10px; text-transform: uppercase;">
  970. <a href="{ReblogURL}" target="_blank" >reblog</a>
  971. <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a></div>
  972. </center>
  973. -->
  974.  
  975. <!--------------------- Tags --------------------->
  976.  
  977.  
  978. {block:HasTags}
  979. <div class="tags">
  980.  
  981. <div class="post_tags draggable">
  982. <div class="post_tags_inner">
  983.  
  984. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  985.  
  986. </div>
  987. </div>
  988.  
  989.  
  990. </div>
  991. {/block:HasTags}
  992.  
  993.  
  994.  
  995. </div> <!-- End of Post Info -->
  996. {/block:IndexPage}{/block:Date}
  997.  
  998.  
  999.  
  1000.  
  1001.  
  1002. <!----------------- Permalink Page -------------->
  1003.  
  1004. {block:PermalinkPage}
  1005.  
  1006. <div class="pp">
  1007.  
  1008. <div class="perma">
  1009. <div style="line-height:25px; text-align:center;">
  1010. {block:Date}
  1011. {Month} {DayOfMonth}, {Year}
  1012. {/block:Date}
  1013. {block:RebloggedFrom}
  1014. <center>
  1015. source: <a href="{ReblogRootURL}">{ReblogRootName}</a>
  1016. &nbsp;|&nbsp;
  1017. via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1018. </center>
  1019. {/block:RebloggedFrom}
  1020.  
  1021. {block:HasTags}
  1022. {block:Tags}
  1023. <a href="{TagURL}">#{Tag}</a>&nbsp&nbsp
  1024. {/block:Tags}
  1025. {/block:HasTags}
  1026. </div>
  1027.  
  1028. </div> <!-- End of Permalink info --->
  1029. </div> <!-- End of Permalink Page --->
  1030.  
  1031.  
  1032. {block:PostNotes}
  1033. <div class="pagenotes">{PostNotes}</div>
  1034. {/block:PostNotes}
  1035.  
  1036.  
  1037. {/block:PermalinkPage}
  1038.  
  1039. </section>
  1040. </article>
  1041. {/block:Posts}
  1042.  
  1043. <!-- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} -->
  1044.  
  1045.  
  1046.  
  1047.  
  1048. <!------- Pagination ------------>
  1049.  
  1050. <center>{block:Pagination}<div class="pagination">{block:PreviousPage}<a class="prev" href="{PreviousPage}">previous</a>{/block:PreviousPage} {block:NextPage}<a class="next" href="{NextPage}">next</a>{/block:NextPage}</div>{/block:Pagination}
  1051. </div></center>
  1052.  
  1053. </div> <!-- End of Main Container -->
  1054. </div> <!-- End of Right Side -->
  1055.  
  1056.  
  1057.  
  1058. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1059. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1060. <script src="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  1061.  
  1062. {block:IndexPage}
  1063. {block:ifInfiniteScroll}
  1064. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1065. {/block:ifInfiniteScroll}
  1066. {/block:IndexPage}
  1067.  
  1068. <script>
  1069. $(document).ready(function(){
  1070. $('.photo-slideshow').pxuPhotoset({
  1071. lightbox: true,
  1072. rounded: false,
  1073. gutter: '{select:Gutter Size}px',
  1074. photoset: '.photo-slideshow',
  1075. photoWrap: '.photo-data',
  1076. photo: '.pxu-photo'
  1077. });
  1078. var $container = $('.content');
  1079. {block:ifInfiniteScroll}
  1080. $container.infinitescroll({
  1081. itemSelector: '.entry',
  1082. navSelector: '.pagination',
  1083. nextSelector: '.next',
  1084. loadingImg: '',
  1085. loadingText: '<em></em>',
  1086. bufferPx: 2000
  1087. },
  1088. function( newElements ) {
  1089. var $newElems = $( newElements );
  1090. $newElems.find('.photo-slideshow').pxuPhotoset({
  1091. lightbox: true,
  1092. rounded: false,
  1093. gutter: '1px',
  1094. photoset: '.photo-slideshow',
  1095. photoWrap: '.photo-data',
  1096. photo: '.pxu-photo'
  1097. });
  1098. resizeVideos();
  1099. });
  1100. {/block:ifInfiniteScroll}
  1101. });
  1102. </script>
  1103.  
  1104.  
  1105. <!-- Unnested Captions -->
  1106. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1107.  
  1108.  
  1109. {block:ifUnnestedCaptions}
  1110. <script>
  1111.  
  1112. $('.entry').unnest({
  1113. yourCaption: ".caption",
  1114. wrapName: ".tumblr_parent",
  1115. newCaptionUsername: true,
  1116. originalPostCaptionUsername: true,
  1117. tumblrAvatarClass: ".tumblr_avatar",
  1118. usernameColon: false,
  1119. });
  1120.  
  1121. </script>
  1122. {/block:ifUnnestedCaptions}
  1123.  
  1124. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  1125. <script>
  1126.  
  1127. $(document).ready(function(){
  1128. $(".post_tags_inner").draggable({
  1129. axis : "x",
  1130. scroll: false,
  1131. stop: function() {
  1132. var __left = $(this).css("left").replace(/[^-\d\.]/g, '');
  1133. if(__left > 0){
  1134. $(this).animate({left: 0}, 400, 'easeOutExpo');
  1135. }
  1136. var __width = $(this).outerWidth();
  1137. var __parentWidth = $(".post_tags.draggable").outerWidth();
  1138. if(__width > __parentWidth) {
  1139. if(__left < __parentWidth-__width){
  1140. $(this).animate({left: __parentWidth-__width}, 400, 'easeOutExpo');
  1141. }
  1142. } else {
  1143. $(this).animate({left: 0}, 400, 'easeOutExpo');
  1144. }
  1145. }
  1146. });
  1147. });
  1148.  
  1149. </script>
  1150.  
  1151. <script>
  1152.  
  1153. $(function() {
  1154. $('a[href*="#"]:not([href="#"])').click(function() {
  1155. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  1156. var target = $(this.hash);
  1157. target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  1158. if (target.length) {
  1159. $('html, body').animate({
  1160. scrollTop: target.offset().top
  1161. }, 1000);
  1162. return false;
  1163. }
  1164. }
  1165. });
  1166. });
  1167.  
  1168. </script>
  1169.  
  1170. <!--- TOOL TIPS --->
  1171. <script src="http://static.tumblr.com/3lcgguq/DCPn25qvq/jquery.style-my-tooltips.js"></script>
  1172. <script src="http://static.tumblr.com/3lcgguq/Eifn25qw3/style-my-tooltips.css"></script>
  1173. <script>
  1174. (function($){
  1175. $(document).ready(function(){
  1176. $("[title]").style_my_tooltips({
  1177. tip_follows_cursor:true,
  1178. tip_delay_time:200,
  1179. tip_fade_speed:300,
  1180. attribute:"title"
  1181. });
  1182. });
  1183. })(jQuery);
  1184. </script>
  1185.  
  1186.  
  1187. {block:IndexPage}
  1188. <script type="text/javascript">
  1189.  
  1190. var amountScrolled = 300;
  1191. $(window).scroll(function() {
  1192. if ( $(window).scrollTop() > amountScrolled ) {
  1193. $('.tp').fadeIn('slow');
  1194. } else {
  1195. $('.tp').fadeOut('slow');
  1196. }
  1197. })
  1198. </script>
  1199. {/block:IndexPage}
  1200.  
  1201.  
  1202. </body>
  1203. </html>
Advertisement
Add Comment
Please, Sign In to add comment