API tools faq
paste
Advertisement
loranhale

perth

loranhale
Apr 15th, 2017
2,295
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!---
  5.  
  6.  
  7. aio: perth
  8. revamped 14/5/17
  9.  
  10. @loranhale
  11.  
  12.  
  13. note: the jQuery was amended by hermionegrangcr on may 13th 2017
  14.  
  15. --->
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}" />
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  20.  
  21. <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro|Karla|PT+Serif|Source+Serif+Pro' rel='stylesheet' type='text/css'>
  22. <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  23.  
  24. <style type="text/css">
  25.  
  26. /* scrollbar */
  27.  
  28. ::-webkit-scrollbar {
  29. height:5px;
  30. width:9px;
  31. background:#fafafa;
  32. }
  33.  
  34. ::-webkit-scrollbar-thumb {
  35. background:#dcecf5;
  36. border:4px solid #fafafa;
  37. }
  38.  
  39. ::-webkit-scrollbar-track {
  40. background:#fafafa;
  41. border:4px solid #fafafa;
  42. }
  43.  
  44. /* tumblr controls */
  45.  
  46. .iframe-controls--desktop { display:none!important; }
  47.  
  48. /* tooltips */
  49.  
  50. #s-m-t-tooltip {
  51. max-width:300px;
  52. margin:15px;
  53. padding:6px 6px;
  54. line-height:100%;
  55. z-index:99999999;
  56. color:#000;
  57. background:#fff;
  58. text-transform:lowercase;
  59. border:1px solid #dcecf5;
  60. border-radius:3px;
  61. }
  62.  
  63. body {
  64. background:#fafafa;
  65. color:#555;
  66. font-family:'karla', sans-serif;
  67. font-size:10px;
  68. -moz-osx-font-smoothing:grayscale;
  69. -webkit-font-smoothing:antialiased;
  70. font-smoothing:antialiased;
  71. }
  72.  
  73. a {
  74. color:#8892e0;
  75. text-decoration:none;
  76. transition:all .6s ease;
  77. -webkit-transition:all .6s ease;
  78. -moz-transition:all .6s ease;
  79. -o-transition:all .6s ease;
  80. }
  81.  
  82. a:hover {
  83. text-decoration:none;
  84. color:#000;
  85. }
  86.  
  87. blockquote {
  88. padding-left:10px;
  89. border-left:1px solid #dcecf5;
  90. margin-left:10px;
  91. }
  92.  
  93. h1 {
  94. margin:0 0 5px;
  95. font-size:13px;
  96. color:#444;
  97. font-weight:600;
  98. text-transform:uppercase;
  99. letter-spacing:1px;
  100. }
  101.  
  102. h2 {
  103. margin:0 0 10px;
  104. font-size:13px;
  105. color:#000;
  106. font-weight:400;
  107. text-transform:lowercase;
  108. letter-spacing:.5px;
  109. }
  110.  
  111. b {
  112. color:#8892e0;
  113. font-style:bold;
  114. }
  115.  
  116. i {
  117. color:#444;
  118. font-style:italic;
  119. }
  120.  
  121. ul {
  122. padding-left:20px;
  123. }
  124.  
  125. ul li {
  126. margin-left:-10px;
  127. list-style-type:none;
  128. }
  129.  
  130. #con {
  131. width:400px;
  132. box-sizing:border-box;
  133. margin-left:calc(50% - 200px);
  134. margin:150px auto;
  135. }
  136.  
  137. #header {
  138. top:40px;
  139. left:40px;
  140. position:fixed;
  141. width:auto;
  142. }
  143.  
  144. .title {
  145. padding:8px 0;
  146. font-size:13px;
  147. text-align:left;
  148. font-weight:600;
  149. letter-spacing:1px;
  150. font-style:italic;
  151. text-transform:uppercase;
  152. color:#000;
  153. }
  154.  
  155. .links {
  156. margin-bottom:15px;
  157. position:relative;
  158. }
  159.  
  160. .links a {
  161. font-size:10.5px;
  162. display:block;
  163. padding:4px 0;
  164. border-bottom:1px solid transparent;
  165. }
  166.  
  167. .links a:hover {
  168. padding-left:5px;
  169. background:#fff;
  170. border-bottom:1px solid #dcecf5;
  171. }
  172.  
  173. ul#tabs {
  174. list-style-type:none;
  175. padding:0;
  176. text-align:left;
  177. border-bottom:1px solid #dcecf5;
  178. padding-bottom:8px;
  179. }
  180.  
  181. ul#tabs a {
  182. color:#8892e0;
  183. }
  184.  
  185. ul#tabs li {
  186. display:inline-block;
  187. padding:8px 10px;
  188. margin:0 0 -10px 0;
  189. color:#8892e0;
  190. background:#fafafa;
  191. transition:all linear .4s;
  192. font-weight:600;
  193. border:1px solid #dcecf5;
  194. }
  195.  
  196. ul#tabs li:before {
  197. display:none!important;
  198. }
  199.  
  200. ul#tabs li:hover {
  201. background:#fefefe;
  202. color:#000;
  203. cursor:pointer;
  204. }
  205.  
  206. ul#tabs li.active {
  207. background:#fff;
  208. color:#000;
  209. font-weight:600;
  210. }
  211.  
  212. ul#tab {
  213. list-style-type: none;
  214. margin:0;
  215. border-radius:3px;
  216. border-bottom:1px solid #dcecf5;
  217. padding-top:10px;
  218. }
  219.  
  220. .fadeIn {
  221. -webkit-animation-name: fadeIn;
  222. animation-name: fadeIn;
  223. -webkit-animation-duration: 2s;
  224. animation-duration: 2s;
  225. -webkit-animation-fill-mode: both;
  226. animation-fill-mode: both;
  227. }
  228.  
  229. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  230. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  231. @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  232. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  233.  
  234. .tabs-container {
  235. background:#fff; /* kills fadding in/out IE text bug */
  236. }
  237.  
  238. .search {
  239. position:fixed;
  240. width:50px;
  241. }
  242.  
  243. .search .query {
  244. width:50px;
  245. border:0;
  246. border-bottom:1px solid #dcecf5;
  247. outline:0;
  248. padding:6px 0;
  249. font-size:9px;
  250. font-style:none;
  251. color:#8892e0;
  252. margin-top:-10px;
  253. background:#fafafa;
  254. }
  255.  
  256. ::-webkit-input-placeholder { color:#8892e0; }
  257. :-moz-placeholder { color:inherit; opacity:1; }
  258. ::-moz-placeholder { color:inherit; opacity:1; }
  259. :-ms-input-placeholder { color:inherit; }
  260.  
  261. input:focus::-webkit-input-placeholder { color:transparent; }
  262. input:focus:-moz-placeholder { color:transparent; }
  263. input:focus::-moz-placeholder { color:transparent; }
  264. input:focus:-ms-input-placeholder { color:transparent; }
  265.  
  266. /* about */
  267.  
  268. .icon {
  269. float:right;
  270. margin:10px 0;
  271. padding:5px;
  272. display:inline;
  273. }
  274.  
  275. .icon img {
  276. width:60px;
  277. height:60px;
  278. border-radius:3px;
  279. opacity:.9;
  280. }
  281.  
  282. .info {
  283. margin:0;
  284. font-size:11px;
  285. font-family:'source serif pro',sans-serif;
  286. position:relative;
  287. font-style:italic;
  288. background:#fff;
  289. padding:10px;
  290. border:1px solid #dcecf5;
  291. }
  292.  
  293. .fact {
  294. padding:5px;
  295. margin:5px 5px;
  296. letter-spacing:1px;
  297. text-transform:uppercase;
  298. font-size:8px;
  299. text-align:left;
  300. display:table;
  301. color:#444;
  302. border:1px solid #dcecf5;
  303. background:#fdfdfd; /* fact bg */
  304. }
  305.  
  306. .talk {
  307. font-family:'source sans pro',sans-serif;
  308. line-height:13px;
  309. margin-top:15px;
  310. position:relative;
  311. overflow:scroll;
  312. max-height:350px;
  313. }
  314.  
  315. /* links and tags */
  316.  
  317. .nav {
  318. max-height:350px;
  319. overflow:scroll;
  320. }
  321.  
  322. /* links */
  323.  
  324. .et {
  325. font-style:italic;
  326. font-size:11px;
  327. font-weight:600;
  328. }
  329.  
  330. .explore {
  331. margin-top:0;
  332. margin-bottom:10px;
  333. }
  334.  
  335. .explore a {
  336. display:inline-block;
  337. background:#fafafa; /* links bg */
  338. border:1px solid transparent;
  339. padding:4px 6px;
  340. margin-right:8px;
  341. margin-top:8px;
  342. transition:all .8s ease;
  343. -webkit-transition:all .8s ease;
  344. -moz-transition:all .8s ease;
  345. -o-transition:all .8s ease;
  346. }
  347.  
  348. .explore a:hover {
  349. color:#000;
  350. background:#fff;
  351. border:1px solid #dcecf5;
  352. }
  353.  
  354. /* tags */
  355.  
  356. .tags .sub {
  357. font-style:italic;
  358. background:#fff; /* subheading bg */
  359. border:1px dotted #dcecf5;
  360. font-family:'pt serif', sans-serif;
  361. padding:6px;
  362. width:calc((340px / 3) - 12px);
  363. font-weight:400;
  364. color:#000;
  365. letter-spacing:.5px;
  366. }
  367.  
  368. .tags {
  369. display:inline-block;
  370. float:left;
  371. width:calc(340px / 3);
  372. background:#fafafa; /* tags bg */
  373. padding-bottom:10px;
  374. }
  375.  
  376. .tags a {
  377. padding:5px;
  378. display:block;
  379. border-bottom:1px solid #dcecf5;
  380. }
  381.  
  382. .tags a:hover {
  383. padding-left:15px;
  384. background:#fff;
  385. border-bottom:1px solid transparent;
  386. }
  387.  
  388. /* blogroll */
  389.  
  390. .blogroll {
  391. max-height:350px;
  392. overflow:scroll;
  393. }
  394.  
  395. .hi {
  396. float:center;
  397. display:inline-block;
  398. margin-top:0;
  399. }
  400.  
  401. .hi img {
  402. margin:7px;
  403. width:35px;
  404. height:35px;
  405. border-radius:5px;
  406. opacity:.8;
  407. transition:all .6s ease;
  408. -webkit-transition:all .6s ease;
  409. -moz-transition:all .6s ease;
  410. -o-transition:all .6s ease;
  411. }
  412.  
  413. .hi img:hover {
  414. opacity:1;
  415. position:relative;
  416. border-radius:25px;
  417. transition:all .6s ease;
  418. -webkit-transition:all .6s ease;
  419. -moz-transition:all .6s ease;
  420. -o-transition:all .6s ease;
  421. }
  422.  
  423. /* ask */
  424.  
  425. .ask {
  426. max-height:350px;
  427. overflow:scroll;
  428. padding-bottom:5px;
  429. }
  430.  
  431. .faq {
  432. border-bottom:1px dotted #dcecf5;
  433. padding-bottom:5px;
  434. }
  435.  
  436. .q {
  437. padding-top:8px;
  438. font-weight:bold;
  439. margin-bottom:5px;
  440. }
  441.  
  442. .a {
  443. margin-bottom:5px;
  444. font-style:italic;
  445. color:#888;
  446. }
  447.  
  448. /* do not disturb */
  449.  
  450. .lo {
  451. bottom:20px;
  452. right:20px;
  453. position:fixed;
  454. }
  455.  
  456. .lo a {
  457. text-transform:uppercase;
  458. border-bottom:1px solid #dcecf5;
  459. padding:6px 5px;
  460. font-size:11px;
  461. }
  462.  
  463. .lo a:hover {
  464. color:#000;
  465. }
  466.  
  467. </style>
  468. </head>
  469.  
  470. <body>
  471.  
  472. <div id="header">
  473. <div class="title">explore</div>
  474. <div class="links">
  475. <a href="/">home</a>
  476. <a href="/ask">ask</a>
  477. <a href="/">link</a>
  478. <a href="http://loranhale.tumblr.com">theme</a>
  479. </div>
  480. <form action="/search" method="get" class="search">
  481. <input type="text" name="q" value="{SearchQuery}" class="query" placeholder="search"></input>
  482. </div>
  483.  
  484. <div id="con">
  485.  
  486. <ul id="tabs">
  487. <li data-tabs="t1" class="active">about</li>
  488. <li data-tabs="t2">navigate</li>
  489. <li data-tabs="t3">explore</li>
  490. <li data-tabs="t4">blogroll</li>
  491. <li data-tabs="t5">mail</li>
  492. </ul>
  493.  
  494. <ul id="tab">
  495.  
  496. <li class="things" id="t1">
  497. <div class="about">
  498.  
  499. <div class="info">
  500. <b>justina</b>, xvii, aquarius <br>
  501. fictional boys enthusiast
  502. </div>
  503.  
  504. <div class="icon"><img src="http://i.imgur.com/dX4bQMz.png" /></div>
  505.  
  506. <div class="talk">
  507. <b>hello</b> <i>it's me bla bla bla</i> <br>
  508. <blockquote>what's up</blockquote>
  509. <a href="/">this is a link</a>
  510.  
  511. <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla condimentum vel tellus vitae volutpat. aliquam ut quam ac elit congue luctus. nam a lacus sed odio iaculis luctus a in turpis. aenean erat libero, dapibus at porttitor in, auctor sed urna. aenean a molestie est. sed rhoncus justo sit amet felis sodales maximus. etiam pharetra nibh dolor, nec imperdiet enim hendrerit a. pellentesque et dolor sed ligula bibendum dignissim sit amet quis lectus. praesent ornare sem dolor, ut tristique massa tincidunt eget. morbi viverra id mi sed efficitur. integer id maximus enim, nec placerat nisi. ut consequat augue enim, a eleifend mauris tristique et.</p>
  512.  
  513. <p>dapibus at porttitor in, auctor sed urna. aenean a molestie est. sed rhoncus justo sit amet felis sodales maximus. etiam pharetra nibh dolor, nec imperdiet enim hendrerit a. pellentesque et dolor sed ligula bibendum dignissim sit amet quis lectus. praesent ornare sem dolor. pellentesque et dolor sed ligula bibendum dignissim sit amet quis lectus. praesent ornare sem dolor.</p>
  514. </div>
  515.  
  516. </div>
  517. </li>
  518.  
  519. <li class="things" id="t2">
  520. <div class="nav">
  521.  
  522. <div class="et">heading</div>
  523. <div class="explore">
  524. <a href="/">link name</a>
  525. <a href="/">link name</a>
  526. <a href="/">link name</a>
  527. <a href="/">link name</a>
  528. <a href="/">link name</a>
  529. <a href="/">link name</a>
  530. <a href="/">link name</a>
  531. <a href="/">link name</a>
  532. <!-- add or remove as many as you want -->
  533. </div>
  534.  
  535. <div class="et">heading</div>
  536. <div class="explore">
  537. <a href="/">link name</a>
  538. <a href="/">link name</a>
  539. <a href="/">link name</a>
  540. <a href="/">link name</a>
  541. <a href="/">link name</a>
  542. <a href="/">link name</a>
  543. <a href="/">link name</a>
  544. <a href="/">link name</a>
  545. </div>
  546.  
  547. </div>
  548. </li>
  549.  
  550. <li class="things" id="t3">
  551. <div class="nav">
  552.  
  553. <div class="tags">
  554. <div class="sub">subheading</div>
  555. <a href="/">tag name</a>
  556. <a href="/">tag name</a>
  557. <a href="/">tag name</a>
  558. <a href="/">tag name</a>
  559. <a href="/">tag name</a>
  560. <a href="/">tag name</a>
  561.  
  562. <!--
  563. IMPORTANT: THE MAX NO OF TAGS IS 6.
  564. DON'T ADD ANYMORE it'll mess up the layout. same goes for rest
  565. -->
  566.  
  567. </div>
  568.  
  569. <div class="tags">
  570. <div class="sub">subheading</div>
  571. <a href="/">tag name</a>
  572. <a href="/">tag name</a>
  573. <a href="/">tag name</a>
  574. <a href="/">tag name</a>
  575. </div>
  576.  
  577. <div class="tags">
  578. <div class="sub">subheading</div>
  579. <a href="/">tag name</a>
  580. <a href="/">tag name</a>
  581. <a href="/">tag name</a>
  582. <a href="/">tag name</a>
  583. <a href="/">tag name</a>
  584. <a href="/">tag name</a>
  585. </div>
  586.  
  587. <div class="tags">
  588. <div class="sub">subheading</div>
  589. <a href="/">tag name</a>
  590. <a href="/">tag name</a>
  591. <a href="/">tag name</a>
  592. <a href="/">tag name</a>
  593. </div>
  594.  
  595. <div class="tags">
  596. <div class="sub">subheading</div>
  597. <a href="/">tag name</a>
  598. <a href="/">tag name</a>
  599. <a href="/">tag name</a>
  600. <a href="/">tag name</a>
  601. <a href="/">tag name</a>
  602. </div>
  603.  
  604. <div class="tags">
  605. <div class="sub">subheading</div>
  606. <a href="/">tag name</a>
  607. <a href="/">tag name</a>
  608. <a href="/">tag name</a>
  609. <a href="/">tag name</a>
  610. </div>
  611.  
  612. <!-- add as many as you want -->
  613.  
  614. </div>
  615. </li>
  616.  
  617. <li class="things" id="t4">
  618. <div class="blogroll">
  619.  
  620. <!-- no editing required -->
  621. {block:Following}{block:Followed}<div class="hi"><a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-128}"></a></div>{/block:Followed}{/block:Following}
  622.  
  623. </div>
  624. </li>
  625.  
  626. <li class="things" id="t5">
  627. <div class="ask">
  628.  
  629. <div class="faq">
  630. <div class="q">i track the tag <b>#tag</b></div>
  631. <div class="a">tag me in your stuff!</div>
  632. </div>
  633.  
  634. <div class="faq">
  635. <div class="q">the ask</div>
  636. <div class="a">and the answer</div>
  637. </div>
  638.  
  639. <iframe frameborder="0" scrolling="no" width="100%" max-height="180" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden; margin-top:15px" id="ask_form"></iframe>
  640.  
  641. </div>
  642. </li>
  643.  
  644. </ul>
  645. </div>
  646.  
  647. <!-- danger! keep out -->
  648.  
  649. <div class="lo">
  650. <a href="http://loranhale.tumblr.com" title="theme">j</a>
  651. </div>
  652.  
  653. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  654.  
  655. <script>
  656. // TABS SHORTCODE tweaked by hermionegrangcr
  657.  
  658. $(function(e) {
  659.  
  660. $('.things').hide().filter(':first').show();
  661.  
  662. $('ul#tabs li[data-tabs]').on('click', function () {
  663.  
  664. $(this).siblings().removeClass('active');
  665. $('.things').hide();
  666.  
  667. var tab = $(this).data('tabs');
  668. $(this).addClass('active');
  669. $('#' + tab).fadeIn().show();
  670. });
  671.  
  672.  
  673.  
  674.  
  675. $("#tabs li").click(function(){
  676. var cur =$("#tabs li").index(this);
  677. var elm = $('.things:eq('+cur+')');
  678. elm.addClass("fadeIn");
  679. setTimeout(function() {
  680. elm.removeClass("fadeIn");
  681. }, 220);
  682. });
  683.  
  684. });
  685.  
  686. </script>
  687.  
  688.  
  689. <!--Tooltips. It's placed here bc it's only compatible to jQuery 1.7-->
  690. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  691. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  692.  
  693. <script>
  694. jQuery.noConflict();
  695. (function($){
  696.  
  697. $(document).ready(function(){
  698.  
  699. $("a[title],img[title],[title]").style_my_tooltips({
  700.  
  701. tip_follows_cursor:true,
  702.  
  703. tip_delay_time:200,
  704.  
  705. tip_fade_speed:300,
  706.  
  707. attribute:"title"
  708.  
  709. });
  710.  
  711. });
  712.  
  713. })(jQuery);
  714. </script>
  715. <!--Tooltips-->
  716.  
  717. </body>
  718. </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!