API tools faq
paste
Advertisement
neothm

#15 RISING

neothm
May 28th, 2016
3,053
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 48.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5.  
  6. #15 RISING 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: 29/05/2016
  14. Version: 0.2
  15. Latest update: 05/06/2016
  16. Log: Fixed social networks icons
  17.  
  18. ## Dependencies
  19. Truncate HTML: © Pathable
  20. Infinite Scroll: © Paul Irish
  21. Images loaded: © David Desandro
  22. Photosets: © Pixel Union
  23. Videos: © shythemes
  24. Inspiration: @FUKUO, @LADMILK, @ACUITE, "Deazzle
  25. Shoe Website" © Fariz Maulana
  26. (Behance)
  27.  
  28. ## F.A.Q
  29. Q: Can I change the posts A: No
  30. format so that they're
  31. not square anymore?
  32.  
  33. ## Links
  34. Support http://neothm.com/tagged/q&a
  35. > #15 SPECIFIC http://neothm.com/tagged/a:15
  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 is
  46. 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. <meta charset="utf-8">
  54. <title>{block:PostTitle}{PostTitle} | {/block:PostTitle}{Title}</title>
  55. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  56. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  57. <meta name="author" content="neothm">
  58. <link rel="stylesheet" href="http://static.tumblr.com/emvnqzg/ZjEo04ht8/pxu.css">
  59. <link rel="stylesheet" href="http://static.tumblr.com/wgg6svp/ji9o6vay8/bodoni.css">
  60. <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  61. <link href='https://fonts.googleapis.com/css?family={text:GoogleFont}:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  62. <link rel="shortcut icon" href="{image:Favicon}">
  63. <!--
  64. OPTIONS
  65. -->
  66. <meta name="image:Favicon" content="{Favicon}">
  67. <meta name="text:GoogleFont" content="Roboto">
  68. <meta name="select:FontSize" content="9px">
  69. <meta name="select:FontSize" content="10px">
  70. <meta name="select:FontSize" content="11px">
  71. <meta name="select:FontSize" content="12px">
  72. <meta name="select:FontSize" content="13px">
  73. <meta name="select:FontSize" content="14px">
  74. <meta name="color:BackgroundColor" content="#ffffff">
  75. <meta name="color:PostsBackground" content="#ffffff">
  76. <meta name="color:Text" content="#3B3B3B">
  77. <meta name="color:TitleText" content="#000000">
  78. <meta name="color:NavLinks" content="#000000">
  79. <meta name="color:NavLinksHover" content="#000000">
  80. <meta name="color:Links" content="#aaaaaa">
  81. <meta name="color:LinksHover" content="#000000">
  82. <meta name="color:Borders" content="#000000">
  83. <meta name="color:LightBorders" content="#f2f2f2">
  84. <meta name="image:Header" content="">
  85. <meta name="color:HeaderLayer" content="">
  86. <meta name="select:HeaderLayerOpacity" content="0">
  87. <meta name="select:HeaderLayerOpacity" content="0.3">
  88. <meta name="select:HeaderLayerOpacity" content="0.5">
  89. <meta name="select:HeaderLayerOpacity" content="0.7">
  90. <meta name="select:HeaderLayerOpacity" content="0.9">
  91. <meta name="if:TitleBackground" content="0">
  92. <meta name="if:Header" content="1">
  93. <meta name="if:LikeButtons" content="0">
  94. <meta name="select:SocialNetworks" content="ftr" title="In the footer">
  95. <meta name="select:SocialNetworks" content="sdb" title="In the menu">
  96. <meta name="select:SocialNetworks" content="nne" title="Hide">
  97. <meta name="text:HeaderTagLine" content="my personal blog">
  98. <meta name="text:HeaderTitle" content="Nulla dui purus, eleifend vel">
  99. <meta name="text:WordBreaker" content="500">
  100. <meta name="text:CaptionSpacing" content="50px">
  101. <meta name="text:PostsSpacing" content="120px">
  102. <meta name="text:Link1Name" content="Contact">
  103. <meta name="text:Link1URL" content="/ask">
  104. <meta name="text:Link2Name" content="">
  105. <meta name="text:Link2URL" content="">
  106. <meta name="text:Link3Name" content="">
  107. <meta name="text:Link3URL" content="">
  108. <meta name="text:Link4Name" content="">
  109. <meta name="text:Link4URL" content="">
  110. <meta name="text:Link5Name" content="">
  111. <meta name="text:Link5URL" content="">
  112. <meta name="text:Link6Name" content="">
  113. <meta name="text:Link6URL" content="">
  114. <meta name="text:Link7Name" content="">
  115. <meta name="text:Link7URL" content="">
  116. <meta name="text:Link8Name" content="">
  117. <meta name="text:Link8URL" content="">
  118. <meta name="text:Link9Name" content="">
  119. <meta name="text:Link9URL" content="">
  120. <meta name="text:FacebookURL" content="">
  121. <meta name="text:TwitterURL" content="">
  122. <meta name="text:ElloURL" content="">
  123. <meta name="text:InstagramURL" content="">
  124. <meta name="text:YoutubeURL" content="">
  125. <meta name="text:LinkedInURL" content="">
  126. <meta name="text:CodePenURL" content="">
  127. <meta name="text:GooglePlusURL" content="">
  128. <meta name="text:DribbbleURL" content="">
  129. <meta name="text:WordpressURL" content="">
  130. <meta name="text:PinterestURL" content="">
  131. <meta name="text:WhatsappUsername" content="">
  132. <meta name="text:SnapchatUsername" content="">
  133. <meta name="text:SkypeUsername" content="">
  134.  
  135.  
  136. <meta name="select:showBottomPost" content="tags" title="The tags">
  137. <meta name="select:showBottomPost" content="pid" title="Post ID">
  138. <meta name="select:showBottomPost" content="timeago" title="Posted time ago">
  139. <meta name="select:showBottomPost" content="noteCount" title="Note count">
  140. <meta name="select:showBottomPost" content="none" title="None">
  141. <meta name="select:showBottomPost" content="pdate" title="Post date">
  142. <meta name="select:NextPage" content="pgn" title="Pagination">
  143. <meta name="select:NextPage" content="btn" title="Load more button">
  144. <meta name="select:NextPage" content="ift" title="Infinite Scroll">
  145. <style type="text/css">
  146. /*
  147. DEFAULT
  148. */
  149. *{
  150. margin:0;
  151. padding:0;
  152. }
  153. html, body{
  154. height:100%;
  155. }
  156. body{
  157. text-align:justify;
  158. word-break:break-word;
  159. color:{color:Text};
  160. background:{color:BackgroundColor};
  161. -webkit-font-smoothing: antialiased;
  162. -moz-osx-font-smoothing: grayscale;
  163. padding-top:1px;
  164. margin-top:-1px;
  165. }
  166. body, small, big{
  167. font:400 {select:FontSize}/1.7 {text:GoogleFont}, sans-serif;
  168. }
  169. #noscroll{
  170. overflow-x:hidden;
  171. }
  172. a{
  173. color:{color:Links};
  174. text-decoration:none;
  175. }
  176. a:hover{
  177. color:{color:LinksHover};
  178. cursor:pointer!important;
  179. }
  180. ::selection{
  181. background-color:#000;
  182. color:#fff;
  183. }
  184. ::-moz-selection{
  185. background-color:#000;
  186. color:#fff;
  187. }
  188. ::-webkit-scrollbar{
  189. width:11px;
  190. height:11px;
  191. background-color:{color:BackgroundColor};
  192. }
  193. ::-webkit-scrollbar-track{
  194. border:5px solid {color:BackgroundColor};
  195. background-color:{color:BackgroundColor};
  196. }
  197. ::-webkit-scrollbar-thumb{
  198. border:5px solid {color:BackgroundColor};
  199. background-color: {color:Text};
  200. }
  201. .tmblr-iframe.iframe-controls--desktop, #tumblr_controls{
  202. position:fixed;
  203. transform:scale(.7);
  204. -webkit-transform:scale(.7);
  205. -moz-transform:scale(.7);
  206. z-index:999999999!important;
  207. filter:invert(100%);
  208. -webkit-filter:invert(100%);
  209. -moz-filter:invert(100%);
  210. -ms-filter:invert(100%);
  211. -o-filter:invert(100%);
  212. }
  213. #s-m-t-tooltip{
  214. line-height:140%;
  215. font-size:8px;
  216. text-transform:uppercase;
  217. text-align:center;
  218. letter-spacing:1px;
  219. max-width:100px;
  220. z-index:9999!important;
  221. padding:5px 10px;
  222. border:1px solid {color:LightBorders};
  223. margin:15px;
  224. background:rgba(255,255,255,.95);
  225. color:#888;
  226. }
  227. /*
  228. TRANSITIONS
  229. */
  230. body.deployed #fade, #fade, .menu ol, body.deployed .menu ol, .search:hover form:after, .search form:after, .search, .search:hover, .hamburger > span, .hamburger:hover > span, .sns span a:hover:after, .sns span a:after, footer li a:after, footer li a:hover:after, .postType:hover span, .postType span, .sns span a svg, .sns span a:hover svg, footer li a svg, footer li a:hover svg, a, a:hover{
  231. transition-duration:.3s;
  232. -webkit-transition-duration:.3s;
  233. -moz-transition-duration:.3s;
  234. -ms-transition-duration:.3s;
  235. -o-transition-duration:.3s;
  236. }
  237. article:hover .tumblr-btns, article .tumblr-btns, .visible, .photo-data{
  238. transition-duration:.8s;
  239. -webkit-transition-duration:.8s;
  240. -moz-transition-duration:.8s;
  241. -ms-transition-duration:.8s;
  242. -o-transition-duration:.8s;
  243. }
  244. /*
  245. CLEARFIX
  246. */
  247. .audio:after, article:after, footer:after{
  248. display:table;
  249. content:"";
  250. clear:both;
  251. }
  252. /*
  253. COMMONS
  254. */
  255. .postType,
  256. #titles h3{
  257. font:bold 10px/1 'Bodoni', Arial;
  258. text-transform:uppercase;
  259. padding-bottom:15px;
  260. position:relative;
  261. margin-bottom:20px;
  262. position:relative;
  263. }
  264. /* bottom border */
  265. .the_date:before,
  266. .postInfo:after,
  267. .postType:before,
  268. #titles h3:after{
  269. width:30px;
  270. height:3px;
  271. background-color:{color:Borders};
  272. display:block;
  273. content:"";
  274. position:absolute;
  275. bottom:0px;
  276. left:0px;
  277. }
  278. /* top */
  279. .postType:before{
  280. bottom:auto;
  281. top:0px;
  282. }
  283. .tumblr-btns,
  284. .photoset-arrows{
  285. font-size:0;
  286. position:absolute;
  287. bottom:0px;
  288. z-index:1;
  289. text-align:center;
  290. }
  291. .tumblr-btns span,
  292. .photoset-arrows a{
  293. font-size:20px;
  294. display:inline-block;
  295. width:40px;
  296. height:40px;
  297. overflow:hidden;
  298. line-height:45px;
  299. background:#fff;
  300. }
  301.  
  302. .reblogRoot{
  303. display:table;
  304. margin-bottom:20px;
  305. text-transform:uppercase;
  306. letter-spacing:1px;
  307. color:#000;
  308. font:bold 10px/1 'Bodoni', Arial;
  309. }
  310. .reblogRoot img{
  311. width:25px;
  312. vertical-align: -7px;
  313. border-radius:3px;
  314. margin-right:15px;
  315. }
  316. .reblogRoot img,
  317. .reblogRoot span{
  318. display:inline-block;
  319. }
  320.  
  321. footer.sdb,
  322. footer.nne,
  323. .sns.ftr,
  324. .sns.nne{
  325. display:none;
  326. }
  327. footer.ftr,
  328. .sns.sdb{
  329. display:block;
  330. }
  331.  
  332.  
  333.  
  334. {block:IndexPage}
  335. .isSquare .media, .isSquare .figure{
  336. width:50%;
  337. float:left;
  338. position:relative;
  339. }
  340. .isSquare .media:after, .isSquare .figure:after{
  341. content:"";
  342. display:block;
  343. padding-bottom:100%;
  344. }
  345. .isSquare .figure > div,
  346. .fu-tmblr{
  347. position:absolute;
  348. width:100%;
  349. height:100%;
  350. top:0px;
  351. left:0;
  352.  
  353. overflow:hidden;
  354. }
  355.  
  356. .audio{
  357. width: 100%;
  358. height: 100%;
  359. background: rgba(255,255,255,.9);
  360. position: absolute;
  361. top: 0;
  362. left: 0;
  363. right: 0;
  364. bottom: 0;
  365. margin: auto;
  366. }
  367. .audio span{
  368. background: #fff;
  369. width: 90px;
  370. display: block;
  371. border-radius: 5px;
  372. height: 90px;
  373. position: absolute;
  374. top: 0;
  375. left: 0;
  376. right: 0;
  377. bottom: 0;
  378. margin: auto;
  379. overflow: hidden;
  380. }
  381. .audio_player{
  382. width: 30px;
  383. height: 26px;
  384. position: absolute;
  385. overflow: hidden;
  386. top: 0;
  387. left: 0;
  388. right: 0;
  389. bottom: 0;
  390. margin: auto;
  391. }
  392.  
  393. {/block:IndexPage}
  394. /*
  395. THEME
  396. */
  397. nav,
  398. header{
  399. background-color:{color:BackgroundColor};
  400. }
  401. nav{
  402. z-index:3;
  403. padding:40px 10%;
  404. position:fixed;
  405. top:0;
  406. left:0;
  407. right:0px;
  408. width:100%;
  409. box-sizing:border-box;
  410. display:table;
  411. }
  412. nav li{
  413. list-style:none;
  414. }
  415. nav ul {
  416. width:50%;
  417. text-align:right;
  418. display:table-cell;
  419. vertical-align:middle;
  420. }
  421. nav ul > li{
  422. vertical-align:middle;
  423. display:inline-block;
  424. }
  425. #infscr-loading,
  426. #smbt{
  427. display:none!important;
  428. }
  429. .search{
  430. width:220px;
  431. position:relative;
  432. overflow:hidden;
  433. height:20px;
  434. width:23px;
  435. margin-right:15px;
  436. vertical-align:-7px;
  437. color:{color:NavLinks};
  438. }
  439. .search form{
  440. top:0px;
  441. right:0px;
  442. position:absolute;
  443. width:190px;
  444. }
  445. .search input{
  446. float:left;
  447. border:none;
  448. outline:none;
  449. line-height:19px;
  450. position:relative;
  451. width:150px;
  452. background-color:{color:BackgroundColor};
  453. border-bottom:1px solid #eee;
  454. }
  455. .search form:after{
  456. content:"";
  457. position:absolute;
  458. bottom: 0px;
  459. right: 40px;
  460. height:1px;
  461. width:0px;
  462. background-color:{color:NavLinksHover};
  463. display:block;
  464. transition-delay:.3s;
  465. }
  466. .search:hover form:after{
  467. width:150px;
  468. }
  469. .search label{
  470. width:20px;
  471. height:20px;
  472. display:block;
  473. margin-right:5px;
  474. float:right;
  475. line-height:22px;
  476. font-size:22px;
  477. }
  478. .search:hover{
  479. width:190px;
  480. }
  481. body.deployed .menu{
  482. overflow:visible;
  483. }
  484. body.deployed{
  485. overflow:hidden!important;
  486. }
  487. #fade{
  488. position:fixed;
  489. width:100%;
  490. height:100%;
  491. top:0px;
  492. left:0px;
  493. background:{color:BackgroundColor};
  494. z-index:0;
  495. visibility:hidden;
  496. opacity:0;
  497. }
  498. body.deployed #fade{
  499. visibility:visible;
  500. opacity:0.8;
  501. }
  502. nav .menu ol{
  503. position:fixed;
  504. width:30%;
  505. top:120px;
  506. padding-left:40px;
  507. box-sizing:border-box;
  508. bottom:0px;
  509. right:-30%;
  510. background:{color:BackgroundColor};
  511. }
  512. nav .menu a{
  513. color:{color:NavLinks};
  514. }
  515. nav .menu a:hover{
  516. color:{color:NavLinksHover};
  517. }
  518. body.deployed .menu ol{
  519. right:0;
  520. }
  521. .menu ol li{
  522. text-align:left;
  523. padding:15px 0;
  524. font:bold 40px/1 'Bodoni', Arial;
  525. }
  526. .sns{
  527. display:block;
  528. font-size:0px;
  529. max-width:calc(100% - 50px);
  530. }
  531. .sns h5{
  532. display:block;
  533. padding-top:14px;
  534. font-size:14px;
  535. color:{color:NavLinks};
  536. }
  537. .menu ol li a{
  538. display:block;
  539. }
  540. .hamburger{
  541. display:block;
  542. overflow:hidden;
  543. height:20px;
  544. width:20px;
  545. }
  546. .hamburger > span{
  547. display:block;
  548. height:2px;
  549. border-radius:2px;
  550. margin:4px 0;
  551. background-color:{color:NavLinks};
  552. }
  553. .hamburger > span:first-child{
  554. width:20px;
  555. }
  556. .hamburger > span:nth-child(2){
  557. width:12px;
  558. }
  559. .hamburger > span:last-child{
  560. width:16px;
  561. }
  562. .hamburger:hover > span,
  563. .hamburger:hover{
  564. cursor:pointer!important;
  565. }
  566. body.deployed .hamburger > span,
  567. .hamburger:hover > span{
  568. background-color:{color:NavLinksHover};
  569. }
  570. body.deployed .hamburger > span:first-child,
  571. .hamburger:hover > span:first-child{
  572. width:14px;
  573. }
  574. body.deployed .hamburger > span:nth-child(2),
  575. .hamburger:hover > span:nth-child(2){
  576. width:20px;
  577. }
  578. body.deployed .hamburger > span:last-child,
  579. .hamburger:hover > span:last-child{
  580. width:10px;
  581. }
  582. nav h1{
  583. width:50%;
  584. vertical-align:middle;
  585. display:table-cell;
  586. font:bold 30px/40px 'Bodoni', Arial;
  587. }
  588. nav h1 a{
  589. color:{color:NavLinks};
  590. }
  591. nav h1 a:hover{
  592. color:{color:NavLinksHover};
  593. }
  594. {block:IfHeader}
  595. header{
  596. height:100%;
  597. padding:120px 10vw 0;
  598. position:relative;
  599. box-sizing:border-box;
  600. {block:TagPage}display:none;{/block:TagPage}
  601. }
  602. header #image{
  603. display:block;
  604. width:60vw;
  605. top:120px;
  606. background:transparent url('{image:Header}') center;
  607. background-size:cover;
  608. position:absolute;
  609. bottom:40px;
  610. }
  611.  
  612. header #image:before{
  613. content:"";
  614. display:block;
  615. position:absolute;
  616. background:{color:HeaderLayer};
  617. position:absolute;
  618. top:0px;
  619. left:0px;
  620. right:0px;
  621. bottom:0px;
  622. opacity:{select:HeaderLayerOpacity};
  623. }
  624. #titles{
  625. color:{color:TitleText};
  626. text-align:left;
  627. width:35%;
  628. top:50%;
  629. transform:translateY(-50%);
  630. right:10%;
  631. {block:IfTitleBackground}background-color:{color:BackgroundColor};{/block:IfTitleBackground}
  632. padding:30px;
  633. box-sizing:border-box;
  634. position:absolute;
  635. }
  636. #titles h2{
  637. font:bold 60px/1 'Bodoni', Arial;
  638. }
  639. {/block:IfHeader}
  640. /*
  641. POSTS
  642. */
  643.  
  644. {block:PermalinkPage}
  645. .photo-slideshow a{
  646. display:block;
  647. }
  648. .pictures{
  649. display:block;
  650. width:100%;
  651. min-width: 100%;
  652. max-width: 100%;
  653. height:auto;
  654. }
  655. {/block:PermalinkPage}
  656. {block:IndexPage}
  657. .photo-slideshow{
  658. position:absolute;
  659. width:100%;
  660. height:100%;
  661. top:0;
  662. left:0;
  663. }
  664. .pictures,
  665. .photo-data{
  666. width:100%!important;
  667. height:100%!important;
  668. }
  669. .audio-photo,
  670. .pictures,
  671. .photo-data,
  672. .pxu-photo{
  673. position:absolute;
  674. top:0px;
  675. left:0px;
  676. bottom:0px;
  677. right:0px;
  678. display:block;
  679. }
  680. .photo-data:not(:first-child){
  681. opacity:0;
  682. }
  683. .visible{
  684. opacity:1;
  685. }
  686. {/block:IndexPage}
  687.  
  688. .tumblr-btns a{
  689. display:block;
  690. }
  691. .like{
  692. position:relative;
  693. cursor:pointer!important;
  694. }
  695. .like:hover a{
  696. color:{color:LinksHover};
  697. }
  698. .like_button{
  699. left:10px;
  700. top:2px;
  701. position:absolute;
  702. opacity:0;
  703. }
  704. .like_button.liked + a{
  705. color:#2ecc71!important;
  706. }
  707. .tumblr-btns{
  708. top:1px;
  709. bottom: auto;
  710. opacity: 0;
  711. visibility: hidden;
  712. }
  713. article:hover .tumblr-btns{
  714. opacity: 1;
  715. visibility: visible;
  716. }
  717. .tumblr-btns .reblog,
  718. .prev-photo{
  719. position:relative;
  720. }
  721. .tumblr-btns .reblog:after,
  722. .prev-photo:after{
  723. content:"";
  724. position:absolute;
  725. width:1px;
  726. height:20px;
  727. background:{color:LightBorders};
  728. top:11px;
  729. right:0px;
  730. }
  731. .tumblr-btns{
  732. top:1px;
  733. bottom: auto;
  734. }
  735. article:nth-child(even) .photoset-arrows{
  736. left:0px;
  737. }
  738. article:nth-child(odd) .photoset-arrows{
  739. right:0px;
  740. }
  741. article:nth-child(even) .tumblr-btns{
  742. right:1px;
  743. left:auto;
  744. }
  745. article:nth-child(odd) .tumblr-btns{
  746. left:1px;
  747. right:auto;
  748. }
  749.  
  750. section{
  751. margin: 120px 10% 30px;
  752. }
  753. article{
  754. position:relative;
  755. margin-bottom:{text:PostsSpacing};
  756. background:{color:PostsBackground};
  757. counter-increment:posts;
  758. }
  759. article:not(.isSquare){
  760. padding:20px;
  761. box-sizing:border-box;
  762. }
  763. {block:IndexPage}
  764. article:not(.isSquare) .caption{
  765. max-width:70%;
  766. }
  767. {/block:IndexPage}
  768.  
  769. .caption h1, .caption h2, .caption h3{
  770. font:bold 15px/3 'Bodoni', Arial, serif;
  771. }
  772. .caption ul, .caption ol{
  773. padding-left:30px;
  774. }
  775. .isReblog .caption > blockquote h2 + blockquote,
  776. .isReblog .caption > blockquote h1 + blockquote,
  777. .isReblog .caption > blockquote h3 + blockquote,
  778. .isReblog .caption > blockquote p + blockquote,
  779. article:not(.isReblog) .caption blockquote{
  780. padding:10px 20px;
  781. border:1px solid {color:LightBorders};
  782. display:block!important;
  783. margin:20px 0;
  784. }
  785. article:nth-child(even) .media{
  786. float: right;
  787. }
  788. .figure > div{
  789. box-sizing:border-box;
  790. {block:IndexPage}padding:{text:CaptionSpacing};{/block:IndexPage}
  791. {block:PermalinkPage}padding:0 {text:CaptionSpacing};margin-top:30px;{/block:PermalinkPage}
  792. }
  793. /*posttypes*/
  794. .fu-tmblr iframe{
  795. position:relative;
  796. }
  797. .postType{
  798. display:table;
  799. height:10px;
  800. padding-top:20px;
  801. padding-bottom:0px;
  802. margin-bottom:0px;
  803. overflow:hidden;
  804. }
  805. .postType:hover{
  806. padding-left:50px;
  807. }
  808. .postType span{
  809. background:{color:LinksHover};
  810. color:#fff;
  811. padding:2px 5px;
  812. position:absolute;
  813. top:17px;
  814. left:-50px;
  815. }
  816. .postType span:before{
  817. content:"0"counter(posts)".";
  818. }
  819. .postType:hover span{
  820. left:0px;
  821. }
  822.  
  823. .postInfo{
  824. display:block;
  825. position:relative;
  826. line-height:10px;
  827. padding-bottom: 20px;
  828. font-size: 9px;
  829. margin-top:20px;
  830. }
  831. .postInfo.none,
  832. .postInfo p{
  833. display:none;
  834. }
  835. .postInfo.noteCount p.noteCount,
  836. .postInfo.pid p.pid,
  837. .postInfo.timeago p.timeago,
  838. .postInfo.pdate p.pdate,
  839. .postInfo.tags p.tags{
  840. display:block;
  841. }
  842. p.tags{
  843. white-space: nowrap;
  844. overflow: hidden;
  845. text-transform:uppercase;
  846. }
  847. .the_date{
  848. text-align:center;
  849. padding-top:15px;
  850. position: relative;
  851. padding-bottom: 5px;
  852. margin-bottom: 10px;
  853. font: normal 18px/2 'Bodoni', Arial;
  854. }
  855. .perminfo{
  856. text-align: center;
  857. font-size: 9px;
  858. text-transform: uppercase;
  859. margin-bottom: 10px;
  860. }
  861. .the_tags{
  862. text-align: center;
  863. font: normal 15px/1.7 'Bodoni', Arial;
  864. padding-bottom:40px;
  865. }
  866. .the_date:before{
  867. left:0;
  868. right:0;
  869. margin:auto;
  870. }
  871.  
  872. .postInfo span{
  873. font:bold 10px/1 'Bodoni', Arial;
  874. text-transform:uppercase;
  875. padding-right:5px;
  876. }
  877. ol.notes{
  878. font-size: 0;
  879. margin: 20px 30px 0;
  880. text-align: center;
  881. }
  882. li.note {
  883. list-style: none;
  884. display: inline-block;
  885. margin: 10px;
  886. }
  887. img.avatar{
  888. width: 30px;
  889. border-radius: 3px;
  890. }
  891.  
  892. .isSquare .caption{
  893. height:calc(100% - 100px);
  894. overflow:hidden;
  895. }
  896. .caption{
  897. margin:20px 0 25px;
  898. }
  899. .tumblr_blog{
  900. text-transform:uppercase;
  901. font:bold 11px/1 'Bodoni', Arial;
  902. }
  903. ul.chat{
  904. padding:0px;
  905. }
  906. .chat li{
  907. list-style:none;
  908. font:400 23px/1.2 'Bodoni', Arial;
  909. padding-bottom:10px;
  910. }
  911. .chat li b{
  912. text-transform:uppercase;
  913. font-size:18px;
  914. letter-spacing:1px;
  915. }
  916. article h4{
  917. font:bold 50px/1 'Bodoni', Arial;
  918. text-align:left;
  919. padding-bottom:10px;
  920. }
  921. .isChat h4{
  922. margin-bottom:10px;
  923. }
  924. .isLink h4 + p, .isQuote h4 + p{
  925. margin-top:10px;
  926. }
  927. article h4 a{
  928. color:{color:Text};
  929. }
  930. {block:IndexPage}
  931. .question{
  932. top:calc({text:CaptionSpacing} + 50px);
  933. left:{text:CaptionSpacing};
  934. right:{text:CaptionSpacing};
  935. bottom:calc({text:CaptionSpacing} + 50px);
  936. overflow:hidden;
  937. position: absolute;
  938. }
  939. {/block:IndexPage}
  940.  
  941. article.isAsk.withAnswerer .reblogRoot.noAnswerer,
  942. article.isAsk:not(.withAnswerer) .reblogRoot.withAnswerer{
  943. display:none;
  944. }
  945. article.isAsk.withAnswerer .reblogRoot.withAnswerer,
  946. article.isAsk:not(.withAnswerer) .reblogRoot.noAnswerer{
  947. display:block;
  948. }
  949. {block:IndexPage}
  950. .isAsk .media,
  951. .isAsk .figure{
  952. float:left!important;
  953. }
  954. .isAsk .figure:before{
  955. position:absolute;
  956. content:"";
  957. left:-1px;
  958. top:0px;
  959. bottom:0px;
  960. width:1px;
  961. height:20%;
  962. margin:auto;
  963. background:{color:LightBorders};
  964. }
  965. {/block:IndexPage}
  966. /*
  967. FOOTER
  968. */
  969.  
  970. footer{
  971. line-height:70px;
  972. padding:30px 10%;
  973. }
  974. footer h5,
  975. footer ul{
  976. display:block;
  977. }
  978. footer h5{
  979. float:left;
  980. text-transform:uppercase;
  981. letter-spacing:1px;
  982. }
  983. footer ul{
  984. float:right;
  985. display:block;
  986. }
  987. footer li{
  988. list-style:none;
  989. display:inline-block;
  990. }
  991. footer li svg,
  992. .sns span a,
  993. .sns span svg,
  994. footer li a{
  995. position:relative;
  996. font-size:16px;
  997. display:block;
  998. color:{color:Links};
  999. text-align:center;
  1000. width:25px;
  1001. height:25px;
  1002. line-height:26px;
  1003. }
  1004.  
  1005. .sns span svg,
  1006. footer li svg{
  1007. fill:{color:Links};
  1008. width:16px;
  1009. height:16px;
  1010. vertical-align: -2px;
  1011. display:inline-block;
  1012. }
  1013. footer li a{
  1014. margin-left:10px;
  1015. }
  1016.  
  1017. .sns span{
  1018. display:inline-block;
  1019. }
  1020. .sns span a{
  1021. margin-right:-5px;
  1022. }
  1023. .sns span svg,
  1024. footer li svg,
  1025. .sns span a:before,
  1026. footer li a:before{
  1027. position:relative;
  1028. z-index:1;
  1029. }
  1030. .sns span a:after,
  1031. footer li a:after{
  1032. content:"";
  1033. width:100%;
  1034. z-index:0;
  1035. height:100%;
  1036. border-radius:15px;
  1037. position:absolute;
  1038. top:0;
  1039. left:0;
  1040. background:{color:Links};
  1041. transform:scale(0);
  1042. }
  1043. .sns span a:hover,
  1044. footer li a:hover{
  1045. color:{color:LinksHover};
  1046. }
  1047.  
  1048. .sns span svg:hover,
  1049. footer li svg:hover{
  1050. fill:{color:LinksHover};
  1051. }
  1052. .sns span a:hover:after,
  1053. footer li a:hover:after{
  1054. transform:scale(1);
  1055. }
  1056.  
  1057. .nextPage{
  1058. margin:50px 0 100px;
  1059. text-align:center;
  1060. }
  1061. .pagination{
  1062. width:100%;
  1063. font:bold 17px/1 'Bodoni', Arial;
  1064. }
  1065. .pagination a,
  1066. .pagination span{
  1067. display:inline-block;
  1068. }
  1069. .pagination span{
  1070. vertical-align: -2px;
  1071. font-size: 23px;
  1072. font-style: italic;
  1073. margin: 0 3px;
  1074. }
  1075. .prv{
  1076. margin-right:8px;
  1077. }
  1078. .nxt{
  1079. margin-left:8px;
  1080. }
  1081. #ldmrbtn{
  1082. display:table;
  1083. margin:0 auto;
  1084. font:italic 25px/1 'Bodoni', Arial;
  1085. }
  1086. #ldmrbtn span{
  1087. display:block;
  1088. margin-top:10px;
  1089. font-size:15px;
  1090. color:#000;
  1091. }
  1092. .nextPage.btn .pagination,
  1093. .nextPage.ift,
  1094. .nextPage.pgn #ldmrbtn{
  1095. display:none;
  1096. }
  1097. .tmblr-lightbox{
  1098. background-color: rgba(240,240,240,.9)!important;
  1099. }
  1100. .tmblr-lightbox .vignette{
  1101. background-image:none!important;
  1102. }
  1103. .tmblr-lightbox .lightbox-image {
  1104. box-shadow:none!important;
  1105. outline: 20px solid #fff;
  1106. }
  1107. .isReblog .caption > p,
  1108. .isReblog .caption > blockquote,
  1109. .isReblog .caption > blockquote p:first-of-type,
  1110. .isReblog .caption > blockquote blockquote:first-of-type,
  1111. .isReblog .caption > blockquote pre:first-of-type{
  1112. display:inline;
  1113. }
  1114. /*PERMALINKS*/
  1115. {block:PermalinkPage}
  1116. .note.more_notes_link_container{
  1117. text-align: center;
  1118. display: block;
  1119. padding-bottom: 30px;
  1120. }
  1121. .more_notes_link{
  1122. display: inline-block;
  1123. width:30px;
  1124. height:30px;
  1125. background: #fff url('http://static.tumblr.com/wgg6svp/vGzo7wew4/loadmore.png') top center no-repeat;
  1126. background-size: 20px 20px;
  1127. }
  1128. .more_notes_link:hover{
  1129. transform:rotate(30deg);
  1130. }
  1131. .question,
  1132. .audio{
  1133. padding: {text:CaptionSpacing} 0 0 {text:CaptionSpacing};
  1134. }
  1135. .question, .answer{
  1136. max-width:500px;
  1137. }
  1138. .audio > span{
  1139. background-color:#fff;
  1140. display: block;
  1141. width: 30Px;
  1142. height:30px;
  1143. float: left;
  1144. overflow:hidden;
  1145. border-radius: 3px;
  1146. }
  1147. .audio-info{
  1148. display:block;
  1149. max-width:calc(100% - 70px);
  1150. float:left;
  1151. font:normal 30px/30px 'Bodoni', Arial;
  1152. margin-left:40px;
  1153. }
  1154. .audio-info b{
  1155. padding-right:10px;
  1156. }
  1157.  
  1158. .isReblog .caption > p{
  1159. display:none;
  1160. }
  1161. .isMedia{
  1162. width:80%;
  1163. }
  1164. .isMedia.isReblog .caption p:first-of-type,
  1165. .isMedia.isReblog .caption pre:first-of-type{
  1166. display:block;
  1167. position: absolute;
  1168. top: 0;
  1169. background: {color:BackgroundColor};
  1170. width: 45%;
  1171. right: -30%;
  1172. padding: 40px;
  1173. box-sizing: border-box;
  1174. text-align:left;
  1175. font: 700 30px/1.3 'Bodoni', sans-serif;
  1176. }
  1177. {/block:PermalinkPage}
  1178.  
  1179. </style>
  1180. </head>
  1181. <body id="noscroll">
  1182. <nav>
  1183. <h1><a href="/">{Title}</a></h1>
  1184. <ul>
  1185. <li class="search">
  1186. <form>
  1187. <input type="text" id="txt">
  1188. <input type="submit" id="smbt">
  1189. <label for="smbt" class="ion-ios-search-strong"></label>
  1190. </form>
  1191. </li>
  1192. <li class="menu">
  1193. <div class="hamburger">
  1194. <span></span>
  1195. <span></span>
  1196. <span></span>
  1197. </div>
  1198. <ol>
  1199. <li><a href="{text:Link1URL}">{text:Link1Name}</a></li>
  1200. <li><a href="{text:Link2URL}">{text:Link2Name}</a></li>
  1201. <li><a href="{text:Link3URL}">{text:Link3Name}</a></li>
  1202. <li><a href="{text:Link4URL}">{text:Link4Name}</a></li>
  1203. <li><a href="{text:Link5URL}">{text:Link5Name}</a></li>
  1204. <li><a href="{text:Link6URL}">{text:Link6Name}</a></li>
  1205. <li><a href="{text:Link7URL}">{text:Link7Name}</a></li>
  1206. <li><a href="{text:Link8URL}">{text:Link8Name}</a></li>
  1207. <li><a href="{text:Link9URL}">{text:Link9Name}</a></li>
  1208. <li class="sns {select:SocialNetworks}">
  1209. <h5>Social Networks</h5>
  1210. <span><a href="{text:TwitterURL}" title="Twitter" class="ion-social-twitter"></a></span>
  1211. <span><a href="{text:FacebookURL}" title="Facebook" class="ion-social-facebook"></a></span>
  1212. <span><a href="{text:ElloURL}" title="Ello"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="302.334px" height="302.5px" viewBox="0 0 302.334 302.5" enable-background="new 0 0 302.334 302.5" xml:space="preserve"><g><circle cx="151.25" cy="151.25" r="151.25"/><path fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="10" d="M72,171c20.766,83.064,136,81.5,158.5-1"/></g></svg></a></span>
  1213. <span><a href="{text:InstagramURL}" title="Instagram" class="ion-social-instagram-outline"></a></span>
  1214. <span><a href="{text:YoutubeURL}" title="Youtube" class="ion-social-youtube"></a></span>
  1215. <span><a href="{text:LinkedInURL}" title="LinkedIn" class="ion-social-linkedin-outline"></a></span>
  1216. <span><a href="{text:CodePenURL}" title="CodePen" class="ion-social-codepen-outline"></a></span>
  1217. <span><a href="{text:GooglePlusURL}" title="Google+" class="ion-social-googleplus"></a></span>
  1218. <span><a href="{text:DribbbleURL}" title="Dribbble" class="ion-social-dribbble-outline"></a></span>
  1219. <span><a href="{text:WordpressURL}" title="Wordpress" class="ion-social-wordpress"></a></span>
  1220. <span><a href="{text:PinterestURL}" title="Pinterest" class="ion-social-pinterest"></a></span>
  1221. <span><a title="{text:WhatsappUsername}" href="http://#" class="usrn ion-social-whatsapp"></a></span>
  1222. <span><a title="{text:SnapchatUsername}" href="http://#" class="usrn ion-social-snapchat"></a></span>
  1223. <span><a title="{text:SkypeUsername}" href="http://#" class="usrn ion-social-skype"></a></span>
  1224. </li>
  1225. </ol>
  1226. </li>
  1227. </ul>
  1228. </nav>
  1229. {block:IndexPage}
  1230. {block:IfHeader}
  1231. <header>
  1232. <div id="image"></div>
  1233. <div id="titles">
  1234. <h3>{text:HeaderTagLine}</h3>
  1235. <h2>{text:HeaderTitle}</h2>
  1236. </div>
  1237. </header>
  1238. {/block:IfHeader}
  1239. {/block:IndexPage}
  1240. <section>
  1241. <div id="posts">
  1242. {block:Posts}
  1243. <article class="{block:RebloggedFrom}isReblog{/block:RebloggedFrom}{block:Photoset} isMedia isSquare{/block:Photoset}{block:Photo} isMedia isSquare{/block:Photo}{block:Photo} isMedia isSquare{/block:Photo}{block:Video} isMedia isSquare{/block:Video}{block:Audio} isSquare{/block:Audio}{block:Text} isText{/block:Text}{block:Quote} isQuote{/block:Quote}{block:Link} isLink{/block:Link}{block:Answer} isAsk isSquare{block:Answerer} withAnswerer{/block:Answerer}{/block:Answer}{block:Chat} isChat{/block:Chat}">
  1244. <!--like btns-->
  1245. {block:IndexPage}
  1246. {block:IfLikeButtons}
  1247. <div class="tumblr-btns">
  1248. <span>
  1249. <a href="{ReblogURL}" target="_blank" class="ion-ios-refresh-outline reblog"></a>
  1250. </span>
  1251. <span class="like">
  1252. {LikeButton}
  1253. <a href="#" class="ion-ios-heart-outline"></a>
  1254. </span>
  1255. </div>
  1256. {/block:IfLikeButtons}
  1257. {/block:IndexPage}
  1258.  
  1259. <!--Posts-->
  1260.  
  1261. <!--
  1262. medias
  1263. -->
  1264. <div class="media">
  1265. <div>
  1266. {block:Video}
  1267. <!--video-->
  1268. <div class="fu-tmblr">{Video-500}</div>
  1269. {/block:Video}
  1270.  
  1271. {block:Photoset}
  1272. <!--photoset-->
  1273. <div class="photo-slideshow" data-layout="{PhotosetLayout}">
  1274. <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">
  1275. {block:Photos}
  1276. <div class="photo-data">
  1277. {block:IndexPage}
  1278. <div class="pxu-photo" style="background:#fff url('{PhotoURL-HighRes}');background-size:cover;background-position:center;" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-alt="{PhotoAlt}" width="{PhotoWidth-500}" height="{PhotoHeight-500}"></div>{/block:IndexPage}{block:PermalinkPage}<div class="pxu-photo"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></div>{/block:PermalinkPage}
  1279. </div>
  1280. {/block:Photos}
  1281. </a>
  1282. {block:IndexPage}
  1283. <div class="photoset-arrows">
  1284. <a href="#" class="ion-ios-arrow-left prev-photo"></a>
  1285. <a href="#" class="ion-ios-arrow-right next-photo"></a>
  1286. </div>
  1287. {/block:IndexPage}
  1288. </div>
  1289. {/block:Photoset}
  1290.  
  1291. {block:Photo}
  1292. <!--photo post-->
  1293. <a onclick="Tumblr.Lightbox.init([/*, /**/ { width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' } ]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1294. {block:IndexPage}<div class="pictures" style="background:#fff url('{PhotoURL-HighRes}');background-size:cover;background-position:center;" data-alt="{PhotoAlt}" width="{PhotoWidth-500}" height="{PhotoHeight-500}"></div>{/block:IndexPage}{block:PermalinkPage}<img class="pictures" src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{/block:PermalinkPage}
  1295. </a>
  1296. {/block:Photo}
  1297.  
  1298.  
  1299. {block:Audio}
  1300. {block:AlbumArt}{block:IndexPage}<div class="audio-photo" style="background:#fff url('{AlbumArtURL}');background-size:cover;background-position:center;"></div>{/block:IndexPage}{/block:AlbumArt}
  1301. <div class="audio">
  1302. {block:AudioPlayer} {AudioPlayer} {/block:AudioPlayer}
  1303. {block:PermalinkPage}
  1304. <div class="audio-info">
  1305. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}{block:Artist} {Artist}{/block:Artist}
  1306. </div>
  1307. {/block:PermalinkPage}
  1308. </div>
  1309. {/block:Audio}
  1310.  
  1311. {block:Answer}
  1312. <!--answer post-->
  1313. <div class="question">
  1314. <div class="reblogRoot">
  1315. <img src="{AskerPortraitURL-96}">
  1316. <span>{Asker}</span>
  1317. </div>
  1318. {Question}
  1319. </div>
  1320. {/block:Answer}
  1321.  
  1322. </div>
  1323. </div><!--ends .media-->
  1324.  
  1325. <!--
  1326. content
  1327. -->
  1328. <div class="figure">
  1329. <div>
  1330.  
  1331. {block:PermalinkPage}
  1332. <div class="reblogRoot">
  1333. {block:RebloggedFrom}
  1334. <img src="{ReblogRootPortraitURL-96}">
  1335. <a href="{ReblogRootURL}">{ReblogRootName}</a>
  1336. {/block:RebloggedFrom}
  1337. {block:NotReblog}
  1338. <img src="{PortraitURL-96}">
  1339. <a href="/">{Name}</a>
  1340. {/block:NotReblog}
  1341. </div>
  1342. {/block:PermalinkPage}
  1343.  
  1344.  
  1345. {block:IndexPage}
  1346. <a href="{Permalink}" class="postType">
  1347. <span></span>
  1348. {block:Photoset}photos{/block:Photoset}
  1349. {block:Photo}photo{/block:Photo}
  1350. {block:Text}text{/block:Text}
  1351. {block:Audio}music{/block:Audio}
  1352. {block:Answer}reply{/block:Answer}
  1353. {block:Chat}talk{/block:Chat}
  1354. {block:Video}video{/block:Video}
  1355. {block:Quote}words{/block:Quote}
  1356. {block:Link}links{/block:Link}
  1357. </a>
  1358. {/block:IndexPage}
  1359.  
  1360. <div class="caption">
  1361. {block:Caption}
  1362. {Caption}
  1363. {/block:Caption}
  1364.  
  1365. {block:Text}
  1366. <!--text posts-->
  1367. {block:Title}<h4>{Title}</h4>{/block:Title}
  1368. {Body}
  1369. {/block:Text}
  1370.  
  1371. {block:Chat}
  1372. <!--chat posts-->
  1373. {block:Title}
  1374. <h4><a href="{Permalink}">{Title}</a></h4>
  1375. {/block:Title}
  1376. <ul class="chat">
  1377. {block:Lines}
  1378. <li>
  1379. {block:Label}
  1380. <b>{Label}</b>
  1381. {/block:Label}
  1382. {Line}
  1383. </li>
  1384. {/block:Lines}
  1385. </ul>
  1386. {/block:Chat}
  1387.  
  1388. {block:Link}
  1389. <!--links posts-->
  1390. <h4><a href="{URL}" target="{Target}">{Name} »</a></h4>
  1391. {block:Description}
  1392. {Description}
  1393. {/block:Description}
  1394. {/block:Link}
  1395.  
  1396. {block:Quote}
  1397. <!--quote posts-->
  1398. <h4>{Quote}</h4>
  1399. {block:Source}
  1400. {Source}
  1401. {/block:Source}
  1402. {/block:Quote}
  1403.  
  1404.  
  1405.  
  1406. {block:Answer}
  1407. <!--answer posts-->
  1408. <div class="answer">
  1409. {block:IndexPage}
  1410. <div class="reblogRoot withAnswerer">
  1411. <img src="{AnswererPortraitURL-96}">
  1412. <span>{Answerer}</span>
  1413. </div>
  1414. <div class="reblogRoot noAnswerer">
  1415. <img src="{PortraitURL-96}">
  1416. <a href="{Permalink}">{Name}</a>
  1417. </div>
  1418. {/block:IndexPage}
  1419. {Answer}
  1420. </div>
  1421. {/block:Answer}
  1422.  
  1423. </div>
  1424.  
  1425.  
  1426. {block:IndexPage}
  1427. <div class="postInfo {select:showBottomPost}">
  1428. {block:HasTags}<p class="tags"><span>tags: </span>{block:Tags}<a href="{TagURL}">#{Tag}  </a>{/block:Tags}</p>{/block:HasTags}
  1429. <p class="pid"><span><a href="{Permalink}">#{PostID}</a></span></p>
  1430. <p class="timeago"><span><a href="{Permalink}">{TimeAgo}</a></span></p>
  1431. <p class="noteCount">{block:NoteCount}<span><a href="{Permalink}">{NoteCountWithLabel}</a></span>{/block:NoteCount}</p>
  1432. <p class="pdate"><span><a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a></span></p>
  1433. </div>
  1434. {/block:IndexPage}
  1435.  
  1436.  
  1437. {block:PermalinkPage}
  1438. {block:Date}
  1439. <p class="the_date">{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</p>
  1440. <p class="perminfo">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:RebloggedFrom}, via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}</p>
  1441. {/block:Date}
  1442. {block:HasTags}<p class="the_tags">{block:Tags}<a href="{TagURL}">#{Tag}  </a>{/block:Tags}</p>{/block:HasTags}
  1443. {block:PostNotes}{PostNotes-64}{/block:PostNotes}
  1444. {/block:PermalinkPage}
  1445. </div>
  1446. </div><!--ends .figure-->
  1447.  
  1448.  
  1449. </article>
  1450. <!--removes tumblr glitch-->
  1451. {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} -->
  1452. {/block:Posts}
  1453. </div> <!--ends #posts-->
  1454. {block:Pagination}
  1455. <div class="nextPage {select:NextPage}">
  1456. <p class="pagination">
  1457. {block:PreviousPage}<a class="ion-ios-arrow-back prv" href="{PreviousPage}"></a>{/block:PreviousPage}
  1458. {block:JumpPagination length="5"}
  1459. {block:CurrentPage}<span>{CurrentPage}</span>{/block:CurrentPage}
  1460. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1461. {/block:JumpPagination}
  1462. {block:NextPage} <a class="ion-ios-arrow-forward nxt" href="{NextPage}"></a>{/block:NextPage}
  1463. </p>
  1464. <a href="#" id="ldmrbtn">
  1465. Load more
  1466. <span class="ion-ios-arrow-down"></span>
  1467. </a>
  1468. </div><!--ends nextPage-->
  1469. {/block:Pagination}
  1470. </section>
  1471. <footer class="{select:SocialNetworks}">
  1472. <h5>Social networks</h5>
  1473. <ul>
  1474. <li><a href="{text:TwitterURL}" title="Twitter" class="ion-social-twitter"></a></li>
  1475. <li><a href="{text:FacebookURL}" title="Facebook" class="ion-social-facebook"></a></li>
  1476. <li><a href="{text:ElloURL}" title="Ello"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="302.334px" height="302.5px" viewBox="0 0 302.334 302.5" enable-background="new 0 0 302.334 302.5" xml:space="preserve"><g><circle cx="151.25" cy="151.25" r="151.25"/><path fill="none" stroke="#FFFFFF" stroke-width="17" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="10" d="M72,171c20.766,83.064,136,81.5,158.5-1"/></g></svg></a></li>
  1477. <li><a href="{text:InstagramURL}" title="Instagram" class="ion-social-instagram-outline"></a></li>
  1478. <li><a href="{text:YoutubeURL}" title="Youtube" class="ion-social-youtube"></a></li>
  1479. <li><a href="{text:LinkedInURL}" title="LinkedIn" class="ion-social-linkedin-outline"></a></li>
  1480. <li><a href="{text:CodePenURL}" title="CodePen" class="ion-social-codepen-outline"></a></li>
  1481. <li><a href="{text:GooglePlusURL}" title="Google+" class="ion-social-googleplus"></a></li>
  1482. <li><a href="{text:DribbbleURL}" title="Dribbble" class="ion-social-dribbble-outline"></a></li>
  1483. <li><a href="{text:WordpressURL}" title="Wordpress" class="ion-social-wordpress"></a></li>
  1484. <li><a href="{text:PinterestURL}" title="Pinterest" class="ion-social-pinterest"></a></li>
  1485. <li><a title="{text:WhatsappUsername}" href="http://#" class="usrn ion-social-whatsapp"></a></li>
  1486. <li><a title="{text:SnapchatUsername}" href="http://#" class="usrn ion-social-snapchat"></a></li>
  1487. <li><a title="{text:SkypeUsername}" href="http://#" class="usrn ion-social-skype"></a></li>
  1488. </ul>
  1489. </footer>
  1490.  
  1491.  
  1492. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  1493. <script src="http://static.tumblr.com/emvnqzg/NOVo0fisl/scripts.js"></script>
  1494. <script src="http://static.tumblr.com/wgg6svp/sDinmsq3x/jquery.style-my-tooltips.js"></script>
  1495. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1496. <script src="http://static.tumblr.com/q8c0vxg/xYrnjmd74/jquery.infinitescroll.min.js"></script>
  1497. <script type="text/javascript" src="http://static.tumblr.com/wgg6svp/Wf8nw0j2c/pxuphotoset.js"></script>
  1498. <script src="http://static.tumblr.com/emvnqzg/cK3o6sxeb/jquery.truncate.js"></script>
  1499. <script>
  1500. $(function(){
  1501. $("[title]").style_my_tooltips({
  1502. tip_follows_cursor:true,
  1503. tip_delay_time:200,
  1504. tip_fade_speed:500
  1505. });
  1506. $('.photo-slideshow').pxuPhotoset({
  1507. 'ligthbox' : true,
  1508. 'rounded' : false,
  1509. {block:IndexPage}
  1510. 'gutter' : '0px'
  1511. {/block:IndexPage}
  1512. {block:PermalinkPage}
  1513. 'gutter' : '4px'
  1514. {/block:PermalinkPage}
  1515. });
  1516. function videos($this){
  1517. var iframe = $this.find('iframe');
  1518. var vidcont = $this.find('.tumblr_video_container');
  1519. {block:IndexPage}
  1520. if(iframe.height() > iframe.width()){
  1521. var scale = $this.width() / 500;
  1522. }else{
  1523. var scale = $this.height() / iframe.height();
  1524. }
  1525. {/block:IndexPage}
  1526. {block:PermalinkPage}
  1527. var scale = $this.width() / 500;
  1528. {/block:PermalinkPage}
  1529. var vw = Math.floor(iframe.attr('width') * scale);
  1530. var vh = Math.floor(iframe.attr('height') * scale)
  1531. iframe.width(vw).height(vh);
  1532. if(vidcont.length > 0){
  1533. vidcont.width(iframe.width()).height(iframe.height());
  1534. }
  1535. {block:IndexPage}
  1536. if(iframe.width() > iframe.height()){
  1537. iframe.css({
  1538. 'left':'50%',
  1539. 'margin-left': '-'+(iframe.width()/2)+'px'
  1540. });
  1541. }else{
  1542. if(vidcont.length > 0){
  1543. iframe.parent().css({
  1544. 'top':'50%',
  1545. 'position': 'relative',
  1546. 'margin-top': '-'+(iframe.height()/2)+'px'
  1547. });
  1548. }else{
  1549. iframe.css({
  1550. 'top':'50%',
  1551. 'margin-top': '-'+(iframe.height()/2)+'px'
  1552. });
  1553. }
  1554. }
  1555. {/block:IndexPage}
  1556. }
  1557. $('.fu-tmblr').each(function(){
  1558. videos($(this));
  1559. });
  1560.  
  1561.  
  1562. {block:IndexPage}
  1563. function textTrunc($this){
  1564. if(!$this.hasClass('isText')){
  1565. if($('.caption', $this).length){
  1566. var string = $('.caption', $this).html();
  1567. if($('.caption', $this).text().length > {text:WordBreaker}){
  1568. var output = $.truncate(string, { length: {text:WordBreaker}, words: true });
  1569. $('.caption', $this).html(output);
  1570. }
  1571. }
  1572. }
  1573. }
  1574. $('article').each(function(){
  1575. textTrunc($(this));
  1576. });
  1577.  
  1578. function photoInit($this) {
  1579. $this.find('.photo-data:first').before($this.find('.photo-data:last').addClass('visible')).removeClass('visible');
  1580. }
  1581.  
  1582.  
  1583. var photoset = setInterval(function(){ $('.photo-slideshow').each(function(){ photoInit($(this)) }); }, 3000);
  1584.  
  1585. $(document).on("click",".next-photo",function(e) {
  1586. e.preventDefault();
  1587. clearInterval(photoset);
  1588. photoInit($(this).parent().parent());
  1589. photoset = setInterval(function(){ $('.photo-slideshow').each(function(){ photoInit($(this).parent().parent()) }); }, 3000);
  1590. });
  1591.  
  1592. $(document).on("click",".prev-photo",function(e) {
  1593. clearInterval(photoset);
  1594. e.preventDefault();
  1595. $(this).parent().parent().find('.photo-data:last').after($(this).parent().parent().find('.photo-data:first').addClass('visible')).removeClass('visible');
  1596.  
  1597. photoset = setInterval(function(){ $('.photo-slideshow').each(function(){ photoInit($(this).parent().parent()) }); }, 3000);
  1598. });
  1599. {/block:IndexPage}
  1600. {block:PermalinkPage}
  1601. if($('article').hasClass('isReblog') && $('article').hasClass('isMedia')){
  1602. $('article.isMedia .caption > blockquote').prepend($('article.isMedia .caption > blockquote p:first-of-type, article.isMedia .caption > blockquote pre:first-of-type').html());
  1603. if( $('article.isMedia .caption > blockquote p:first-of-type').text().length > 80 ){
  1604. var string = $('article.isMedia .caption > blockquote p:first-of-type').html();
  1605. var output = $.truncate(string, { length: 80, words: true });
  1606. $('article.isMedia .caption > blockquote p:first-of-type').html(output);
  1607. }
  1608. }else{
  1609. $('<p>'+$('article.isMedia .caption p:first-of-type, article.isMedia .caption pre:first-of-type').html()+'</p>').insertAfter($('article.isMedia .caption .reblogRoot'));
  1610. if( $('article.isMedia .caption p:first-of-type').text().length > 80 ){
  1611. var string = $('article.isMedia .caption p:first-of-type').html();
  1612. var output = $.truncate(string, { length: 80, words: true });
  1613. $('article.isMedia .caption p:first-of-type').html(output);
  1614. }
  1615. }
  1616.  
  1617. {/block:PermalinkPage}
  1618. $('.search form').submit(function(e){
  1619. e.preventDefault();
  1620. var query = $('#txt').val().replace(/[_\s]/g, '+');
  1621. window.location.href = '/tagged/'+query;
  1622. });
  1623.  
  1624. $('.menu').click(function(){
  1625. if($('body').hasClass('deployed')){
  1626. $('body').removeClass('deployed');
  1627. } else{
  1628. $('body').addClass('deployed');
  1629. }
  1630. });
  1631. $('#fade').click(function(){
  1632. $('body').removeClass('deployed');
  1633. });
  1634.  
  1635. $('footer a, nav ol a').each(function(){
  1636. if($(this).attr('href') === "" || $(this).attr('href') === "#" || $(this).attr('title') === ""){
  1637. $(this).parent().remove();
  1638. }
  1639. });
  1640. $('.usrn').click(function(e){
  1641. e.preventDefault();
  1642. });
  1643.  
  1644. {block:IndexPage}
  1645. var parent = $('#posts');
  1646. if($('.nextPage').hasClass('btn') || $('.nextPage').hasClass('ift')){
  1647. parent.infinitescroll({
  1648. navSelector : ".pagination",
  1649. nextSelector : ".nxt",
  1650. itemSelector : "article",
  1651. bufferPx : 50,
  1652. done : "",
  1653. loading: {
  1654. img : "",
  1655. msgText: "",
  1656. finishedMsg:""
  1657. }
  1658. },
  1659. function( newElements ) {
  1660. var $newElems = $( newElements ).css({ opacity: 0 });
  1661. $newElems.imagesLoaded(function(){
  1662.  
  1663. $newElems.find('.fu-tmblr').each(function(){
  1664. videos($(this));
  1665. });
  1666.  
  1667. $newElems.find('.photo-slideshow').pxuPhotoset({
  1668. 'ligthbox' : true,
  1669. 'rounded' : false,
  1670. 'gutter' : '0px'
  1671. });
  1672. clearInterval(photoset);
  1673. photoset = setInterval(function(){ $('.photo-slideshow').each(function(){ photoInit($(this)) }); }, 3000);
  1674.  
  1675.  
  1676. $newElems.animate({ opacity: 1 }).find('[title]').style_my_tooltips();
  1677. });
  1678.  
  1679. });
  1680. if($('.nextPage').hasClass('btn')){
  1681. parent.infinitescroll({
  1682. behavior: 'twitter',
  1683. errorCallback: function() {
  1684. $('#ldmrbtn').fadeOut(700);
  1685. }
  1686. });
  1687. $(window).unbind('.infscr');
  1688. $('#ldmrbtn').click(function(e){
  1689. e.preventDefault();
  1690. parent.infinitescroll('retrieve');
  1691. return false;
  1692. });
  1693. }
  1694. }
  1695. {/block:IndexPage}
  1696. });
  1697. </script>
  1698. <div id="fade"></div>
  1699. </body>
  1700. </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!