API tools faq
paste
Advertisement
neothm

#10 GEMMOSITY

neothm
Sep 19th, 2015
5,186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. #10 GEMMOSITY by Neo
  5. Find me on tumblr: @NEOTHM | @MTRICS
  6. If you need help/spotted a glitch, feel free to message me!
  7. Thank you for taking an interest in this code. Enjoy. ♡
  8. -->
  9.  
  10. <head>
  11. <meta charset="utf-8">
  12. <title>{block:PostTitle}{PostTitle} | {/block:PostTitle}{Title}</title>
  13. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  16. <link rel="stylesheet" href="http://static.tumblr.com/wgg6svp/jSmnqcghc/normalizer.css">
  17. <link href='//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' rel='stylesheet' type='text/css'>
  18.  
  19. <meta name="text:GoogleFont" content="Roboto">
  20. <link href='https://fonts.googleapis.com/css?family={text:GoogleFont}' rel='stylesheet' type='text/css'>
  21.  
  22. <meta name="image:Background" content="">
  23. <meta name="image:Header" content="">
  24. <meta name="image:Avatar" content="">
  25.  
  26. <meta name="select:HeaderWidgets" content="header_one" title="1">
  27. <meta name="select:HeaderWidgets" content="header_two" title="2">
  28. <meta name="select:HeaderWidgets" content="header_three" title="3">
  29. <meta name="select:HeaderWidgets" content="header_four" title="4">
  30.  
  31. <meta name="select:FontSize" content="8px" title="8px">
  32. <meta name="select:FontSize" content="9px" title="9px">
  33. <meta name="select:FontSize" content="10px" title="10px">
  34. <meta name="select:FontSize" content="11px" title="11px">
  35. <meta name="select:FontSize" content="12px" title="12px">
  36. <meta name="select:FontSize" content="13px" title="13px">
  37.  
  38. <meta name="select:NumberOfColumns" content="column_one" title="1">
  39. <meta name="select:NumberOfColumns" content="column_two" title="2">
  40. <meta name="select:NumberOfColumns" content="column_three" title="3">
  41. <meta name="select:NumberOfColumns" content="column_four" title="4">
  42.  
  43. <meta name="if:HeaderWidgets" content="1">
  44. <meta name="if:HeaderBlur" content="0">
  45. <meta name="if:DescriptionFirstLetter" content="1">
  46.  
  47. <meta name="if:HeaderLinks" content="1">
  48. <meta name="if:HeaderTags" content="1">
  49. <meta name="if:HeaderQuote" content="1">
  50. <meta name="if:HeaderAbout" content="1">
  51.  
  52. <meta name="text:HeaderWidth" content="600px">
  53. <meta name="text:HeaderHeight" content="400px">
  54.  
  55. <meta name="if:Link1" content="0">
  56. <meta name="text:Link1URL" content="http://">
  57. <meta name="text:Link1Name" content="Link 1">
  58. <meta name="if:Link2" content="0">
  59. <meta name="text:Link2URL" content="http://">
  60. <meta name="text:Link2Name" content="Link 2">
  61. <meta name="if:Link3" content="0">
  62. <meta name="text:Link3URL" content="http://">
  63. <meta name="text:Link3Name" content="Link 3">
  64. <meta name="if:Link4" content="0">
  65. <meta name="text:Link4URL" content="http://">
  66. <meta name="text:Link4Name" content="Link 4">
  67. <meta name="if:Link5" content="0">
  68. <meta name="text:Link5URL" content="http://">
  69. <meta name="text:Link5Name" content="Link 5">
  70. <meta name="if:Link6" content="0">
  71. <meta name="text:Link6URL" content="http://">
  72. <meta name="text:Link6Name" content="Link 6">
  73.  
  74.  
  75. <meta name="text:HeaderLink1URL" content="http://">
  76. <meta name="text:HeaderLink1Name" content="Link 1">
  77. <meta name="text:HeaderLink2URL" content="http://">
  78. <meta name="text:HeaderLink2Name" content="Link 2">
  79. <meta name="text:HeaderLink3URL" content="http://">
  80. <meta name="text:HeaderLink3Name" content="Link 3">
  81. <meta name="text:HeaderTag1URL" content="/tagged/">
  82. <meta name="text:HeaderTag1Name" content="Tag 1">
  83. <meta name="text:HeaderTag2URL" content="/tagged/">
  84. <meta name="text:HeaderTag2Name" content="Tag 2">
  85. <meta name="text:HeaderTag3URL" content="/tagged/">
  86. <meta name="text:HeaderTag3Name" content="Tag 3">
  87. <meta name="text:HeaderQuote" content="Be the change that you wish to see in the world.">
  88. <meta name="text:HeaderQuoteSource" content="Mahatma Gandhi">
  89. <meta name="text:HeaderAbout" content="Say something nice about yourself">
  90.  
  91. <meta name="select:NextPage" content="pagi" title="Pagination">
  92. <meta name="select:NextPage" content="ldmr" title="Load more button">
  93. <meta name="select:NextPage" content="ifntsc" title="Infinite Scroll">
  94. <meta name="if:ShowRebloggedFrom" content="1">
  95. <meta name="if:FullSizeBackground" content="1">
  96. <meta name="if:FadedImages" content="0">
  97. <meta name="if:GrayscaleImages" content="0">
  98.  
  99. <meta name="color:Background" content="#fff">
  100. <meta name="color:Text" content="#000">
  101. <meta name="color:Links" content="#000">
  102. <meta name="color:LinksHover" content="#000">
  103. <meta name="color:HoverBorders" content="#000">
  104.  
  105. <style type="text/css">
  106. *{
  107. margin:0;
  108. padding:0;
  109. }
  110.  
  111. html, body{
  112. text-align:justify;
  113. height:100%;
  114. font:lighter {select:FontSize}/170% {text:GoogleFont}, sans-serif;
  115. color:{color:Text};
  116. background:{color:Background} url('{image:Background}');
  117. {block:ifFullSizeBackground}
  118. background-size:cover;
  119. background-attachment:fixed;
  120. {/block:ifFullSizeBackground}
  121. -webkit-font-smoothing: antialiased;
  122. -moz-osx-font-smoothing: grayscale;
  123. }
  124.  
  125. #noscroll{
  126. overflow-x:hidden;
  127. }
  128. a{
  129. color:{color:Links};
  130. text-decoration:none;
  131. }
  132. a:hover{
  133. color:{color:LinksHover};
  134. cursor:pointer!important;
  135. }
  136. a, a:hover,
  137. h3, h3:hover{
  138. transition-duration:.3s;
  139. -webkit-transition-duration:.3s;
  140. -moz-transition-duration:.3s;
  141. -ms-transition-duration:.3s;
  142. -o-transition-duration:.3s;
  143. }
  144. ::selection{
  145. background-color:#000;
  146. color:#fff;
  147. }
  148. ::-moz-selection{
  149. background-color:#000;
  150. color:#fff;
  151. }
  152. ::-webkit-scrollbar{
  153. width:11px;
  154. height:11px;
  155. background-color:#fff;
  156. }
  157. ::-webkit-scrollbar-track{
  158. border:5px solid #fff;
  159. background-color: #fff;
  160. }
  161. ::-webkit-scrollbar-thumb{
  162. border:5px solid #fff;
  163. background-color: #555;
  164. }
  165. #infscr-loading, .vignette,
  166. .pagi #loadmore, .ldmr #pagination,
  167. .ifntsc{
  168. display:none!important;
  169. }
  170. .tmblr-lightbox img {
  171. border-radius:10px!important;
  172. box-shadow:0px 0px 5px rgba(100,100,100,.8)!important;
  173. }
  174. .tmblr-lightbox {
  175. background-color: rgba(255,255,255,.8)!important;
  176. }
  177. img{
  178. max-width:100%;
  179. height:auto;
  180. }
  181. .tmblr-iframe.iframe-controls--desktop{
  182. filter:invert(100%);
  183. -webkit-filter:invert(100%);
  184. -moz-filter:invert(100%);
  185. -ms-filter:invert(100%);
  186. -o-filter:invert(100%);
  187. transform:scale(.8, .8);
  188. -webkit-transform:scale(.8, .8);
  189. -moz-transform:scale(.8, .8);
  190. top:20px;
  191. right:30px;
  192. position:fixed;
  193. opacity:.3;
  194. transition-duration:.3s;
  195. -webkit-transition-duration:.3s;
  196. -moz-transition-duration:.3s;
  197. -ms-transition-duration:.3s;
  198. -o-transition-duration:.3s;
  199. z-index:999999999999999999!important;
  200. }
  201.  
  202. .tmblr-iframe.iframe-controls--desktop:hover{
  203. opacity:.7;
  204. transition-duration:.3s;
  205. -webkit-transition-duration:.3s;
  206. -moz-transition-duration:.3s;
  207. -ms-transition-duration:.3s;
  208. -o-transition-duration:.3s;
  209. }
  210. #s-m-t-tooltip{
  211. line-height:100%;
  212. font-size:8px;
  213. text-transform:uppercase;
  214. text-align:center;
  215. letter-spacing:1px;
  216. max-width:100px;
  217. z-index:9999!important;
  218. padding:5px;
  219. margin:15px;
  220. background:#fff;
  221. border:1px solid #eee;
  222. color:#000;
  223. }
  224.  
  225. #notes *{
  226. margin:0;
  227. padding:0;
  228. }
  229. #notes{
  230. border-top: 1px solid #eee;
  231. margin-top: 5px;
  232. position: relative;
  233. text-align: center;
  234. padding: 10px 0 30px;
  235. }
  236. #notes li{
  237. list-style-type:none;
  238. display:inline-block;
  239. width:25px;
  240. height:25px;
  241. margin:5px;
  242. overflow:hidden;
  243. }
  244. #notes img{
  245. width:25px;
  246. height:25px;
  247. }
  248. li.more_notes_link_container{
  249. background:url('http://cdn.flaticon.com/png/256/59565.png') no-repeat;
  250. background-size:25px;
  251. background-position:center;
  252. opacity:.5;
  253.  
  254. }
  255. a.more_notes_link, a.notes_loading{
  256. opacity:0!important;
  257. }
  258.  
  259. header,
  260. section,
  261. footer{
  262. position:relative;
  263. margin:40px auto 20px;
  264. }
  265.  
  266. #sidebar{block:IfHeaderWidgets},
  267. #table{/block:IfHeaderWidgets}{
  268. position:absolute;
  269. top:5px;
  270. bottom:5px;
  271. }
  272.  
  273. #sidebar{
  274. width:calc(35% - 5px);
  275. left:5px;
  276. background-color:#fff;
  277. overflow:hidden;
  278. }
  279. {block:IfHeaderWidgets}
  280. #sidebar > a{
  281. position:absolute;
  282. top:15px;
  283. right:15px;
  284. font-size:22px;
  285. }
  286. .rotate{
  287. color:{color:LinksHover}!important;
  288. transform:rotate(45deg);
  289. -webkit-transform:rotate(45deg);
  290. -moz-transform:rotate(45deg);
  291. -ms-transform:rotate(45deg);
  292. }
  293. {/block:IfHeaderWidgets}
  294. #description{
  295. margin:30px 20px 0;
  296. }
  297. {block:IfDescriptionFirstLetter}
  298. #description:first-letter{
  299. font-size:26px;
  300. font-weight:bold;
  301. font-family:georgia;
  302. font-style:italic;
  303. vertical-align:-2px;
  304. padding-right:3px;
  305. }
  306. {/block:IfDescriptionFirstLetter}
  307. #sidebar > img{
  308. display:block;
  309. width:70px;
  310. height:70px;
  311. border-radius:35px;
  312. margin:30px auto 0;
  313. }
  314. {block:IfHeaderWidgets}
  315. #table > div::-webkit-scrollbar{
  316. background-color:#fff;
  317. }
  318. #table > div::-webkit-scrollbar-track{
  319. border:5px solid #fff;
  320. background-color: #fff;
  321. }
  322. #table > div::-webkit-scrollbar-thumb{
  323. border:5px solid #fff;
  324. background-color: #aaa;
  325. }
  326.  
  327. #table{
  328. width:calc(65% - 5px);
  329. right:5px;
  330. height:calc(100% - 10px);
  331. overflow:hidden;
  332. right:calc(-65% - 5px);
  333. }
  334. #table > div{
  335. background-color:#fff;
  336. display:block;
  337. float:left;
  338. padding:10px;
  339. margin-right:5px;
  340. height:100%;
  341. overflow-y:auto;
  342. overflow-x:hidden;
  343.  
  344. }
  345. #table:not(.header_one) > div:last-child{
  346. margin-right:0!important;
  347. }
  348. .header_one > div{
  349. width:calc(100% - 25px);
  350. }
  351. .header_two > div{
  352. width:calc(50% - 25px);
  353. }
  354. .header_three > div{
  355. width:calc(33.333% - 25px);
  356. }
  357. .header_four > div{
  358. width:calc(25% - 25px);
  359. }
  360.  
  361. #navigation a,
  362. #tags a{
  363. display:block;
  364. background-color:#eee;
  365. margin-bottom:5px;
  366. color:#777;
  367. padding:10px;
  368. text-transform:uppercase;
  369. letter-spacing:1px;
  370. }
  371. #tags a:before{
  372. content:"#";
  373. }
  374. #navigation a:hover,
  375. #tags a:hover{
  376. background-color:#fff;
  377. color:#000;
  378. }
  379. #tags a:last-child,
  380. #navigation a:last-child{
  381. margin-bottom:20px;
  382. }
  383.  
  384. #quote:before{
  385. content: "\f347";
  386. display: block;
  387. float:left;
  388. margin-right:15px;
  389. font-size:40px;
  390. text-align:center;
  391. background-color:#eee;
  392. width:50px;
  393. line-height:50px;
  394. height:50px;
  395.  
  396. font-family: "Ionicons";
  397. font-style: normal;
  398. }
  399. #quote{
  400. position:relative;
  401. font-size:14px;
  402. line-height:180%;
  403. font-style:italic;
  404. text-align:left;
  405. }
  406. #quote > b{
  407. margin-top:20px;
  408. display:block;
  409. font-style:normal;
  410. font-size:8px;
  411. text-transform:uppercase;
  412. letter-spacing:1px;
  413. text-align:right;
  414. padding-bottom:2px;
  415. }
  416. #quote > b:first-letter{
  417. border-bottom:2px solid #000;
  418. }
  419. #about p{
  420. padding:10px;
  421. }
  422. {/block:IfHeaderWidgets}
  423. nav{
  424. margin:15px 20px;
  425. font-size:0;
  426. text-align:center;
  427. }
  428. nav a{
  429. font-size:9px;
  430. display:inline-block;
  431. border-top:1px solid #eee;
  432. padding:5px 10px;
  433. }
  434. nav a:hover,
  435. .tumblr_blog:hover,
  436. .perma a:hover,
  437. h3:not(.quote):hover{
  438. border-color:{color:HoverBorders};
  439. }
  440. header{
  441. {block:IfNotHeaderBlur}
  442. background:#fff url('{image:Header}');
  443. background-size:cover;
  444. {/block:IfNotHeaderBlur}
  445. overflow:hidden;
  446. height:{text:HeaderHeight};
  447. }
  448. {block:IfHeaderBlur}
  449. header:hover .blur{
  450. filter: blur(0px);
  451. -webkit-filter: blur(0px);
  452. -moz-filter: blur(0px);
  453. -o-filter: blur(0px);
  454. -ms-filter: blur(0px);
  455. transition-duration:.6s;
  456. }
  457. .blur{
  458. position:absolute;
  459. top:-5px;
  460. left:-5px;
  461. min-width:calc(100% + 10px);
  462. min-height:calc(100% + 10px);
  463. filter: blur(5px);
  464. -webkit-filter: blur(5px);
  465. -moz-filter: blur(5px);
  466. -o-filter: blur(5px);
  467. -ms-filter: blur(5px);
  468. transition-duration:.6s;
  469. }
  470. {/block:IfHeaderBlur}
  471. section{
  472. {block:PermalinkPage}
  473. width:600px;
  474. {/block:PermalinkPage}
  475. }
  476.  
  477. .column_one,
  478. header{
  479. {block:IndexPage}
  480. width:{text:HeaderWidth};
  481. {/block:IndexPage}
  482. {block:PermalinkPage}
  483. width:600px;
  484. {/block:PermalinkPage}
  485. }
  486.  
  487. footer{
  488. text-transform:uppercase;
  489. letter-spacing:1px;
  490. line-height:60px;
  491. font-size:8px;
  492. {block:IndexPage}
  493. width:calc({text:HeaderWidth} - 20px);
  494. {/block:IndexPage}
  495. {block:PermalinkPage}
  496. width:580px;
  497. {/block:PermalinkPage}
  498. text-align:left;
  499. padding:0 10px;
  500. }
  501.  
  502. article, footer{
  503. background-color:#fff;
  504. }
  505. article{
  506. word-break:break-word;
  507. {block:PermalinkPage}
  508. width:560px;
  509. padding:20px;
  510. {/block:PermalinkPage}
  511. }
  512.  
  513. {block:IndexPage}
  514. article img, iframe.photoset{
  515. {block:IfFadedImages}opacity:.7;{/block:IfFadedImages}
  516. {block:IfGrayscaleImages}
  517. -webkit-filter: grayscale(100%);
  518. -moz-filter: grayscale(100%);
  519. -o-filter: grayscale(100%);
  520. -ms-filter: grayscale(100%);
  521. filter: grayscale(100%);
  522. {/block:IfGrayscaleImages}
  523. transition-duration:.3s;
  524. -webkit-transition-duration:.3s;
  525. -moz-transition-duration:.3s;
  526. -ms-transition-duration:.3s;
  527. -o-transition-duration:.3s;
  528. }
  529. article:hover img, article:hover iframe.photoset{
  530. {block:IfFadedImages}opacity:1;{/block:IfFadedImages}
  531. {block:IfGrayscaleImages}
  532. -webkit-filter: grayscale(0%);
  533. -moz-filter: grayscale(0%);
  534. -o-filter: grayscale(0%);
  535. -ms-filter: grayscale(0%);
  536. filter: grayscale(0%);
  537. {/block:IfGrayscaleImages}
  538. transition-duration:.3s;
  539. -webkit-transition-duration:.3s;
  540. -moz-transition-duration:.3s;
  541. -ms-transition-duration:.3s;
  542. -o-transition-duration:.3s;
  543. }
  544. section:not(.column_one) article{
  545. float:left;
  546. }
  547. {/block:IndexPage}
  548. .column_two{
  549. {block:IndexPage}
  550. width:calc({text:HeaderWidth} + 40px);
  551. {/block:IndexPage}
  552. }
  553. .column_three, .column_four{
  554. {block:IndexPage}
  555. width:calc({text:HeaderWidth} + 20px);
  556. {/block:IndexPage}
  557. }
  558.  
  559. .column_one article{
  560. margin:60px auto;
  561. padding:50px;
  562. width:calc(100% - 100px);
  563. }
  564. .column_two article{
  565. margin:20px;
  566. padding:40px;
  567. width:calc(50% - 120px);
  568. }
  569. .column_three article{
  570. padding:30px;
  571. margin:10px;
  572. width:calc(33.333% - 80px);
  573. }
  574. .column_four article{
  575. padding:20px;
  576. margin:10px;
  577. width:calc(25% - 60px);
  578. }
  579. .tumblr_blog{
  580. text-transform:uppercase;
  581. letter-spacing:2.5px;
  582. padding-bottom:2px;
  583. font-style:italic;
  584. font-size:7px;
  585. font-weight:bold;
  586. border-bottom:1px solid #eee;
  587. }
  588. .pictures{
  589. display:block;
  590. min-width:100%;
  591. }
  592. article *{
  593. max-width:100%;
  594. }
  595. .caption img{
  596. height:auto;
  597. }
  598. .audio, .question{
  599. overflow:hidden;
  600. white-space:nowrap;
  601. border:1px solid #eee;
  602. }
  603. .player, .question img{
  604. width:50px;
  605. height:50px;
  606. margin:10px;
  607. border-right:1px solid #eee;
  608. padding-right:10px;
  609. display:inline-block;
  610. vertical-align:middle;
  611. position:relative;
  612. overflow:hidden;
  613. }
  614. .player span{
  615. position: absolute;
  616. top: 0;
  617. left: -2px;
  618. z-index: 9;
  619. bottom: 0;
  620. right: 0;
  621. padding-top: 13px;
  622. background-color: #fff;
  623. opacity:0;
  624. transition-duration:.4s;
  625. }
  626. .audio:hover .player span{
  627. opacity:1;
  628. transition-duration:.4s;
  629. }
  630. .audio > p, .question p{
  631. vertical-align:middle;
  632. white-space:normal;
  633. width:calc(100% - 91px);
  634. display:inline-block;
  635. margin-right:10px;
  636. line-height:130%;
  637. }
  638. .question p{
  639. padding:10px 0;
  640. }
  641. .audio > p{
  642. text-align:center;
  643. text-transform:uppercase;
  644. font-size:8px;
  645. letter-spacing:1px;
  646. }
  647. .question b{
  648. text-transform:uppercase;
  649. font-size:8px;
  650. letter-spacing:1px;
  651. position:relative;
  652. padding-right:25px;
  653. }
  654. .question b:after{
  655. content:"";
  656. width:15px;
  657. height:1px;
  658. background-color:#eee;
  659. position:absolute;
  660. right:5px;
  661. top:0;
  662. bottom:0;
  663. margin:auto;
  664. }
  665. .chat li{
  666. list-style-type:none;
  667. background-color:#f2f2F2;
  668. margin-bottom:2px;
  669. padding:5px 10px;
  670. }
  671. .quote{
  672. padding-left:60px;
  673. position:relative;
  674. font-style:italic;
  675. padding-bottom:20px;
  676. }
  677. .quote:before{
  678. display:block;
  679. content: "\f347";
  680. font-style: normal;
  681. font-family: "Ionicons";
  682. font-size:30px;
  683. width:40px;
  684. height:40px;
  685. line-height:40px;
  686. text-align:center;
  687. position:absolute;
  688. border-right:1px solid #eee;
  689. top:0;
  690. left:0;
  691. margin:auto;
  692. }
  693. .quote + .caption{
  694. text-align:center;
  695. letter-spacing:1px;
  696. font-size:8px;
  697. text-transform:uppercase;
  698. }
  699.  
  700. .caption blockquote, .caption p,
  701. .caption ul, .caption ol{
  702. margin:10px 0;
  703. }
  704. .caption ul, .caption ol{
  705. padding-left:30px;
  706. }
  707. .caption blockquote{
  708. padding-left:20px;
  709. border-left:1px solid #eee;
  710. }
  711. .perma a{
  712. border-top:1px solid transparent;
  713. padding-top:10px;
  714. }
  715. .perma > a:first-child{
  716. margin-right:5px;
  717. }
  718. .perma, .tags{
  719. font-size:7px;
  720. text-transform:uppercase;
  721. letter-spacing:1px;
  722. }
  723. .perma{
  724. line-height: 17px;
  725. margin-top:15px;
  726. padding-top:5px;
  727. border-top:1px solid #eee;
  728. }
  729. .tags i, .tags span{
  730. display:table-cell;
  731. vertical-align:middle;
  732. }
  733. .tags span{
  734. padding:0 10px;
  735. }
  736. .tags a:not(:last-child):after{
  737. content:", ";
  738. }
  739. .tags i{
  740. padding:10px;
  741. font-size:18px;
  742. }
  743. .tags{
  744. min-width:100%;
  745. margin-top:5px;
  746. padding-top:5px;
  747. text-align:left;
  748. word-break:break-word;
  749. border-top:1px solid #eee;
  750. display:table;
  751. line-height:130%;
  752. }
  753. .perma > span{
  754. display:block;
  755. float:right;
  756. {block:ifNotShowRebloggedFrom}
  757. {block:IndexPage}
  758. display:none;
  759. {/block:IndexPage}
  760. {/block:ifNotShowRebloggedFrom}
  761. }
  762. .perma > span i{
  763. margin-left:10px;
  764. font-style:normal;
  765. display: inline-block;
  766. vertical-align: -2px;
  767. font-size: 10px;
  768. margin-right: 3px;
  769. }
  770. h3{
  771. font-size:9px;
  772. text-transform:uppercase;
  773. letter-spacing:1px;
  774. border-bottom:1px solid #eee;
  775. margin-bottom:10px;
  776. padding-bottom:5px;
  777. }
  778.  
  779. footer i{
  780. font-size:11px;
  781. margin:0 10px;
  782. transition-duration:.2s;
  783. }
  784. #loadmore:hover i{
  785. margin-bottom:-10px;
  786. transition-duration:.2s;
  787. }
  788. #btop:hover i{
  789. margin-top:-10px;
  790. transition-duration:.2s;
  791. }
  792. #nxt:hover i{
  793. margin-right:-5px;
  794. padding-left:13px;
  795. }
  796. #prv:hover i{
  797. margin-left:-5px;
  798. padding-right:10px;
  799. }
  800. #pagination{
  801. font-size:12px;
  802. }
  803. #pagination, #loadmore{
  804. float:right;
  805. }
  806. #pagination a, #pagination span, footer i{
  807. display:inline-block;
  808. vertical-align:middle;
  809. }
  810. #pagination a, #pagination span{
  811. font-style:italic;
  812. margin:0 5px;
  813. }
  814. #pagination a:hover,
  815. #pagination span{
  816. font-weight:bold;
  817. }
  818. #pagination span{
  819. font-size:13px;
  820. }
  821. </style>
  822. </head>
  823. <body id="noscroll">
  824. <header>
  825. {block:IfHeaderBlur}<img src="{image:Header}" class="blur">{/block:IfHeaderBlur}
  826. <div id="sidebar">
  827. {block:IfHeaderWidgets}
  828. <a href="#"><i class="ion-ios-plus-empty"></i></a>
  829. {/block:IfHeaderWidgets}
  830. <img src="{image:Avatar}">
  831. <div id="description">
  832. {Description}
  833. </div>
  834. <nav>
  835. <a href="/" title="Home">001.</a>
  836. <a href="/ask" title="Message">002.</a>
  837. {block:IfLink1}<a href="{text:Link1URL}" title="{text:Link1Name}">003.</a>{/block:IfLink1}
  838. {block:IfLink2}<a href="{text:Link2URL}" title="{text:Link2Name}">004.</a>{/block:IfLink2}
  839. {block:IfLink3}<a <a href="{text:Link3URL}" title="{text:Link3Name}">005.</a>{/block:IfLink3}
  840. {block:IfLink4}<a href="{text:Link4URL}" title="{text:Link4Name}">006.</a>{/block:IfLink4}
  841. {block:IfLink5}<a href="{text:Link5URL}" title="{text:Link5Name}">007.</a>{/block:IfLink5}
  842. {block:IfLink6}<a href="{text:Link6URL}" title="{text:Link6Name}">008.</a>{/block:IfLink6}
  843. </nav>
  844. </div>
  845. {block:IfHeaderWidgets}
  846. <div id="table" class="{select:HeaderWidgets}">
  847. {block:IfHeaderLinks}
  848. <div id="navigation">
  849. <a href="{text:HeaderLink1URL}">{text:HeaderLink1Name}</a>
  850. <a href="{text:HeaderLink2URL}">{text:HeaderLink2Name}</a>
  851. <a href="{text:HeaderLink3URL}">{text:HeaderLink3Name}</a>
  852. </div>
  853. {/block:IfHeaderLinks}
  854. {block:IfHeaderTags}
  855. <div id="tags">
  856. <a href="{text:HeaderTag1URL}">{text:HeaderTag1Name}</a>
  857. <a href="{text:HeaderTag2URL}">{text:HeaderTag2Name}</a>
  858. <a href="{text:HeaderTag3URL}">{text:HeaderTag3Name}</a>
  859. </div>
  860. {/block:IfHeaderTags}
  861. {block:IfHeaderQuote}
  862. <div id="quote">
  863. <p>{text:HeaderQuote}</p>
  864. <b>{text:HeaderQuoteSource}</b>
  865. </div>
  866. {/block:IfHeaderQuote}
  867. {block:IfHeaderAbout}
  868. <div id="about">
  869. <p>{text:HeaderAbout}</p>
  870. </div>
  871. {/block:IfHeaderAbout}
  872. </div>
  873. {/block:IfHeaderWidgets}
  874. </header>
  875. <section{block:IndexPage} class="{select:NumberOfColumns}"{/block:IndexPage}>
  876. {block:Posts}
  877. {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} -->
  878. <article>
  879. {block:Audio}
  880. <div class="audio">
  881. <div class="player">
  882. {block:AlbumArt}
  883. <img src="{AlbumArtURL}">
  884. {/block:AlbumArt}
  885. {block:AudioPlayer} {AudioPlayer} {/block:AudioPlayer}
  886. </div>
  887. <p>
  888. {block:Artist}
  889. <b>{Artist}</b> <br>
  890. {/block:Artist}
  891. {block:TrackName}
  892. {TrackName}
  893. {/block:TrackName}
  894. </p>
  895. </div>
  896. {block:Caption}
  897. <div class="caption">{Caption}</div>
  898. {/block:Caption}
  899. {/block:Audio}
  900.  
  901. {block:Quote}
  902. <h3 class="quote">{Quote}</h3>
  903. {block:Source}
  904. <div class="caption">
  905. {Source}
  906. </div>
  907. {/block:Source}
  908. {/block:Quote}
  909.  
  910. {block:Answer}
  911. <div class="question">
  912. <img src="{AskerPortraitURL-96}">
  913. <p>
  914. <b>{Asker}</b>
  915. {Question}
  916. </p>
  917. </div>
  918. <div class="caption">{Answer}</div>
  919. {/block:Answer}
  920.  
  921.  
  922. {block:Photo}
  923. <a href="{PhotoURL-HighRes}" target="_blank"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="pictures"></a>
  924. {block:Caption}
  925. <div class="caption">
  926. {Caption}
  927. </div>
  928. {/block:Caption}
  929. {/block:Photo}
  930.  
  931. {block:Photoset}
  932. {Photoset}
  933. {block:Caption}
  934. <div class="caption">
  935. {Caption}
  936. </div>
  937. {/block:Caption}
  938. {/block:Photoset}
  939.  
  940. {block:Video}
  941. <div class="video">{Video-500}</div>
  942. {block:Caption}
  943. <div class="caption">
  944. {Caption}
  945. </div>
  946. {/block:Caption}
  947. {/block:Video}
  948.  
  949. {block:Text}
  950. {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
  951. <div class="caption">
  952. {Body}
  953. </div>
  954. {/block:Text}
  955.  
  956. {block:Link}
  957. <h3><a href="{URL}" target="{Target}">{Name} »</a></h3>
  958. {block:Description}
  959. <div class="caption">
  960. {Description}
  961. </div>
  962. {/block:Description}
  963. {/block:Link}
  964.  
  965. {block:Chat}
  966. {block:Title}
  967. <h3><a href="{Permalink}">{Title}</a></h3>
  968. {/block:Title}
  969. <ul class="chat">
  970. {block:Lines}
  971. <li>
  972. {block:Label}
  973. <b>{Label}</b>
  974. {/block:Label}
  975. {Line}
  976. </li>
  977. {/block:Lines}
  978. </ul>
  979. {/block:Chat}
  980.  
  981. {block:Date}
  982. <div class="perma">
  983. <a href="{Permalink}">{MonthNumberWithZero}/{DayOfMonth}</a>{block:NoteCount} <a href="{Permalink}">{NoteCount}N.</a>{/block:NoteCount} {block:RebloggedFrom}<span><i class="ion-loop"></i> <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{block:PermalinkPage} <i>©</i> <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>{/block:PermalinkPage}</span>{/block:RebloggedFrom}
  984. </div>
  985. {block:PermalinkPage}
  986. {block:HasTags}
  987. <div class="tags">
  988. <i>#</i>
  989. <span>
  990. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  991. </span>
  992. </div>
  993. {/block:HasTags}
  994. {/block:PermalinkPage}
  995. {/block:Date}
  996.  
  997. {block:PostNotes}
  998. <div id="notes">
  999. {PostNotes-64}
  1000. </div>
  1001. {/block:PostNotes}
  1002. </article>
  1003. {/block:Posts}
  1004. </section>
  1005. {block:Pagination}
  1006. <footer class="{select:NextPage}">
  1007. <span><a id="btop"><i class="ion-chevron-up"></i> back to top</a></span>
  1008. <span id="pagination">
  1009. {block:PreviousPage}<a href="{PreviousPage}" id="prv"><i class="ion-chevron-left"></i></a>{/block:PreviousPage}
  1010. {block:JumpPagination length="3"}
  1011. {block:CurrentPage}<span>{PageNumber}</span>{/block:CurrentPage}
  1012. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1013.  
  1014. {block:NextPage}<a href="{NextPage}" id="nxt"><i class="ion-chevron-right"></i></a>{/block:NextPage}
  1015. </span>
  1016. <a id="loadmore">Load more posts <i class="ion-chevron-down"></i></a>
  1017. </footer>
  1018. {/block:Pagination}
  1019.  
  1020.  
  1021.  
  1022. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1023. <script src="http://static.tumblr.com/wgg6svp/sDinmsq3x/jquery.style-my-tooltips.js"></script>
  1024. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1025. <script src="http://static.tumblr.com/q8c0vxg/xYrnjmd74/jquery.infinitescroll.min.js"></script>
  1026. <script src="http://static.tumblr.com/wgg6svp/MBEnnvwcu/masonry330.js"></script>
  1027. <script src="http://static.tumblr.com/emvnqzg/NOVo0fisl/scripts.js"></script>
  1028. <script src ="http://static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  1029. <script>
  1030. $(function(){
  1031. $("[title]").style_my_tooltips({
  1032. tip_follows_cursor:true,
  1033. tip_delay_time:200,
  1034. tip_fade_speed:500
  1035. });
  1036. $('#btop').click(function(e){
  1037. e.preventDefault();
  1038. $('body').animate({scrollTop : 0}, 800);
  1039. });
  1040.  
  1041. {block:IfHeaderWidgets}
  1042. $('#sidebar > a').click(function(ev){
  1043. ev.preventDefault();
  1044. var value = (parseInt($('header').width()) * 65 / 100) + 5;
  1045. if($(this).hasClass('rotate')){
  1046. $(this).removeClass('rotate');
  1047. $('#table').animate({
  1048. 'right' : '-'+value
  1049. }, 700);
  1050. }else{
  1051. $(this).addClass('rotate');
  1052. $('#table').animate({
  1053. 'right' : '0px'
  1054. }, 700);
  1055. }
  1056. });
  1057. {/block:IfHeaderWidgets}
  1058.  
  1059. {block:IndexPage}
  1060. var parent = $('section');
  1061. if($('footer').hasClass('ldmr') || $('footer').hasClass('ifntsc')){
  1062. parent.infinitescroll({
  1063. navSelector : "#pagination",
  1064. nextSelector : "#nxt",
  1065. itemSelector : "article",
  1066. bufferPx : 50,
  1067. done : "",
  1068. loading: {
  1069. img : "",
  1070. msgText: "",
  1071. finishedMsg:""
  1072. },
  1073. },
  1074. function( newElements ) {
  1075. var $newElems = $( newElements ).css({ opacity: 0 });
  1076. $newElems.imagesLoaded(function(){
  1077. $newElems.animate({ opacity: 1 });
  1078. if('{select:NumberOfColumns}' != 'column_one') parent.masonry( 'appended', $newElems);
  1079. });
  1080. resizeVideos();
  1081. });
  1082.  
  1083. if($('footer').hasClass('ldmr')){
  1084. parent.infinitescroll({
  1085. behavior: 'twitter'
  1086. });
  1087. $(window).unbind('.infscr');
  1088. $('a#loadmore').click(function(){
  1089. $('section').infinitescroll('retrieve');
  1090. $('footer').show();
  1091. return false;
  1092. });
  1093. }
  1094. }
  1095.  
  1096. if('{select:NumberOfColumns}' != 'column_one'){
  1097. $('article:first').addClass('firstoftype');
  1098. parent.imagesLoaded(function(){
  1099. parent.masonry({
  1100. itemSelector: 'article',
  1101. isAnimated: false,
  1102. percentPosition: true,
  1103. columnWidth : ".firstoftype"
  1104. });
  1105. });
  1106. setInterval(function(){parent.masonry();}, 10000);
  1107. }
  1108.  
  1109. {/block:IndexPage}
  1110. });
  1111. </script>
  1112. </body>
  1113. </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!