API tools faq
paste
Advertisement
kathisneckdeep

[OLD] theme 17: elevated

kathisneckdeep
May 27th, 2016
1,265
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. *.。.☆ elevated theme (theme 17) by distance-themes or fleaur ☆.。.*
  8. don't repost as your own + pls pls keep the credit
  9. hope you like this! enjoy x
  10.  
  11. -->
  12.  
  13. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  14.  
  15. <link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
  16.  
  17. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery); </script>
  18.  
  19. <script type="text/javascript"
  20. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  21. <script>
  22. $(document).ready(function() {
  23. //
  24. $('a.poplight[href^=#]').click(function() {
  25. var popID = $(this).attr('rel'); //Get Popup Name
  26. var popURL = $(this).attr('href'); //Get Popup href to define size
  27. var query= popURL.split('?');
  28. var dim= query[1].split('&');
  29. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  30. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="" class="btn_close" title="" alt="" /></a>');
  31. var popMargTop = ($('#' + popID).height() + 80) / 2;
  32. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  33. //Apply Margin to Popup
  34. $('#' + popID).css({
  35. 'margin-top' : -popMargTop,
  36. 'margin-left' : -popMargLeft
  37. });
  38. $('body').append('<div id="fade"></div>');
  39. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  40. return false;
  41. });
  42. $('a.close, #fade').live('click', function() {
  43. $('#fade , .popup_block, .popup_block2, .popup_block3, .popup_block4').fadeOut(function() {
  44. $('#fade, a.close').remove(); //fade them both out
  45. });
  46. return false;
  47. });
  48. });
  49. </script>
  50.  
  51. <meta name="select:link icon 1" content="circle-o-notch fa-spin fa-fw" title="Spinning Circle"/>
  52. <meta name="select:link icon 1" content="home" title="House"/>
  53. <meta name="select:link icon 1" content="envelope-o" title="Envelope"/>
  54. <meta name="select:link icon 1" content="heart-o" title="Heart"/>
  55. <meta name="select:link icon 1" content="archive" title="Archive"/>
  56. <meta name="select:link icon 1" content="bookmark-o" title="Bookmark"/>
  57. <meta name="select:link icon 1" content="commenting-o" title="Speech Bubble"/>
  58.  
  59. <meta name="select:link icon 2" content="envelope-o" title="Envelope"/>
  60. <meta name="select:link icon 2" content="circle-o-notch fa-spin fa-fw" title="Spinning Circle"/>
  61. <meta name="select:link icon 2" content="home" title="House"/>
  62. <meta name="select:link icon 2" content="heart-o" title="Heart"/>
  63. <meta name="select:link icon 2" content="archive" title="Archive"/>
  64. <meta name="select:link icon 2" content="bookmark-o" title="Bookmark"/>
  65. <meta name="select:link icon 2" content="commenting-o" title="Speech Bubble"/>
  66.  
  67. <meta name="select:link icon 3" content="commenting-o" title="Speech Bubble"/>
  68. <meta name="select:link icon 3" content="home" title="House"/>
  69. <meta name="select:link icon 3" content="envelope-o" title="Envelope"/>
  70. <meta name="select:link icon 3" content="heart-o" title="Heart"/>
  71. <meta name="select:link icon 3" content="archive" title="Archive"/>
  72. <meta name="select:link icon 3" content="bookmark-o" title="Bookmark"/>
  73.  
  74. <meta name="select:link icon 4" content="bookmark-o" title="Bookmark"/>
  75. <meta name="select:link icon 4" content="archive" title="Archive"/>
  76. <meta name="select:link icon 4" content="home" title="House"/>
  77. <meta name="select:link icon 4" content="envelope-o" title="Envelope"/>
  78. <meta name="select:link icon 4" content="heart-o" title="Heart"/>
  79. <meta name="select:link icon 4" content="archive" title="Archive"/>
  80. <meta name="select:link icon 4" content="commenting-o" title="Speech Bubble"/>
  81.  
  82. <meta name="color:updc" content="#fcebd5"/>
  83. <meta name="text:updtitle1" content="apply"/>
  84. <meta name="text:updtext1" content="put your awards posts here"/>
  85. <meta name="text:updtitle2" content="updates"/>
  86. <meta name="text:box1title" content="statistics"/>
  87. <meta name="text:box1text" content="hello this is where you put your updates"/>
  88. <meta name="text:box2title" content="feautured in"/>
  89. <meta name="text:box2text" content="hello this is where you put your updates"/>
  90. <meta name="text:box3title" content="other"/>
  91. <meta name="text:box3text" content="hello this is where you put your updates"/>
  92.  
  93. <meta name="color:background" content="#ffffff"/>
  94. <meta name="color:text" content="#4d4d4d"/>
  95. <meta name="color:link" content="#4d4d4d"/>
  96. <meta name="color:post bg" content="#ffffff"/>
  97. <meta name="color:border" content="#eeeeee"/>
  98. <meta name="color:bar" content="#ebf4f4"/>
  99. <meta name="color:barh" content="#d7eaea"/>
  100.  
  101. <meta name="text:stats" content="stats here"/>
  102.  
  103. <meta name="text:link 1 url" content="/"/>
  104. <meta name="text:link 1 name" content="home"/>
  105. <meta name="text:link 2 url" content="/ask"/>
  106. <meta name="text:link 2 name" content="mssg me"/>
  107. <meta name="text:link 3 url" content="/submit"/>
  108. <meta name="text:link 3 name" content="submit"/>
  109. <meta name="text:link 4 url" content="/archive"/>
  110. <meta name="text:link 4 name" content="past"/>
  111.  
  112. <meta name="image:background" content=""/>
  113. <meta name="image:sidepic" content=""/>
  114.  
  115.  
  116. <title>{Title}</title>
  117. <link rel="shortcut icon" href="{Favicon}">
  118. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  119. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  120.  
  121.  
  122. <style type="text/css">
  123.  
  124. ::selection {
  125. color: {color:bar};
  126. background: {color:background};
  127. }
  128.  
  129. ::-moz-selection {
  130. color: {color:bar};
  131. background: {color:background};
  132. }
  133.  
  134. ::-webkit-selection {
  135. color: {color:bar};
  136. background: {color:background};
  137. }
  138.  
  139. ::-webkit-scrollbar {
  140. width: 9px;
  141. height: 4px;
  142. border:4px solid {color:background};
  143. background:{color:background};
  144. }
  145.  
  146. ::-webkit-scrollbar-thumb {
  147. border:4px solid {color:background};
  148. background-color: {color:barh};
  149. }
  150.  
  151.  
  152. /**updates tab by kathryn aka distance-themes for html help go to http://distance-themes.tumblr.com **/
  153. #updatescon{
  154. position:fixed; /**don't touch**/
  155. top:150px; /**margin from top**/
  156. right:70px; /**margin from right**/
  157. text-align:center; /**change it to left or right if you want**/
  158. width:180px; /**width of the whole thing i wouldn't change it tbh**/
  159. }
  160.  
  161. .updtitle{
  162. margin-top:5px; /**margin from top i wouldn't change it tbh**/
  163. padding:3px; /**padding**/
  164. text-transform:uppercase; /**change it to lowercase, capitalize, none if you want**/
  165. font-size:13px; /**font size**/
  166. letter-spacing:2px; /**space between the letters**/
  167. }
  168.  
  169. .updline{
  170. border-top:3px solid {color:updc}; /**border found in the top 3px is the thickness solid is the type change it to dashed, dotted or whatever you want**/
  171. width:25px; /**width don't change it**/
  172. margin-left:77px; /**margin from left don't change it**/
  173. }
  174.  
  175. .updline2{
  176. -webkit-transition: all .7s ease-in-out;
  177. -moz-transition: all .7s ease-in-out;
  178. -ms-transition: all .7s ease-in-out;
  179. -o-transition: all .7s ease-in-out;
  180. transition: all .7s ease-in-out;
  181. border-top:3px solid {color:updc}; /**border found in the top 3px is the thickness solid is the type change it to dashed, dotted or whatever you want**/
  182. width:25px; /**width don't change it**/
  183. margin-left:77px; /**margin from left don't change it**/
  184. }
  185.  
  186. #updatescon:hover .updline2{
  187. width:180px; /**width don't change it**/
  188. margin-left:0px; /**don't change it**/
  189. margin-right:0px; /**don't change it**/
  190. }
  191.  
  192. .updtext{
  193. margin-top:6px; /**margin from top**/
  194. }
  195.  
  196. .updbox{
  197. -webkit-transition: all .7s ease-in-out;
  198. -moz-transition: all .7s ease-in-out;
  199. -ms-transition: all .7s ease-in-out;
  200. -o-transition: all .7s ease-in-out;
  201. transition: all .7s ease-in-out;
  202. -webkit-transform: scale(1,0);
  203. transform: scale(1,0);
  204. -webkit-transform-origin: 0 0;
  205. transform-origin: 0 0;
  206. opacity:0; /**don't change it**/
  207. width:140px; /**width**/
  208. margin-left:15px; /**margin left**/
  209. margin-top:5px; /**margin top**/
  210. margin-bottom:2px; /**margin bottom**/
  211. padding-top:0px; /**padding top**/
  212. padding-bottom:8px; /**padding bottom**/
  213. padding-right:5px; /**padding right**/
  214. padding-left:5px; /**padding left**/
  215. border:1px solid {color:updc}; /**border. 1px is the thickness solid is the type change it to dashed, dotted or whatever you want**/
  216. }
  217.  
  218. #updatescon:hover .updbox{
  219. opacity:1;
  220. -webkit-transform: scale(1);
  221. -moz-transition: scale(1);
  222. -o-transition: scale(1);
  223. transform: scale(1);
  224. }
  225. /**updates tab**/
  226.  
  227. #bpicyo{
  228. width:350px;
  229. opacity:.4;
  230. bottom:0px;
  231. left:0px;
  232. position:fixed;
  233. margin-right:0px;
  234. z-index:100;
  235. }
  236.  
  237. #s-m-t-tooltip {
  238. max-width:300px;
  239. margin:10px 0px 0px 10px;
  240. padding:3px 3px 3px 3px;
  241. background: #fff;
  242. font-family: 'Raleway', sans-serif;
  243. font-size:9px;
  244. letter-spacing:2px;
  245. text-transform:uppercase;
  246. color:#000;
  247. z-index:999999999999999999999999999999999999;
  248. }
  249.  
  250. #topbar{
  251. top:20px;
  252. right:0;
  253. left:0;
  254. width:100%;
  255. z-index:20000;
  256. height:20px;
  257. background-color:{color:bar};
  258. position:fixed;
  259. }
  260.  
  261. #topbar2{
  262. top:40px;
  263. right:0;
  264. left:0;
  265. width:100%;
  266. z-index:20000;
  267. height:5px;
  268. background-color:#{color:bar};
  269. border-bottom:6px double {color:bar};
  270. position:fixed;
  271. }
  272.  
  273. #topbar3{
  274. top:0px;
  275. right:0;
  276. left:0;
  277. width:100%;
  278. z-index:2;
  279. height:45px;
  280. background-color:{color:background};
  281. position:fixed;
  282. }
  283.  
  284. #leftbar{
  285. top:0px;
  286. right:20px;
  287. height:100%;
  288. z-index:10000;
  289. width:20px;
  290. background-color:{color:bar};
  291. position:fixed;
  292. }
  293.  
  294. #leftbar2{
  295. top:0;
  296. right:45px;
  297. height:100%;
  298. z-index:10000;
  299. width:5px;
  300. background-color:#{color:bar};
  301. border-right:6px double {color:bar};
  302. position:fixed;
  303. }
  304.  
  305.  
  306. .tbtitle{
  307. position:absolute;
  308. font-size:23px;
  309. text-transform:uppercase;
  310. letter-spacing:3px;
  311. width:220px;
  312. margin-left:-5px;
  313. margin-top:-30px;
  314. padding:5px;
  315. padding-bottom:5px;
  316. text-align:center;
  317. }
  318.  
  319. .tbtitle a{
  320. background:{color:background};
  321. padding-left:3px;
  322. padding-right:3px;
  323. }
  324.  
  325. .tbdesc{
  326. font-size:10px;
  327. margin-top:4px;
  328. padding:5px;
  329. border-bottom:2px solid {color:bar};
  330. }
  331.  
  332. #bsbaryo{
  333. width:220px;
  334. height:auto;
  335. padding-top:10px;
  336. padding-bottom:15px;
  337. padding-right:10px;
  338. padding-left:10px;
  339. font-style:bold;
  340. top:25%;
  341. z-index:1000;
  342. border:2px solid {color:bar};
  343. left:70px;
  344. font-family:{select:font};
  345. text-align:center;
  346. position:fixed;
  347. }
  348.  
  349. .linkiees{
  350. position:absolute;
  351. margin-top:0px;
  352. padding:5px;
  353. max-width:200px;
  354. margin-left:50px;
  355. text-align:right;
  356. }
  357.  
  358. .linkiees a{
  359. background:{color:background};
  360. padding:3px;
  361. font-size:12px;
  362. line-height:20px;
  363. margin-right:4px;
  364. margin-left:4px;
  365. }
  366.  
  367. #navlinks {
  368. font-size:5px;
  369. position: fixed;
  370. background-color:{color:bar};
  371. width:10px;
  372. height:10px;
  373. bottom: 10px;
  374. padding:2px;
  375. right: 60px;
  376. z-index:999999999999;
  377. text-align:center;
  378. overflow:hidden;
  379. -webkit-transition:all 0.7s ease-in-out;
  380. -moz-transition:all 0.7s ease-in-out;
  381. transition:all 0.7s ease-in-out;
  382. }
  383.  
  384. #navlinks a {
  385. color:{color:bar};
  386. font-size:8px;
  387. letter-spacing:1px;
  388. font-weight:bold;
  389. text-decoration: none;
  390. }
  391.  
  392. #navlinks:hover {
  393. width:50px;
  394. -webkit-transition:all 0.7s ease-in-out;
  395. -moz-transition:all 0.7s ease-in-out;
  396. transition:all 0.7s ease-in-out;
  397. }
  398.  
  399. #navlinks:hover a {
  400. color:{color:text};
  401. }
  402.  
  403. #content {
  404. margin-top:60px;
  405. left:25%;
  406. width: 700px;
  407. float: left;
  408. {block:PermalinkPage}
  409. margin-top:150px;
  410. margin-right:20px;{/block:PermalinkPage}
  411. }
  412.  
  413.  
  414. body {
  415. background-color: {color:background};
  416. background-image: url({image:background});
  417. background-attachment:fixed;background-repeat:repeat;
  418. background-position:center;
  419. font-family: 'Raleway', sans-serif;
  420. font-size: 11px;
  421. letter-spacing:1px;
  422. color: {color:text};
  423. }
  424.  
  425. a {
  426. color: {color:link};
  427. text-decoration:none;
  428. }
  429.  
  430. blockquote {
  431. padding-left:5px;
  432. border-left:2px solid;
  433. color: {color:text};
  434. margin-left:3px;
  435. margin-bottom:5px;
  436. }
  437.  
  438. img, iframe, embed, object, video {
  439. max-width: 100%;
  440. }
  441.  
  442. #tumblr_controls, .tmblr-iframe{
  443. z-index:999999999999999999!important;
  444. -webkit-filter:invert(100%);
  445. -moz-filter:invert(100%);
  446. -o-filter:invert(100%);
  447. -ms-filter:invert(100%);
  448. filter:invert(100%);
  449. position:fixed!important;
  450. right:50px!important;
  451. opacity:.3;
  452. }
  453.  
  454. /*post stuff*/
  455.  
  456. article {
  457. -webkit-transition: all .7s ease-in-out;
  458. -moz-transition: all .7s ease-in-out;
  459. -ms-transition: all .7s ease-in-out;
  460. -o-transition: all .7s ease-in-out;
  461. transition: all .7s ease-in-out;
  462. -moz-box-shadow: 3px 3px 0px 0px {color:bar};
  463. -webkit-box-shadow: 3px 3px 0px 0px {color:bar};
  464. box-shadow: 3px 3px 0px 0px {color:bar};
  465. background: {color:post bg};
  466. padding:10px;
  467. border:1px solid {color:border};
  468. margin: 20px;
  469. margin-left:50px;
  470. margin-bottom:55px;
  471. width: 250px;
  472. {block:PermalinkPage}
  473. -moz-box-shadow: 0px 2px 0px 0px transparent;
  474. -webkit-box-shadow: 2px 2px 0px 0px transparent;
  475. box-shadow: 2px 2px 0px 0px transparent;
  476. width:400px;
  477. border-top:0px solid {color:border};
  478. border-bottom:0px solid {color:border};
  479. border-left:0px solid {color:border};
  480. border-right:1px solid {color:border};
  481. {/block:PermalinkPage}
  482. }
  483.  
  484. #julia{
  485. z-index:1;
  486. max-width:250px;
  487. position:relative;
  488. overflow:hidden;
  489. {block:PermalinkPage}max-width:400px;{/block:PermalinkPage}
  490. }
  491.  
  492. article #julia img{
  493. display:block;
  494. -webkit-transition: -webkit-transform 0.7s;
  495. transition: transform 0.7s;
  496. }
  497.  
  498. article:hover #julia img{
  499. -webkit-transform: scale3d(1.1,1.1,1);
  500. transform: scale3d(1.1,1.1,1);
  501. {block:PermalinkPage}
  502. -webkit-transform: scale3d(1,1,1);
  503. transform: scale3d(1,1,1);
  504. {/block:PermalinkPage}
  505. }
  506.  
  507. .blur {
  508. position:absolute;
  509. top:0;
  510. left:0;
  511. width:100%;
  512. height:calc(100% + 1px);
  513. opacity:0;
  514. visibility:hidden;
  515. z-index:1;
  516. -webkit-transition: all .7s ease-in-out;
  517. -moz-transition: all .7s ease-in-out;
  518. -ms-transition: all .7s ease-in-out;
  519. -o-transition: all .7s ease-in-out;
  520. transition: all .7s ease-in-out;
  521. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  522. }
  523. .blur:before {
  524. content:'';
  525. position:absolute;
  526. width:100%;
  527. height:100%;
  528. top: 0px;
  529. right: 0px;
  530. bottom: 0px;
  531. left: 0px;
  532. background:#fff;
  533. -webkit-transform: scale(1,0);
  534. transform: scale(1,0);
  535. -webkit-transform-origin: 0 0;
  536. transform-origin: 0 0;
  537. -webkit-transition: all .7s ease-in-out;
  538. -moz-transition: all .7s ease-in-out;
  539. -ms-transition: all .7s ease-in-out;
  540. -o-transition: all .7s ease-in-out;
  541. transition: all .7s ease-in-out;
  542. }
  543.  
  544.  
  545. article:hover .blur {
  546. opacity:.5;
  547. visibility:visible;
  548. -webkit-transform: scale(1);
  549. transform: scale(1);
  550. transform: scale(1);
  551. -webkit-transition-delay: 0.15s;
  552. -moz-transition-delay: 0.15s;
  553. -o-transition-delay: 0.15s;
  554. transition-delay: 0.15s;
  555. }
  556.  
  557. article:hover .blur:before, article:hover .blur:after {
  558. opacity: 1;
  559. -webkit-transform: scale(1);
  560. -moz-transition: scale(1);
  561. -o-transition: scale(1);
  562. transform: scale(1);
  563. -webkit-transition-delay: 0.15s;
  564. -moz-transition-delay: 0.15s;
  565. -o-transition-delay: 0.15s;
  566. transition-delay: 0.15s;
  567. }
  568.  
  569.  
  570. #note{
  571. background:{color:post bg};
  572. right:-320px; top:0px;
  573. position:absolute;
  574. width:300px; max-height:390px;
  575. padding:5px;
  576. overflow:auto;
  577. }
  578.  
  579. .title{
  580. font-family: 'Raleway', sans-serif;
  581. font-size:20px;
  582. margin-bottom:1px;
  583. }
  584.  
  585. .wteveridk{
  586. font-family: 'Raleway', sans-serif;
  587. margin-left:5px;
  588. margin-bottom:-3px;
  589. }
  590.  
  591. .chat span {
  592. float: left;
  593. margin-right: 10px;
  594. }
  595.  
  596. article:hover #perma1{
  597. z-index:20000;
  598. -webkit-transition: all .7s ease-in-out;
  599. -moz-transition: all .7s ease-in-out;
  600. -ms-transition: all .7s ease-in-out;
  601. -o-transition: all .7s ease-in-out;
  602. transition: all .7s ease-in-out;
  603. opacity:1;
  604. -webkit-transform: scale(1);
  605. -moz-transition: scale(1);
  606. -o-transition: scale(1);
  607. transform: scale(1);
  608. }
  609.  
  610. article:hover #perma3{
  611. z-index:20000;
  612. -webkit-transition: all 1s ease-in-out;
  613. -moz-transition: all 1s ease-in-out;
  614. -ms-transition: all 1s ease-in-out;
  615. -o-transition: all 1s ease-in-out;
  616. transition: all 1s ease-in-out;
  617. opacity:1;
  618. width:10px;
  619. -webkit-transform: scale(1);
  620. -moz-transition: scale(1);
  621. -o-transition: scale(1);
  622. transform: scale(1);
  623. }
  624.  
  625. article:hover #permah{
  626. z-index:20000;
  627. -webkit-transition: all 1.3s ease-in-out;
  628. -moz-transition: all 1.3s ease-in-out;
  629. -ms-transition: all 1.3s ease-in-out;
  630. -o-transition: all 1.3s ease-in-out;
  631. transition: all 1.3s ease-in-out;
  632. opacity:1;
  633. width:10px;
  634. -webkit-transform: scale(1);
  635. -moz-transition: scale(1);
  636. -o-transition: scale(1);
  637. transform: scale(1);
  638. }
  639.  
  640. article:hover #permal{
  641. z-index:20000;
  642. -webkit-transition: all .7s ease-in-out;
  643. -moz-transition: all .7s ease-in-out;
  644. -ms-transition: all .7s ease-in-out;
  645. -o-transition: all .7s ease-in-out;
  646. transition: all .7s ease-in-out;
  647. opacity:1;
  648. width:90px;
  649. -webkit-transform: scale(1);
  650. -moz-transition: scale(1);
  651. -o-transition: scale(1);
  652. transform: scale(1);
  653. }
  654.  
  655. #perma1{
  656. -webkit-transition: all .7s ease-in-out;
  657. -moz-transition: all .7s ease-in-out;
  658. -ms-transition: all .7s ease-in-out;
  659. -o-transition: all .7s ease-in-out;
  660. transition: all .7s ease-in-out;
  661. -webkit-transform: scale(0,1);
  662. transform: scale(0,1);
  663. -webkit-transform-origin: 0 0;
  664. transform-origin: 0 0;
  665. opacity:0;
  666. background:{color:bar};
  667. text-align: center;
  668. position: absolute;
  669. height:10px;
  670. width:10px;
  671. top:60px;
  672. left:80px;
  673. font-family: 'Montserrat', sans-serif;: courier new;
  674. padding:10px;
  675. font-size: 10px;
  676. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  677. }
  678.  
  679. #perma3{
  680. -webkit-transition: all .7s ease-in-out;
  681. -moz-transition: all .7s ease-in-out;
  682. -ms-transition: all .7s ease-in-out;
  683. -o-transition: all .7s ease-in-out;
  684. transition: all .7s ease-in-out;
  685. -webkit-transform: scale(0,1);
  686. transform: scale(0,1);
  687. -webkit-transform-origin: 0 0;
  688. transform-origin: 0 0;
  689. opacity:0;
  690. background:{color:bar};
  691. text-align: center;
  692. position: absolute;
  693. height:10px;
  694. width:5px;
  695. top:60px;
  696. left:115px;
  697. font-family: 'Montserrat', sans-serif;: courier new;
  698. padding:10px;
  699. font-size: 10px;
  700. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  701. }
  702.  
  703. #permal{
  704. -webkit-transition: all 1s ease-in-out;
  705. -moz-transition: all 1s ease-in-out;
  706. -ms-transition: all 1s ease-in-out;
  707. -o-transition: all 1s ease-in-out;
  708. transition: all 1s ease-in-out;
  709. -webkit-transform: scale(0,1);
  710. transform: scale(0,1);
  711. -webkit-transform-origin: 0 0;
  712. transform-origin: 0 0;
  713. opacity:0;
  714. background:transparent;
  715. text-align: center;
  716. position: absolute;
  717. height:auto;
  718. width:10px;
  719. border-bottom:2px solid {color:bar};
  720. top:76px;
  721. left:75px;
  722. font-family: 'Montserrat', sans-serif;: courier new;
  723. padding:10px;
  724. font-size: 10px;
  725. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  726. }
  727.  
  728. #permah{
  729. -webkit-transition: all 1s ease-in-out;
  730. -moz-transition: all 1s ease-in-out;
  731. -ms-transition: all 1s ease-in-out;
  732. -o-transition: all 1s ease-in-out;
  733. transition: all 1s ease-in-out;
  734. -webkit-transform: scale(0,1);
  735. transform: scale(0,1);
  736. -webkit-transform-origin: 0 0;
  737. transform-origin: 0 0;
  738. opacity:0;
  739. background:{color:bar};
  740. text-align: center;
  741. position: absolute;
  742. height:10px;
  743. width:5px;
  744. top:60px;
  745. left:150px;
  746. font-family: 'Montserrat', sans-serif;: courier new;
  747. padding:10px;
  748. font-size: 10px;
  749. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  750. }
  751.  
  752.  
  753. #perma2{
  754. border-top:1px solid{color:bar};
  755. text-align:right;
  756. padding:3px;
  757. font-size:8px;
  758. letter-spacing:2px;
  759. padding-bottom:0px;
  760. }
  761.  
  762. .answer{
  763. padding:7px;
  764. line-height:12px;
  765. }
  766.  
  767. .question{
  768. background:{color:bar};
  769. padding:5px;
  770. }
  771.  
  772. .answerr{
  773. text-align:center;
  774. margin-bottom:8px;
  775. border:1px solid {color:bar};
  776. padding-top:1px;
  777. padding-bottom:3px;
  778. padding-right:6px;
  779. padding-left:6px;
  780. }
  781.  
  782. .quote{
  783. padding:5px;
  784. font-family: 'daydreamer';
  785. font-size:18px;
  786. }
  787.  
  788. .photo{
  789. margin-bottom:-1px;
  790. }
  791.  
  792. .tumblr_audio_player {
  793. width: 400px;
  794. height: 100px;
  795. overflow: hidden;
  796. position: relative;
  797. z-index: 1000;
  798. }
  799.  
  800.  
  801. .pagi { /*pagi stuff*/
  802. font-size:15px;
  803. font: {select:font};
  804. color: {color:link};
  805. text-align:center;
  806. padding:2px;
  807. padding-top:5px;
  808. display:none;
  809. }
  810.  
  811. </style>
  812. </head>
  813. <body>
  814.  
  815. <!-- start updates tab by kathryn aka distance-themes -->
  816. <div id="updatescon">
  817.  
  818. <!-- apply -->
  819. <div class="updtitle">{text:updtitle1}</div>
  820. <div class="updline"></div>
  821. <div class="updtext">{text:updtext1}</div>
  822.  
  823. <!-- updates title-->
  824. <div class="updtitle">{text:updtitle2}</div>
  825. <div class="updline2"></div>
  826.  
  827. <!-- updates content -->
  828. <div class="updbox"><!-- updates box 1 -->
  829. <div class="updtitle">{text:box1title}</div>
  830. {text:box1text}
  831. </div>
  832.  
  833. <div class="updbox"><!-- updates box 2 -->
  834. <div class="updtitle">{text:box2title}</div>
  835. {text:box2text}
  836. </div>
  837.  
  838. <div class="updbox"><!-- updates box 3 -->
  839. <div class="updtitle">{text:box3title}</div>
  840. {text:box3text}
  841. </div>
  842. </div>
  843. <!-- end of updates tab -->
  844.  
  845.  
  846. <div id="topbar"></div>
  847. <div id="topbar2"></div>
  848. <div id="topbar3"></div>
  849. <div id="leftbar"></div>
  850. <div id="leftbar2"></div>
  851.  
  852.  
  853. <div id="bpicyo">
  854. <img src="{image:sidepic}"/>
  855. </div>
  856.  
  857. <div id="bsbaryo">
  858. <div class="tbtitle">
  859. <a href="/">{Title}</a></div>
  860. <div class="tbdesc">
  861. {Description}</div>
  862.  
  863. <div style="margin-top:5px; font-size:9px; text-align:center">{text:stats}</div>
  864.  
  865. <div class="linkiees">
  866. <a href="{text:link 1 url}" title="{text:link 1 name}"><i class="fa fa-{select:link icon 1}"></i></a>
  867. <a href="{text:link 2 url}" title="{text:link 2 name}"><i class="fa fa-{select:link icon 2}"></i></a>
  868. <a href="{text:link 3 url}" title="{text:link 3 name}"><i class="fa fa-{select:link icon 3}"></i></a>
  869. <a href="{text:link 4 url}" title="{text:link 4 name}"><i class="fa fa-{select:link icon 4}"></i></a>
  870. <a href="http://maoli.co.vu/" title="credits"><i class="fa fa-code"></i></a>
  871. </div>
  872. </div>
  873.  
  874. {block:Pagination}
  875. <div class="pagination">
  876. <div class="pagi">
  877. {block:PreviousPage}<a href="{PreviousPage}"><</a>{/block:PreviousPage}
  878. {block:NextPage}<a href="{NextPage}">></a>{/block:NextPage}
  879. </div></div>
  880. {/block:Pagination}
  881. </div>
  882. <nav>
  883. <ul>
  884. {block:HasPages}
  885. {block:Pages}
  886. <li> <a href="{URL}">{Label}</a></li>
  887. {/block:Pages}
  888. {/block:HasPages}
  889. </ul>
  890. </nav>
  891.  
  892. <div id="content">
  893. {block:Posts}
  894. <article>
  895. {block:Text}
  896. <div class="text">
  897. {block:Title}<h1 class="title">
  898. <a href="{Permalink}">{Title}</a>
  899. </h1>{/block:Title}
  900. {Body}
  901. <div id="perma2">
  902. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  903. </div>
  904. {/block:Text}
  905.  
  906. {block:Photo}
  907. <div class="photo">
  908. <div id="julia">
  909. <a href="{Permalink}" target="_blank"><img src="{PhotoURL-400}" alt="{PhotoAlt}" /></a></div>
  910. <div id="perma1">
  911. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"><i class="fa fa-refresh"></i></a>
  912. </div>
  913. <div id="perma3">
  914. <a href="{permalink}" title="{notecount} notes" target="_blank"><i class="fa fa-copy"></i></a></div>
  915. <div id="permah">
  916. <a href="{Permalink}" title="post info"><i class="fa fa-commenting-o"></i></a></div>
  917. <div class="blur"></div>
  918. <div id="permal"></div>
  919. {/block:Photo}
  920.  
  921. {block:Photoset}
  922. <div class="photoset">
  923. {block:IndexPage}
  924. {Photoset-250}
  925. {/block:IndexPage}
  926. {block:PermalinkPage}
  927. {Photoset-400}
  928. {/block:PermalinkPage}
  929. <div id="perma2">
  930. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  931. </div>
  932. {/block:Photoset}
  933.  
  934. {block:Quote}
  935. <div class="quote">
  936. "{Quote}"
  937. </div>
  938. <div id="perma2">
  939. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  940. {/block:Quote}
  941.  
  942. {block:Link}
  943. <div class="link">
  944. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  945. {block:Description}{Description}{/block:Description}
  946. <div id="perma2">
  947. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  948. </div>
  949. {/block:Link}
  950.  
  951. {block:Chat}
  952. <div class="chat">
  953. <ul>
  954. {block:Lines}
  955. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  956. {/block:Lines}
  957. </ul>
  958. <div id="perma2">
  959. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  960. </div>
  961. {/block:Chat}
  962.  
  963. {block:Audio}
  964. <div class="audio">
  965. {block:AlbumArt}
  966. <img src="{AlbumArtURL}" width="100px" height="100px"/>
  967. {/block:AlbumArt}
  968. {AudioPlayerWhite}
  969. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  970. {block:TrackName}<b>track:</b> {TrackName}{/block:TrackName}</span><br>
  971. {block:Artist}<b>artist:</b> {Artist}{/block:Artist}
  972. <div id="perma2">
  973. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  974. </div>
  975. {/block:Audio}
  976.  
  977. {block:Video}
  978. <div class="video">
  979. <div class="video-player">{Video-400}</div>
  980. <div id="perma2">
  981. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  982. </div>
  983. {/block:Video}
  984.  
  985. {block:Answer}
  986. <div class="answer">
  987. {Asker} asked:
  988. <div class="question">
  989. {Question}</div>
  990. <div style="text-align:right">
  991. <br>fleaur answered:</div>
  992. <div class="answerr">{Answer}</div>
  993. <div id="perma2">
  994. <a href="{ReblogURL}" target="_blank" title="{TimeAgo}"> REBLOG</a> | <a href="{Permalink}">{NoteCount} NOTES</a>
  995. </div>
  996. {/block:Answer}
  997. </div>
  998.  
  999. <div id="perma">
  1000. {block:PermalinkPage}
  1001. <div id="note">
  1002. {Caption}
  1003. {block:HasTags}{block:Tags}TAGS: <a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags} <br>
  1004. {block:RebloggedFrom}source: <a href="{ReblogRootURL}">{ReblogRootName}</a> | via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom} | posted {Month} {DayOfMonth}, {12HourWithZero}:{Minutes}{CapitalAmPm}<br><br>
  1005. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1006. </div></div>
  1007. {/block:PermalinkPage}
  1008. </footer>
  1009. </article>
  1010. {/block:Posts}
  1011. </div>
  1012.  
  1013. <!-- don't touch it lol -->
  1014.  
  1015. <div style="display:none">
  1016. <script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5263526";
  1017. var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
  1018. fhs.src = "//s1.freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
  1019. document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
  1020. </script>
  1021. </div>
  1022.  
  1023. <div id="navlinks"><a href="http://j.gs/12878167/theme-credit" title="theme credit" target="_blank">DISTANCE</a></div>
  1024.  
  1025. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  1026. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  1027. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1028. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1029.  
  1030. <script>
  1031. (function() {
  1032. var $tumblelog = $('#content');
  1033. $tumblelog.infinitescroll({
  1034. navSelector : ".pagination",
  1035. nextSelector : ".pagination a:first",
  1036. itemSelector : "article",
  1037. bufferPx : 50,
  1038. done : "",
  1039. loading: {
  1040. img : "",
  1041. msgText: ""
  1042. },
  1043. },
  1044. function( newElements ) {
  1045. var $newElems = $( newElements ).css({ opacity: 0 });
  1046. $newElems.imagesLoaded(function(){
  1047. $newElems.animate({ opacity: 1 });
  1048. $tumblelog.masonry( 'appended', $newElems);
  1049. });
  1050. }
  1051. );
  1052. $tumblelog.imagesLoaded( function(){
  1053. $tumblelog.masonry({
  1054. columnWidth: function( containerWidth ) {
  1055. return containerWidth / 100;
  1056. }
  1057. });
  1058. });
  1059. })();
  1060. </script>
  1061. </body>
  1062.  
  1063.  
  1064. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!