API tools faq
paste
Advertisement
neothm

#16 HOOPS

neothm
Jul 27th, 2016
4,360
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.37 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <!--
  5.  
  6. #16 HOOPS BY NEO
  7. ================
  8.  
  9. ### It is IMPORTANT that you do not delete any of the following.
  10.  
  11. ## Information
  12. Author: @MTRICS | @NEOTHM
  13. Release: 27/06/2016
  14. Version: 0.0.2
  15. Latest update: Aug. 04
  16. Log: PERMALINK fix sfodhswd
  17.  
  18. ## Dependencies
  19. Photosets: © Pixel Union
  20. Videos: © shythemes
  21. Masonry: © David Desandro
  22. Images loaded: © David Desandro
  23. Infinite Scroll: © Paul Irish
  24. Photosets: © Pixel Union
  25. Tooltips: © Style my tooltips
  26. Inspiration: Instagram, @odeysseus, @acuite
  27.  
  28. ## F.A.Q
  29. Q: Why are the tags cut A: They're just a preview; to see
  30. off on the main page? them in full you'll have to go
  31. to the permalink page
  32.  
  33. ## Links
  34. Support http://neothm.com/tagged/q&a
  35. > #16 SPECIFIC http://neothm.com/tagged/a:16
  36. Terms of use http://neothm.com/terms
  37. Tips & tricks http://neothm.com/tagged/101
  38.  
  39. ## License
  40. LICENSED UNDER CREATIVE COMMONS ATTRIBUTION-NONCOMMERCIAL-
  41. NODERIVATIVES 4.0 INTERNATIONAL LICENSE (CC BY-NC-ND 4.0)
  42. [http://creativecommons.org/licenses/by-nc-nd/4.0/]
  43. (CC) 2016, NEO @NEOTHM
  44.  
  45. Permission to use and modify this theme for personal purposes
  46. is hereby granted, provided that the above notice and this
  47. permission notice remain in all copies.
  48.  
  49. THIS THEME IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL
  50. WARRANTIES WITH REGARD TO THE FOLLOWING CODE.
  51.  
  52. -->
  53. <title>{block:PostTitle}{PostTitle} | {/block:PostTitle}{Title}</title>
  54. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  55. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  56. <meta name="author" content="neothm">
  57. <link rel="stylesheet" href="http://static.tumblr.com/emvnqzg/ZjEo04ht8/pxu.css">
  58. <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  59. <link href='https://fonts.googleapis.com/css?family={text:GoogleFont}:400,400italic,700,700italic|{text:GoogleFontTitle}:500,700' rel='stylesheet' type='text/css'>
  60. <link rel="shortcut icon" href="{image:Favicon}">
  61. <!--
  62. OPTIONS
  63. -->
  64. <meta name="text:GoogleFont" content="Roboto">
  65. <meta name="text:GoogleFontTitle" content="Playfair Display">
  66. <meta name="select:FontSize" content="9px">
  67. <meta name="select:FontSize" content="10px">
  68. <meta name="select:FontSize" content="11px">
  69. <meta name="select:FontSize" content="12px">
  70. <meta name="select:FontSize" content="13px">
  71. <meta name="select:FontSize" content="14px">
  72. <meta name="color:BackgroundColor" content="#ffffff">
  73. <meta name="color:Text" content="#3B3B3B">
  74. <meta name="color:Links" content="#aaaaaa">
  75. <meta name="color:LinksHover" content="#000000">
  76. <meta name="image:Favicon" content="{Favicon}">
  77. <meta name="image:Header" content="">
  78. <meta name="image:Background" content="">
  79. <meta name="if:FullSizeBackground" content="1">
  80. <meta name="image:HeaderAvatar" content="">
  81. <meta name="color:HeaderLayer" content="#ffffff">
  82. <meta name="text:HeaderWidth" content="400px">
  83. <meta name="text:HeaderHeight" content="200px">
  84. <meta name="text:HeaderSubtitle" content="Rocking the boat">
  85. <meta name="color:HeaderTitle" content="#000000">
  86. <meta name="text:PostWidth" content="400px">
  87. <meta name="text:PostWidthPermalink" content="600px">
  88. <meta name="if:RoundCorners" content="1">
  89. <meta name="if:ShowDescription" content="1">
  90. <meta name="text:PostSpacing" content="50px">
  91. <meta name="text:PostPadding" content="10px">
  92. <meta name="text:PhotosetSpacing" content="2px">
  93. <meta name="if:ShowCaption" content="1">
  94. <meta name="if:CaptionAvatar" content="1">
  95. <meta name="select:NumberOfColumns" content="c1" title="Single Column">
  96. <meta name="select:NumberOfColumns" content="c2" title="2 Columns">
  97. <meta name="select:NumberOfColumns" content="c3" title="3 Columns">
  98. <meta name="select:NumberOfColumns" content="c4" title="4 Columns">
  99. <meta name="select:NumberOfColumns" content="c5" title="5 Columns">
  100. <meta name="select:NextPage" content="pagi" title="Pagination">
  101. <meta name="select:NextPage" content="ldmr" title="Load button">
  102. <meta name="select:NextPage" content="ifnt" title="Infinite Scroll">
  103. <meta name="text:Link1URL" content="/">
  104. <meta name="text:Link1Name" content="">
  105. <meta name="text:Link2URL" content="/">
  106. <meta name="text:Link2Name" content="">
  107. <meta name="text:Link3URL" content="/">
  108. <meta name="text:Link3Name" content="">
  109. <meta name="text:Link4URL" content="/">
  110. <meta name="text:Link4Name" content="">
  111. <meta name="text:Link5URL" content="/">
  112. <meta name="text:Link5Name" content="">
  113. <meta name="text:Link6URL" content="/">
  114. <meta name="text:Link6Name" content="">
  115. <meta name="text:Link7URL" content="/">
  116. <meta name="text:Link7Name" content="">
  117. <style type="text/css">
  118. *{
  119. margin:0;
  120. padding:0;
  121. }
  122. html, body{
  123. height:100%;
  124. }
  125. body, small, input, pre, big, textarea{
  126. color:{color:Text};
  127. font:400 {select:FontSize}/1.7 {text:GoogleFont}, sans-serif;
  128. }
  129. body{
  130. word-break:break-word;
  131. background:{color:BackgroundColor} url('{image:Background}');
  132. background-attachment:fixed;
  133. {block:ifFullSizeBackground}
  134. background-size:cover;
  135. {/block:ifFullSizeBackground}
  136. -webkit-font-smoothing: antialiased;
  137. -moz-osx-font-smoothing: grayscale;
  138. }
  139. #noscroll{
  140. overflow-x:hidden;
  141. }
  142. a{
  143. color:{color:Links};
  144. text-decoration:none;
  145. }
  146. a:hover{
  147. color:{color:LinksHover};
  148. cursor:pointer!important;
  149. }
  150. ::selection{
  151. background-color:#000;
  152. color:#fff;
  153. }
  154. ::-moz-selection{
  155. background-color:#000;
  156. color:#fff;
  157. }
  158. ::-webkit-scrollbar{
  159. width:11px;
  160. height:11px;
  161. background-color:{color:BackgroundColor};
  162. }
  163. ::-webkit-scrollbar-track{
  164. border:5px solid {color:BackgroundColor};
  165. background-color:{color:BackgroundColor};
  166. }
  167. ::-webkit-scrollbar-thumb{
  168. border:5px solid {color:BackgroundColor};
  169. background-color: {color:Text};
  170. }
  171. .tmblr-iframe.iframe-controls--desktop,
  172. #tumblr_controls{
  173. position:fixed;
  174. top: 30px!important;
  175. right:0;
  176. transform:scale(.9);
  177. -webkit-transform:scale(.9);
  178. -moz-transform:scale(.9);
  179. z-index:999999999!important;
  180. filter:invert(100%);
  181. -webkit-filter:invert(100%);
  182. -moz-filter:invert(100%);
  183. -ms-filter:invert(100%);
  184. -o-filter:invert(100%);
  185.  
  186. }
  187. .tmblr-iframe.iframe-controls--desktop.scrolled,
  188. #tumblr_controls.scrolled{
  189. top:10px!important;
  190. opacity:.7;
  191. transform:scale(.7);
  192. -webkit-transform:scale(.7);
  193. -moz-transform:scale(.7);
  194. }
  195. .tmblr-lightbox{
  196. background-color: rgba(240,240,240,.9)!important;
  197. }
  198. .tmblr-lightbox .vignette{
  199. background-image:none!important;
  200. }
  201. .tmblr-lightbox .lightbox-image {
  202. box-shadow:none!important;
  203. outline: 20px solid #fff;
  204. }
  205. #s-m-t-tooltip{
  206. margin:15px;
  207. padding:5px 15px;
  208. border-radius:4px;
  209. background:rgba(0,0,0,.8);
  210. color:#ff0;
  211. text-align:center;
  212. text-transform:uppercase;
  213. max-width:120px;
  214. font:10px/1.5 serif;
  215. letter-spacing:1px;
  216. }
  217.  
  218. /*
  219. TRANSITIONS
  220. */
  221. .intrctv .dropdown.active ul, .intrctv .dropdown ul,
  222. .tags p, .tags.active p,
  223. .tmblr-iframe.iframe-controls--desktop.scrolled,
  224. #tumblr_controls.scrolled,
  225. .tmblr-iframe.iframe-controls--desktop,
  226. #tumblr_controls,
  227. a, a:hover{
  228. transition-duration:.3s;
  229. -webkit-transition-duration:.3s;
  230. -moz-transition-duration:.3s;
  231. -ms-transition-duration:.3s;
  232. -o-transition-duration:.3s;
  233. }
  234. header:hover > div img, header > div img,
  235. nav, header:hover nav,
  236. header:after, header:hover:after{
  237. transition-duration:.6s;
  238. -webkit-transition-duration:.6s;
  239. -moz-transition-duration:.6s;
  240. -ms-transition-duration:.6s;
  241. -o-transition-duration:.6s;
  242. }
  243.  
  244. /*
  245. CLEARFIX
  246. */
  247. section:after,
  248. nav:after,
  249. .intrctv:after{
  250. display:table;
  251. content:"";
  252. clear:both;
  253. }
  254. /*
  255. HIDE
  256. */
  257. {block:IndexPage}
  258. {block:ifNotShowCaption}article.isMedia .caption.hde,{/block:ifNotShowCaption}{/block:IndexPage}
  259. #infscr-loading, article.isChat .caption,
  260. article.isQuote:not(.hasSource) .caption,
  261. article.isMedia:not(.hasCap) .caption,
  262. footer.ldmr .pagination,
  263. footer.pagi #ldmrbtn,
  264. footer.ifnt{
  265. display:none!important;
  266. }
  267. /*
  268. COMMONS
  269. */
  270.  
  271. header, section{
  272. margin-left:auto;
  273. margin-right:auto;
  274. position:relative;
  275. }
  276. header > div, nav{
  277. position:absolute;
  278. z-index:1;
  279. }
  280. .intrctv ul,
  281. nav ul{
  282. list-style:none;
  283. }
  284. {block:ifRoundCorners}
  285. article, header, .backtop, .audplay img, .audplay .audio_player, #ldmrbtn{
  286. border-radius:5px;
  287. }
  288. {/block:ifRoundCorners}
  289. /*
  290. THEME
  291. */
  292. header{
  293. background:url('{image:Header}') no-repeat center;
  294. background-size:cover;
  295. margin-top:100px;
  296. margin-bottom:100px;
  297. width:{text:HeaderWidth};
  298. height:{text:HeaderHeight};
  299. overflow:hidden;
  300. }
  301. header:after{
  302. content:"";
  303. z-index:0;
  304. width:120%;
  305. height:100%;
  306. position:absolute;
  307. background-color:{color:HeaderLayer};
  308. top:0%;
  309. left:100%;
  310. -ms-transform: skew(-20deg);
  311. -webkit-transform: skew(-20deg);
  312. transform: skew(-20deg);
  313. opacity:0;
  314. transition-delay:.4s;
  315. }
  316.  
  317. header:hover:after{
  318. top:0;
  319. left:-10%;
  320. -ms-transform: skew(-60deg);
  321. -webkit-transform: skew(-60deg);
  322. transform: skew(-60deg);
  323. opacity:1;
  324. transition-delay:0s;
  325. }
  326.  
  327.  
  328. header > div{
  329. /*bottom:10%;
  330. top:25%;
  331. left:15%;*/
  332. top:50%;
  333. left:50%;
  334. margin-top:-13%;
  335. margin-left:-38%;
  336. bottom:10%;
  337. }
  338. header > div img{
  339. box-sizing:border-box;
  340. border:3px solid {color:HeaderLayer};
  341. display:block;
  342. width:70px;
  343. border-radius:35px;
  344. opacity:0;
  345. transform:translate(-200%, -50%);
  346. transition-delay:0s;
  347. }
  348. header:hover > div img{
  349. opacity:1;
  350. transform:translate(-50%, -50%);
  351. transition-delay:.4s;
  352. }
  353. header h1{
  354. position:absolute;
  355. white-space:nowrap;
  356. font-size:24px;
  357. bottom:10px;
  358. left:-35px;
  359.  
  360. font:bold 22px/1.3 {text:GoogleFontTitle}, Arial, sans-serif;
  361. }
  362. header h1 a{
  363. color:{color:HeaderTitle};
  364. }
  365.  
  366. header h1 span{
  367. display:block;
  368. font-size:12px;
  369. font-weight:500;
  370. letter-spacing:.3px;
  371. }
  372. nav{
  373. width:50%;
  374. text-align:right;
  375. right:10%;
  376. top:10%;
  377. opacity:0;
  378. }
  379. header:hover nav{
  380. opacity:1;
  381. }
  382. {block:IfShowDescription}
  383. nav ul{
  384. width:30%;
  385. float:right;
  386. font-size: smaller;
  387. }
  388. nav > div{
  389. width:calc(70% - 10px);
  390. float:left;
  391. padding-right:10px;
  392. font-size:smaller;
  393. }
  394. {/block:IfShowDescription}
  395. {block:IfNotShowDescription}
  396. nav > div{
  397. display:none;
  398. }
  399. {/block:IfNotShowDescription}
  400. nav li{
  401. text-transform:uppercase;
  402. display:block;
  403. }
  404. {block:PermalinkPage}
  405. section{
  406. width:{text:PostWidthPermalink};
  407. }
  408. {/block:PermalinkPage}
  409. {block:IndexPage}
  410. section.c1{
  411. width:{text:PostWidth};
  412. }
  413. section.c2{
  414. width:calc( ({text:PostWidth} + ({text:PostSpacing} * 2) ) * 2);
  415. }
  416. section.c3{
  417. width:calc(({text:PostWidth} + ({text:PostSpacing} * 2)) * 3);
  418. }
  419. section.c4{
  420. width:calc(({text:PostWidth} + ({text:PostSpacing} * 2)) * 4);
  421. }
  422. section.c5{
  423. width:calc(({text:PostWidth} + ({text:PostSpacing} * 2)) * 5);
  424. }
  425. section.c1 article{
  426. margin:{text:PostSpacing} 0;
  427. }
  428. section:not(.c1) article{
  429. float:left;
  430. margin:{text:PostSpacing};
  431. }
  432. {/block:IndexPage}
  433. article{
  434. /*overflow:hidden;*/
  435. background-color:#fff;
  436. {block:IndexPage}
  437. width:{text:PostWidth};
  438. {/block:IndexPage}
  439. {block:PermalinkPage}
  440. width:{text:PostWidthPermalink};
  441. margin-bottom:0px;
  442. {/block:PermalinkPage}
  443. }
  444. {block:PermalinkPage}
  445. article.noties{
  446. margin-top:{text:PostPadding};
  447. }
  448. article:last-of-type{
  449. margin-bottom:150px;
  450. }
  451. ol.notes{
  452. font-size: 0;
  453. margin: {text:PostPadding} {text:PostPadding} 0;
  454. text-align: center;
  455. }
  456. li.note {
  457. list-style: none;
  458. display: inline-block;
  459. margin: 10px;
  460. }
  461. img.avatar{
  462. width: 30px;
  463. border-radius: 3px;
  464. }.note.more_notes_link_container{
  465. text-align: center;
  466. display: block;
  467. padding-bottom: 30px;
  468. }
  469. .more_notes_link{
  470. display: inline-block;
  471. width:30px;
  472. height:30px;
  473. background: #fff url('http://static.tumblr.com/wgg6svp/vGzo7wew4/loadmore.png') top center no-repeat;
  474. background-size: 20px 20px;
  475. }
  476. .more_notes_link:hover{
  477. transform:rotate(30deg);
  478. }
  479. {/block:PermalinkPage}
  480. .intrctv{
  481. padding:5px {text:PostPadding};
  482.  
  483. line-height:35px;
  484. }
  485. .intrctv.head ul{
  486. font-size:25px;
  487. text-align:right;
  488. }
  489. {block:IndexPage}
  490. .intrctv.head:not(.answ){
  491. padding-top:5px;
  492. padding-bottom:0px;
  493. line-height: 30px;
  494. }
  495. .intrctv.head.answ{
  496. padding-top:10px;
  497. }
  498. {/block:IndexPage}
  499. {block:PermalinkPage}
  500. .intrctv.head{
  501. padding-top:10px;
  502. }
  503. .intrctv.head:not(.answ){
  504. display:none;
  505. }
  506. article{
  507. overflow:hidden;
  508. }
  509. article:not(.isMedia){
  510. padding-top:{text:PostPadding};
  511. }
  512. {/block:PermalinkPage}
  513.  
  514. .intrctv.head .dropdown > li > span{
  515. display:block;
  516. transform:rotate(90deg);
  517. moz-transform:rotate(90deg);
  518. float: right;
  519. position: relative;
  520. }
  521.  
  522. .intrctv ul{
  523. float:right;
  524. display:table;
  525. font-size:15px;
  526. }
  527. .intrctv .dropdown > li{
  528. position:relative;
  529. width:100px;
  530. }
  531. .intrctv .dropdown ul{
  532. position:absolute;
  533. background-color:#fff;
  534. text-align:center;
  535. width:100%;
  536. font-size:10px;
  537. right: 0px;
  538. transform: translateX(50%);
  539. -moz-transform: translateX(50%);
  540. border:1px solid #f2f2F2;
  541. border-bottom:none;
  542. top: 15px;
  543. visibility:hidden;
  544. opacity:0;
  545. z-index:9999;
  546. }
  547. .intrctv .dropdown.active ul{
  548. top: 35px;
  549. visibility:visible;
  550. opacity:1;
  551. }
  552. .intrctv .dropdown ul li{
  553. display:block;
  554. margin:0px;
  555. line-height:30px;
  556. border-bottom:1px solid #f2f2F2;
  557. }
  558. .intrctv.fig ul{
  559. overflow:hidden;
  560. }
  561. .intrctv.head a,
  562. .intrctv.fig ul li a{
  563. color:{color:Text};
  564. }
  565.  
  566. .like{
  567. position:relative;
  568. }
  569. .like .like_button{
  570. position:absolute;
  571. left:-3px;
  572. top:2px;
  573. opacity:0;
  574. }
  575. .like .like_button.liked + span{
  576. color:red!important;
  577. }
  578.  
  579. .tags p{
  580. font-size:x-small;
  581. display:inline-block;
  582. vertical-align:3px;
  583. text-transform:uppercase;
  584. white-space:nowrap;
  585. max-width:0px;
  586. opacity:0;
  587. }
  588. .tags.active p{
  589. max-width:150px;
  590. opacity:1;
  591. }
  592. .tags p a{
  593. margin-left:5px;
  594. color:{color:Links};
  595. }
  596. .tags p a:hover{
  597. color:{color:LinksHover};
  598. }
  599. .tags p a:nth-child(n+4){
  600. display:none;
  601. }
  602.  
  603. .like:hover,
  604. .tags:hover{
  605. cursor:pointer!important;
  606. }
  607.  
  608. .reblogRoot{
  609. display:table;
  610. float:left;
  611. text-transform:uppercase;
  612. letter-spacing:1px;
  613. color:#000;
  614. font-size:10px;
  615.  
  616. }
  617. {block:IfCaptionAvatar}
  618. .reblogRoot img{
  619. width:20px;
  620. vertical-align:-6px;
  621. border-radius:10px;
  622. margin-right:{text:PostPadding};
  623. }
  624. .reblogRoot img,{/block:IfCaptionAvatar}
  625. .reblogRoot span{
  626. display:inline-block;
  627. }
  628.  
  629. .intrctv li{
  630. margin-left:15px;
  631. display:inline-block;
  632. }
  633.  
  634. .caption{
  635. padding:0 {text:PostPadding} 15px;
  636. }
  637. .tumblr_blog{
  638. display:inline-block;
  639. margin-right:5px;
  640. }
  641. article.isChat .media ul{
  642. list-style:none;
  643. margin:0 {text:PostPadding};
  644. }
  645. article.isChat .media ul li{
  646. padding:5px;
  647. }
  648. article.isChat .media ul li:nth-child(odd){
  649. background-color:#f6f6f6;
  650. }
  651.  
  652. article.isReblogged .caption > blockquote,
  653. article.isReblogged .caption > p,
  654. article.isReblogged .caption blockquote :first-child:not(li)
  655. {
  656. display:inline;
  657. }
  658.  
  659.  
  660. .caption *:not(:last-child):not(li):not(hr){
  661. padding-bottom:10px;
  662. }
  663. .caption hr{
  664. margin:15px 20%;
  665. border-left:none;border-right:none;border-bottom:none;
  666. border-top:1px solid #f2f2f2;
  667. }
  668. .caption ul,
  669. .caption ol{
  670. padding-left:30px;
  671. }
  672. article h2{
  673. font:22px/1.3 {text:GoogleFontTitle}, 'Arial', sans-serif;
  674. margin:5px {text:PostPadding};
  675. }
  676. .caption li{
  677. padding-bottom:3px;
  678. }
  679.  
  680. article img{
  681. display:block;
  682. max-width:100%;
  683. }
  684. .pictures{
  685. min-width:100%;
  686. }
  687. .caption img{
  688. height:auto;
  689. }
  690. .question{
  691. margin:0 {text:PostPadding} {text:PostPadding};
  692. }
  693. .aud{
  694. display:table;
  695. width:100%;
  696. box-sizing:border-box;
  697. padding: 0 {text:PostPadding} {text:PostPadding};
  698. }
  699. .audplay, .audinfo{
  700. vertical-align:middle;
  701. display:table-cell;
  702. }
  703. .audplay{
  704. width:100px;
  705. position:relative;
  706. overflow:hidden;
  707. }
  708. .audplay .audio_player{
  709. position:absolute;
  710. top:50%;
  711. left:50%;
  712. transform:translate(-50%, -50%);
  713. overflow:hidden;
  714. width:40px;
  715. height:40px;
  716. }
  717. .audplay iframe{
  718. width:40px;
  719. height:40px;
  720. overflow:hidden;
  721. }
  722. .audplay img{
  723. display:block;
  724. }
  725. .audinfo{
  726. padding-left:20px;
  727. line-height:1.2;
  728. }
  729. .audinfo b{
  730. font: bold 22px/2 {text:GoogleFontTitle}, Arial, sans-serif;
  731. display: block;
  732. }
  733. .audinfo p span{
  734. display:inline-block;
  735. font-size:15px;
  736. width:20px;
  737. vertical-align:middle;
  738. margin-right:10px;
  739. color:#aaa;
  740. }
  741. .audinfo p:last-child{
  742. padding-bottom:10px;
  743. }
  744. .permalink{
  745. border-top:1px solid #f2f2f2;
  746. padding:{text:PostPadding} 0;
  747. margin:0 {text:PostPadding};
  748. }
  749. .permalink .tgs a{
  750. margin-left:5px;
  751. }
  752. footer{
  753. text-align:center;
  754. margin:0 {text:PostSpacing} 150px;
  755. }
  756.  
  757. #ldmrbtn{
  758. display:table;
  759. margin:0 auto;
  760. padding:5px 20px;
  761. border:1px solid #f2f2f2;
  762. background-color:#fff;
  763. font-size:10px;
  764. }
  765. #ldmrbtn span{
  766. margin-left:10px;
  767. }
  768. .pagination{
  769. font-size:14px;
  770. }
  771. .pagination span{
  772. font-weight:bold;
  773. font-style:italic;
  774. font-size:18px;
  775. vertical-align:-2px;
  776. margin:0 5px;
  777. display:inline-block;
  778. }
  779. .pagination .prv{
  780. margin-right:15px;
  781. }
  782. .pagination .nxt{
  783. margin-left:15px;
  784. }
  785. .backtop{
  786. position:fixed;
  787. bottom:70px;
  788. right:30px;
  789.  
  790. display:block;
  791. font-size:20px;
  792. line-height:1;
  793. background:#fff;
  794. width:30px;
  795. height:30px;
  796. line-height:30px;
  797. text-align:center;
  798. opacity:0;
  799.  
  800. z-index:9;
  801. }
  802. .backtop.active{
  803. opacity:1;
  804. visibility:visible;
  805. }
  806. </style>
  807. </head>
  808. <body id="noscroll">
  809. <a class="backtop ion-ios-arrow-up" href="#"></a>
  810. <header>
  811. <div>
  812. <img src="{image:HeaderAvatar}">
  813. <h1><a href="/">{Title} <span>{text:HeaderSubtitle}</span></a></h1>
  814. </div>
  815. <nav>
  816. <ul>
  817. <li>
  818. <a href="{text:Link1URL}">{text:Link1Name}</a>
  819. </li>
  820. <li>
  821. <a href="{text:Link2URL}">{text:Link2Name}</a>
  822. </li>
  823. <li>
  824. <a href="{text:Link3URL}">{text:Link3Name}</a>
  825. </li>
  826. <li>
  827. <a href="{text:Link4URL}">{text:Link4Name}</a>
  828. </li>
  829. <li>
  830. <a href="{text:Link5URL}">{text:Link5Name}</a>
  831. </li>
  832. </li>
  833. <li>
  834. <a href="{text:Link6URL}">{text:Link6Name}</a>
  835. </li>
  836. </li>
  837. <li>
  838. <a href="{text:Link7URL}">{text:Link7Name}</a>
  839. </li>
  840. </ul>
  841. {block:IfShowDescription}
  842. <div>
  843. {Description}
  844. </div>
  845. {/block:IfShowDescription}
  846. </nav>
  847. </header>
  848.  
  849.  
  850.  
  851. <section{block:IndexPage} class="{select:NumberOfColumns}"{/block:IndexPage}>
  852. {block:Posts}
  853. <article class="{block:Photo}isMedia{/block:Photo}{block:Photoset}isMedia{/block:Photoset}{block:Audio}isMedia{/block:Audio}{block:Video}isMedia{/block:Video}{block:Chat}isChat{/block:Chat}{block:Quote}isQuote{block:Source} hasSource{/block:Source}{/block:Quote}{block:Caption} hasCap{/block:Caption}{block:RebloggedFrom} isReblogged{/block:RebloggedFrom}">
  854. <div class="intrctv head{block:Answer} answ{/block:Answer}">
  855. {block:Answer}
  856. <div class="reblogRoot">
  857. {block:IfCaptionAvatar}<img src="{AskerPortraitURL-96}">{/block:IfCaptionAvatar}
  858. <span>{Asker}</span>
  859. </div>
  860. {/block:Answer}
  861. {block:IndexPage}
  862. <ul class="dropdown">
  863. <li>
  864. <span href="#" class="ion-ios-more-outline"></span>
  865. <ul>
  866. <li><a href="{Permalink}">Permalink</a></li>
  867. <li><a href="{ReblogURL}" target="_blank">Reblog</a></li>
  868. <li><a href="{Permalink}/embed" target="_blank">Share</a></li>
  869. </ul>
  870. </li>
  871. </ul>
  872. {/block:IndexPage}
  873. </div>
  874. <div class="media">
  875. {block:Photo}
  876. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="pictures">
  877. {/block:Photo}
  878.  
  879. {block:Photoset}
  880. <div class="photo-slideshow" data-layout="{PhotosetLayout}">
  881. <a onclick="Tumblr.Lightbox.init([/*{block:Photos}, /**/ { width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }{/block:Photos}]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  882. {block:Photos}
  883. <div class="photo-data">
  884. <div class="pxu-photo">
  885. <img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}">
  886. </div>
  887. </div>
  888. {/block:Photos}
  889. </a>
  890. </div>
  891. {/block:Photoset}
  892. {block:Text}
  893. {block:Title}<h2>{Title}</h2>{/block:Title}
  894. {/block:Text}
  895. {block:Link}
  896. <h2><a href="{URL}" target="{Target}">{Name} »</a></h2>
  897. {/block:Link}
  898. {block:Chat}
  899. {block:Title}<h2>{Title}</h2>{/block:Title}
  900. <ul>
  901. {block:Lines}
  902. <li>
  903. {block:Label}
  904. <b>{Label}</b>
  905. {/block:Label}
  906. {Line}
  907. </li>
  908. {/block:Lines}
  909. </ul>
  910. {/block:Chat}
  911. {block:Quote}
  912. <h2>{Quote}</h2>
  913. {/block:Quote}
  914. {block:Answer}
  915. <div class="question">
  916. {Question}
  917. </div>
  918. {/block:Answer}
  919. {block:Audio}
  920. <div class="aud">
  921. <div class="audplay">
  922. {block:AlbumArt}
  923. <img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist} ">
  924. {/block:AlbumArt}
  925. {block:AudioPlayer} {AudioPlayer} {/block:AudioPlayer}
  926. </div>
  927. <div class="audinfo">
  928. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}
  929. {block:Artist}
  930. <p><span class="ion-ios-person-outline"></span> {Artist}</p>
  931. {/block:Artist}
  932. {block:Album}
  933. <p><span class="ion-ios-play-outline"></span> {Album}</p>
  934. {/block:Album}
  935. </div>
  936. </div>
  937. {/block:Audio}
  938. {block:Video}
  939. <div class="video">{Video-500}</div>
  940. {/block:Video}
  941. </div>
  942. <div class="intrctv fig">
  943. <div class="reblogRoot">
  944. {block:RebloggedFrom}
  945. {block:IfCaptionAvatar}<img src="{ReblogRootPortraitURL-96}">{/block:IfCaptionAvatar}
  946. <span><a href="{ReblogRootURL}">{ReblogRootName}</a></span>
  947. {/block:RebloggedFrom}
  948. {block:NotReblog}
  949. {block:IfCaptionAvatar}<img src="{PortraitURL-96}">{/block:IfCaptionAvatar}
  950. <span><a href="/">{Name}</a></span>
  951. {/block:NotReblog}
  952. </div>
  953. {block:IndexPage}
  954. <ul>
  955. <li class="like">
  956. {LikeButton}
  957. <span class="ion-ios-heart-outline"></span>
  958. </li>
  959. {block:HasTags}
  960. <li class="tags">
  961. <span class="ion-ios-pricetag-outline"></span>
  962. <p>
  963. {block:Tags}
  964. <a href="{TagURL}">#{Tag}</a>
  965. {/block:Tags}
  966. </p>
  967. </li>
  968. {/block:HasTags}
  969. </ul>
  970. {/block:IndexPage}
  971. </div>
  972.  
  973. <div class="caption{block:IfNotShowCaption} hde{/block:IfNotShowCaption}">
  974. {block:Caption}{Caption}{/block:Caption}
  975. {block:Text}
  976. {Body}
  977. {/block:Text}
  978. {block:Link}
  979. {block:Description}
  980. {Description}
  981. {/block:Description}
  982. {/block:Link}
  983. {block:Quote}
  984. {block:Source}<cite>{Source}</cite>{/block:Source}
  985. {/block:Quote}
  986. {block:Answer}{Answer}{/block:Answer}
  987. </div>
  988. {block:PermalinkPage}
  989. {block:Date}
  990. <div class="permalink">
  991. <p>{block:RebloggedFrom}Reblogged{/block:RebloggedFrom}{block:NotReblog}Posted{/block:NotReblog} on <b>{Month} {DayOfMonth}{DayOfMonthSuffix}</b>{block:NoteCount} with <b>{NoteCountWithLabel}</b>{/block:NoteCount}{block:RebloggedFrom} via <a href="{ReblogParentUrl}">{ReblogParentName}</a>, from <a href="{ReblogRootURL}">{ReblogRootName}</a>.{/block:RebloggedFrom}</p>
  992. {block:HasTags}<p class="tgs"><b>Filed under:</b>{block:Tags} <a href="{TagURL}">#{Tag}</a>{/block:Tags}</p>{/block:HasTags}
  993. </div>
  994. {/block:Date}
  995. {/block:PermalinkPage}
  996.  
  997. </article>
  998. {block:PostNotes}
  999. <article class="noties">
  1000. {PostNotes-64}
  1001. </article>
  1002. {/block:PostNotes}
  1003. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!-- {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1004. {/block:Posts}
  1005. </section>
  1006.  
  1007. {block:Pagination}
  1008. <footer class="{select:NextPage}">
  1009. <p class="pagination">
  1010. {block:PreviousPage}<a class="ion-ios-arrow-back prv" href="{PreviousPage}"></a>{/block:PreviousPage}
  1011. {block:JumpPagination length="5"}
  1012. {block:CurrentPage}<span>{CurrentPage}</span>{/block:CurrentPage}
  1013. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1014. {/block:JumpPagination}
  1015. {block:NextPage} <a class="ion-ios-arrow-forward nxt" href="{NextPage}"></a>{/block:NextPage}
  1016. </p>
  1017. <a href="#" id="ldmrbtn">
  1018. Load more
  1019. <span class="ion-ios-arrow-down"></span>
  1020. </a>
  1021. </footer>
  1022. {/block:Pagination}
  1023.  
  1024. </body>
  1025. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  1026. <script src="http://static.tumblr.com/emvnqzg/NOVo0fisl/scripts.js"></script>
  1027. <script src="http://static.tumblr.com/wgg6svp/sDinmsq3x/jquery.style-my-tooltips.js"></script>
  1028. <script type="text/javascript" src="http://static.tumblr.com/wgg6svp/Wf8nw0j2c/pxuphotoset.js"></script>
  1029. <script src ="http://static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  1030. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1031. <script src="http://static.tumblr.com/wgg6svp/MBEnnvwcu/masonry330.js"></script>
  1032. <script src="http://static.tumblr.com/q8c0vxg/xYrnjmd74/jquery.infinitescroll.min.js"></script>
  1033. <script>
  1034. $(function(){
  1035. $("[title]").style_my_tooltips({
  1036. tip_follows_cursor:true,
  1037. tip_delay_time:200,
  1038. tip_fade_speed:500
  1039. });
  1040. $('.photo-slideshow').pxuPhotoset({
  1041. 'ligthbox' : true,
  1042. 'rounded' : false,
  1043. 'gutter' : '{text:PhotosetSpacing}'
  1044. });
  1045. function postsFunc($elem){
  1046. $elem.find('.tags').delegate('span', 'click', function(e){
  1047. e.preventDefault();
  1048. if($(this).parent().hasClass('active')){
  1049. $(this).parent().removeClass('active');
  1050. }else{
  1051. if($('.tags').hasClass('active')) $('.tags').removeClass('active');
  1052. $(this).parent().addClass('active');
  1053. }
  1054. });
  1055.  
  1056. $elem.find('.dropdown > li').delegate('span', 'click', function(e){
  1057. e.preventDefault();
  1058. if($(this).parents('ul').hasClass('active')){
  1059. $(this).parents('ul').removeClass('active');
  1060. }else{
  1061. if($('.dropdown').hasClass('active')) $('.dropdown').removeClass('active');
  1062. $(this).parents('ul').addClass('active');
  1063. }
  1064. });
  1065.  
  1066.  
  1067. }
  1068. $('article').each(function(){ postsFunc($(this)); });
  1069. $(window).scroll(function(){
  1070. if($('body').scrollTop() > 10){
  1071. $('#tumblr_controls, .tmblr-iframe.iframe-controls--desktop').addClass('scrolled');
  1072. } else{
  1073. $('#tumblr_controls, .tmblr-iframe.iframe-controls--desktop').removeClass('scrolled');
  1074. }
  1075.  
  1076. if($('body').scrollTop() > 30){
  1077. $('.backtop').addClass('active');
  1078. } else{
  1079. $('.backtop').removeClass('active');
  1080. }
  1081. });
  1082.  
  1083. $('.backtop').click(function(e){
  1084. e.preventDefault();
  1085. $('body').animate({scrollTop : 0}, 700);
  1086. });
  1087.  
  1088. {block:IndexPage}
  1089. var parent = $('section');
  1090.  
  1091. if('{select:NumberOfColumns}' != 'c1'){
  1092. var numbercolumn;
  1093. switch('{select:NumberOfColumns}'){
  1094. case "c2": numbercolumn = 2; break;
  1095. case "c3": numbercolumn = 3; break;
  1096. case "c4": numbercolumn = 4; break;
  1097. case "c5": numbercolumn = 5; break;
  1098. default: numbercolumn = 0; break;
  1099. }
  1100.  
  1101. parent.imagesLoaded(function(){
  1102. parent.masonry({
  1103. itemSelector: 'article',
  1104. columnWidth: function(sectionw) {
  1105. return sectionw / numbercolumn;
  1106. }(),
  1107. isAnimated: false
  1108. });
  1109. });
  1110. setInterval(function(){parent.masonry("layout");}, 3000);
  1111. }
  1112.  
  1113. if($('footer').hasClass('ldmr') || $('footer').hasClass('ifnt')){
  1114. parent.infinitescroll({
  1115. navSelector : ".pagination",
  1116. nextSelector : ".nxt",
  1117. itemSelector : "article",
  1118. bufferPx : 50,
  1119. done : "",
  1120. loading: {
  1121. img : "",
  1122. msgText: "",
  1123. finishedMsg:""
  1124. },
  1125. },
  1126. function( newElements ) {
  1127.  
  1128. var $newElems = $( newElements ).css({ opacity: 0 });
  1129. $newElems.imagesLoaded(function(){
  1130. $newElems.animate({ opacity: 1 }).find('[title]').style_my_tooltips();
  1131. $newElems.each(function(){ postsFunc($(this)); $(this).find('.photo-slideshow').pxuPhotoset({'ligthbox':true,'rounded':false,'gutter':'{text:PhotosetSpacing}'}); });
  1132.  
  1133. });
  1134. resizeVideos();
  1135.  
  1136. if('{select:NumberOfColumns}' != 'c1') parent.masonry( 'appended', $newElems);
  1137. });
  1138. if($('footer').hasClass('ldmr')){
  1139. parent.infinitescroll({
  1140. behavior: 'twitter'
  1141. });
  1142. $(window).unbind('.infscr');
  1143. $('#ldmrbtn').click(function(e){
  1144. e.preventDefault();
  1145. parent.infinitescroll('retrieve');
  1146. $('footer').show();
  1147. return false;
  1148. });
  1149. }
  1150. }
  1151.  
  1152.  
  1153. {/block:IndexPage}
  1154. });
  1155. </script>
  1156. </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!