API tools faq
paste
Advertisement
Guest User

Untitled

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