valkyriethemes

[T#08 - Seijou] by Onyxian

Jan 12th, 2017
1,186
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.14 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5.  
  6. <!----------
  7.  
  8.  
  9.  
  10. T#09 - Seijou by Onyxian
  11.  
  12.  
  13. + Base Code by Shythemes
  14. + Fonts by Google, Font Awesome, Linear Icons
  15. + Unnested Captions by Neothm, Magnusthemes
  16. + Inspired by Tumblr's default mobile theme and Seijou's colors
  17.  
  18.  
  19.  
  20.  
  21. ------------->
  22.  
  23.  
  24. <title>{Title}</title>
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. <link rel="shortcut icon" href="{Favicon}">
  27. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  28.  
  29.  
  30.  
  31. <meta name="color:Accent" content="#d7fbf1">
  32. <meta name="color:Accent Hover" content="#89ddbb">
  33. <meta name="color:Background" content="#f7f7f7">
  34. <meta name="color:Border" content="#eee">
  35. <meta name="color:Caption" content="#f9f9f9">
  36. <meta name="color:Header" content="#d7fbf1">
  37. <meta name="color:Links" content="#d7fbf1">
  38. <meta name="color:Links Background" content="#fafafa">
  39. <meta name="color:Posts" content="#fff">
  40. <meta name="color:Tags" content="#9f9f9f">
  41. <meta name="color:Text" content="#3f3f3f">
  42.  
  43. <meta name="image:Background" content="">
  44. <meta name="image:Header" content="" >
  45.  
  46. <meta name="if:Archive" content="0">
  47. <meta name="if:Avatar" content="1">
  48. <meta name="if:Tags on Hover" content="1">
  49. <meta name="if:Show Captions" content="1">
  50. <meta name="if:Show Tags" content="1">
  51. <meta name="if:Unnested Captions" content="1">
  52.  
  53. <meta name="text:Title" content="">
  54. <meta name="text:Subtitle" content="">
  55.  
  56. <meta name="text:Link 1" content="" >
  57. <meta name="text:Icon 1" content="">
  58. <meta name="text:Link 1 URL" content="" >
  59. <meta name="text:Link 2" content="" >
  60. <meta name="text:Icon 2" content="">
  61. <meta name="text:Link 2 URL" content="" >
  62. <meta name="text:Link 3" content="" >
  63. <meta name="text:Icon 3" content="">
  64. <meta name="text:Link 3 URL" content="" >
  65. <meta name="text:Link 4" content="" >
  66. <meta name="text:Icon 4" content="">
  67. <meta name="text:Link 4 URL" content="" >
  68. <meta name="text:Link 5" content="" >
  69. <meta name="text:Icon 5" content="">
  70. <meta name="text:Link 5 URL" content="" >
  71. <meta name="text:Link 6" content="" >
  72. <meta name="text:Icon 6" content="">
  73. <meta name="text:Link 6 URL" content="" >
  74.  
  75. <meta name="select:Font" content="Karla" title="Karla">
  76. <meta name="select:Font" content="Lato" title="Lato">
  77. <meta name="select:Font" content="Open Sans" title="Open Sans">
  78. <meta name="select:Font" content="Roboto" title="Roboto">
  79. <meta name="select:Font" content="Source Sans Pro" title="Source Sans Pro">
  80.  
  81. <meta name="select:Gutter Size" content="0" title="0px">
  82. <meta name="select:Gutter Size" content="1" title="1px">
  83. <meta name="select:Gutter Size" content="5" title="5px">
  84. <meta name="select:Gutter Size" content="10" title="10px">
  85. <meta name="select:Gutter Size" content="15" title="15px">
  86.  
  87. <meta name="select:Post Size" content="250" title="250px">
  88. <meta name="select:Post Size" content="300" title="300px">
  89. <meta name="select:Post Size" content="350" title="350px">
  90. <meta name="select:Post Size" content="400" title="400px">
  91. <meta name="select:Post Size" content="450" title="450px">
  92. <meta name="select:Post Size" content="500" title="500px">
  93. <meta name="select:Post Size" content="540" title="540px">
  94.  
  95.  
  96. <!-- Fonts -->
  97. <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  98. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
  99. <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i" rel="stylesheet">
  100. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700" rel="stylesheet">
  101. <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700" rel="stylesheet">
  102. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  103. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  104.  
  105. <style type="text/css">
  106.  
  107.  
  108. body {
  109. margin:0;
  110. font-size:10px;
  111. font-family: {select:Font};
  112. line-height:1.6em;
  113. -moz-osx-font-smoothing:grayscale;
  114. -webkit-font-smoothing:antialiased;
  115. font-smoothing:antialiased;
  116. color:{color:Text};
  117. background-image:url('{image:Background}');
  118. background: {color:Background};
  119. }
  120. a {
  121. color:inherit;
  122. text-decoration:none;
  123. -webkit-transition:all .2s linear;
  124. transition:all .2s linear;
  125. }
  126.  
  127. a:hover {
  128. -webkit-transition:all .2s linear;
  129. transition:all .2s linear;
  130. }
  131.  
  132. small, sub {
  133. font-size:1em;
  134. vertical-align:baseline;
  135. }
  136.  
  137. {block:ifNotUnnestedCaptions}
  138.  
  139. blockquote {
  140. padding:.6em .6em .6em 2em;
  141. border-left:1px solid {color:Border};}
  142.  
  143. blockquote, ol, ul, p, pre {
  144. margin:0 0 .6em;}
  145.  
  146. {/block:ifNotUnnestedCaptions}
  147.  
  148. h1, h2, h3, h4, h5, h6 {
  149. margin:0 0 .6em;
  150. font-size:1em;
  151. font-weight:inherit;
  152. }
  153. img {
  154. border:0;
  155. max-width:100%;
  156. height:auto;
  157. display:block;
  158. }
  159. hr {
  160. margin:1em 0;
  161. border:0;
  162. height:1px;
  163. -moz-box-sizing:border-box;
  164. box-sizing:border-box;
  165. background-color:{color:Border};
  166. }
  167. .title {
  168. font-size:15px;
  169. font-weight:bold;
  170. }
  171.  
  172. /* ----------- Tooltips ----------- */
  173.  
  174. #s-m-t-tooltip{
  175. max-width:300px;
  176. z-index: 9999999999999;
  177. margin:24px 14px 7px 12px;
  178. padding:5px;
  179. padding-bottom:7px;
  180. background: {color:Posts};
  181. border: 1px solid {color:Border};
  182. -moz-border-radius:0px;
  183. -webkit-border-radius:0px;
  184. border-radius:0px;
  185. font-family: "calibri";
  186. text-transform: uppercase;
  187. font-size:8px;
  188. z-index: 9999999999999999999999999;
  189. letter-spacing: 1px;
  190. color: #a7a7a7;}
  191.  
  192. /* ---------- *Marik Sebastian Ishar voice* Ignore me!!! ------------ */
  193.  
  194. @media (max-height: 980px)
  195. #all {
  196. overflow: hidden;}
  197.  
  198. @media (max-width: 1480px)
  199. #all {
  200. overflow: hidden;}
  201.  
  202. /* ----------- Scrollbar ---------*/
  203.  
  204. ::-webkit-scrollbar {
  205. width: 17px;
  206. height: 17px;}
  207.  
  208. ::-webkit-scrollbar-track {
  209. border: 8px solid {color:Background};
  210. background-color: {color:Background};}
  211.  
  212. ::-webkit-scrollbar-thumb {
  213. border: 8px solid {color:Background};
  214. background-color: {color:Accent};}
  215.  
  216. /* ------------ Lightboxes @ Shythemes ------------- */
  217.  
  218. .vignette, #vignette {
  219. opacity:0;}
  220.  
  221. .tmblr-lightbox, #tumblr_lightbox {
  222. background-color:rgba(245,245,245,.98)!important;}
  223.  
  224. .lightbox-image, #tumblr_lightbox img {
  225. box-shadow: none!important;
  226. border-radius: 0!important;
  227. max-width:none;}
  228.  
  229. .lightbox-image, #tumblr_lightbox img {
  230. padding: 10px;
  231. background-color: {color:Posts}!important;
  232. border:1px solid {color:Border}!important;}
  233.  
  234. /* -------------- Container ---------- */
  235.  
  236. .main {
  237. margin-left: 460px;
  238. margin-top: -70px;
  239. }
  240.  
  241. /* ------------- Sidebar --------- */
  242.  
  243. #sidebar {
  244. width: 400px;
  245. height: 100%;
  246. top: 0px;
  247. left: 0px;
  248. position: fixed;
  249. line-height: 19px;
  250. background-color: {color:Posts};
  251. border-right: 1px solid {color:Border};
  252. }
  253.  
  254. /* --------------- Top Sidebar ------------ */
  255.  
  256. .stop {
  257. background-color: {color:Header};
  258. background-image:url('{image:Header}');
  259. height: 50vh;
  260. }
  261.  
  262. .stop img {max-height: 50vh;}
  263.  
  264. .hpic img {
  265. max-width: 215px;
  266. max-height: 215px;
  267. position: absolute;
  268. top: 13vh;
  269. left: 95px;
  270. }
  271.  
  272. .avatar img {
  273. position: fixed;
  274. left: 170px;
  275. top: 46.4vh;
  276. border-radius: 7px;
  277. border: 1px dotted {color:Border};
  278. }
  279.  
  280. .sidebar {
  281. margin: 30px;
  282. margin-top: 40px;
  283. padding: 10px;
  284. }
  285.  
  286. .tt {
  287. font-family: {select:Font};
  288. font-size: 12.5px;
  289. font-weight: bold;
  290. letter-spacing: 1px;
  291. text-align: center;
  292. text-transform: uppercase;
  293. line-height: 20px;}
  294.  
  295. .bt {
  296. font-family: {select:Font};
  297. font-size: 10px;
  298. letter-spacing: 1px;
  299. text-align: center;
  300. text-transform: uppercase;
  301. line-height: 20px;}
  302.  
  303. .navigation {
  304. text-align: center;
  305. position: relative;
  306. font-size: 11px;
  307. font-family: {select:Font};
  308. line-height: 20px;
  309. word-spacing: 15px;
  310. text-transform: uppercase;
  311. margin-top: 28px;
  312. }
  313.  
  314. .navigation a {
  315. text-align: center;
  316. letter-spacing: .3px;
  317. display: inline-block;
  318. }
  319.  
  320. .navigation a:hover {
  321. color: {color:Accent Hover};
  322. }
  323.  
  324. .navigation svg {
  325. width:10px;
  326. height:auto;
  327. opacity:.5;
  328. padding:1px;
  329. display:block;
  330. overflow:visible;
  331. }
  332.  
  333. .desc {
  334. text-align: justify;
  335. margin-top: 26px;
  336. }
  337.  
  338. /* ------- Pop Up Stuffs ---------*/
  339.  
  340. #fade { /*--Transparent background layer--*/
  341. display: none; /*--hidden by default--*/
  342. background-image: url('');
  343. background-color: #f7f7f7;
  344. position: fixed; left: 0; top: 0;
  345. width: 100%; height: 100%;
  346. z-index: 9999!important;}
  347.  
  348. .popup_block{
  349. display: none; /*--hidden by default--*/
  350. background: {color:Posts};
  351. padding: 30px;
  352. border: 1px solid {color:Border};
  353. float: left;
  354. font-size: 12px;
  355. position: fixed;
  356. width: 500px!important;
  357. font-size: 10px;
  358. font-family: {select:Font};
  359. height: 50px;
  360. top: 50%; left: 50%;
  361. z-index: 99999;}
  362.  
  363. img.btn_close {
  364. float: right;
  365. margin: -55px -55px 0 0;
  366. }
  367.  
  368. *html #fade {
  369. position: absolute;
  370. }
  371.  
  372. *html .popup_block {
  373. position: absolute;
  374. }
  375.  
  376. /* ----------- Bio // Navigation ----------- */
  377.  
  378. .bio {
  379. text-align: justify;
  380. }
  381.  
  382. .nav {
  383. bottom: 23px;
  384. left: 23px;
  385. position: absolute;
  386. }
  387.  
  388. .llinks a {
  389. width: 20px;
  390. height: 20px;
  391. margin: 10px;
  392. font-size: 17px;
  393. text-align: center;
  394. padding: 10px;
  395. display:inline-block;
  396. color: {color:Accent};
  397. border: 1px dotted {color:Border};
  398. background-color: {color:Links Background};
  399. }
  400.  
  401. .llinks a:hover {
  402. color: {color:Accent Hover};
  403.  
  404. }
  405.  
  406.  
  407.  
  408. /* ----------- Search bar ------------ */
  409.  
  410. .searchbar {
  411. position: absolute;
  412. bottom: 32px;
  413. right: 20px;
  414. }
  415.  
  416. .sfm input {
  417. font-size: 10px;
  418. border: 0px;
  419. color: {color:Text};
  420. margin-top: 10px;
  421. text-transform: capitalize;
  422. padding: 15px;
  423. border-bottom: 1px solid {color:Border};
  424. font-family: {select:Font};}
  425.  
  426. #sb {
  427. height: 15px;
  428. vertical-align: top;
  429. margin-left: -15px;
  430. }
  431.  
  432. #sf {
  433. width: 60px;
  434. height: 15px;
  435. }
  436.  
  437. .search .query {
  438. border: 0!important;
  439. outline: 0!important;
  440. font-family: inherit;
  441. font-size: inherit;
  442. color: inherit;
  443. background-color: transparent;}
  444.  
  445. input:focus {
  446. outline:none !important;
  447. }
  448.  
  449. ::-webkit-input-placeholder {color: inherit;}
  450. :-moz-placeholder {color: inherit; opacity:1;}
  451. ::-moz-placeholder {color: inherit; opacity:1;}
  452. :-ms-input-placeholder {color: inherit;}
  453.  
  454. input:focus::-webkit-input-placeholder {color: transparent;}
  455. input:focus:-moz-placeholder {color: transparent;}
  456. input:focus::-moz-placeholder {color: transparent;}
  457. input:focus:-ms-input-placeholder { color: transparent;}
  458.  
  459.  
  460.  
  461. /* ------------- Posts -------------- */
  462.  
  463. .content {
  464. margin:150px 0;
  465. }
  466.  
  467. .entry {
  468. width: {select:Post Size}px;
  469. position:relative;
  470. text-align: justify;
  471. margin:0 0 60px;
  472. }
  473. .entry:last-child {
  474. margin-bottom:0;
  475. }
  476.  
  477. .entry ul li {
  478. margin-left: 10px;
  479. display: block;
  480. list-style-type: none;}
  481.  
  482. .entry ul li:before {
  483. content:"";
  484. width: 13px;
  485. height: 1px;
  486. margin-top: 10px;
  487. margin-left: -25px;
  488. background-color: {color:Border};
  489. position: absolute;}
  490.  
  491. .entry h1 {
  492. background-color: {color:Background};
  493. border: 1px solid {color:Border};
  494. text-align: center;
  495. padding: 10px;
  496. }
  497.  
  498. .entry a, .entry b, .entry i {{color:Accent};}
  499.  
  500. .entry:hover .perma_hold {opacity:1;}
  501.  
  502. .perma_hold {
  503. position:absolute;
  504. width: 40px;
  505. height: 40px;
  506. top: 20px;
  507. left: 20px;
  508. opacity:0;
  509. z-index:9999;
  510. padding: 10px;
  511. border: 1px dotted {color:Border};
  512. background: {color:Posts};
  513. transition:0.6s ease;
  514. -o-transition:0.6s ease;
  515. -moz-transition:0.6s ease;
  516. -webkit-transition:0.6s ease;}
  517.  
  518. .perma {
  519. top:50%;
  520. line-height:0;
  521. position:relative;
  522. letter-spacing:2px;
  523. text-align:center;
  524. font-weight: bold;
  525. font-family: {select:Font};
  526. text-transform:uppercase;}
  527.  
  528. /* ------------- Post Stylings > Text ------------ */
  529.  
  530. .text {
  531. margin:1em 0 0;
  532. padding: 20px;
  533. border: 1px solid {color:Border};
  534. background-color: {color:Posts};
  535. }
  536.  
  537. .text:last-child,
  538. .text *:last-child {
  539. margin-bottom:0;
  540. }
  541.  
  542. /* ---------------- Post Stylings > Audio ------------- */
  543.  
  544. .audioplayer {
  545. height: 80px;
  546. text-transform: capitalize;
  547. max-width: {select:Post Size}px;
  548. border: 1px solid {color:Border};
  549. background-color: {color:Posts};
  550. }
  551.  
  552. .tumblr_audio_player {
  553. width: 24px;
  554. height: 24px;
  555. margin-top: -22px;
  556. background-color: {color:Posts}
  557. }
  558.  
  559. .artist {
  560. top: 42px;
  561. left: 75px;
  562. font-family: {select:Font};
  563. position: absolute;}
  564.  
  565. .track {
  566. top: 20px;
  567. left: 75px;
  568. font-family: {select:Font};
  569. position: absolute;
  570. }
  571.  
  572. #player {
  573. width: 24px;
  574. height: 24px;
  575. overflow: hidden;
  576. margin: 30px 20px;
  577. padding: 10px;
  578. color: {color:Posts};}
  579.  
  580.  
  581. /* -------------- Post Stylings > Asks ----------- */
  582.  
  583.  
  584. .question {
  585. background-color: {color:Posts};
  586. border: 1px solid {color:Border};}
  587.  
  588. .askerpic img {
  589. border-radius: 5px;
  590. margin-right: 7px;
  591. position: relative;
  592. float: left;
  593. }
  594.  
  595. .asker {letter-spacing: .5px;}
  596.  
  597. .sender {
  598. text-transform: uppercase;
  599. position: relative;
  600. color: {color:Text};
  601. }
  602.  
  603. .sender a {
  604. color: {color:Tags};}
  605.  
  606. .answer {
  607. margin-top: 0px;
  608. padding-top: 10px;
  609. border-top: 0px solid {color:Border};
  610. text-align: justify;}
  611.  
  612.  
  613.  
  614.  
  615. /* ------------- Post Stylings > Chat ------------ */
  616.  
  617. .chat {
  618. list-style-type:none;
  619. }
  620. .chat .label {
  621. font-weight:bold;
  622. }
  623.  
  624. /* ------------- Post Stylings > Quote ------------ */
  625.  
  626.  
  627. .quote {
  628. font-size: 13px;
  629. font-weight:bold;
  630. text-align: center;
  631. }
  632.  
  633. .source {text-align:center; font-size: 9px;}
  634.  
  635. /* ------------- Post Stylings > Photo ------------ */
  636.  
  637.  
  638. .media {
  639. position:relative;
  640. display:inline-block;
  641. width:100%;
  642. }
  643.  
  644. /* ------------- Post Info ------------ */
  645.  
  646. .date {
  647. padding: 5px;
  648. margin-top: 5px;
  649. }
  650.  
  651. svg {
  652. width:10px;
  653. height:auto;
  654. opacity: .3;
  655. padding:1px;
  656. display:block;
  657. overflow:visible;
  658. }
  659.  
  660. .controls a {
  661. position:relative;
  662. display:inline-block;
  663. overflow:hidden;
  664. padding:5px;
  665. width:12px;
  666. height:12px;
  667. }
  668. .controls .reblog {
  669. opacity:.93;
  670. }
  671. .controls .reblog svg {
  672. width:9px;
  673. margin-top:1px;
  674. }
  675. .controls .like .liked + svg {
  676. opacity:1;
  677. }
  678. .controls .like .liked + svg path {
  679. fill:#ec5a5a;
  680. }
  681. .controls .like .like_button {
  682. position:relative;
  683. }
  684. .controls .like .like_button iframe {
  685. position:absolute;
  686. top:0;
  687. left:0;
  688. bottom:0;
  689. right:0;
  690. z-index:2;
  691. opacity:0;
  692. }
  693.  
  694. /* --------------- Tags ----------- */
  695.  
  696. .tags {
  697. {block:IndexPage}
  698. {block:ifNotShowTags} display:none; {/block:ifNotShowTags}
  699. {/block:IndexPage}
  700. {block:ifTagsOnHover} opacity: 0; {/block:ifTagsOnHover}
  701. transition:0.6s ease;
  702. -o-transition:0.6s ease;
  703. -moz-transition:0.6s ease;
  704. -webkit-transition:0.6s ease;
  705. }
  706.  
  707. .tags a {
  708. margin: 2px;
  709. padding: 2px;
  710. color: {color:Tags};
  711. }
  712.  
  713. .tags a:hover {color:#89ddbb;}
  714.  
  715. .tags .comma:last-of-type {
  716. display:none;
  717. }
  718.  
  719. .entry:hover .tags {
  720. opacity: 1;
  721. transition:0.6s ease;
  722. -o-transition:0.6s ease;
  723. -moz-transition:0.6s ease;
  724. -webkit-transition:0.6s ease;
  725. }
  726.  
  727. #dropthebass {
  728. top: -35px;
  729. right: -33px;
  730. position: absolute;
  731. opacity: 0;
  732. -moz-transition-duration:0.5s;
  733. -webkit-transition-duration:0.5s;
  734. -o-transition-duration:0.5s;}
  735.  
  736. #dropthebass a {
  737. width: 10px;
  738. height: 10px;
  739. display: block;
  740. background-color: {color:Posts};
  741. border: 1px solid {color:Border};
  742. margin: 4px 0px;
  743. padding: 8px;
  744. -moz-transition-duration:0.5s;
  745. -webkit-transition-duration:0.5s;
  746. -o-transition-duration:0.5s;}
  747.  
  748. #dropthebass a:hover {
  749. fill: #7e7eea;}
  750.  
  751. .entry:hover #dropthebass{
  752. opacity:1;
  753. margin-top: 31px;
  754. -moz-transition-duration:0.5s;
  755. -webkit-transition-duration:0.5s;
  756. -o-transition-duration:0.5s;}
  757.  
  758. /* ------------ Captions ----------- */
  759.  
  760. .caption {
  761. {block:IndexPage}
  762. {block:ifNotShowCaptions} display:none; {/block:ifNotShowCaptions}
  763. {/block:IndexPage}
  764. margin-top: -5px;
  765. padding-top: 10px;
  766. border: 1px solid {color:Border};
  767. }
  768.  
  769.  
  770.  
  771. /* ---------------------- Unnested Captions ------------- */
  772.  
  773. {block:ifUnnestedCaptions}
  774.  
  775. .tumblr_parent {
  776. margin-top: 0px;
  777. margin-left: 0px;
  778. width: 100%;
  779. }
  780.  
  781. .tumblr_avatar {
  782. width: 25px;
  783. height: 25px;
  784. padding: 5px;
  785. margin-right: 5px;
  786. margin-left: -5px;
  787. border-radius: 10px;
  788. display: inline-block;
  789. vertical-align: middle;
  790. }
  791.  
  792. {/block:ifUnnestedCaptions}
  793.  
  794. /* ------ Tumblr Controls ----------*/
  795.  
  796. .ic {
  797. position:fixed;
  798. top: 25px;
  799. right: 30px;
  800. z-index: 1545;}
  801.  
  802. #tumblr_controls,
  803. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls {
  804. position:fixed!important;
  805. top: 9px!important;
  806. right: 20px!important;
  807. {block:IndexPage} opacity:0!important; {/block:IndexPage}
  808. {block:PermalinkPage} opacity: 1!important; {/block:PermalinkPage}
  809. z-index: 9999999999999999999;
  810. -webkit-filter:invert(100%);
  811. -webkit-backface-visibility:hidden;
  812. padding:10px 40px 10px 10px;
  813. -webkit-transition:opacity .3s ease-out;
  814. transition:opacity .3s ease-out;}
  815.  
  816. #tumblr_controls:hover,
  817. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls:hover {
  818. z-index: 9999999999999999999!important;
  819. opacity:.5!important;}
  820.  
  821. /* ---------------- Permalink // Post Notes ------------ */
  822.  
  823.  
  824. ol.notes {
  825. display:block;
  826. text-align:left;
  827. list-style-type:none;
  828. margin-left:-40px;
  829. }
  830.  
  831. ol.notes li.note{
  832. margin-bottom:5px;
  833. }
  834.  
  835. .pagenotes {
  836. text-align:left;
  837. margin-top:15px;
  838. height: 300px;
  839. overflow-y: scroll;
  840. }
  841.  
  842. .pagenotes img{
  843. padding: 5px;
  844. margin-right: 5px;
  845. margin-left: -5px;
  846. border-radius: 10px;
  847. display: inline-block;
  848. vertical-align: middle;
  849. }
  850.  
  851.  
  852. /* ------------- Pagination // Infinite Scrolling ------------ */
  853.  
  854. .pagination {
  855. font-size: 10px;
  856. height: 80px;
  857. text-align: center;
  858. letter-spacing:1px;
  859. color: {color:Posts};
  860. padding: 10px;
  861. color: black;
  862. text-transform: uppercase;
  863. margin-top: 50px;
  864. }
  865.  
  866. .pagination a {
  867. color: black;
  868. padding: 0px 10px;
  869. font-size: 9px;
  870. display: inline-block;
  871. text-decoration: none;
  872. }
  873.  
  874.  
  875. </style>
  876.  
  877. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  878. </head>
  879. <body>
  880.  
  881. <div class="ic"><span class="lnr lnr-cog"></span></div>
  882.  
  883.  
  884. <div class="main">
  885.  
  886. <!-------------------------------------------------------------------------->
  887. <!--- Sidebar -->
  888. <!-------------------------------------------------------------------------->
  889.  
  890. <div id="sidebar">
  891. <div class="stop">
  892.  
  893. <div class="hpic">
  894.  
  895. </div>
  896.  
  897. {block:ifAvatar}
  898. <div class="avatar"><img src="{PortraitURL-64}"></div>
  899. {/block:ifAvatar}
  900.  
  901. </div> <!-- End of Top Sidebar -->
  902.  
  903.  
  904. <div class="sidebar">
  905.  
  906.  
  907. <div class="tt">{text:Title}</div>
  908. <div class="bt">{text:Subtitle}</div>
  909.  
  910.  
  911. <div class="navigation">
  912. <a href="/">home</a>
  913. <a href="/ask">message</a>
  914. {block:ifArchive}<a href="/archive">archive</a>{/block:ifArchive}
  915. <a href="#?w=500" rel="popup_name" class="poplight">navigation</a>
  916. <a href="http://onyxian.tumblr.com">Theme</a>
  917.  
  918. </div>
  919.  
  920.  
  921. {block:Description}
  922. <div class="desc"><p>{Description}</p></div>
  923. {/block:Description}
  924.  
  925.  
  926.  
  927. <!------- Pagination -------->
  928.  
  929. <center><div class="pagination">
  930.  
  931. {block:Pagination}
  932. {block:PreviousPage}<a href="{PreviousPage}"><span class="lnr lnr-chevron-left"></span></a>&nbsp;&nbsp;{/block:PreviousPage}
  933.  
  934.  
  935. {block:NextPage}<a href="{NextPage}"><span class="lnr lnr-chevron-right"></span></a>{/block:NextPage}
  936. {/block:Pagination}
  937.  
  938.  
  939. </div></center>
  940.  
  941.  
  942. </div> <!-- End of Sidebar Container -->
  943. </div> <!-- End of Actual Sidebar -->
  944.  
  945.  
  946. <!-------------------------------------------------------------------------->
  947. <!-- About -->
  948. <!-------------------------------------------------------------------------->
  949.  
  950. <div id="popup_name" class="popup_block">
  951.  
  952. <div class="about">
  953. <div class="bio">
  954.  
  955.  
  956. <div class="nav">
  957. <div class="llinks">
  958.  
  959.  
  960. {block:IfLink1}<a href="{text:Link 1 URL}" a title="{text:Link 1}">
  961. {text:Icon 1}</a>{/block:IfLink1}
  962.  
  963. {block:IfLink2}<a href="{text:Link 2 URL}" a title="{text:Link 2}">
  964. {text:Icon 2}</a>{/block:IfLink2}
  965.  
  966. {block:IfLink3}<a href="{text:Link 3 URL}" a title="{text:Link 3}">
  967. {text:Icon 3}</a>{/block:IfLink3}
  968.  
  969. {block:IfLink4}<a href="{text:Link 4 URL}" a title="{text:Link 4}">
  970. {text:Icon 4}</a>{/block:IfLink4}
  971.  
  972. {block:IfLink5}<a href="{text:Link 5 URL}" a title="{text:Link 5}">
  973. {text:Icon 5}</a>{/block:IfLink5}
  974.  
  975. {block:IfLink6}<a href="{text:Link 6 URL}" a title="{text:Link 6}">
  976. {text:Icon 6}</a>{/block:IfLink6}
  977.  
  978.  
  979. </div>
  980.  
  981. </div> <!-- End of Links -->
  982. </div> <!-- End of Actual About -->
  983.  
  984.  
  985.  
  986. <div class="searchbar">
  987. <form action="/search" method="get" class="sfm">
  988. <input type="text" name="q" value="{SearchQuery}" id="sf" placeholder="search">
  989. <input type="image" value="Search" src="http://static.tumblr.com/f1skqpy/Oxbn13qun/search_icon.png" id="sb"/>
  990. </div>
  991.  
  992.  
  993.  
  994.  
  995.  
  996. </div> <!-- End of About -->
  997. </div> <!-- End of Pop Up Link -->
  998.  
  999.  
  1000. <div class="content">
  1001. {block:Posts}
  1002. <article class="entry {block:Photo}ph{/block:Photo}{block:Photoset}ph{/block:Photoset}">
  1003. <section class="post" id="{PostID}">
  1004.  
  1005.  
  1006. <!---------------------------------------------------
  1007. AUDIO POSTS
  1008. ---------------------------------------------------->
  1009.  
  1010. {block:Audio}
  1011. <div class="audioplayer">
  1012. <div id="player">{AudioPlayerWhite}</div>
  1013.  
  1014. {block:TrackName}
  1015. <div class="track">{TrackName}</div>
  1016. {/block:TrackName}
  1017.  
  1018. {block:Artist}
  1019. <div class="artist">{Artist}</div>
  1020. {/block:Artist}
  1021.  
  1022. </div>
  1023. {/block:Audio}
  1024.  
  1025.  
  1026. <!--------- Photos ---------------->
  1027. {block:Photo}
  1028. {block:IndexPage}
  1029. <div class="perma_hold">
  1030. <div class="perma">
  1031. <a href="{Permalink}">
  1032. <div style="margin-top: -8px; font-size: 10px;">{ShortMonth}</div>
  1033. <div style="margin-top: 18px;font-size: 12px;">{DayOfMonthWithZero}</div></a>
  1034. </div>
  1035. </div>
  1036. {/block:IndexPage}
  1037.  
  1038. <div class="media">
  1039. {LinkOpenTag}
  1040. <img src="{PhotoURL-500}">
  1041. {LinkCloseTag}
  1042. </div>
  1043. {/block:Photo}
  1044.  
  1045.  
  1046. <!--------- Photoset ---------------->
  1047. {block:Photoset}
  1048.  
  1049. {block:IndexPage}
  1050. <div class="perma_hold">
  1051. <div class="perma">
  1052. <a href="{Permalink}">
  1053. <div style="margin-top: -8px; font-size: 10px;">{ShortMonth}</div>
  1054. <div style="margin-top: 18px;font-size: 12px;">{DayOfMonthWithZero}</div></a>
  1055. </div>
  1056. </div>
  1057. {/block:IndexPage}
  1058.  
  1059. <div class="media photoset">
  1060. <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>
  1061. </div>
  1062. {/block:Photoset}
  1063.  
  1064.  
  1065. <!--------------------- Video --------------------->
  1066.  
  1067.  
  1068. {block:Video}
  1069. <div class="media video">{Video-500}</div>
  1070. {/block:Video}
  1071.  
  1072. <!--------------------- Question --------------------->
  1073.  
  1074. {block:Answer}
  1075. <div class="question text">
  1076. <div class="sender">
  1077. <div class="askerpic"><img src="{AskerPortraitURL-40}"></div>
  1078. <div class="asker">{Asker} asked</div></div>
  1079. <span class="inquiry">{Question}</span>
  1080. </div>
  1081.  
  1082.  
  1083. <div class="answer text">{Answer}</div>
  1084. {/block:Answer}
  1085.  
  1086. <!--------------------- Chat --------------------->
  1087.  
  1088.  
  1089. {block:Chat}<div class="chat text">
  1090. {block:Title}<h1 class="title">{Title}</h1>{/block:Title}
  1091. <ul class="chat">
  1092. {block:Lines}
  1093. <li class="line">
  1094. {block:Label}
  1095. <span class="label">{Label}&nbsp; </span>
  1096. {/block:Label}
  1097. {Line}
  1098. </li>
  1099. {/block:Lines}
  1100. </ul>
  1101. </div>{/block:Chat}
  1102.  
  1103.  
  1104. <!--------------------- Link --------------------->
  1105.  
  1106.  
  1107. {block:Link}
  1108. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  1109. {block:Description}<div class="text">{Description}</div>{/block:Description}
  1110. {/block:Link}
  1111.  
  1112.  
  1113. <!--------------------- Quotes --------------------->
  1114.  
  1115.  
  1116. {block:Quote}
  1117. <div class="q text">
  1118. <div class="quote">{Quote}</div>
  1119. {block:Source}
  1120. <div class="source"><div style="padding-top: 5px"> — {Source}</div></div>
  1121. </div>
  1122. {/block:Source}
  1123. {/block:Quote}
  1124.  
  1125.  
  1126. <!--------------------- Text --------------------->
  1127.  
  1128.  
  1129. {block:Text}
  1130. <div class="text">
  1131. {block:Title}<h1 class="title">{Title}</h1>{/block:Title}
  1132. {Body}</div>
  1133. {/block:Text}
  1134.  
  1135.  
  1136.  
  1137.  
  1138. {block:Caption}
  1139. <div class="caption text">{Caption}</div>
  1140. {/block:Caption}
  1141.  
  1142.  
  1143.  
  1144.  
  1145. {block:Date}
  1146.  
  1147. <div class="date accent">
  1148.  
  1149.  
  1150. {block:HasTags}
  1151. <div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>
  1152. {/block:HasTags}
  1153. </div>
  1154.  
  1155.  
  1156. <div id="dropthebass">
  1157. <div class="controls">
  1158. <a href="{Permalink}" a title="{block:NoteCount}{NoteCountwithLabel}{/block:NoteCount}"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 469.513 469.513" style="enable-background:new 0 0 469.513 469.513;" xml:space="preserve"><g><g><path d="M370.757,0h-272c-9.35,0-17,7.65-17,17v435.483c0,7.083,4.25,13.317,10.767,15.867c6.517,2.55,13.883,0.85,18.7-4.533 L238.157,324.7l119.85,138.833c3.4,3.683,7.933,5.95,12.75,5.95c1.983,0,3.967-0.283,5.95-1.133 c6.517-2.55,11.05-8.783,11.05-15.867V17C387.757,7.65,380.107,0,370.757,0z M353.757,406.867L251.473,288.15 c-3.117-3.683-7.65-5.95-12.75-5.95c-4.817,0-9.633,1.983-12.75,5.667L115.757,408.85V34h238V406.867z"/></g></g></svg></a>
  1159. <a href="#" class="like">{LikeButton}
  1160. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95 c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1 c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1 c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4 c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5 c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767 c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45 c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg></a>
  1161. <a href="{ReblogURL}" target="_blank" class="reblog">
  1162. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 361.095 361.095" style="enable-background:new 0 0 361.095 361.095;" xml:space="preserve"><g><g><path d="M182.595,325.678c-63.183,0-120.133-42.217-138.267-102.567c-2.833-9.067-12.183-14.167-21.25-11.333 c-9.067,2.833-14.167,12.183-11.333,21.25c22.95,75.933,91.517,126.65,170.85,126.65c98.317,0,178.5-80.183,178.5-178.5 s-80.183-178.5-178.5-178.5c-55.817,0-108.233,26.633-141.667,69.7l-7.083-56.1c-1.133-9.35-9.633-15.867-18.983-14.733 C5.511,2.678-1.005,11.178,0.128,20.528l13.317,103.7c1.133,8.5,8.5,14.733,16.717,14.733c0.567,0,1.417,0,1.983,0l102.567-11.617 c9.35-1.133,16.15-9.35,15.017-18.7s-9.35-16.15-18.7-15.017l-68.85,7.65c26.633-39.95,71.683-64.6,120.417-64.6 c79.617,0,144.5,64.883,144.5,144.5S262.211,325.678,182.595,325.678z"/></g></g></svg>
  1163. </a>
  1164. </div>
  1165. </div> <!-- End of Stags -->
  1166.  
  1167.  
  1168. {/block:Date}
  1169. {block:PermalinkPage}
  1170.  
  1171. <div class="postinfo">
  1172. <center>
  1173.  
  1174. {block:Date}
  1175.  
  1176. Posted {Month} {DayofMonth}, {Year} with
  1177. {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
  1178.  
  1179. <br>
  1180.  
  1181. <div class="permapic">
  1182.  
  1183. {block:RebloggedFrom}
  1184. <a href="{ReblogParentURL}">via <u>{ReblogParentName}</u></a>
  1185.  
  1186. //
  1187.  
  1188. <a href="{ReblogRootURL}">by <u>{ReblogRootName}</u></a>
  1189. {/block:RebloggedFrom}
  1190.  
  1191. </div>
  1192.  
  1193.  
  1194. {/block:Date}
  1195.  
  1196.  
  1197. </center>
  1198.  
  1199.  
  1200. </div> <!-- End of Post Info --->
  1201.  
  1202. <!--POST NOTES-->
  1203. {block:PostNotes}
  1204. <div class="pagenotes">{PostNotes-16}</div>
  1205. {/block:PostNotes}
  1206.  
  1207.  
  1208. {/block:PermalinkPage}
  1209.  
  1210.  
  1211. </section>
  1212. </article>
  1213. {/block:Posts}
  1214.  
  1215.  
  1216.  
  1217. <!-- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} -->
  1218. </div>
  1219.  
  1220.  
  1221.  
  1222.  
  1223. </div>
  1224. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1225. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1226. <script src="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  1227. {block:IndexPage}
  1228. {block:ifInfiniteScroll}
  1229. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1230. {/block:ifInfiniteScroll}
  1231. {/block:IndexPage}
  1232. <script>
  1233. $(document).ready(function(){
  1234. $('.photo-slideshow').pxuPhotoset({
  1235. lightbox: true,
  1236. rounded: false,
  1237. gutter: '{select:Gutter Size}px',
  1238. photoset: '.photo-slideshow',
  1239. photoWrap: '.photo-data',
  1240. photo: '.pxu-photo'
  1241. });
  1242. var $container = $('.content');
  1243. {block:ifInfiniteScroll}
  1244. $container.infinitescroll({
  1245. itemSelector: '.entry',
  1246. navSelector: '.pagination',
  1247. nextSelector: '.next',
  1248. loadingImg: '',
  1249. loadingText: '<em></em>',
  1250. bufferPx: 2000
  1251. },
  1252. function( newElements ) {
  1253. var $newElems = $( newElements );
  1254. $newElems.find('.photo-slideshow').pxuPhotoset({
  1255. lightbox: true,
  1256. rounded: false,
  1257. gutter: '1px',
  1258. photoset: '.photo-slideshow',
  1259. photoWrap: '.photo-data',
  1260. photo: '.pxu-photo'
  1261. });
  1262. resizeVideos();
  1263. });
  1264. {/block:ifInfiniteScroll}
  1265. });
  1266. </script>
  1267.  
  1268. <!-- Unnested Captions -->
  1269. {block:ifUnnestedCaptions}
  1270. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1271.  
  1272. <script>
  1273.  
  1274. $('.entry').unnest({
  1275. yourCaption: ".caption",
  1276. wrapName: ".tumblr_parent",
  1277. newCaptionUsername: true,
  1278. originalPostCaptionUsername: true,
  1279. tumblrAvatarClass: ".tumblr_avatar",
  1280. usernameColon: false,
  1281. });
  1282.  
  1283. </script>
  1284. {/block:ifUnnestedCaptions}
  1285.  
  1286. <!-- Pop Ups -->
  1287. <script>
  1288. $(document).ready(function() {
  1289. //
  1290. $('a.poplight[href^=#]').click(function() {
  1291. var popID = $(this).attr('rel'); //Get Popup Name
  1292. var popURL = $(this).attr('href'); //Get Popup href to define size
  1293. var query= popURL.split('?');
  1294. var dim= query[1].split('&');
  1295. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  1296. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://static.tumblr.com/9pxhvqx/Mido7rstb/tumblr_inline_n2aj54kxoa1r7v6wt.png" class="btn_close" title="close" alt="escape" /></a>');
  1297. var popMargTop = ($('#' + popID).height() + 80) / 2;
  1298. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  1299. //Apply Margin to Popup
  1300. $('#' + popID).css({
  1301. 'margin-top' : -popMargTop,
  1302. 'margin-left' : -popMargLeft
  1303. });
  1304. $('body').append('<div id="fade"></div>');
  1305. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  1306. return false;
  1307. });
  1308. $('a.close, #fade').live('click', function() {
  1309. $('#fade , .popup_block').fadeOut(function() {
  1310. $('#fade, a.close').remove(); //fade them both out
  1311. });
  1312. return false;
  1313. });
  1314. });
  1315. </script>
  1316.  
  1317. <!--- TOOL TIPS --->
  1318. <script src="http://static.tumblr.com/3lcgguq/DCPn25qvq/jquery.style-my-tooltips.js"></script>
  1319. <script src="http://static.tumblr.com/3lcgguq/Eifn25qw3/style-my-tooltips.css"></script>
  1320. <script>
  1321. (function($){
  1322. $(document).ready(function(){
  1323. $("[title]").style_my_tooltips({
  1324. tip_follows_cursor:true,
  1325. tip_delay_time:200,
  1326. tip_fade_speed:300,
  1327. attribute:"title"
  1328. });
  1329. });
  1330. })(jQuery);
  1331. </script>
  1332.  
  1333. </body>
  1334. </html>
Advertisement
Add Comment
Please, Sign In to add comment