API tools faq
paste
Advertisement
yLii

xprmnt.23

yLii
Apr 11th, 2016
125
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <!--viewport goodness http://enva.to/A79s3G-->
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Overthink Ink</title>
  8. <link rel="stylesheet" href="css/styles.css">
  9. <!--[if lt IE 9]>
  10. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  11. <![endif]-->
  12. <!-- Favicons -->
  13. <link rel="shortcut icon" href="http://webdesign.tutsplus.com/wp-content/themes/tuts/images/theme/webdesigntuts/favicon.ico" />
  14. <link rel="apple-touch-icon" href="http://webdesign.tutsplus.com/wp-content/themes/tuts/images/theme/webdesigntuts/apple-touch-icon.png" />
  15.  
  16.  
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  18.  
  19. <link rel="stylesheet" type="text/css" href="http://dan-silver.github.io/ElementTransitions.js/css/elementTransitions.css" />
  20. <script type="text/javascript" src="http://dan-silver.github.io/ElementTransitions.js/js/elementTransitions.js"></script>
  21.  
  22.  
  23.  
  24. <meta name="image:Header Background" content=""/>
  25. <meta name="if:Show Description" content="0"/>
  26.  
  27. <meta name="select:Header Font" content="Abraham Lincoln" title="Abraham Lincoln">
  28. <meta name="select:Header Font" content="Barkentina" title="Barkentina">
  29. <meta name="select:Header Font" content="Blake" title="Blake">
  30. <meta name="select:Header Font" content="Blanch" title="Blanch">
  31. <meta name="select:Header Font" content="Brain Flower" title="Brain Flower">
  32. <meta name="select:Header Font" content="Buffet" title="Buffet">
  33. <meta name="select:Header Font" content="Decopolitan" title="Decopolitan">
  34. <meta name="select:Header Font" content="Disturbance" title="Disturbance">
  35. <meta name="select:Header Font" content="Helvetica" title="Helvetica">
  36. <meta name="select:Header Font" content="Mayo" title="Mayo">
  37. <meta name="select:Header Font" content="Parisish" title="Parisish">
  38. <meta name="select:Header Font" content="PT Serif" title="PT Serif">
  39. <meta name="select:Header Font" content="Respective" title="Respective">
  40. <meta name="select:Header Font" content="Sachiko" title="Sachiko">
  41. <meta name="select:Header Font" content="Serifiqo" title="Serifiqo">
  42.  
  43.  
  44. <meta name="select:H Font" content="Abraham Lincoln" title="Abraham Lincoln">
  45. <meta name="select:H Font" content="Barkentina" title="Barkentina">
  46. <meta name="select:H Font" content="Blake" title="Blake">
  47. <meta name="select:H Font" content="Blanch" title="Blanch">
  48. <meta name="select:H Font" content="Brain Flower" title="Brain Flower">
  49. <meta name="select:H Font" content="Buffet" title="Buffet">
  50. <meta name="select:H Font" content="Decopolitan" title="Decopolitan">
  51. <meta name="select:H Font" content="Disturbance" title="Disturbance">
  52. <meta name="select:H Font" content="Helvetica" title="Helvetica">
  53. <meta name="select:H Font" content="Mayo" title="Mayo">
  54. <meta name="select:H Font" content="Parisish" title="Parisish">
  55. <meta name="select:H Font" content="PT Serif" title="PT Serif">
  56. <meta name="select:H Font" content="Respective" title="Respective">
  57. <meta name="select:H Font" content="Sachiko" title="Sachiko">
  58. <meta name="select:H Font" content="Serifiqo" title="Serifiqo">
  59.  
  60. <meta name="select:Avatar Style" content="circle" title="Circle">
  61. <meta name="select:Avatar Style" content="square" title="Square">
  62. <meta name="select:Avatar Style" content="hidden" title="Hidden">
  63.  
  64.  
  65. <meta name="text:Header Font Height" content="50px">
  66. <meta name="text:About" content="About">
  67. <meta name="color:Header Font Colour" content="#fff" />
  68.  
  69.  
  70.  
  71. <style type="text/css">
  72.  
  73.  
  74. @import url(http://necolas.github.io/normalize.css/2.1.2/normalize.css);
  75. @import url(http://static.tumblr.com/m9qxvhq/rytms5akd/fluid_skeleton.css);
  76.  
  77. @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
  78.  
  79. @font-face {font-family:"Abraham Lincoln";src:url('http://static.tumblr.com/m9qxvhq/Q1Mmsabay/abrahamlincoln.ttf');}
  80. @font-face {font-family:"Barkentina";src:url('http://static.tumblr.com/m9qxvhq/CH5mhn23p/barkentina_1.otf');}
  81. @font-face {font-family:"Blake";src:url('http://static.tumblr.com/m9qxvhq/bnRmhedq1/blake2.ttf');}
  82. @font-face {font-family:"Blanch";src:url('http://static.tumblr.com/m9qxvhq/dqymsab72/blanch_condensed_light.otf');}
  83. @font-face {font-family:"Brain Flower"; src:url('http://static.tumblr.com/m9qxvhq/VWxms5ftr/brain_flower.ttf');}
  84. @font-face {font-family:"Buffet";src:url('http://static.tumblr.com/m9qxvhq/0V2mhl3je/buffet_script.ttf');}
  85. @font-face {font-family:"Decopolitan";src:url('http://static.tumblr.com/m9qxvhq/aaMmsac9z/decopolitan.otf');}
  86. @font-face {font-family:"Disturbance";src:url('http://static.tumblr.com/m9qxvhq/JRoms5g8c/disturbance.ttf');}
  87. @font-face {font-family:"Mayo";src:url('http://static.tumblr.com/m9qxvhq/dD6mhcpd0/mayonaise-condensed.otf');}
  88. @font-face {font-family:"Parisish";src:url('http://static.tumblr.com/m9qxvhq/GL4msacce/parisish.ttf');}
  89. @font-face {font-family:"Respective";src:url('http://static.tumblr.com/m9qxvhq/cf8msabff/respective_slanted.ttf');}
  90. @font-face {font-family:"Sachiko";src:url('http://static.tumblr.com/m9qxvhq/UTEmhi6ks/sachiko.ttf');}
  91. @font-face {font-family:"Serifiqo";src:url('http://static.tumblr.com/m9qxvhq/GZami3krf/serifiqo_4f_free_capitals.ttf');}
  92.  
  93.  
  94.  
  95. html {
  96. font: 100%/1.5em 'PT Sans', sans-serif;
  97. height:100%;
  98. }
  99.  
  100.  
  101. .et-wrapper {
  102. width: 100%;
  103. height: 100%;
  104. }
  105. .et-page:nth-child(1) {
  106. background: red;
  107. }
  108. .et-page:nth-child(2) {
  109. background: blue;
  110. }
  111. .et-page:nth-child(3) {
  112. background: purple;
  113. }
  114.  
  115. @media only screen and (min-width: 767px) {
  116. body {
  117. font-size: 1.125em; /* 18px / 16px */
  118. line-height: 1.7em;
  119. }
  120. header.band {
  121. background-image:url('{image:Header Background}');
  122. background-size: 100%;
  123. }
  124. header.band h1 {
  125. font-size: 3.25em; /*52 / 16*/
  126. }
  127. a.button {
  128. padding: .75em 1.5em;
  129. }
  130. }
  131.  
  132.  
  133. #container {
  134. width:100%;
  135. }
  136.  
  137.  
  138.  
  139. header.band {
  140. color: white;
  141. text-align: center;
  142. padding: 15% 0 25% 0;
  143. }
  144.  
  145.  
  146. a {
  147. text-decoration:none;
  148. color:inherit;
  149. }
  150.  
  151. h1, h2, h3 {
  152. font-family: {select:H Font};
  153. font-weight: 700;
  154. text-align: center;
  155. }
  156. header.band h1 {
  157. font-size: {text:Header Font Height};
  158. line-height: 1em;
  159. margin-bottom: 1em;
  160. font-family:{select:Header Font};
  161. color:{color:Header Font Colour};
  162. -webkit-transition-duration: 0.8s;
  163. -moz-transition-duration: 0.8s;
  164. -o-transition-duration: 0.8s;
  165. }
  166.  
  167. header.band h1:hover {
  168. -webkit-transition-duration: 0.8s;
  169. -moz-transition-duration: 0.8s;
  170. -o-transition-duration: 0.8s;
  171. }
  172.  
  173. a.button {
  174. left:0px;
  175. top:0px;
  176. background: #e33f0c;
  177. text-align: center;
  178. padding: .5em 1em;
  179. color: white;
  180. font-family:Baskerville;
  181. font-weight: none;
  182. font-style:italic;
  183. text-decoration: none;
  184. box-shadow: 0 0.2em 0 #ab3009;
  185. text-transform: none;
  186. letter-spacing: 0.1em;
  187. /*transition cross-browser stuff*/
  188. -webkit-transition: background 0.2s ease-out; /* Safari 3.2+, Chrome */
  189. -moz-transition: background 0.2s ease-out; /* Firefox 4-15 */
  190. -o-transition: background 0.2s ease-out; /* Opera 10.5–12.00 */
  191. transition: background 0.2s ease-out; /* Firefox 16+, Opera 12.50+ */
  192. }
  193.  
  194. .band.white {
  195. text-align:justify;
  196. }
  197.  
  198. footer.band.white {
  199. padding-bottom:50px;
  200. }
  201.  
  202.  
  203.  
  204.  
  205. a.button:hover {
  206. background: #ab3009;
  207. }
  208.  
  209.  
  210. .avatar, .avatar a, .avatar img, .about.avatar, .about.avatar a, .about.avatar img {
  211. visibility:visible;
  212. text-align:center;
  213. }
  214.  
  215. .avatar{
  216. padding-top:30px;
  217. }
  218.  
  219. .about {
  220.  
  221. }
  222.  
  223. .square img {
  224. border-radius: 0;
  225. }
  226.  
  227. .circle img {
  228. border-radius: 50%;
  229. }
  230.  
  231. .hidden img {
  232. display: none;
  233. }
  234.  
  235.  
  236. nav {
  237. -webkit-transition-duration: 0.8s;
  238. -moz-transition-duration: 0.8s;
  239. -o-transition-duration: 0.8s;
  240. opacity:0.5;
  241. font-size:11px;
  242. }
  243.  
  244. nav:hover{opacity:0.9;}
  245.  
  246. nav.right {
  247.  
  248. }
  249.  
  250. nav.left {
  251.  
  252.  
  253. }
  254.  
  255.  
  256.  
  257. .nav-arrows a {
  258. position: fixed;
  259. z-index: 2000;
  260. top: 45%;
  261.  
  262. }
  263.  
  264. .nav-arrows a:hover {
  265.  
  266. }
  267.  
  268. .nav-arrows a.nav-arrow-prev {
  269.  
  270. left:19px;
  271. {block:IndexPage}
  272. visibility:hidden;
  273. {/block:IndexPage}
  274.  
  275. {block:PermalinkPage}
  276. visibility:visible;
  277. {/block:PermalinkPage}
  278. left: 18px;
  279. border-right: none;
  280. border-top: none;
  281. }
  282.  
  283. .nav-arrows a.nav-arrow-next {
  284. right: 19px;
  285. border-left: none;
  286. border-bottom: none;
  287.  
  288. {block:IndexPage}
  289. visibility:visible;
  290. {/block:IndexPage}
  291.  
  292. {block:PermalinkPage}
  293. visibility:visible;
  294. {/block:PermalinkPage}
  295.  
  296.  
  297. }
  298.  
  299.  
  300.  
  301.  
  302.  
  303. #holder {
  304. padding-bottom:50px;
  305. }
  306.  
  307.  
  308. .box {
  309. height: 100%;
  310. float: left;
  311. background-color: #000;
  312. overflow: hidden;
  313. border-radius: 0px;
  314. box-shadow: 0px 1px 3px rgba(0,0,0);
  315. -webkit-transition-duration: 0.5s;
  316. -moz-transition-duration: 0.5s;
  317. -o-transition-duration: 0.5s;
  318. margin:{text:Post Margin};
  319. }
  320.  
  321.  
  322. .box:hover {
  323. background-color:black;
  324. opacity:0.8;
  325. }
  326.  
  327.  
  328.  
  329.  
  330. .box:hover {
  331. opacity:0.35;
  332. -webkit-transition-duration: 0.5s;
  333. -moz-transition-duration: 0.5s;
  334. -o-transition-duration: 0.5s;
  335. }
  336.  
  337.  
  338. .wrapper {
  339. display: block;
  340. width: 100%;
  341. height:480px;
  342. float: left;
  343. background-color:#000;
  344. margin:{text:Post Margin};
  345. }
  346.  
  347. .single .box {
  348. width: 100%;
  349. height:480px;
  350. }
  351.  
  352. a {
  353. border: 0;
  354. text-decoration: none;
  355. }
  356.  
  357. /* 2 IMAGES PER WRAPPER */
  358.  
  359. .left-smaller .box:first-child {width: 30%;}
  360. .left-smaller .box:last-child {width: 70%;}
  361. .left-small .box:first-child {width: 35%;}
  362. .left-small .box:last-child {width: 65%;}
  363. .left-sma .box:first-child {width: 40%;}
  364. .left-sma .box:last-child {width: 60%;}
  365. .left-s .box:first-child {width: 45%;}
  366. .left-s .box:last-child {width: 55%;}
  367. .left-same .box:first-child, .left-same .box:last-child {width: 50%;}
  368. .left-b .box:first-child {width: 55%;}
  369. .left-b .box:last-child {width: 45%;}
  370. .left-bi .box:first-child {width: 60%;}
  371. .left-bi .box:last-child {width: 40%;}
  372. .left-big .box:first-child {width: 65%;}
  373. .left-big .box:last-child {width: 35%;}
  374. .left-bigger .box:first-child {width: 70%;}
  375. .left-bigger .box:last-child {width: 30%;}
  376.  
  377. /* 3 IMAGES PER WRAPPER */
  378.  
  379. .big-small-small .box:nth-child(2),
  380. .big-small-small .box:last-child {width:26%;}
  381. .big-small-small .box:first-child {width:48%;}
  382. .small-big-small .box:first-child,
  383. .small-big-small .box:last-child {width:26%;}
  384. .small-big-small .box:nth-child(2) {width:48%;}
  385. .small-small-big .box:first-child,
  386. .small-small-big .box:nth-child(2) {width:26%;}
  387. .small-small-big .box:last-child {width:48%;}
  388. .b-s-s .box:nth-child(2),
  389. .b-s-s .box:last-child {width:30%;}
  390. .b-s-s .box:first-child {width:40%;}
  391. .s-b-s .box:first-child,
  392. .s-b-s .box:last-child {width:30%;}
  393. .s-b-s .box:nth-child(2) {width:40%;}
  394. .s-s-b .box:first-child,
  395. .s-s-b .box:nth-child(2) {width:30%;}
  396. .s-s-b .box:last-child {width:40%;}
  397. .three-same .box:first-child,
  398. .three-same .box:nth-child(2) {width:33%;}
  399. .three-same .box:last-child {width:34%;}
  400. .b-b-s .box:first-child,
  401. .b-b-s .box:nth-child(2) {width:35%;}
  402. .b-b-s .box:last-child {width:30%;}
  403. .b-s-b .box:first-child,
  404. .b-s-b .box:last-child {width:35%;}
  405. .b-s-b .box:nth-child(2) {width:30%;}
  406. .s-b-b .box:nth-child(2),
  407. .s-b-b .box:last-child {width:35%;}
  408. .s-b-b .box:first-child {width:30%;}
  409. .big-big-small .box:first-child,
  410. .big-big-small .box:nth-child(2) {width:37.5%;}
  411. .big-big-small .box:last-child {width:25%;}
  412. .big-small-big .box:first-child,
  413. .big-small-big .box:last-child {width:37.5%}
  414. .big-small-big .box:nth-child(2) {width:25%;}
  415. .small-big-big .box:nth-child(2),
  416. .small-big-big .box:last-child {width:37.5%;}
  417. .small-big-big .box:first-child {width:25%;}
  418.  
  419.  
  420.  
  421. .box.blue, .box.box-1, .box.box-2, .box.box-3, .box.box-4 {
  422. top:0px;
  423. height:0px;
  424. width:0px;
  425. visibility:hidden;
  426. }
  427.  
  428.  
  429. </style>
  430.  
  431. </head>
  432.  
  433.  
  434.  
  435.  
  436.  
  437. <body>
  438.  
  439.  
  440.  
  441.  
  442. <!--/ HEADER -->
  443.  
  444. {block:IndexPage}
  445. <header class="band" style="background-image:url('{image:Header Background}'); min-height:100%; background-size:cover;" data-0="background-position:0% 0%;" data-0-top-bottom="background-position:0% +85%;">
  446. <div class="container">
  447. <div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
  448. <h1><a href="/">Overthink Ink</a></h1>
  449.  
  450.  
  451. {block:IfShowDescription}
  452. <a class="button">Two summer salts of the imagination</a>
  453. {/block:IfShowDescription}
  454.  
  455. </div><!--/ columns-->
  456. </div><!--/ container-->
  457. </header><!--/ band-->
  458. {/block:IndexPage}
  459.  
  460.  
  461. {block:PermalinkPage}
  462.  
  463. {block:Posts}
  464. {block:Photo}
  465.  
  466.  
  467. <header class="band" style="background-image:url('{PhotoURL-HighRes}');" data-0="background-position:0% 0%;" data-0-top-bottom="background-position:0% +65%;">
  468. <div class="container">
  469. <div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
  470.  
  471.  
  472.  
  473. <h1><a href="/">Overthink Ink</a></h1>
  474. <a class="button">Two summer salts of the imagination</a>
  475. </div><!--/ columns-->
  476. </div><!--/ container-->
  477. </header><!--/ band-->
  478.  
  479. {/block:Photo}
  480. {/block:Posts}
  481.  
  482. {/block:PermalinkPage}
  483.  
  484.  
  485.  
  486. <!-- POSTS -->
  487.  
  488.  
  489. {block:IndexPage}
  490. <div id="holder">
  491. <div class="box blue">
  492. </div>
  493. <div class="box box-1"><span>CSS</span></div>
  494. <div class="box box-2"></div>
  495. <div class="box box-3"></div>
  496. <div class="box box-4"><span>jQuery</span></div>
  497.  
  498.  
  499. {block:Posts}
  500. {block:Photo}
  501. <div class="box" style="background-image:url('{PhotoURL-HighRes}'); background-position:center center; background-size:cover;"/> </div>
  502. {/block:Photo}
  503.  
  504.  
  505.  
  506.  
  507.  
  508.  
  509.  
  510.  
  511. {block:Photoset}
  512. {block:Photos}
  513. <div class="box" style="background-image:url('{PhotoURL-HighRes}'); background-position:center center; background-size:cover;"/> </div>
  514. {/block:Photos}
  515. {/block:Photoset}
  516.  
  517.  
  518.  
  519.  
  520.  
  521.  
  522. {/block:Posts}
  523.  
  524. {/block:IndexPage}
  525.  
  526.  
  527.  
  528.  
  529. <div class="band white">
  530. <div class="container">
  531. <div class="columns twelve offset-by-two">
  532. {block:PermalinkPage}
  533. {block:Posts}
  534. {block:Photo}
  535. {block:Caption}
  536. <div style="padding-top:50px;">{Caption}</div>
  537. {/block:Caption}
  538. {/block:Photo}
  539. {/block:Posts}
  540. {/block:PermalinkPage}
  541. </div><!--/ column-->
  542. </div><!--/ container-->
  543. </div><!--/ main-->
  544.  
  545.  
  546.  
  547.  
  548.  
  549.  
  550. <nav id="nav-arrows" class="nav-arrows">
  551.  
  552. {block:NextPage}
  553. <nav class="nav-arrows right"><a class="nav-arrow-next" href="{NextPage}" id="myLink">▶</a></nav>
  554. {/block:NextPage}
  555.  
  556. {block:PreviousPage}
  557. <nav class="nav-arrows left"><a class="nav-arrow-previous" href="{PreviousPage}" id="myLink">◀</a></nav>
  558. {/block:PreviousPage}
  559.  
  560.  
  561.  
  562.  
  563.  
  564.  
  565. {block:PermalinkPage}
  566. {block:PermalinkPagination}
  567. {block:NextPost}<nav class="left"><a class="nav-arrow-prev" href="{NextPost}">◀</a></nav>{/block:NextPost}
  568. {block:PreviousPost}<nav class="right"><a class="nav-arrow-next" href="{PreviousPost}">▶</a></nav>
  569. {/block:PreviousPost}
  570. {/block:PermalinkPagination}
  571. {/block:PermalinkPage}
  572.  
  573. </nav>
  574.  
  575.  
  576.  
  577.  
  578.  
  579. <footer class="band white">
  580. <div class="container">
  581. <div class="columns eight">
  582.  
  583. <h3>Mek 's a Brew Lad</h3>
  584. <p><strong>A pint 'o mild. Tell thi summat for nowt th'art nesh thee chuffin' nora eeh appens as maybe. Ey up is that thine god's own county. Be reet be reet nah then michael palin bloomin' 'eck gerritetten.</strong> Ah'll learn thi soft southern pansy. Any rooad soft southern pansy nobbut a lad mardy bum shu' thi gob face like a slapped
  585.  
  586.  
  587. </div><!--/ column-->
  588.  
  589.  
  590.  
  591. <div class="columns eight last">
  592. <h3>Mek 's a Brew Lad</h3>
  593. <p><strong>A pint 'o mild. Tell thi summat for nowt th'art nesh thee chuffin' nora eeh appens as maybe. Ey up is that thine god's own county. Be reet be reet nah then michael palin bloomin' 'eck gerritetten.</strong> Ah'll learn thi soft southern pansy. Any rooad soft southern pansy nobbut a lad mardy bum shu' thi gob face like a slapped
  594. </div><!--/ column-->
  595. </div><!--/ container-->
  596. </footer><!--/ main-->
  597.  
  598.  
  599.  
  600. </div><!-- /st-content -->
  601. </div><!-- /st-pusher -->
  602.  
  603. </div><!-- /st-container -->
  604.  
  605.  
  606.  
  607.  
  608.  
  609. <script type="text/javascript" src="http://static.tumblr.com/m9qxvhq/jbpms5i27/skrollr.js"></script>
  610. <script type="text/javascript">
  611. skrollr.init();
  612. </script>
  613.  
  614.  
  615.  
  616.  
  617.  
  618.  
  619.  
  620.  
  621.  
  622.  
  623.  
  624.  
  625.  
  626.  
  627.  
  628.  
  629. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  630.  
  631. <script>
  632. /*! Fades out the whole page when clicking links */
  633. $('a').click(function(e) {
  634. e.preventDefault();
  635. newLocation = this.href;
  636. $('body').fadeOut('slow', newpage);
  637. });
  638. function newpage() {
  639. window.location = newLocation;
  640. }
  641.  
  642. $(document).ready(function(){
  643.  
  644. /*! Fades in whole page on load */
  645. $('body').css('display', 'none');
  646. $('body').fadeIn(1000);
  647.  
  648. });
  649.  
  650.  
  651. /*! Reloads page on every visit */
  652. function Reload() {
  653. try {
  654. var headElement = document.getElementsByTagName("head")[0];
  655. if (headElement && headElement.innerHTML)
  656. headElement.innerHTML += "<meta http-equiv=\"refresh\" content=\"1\">";
  657. }
  658. catch (e) {}
  659. }
  660. /*! Reloads on every visit in mobile safari */
  661. if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
  662. window.onpageshow = function(evt) {
  663. if (evt.persisted) {
  664. document.body.style.display = "none";
  665. location.reload();
  666. }
  667. };
  668. }
  669. </script>
  670.  
  671.  
  672.  
  673.  
  674.  
  675.  
  676. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  677.  
  678. <script>
  679. $(document).ready(function() {
  680.  
  681. // Some Variables
  682. var noBoxes = $('#holder .box');
  683. var randNumber, prev;
  684. var i = 0;
  685.  
  686. //Run a while loop to go through all the boxes
  687. while(i < noBoxes.length) {
  688.  
  689. // ensure the random number is different every time
  690. do {
  691. randNumber = Math.floor(Math.random() * (4 - 2) + 2); // the random number
  692. } while(randNumber === prev);
  693. prev = randNumber;
  694.  
  695. // If i is 0, it's the first set of boxes, so wrap the first 5 in a wrapper (the header)
  696. if(i == 0) {
  697. noBoxes.slice(0, 0).wrapAll("<div class='wrapper'></div>");
  698. i+=5;
  699. }
  700. // Otherwise..
  701. else {
  702. // If i is 5 it's the second set of boxes, so ensure that the random number isn't 5.
  703. if(i == 5) {
  704. newRand = Math.floor(Math.random() * (3 - 2) + 2);
  705. noBoxes.slice(i, i+newRand).wrapAll("<div class='wrapper'></div>");
  706. i+=newRand;
  707. }
  708. // Then just run the loop normally
  709. else {
  710. noBoxes.slice(i, i+randNumber).wrapAll("<div class='wrapper'></div>");
  711. i+=randNumber;
  712. }
  713.  
  714. }
  715. }
  716.  
  717. // Since the wrappers have been made, run this function for each
  718. $('.wrapper').each(function() {
  719.  
  720. // Get the number of children in this wrapper
  721. var noChildren = $(this).children('.box').length;
  722.  
  723. // An array of the classes we're going to use
  724. var cssClass = [
  725. 'single', // 1 IMAGE PER WRAPPER
  726.  
  727. // 2 IMAGES PER WRAPPER
  728. 'left-smaller', 'left-small', 'left-sma', 'left-s', 'left-same', 'left-b', 'left-bi', 'left-big', 'left-bigger',
  729.  
  730. // 3 IMAGES PER WRAPPER
  731. 'big-small-small', 'small-big-small', 'small-small-big', 'b-s-s', 's-b-s', 's-s-b', 'three-same', 'b-b-s', 'b-s-b', 's-b-b', 'big-big-small', 'big-small-big', 'small-big-big'
  732.  
  733.  
  734.  
  735. ];
  736.  
  737. // If there is only 1 child then add this class
  738. if(noChildren == 1) {
  739.  
  740. $(this).addClass(cssClass[0]);
  741.  
  742. }
  743. else if(noChildren == 2) {
  744.  
  745. // 2 per wrapper, so get a number between 1 and 2, and add this class to this wrapper
  746. var rand = Math.floor(Math.random() * (10 - 1) + 1);
  747. $(this).addClass(cssClass[rand]);
  748.  
  749. }
  750. else if(noChildren == 3) {
  751.  
  752. // 3 per wrapper, same as before
  753. var rand = Math.floor(Math.random() * (23 - 10) + 10);
  754. $(this).addClass(cssClass[rand]);
  755.  
  756. }
  757.  
  758.  
  759.  
  760. });
  761. });
  762. </script>
  763.  
  764.  
  765.  
  766.  
  767.  
  768.  
  769.  
  770. <script type="text/javascript">
  771. //http://detectmobilebrowsers.com/ + tablets
  772. (function(a) {
  773. if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
  774. {
  775. //Add skrollr mobile on mobile devices.
  776. document.write('<script type="text/javascript" src="js/skrollr.mobile.min.js"><\/script>');
  777. }
  778. })(navigator.userAgent||navigator.vendor||window.opera);
  779. </script>
  780.  
  781.  
  782.  
  783. </body>
  784. </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!