API tools faq
paste
Advertisement
loranhale

perth (v2)

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