API tools faq
paste
Advertisement
cornetespoir

sammyapetals // projects page

cornetespoir
Nov 23rd, 2016
231
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.50 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <script type="text/javascript"
  7. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  8. <script>
  9. $(document).ready(function() {
  10. //
  11. $('a.poplight[href^=#]').click(function() {
  12. var popID = $(this).attr('rel'); //Get Popup Name
  13. var popURL = $(this).attr('href'); //Get Popup href to define size
  14. var query= popURL.split('?');
  15. var dim= query[1].split('&');
  16. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  17. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://image.flaticon.com/icons/svg/159/159691.svg" class="btn_close" title="escape" alt="escape" style="width:26px" /></a>');
  18. var popMargTop = ($('#' + popID).height() + 80) / 2;
  19. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  20. //Apply Margin to Popup
  21. $('#' + popID).css({
  22. 'margin-top' : -popMargTop,
  23. 'margin-left' : -popMargLeft
  24. });
  25. $('body').append('<div id="fade"></div>');
  26. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  27. return false;
  28. });
  29. $('a.close, #fade').live('click', function() {
  30. $('#fade , .popup_block').fadeOut(function() {
  31. $('#fade, a.close').remove(); //fade them both out
  32. });
  33. return false;
  34. });
  35. });
  36. </script>
  37. </head>
  38.  
  39. <style type="text/css">
  40.  
  41. #fade { /*--Transparent background layer--*/
  42. display: none; /*--hidden by default--*/
  43. background: #fff;
  44. background-image: url(''); /*if you want to add a background image to go behind your popup */
  45. position: fixed; left: 0; top: 0;
  46. width: 100%; height: 100%;
  47. z-index: 9999;
  48. }
  49. .popup_block{
  50. display: none; /*--hidden by default--*/
  51. background: #fff;
  52. padding: 20px;
  53. float: left;
  54. position: fixed;
  55. top: 50%; left: 50%;
  56. z-index: 99999; /*if the box is hiding behind other things in your theme, add more 9′s */
  57. }
  58. img.btn_close {
  59. float: right;
  60. margin: -20px -20px 0 0;
  61. }
  62. /*--Making IE6 Understand Fixed Positioning--*/
  63. *html #fade {
  64. position: absolute;
  65. }
  66. *html .popup_block {
  67. position: absolute;
  68. }
  69. body {
  70. background:#f8f8f8;
  71. font-family:helvetica;
  72. font-size:.9em;
  73. }
  74.  
  75. a {
  76. text-decoration:none;
  77. color:#222;
  78. }
  79.  
  80. #sort {
  81. width:780px;
  82. margin:20px auto auto auto;
  83. background:white;
  84. padding:10px 20px;
  85. font-size:1em;
  86. border:1px solid #eee;
  87. }
  88.  
  89. #sort li {display:inline-block;
  90. text-align:center;
  91. list-style: none;
  92. margin:0px 10px;
  93. font-size:1.2em;
  94.  
  95.  
  96. }
  97.  
  98. #sort ul {list-style: none; margin:0px 0px; padding:none;}
  99.  
  100. #sort a {border:1px solid transparent; display:block; padding:4px; margin-bottom:5px; background:white;
  101. transition:.6s;
  102. }
  103.  
  104. #sort a:hover {color:black; border:1px solid #ddd;
  105. background:#eee;
  106. transition:.6s;
  107. }
  108.  
  109. #sort li a.selected {color:black;
  110. border:1px solid #ddd;
  111. background:#f6f6f6;
  112. }
  113.  
  114. #container {
  115. width:780px;
  116. margin:10px auto;
  117. position:relative;
  118. background:white;
  119. padding:20px;
  120. border:1px solid #eee;
  121. }
  122.  
  123. #entry {
  124. border:1px solid #eee;
  125. padding:10px;
  126. background:white;
  127. width:330px;
  128. transition:.6s;
  129. margin:12px;
  130. display:inline-block;
  131.  
  132. }
  133.  
  134. #entry blockquote{
  135. border-left:1px solid #ddd;
  136. padding-left:10px;
  137. }
  138.  
  139. .title {
  140. font-size:1.2em;
  141. font-weight:bold;
  142. padding:4px 0px;
  143. }
  144.  
  145. .button {
  146. padding:4px;
  147. border:2px solid #e8a5db;
  148. float:right;
  149. transition:.6s;
  150. cursor:pointer;
  151. }
  152.  
  153. .button:hover {
  154. background:#e8a5db;
  155. transition:.6s;
  156. color:white;
  157. }
  158.  
  159. .info {
  160. width:100%;
  161. margin-left:-10px;
  162. padding:10px;
  163. border-top:1px solid #eee;
  164. }
  165.  
  166. .text {
  167. padding:20px;
  168. width:350px;
  169. border:1px solid #ddd;
  170. }
  171.  
  172. .quick {
  173. width:150px;
  174. border:1px solid #ddd;
  175. }
  176.  
  177. .popinfo li {
  178. list-style:none;
  179. vertical-align:top;
  180. display:inline-block;
  181. font-size:1.2em;
  182. margin:4px;
  183. }
  184.  
  185. .updated {
  186. width:150px;
  187. border:1px solid #ddd;
  188. }
  189.  
  190. @font-face { font-family: "oliver"; src: url('https://dl.dropboxusercontent.com/s/y74b19hkp9def0k/olivier_demo.ttf'); }
  191.  
  192.  
  193. /*lables */
  194. .abt, .abt2 {
  195. padding:10px;
  196. font-size:1.6em;
  197. font-family:oliver; /*font of labels (default is a script-like font )*/
  198. color:#444; /*color of labels */
  199. border-bottom:1px dotted #ddd; /*border under labels */
  200.  
  201. }
  202.  
  203. .abt2 {
  204. border-top:1px dotted #ddd;
  205. font-family:helvetica;
  206. font-size:1em;
  207. }
  208.  
  209. .abt:first-letter {
  210. color:#DB419C; /*first letter of lables (default is pink) */
  211. opacity:.6;
  212. }
  213.  
  214. .nav {
  215. float:right;
  216. }
  217.  
  218. .nav li {
  219. margin:auto;
  220. display:inline-block;
  221. }
  222.  
  223. #egg { opacity:.8;right:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  224. font-family: "bitxmap";
  225. border:1px solid #444; z-index:4;
  226.  
  227. }
  228. #egg:hover { animation-name: egg;
  229. animation-duration: 1s;
  230. animation-iteration-count: infinite;}
  231. @keyframes egg{
  232. 0%{}
  233. 10%{transform:rotate(20deg)}
  234. 80%{transform:rotate(-20deg)}
  235. 100%{}
  236. }
  237.  
  238.  
  239. </style>
  240.  
  241. <body>
  242.  
  243. <div id="sort">
  244. <div class="nav">
  245. <li><a href="/">home</a> </li>
  246. <li> <a href="/ask">ask</a> </li>
  247. <li><a href="/archive">archive</a> </li>
  248. <li><a href="/about">about</a> </li>
  249. <li><a href="/tags">tags</a> </li>
  250. </div>
  251. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  252.  
  253. <li><a href="#filter" data-option-filter=".story">all</a></li>
  254. <li><a href="#filter" data-option-filter=".fics">fics</a></li>
  255. <li><a href="#filter" data-option-filter=".na">nanowrimo</a></li>
  256. <li><a href="#filter" data-option-filter=".other">other</a></li>
  257.  
  258. </ul>
  259.  
  260.  
  261.  
  262. </div>
  263.  
  264. <div id="container" class="clearfix">
  265.  
  266. <a href="http://espoirthemes.tumblr.com" title="theme credit"><div id="egg"></div></a>
  267. <!-- start entry 1 -->
  268. <div id="entry" class="story fics">
  269.  
  270. <div class="title">Fic Title</div>
  271. Summary:
  272. <!-- summary -->
  273. <blockquote>
  274. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc.
  275.  
  276. </blockquote>
  277. <!--summary end -->
  278. <div class="info">
  279. <!--keep reading button
  280.  
  281. !!!! it's very importan that each entry has a different rel. it's easiest to label them as 01, 02, 03, etc !!!!
  282.  
  283. -->
  284. <div class="button"><a href="#?w=740" rel="01" class="poplight">Keep Reading</a></div> <!-- end button -->
  285.  
  286. Start date: 1/1/17 </div>
  287. </div>
  288. <!--end entry 1 -->
  289.  
  290. <!-- entry 2 -->
  291. <div id="entry" class="story fics">
  292. <div class="title">Fic Title</div>
  293. Summary:
  294.  
  295. <blockquote>
  296. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc.
  297.  
  298. </blockquote>
  299.  
  300. <div class="info">
  301. <div class="button"><a href="#?w=740" rel="02" class="poplight">Keep Reading</a></div> Start date: 1/1/17 </div>
  302. </div>
  303. <!--end entry 2 -->
  304.  
  305. <div id="entry" class="story fics">
  306. <div class="title">Fic Title</div>
  307. Summary:
  308.  
  309. <blockquote>
  310. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc.
  311.  
  312. </blockquote>
  313.  
  314. <div class="info">
  315. <div class="button"><a href="#?w=740" rel="03" class="poplight">Keep Reading</a></div> Start date: 1/1/17 </div>
  316. </div>
  317.  
  318. <div id="entry" class="story other">
  319. <div class="title">Fic Title</div>
  320. Summary:
  321.  
  322. <blockquote>
  323. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc.
  324. Mauris elementum accumsan malesuada. Suspendisse dignissim imperdiet elementum. Nunc imperdiet ligula orci. Proin a feugiat turpis, mattis fringilla erat. Vestibulum aliquam pulvinar consectetur. Aenean id nisi ante. Praesent imperdiet tortor a ipsum aliquet imperdiet. Vestibulum ultrices augue sit amet diam aliquet tincidunt. In aliquam libero a diam pulvinar, non sodales nibh molestie. Sed convallis vulputate turpis, sagittis dictum risus consectetur at.
  325.  
  326. </blockquote>
  327.  
  328. <div class="info">
  329. <div class="button"><a href="#?w=740" rel="04" class="poplight">Keep Reading</a></div> Start date: 1/1/17 </div>
  330. </div>
  331.  
  332. <div id="entry" class="story na">
  333. <div class="title">Project Title</div>
  334. Summary:
  335.  
  336. <blockquote>
  337. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc.
  338.  
  339. </blockquote>
  340.  
  341. <div class="info">
  342. <div class="button"><a href="#?w=740" rel="05" class="poplight">Keep Reading</a></div> Start date: 1/1/17 </div>
  343. </div>
  344.  
  345. </div>
  346. </body>
  347. <!-- make sure each pop up id is the same as the rel="" -->
  348.  
  349. <!--start popup 1 -->
  350. <div id="01" class="popup_block">
  351.  
  352. <div class="popinfo">
  353. <!-- quick info -->
  354. <li class="quick">
  355.  
  356. <div class="abt">Quick Info</div>
  357.  
  358. <!--info goes here -->
  359. <div style="padding:10px">
  360. Proin a feugiat turpis, mattis fringilla erat. </div>
  361. <!--end info -->
  362. <div class="abt2">
  363. last updated: mm/dd/yy
  364. </div> </li>
  365.  
  366. <!--popup text -->
  367. <li class="text">
  368. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc. Mauris elementum accumsan malesuada. Suspendisse dignissim imperdiet elementum. Nunc imperdiet ligula orci. Proin a feugiat turpis, mattis fringilla erat. Vestibulum aliquam pulvinar consectetur.
  369. </li>
  370. <!--end popup text -->
  371. <li class="updated">
  372.  
  373.  
  374. <div class="abt">
  375. links
  376. </div>
  377. <div style="padding:10px">
  378. <!-- links -->
  379. <a hef="">link</a> <br>
  380. <a href="">link</a>
  381. <!-- end links -->
  382. </div></li>
  383. </div>
  384. </div></div> <!-- end popup 1 -->
  385.  
  386. <div id="02" class="popup_block">
  387. <div class="popinfo">
  388. <!-- quick info -->
  389. <li class="quick">
  390.  
  391. <div class="abt">Quick Info</div>
  392.  
  393. <!--info goes here -->
  394. <div style="padding:10px">
  395. Proin a feugiat turpis, mattis fringilla erat. </div>
  396. <!--end info -->
  397. <div class="abt2">
  398. last updated: mm/dd/yy
  399. </div> </li>
  400.  
  401. <!--popup text -->
  402. <li class="text">
  403. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc. Mauris elementum accumsan malesuada. Suspendisse dignissim imperdiet elementum. Nunc imperdiet ligula orci. Proin a feugiat turpis, mattis fringilla erat. Vestibulum aliquam pulvinar consectetur.
  404. </li>
  405. <!--end popup text -->
  406. <li class="updated">
  407.  
  408.  
  409. <div class="abt">
  410. links
  411. </div>
  412. <div style="padding:10px">
  413. <!-- links -->
  414. <a hef="">link</a> <br>
  415. <a href="">link</a>
  416. <!-- end links -->
  417. </div></li>
  418. </div>
  419. </div></div>
  420.  
  421. <div id="03" class="popup_block">
  422. <div class="popinfo">
  423. <!-- quick info -->
  424. <li class="quick">
  425.  
  426. <div class="abt">Quick Info</div>
  427.  
  428. <!--info goes here -->
  429. <div style="padding:10px">
  430. Proin a feugiat turpis, mattis fringilla erat. </div>
  431. <!--end info -->
  432. <div class="abt2">
  433. last updated: mm/dd/yy
  434. </div> </li>
  435.  
  436. <!--popup text -->
  437. <li class="text">
  438. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc. Mauris elementum accumsan malesuada. Suspendisse dignissim imperdiet elementum. Nunc imperdiet ligula orci. Proin a feugiat turpis, mattis fringilla erat. Vestibulum aliquam pulvinar consectetur.
  439. </li>
  440. <!--end popup text -->
  441. <li class="updated">
  442.  
  443.  
  444. <div class="abt">
  445. links
  446. </div>
  447. <div style="padding:10px">
  448. <!-- links -->
  449. <a hef="">link</a> <br>
  450. <a href="">link</a>
  451. <!-- end links -->
  452. </div></li>
  453. </div>
  454.  
  455. </div></div>
  456.  
  457. <div id="04" class="popup_block">
  458. <div class="popinfo">
  459. <!-- quick info -->
  460. <li class="quick">
  461.  
  462. <div class="abt">Quick Info</div>
  463.  
  464. <!--info goes here -->
  465. <div style="padding:10px">
  466. Proin a feugiat turpis, mattis fringilla erat. </div>
  467. <!--end info -->
  468. <div class="abt2">
  469. last updated: mm/dd/yy
  470. </div> </li>
  471.  
  472. <!--popup text -->
  473. <li class="text">
  474. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc. Mauris elementum accumsan malesuada. Suspendisse dignissim imperdiet elementum. Nunc imperdiet ligula orci. Proin a feugiat turpis, mattis fringilla erat. Vestibulum aliquam pulvinar consectetur.
  475. </li>
  476. <!--end popup text -->
  477. <li class="updated">
  478.  
  479.  
  480. <div class="abt">
  481. links
  482. </div>
  483. <div style="padding:10px">
  484. <!-- links -->
  485. <a hef="">link</a> <br>
  486. <a href="">link</a>
  487. <!-- end links -->
  488. </div></li>
  489. </div>
  490.  
  491. </div></div>
  492.  
  493. <div id="05" class="popup_block">
  494. <div class="popinfo">
  495. <!-- quick info -->
  496. <li class="quick">
  497.  
  498. <div class="abt">Quick Info</div>
  499.  
  500. <!--info goes here -->
  501. <div style="padding:10px">
  502. Proin a feugiat turpis, mattis fringilla erat. </div>
  503. <!--end info -->
  504. <div class="abt2">
  505. last updated: mm/dd/yy
  506. </div> </li>
  507.  
  508. <!--popup text -->
  509. <li class="text">
  510. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed iaculis risus, et lobortis purus. Maecenas sit amet nulla malesuada, congue dolor a, dignissim leo. Nunc eget metus pharetra, convallis sem at, commodo purus. Quisque tellus ipsum, lobortis vel viverra hendrerit, accumsan sed nunc. Mauris elementum accumsan malesuada. Suspendisse dignissim imperdiet elementum. Nunc imperdiet ligula orci. Proin a feugiat turpis, mattis fringilla erat. Vestibulum aliquam pulvinar consectetur.
  511. </li>
  512. <!--end popup text -->
  513. <li class="updated">
  514.  
  515.  
  516. <div class="abt">
  517. links
  518. </div>
  519. <div style="padding:10px">
  520. <!-- links -->
  521. <a hef="">link</a> <br>
  522. <a href="">link</a>
  523. <!-- end links -->
  524. </div></li>
  525. </div>
  526.  
  527. </div></div>
  528.  
  529. <script src="https://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  530. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  531. <script>
  532. $(function(){
  533.  
  534. var $container = $('#container');
  535.  
  536. $container.isotope({
  537. itemSelector : '.story'
  538. });
  539.  
  540.  
  541. var $optionSets = $('#sort .option-set'),
  542. $optionLinks = $optionSets.find('a');
  543.  
  544. $optionLinks.click(function(){
  545. var $this = $(this);
  546. // don't proceed if already selected
  547. if ( $this.hasClass('selected') ) {
  548. return false;
  549. }
  550. var $optionSet = $this.parents('.option-set');
  551. $optionSet.find('.selected').removeClass('selected');
  552. $this.addClass('selected');
  553.  
  554. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  555. var options = {},
  556. key = $optionSet.attr('data-option-key'),
  557. value = $this.attr('data-option-filter');
  558. // parse 'false' as false boolean
  559. value = value === 'false' ? false : value;
  560. options[ key ] = value;
  561. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  562. // changes in layout modes need extra logic
  563. changeLayoutMode( $this, options )
  564. } else {
  565. // otherwise, apply new options
  566. $container.isotope( options );
  567. }
  568.  
  569. return false;
  570. });
  571.  
  572.  
  573. });
  574. </script>
  575.  
  576. </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!