Advertisement
tsiappoworks

u r my shunsine

Mar 8th, 2017
103
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.41 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  4.  
  5.  
  6. <!----------------------POPUP_BLOCK SCRIPT BELOW-------------------------->
  7. <script type="text/javascript"
  8. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  9. <script>
  10. $(document).ready(function() {
  11. //
  12. $('a.poplight[href^=#]').click(function() {
  13. var popID = $(this).attr('rel'); //Get Popup Name
  14. var popURL = $(this).attr('href'); //Get Popup href to define size
  15. var query= popURL.split('?');
  16. var dim= query[1].split('&');
  17. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  18. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  19. var popMargTop = ($('#' + popID).height() + 80) / 2;
  20. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  21. //Apply Margin to Popup
  22. $('#' + popID).css({
  23. 'margin-top' : -popMargTop,
  24. 'margin-left' : -popMargLeft
  25. });
  26. $('body').append('<div id="fade"></div>');
  27. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  28. return false;
  29. });
  30. $('a.close, #fade').live('click', function() {
  31. $('#fade , .popup_block, .popup_block2').fadeOut(function() {
  32. $('#fade, a.close').remove(); //fade them both out
  33. });
  34. return false;
  35. });
  36. });
  37. </script>
  38. <!-------------------- VERSES SCRIPT BELOW -------------------->
  39. <script src="http://static.tumblr.com/dxh5xq2/v6Gn8ju1e/tabs.js"></script>
  40.  
  41. <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  42. <link rel="shortcut icon" href="" />
  43. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  44. <link rel="shortcut icon" href="{Favicon}" />
  45.  
  46. <meta name="color:background" content="#f3e1e4">
  47. <meta name="color:Accent" content="#9a9a9a" />
  48. <meta name="color:Accent2" content="#e54c84" />
  49. <meta name="color:Accent3" content="#e57198" />
  50. <meta name="color:body font" content="#897077" />
  51.  
  52. <script type="text/javascript" src="http://static.tumblr.com/86jccts/wpsmuemne/hoverqtip.js"></script>
  53.  
  54. <style type="text/css">
  55. /*---------------------BODY--------------------*/
  56. ::-webkit-scrollbar-thumb{
  57. background-color:{color:accent2};
  58. height:auto;
  59. }
  60.  
  61. ::-webkit-scrollbar {
  62. background-color:transparent;
  63. height:auto;
  64. width:4px;
  65. }
  66.  
  67. ::-webkit-scrollbar:horizontal {
  68. background-color:transparent;
  69. height:4px;
  70. width:auto;}
  71.  
  72.  
  73. hr {
  74. border: 0;
  75. height: 1px;
  76. background-image: linear-gradient(to right, rgba(185, 210, 220, 0), rgba(48, 101, 120, 0.75), rgba(185, 210, 220, 0));
  77. }
  78.  
  79. h1 {
  80. font-weight:normal;
  81. font-size:22px;
  82. text-align:center;
  83. font-style:normal;
  84. line-height:100%;
  85. letter-spacing:1px;
  86. text-transform:normal;
  87. color:{color:accent2};
  88. font-family: 'Oswald', sans-serif;
  89. }
  90.  
  91. h2 {
  92. font-size:26px;
  93. text-align:center;
  94. line-height:100%;
  95. letter-spacing:-0.5px;
  96. color:{color:accent2};
  97. font-weight:bold;
  98. padding:5px;
  99. font-family: 'Oswald', sans-serif;
  100. }
  101.  
  102. body {
  103. margin: 0;
  104. color:{font:body font};
  105. background: url(http://static.tumblr.com/mwciju1/on0omixkx/shunbg.png) no-repeat top left fixed;
  106. background-color:{color:background};
  107. font-size:11px;
  108. line-height:120%;
  109. word-wrap: break-word;
  110. font-family:Calibri, helvetica, arial, sans-serif;
  111. }
  112.  
  113. pre {
  114. white-space: pre-wrap;
  115. white-space: -moz-pre-wrap;
  116. white-space: -pre-wrap;
  117. white-space: -o-pre-wrap;
  118. word-wrap: break-word;
  119. }
  120.  
  121. small,sub,sup {
  122. font-size:12px;
  123. font-family: calibri,helvetica,arial,sans-serif;
  124. }
  125.  
  126. b,strong {
  127. color:{color:accent2};
  128. font-size:15px;
  129. font-family: 'Oswald', sans-serif;
  130. }
  131.  
  132. em,i {
  133. color:{color:accent2};
  134. font-family: 'Oswald', sans-serif;
  135. }
  136.  
  137. s,strike {
  138. color:{color:accent2};
  139. }
  140.  
  141. u,underline {
  142. color:{color:accent2};
  143. }
  144.  
  145. a {
  146. text-decoration:none;
  147. outline:none;
  148. -moz-outline-style:none;
  149. color:{color:accent2};
  150. -moz-transition-duration:0.5s;
  151. -webkit-transition-duration:0.5s;
  152. -o-transition-duration:0.5s;
  153. }
  154.  
  155. a:hover {
  156. outline:none;
  157. -moz-outline-style:none;
  158. color:#FFFFFF;
  159. }
  160.  
  161. img{border:0; max-width:100%;max-height:auto;}
  162.  
  163. .fancytitle {
  164. font-size:11px;
  165. font-family: 'Oswald', sans-serif;
  166. padding:2px 4px;
  167. border:2px solid {color:page bg};
  168. text-align:center;
  169. margin-bottom:5px;
  170. background-image:url('http://static.tumblr.com/mwciju1/99zomiz1e/selectionpink.png');
  171. background-repeat:no-repeat;
  172. background-position: top center;
  173. color:#f9fcfc;
  174. }
  175.  
  176.  
  177. /*------------------- MAIN CONTENT STUFF ------------------*/
  178.  
  179. #title{font-size:20px;line-height:25px;}
  180.  
  181. #content {
  182. position:absolute;
  183. margin-top:20px;
  184. left:730px;
  185. z-index:990;
  186. width:550px;
  187. padding:0px;
  188. overflow-y:auto;
  189. color:{color:Body Font};
  190. padding:10px 0px;
  191. }
  192.  
  193. blockquote {
  194. padding:2px 5px 2px 10px;
  195. margin:5px;
  196. border-left:2px solid {color:body font};
  197. -moz-border-radius: 15px;
  198. -webkit-border-radius: 15px;
  199. }
  200.  
  201. blockquote img {
  202. max-width:100%;}
  203.  
  204. img{
  205. border:0px;
  206. max-width:100%;
  207. }
  208.  
  209. /*----------------------------- POSTS ------------------------*/
  210. #content #posts {
  211. width:500px;
  212. background-color:#fff;
  213. margin:0px auto 25px;
  214. padding: 10px 10px 6px;
  215. border: 15px solid transparent;
  216. -webkit-border-image: url() 16 round; /* Safari 3.1-5 */
  217. -o-border-image: url() 16 round; /* Opera 11-12.1 */
  218. border-image: url(http://static.tumblr.com/mwciju1/4Nyomf85n/smolwhitelace_sq_smol.png) 16 round;
  219. -moz-background-clip: padding; /* Firefox 3.6 */
  220. -webkit-background-clip: padding; /* Safari 4? Chrome 6? */
  221. background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
  222. }
  223.  
  224. #content #posts .title {
  225. font-size:22px;
  226. line-height:25px;
  227. font-family: 'Oswald', sans-serif;
  228. letter-spacing:1px;
  229. }
  230.  
  231. #content #posts .text {
  232. font-family: Calibri, helvetica, arial, sans-serif;
  233. font-size:12px;
  234. font-weight:300;
  235. line-height:140%;
  236. }
  237.  
  238. .text ul li{
  239. list-style-type:circle;
  240. }
  241.  
  242. .asker{
  243. position:relative;
  244. float:right;
  245. margin-top:-6px;
  246. padding:2px 3px;
  247. text-transform:uppercase;
  248. }
  249.  
  250. .asker a{
  251. width:100%;
  252. -moz-border-radius: 15px;
  253. -webkit-border-radius: 15px;
  254. background-color:{color:body font};
  255. color:white;
  256. text-align:center;
  257. font-size:14px;
  258. }
  259.  
  260. /*-------------AUDIO POSTS------------*/
  261.  
  262. #audioplayer {
  263. width:30px;
  264. height:30px;
  265. overflow:hidden;
  266. position:absolute;
  267. margin-left:40px;
  268. margin-top:45px;
  269. margin-bottom:45px;
  270. opacity: 0.8;
  271. filter:alpha(opacity=80);
  272. -moz-opacity: 0.8;
  273. -khtml-opacity: 0.8;
  274. }
  275.  
  276. #albumart { float:left; margin:0px 7px;}
  277.  
  278. /*--------------------PERMALINK AND OTHER DETAILS---------------------*/
  279. #details {
  280. font-family: Calibri, helvetica, arial, sans-serif;
  281. text-align:center;
  282. width:500px;
  283. text-transform:uppercase;
  284. font-size:10px;
  285. font-style:none;
  286. margin-left:auto;
  287. margin-right:auto;
  288. background-color:#fff;
  289. color:{color:accent2};
  290. padding:2px 2px;
  291. }
  292.  
  293. #details a{
  294. text-decoration:none;
  295. color:{color:accent};
  296. -webkit-transition: all 0.3s ease-in-out;
  297. -moz-transition: all 0.3s ease-in-out;
  298. -ms-transition: all 0.3s ease-in-out;
  299. -transition: all 0.3s ease-in-out;
  300. }
  301.  
  302. #details a:hover{color: {color:accent3};}
  303.  
  304. #notes {
  305. font-family: Calibri, helvetica, arial, sans-serif;
  306. font-size:11px;
  307. color:{color:body font};
  308. }
  309.  
  310. #notes a{
  311. text-decoration:none;
  312. color:{color:accent3};
  313. }
  314.  
  315. /*------------------------CUSTOM TOOLTIP--------------------------*/
  316. div#qTip {
  317. background-image:url('http://static.tumblr.com/mwciju1/99zomiz1e/selectionpink.png');
  318. border:1px solid white;
  319. padding: 5px;
  320. display: none;
  321. text-align: center;
  322. position: absolute;
  323. font-size:13px;
  324. line-height:10px;
  325. z-index: 9999999;
  326. color:#fff;
  327. letter-spacing: 1px;
  328. font-family: 'Oswald', sans-serif;
  329. }
  330.  
  331.  
  332. /*---------------WHOA, NELLY IT'S THE POP-UP MENU!---------------*/
  333. #box1{
  334. text-align:center;
  335. color:{color:body font};
  336. font-family: Calibri, helvetica, arial, sans-serif;
  337. font-size:12px;
  338. }
  339.  
  340. .popup_block{
  341. display:none;
  342. background:#fff;
  343. padding:20px;
  344. float:left;
  345. max-height:400px;
  346. position:fixed;
  347. top:50%;left:50%;
  348. z-index: 99999;
  349. }
  350.  
  351. *html #fade {position: absolute;}
  352. *html .popup_block {position: absolute;}
  353. #fade {
  354. display:none;
  355. position:fixed;
  356. left:0px;
  357. top:0px;
  358. width:100%;
  359. height:100%;
  360. z-index:
  361. 9999;
  362. background-image:url('http://static.tumblr.com/mwciju1/Jdaomiz0k/asanoha-400px_pink.png');
  363. }
  364.  
  365. /* ---------------------------- UPDATES ------------------------------*/
  366.  
  367. #updates {
  368. font-size:11px;
  369. font-family:century gothic, arial;
  370. color:#236f68;
  371. text-align:center;
  372. height:180px;
  373. width:240px;
  374. padding:10px;
  375. left:570px;
  376. top:290px;
  377. z-index:10;
  378. position:fixed;
  379. overflow-x:hidden;
  380. overflow-y:auto;
  381. background-color:rgba(255,255,255,0);
  382. text-shadow:1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
  383. -ms-transform: rotate(-45deg); /* IE 9 */
  384. -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  385. transform: rotate(-45deg);
  386. }
  387.  
  388. table#nav{
  389. border-spacing:5px;
  390. }
  391.  
  392. /* the verses tabs */
  393.  
  394. ul#tabs {
  395. margin-top:-10px;
  396. list-style-type: none;
  397. padding: 0;
  398. text-align: center;
  399. font-size:10px;
  400. letter-spacing:1px;
  401. }
  402.  
  403. ul#tabs li { /*– your inactive / not viewed tabs –*/
  404. display: inline-block;
  405. background-color: transparent;
  406. border: solid 1px #bfccd1;
  407. padding: 4px 12px;
  408. margin-bottom: 4px;
  409. color: #1b1b1b;
  410. cursor: pointer;
  411. }
  412.  
  413. ul#tabs li:hover {
  414. background-color:{color:accent2};
  415. color:white;
  416. }
  417.  
  418. ul#tabs li.active { /*– your active tab –*/
  419. background-color: #0f0f0f;
  420. background-image:url('http://static.tumblr.com/mwciju1/99zomiz1e/selectionpink.png');
  421. border: 1px solid #bfccd1;
  422. color:white;
  423. }
  424.  
  425. ul#tab {
  426. list-style-type: none;
  427. margin: 0;
  428. padding: 0;
  429. }
  430.  
  431. ul#tab li {
  432. display: none;
  433. }
  434.  
  435. ul#tab li.active {
  436. display: block;
  437. }
  438.  
  439. /*--------------------CREDITS-----------------------*/
  440. #cred
  441. {
  442. position:fixed;
  443. z-index:99;
  444. width: 50px;
  445. height: 18px;
  446. font-family: Arial;
  447. font-size: 7px;
  448. text-transform: uppercase;
  449. text-align: center;
  450. bottom: 10px;
  451. left: 10px;
  452. letter-spacing: 1px;
  453. line-height: 4px;
  454. padding: 10px 3px;
  455. display: block;
  456. color:{color:body font};
  457. background: {color:background};
  458. position: fixed;
  459. }
  460.  
  461. #cred a
  462. {
  463. font-weight: bold;
  464. line-height: 17px;
  465. font-size: 15px;
  466. font-family: 'Oswald', sans-serif;
  467. text-transform: uppercase;
  468. color:{color:body font};
  469. letter-spacing: 6px;
  470. margin-left:5px;
  471. }
  472.  
  473. /*-----------------NAVIGATION---------------*/
  474. #nav{
  475. position:fixed;
  476. top:50;
  477. left:220px;
  478. font-size:40px;
  479. width:350px;
  480. }
  481.  
  482. #nav a{color:#ffd684;
  483. text-shadow:1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
  484. }
  485. #nav a:hover{color:white;}
  486.  
  487. .link_refresh{margin-left:290px;margin-top:20px;}
  488. .link_ask{margin-left:324px;margin-top:20px;}
  489. .link_story{margin-left:360px;margin-top:21px;}
  490. .link_guide{margin-left:395px;margin-top:24px;}
  491. .link_verses{margin-left:290px;margin-top:-60px;}
  492. .link_ships{margin-left:324px;margin-top:21px;}
  493. .link_nav{margin-left:360px;margin-top:24px;}
  494.  
  495. /*-------------POPUP NAVI---------------*/
  496. .popupnavlinks {
  497. padding-top:5px;
  498. text-align:center; }
  499.  
  500.  
  501. .popupnavlinks a {
  502. display:inline-block;
  503. width:100px; height:8px;
  504. margin:2px; padding:6px 6px 14px;
  505. text-align:center;
  506. font-family:Calibri, helvetica, arial, sans-serif;
  507. font-size:9px;
  508. text-transform:uppercase;
  509. letter-spacing:1px;
  510. color:white;
  511. background:transparent;
  512. background-image:url(http://static.tumblr.com/mwciju1/99zomiz1e/selectionpink.png);
  513. border:1px solid {color:background};
  514. }
  515.  
  516.  
  517. .popupnavlinks a:hover {
  518. display:inline-block;
  519. width:100px; margin:2px;
  520. padding:6px 6px 14px;
  521. text-align:center;
  522. font-family:Calibri, helvetica, arial, sans-serif;
  523. font-size:9px;
  524. text-transform:uppercase;
  525. letter-spacing:1px;
  526. color:{color:accent};
  527. background:transparent }
  528.  
  529. {CustomCSS}</style>
  530. </head>
  531. <body>
  532.  
  533. <!------------------------- NAVIGATION -------------------------->
  534. <div id="nav" style="width:100%">
  535. <div class="link_refresh">
  536. <a href="/" title="refresh">✦</a> </div>
  537. <div class="link_ask">
  538. <a href="/ask" title="ask">✦</a></div>
  539. <div class="link_story">
  540. <a href="/ii" title="about">✦</a></div>
  541. <div class="link_guide">
  542. <a href="i" title="guidelines">✦</a></div>
  543. <div class="link_verses">
  544. <a href="/submit" title="submit">✦</a></div>
  545. <div class="link_ships">
  546. <a href="/archive" title="past">✦</a></div>
  547. <div class="link_nav">
  548. <a href="iii" title="verses">✦</a></div>
  549. </div>
  550.  
  551. <!-- begin updates tab -->
  552.  
  553. <div id="updates">
  554. {block:Pagination}<span style="color:white;font-size:10px;letter-spacing:1.5px;border-bottom:1px solid white;">PAGINATION</span><br>
  555. {block:NextPage}<b><a href="{NextPage}" style="color:white;font-size:11px;letter-spacing:1.5px;">sink</a></b>{/block:NextPage}
  556. {block:PreviousPage}&nbsp;/&nbsp;<b><a href="{PreviousPage}" style="color:white;font-size:11px;letter-spacing:1.5px;">swim</a></b>{/block:PreviousPage}
  557. </p>{/block:Pagination}
  558.  
  559. </div></div>
  560.  
  561. <!-- end updates tab -->
  562. <!---------------------- MAIN CONTENT ----------------------->
  563.  
  564. <div id="content">
  565. {block:Posts}
  566. <div id="posts">
  567. <!------------------------ PHOTOS --------------------------->
  568.  
  569. {block:Photo}
  570. {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  571. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  572. {/block:Photo}
  573.  
  574. <!------------------------ PHOTOSET -------------------------->
  575.  
  576. {block:Photoset}
  577. {Photoset-500}
  578. {block:Caption}<div class="text">{Caption}</div>{block:Caption}
  579. {/block:Photoset}
  580.  
  581. <!--------------------------- VIDEO ------------------------------>
  582.  
  583. {block:Video}
  584. {Video-500}
  585. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  586. {/block:Video}
  587.  
  588. <!-------------------------- AUDIO ------------------------------>
  589.  
  590. {block:Audio}
  591. <div id="audioplayer">{AudioPlayerWhite}</div>
  592. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
  593. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}<br/>
  594. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  595. {block:Album}Album: {Album}{/block:Album}<br/>
  596. {PlayCountWithLabel}
  597. {block:Caption}<br/><br/><br/><div class="text">{Caption}</div>{/block:Caption}
  598. {/block:Audio}
  599.  
  600. <!-------------------------- QUOTE ------------------------------>
  601.  
  602. {block:Quote}
  603. <div class="title" style="width:400px; margin-left:auto; margin-right:auto; line-height:20px;">“{Quote}”</div>
  604. {block:Source}<br><div class="text" style="text-align:right;">— {Source}</div>{/block:Source}
  605. {/block:Quote}
  606.  
  607. <!---------------------------- TEXT ------------------------------>
  608.  
  609. {block:Text}
  610. {block:Title}<div class="title">{Title}</div>{/block:Title}
  611. <div class="text">{Body}</div>
  612. {/block:Text}
  613.  
  614. <!--------------------------- ANSWER ------------------------------>
  615.  
  616. {block:Answer}
  617.  
  618. <div class="title" style="font-size:12px; background-color:{color:background}; padding:3px 5px;padding:5px 10px;border-top:2px solid {color:body font};-moz-border-radius: 15px;-webkit-border-radius: 15px;border-bottom:2px solid {color:body font};">{Question}</div><div class="asker">{Asker}</div><br><br>
  619.  
  620. <div class="text">{Answer}</div>
  621. {/block:Answer}
  622.  
  623. <!------------------------- CHAT ------------------------------>
  624.  
  625. {block:Chat}
  626. {block:Title}<div class="title">{Title}</div>{/block:Title}
  627. <div class="text">{block:Lines}
  628. {block:Label}<strong>{Label}</strong>{/block:Label}
  629. {Line}<br>
  630. {/block:Lines}</div>
  631. {/block:Chat}
  632.  
  633. <!-------------------------- LINK --------------------------->
  634.  
  635. {block:Link}
  636. <div class="title"><a href="{URL}">{Name}</a></div>
  637. {block:Description}<div class="text">{Description}</div>{/block:Description}
  638. {/block:Link}
  639.  
  640.  
  641. <div id="details" style="border-top:1px dotted {color:accent2};">
  642. <a href="{Permalink}">{DayOFMonthWithZero} {ShortMonth} {Year}</a> | <a href="{Permalink}">{NoteCount}</a> {block:RebloggedFrom} | <a href="{ReblogParentURL}" target="_blank">via</a>{/block:RebloggedFrom} {block:ContentSource} | <a href="{SourceURL}">source</a>{/block:ContentSource} | <a href="{ReblogURL}" target="_blank" class="details">↺</a>
  643. {block:HasTags}<div id="tags" style="border-top:1px solid #f5f5f5;width:406px;margin-left:auto;margin-right:auto;text-transform:none;">filed under:{block:Tags}&nbsp;&nbsp;<a href="{TagURL}">{Tag}</a>.{/block:Tags}</div>{/block:HasTags}</div></div>
  644.  
  645. {/block:Posts}
  646. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  647.  
  648. </div>
  649. <!-------------------------- ENDS --------------------------->
  650. </div>
  651.  
  652. </div></div>
  653.  
  654. </body>
  655.  
  656. <!-------HERE BEGIN THE POPUP BOXES------->
  657.  
  658. <div id="cred">theme by<br><a href="#?w=400" rel="credit" class="poplight" title="credit">CHE</a></div>
  659.  
  660. <div id="credit" class="popup_block" style="font-family:calibri, helvetica, arial, sans-serif;font-size: 11.5px;line-height:15px;overflow:auto;color:{color:body font};height:448px;">
  661.  
  662. <div class="fancytitle">credit</div>
  663.  
  664. <p style="font-family:calibri,helvetica,arial,sans-serif;text-align:center;"><small>theme coded by <a href="http://seacrowned.tumblr.com/"><b>che</b></a><br>
  665. with guidance from <a href="http://octomoosey.tumblr.com/"><b>octomoosey</b></a><br>
  666. and <a href="http://agirlingrey.tumblr.com/"><b>agirlingrey</b></a><br>
  667. pop-ups by <a href="http://str-wrs.tumblr.com/"><b>str-wrs</b></a><br>
  668.  
  669. </div>
  670. </div></div></div></div></div></div>
  671. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement