API tools faq
paste
ninpen

ffxv

ninpen
Jun 16th, 2016
2,228
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 48.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!-------------------------------
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13. FFXV THEME BY NINPEN.TUMBLR.COM
  14. DO NOT REMOVE THE CREDIT.
  15.  
  16. PLEASE USE hexcolortool.com TO HELP CHANGE COLORS STARTING WITH RGBA
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25. --------------------------------->
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34. <head>
  35. <title>{Title}</title>
  36. <link rel="shortcut icon" href="{FavIcon}" />
  37. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  38. <script src="//use.edgefonts.net/muli:n3,i3,n4,i4:all.js"></script>
  39.  
  40. <meta name="if:Columns" content="" />
  41. <meta name="if:showCaption" content="" />
  42.  
  43. <meta name="text:index post size" content="240" />
  44. <meta name="text:fontsize" content="10" />
  45. <meta name="text:lineheight" content="15" />
  46. <meta name="text:columnmargins" content="30" />
  47. <meta name="color:thmlink" content="#ffffff"/>
  48.  
  49. <meta name="color:background" content="#ffffff" />
  50. <meta name="color:text" content="#ffffff" />
  51. <meta name="color:link" content="#aaaaaa" />
  52. <meta name="color:bold" content="#e2feaf" />
  53. <meta name="color:italic" content="#b6e5ef" />
  54. <meta name="color:underline" content="#f6f6bb" />
  55. <meta name="color:h1" content="#ffffff" />
  56. <meta name="color:h2" content="#ffffff" />
  57.  
  58. <meta name="color:accent1" content="#ffffff" />
  59. <meta name="color:accent2" content="#ffffff" />
  60. <meta name="color:accent3" content="#ffffff" />
  61. <meta name="color:accent4" content="#64f4fc" />
  62. <meta name="color:accent5" content="#000000" />
  63. <meta name="color:accent6" content="#ffffff" />
  64. <meta name="color:accent7" content="#ffffff" />
  65. <meta name="color:accent8" content="#aaaaaa" />
  66. <meta name="color:accent9" content="#000000" />
  67.  
  68. <meta name="image:background" content="http://static.tumblr.com/hczaopr/FO0o8ol20/bg.png"/>
  69. <meta name="image:background2" content="http://static.tumblr.com/hczaopr/8xOo8lelj/ffxv_bg.png"/>
  70.  
  71.  
  72.  
  73.  
  74. <div class="cred"><a href="http://ninpen.tumblr.com/">thm.</a></div>
  75. <style type="text/css">
  76. html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, a, abbr, acronym, address, big, cite,hr, code,del, dfn,img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd,ol,ul, fieldset, form, label, legend, tbody, tfoot, thead, tr, th, td, article, canvas, details, embed, figure, figcaption, footer, hgroup, menu, output, ruby, summary,time, mark, audio, video {
  77. margin: 0;
  78. padding: 0;
  79. border: 0;
  80. font-size: 100%;
  81. font: inherit;
  82. vertical-align: baseline;
  83. }
  84.  
  85. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
  86.  
  87. body {line-height: 1;}
  88.  
  89. ul {list-style: none;}
  90.  
  91. table {border-collapse: collapse;border-spacing: 0;}
  92.  
  93. ::-webkit-scrollbar {width: 0px; height: 0px; background:#fff; }
  94. ::-webkit-scrollbar-thumb { background-color:#fff;}
  95.  
  96. body,html{
  97. width:100%;
  98. height:100%;
  99. padding:0;
  100. margin:0;
  101. }
  102.  
  103. body{
  104. word-wrap: break-word;
  105. font:10px/15px "muli";
  106. color:{color:text};
  107. background: url({image:background}) no-repeat center center fixed;
  108. -webkit-background-size: cover;
  109. -moz-background-size: cover;
  110. -o-background-size: cover;
  111. background-size: cover;
  112. }
  113.  
  114. a{text-decoration:none;color:{color:link};font-weight:900;}
  115.  
  116. a:hover{opacity:.5};
  117.  
  118. b,strong{color:{color:bold};}
  119.  
  120. i,em{color:{color:italic};}
  121.  
  122. u{color:{color:underline};}
  123.  
  124. h1,h2{
  125. font:12px/14px century gothic;
  126. border-bottom:1px solid {color:accent1};
  127. padding:10px 0 10px 40px;
  128. letter-spacing:1px;
  129. width:calc(100% - 110px);
  130. margin:0 auto 20px auto;
  131. position:relative;
  132. color:{color:h1};
  133. }
  134.  
  135. h2{text-align:right;font-style:italic;}
  136.  
  137. h1:before,h2:before{
  138. content:"";
  139. position:absolute;
  140. bottom:-4px;
  141. left:-6px;
  142. width:5px;
  143. height:5px;
  144. border:1px solid {color:accent1};
  145. -ms-transform: rotate(45deg);
  146. -webkit-transform: rotate(45deg);
  147. transform: rotate(45deg);
  148. }
  149.  
  150. h1:after{
  151. content:"";
  152. position:absolute;
  153. bottom:-4px;
  154. right:-6px;
  155. width:5px;
  156. height:5px;
  157. border:1px solid {color:accent1};
  158. -ms-transform: rotate(45deg);
  159. -webkit-transform: rotate(45deg);
  160. transform: rotate(45deg);
  161. }
  162.  
  163. h1:first-letter{text-transform:uppercase;}
  164.  
  165. .cred{
  166. z-index:99999;
  167. font:700 italic 8px/8px 'muli';
  168. letter-spacing:1px;
  169. position:Fixed;
  170. bottom:5%;
  171. right:5%;
  172. }
  173.  
  174. .cred a{color:{color:thmlink};}
  175.  
  176. .source{
  177. font:italic 7px/8px trebuchet ms;
  178. text-transform:uppercase;
  179. letter-spacing:1px;
  180. color:{color:text};
  181. }
  182.  
  183. img{max-width:100%;}
  184.  
  185. footer{
  186. left:10%;
  187. bottom:0;
  188. width:80%;
  189. height:150px;
  190. position:fixed;
  191. }
  192.  
  193. #weapon{
  194. left:30px;
  195. top:25px;
  196. position:relative;
  197. display:inline-block;
  198. height:104px;
  199. }
  200.  
  201. #weap{
  202. float:left;
  203. width:calc(100% / 3);
  204. height:100%;
  205. }
  206.  
  207. #hubbed2{
  208. top:30px;
  209. height:100px;
  210. position:relative;
  211. }
  212.  
  213. .attwrap{
  214. width:100%;
  215. height:calc(100% / 3.3);
  216. display: inline-block;
  217. margin-bottom: 3px;
  218. box-shadow: inset 0 0 6px {color:accent2};
  219. }
  220.  
  221. .hattwrap{
  222. width: 50%;
  223. height: 100%;
  224. display: inline-block;
  225. background:rgba(0,0,0,.3);
  226. }
  227.  
  228. .hattname{
  229. color:{color:accent2};
  230. position: relative;
  231. background:rgba(0,0,0,.3);
  232. font:10px/20px century gothic;
  233. letter-spacing:2px;
  234. text-transform: uppercase;
  235. display: inline-block;
  236. width: calc(50% - 20px);
  237. position: absolute;
  238. padding: 5px 0 5px 20px;
  239. }
  240.  
  241. .hattwraplg{
  242. width:90%;
  243. height: 2px;
  244. background:{color:accent2};
  245. position: relative;
  246. top: 50%;
  247. transform: translateY(-50%);
  248. }
  249.  
  250. .hattwraplg:after{
  251. content:"";
  252. position: absolute;
  253. top: -2px;
  254. right: -5px;
  255. width: 5px;
  256. height: 5px;
  257. background: rgba(0,0,0,.3);
  258. box-shadow:inset 0 0 0 1px {color:accent2};
  259. -webkit-transform: rotate(45deg);
  260. -moz-transform: rotate(45deg);
  261. -o-transform: rotate(45deg);
  262. -ms-transform: rotate(45deg);
  263. transform: rotate(45deg);
  264. }
  265.  
  266. #hud{
  267. width:calc(100% / 4);
  268. height:100%;
  269. float:right;
  270. }
  271.  
  272. #hubbed{
  273. left:8%;
  274. width:90%;
  275. height:100%;
  276. position:relative;
  277. }
  278.  
  279. .hwrap{
  280. width:100%;
  281. height:calc(100% / 3.2);
  282. display: block;
  283. background: rgba(0,0,0,.3);
  284. box-shadow:inset 0 0 6px {color:accent3};
  285. margin-bottom: 3px;
  286. }
  287.  
  288. .hname{
  289. color:{color:accent3};
  290. position: relative;
  291. display: inline-block;
  292. top: 6px;
  293. left: 5px;
  294. margin-bottom: 5px;
  295. letter-spacing:2px;
  296. font:11px/16px century gothic;
  297. text-transform: uppercase;
  298. }
  299.  
  300. .hnum{
  301. position: relative;
  302. display: inline-block;
  303. float:right;
  304. top: 5px;
  305. right: 20px;
  306. text-shadow:0 0 2px {color:accent3};
  307. color: {color:accent3};
  308. letter-spacing:1px;
  309. font:14px/18px century gothic;
  310. text-transform: uppercase;
  311. }
  312.  
  313. .hwraplg{
  314. width:90%;
  315. height: 3px;
  316. margin:6px auto 0 auto;
  317. display: block;
  318. background:rgba(0,0,0,.6);
  319. position: relative;
  320. }
  321.  
  322. .hwraplg:before{
  323. content: "";
  324. position: absolute;
  325. top: -2px;
  326. left: -5px;
  327. width: 6px;
  328. height: 6px;
  329. box-shadow:inset 0 0 0 2px {color:accent1};
  330. background:rgba(0,0,0,.3);
  331. -webkit-transform: rotate(45deg);
  332. -moz-transform: rotate(45deg);
  333. -o-transform: rotate(45deg);
  334. -ms-transform: rotate(45deg);
  335. transform: rotate(45deg);
  336. }
  337.  
  338. .hwraplg:after{
  339. content:"";
  340. position: absolute;
  341. top: -1px;
  342. right: -5px;
  343. width: 6px;
  344. height: 6px;
  345. box-shadow:inset 0 0 0 2px {color:accent2};
  346. background:rgba(0,0,0,.3);
  347. -webkit-transform: rotate(45deg);
  348. -moz-transform: rotate(45deg);
  349. -o-transform: rotate(45deg);
  350. -ms-transform: rotate(45deg);
  351. transform: rotate(45deg);
  352. }
  353.  
  354. .hwraplg span{
  355. width: 75%;
  356. height: 100%;
  357. background:{color:accent1};
  358. position: absolute;
  359. }
  360.  
  361. .hwrapsm{
  362. width:60%;
  363. height: 2px;
  364. margin:5px 0 0 40px;
  365. display: block;
  366. position: relative;
  367. background: {color:accent1};
  368. box-shadow: 0 0 3px {color:accent4},inset 0 0 3px {color:accent4};
  369. }
  370.  
  371. .hwrapsm:before{
  372. content: "";
  373. position: absolute;
  374. top: -2px;
  375. left: -5px;
  376. width: 5px;
  377. height: 5px;
  378. background:{color:accent1};
  379. box-shadow: 0 0 3px {color:accent4},inset 0 0 3px {color:accent4};
  380. }
  381.  
  382. .hwrapsm:after{
  383. content:"";
  384. position: absolute;
  385. top: -2px;
  386. right:0;
  387. width: 5px;
  388. height: 5px;
  389. background:{color:accent1};
  390. box-shadow: 0 0 3px {color:accent4},inset 0 0 3px {color:accent4};
  391. }
  392.  
  393. .hwrapsm span{
  394. width: calc(100%/3);
  395. height: 100%;
  396. background: {color:accent4};
  397. position: absolute;
  398. }
  399.  
  400. .hwrapsm span:after{
  401. content:"";
  402. position: absolute;
  403. top: -2px;
  404. left:100%;
  405. width: 5px;
  406. height: 5px;
  407. background:{color:accent1};
  408. box-shadow: 0 0 3px {color:accent4},inset 0 0 3px {color:accent4};
  409. }
  410.  
  411. .main-nav {
  412. z-index:10;
  413. position: absolute;
  414. top: 0;
  415. left: 0;
  416. background: url({image:background2}) no-repeat center center fixed;
  417. -webkit-background-size: cover;
  418. -moz-background-size: cover;
  419. -o-background-size: cover;
  420. background-size: cover;
  421. width: 100%;
  422. height: 100%;
  423. -webkit-transform: translateY(-100%);
  424. -ms-transform: translateY(-100%);
  425. transform: translateY(-100%);
  426. -webkit-transition: .5s ease;
  427. -moz-transition: .5s ease;
  428. -o-transition: .5s ease;
  429. transition: transform .5s ease;
  430. }
  431.  
  432. .main-nav:before{
  433. width:100%;
  434. height:100%;
  435. position:Absolute;
  436. top:0;
  437. left:0;
  438. content:"";
  439. opacity:0;
  440. background:{color:accent5};
  441. }
  442.  
  443. .is-active-menu {overflow: hidden;}
  444.  
  445. .is-active-menu .main-nav {
  446. visibility: visible;
  447. -webkit-transform: translateY(0%);
  448. -ms-transform: translateY(0);
  449. -moz-transform: translateY(0);
  450. -o-transform: translateY(0);
  451. transform: translateY(0%);
  452. }
  453.  
  454. .is-active-menu #center {
  455. position: relative;
  456. -webkit-transform: translateY(0%);
  457. -ms-transform: translateY(0);
  458. -moz-transform: translateY(0);
  459. -o-transform: translateY(0);
  460. transform: translateY(0%);
  461. margin-top: -70px;
  462. }
  463.  
  464. .nav-toggle {
  465. left: 50px;
  466. top:50px;
  467. width:53px;
  468. height:110px;
  469. cursor: pointer;
  470. position:fixed;
  471. z-index:100;
  472. }
  473.  
  474. .menumask {
  475. -webkit-mask-image: url("http://static.tumblr.com/hczaopr/4cXo8lch0/menu.png");
  476. mask-image: url("http://static.tumblr.com/hczaopr/4cXo8lch0/menu.png");
  477. }
  478.  
  479. .menu {
  480. background:{color:accent6};
  481. width:53px;
  482. height:110px;
  483. display:block;
  484. }
  485.  
  486. .nav-toggle.menu-open .menu{background:{color:accent6};}
  487.  
  488. #desc{
  489. font-family:century gothic;
  490. width:70%;
  491. height:calc(100% / 2);
  492. position:Absolute;
  493. top: 50%;
  494. left:15%;
  495. transform: translateY(-50%);
  496. background:rgba(0,0,0,.6);
  497. padding:0 10px 10px 0;
  498. border-left:1px solid rgba(0,0,0,.4);
  499. border-right:1px solid rgba(0,0,0,.4);
  500. border-bottom:1px solid rgba(0,0,0,.4);
  501. }
  502.  
  503. #desc:before{
  504. content:"";
  505. width:25%;
  506. height:20px;
  507. background:rgba(0,0,0,.6);
  508. position:absolute;
  509. right:-1px;
  510. top:-20px;
  511. border-right:1px solid rgba(0,0,0,.4);
  512. box-shadow:0 -1px 0 rgba(0,0,0,.8);
  513. }
  514.  
  515. #desc:after{
  516. content:"";
  517. width:0;
  518. height:0px;
  519. position:absolute;
  520. right:25%;
  521. top:-20px;
  522. width: 0;
  523. height: 0;
  524. border-bottom: 20px solid rgba(0,0,0,.6);
  525. border-left: 20px solid transparent;
  526. }
  527.  
  528. #desc spans{
  529. display:block;
  530. overflow:auto;
  531. height:calc(100% - 50px);
  532. }
  533.  
  534. #desc li,.stats{list-style-type:none;}
  535.  
  536. .stats a{color:{color:link};}
  537.  
  538. #desc .dinfo{
  539. color:{color:accent7};
  540. background:{color:accent9};
  541. height:50px;
  542. width:calc(50% + 100px);
  543. position:relative;
  544. }
  545.  
  546. #desc .dinfo:before{
  547. position:absolute;
  548. top:0;
  549. right:-80px;
  550. content:"";
  551. width: 0;
  552. height: 0;
  553. border-top: 50px solid {color:accent9};
  554. border-right: 80px solid transparent;
  555. }
  556.  
  557. #desc .portrait{
  558. width:105px;
  559. height:50px;
  560. margin-left:100px;
  561. position:Relative;
  562. overflow:hidden;
  563. display:inline-block;
  564. }
  565.  
  566. .por{width:110px;}
  567.  
  568. #dname{
  569. text-transform:uppercase;
  570. letter-spacing:2px;
  571. font:900 14px/14px century gothic;
  572. display:inline-block;
  573. position:relative;
  574. bottom:5px;
  575. left:10px;
  576. }
  577.  
  578. ul.dstats{
  579. position:Absolute;
  580. top:5px;
  581. right:-40px;
  582. width:300px;
  583. height:30px;
  584. text-align:right;
  585. text-transform:uppercase;
  586. letter-spacing:2px;
  587. font:12px/12px century gothic;
  588. }
  589.  
  590. .dstats li:nth-child(odd){font-weight:900}
  591.  
  592. ul.dstats li{display:inline-block;}
  593.  
  594. ul.dstats li:not(.dlvl){margin:0 10px;list-style-type:none;}
  595.  
  596. .dlvl{
  597. margin-left:-15px;
  598. font-size:18px;
  599. font-weight:900;
  600. position:relative;
  601. top:1px;
  602. }
  603.  
  604. .dlinks{
  605. padding:10px;
  606. margin-bottom:40px;
  607. letter-spacing:2px;
  608. font:11px/12px century gothic;
  609. background:rgba(0,0,0,.3);
  610. position:relative;
  611. display:inline-block;
  612. width:40%;
  613. top:20px;
  614. left:30px;
  615. }
  616.  
  617. .dlinks:not(:first-child).dlinks li{
  618. width:calc(50% - 30px);
  619. display:inline-block;
  620. background:rgba(0,0,0,.3);
  621. margin:0 0 10px 40px;
  622. }
  623.  
  624. .dlinks:not(:first-child){padding:10px 15px 10px 20px;width:calc(40% - 15px);}
  625.  
  626. .dlinks:not(:first-child).dlinks li:nth-child(odd){margin:0 0 10px 5px}
  627.  
  628. .dlinks:not(:first-child).dlinks li a{width:100%;}
  629.  
  630. .dlinks:not(:first-child).dlinks li a:after{z-index:1;}
  631. .dlinks:not(:first-child).dlinks li:after{right:-14.5px}
  632. .dlinks:not(:first-child).dlinks li:before{left:-15px}
  633.  
  634. .dlinks li{
  635. padding:7px 0;
  636. position:relative;
  637. width:calc(100% - 30px);
  638. margin:0 auto 10px auto;
  639. box-shadow:1.5px 0 rgba(0,0,0,.3),-1.5px 0 rgba(0,0,0,.3);
  640. background:rgba(0,0,0,.3);
  641. }
  642.  
  643. .dlinks li:last-child{margin:0 auto}
  644.  
  645. .dlinks li:before{
  646. content:"";
  647. position:absolute;
  648. top:0;
  649. left:-15px;
  650. width: 0;
  651. height: 0;
  652. border-top: 13.5px solid transparent;
  653. border-right: 13px solid rgba(0,0,0,.3);
  654. border-bottom: 13px solid transparent;
  655. }
  656.  
  657. .dlinks li:after{
  658. content:"";
  659. position:absolute;
  660. top:0;
  661. right:-15px;
  662. width: 0;
  663. height: 0;
  664. border-top: 13.5px solid transparent;
  665. border-left: 13px solid rgba(0,0,0,.3);
  666. border-bottom: 13px solid transparent;
  667. }
  668.  
  669. .dlinks li a{
  670. color:#aaa;
  671. width:calc(100% - 70px);
  672. box-shadow:1.5px 0 rgba(0,0,0,.4),-1.5px 0 rgba(0,0,0,.4);
  673. background:rgba(0,0,0,.4);
  674. text-align:center;
  675. display:inline-block;
  676. position:relative;
  677. -webkit-transition: background-color 0.5s ease;
  678. -moz-transition: background-color 0.5s ease;
  679. -o-transition: background-color 0.5s ease;
  680. transition: background-color 0.5s ease;
  681. }
  682.  
  683. .dlinks li a:hover{
  684. box-shadow:1.5px 0 rgba(0,0,0,.8),-1.5px 0 rgba(0,0,0,.8);
  685. background:rgba(0,0,0,.8);
  686. }
  687.  
  688. .dlinks li a:hover:before{
  689. border-top: 6px solid transparent;
  690. border-right: 6px solid rgba(0,0,0,.8);
  691. border-bottom: 6px solid transparent;
  692. }
  693.  
  694. .dlinks li a:hover:hover:after{
  695. border-top: 6px solid transparent;
  696. border-left: 6px solid rgba(0,0,0,.8);
  697. border-bottom: 6px solid transparent;
  698. }
  699.  
  700. .dlinks li a:before{
  701. content:"";
  702. position:absolute;
  703. top:0;
  704. left:-7px;
  705. width: 0;
  706. height: 0;
  707. border-top: 6px solid transparent;
  708. border-right: 6px solid rgba(0,0,0,.4);
  709. border-bottom: 6px solid transparent;
  710. -webkit-transition:0.5s ease;
  711. -moz-transition:0.5s ease;
  712. -o-transition:0.5s ease;
  713. transition:0.5s ease;
  714. }
  715.  
  716. .dlinks li a:after{
  717. content:"";
  718. position:absolute;
  719. top:0;
  720. right:-7px;
  721. width: 0;
  722. height: 0;
  723. border-top: 6px solid transparent;
  724. border-left: 6px solid rgba(0,0,0,.4);
  725. border-bottom: 6px solid transparent;
  726. }
  727.  
  728. .dlinks t{
  729. text-transform:uppercase;
  730. font-weight:900;
  731. margin-right:15px;
  732. color:{color:accent1};
  733. text-shadow:0 0 2px {color:accent1};
  734. }
  735.  
  736. #about{
  737. font-size:11px;
  738. line-height:16px;
  739. letter-spacing:.01em;
  740. padding:10px;
  741. width:calc(40% - 20px);
  742. position:relative;
  743. top:20px;
  744. background:rgba(0,0,0,.4);
  745. display:inline-block;
  746. float:right;
  747. color:{color:accent8};
  748. }
  749.  
  750. #about span{
  751. display:block;
  752. height:100%;
  753. overflow:auto;
  754. }
  755.  
  756. #about:before{
  757. content:"";
  758. width:40%;
  759. height:20px;
  760. background:rgba(0,0,0,.4);
  761. position:absolute;
  762. top:-20px;
  763. right:0;
  764. }
  765.  
  766. #about:after{
  767. content:"";
  768. position:absolute;
  769. top:-20px;
  770. right:40%;
  771. width: 0;
  772. height: 0;
  773. border-bottom: 20px solid rgba(0,0,0,.4);
  774. border-left: 40px solid transparent;
  775. }
  776.  
  777. #popupcontent{
  778. width:100%;
  779. position:absolute;
  780. height:100%;
  781. top:0;
  782. overflow:auto;
  783. left:0;
  784. counter-reset: ffxv-count;
  785. }
  786.  
  787. .popupentry{
  788. width:500px;
  789. padding:10px;
  790. background:rgba(255,255,255,.15);
  791. position:relative;
  792. top:19px;
  793. }
  794.  
  795. .popupentries{
  796. counter-increment: ffxv-count;
  797. text-transform: uppercase;
  798. letter-spacing: 2px;
  799. text-align: left;
  800. padding: 2px 5%;
  801. font-weight: bold;
  802. font-size: 8px;
  803. width:20%;
  804. left:0;
  805. top:-19px;
  806. position:Absolute;
  807. color:{color:accent1};
  808. background:rgba(255,255,255,.15);
  809. }
  810.  
  811. .popupentries:before{
  812. content:"Data Entry " counter(ffxv-count, decimal-leading-zero);
  813. }
  814.  
  815. .popupentries:after{
  816. content:"";
  817. width: 0;
  818. height: 0;
  819. position:Absolute;
  820. left:100%;
  821. top:0;
  822. border-bottom: 19px solid rgba(255,255,255,.15);
  823. border-right: 19px solid transparent;
  824. }
  825.  
  826. .popupentry #cap{
  827. width:calc(400px - 22px);
  828. color:{color:accent1};
  829. margin-bottom:50px;
  830. padding:10px;
  831. background:rgba(255,255,255,.1);
  832. border:1px solid rgba(255,255,255,.15);
  833. }
  834.  
  835. .popupentry .popwrap{position:absolute;top:0;left:530px;}
  836.  
  837. .perma{
  838. width:300px;
  839. text-align:center;
  840. line-height: 19px;
  841. margin:0 auto;
  842. color:{color:accent1};
  843. {block:PermalinkPage}margin:30px auto;{/block:PermalinkPage}
  844. }
  845.  
  846. .perma a{color:{color:accent1}!important;}
  847.  
  848. .exp {
  849. display: block;
  850. font-size: 14px;
  851. text-transform: capitalize;
  852. margin-bottom: 10px;
  853. letter-spacing: 1px;
  854. }
  855.  
  856. exp {
  857. background:rgba(255,255,255,.2);
  858. position: relative;
  859. text-align: right;
  860. margin-left: 5px;
  861. padding:0 10px;
  862. width: calc(30% - 20px);
  863. display: inline-block;
  864. }
  865.  
  866. exp:after {
  867. content: "";
  868. width: 17px;
  869. height: 17px;
  870. position: absolute;
  871. top: 0;
  872. right: -10px;
  873. width: 0;
  874. height: 0;
  875. border-top: 9px solid transparent;
  876. border-left: 10px solid rgba(255,255,255,.2);
  877. border-bottom: 10px solid transparent;
  878. }
  879.  
  880. .popinfo{letter-spacing: 1px;}
  881.  
  882. .pright {
  883. display: inline-block;
  884. text-align: left;
  885. vertical-align: top;
  886. width: 40%;
  887. padding-left: 10px;
  888. border-left: 1px solid {color:accent1};
  889. }
  890.  
  891. .pleft {display: inline-block;text-align: right;vertical-align: top;}
  892.  
  893. .tags {
  894. display: block;
  895. background:rgba(255,255,255,.15);
  896. width: 90%;
  897. padding:10px;
  898. margin: 40px auto 0 auto;
  899. font-size: 9px;
  900. font-weight: 900;
  901. letter-spacing: 2px;
  902. {block:PermalinkPage}margin: 40px auto;{/block:PermalinkPage}
  903. }
  904.  
  905. .tags a{margin:5px 10px;}
  906.  
  907. #entrywrap{
  908. position:absolute;
  909. overflow:auto;
  910. padding:0 10%;
  911. top:50px;
  912. width:80%;
  913. height:calc(100% - 250px);
  914. }
  915.  
  916. aside{width:15%;left:10%;position:fixed;}
  917.  
  918. aside .stats:not(:last-of-type){margin-bottom:20px;}
  919.  
  920. aside .stats{background:rgba(255,255,255,.15);padding:10px;}
  921.  
  922. aside .stats b{
  923. padding:2px 5px;
  924. background:rgba(255,255,255,.15);
  925. margin-bottom:2px;
  926. display:inline-block;
  927. }
  928.  
  929. aside .stats li{
  930. width:calc(100% - 30px);
  931. margin:0 auto 5px auto;
  932. padding:2px 5px;
  933. display:block;
  934. position:relative;
  935. background:{color:accent1};
  936. font-size:9px;
  937. text-transform:uppercase;
  938. letter-spacing:2px;
  939. text-align:center;
  940. }
  941.  
  942. .stats li:before{
  943. content:"";
  944. position:absolute;
  945. top:0;
  946. left:-9px;
  947. width: 0;
  948. height: 0;
  949. border-top: 10px solid transparent;
  950. border-right: 9px solid {color:accent1};
  951. border-bottom: 9px solid transparent;
  952. }
  953.  
  954. .stats li:after{
  955. content:"";
  956. position:absolute;
  957. top:0;
  958. right:-9px;
  959. width: 0;
  960. height: 0;
  961. border-top: 10px solid transparent;
  962. border-left: 9px solid {color:accent1};
  963. border-bottom: 9px solid transparent;
  964. }
  965.  
  966. #pagination{text-align:center}
  967.  
  968. .current_page{
  969. display: inline-block;
  970. width: 28px;
  971. padding: 6.5px 0;
  972. font-size: 12px;
  973. border:2px solid {color:accent1};
  974. color: {color:accent1};
  975. vertical-align: top;
  976. font-weight: 900;
  977. border-radius: 50px;
  978. margin: 0 25px;
  979. }
  980.  
  981. #contentwrap{
  982. {block:IndexPage}
  983. {block:ifColumns}float:right;width:80%;{/block:ifColumns}
  984. {/block:IndexPage}
  985. {block:PermalinkPage}
  986. width:60%;
  987. position:absolute;
  988. left:calc(10% + 300px);
  989. {/block:PermalinkPage}
  990. }
  991.  
  992. #content{
  993. background:rgba(255,255,255,.2);
  994. position:relative;
  995. {block:IndexPage}
  996. {block:ifNotColumns}
  997. width:calc({text:index post size}px + 20px);
  998. margin:0 auto;
  999. padding:1px 100px;
  1000. {/block:ifNotColumns}
  1001. {block:ifColumns}float:right;{/block:ifColumns}
  1002. {/block:IndexPage}
  1003. {block:PermalinkPage}
  1004. padding:30px;
  1005. width:80%!important;
  1006. margin:0 auto;
  1007. height:100%!important;
  1008. {/block:PermalinkPage}
  1009. }
  1010.  
  1011. article a{color:{color:accent1};}
  1012.  
  1013. article:not(.popupentry){
  1014. {block:IndexPage}
  1015. width:{text:index post size}px;
  1016. {block:ifColumns}
  1017. margin-top:{text:columnmargins}px;
  1018. margin-right:{text:columnmargins}px;
  1019. margin-bottom:calc({text:columnmargins}px * 2);
  1020. margin-left:{text:columnmargins}px;
  1021. box-sizing: border-box;
  1022. {/block:ifColumns}
  1023. {block:ifNotColumns}margin:100px auto;{/block:ifNotColumns}
  1024. padding:10px;
  1025. background:rgba(255,255,255,.15);
  1026. {/block:IndexPage}
  1027. {block:PermalinkPage}
  1028. margin:10px auto 0 auto;
  1029. width:500px;
  1030. position:relative!important;
  1031. {/block:PermalinkPage}
  1032. position:relative;
  1033. }
  1034.  
  1035. .ent,.photoset{display:block;}
  1036.  
  1037. .ent img{display:block;}
  1038.  
  1039. article .caption{
  1040. {block:IndexPage}
  1041. {block:ifNotshowCaption}display:none;{/block:ifNotshowCaption}
  1042. {block:ifNotColumns}padding:0 5px 10px 5px;{/block:ifNotColumns}
  1043. {block:ifColumns}padding:0 5px;float:left;{/block:ifColumns}
  1044. {/block:IndexPage}
  1045. margin-top:10px;
  1046. background:rgba(255,255,255,.1);
  1047. border:1px solid rgba(255,255,255,.15);
  1048. width:calc(100% - 12px);
  1049. {block:PermalinkPage}padding:5px;{/block:PermalinkPage}
  1050. }
  1051.  
  1052. article:hover .iperma{opacity:1;}
  1053.  
  1054. .iperma{
  1055. position:absolute;
  1056. top:calc(100% + 5px);
  1057. right:0;
  1058. width:calc(100% / 1.5);
  1059. text-align:right;
  1060. letter-spacing:1px;
  1061. text-transform:uppercase;
  1062. font-size:9px;
  1063. font-weight:900;
  1064. opacity:0;
  1065. transition: opacity .4s ease-in-out;
  1066. -o-transition: opacity .4s ease-in-out;
  1067. -moz-transition: opacity .4s ease-in-out;
  1068. -webkit-transition: opacity .4s ease-in-out;
  1069. }
  1070.  
  1071. .iperma a{color:{color:accent1};position:relative;}
  1072.  
  1073. .iperma a:after{
  1074. {block:ifColumns}z-index:-1;{/block:ifColumns}
  1075. content:"";
  1076. width:70%;
  1077. height:1px;
  1078. top:6px;
  1079. left:calc(-70% - 12px);
  1080. background:{color:accent1};
  1081. position:Absolute;
  1082. }
  1083.  
  1084. .iperma a:before{
  1085. content:"";
  1086. position:absolute;
  1087. top:3px;
  1088. left:calc(-70% - 20px);
  1089. width:5px;
  1090. height:5px;
  1091. border:1px solid {color:accent1};
  1092. -ms-transform: rotate(45deg);
  1093. -webkit-transform: rotate(45deg);
  1094. transform: rotate(45deg);
  1095. }
  1096.  
  1097. .quest{
  1098. padding:10px;
  1099. border:1px solid rgba(255,255,255,.2);
  1100. background:rgba(255,255,255,.1);
  1101. min-height:30px;
  1102. }
  1103.  
  1104. .quest img{border-radius:5px;}
  1105.  
  1106. .quest span {float:left;margin:0 3px 3px 0;}
  1107.  
  1108. #albart{
  1109. width:50%;
  1110. height:100%;
  1111. overflow:hidden;
  1112. position:relative;
  1113. margin-left:-3px;
  1114. display:inline-block;
  1115. background:url('http://static.tumblr.com/hczaopr/PE1o7swnc/music.png')no-repeat center;
  1116. }
  1117.  
  1118. .alart{width:100%;}
  1119.  
  1120. #player{
  1121. width:50%;
  1122. height:100%;
  1123. vertical-align:top;
  1124. padding-top: calc((50% / 2) - 10px);
  1125. padding-bottom: calc((50% / 2) - 10px);
  1126. overflow:hidden;
  1127. background:#fff;
  1128. position:relative;
  1129. display:inline-block;
  1130. }
  1131.  
  1132. .play{
  1133. margin:0 auto;
  1134. width:20px;
  1135. height:20px;
  1136. overflow:hidden;
  1137. }
  1138.  
  1139. blockquote{
  1140. padding:10px 0 10px 10px;
  1141. border-left:1px solid {color:accent1};
  1142. position:Relative;
  1143. }
  1144.  
  1145. blockquote:before{
  1146. content:"";
  1147. position:absolute;
  1148. bottom:-7px;
  1149. left:-4px;
  1150. width:5px;
  1151. height:5px;
  1152. border:1px solid {color:accent1};
  1153. -ms-transform: rotate(45deg);
  1154. -webkit-transform: rotate(45deg);
  1155. transform: rotate(45deg);
  1156. }
  1157.  
  1158. blockquote:after{
  1159. content:"";
  1160. position:absolute;
  1161. left:-4px;
  1162. top:-7px;
  1163. width:5px;
  1164. height:5px;
  1165. border:1px solid {color:accent1};
  1166. -ms-transform: rotate(45deg);
  1167. -webkit-transform: rotate(45deg);
  1168. transform: rotate(45deg);
  1169. }
  1170.  
  1171. pre{
  1172. white-space: pre-wrap;
  1173. white-space: -moz-pre-wrap !important;
  1174. white-space: -pre-wrap;
  1175. white-space: -o-pre-wrap;
  1176. word-wrap: break-word;
  1177. background:{color:post bg};
  1178. font:11px/15px courier;
  1179. }
  1180.  
  1181. ul, ol{
  1182. list-style-position:inside;
  1183. list-style:none;
  1184. margin:0px;
  1185. padding:0px;
  1186. }
  1187.  
  1188. ul.chat {margin: 0;padding: 0;}
  1189.  
  1190. .chat li {
  1191. list-style-type: none;
  1192. margin-left: 0px;
  1193. padding: 10px;
  1194. font:7px trebuchet ms;
  1195. letter-spacing:1px;
  1196. text-transform:uppercase;
  1197. }
  1198.  
  1199. .chat li.odd {
  1200. margin-bottom: 3px;
  1201. background-color:{color:chat line 1};
  1202. color: {color:text};
  1203. }
  1204.  
  1205. .chat li.even {
  1206. margin-bottom: 3px;
  1207. background-color:{color:chat line 2};
  1208. color: {color:text};
  1209. }
  1210.  
  1211. li{list-style-type:square;font-family:calibri;}
  1212.  
  1213. iframe#tumblr_controls{position:fixed !important;}
  1214.  
  1215. .videoWrapper {
  1216. position: relative;
  1217. padding-bottom: 56.25%;
  1218. height: 0;
  1219. }
  1220.  
  1221. .videoWrapper iframe{
  1222. position: absolute;
  1223. width: 100%;
  1224. height: 100%;
  1225. left: 0;
  1226. top: 0;
  1227. }
  1228.  
  1229. .fourthirds {padding-bottom: 75%;}
  1230.  
  1231. .tmblr-lightbox{background:rgba(0,0,0,.4);}
  1232.  
  1233. .tmblr-lightbox .vignette{opacity:0;}
  1234. .tmblr-lightbox .lightbox-image{box-shadow:0 0 0 #000;}
  1235.  
  1236. #fade {
  1237. display: none;
  1238. background: url(http://static.tumblr.com/hczaopr/FO0o8ol20/bg.png) no-repeat center center fixed;
  1239. -webkit-background-size: cover;
  1240. -moz-background-size: cover;
  1241. -o-background-size: cover;
  1242. background-size: cover;
  1243. position: fixed;
  1244. left: 0;
  1245. top: 0;
  1246. width: 100%;
  1247. height: 80%;
  1248. opacity: 1;
  1249. z-index: 9999;
  1250. }
  1251.  
  1252. .popup_block{
  1253. display: none;
  1254. position: fixed;
  1255. overflow:auto;
  1256. width:100%;
  1257. height:calc(80% - 130px);
  1258. background:rgba(255,255,255,.15);
  1259. top: calc(50% - 60px);
  1260. left: 50%;
  1261. z-index: 99999;
  1262. border: 20px solid rgba(255,255,255,0);
  1263. box-shadow: 1px 1px rgba(255,255,255,.3),-1px -1px rgba(255,255,255,.3);
  1264. }
  1265.  
  1266. *html #fade {position: absolute;}
  1267.  
  1268. *html .popup_block {position: absolute;}
  1269.  
  1270.  
  1271. .spotify_audio_player {height:100px !important;}
  1272.  
  1273. .controls {
  1274. margin: 30px 0;
  1275. }
  1276.  
  1277. svg {
  1278. width:25px;
  1279. height:25px;
  1280. display:block;
  1281. overflow:visible;
  1282. }
  1283.  
  1284. .controls a {
  1285. position: relative;
  1286. display: inline-block;
  1287. overflow: hidden;
  1288. width: 25px;
  1289. height: 25px;
  1290. border: 3px solid white;
  1291. border-radius: 100%;
  1292. padding: 10px;
  1293. margin: 0 10px;
  1294. }
  1295.  
  1296. .controls .like .liked + svg path {
  1297. fill:#ec5a5a;
  1298. }
  1299.  
  1300. .controls .like .like_button {
  1301. position:relative;
  1302. }
  1303.  
  1304. .controls .like .like_button iframe {
  1305. position:absolute;
  1306. top:0;
  1307. left:0;
  1308. bottom:0;
  1309. right:0;
  1310. z-index:2;
  1311. opacity:0;
  1312. }
  1313. </style>
  1314.  
  1315.  
  1316. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1317. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1318. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1319. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  1320.  
  1321. <script>
  1322. $(document).ready(function() {
  1323. var $item = $('article:not(.popupentry)');
  1324. $item.on({
  1325. mouseenter: function() {
  1326. $item.not(this).animate({opacity: .3
  1327. }, 400);
  1328. },
  1329. mouseleave: function() {
  1330. $item.animate({
  1331. opacity: 1
  1332. }, 400);
  1333. }
  1334. });
  1335.  
  1336. $('.photo-slideshow').pxuPhotoset({
  1337. lightbox: true,
  1338. rounded: false,
  1339. gutter: '0px',
  1340. highRes: 'true',
  1341. photoset: '.photo-slideshow',
  1342. photoWrap: '.photo-data',
  1343. photo: '.pxu-photo'
  1344. });
  1345.  
  1346. {block:IndexPage}
  1347. {block:ifColumns}
  1348. var $container = $('#content');
  1349. $container.imagesLoaded(function() {
  1350. $container.masonry({
  1351. isFitWidth: true,
  1352. itemSelector: 'article'
  1353. });
  1354. });
  1355. {/block:ifColumns}
  1356. {/block:IndexPage}
  1357. });
  1358. </script>
  1359.  
  1360.  
  1361.  
  1362. </head>
  1363. <body>
  1364.  
  1365.  
  1366.  
  1367. <div class="nav-toggle"><div class="menu menumask"></div></div>
  1368.  
  1369. <nav class="main-nav">
  1370.  
  1371. <div id="desc">
  1372.  
  1373. <div class="dinfo">
  1374. <div class="portrait">
  1375. <div class="por">
  1376. <img src="http://static.tumblr.com/hczaopr/U2Go8oci5/prompto_argentum.png">
  1377. </div>
  1378. </div>
  1379. <span id="dname">Prompto</span>
  1380. <ul class="dstats">
  1381. <li>ATT</li>
  1382. <li>188</li>
  1383. <li>DEF</li>
  1384. <li>100</li>
  1385. <li>LV</li>
  1386. <li class="dlvl">10</li>
  1387. </ul>
  1388. </div>
  1389.  
  1390.  
  1391. <spans>
  1392. <div class="dlinks">
  1393. <li><t>tier 9</t><a href="">link zero</a></li>
  1394. <li><t>tier 10</t><a href="">link one</a></li>
  1395. <li><t>tier 11</t><a href="">link two</a></li>
  1396. <li><t>tier 12</t><a href="">link three</a></li>
  1397. <li><t>tier 13</t><a href="">link four</a></li>
  1398. <li><t>tier 14</t><a href="">link five</a></li>
  1399. </div>
  1400.  
  1401.  
  1402. <div id="about">
  1403. <span>
  1404. <h1>about the blogger</h1>
  1405.  
  1406. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius vulputate dapibus. Cras vitae tristique lorem. Maecenas volutpat tellus sit amet turpis semper, sed sagittis sem suscipit. Vivamus nec ornare ante. Aliquam nunc ante, vehicula elementum metus ac, suscipit viverra purus.</p>
  1407. <h2>about the blogger</h2>
  1408. <p>Donec ante justo, ullamcorper sed consectetur eget, ornare ut ligula. Vivamus iaculis, dui a fringilla elementum, diam magna tempus lorem, nec lobortis leo ex eu risus. Nam non congue ligula, quis efficitur nulla. Nulla eget augue magna. Aliquam sit amet velit non magna aliquet mattis eget nec nisi. Vivamus dui dolor, efficitur id euismod eget, sodales non diam. Donec et libero id dui bibendum consectetur.</p>
  1409.  
  1410. <p>Aenean eget quam non libero sagittis tristique vitae ut mi. Etiam commodo nisl eget iaculis rhoncus. Mauris auctor, enim et euismod commodo, leo ligula mattis orci, non viverra dui quam nec nulla. Sed ligula arcu, mattis et vehicula ut, condimentum id magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur aliquam nulla, a placerat felis imperdiet non. Donec blandit ac est id fringilla. Nunc risus neque, ultricies nec dolor suscipit, convallis pretium enim. Proin maximus mauris ac nulla vehicula fringilla.</p>
  1411. </spans>
  1412. </div>
  1413.  
  1414.  
  1415.  
  1416.  
  1417. <div class="dlinks">
  1418. <li><a href="">link six</a></li>
  1419. <li><a href="">link seven</a></li>
  1420. <li><a href="">link eight</a></li>
  1421. <li><a href="">link nine</a></li>
  1422. <li><a href="">link ten</a></li>
  1423. <li><a href="">link eleven</a></li>
  1424. <li><a href="">link twelve</a></li>
  1425. <li><a href="">link thirteen</a></li>
  1426. <li><a href="">link fourteen</a></li>
  1427. <li><a href="">link fifteen</a></li>
  1428. </div>
  1429.  
  1430. </span>
  1431. </div>
  1432. </nav>
  1433. <script src="http://static.tumblr.com/1f1tzta/Elvnrd4vf/index.js"></script>
  1434.  
  1435.  
  1436.  
  1437.  
  1438.  
  1439.  
  1440.  
  1441.  
  1442.  
  1443.  
  1444.  
  1445. <footer>
  1446. <div id="weap">
  1447. <div id="hubbed2">
  1448. <div class="attwrap">
  1449. <div class="hattwrap"><div class="hattwraplg"></div></div>
  1450. <a href="/"><span class="hattname">warp</span></a>
  1451. </div>
  1452.  
  1453.  
  1454. <div class="attwrap">
  1455. <div class="hattwrap"><div class="hattwraplg"></div></div>
  1456. <a href="/ask"><span class="hattname">attack</span></a>
  1457. </div>
  1458.  
  1459.  
  1460. <div class="attwrap">
  1461. <div class="hattwrap"><div class="hattwraplg"></div></div>
  1462. <a href="/archive"><span class="hattname">linkform</span></a>
  1463. </div>
  1464. </div>
  1465. </div>
  1466.  
  1467.  
  1468.  
  1469.  
  1470.  
  1471. <div id="weapon">
  1472. <img src="http://static.tumblr.com/hczaopr/qlio8l6yb/weapons.png"usemap="ffweapons">
  1473.  
  1474. <map name="ffweapons" width="259" height="104" >
  1475. <area class="weaplinks" alt="" title="home" href="/" shape="rect" coords="2,0,30,81">
  1476. <area class="weaplinks" alt="" title="inbox" href="/msg" shape="rect" coords="39,2,69,86">
  1477. <area class="weaplinks" alt="" title="archive" href="/archive" shape="rect" coords="81,36,106,88">
  1478. </map>
  1479. </div>
  1480.  
  1481.  
  1482.  
  1483.  
  1484. <div id="hud">
  1485. <div id="hubbed">
  1486. <div class="hwrap">
  1487. <span class="hname">noctis</span>
  1488. <span class="hnum">2030</span>
  1489. <div class="hwraplg"><span></span></div>
  1490. <div class="hwrapsm"><span></span></div>
  1491. </div>
  1492.  
  1493.  
  1494. <div class="hwrap">
  1495. <span class="hname">promto</span>
  1496. <span class="hnum">1030</span>
  1497. <div class="hwraplg"><span></span></div>
  1498. </div>
  1499.  
  1500.  
  1501. <div class="hwrap">
  1502. <span class="hname">Gladiolus</span>
  1503. <span class="hnum">2000</span>
  1504. <div class="hwraplg"><span></span></div>
  1505. </div>
  1506. </div>
  1507. </div>
  1508. </footer>
  1509.  
  1510.  
  1511.  
  1512.  
  1513. {block:Posts}
  1514. <div id="{PostID}" class="popup_block">
  1515. <div id="popupcontent">
  1516. <article class="popupentry">
  1517.  
  1518. <div class="popupentries"></div>
  1519.  
  1520.  
  1521. {block:Text}
  1522. {block:Title}
  1523. <h1><a href="{permalink}">{Title}</a></h1>{/block:Title}
  1524. {Body}
  1525. {/block:Text}
  1526.  
  1527.  
  1528.  
  1529.  
  1530. {block:Link}
  1531. <h1><a href="{URL}">{Name}</a></h1>
  1532. {block:Description}{Description}{/block:Description}
  1533. {block:Link}
  1534.  
  1535.  
  1536.  
  1537. {block:Photo}
  1538. <div class="ent"><img src="{PhotoURL-500}"></div>
  1539. {/block:Photo}
  1540.  
  1541.  
  1542.  
  1543. {block:Photoset}
  1544. <div class="ent">{Photoset-500}</div>
  1545. {/block:Photoset}
  1546.  
  1547.  
  1548. {block:Chat}
  1549. <ul class="chat">
  1550. {block:Lines}
  1551. <li class="{Alt} user_{UserNumber}">
  1552. {block:Label}<span class="label">{Label}</span>{/block:Label}
  1553. {Line}
  1554. </li>
  1555. {/block:Lines}
  1556. </ul>
  1557.  
  1558. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1559. {/block:Chat}
  1560.  
  1561.  
  1562.  
  1563. {block:Audio}
  1564. <div>
  1565. <div class="ent">
  1566. {block:AlbumArt}<div id="albart"><div class="alart"><img src="{AlbumArtURL}"></div></div>{/block:AlbumArt}
  1567.  
  1568. <div id="player"><div class="play">{AudioPlayer}</div></div>
  1569. </div>
  1570. </div>
  1571. {/block:Audio}
  1572.  
  1573.  
  1574.  
  1575. {block:Quote}
  1576. <h2>{Quote}</h2>
  1577. {block:Source}<div class="source">- {Source}</div>{/block:Source}
  1578. {/block:Quote}
  1579.  
  1580.  
  1581.  
  1582. {block:Answer}
  1583. <div>
  1584. <div class="ent">
  1585. <a href="{permalink}"><h1>{Asker}</h1></a>
  1586. <div class="quest">
  1587. <span><img src="{AskerPortraitURL-30}"></span>
  1588. {Question}
  1589. </div>
  1590. {Answer}
  1591. </div>
  1592. </div>
  1593. {/block:Answer}
  1594.  
  1595.  
  1596.  
  1597.  
  1598. {block:Video}
  1599. <div class="videoWrapper {TagsAsClasses}">{VideoEmbed-500}</div>
  1600. {/block:Video}
  1601.  
  1602.  
  1603. <div class="popwrap">
  1604. {block:Caption}
  1605. <div id="cap">
  1606. {Caption}</div>
  1607. {/block:Caption}
  1608.  
  1609. <div class="perma">
  1610. <span class="exp">Exp total <exp>{NoteCount}</exp></span>
  1611. <div class="popinfo">
  1612. <div class="pleft">
  1613. {block:Date}
  1614. Time <br>
  1615. Damage sustained<br>
  1616. Originated
  1617. </div>
  1618.  
  1619. <div class="pright">
  1620. <span>{ShortDayOfWeek} {DayOfMonthWithZero} — {12Hour}:{Minutes}</span><br>
  1621. <span>{TimeAgo}</span><br>
  1622. {/block:Date}
  1623.  
  1624. {block:RebloggedFrom}
  1625. <span><a href="{ReblogParentURL}">{ReblogParentName}</a><br><a href="{ReblogRootURL}">{ReblogRootName}</a></span>
  1626. {/block:RebloggedFrom}
  1627. </div>
  1628.  
  1629. <div class="controls">
  1630. <a href="{ReblogURL}" target="_blank" class="reblog"><img src="http://static.tumblr.com/hczaopr/0mloi06n5/reblog.png"></a>
  1631.  
  1632. <a href="#" class="like">{LikeButton}
  1633. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 481.567 481.567">
  1634. <g>
  1635. <g>
  1636. <path d="M424.7,55.841c-19.8-15.2-43.3-25-68.1-28.2c-42.6-5.6-84.3,7.4-115.8,35.6c-31.5-28.5-73.4-41.5-116.2-35.8 c-24.8,3.3-48.4,13.2-68.3,28.6c-35.8,27.9-56.4,69.6-56.3,114.6c0,38.5,15.1,74.8,42.4,102.1l172.9,172.9 c6.6,6.6,15.2,9.8,23.8,9.8c8.6,0,17.2-3.3,23.8-9.8l26.8-26.8c7-7,7-18.4,0-25.5c-7-7-18.4-7-25.5,0l-25.1,25.1l-171.2-171.3 c-20.5-20.5-31.8-47.7-31.9-76.7c0-33.7,15.4-65.1,42.4-86.1c14.8-11.5,32.4-18.9,50.9-21.3c34.2-4.5,67.6,6.7,91.7,30.9 l19.8,19.8l19.6-19.6c24-24.1,57.4-35.3,91.5-30.8c18.5,2.4,36,9.7,50.8,21c28.2,21.7,43.8,54.4,42.8,89.6 c-0.8,27.7-12.9,54.6-33.9,75.7l-91.2,91.1c-7,7-7,18.4,0,25.5c7,7,18.4,7,25.5,0l91.2-91.2c27.6-27.6,43.4-63.1,44.4-100.1 C482.9,128.041,462.2,84.641,424.7,55.841z" fill="#FFFFFF"/>
  1637. </g>
  1638. </g>
  1639. </svg>
  1640. </a>
  1641. </div>
  1642.  
  1643. </div>
  1644.  
  1645. <div class="tags">
  1646. {block:HasTags}
  1647. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1648. {/block:HasTags}
  1649.  
  1650. </div>
  1651. </div>
  1652. </div>
  1653. </div>
  1654. </div>
  1655. </article>
  1656. {/block:Posts}
  1657.  
  1658.  
  1659.  
  1660.  
  1661.  
  1662.  
  1663.  
  1664.  
  1665.  
  1666.  
  1667.  
  1668.  
  1669.  
  1670.  
  1671.  
  1672.  
  1673.  
  1674.  
  1675.  
  1676.  
  1677.  
  1678.  
  1679.  
  1680.  
  1681.  
  1682.  
  1683.  
  1684.  
  1685.  
  1686.  
  1687.  
  1688. <section id="entrywrap">
  1689.  
  1690. <aside>
  1691. <div class="stats">
  1692. <li><a href="/">Retreat</a></li>
  1693. <li><a href="/ask">Inquire</a></li>
  1694. <li><a href="/archive">Chronicles</a></li>
  1695. <li><a href="http://ninpen.tumblr.com/">Originator</a></li>
  1696. </div>
  1697.  
  1698. <div class="stats">
  1699. <b>Name</b> Noct<br>
  1700. <b>Age</b> 20<br>
  1701. <b>Location</b> Leide<br>
  1702. <b>Personality</b> shy little fuck but i try to act cool<br>
  1703. <b>Status</b> Still alive, but wanted dead
  1704. </div>
  1705.  
  1706. <div class="stats">
  1707. <b>Visitors</b> 2/595,463<br>
  1708. <b>Currently reading</b> Little red ridding hood<br>
  1709. <b>Currently watching</b> stars
  1710. </div>
  1711.  
  1712. {block:Pagination}
  1713. <div id="pagination">
  1714. {block:PreviousPage}
  1715. <a href="{PreviousPage}"><img src="http://static.tumblr.com/hczaopr/DXio8vn2z/left.png"></a>
  1716. {/block:PreviousPage}
  1717.  
  1718. {block:JumpPagination length="1"}{block:CurrentPage}
  1719. <span class="current_page">{PageNumber}</span>
  1720. {/block:CurrentPage}{block:JumpPage}
  1721. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1722. {/block:JumpPage}{/block:JumpPagination}
  1723.  
  1724. {block:NextPage}
  1725. <a href="{NextPage}"><img src="http://static.tumblr.com/hczaopr/e2co8vn33/right.png"></a>
  1726. {/block:NextPage}
  1727. </div>
  1728. {/block:Pagination}
  1729. </aside>
  1730.  
  1731.  
  1732.  
  1733. <div id="contentwrap">
  1734. <div id="content">
  1735.  
  1736. {block:Posts}
  1737. <article>
  1738.  
  1739. {block:IndexPage}
  1740. <div class="iperma">
  1741. <a href="#?w=933" rel="{PostID}" class="poplight">
  1742. {block:Date}{MonthNumberWithZero}{DayOfMonthWithZero} — {/block:Date}{NoteCount}
  1743. </a> mp
  1744. </div>
  1745. {/block:IndexPage}
  1746.  
  1747.  
  1748.  
  1749.  
  1750. {block:Text}
  1751. <div>
  1752. <div class="ent">
  1753. {block:Title}
  1754. <h1><a href="{permalink}">{Title}</a></h1>{/block:Title}
  1755. {Body}
  1756. </div>
  1757. </div>
  1758. {/block:Text}
  1759.  
  1760.  
  1761.  
  1762.  
  1763. {block:Link}
  1764. <div>
  1765. <div class="ent">
  1766. <h1><a href="{URL}">{Name}</a></h1>
  1767. {block:Description}{Description}{/block:Description}
  1768. </div>
  1769. </div>
  1770. {block:Link}
  1771.  
  1772.  
  1773.  
  1774.  
  1775. {block:Photo}
  1776. {block:IndexPage}
  1777. <div>
  1778. <div class="ent"><a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1779. <img src="{PhotoURL-HighRes}">
  1780. </a></div>
  1781. </div>
  1782. {/block:IndexPage}
  1783. {block:PermalinkPage}<img src="{PhotoURL-500}">{/block:PermalinkPage}
  1784. {/block:Photo}
  1785.  
  1786.  
  1787.  
  1788.  
  1789.  
  1790. {block:Photoset}
  1791. {block:IndexPage}
  1792. <div>
  1793. <div class="ent">
  1794. <a href="#" onclick="Tumblr.Lightbox.init([/*{block:Photos}, /**/ { width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }{/block:Photos}]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1795. {block:Photos}<img src="{PhotoURL-HighRes}"><!--{/block:Photos}-->
  1796. </a>
  1797. </div>
  1798. </div>
  1799. {/block:IndexPage}
  1800. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  1801. {/block:Photoset}
  1802.  
  1803.  
  1804.  
  1805. {block:Chat}
  1806. <div>
  1807. <div class="ent">
  1808. <ul class="chat">
  1809. {block:Lines}
  1810. <li class="{Alt} user_{UserNumber}">
  1811. {block:Label}<span class="label">{Label}</span>{/block:Label}
  1812. {Line}
  1813. </li>
  1814. {/block:Lines}
  1815. </ul>
  1816. {block:Title}
  1817. <div class="titled">
  1818. <h1><a href="{Permalink}">{Title}</a></h1>
  1819. </div>
  1820. {/block:Title}
  1821. </div>
  1822. </div>
  1823. {/block:Chat}
  1824.  
  1825.  
  1826.  
  1827.  
  1828. {block:Audio}
  1829. <div>
  1830. <div class="ent">
  1831. {block:AlbumArt}<div id="albart"><div class="alart"><img src="{AlbumArtURL}"></div></div>{/block:AlbumArt}
  1832.  
  1833. <div id="player"><div class="play">{AudioPlayer}</div></div>
  1834. </div>
  1835. </div>
  1836. {/block:Audio}
  1837.  
  1838.  
  1839.  
  1840.  
  1841. {block:Quote}
  1842. <div>
  1843. <div class="ent">
  1844. <h2>{Quote}</h2>
  1845. {block:Source}<div class="source">- {Source}</div>{/block:Source}
  1846. </div>
  1847. </div>
  1848. {/block:Quote}
  1849.  
  1850.  
  1851.  
  1852.  
  1853.  
  1854. {block:Answer}
  1855. <div>
  1856. <div class="ent">
  1857. <a href="{permalink}"><h1>{Asker}</h1></a>
  1858. <div class="quest">
  1859. <span><img src="{AskerPortraitURL-30}"></span>
  1860. {Question}
  1861. </div>
  1862. {Answer}
  1863. </div>
  1864. </div>
  1865. {/block:Answer}
  1866.  
  1867.  
  1868.  
  1869.  
  1870. {block:Video}
  1871. <div>
  1872. <div class="ent">
  1873. <div class="videoWrapper {TagsAsClasses}">{VideoEmbed-500}</div>
  1874. </div>
  1875. </div>
  1876. {/block:Video}
  1877.  
  1878.  
  1879. {block:Caption}
  1880. <div class="caption">{Caption}</div>
  1881. {/block:Caption}
  1882.  
  1883.  
  1884.  
  1885.  
  1886.  
  1887. {block:ContentSource}<!-- {SourceURL}{block:Sourcemenu}<img src="{BlackmenuURL}"
  1888. width="{menuWidth}" height="{menuHeight}" alt="{SourceTitle}" />{/block:Sourcemenu}{block:NoSourcemenu}{SourceLink}{/block:NoSourcemenu} -->{block:NoSourcemenu}{/block:NoSourcemenu}{/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  1889.  
  1890.  
  1891. {block:PermalinkPage}
  1892. <div class="perma">
  1893. <span class="exp">Exp total <exp>{NoteCount}</exp></span>
  1894. <div class="popinfo">
  1895. <div class="pleft">
  1896. {block:Date}
  1897. Time <br>
  1898. Damage sustained<br>
  1899. Originated
  1900. </div>
  1901.  
  1902. <div class="pright">
  1903. <span>{ShortDayOfWeek} {DayOfMonthWithZero} — {12Hour}:{Minutes}</span><br>
  1904. <span>{TimeAgo}</span><br>
  1905. {/block:Date}
  1906.  
  1907. {block:RebloggedFrom}
  1908. <span><a href="{ReblogParentURL}">{ReblogParentName}</a><br><a href="{ReblogRootURL}">{ReblogRootName}</a></span>
  1909. {/block:RebloggedFrom}
  1910. </div>
  1911. </div>
  1912.  
  1913. <div class="controls">
  1914. <a href="{ReblogURL}" target="_blank" class="reblog"><img src="http://static.tumblr.com/hczaopr/0mloi06n5/reblog.png"></a>
  1915.  
  1916. <a href="#" class="like">{LikeButton}
  1917. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 481.567 481.567">
  1918. <g>
  1919. <g>
  1920. <path d="M424.7,55.841c-19.8-15.2-43.3-25-68.1-28.2c-42.6-5.6-84.3,7.4-115.8,35.6c-31.5-28.5-73.4-41.5-116.2-35.8 c-24.8,3.3-48.4,13.2-68.3,28.6c-35.8,27.9-56.4,69.6-56.3,114.6c0,38.5,15.1,74.8,42.4,102.1l172.9,172.9 c6.6,6.6,15.2,9.8,23.8,9.8c8.6,0,17.2-3.3,23.8-9.8l26.8-26.8c7-7,7-18.4,0-25.5c-7-7-18.4-7-25.5,0l-25.1,25.1l-171.2-171.3 c-20.5-20.5-31.8-47.7-31.9-76.7c0-33.7,15.4-65.1,42.4-86.1c14.8-11.5,32.4-18.9,50.9-21.3c34.2-4.5,67.6,6.7,91.7,30.9 l19.8,19.8l19.6-19.6c24-24.1,57.4-35.3,91.5-30.8c18.5,2.4,36,9.7,50.8,21c28.2,21.7,43.8,54.4,42.8,89.6 c-0.8,27.7-12.9,54.6-33.9,75.7l-91.2,91.1c-7,7-7,18.4,0,25.5c7,7,18.4,7,25.5,0l91.2-91.2c27.6-27.6,43.4-63.1,44.4-100.1 C482.9,128.041,462.2,84.641,424.7,55.841z" fill="#FFFFFF"/>
  1921. </g>
  1922. </g>
  1923. </svg>
  1924. </a>
  1925. </div>
  1926.  
  1927. {block:HasTags}
  1928. <div class="tags">
  1929. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1930. </div>
  1931. {/block:HasTags}
  1932. </div>
  1933. {/block:PermalinkPage}
  1934. </article>
  1935.  
  1936.  
  1937. {/block:Posts}
  1938. <!--POSTS SECTION ENDS-->
  1939.  
  1940.  
  1941.  
  1942. </div>
  1943. </div>
  1944. </section>
  1945.  
  1946.  
  1947.  
  1948. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1949. <script>
  1950. // minimal soundcloud player © shythemes.tumblr
  1951. $(document).ready(function(){
  1952. var color = '{color:accent1}'; // color of play button (hex)
  1953. $('.soundcloud_audio_player').each(function(){
  1954. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=false&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 116, width: '100%' });
  1955. });
  1956. });
  1957. </script>
  1958.  
  1959.  
  1960.  
  1961. <script>
  1962. $(document).ready(function() {
  1963. $('a.poplight[href^=#]').click(function() {
  1964. var popID = $(this).attr('rel');
  1965. var popURL = $(this).attr('href');
  1966. var query = popURL.split('?');
  1967. var dim = query[1].split('&');
  1968. var popWidth = dim[0].split('=')[1];
  1969. $('#' + popID).fadeIn().css({
  1970. 'width': Number(popWidth)
  1971. }).prepend('');
  1972. var popMargTop = ($('#' + popID).height() + 80) / 2;
  1973. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  1974. $('#' + popID).css({
  1975. 'margin-top': -popMargTop,
  1976. 'margin-left': -popMargLeft
  1977. });
  1978. $('body').append('<div id="fade"></div>');
  1979. $('#fade').css({
  1980. 'filter': 'alpha(opacity=80)'
  1981. }).fadeIn();
  1982. return false;
  1983. });
  1984. $('#fade').live('click', function() {
  1985. $('#fade , .popup_block').fadeOut(function() {
  1986. $('#fade').remove();
  1987. });
  1988. return false;
  1989. });
  1990. });
  1991. </script>
  1992.  
  1993.  
  1994. </body>
  1995. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!