API tools faq
paste
Advertisement
yLii

xprmnt.20 :D :D

yLii
Mar 9th, 2016
143
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.38 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.  
  25.  
  26. <meta name="select:Header Font" content="Abraham Lincoln" title="Abraham Lincoln">
  27. <meta name="select:Header Font" content="Barkentina" title="Barkentina">
  28. <meta name="select:Header Font" content="Blake" title="Blake">
  29. <meta name="select:Header Font" content="Blanch" title="Blanch">
  30. <meta name="select:Header Font" content="Brain Flower" title="Brain Flower">
  31. <meta name="select:Header Font" content="Buffet" title="Buffet">
  32. <meta name="select:Header Font" content="Decopolitan" title="Decopolitan">
  33. <meta name="select:Header Font" content="Disturbance" title="Disturbance">
  34. <meta name="select:Header Font" content="Helvetica" title="Helvetica">
  35. <meta name="select:Header Font" content="Mayo" title="Mayo">
  36. <meta name="select:Header Font" content="Parisish" title="Parisish">
  37. <meta name="select:Header Font" content="PT Serif" title="PT Serif">
  38. <meta name="select:Header Font" content="Respective" title="Respective">
  39. <meta name="select:Header Font" content="Sachiko" title="Sachiko">
  40. <meta name="select:Header Font" content="Serifiqo" title="Serifiqo">
  41.  
  42.  
  43. <meta name="select:H Font" content="Abraham Lincoln" title="Abraham Lincoln">
  44. <meta name="select:H Font" content="Barkentina" title="Barkentina">
  45. <meta name="select:H Font" content="Blake" title="Blake">
  46. <meta name="select:H Font" content="Blanch" title="Blanch">
  47. <meta name="select:H Font" content="Brain Flower" title="Brain Flower">
  48. <meta name="select:H Font" content="Buffet" title="Buffet">
  49. <meta name="select:H Font" content="Decopolitan" title="Decopolitan">
  50. <meta name="select:H Font" content="Disturbance" title="Disturbance">
  51. <meta name="select:H Font" content="Helvetica" title="Helvetica">
  52. <meta name="select:H Font" content="Mayo" title="Mayo">
  53. <meta name="select:H Font" content="Parisish" title="Parisish">
  54. <meta name="select:H Font" content="PT Serif" title="PT Serif">
  55. <meta name="select:H Font" content="Respective" title="Respective">
  56. <meta name="select:H Font" content="Sachiko" title="Sachiko">
  57. <meta name="select:H Font" content="Serifiqo" title="Serifiqo">
  58.  
  59. <meta name="select:Avatar Style" content="circle" title="Circle">
  60. <meta name="select:Avatar Style" content="square" title="Square">
  61. <meta name="select:Avatar Style" content="hidden" title="Hidden">
  62.  
  63.  
  64. <meta name="text:Header Font Height" content="50px">
  65. <meta name="text:About" content="About">
  66. <meta name="color:Header Font Colour" content="#fff" />
  67.  
  68.  
  69.  
  70. <style type="text/css">
  71.  
  72.  
  73. @import url(http://necolas.github.io/normalize.css/2.1.2/normalize.css);
  74. @import url(http://static.tumblr.com/m9qxvhq/rytms5akd/fluid_skeleton.css);
  75.  
  76. @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
  77.  
  78. @font-face {font-family:"Abraham Lincoln";src:url('http://static.tumblr.com/m9qxvhq/Q1Mmsabay/abrahamlincoln.ttf');}
  79. @font-face {font-family:"Barkentina";src:url('http://static.tumblr.com/m9qxvhq/CH5mhn23p/barkentina_1.otf');}
  80. @font-face {font-family:"Blake";src:url('http://static.tumblr.com/m9qxvhq/bnRmhedq1/blake2.ttf');}
  81. @font-face {font-family:"Blanch";src:url('http://static.tumblr.com/m9qxvhq/dqymsab72/blanch_condensed_light.otf');}
  82. @font-face {font-family:"Brain Flower"; src:url('http://static.tumblr.com/m9qxvhq/VWxms5ftr/brain_flower.ttf');}
  83. @font-face {font-family:"Buffet";src:url('http://static.tumblr.com/m9qxvhq/0V2mhl3je/buffet_script.ttf');}
  84. @font-face {font-family:"Decopolitan";src:url('http://static.tumblr.com/m9qxvhq/aaMmsac9z/decopolitan.otf');}
  85. @font-face {font-family:"Disturbance";src:url('http://static.tumblr.com/m9qxvhq/JRoms5g8c/disturbance.ttf');}
  86. @font-face {font-family:"Mayo";src:url('http://static.tumblr.com/m9qxvhq/dD6mhcpd0/mayonaise-condensed.otf');}
  87. @font-face {font-family:"Parisish";src:url('http://static.tumblr.com/m9qxvhq/GL4msacce/parisish.ttf');}
  88. @font-face {font-family:"Respective";src:url('http://static.tumblr.com/m9qxvhq/cf8msabff/respective_slanted.ttf');}
  89. @font-face {font-family:"Sachiko";src:url('http://static.tumblr.com/m9qxvhq/UTEmhi6ks/sachiko.ttf');}
  90. @font-face {font-family:"Serifiqo";src:url('http://static.tumblr.com/m9qxvhq/GZami3krf/serifiqo_4f_free_capitals.ttf');}
  91.  
  92.  
  93.  
  94. html {
  95. font: 100%/1.5em 'PT Sans', sans-serif;
  96. height:100%;
  97. }
  98.  
  99.  
  100. .et-wrapper {
  101. width: 100%;
  102. height: 100%;
  103. }
  104. .et-page:nth-child(1) {
  105. background: red;
  106. }
  107. .et-page:nth-child(2) {
  108. background: blue;
  109. }
  110. .et-page:nth-child(3) {
  111. background: purple;
  112. }
  113.  
  114. @media only screen and (min-width: 767px) {
  115. body {
  116. font-size: 1.125em; /* 18px / 16px */
  117. line-height: 1.7em;
  118. }
  119. header.band {
  120. background-image:url('http://static.tumblr.com/m9qxvhq/jtJms5b10/oxford.jpg');
  121. background-size: 100%;
  122. }
  123. header.band h1 {
  124. font-size: 3.25em; /*52 / 16*/
  125. }
  126. a.button {
  127. padding: .75em 1.5em;
  128. }
  129. }
  130.  
  131.  
  132. #container {
  133. width:100%;
  134. }
  135.  
  136.  
  137.  
  138. header.band {
  139. color: white;
  140. text-align: center;
  141. padding: 15% 0 25% 0;
  142. }
  143.  
  144.  
  145. a {
  146. text-decoration:none;
  147. color:inherit;
  148. }
  149.  
  150. h1, h2, h3 {
  151. font-family: {select:H Font};
  152. font-weight: 700;
  153. text-align: center;
  154. }
  155. header.band h1 {
  156. font-size: {text:Header Font Height};
  157. line-height: 1em;
  158. margin-bottom: 1em;
  159. font-family:{select:Header Font};
  160. color:{color:Header Font Colour};
  161. -webkit-transition-duration: 0.8s;
  162. -moz-transition-duration: 0.8s;
  163. -o-transition-duration: 0.8s;
  164. }
  165.  
  166. header.band h1:hover {
  167. -webkit-transition-duration: 0.8s;
  168. -moz-transition-duration: 0.8s;
  169. -o-transition-duration: 0.8s;
  170. }
  171.  
  172. a.button {
  173. left:0px;
  174. top:0px;
  175. background: #e33f0c;
  176. text-align: center;
  177. padding: .5em 1em;
  178. color: white;
  179. font-family:Baskerville;
  180. font-weight: none;
  181. font-style:italic;
  182. text-decoration: none;
  183. box-shadow: 0 0.2em 0 #ab3009;
  184. text-transform: none;
  185. letter-spacing: 0.1em;
  186. /*transition cross-browser stuff*/
  187. -webkit-transition: background 0.2s ease-out; /* Safari 3.2+, Chrome */
  188. -moz-transition: background 0.2s ease-out; /* Firefox 4-15 */
  189. -o-transition: background 0.2s ease-out; /* Opera 10.5–12.00 */
  190. transition: background 0.2s ease-out; /* Firefox 16+, Opera 12.50+ */
  191. }
  192.  
  193. .band.white {
  194. text-align:justify;
  195. }
  196.  
  197. footer.band.white {
  198. padding-bottom:50px;
  199. }
  200.  
  201.  
  202.  
  203.  
  204. a.button:hover {
  205. background: #ab3009;
  206. }
  207.  
  208.  
  209. .avatar, .avatar a, .avatar img, .about.avatar, .about.avatar a, .about.avatar img {
  210. visibility:visible;
  211. text-align:center;
  212. }
  213.  
  214. .avatar{
  215. padding-top:30px;
  216. }
  217.  
  218. .about {
  219.  
  220. }
  221.  
  222. .square img {
  223. border-radius: 0;
  224. }
  225.  
  226. .circle img {
  227. border-radius: 50%;
  228. }
  229.  
  230. .hidden img {
  231. display: none;
  232. }
  233.  
  234.  
  235. nav {
  236. -webkit-transition-duration: 0.8s;
  237. -moz-transition-duration: 0.8s;
  238. -o-transition-duration: 0.8s;
  239. opacity:0.5;
  240. font-size:11px;
  241. }
  242.  
  243. nav:hover{opacity:0.9;}
  244.  
  245. nav.right {
  246.  
  247. }
  248.  
  249. nav.left {
  250.  
  251.  
  252. }
  253.  
  254.  
  255.  
  256. .nav-arrows a {
  257. position: fixed;
  258. z-index: 2000;
  259. top: 45%;
  260.  
  261. }
  262.  
  263. .nav-arrows a:hover {
  264.  
  265. }
  266.  
  267. .nav-arrows a.nav-arrow-prev {
  268.  
  269. left:19px;
  270. {block:IndexPage}
  271. visibility:hidden;
  272. {/block:IndexPage}
  273.  
  274. {block:PermalinkPage}
  275. visibility:visible;
  276. {/block:PermalinkPage}
  277. left: 18px;
  278. border-right: none;
  279. border-top: none;
  280. }
  281.  
  282. .nav-arrows a.nav-arrow-next {
  283. right: 19px;
  284. border-left: none;
  285. border-bottom: none;
  286.  
  287. {block:IndexPage}
  288. visibility:visible;
  289. {/block:IndexPage}
  290.  
  291. {block:PermalinkPage}
  292. visibility:visible;
  293. {/block:PermalinkPage}
  294.  
  295.  
  296. }
  297.  
  298.  
  299. button {
  300. border: none;
  301. padding: 0.6em 1.2em;
  302. background: #388a5a;
  303. color: #fff;
  304. font-family: 'Lato', Calibri, Arial, sans-serif;
  305. font-size: 1em;
  306. letter-spacing: 1px;
  307. text-transform: uppercase;
  308. cursor: pointer;
  309. display: inline-block;
  310. margin: 3px 2px;
  311. border-radius: 2px;
  312. z-index:1000;
  313. }
  314.  
  315.  
  316. .column, #st-trigger-effects {position:absolute;}
  317.  
  318.  
  319. *,
  320. *:after,
  321. *::before {
  322. -moz-box-sizing: border-box;
  323. box-sizing: border-box;
  324. }
  325.  
  326.  
  327. .st-content {
  328. overflow-y: scroll;
  329. background: #ffffff;
  330. }
  331.  
  332. .st-content,
  333. .st-content-inner {
  334. position: relative;
  335. }
  336.  
  337. .st-container {
  338. position: relative;
  339. overflow: hidden;
  340. }
  341.  
  342. .st-pusher {
  343. position: relative;
  344. left: 0;
  345. z-index: 99;
  346. height: 100%;
  347. -webkit-transition: -webkit-transform 0.5s;
  348. transition: transform 0.5s;
  349. }
  350.  
  351. .st-pusher::after {
  352. position: relative;
  353. top: 0;
  354. right: 0;
  355. width: 0;
  356. height: 0;
  357. background: rgba(0,0,0,0.2);
  358. content: '';
  359. opacity: 0;
  360. -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  361. transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  362. }
  363.  
  364. .st-menu-open .st-pusher::after {
  365. position:relative;
  366. width: 100%;
  367. height: 100%;
  368. opacity: 1;
  369. -webkit-transition: opacity 0.5s;
  370. transition: opacity 0.5s;
  371. }
  372.  
  373. .st-menu {
  374. position: fixed;
  375. top: 0;
  376. left: 0;
  377. z-index: 100;
  378. visibility: hidden;
  379. width: 300px;
  380. height: 100%;
  381. background: #000000;
  382. -webkit-transition: all 0.5s;
  383. transition: all 0.5s;
  384. }
  385.  
  386. .sidebar-text{
  387. color:#ffffff;
  388. font-style:italic;
  389. font-family:Baskerville;
  390. font-size:{text:Sidebar Font Size};
  391. text-align:justify;
  392. margin:15px;
  393. }
  394.  
  395.  
  396. .st-menu::after {
  397. position: fixed;
  398. top: 0;
  399. right: 0;
  400. width: 100%;
  401. height: 100%;
  402. background: rgba(0,0,0,0.2);
  403. content: '';
  404. opacity: 1;
  405. -webkit-transition: opacity 0.5s;
  406. transition: opacity 0.5s;
  407. }
  408.  
  409. .st-menu-open .st-menu::after {
  410. width: 0;
  411. height: 0;
  412. opacity: 0;
  413. -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  414. transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  415. }
  416.  
  417. /* content style */
  418.  
  419. .st-menu ul {
  420. margin: 0;
  421. padding: 0;
  422. list-style: none;
  423. }
  424.  
  425. .st-menu h2 {
  426. margin: 0;
  427. padding: 1em;
  428. color: rgba(0,0,0,0.4);
  429. text-shadow: 0 0 1px rgba(0,0,0,0.1);
  430. font-weight: 300;
  431. font-size: 2em;
  432. }
  433.  
  434. .st-menu ul li a {
  435. display: block;
  436. padding: 1em 1em 1em 1.2em;
  437. outline: none;
  438. box-shadow: inset 0 -1px rgba(0,0,0,0.2);
  439. color: #f3efe0;
  440. text-transform: uppercase;
  441. text-shadow: 0 0 1px rgba(255,255,255,0.1);
  442. letter-spacing: 1px;
  443. font-weight: 400;
  444. -webkit-transition: background 0.3s, box-shadow 0.3s;
  445. transition: background 0.3s, box-shadow 0.3s;
  446. }
  447.  
  448. .st-menu ul li:first-child a {
  449. box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
  450. }
  451.  
  452. .st-menu ul li a:hover {
  453. background: rgba(0,0,0,0.2);
  454. box-shadow: inset 0 -1px rgba(0,0,0,0);
  455. color: #fff;
  456. }
  457.  
  458. /* Individual effects */
  459.  
  460.  
  461. /* Effect 2: Reveal */
  462. .st-effect-2.st-menu-open .st-pusher {
  463. -webkit-transform: translate3d(300px, 0, 0);
  464. transform: translate3d(300px, 0, 0);
  465. }
  466.  
  467. .st-effect-2.st-menu {
  468. z-index: 1;
  469. }
  470.  
  471. .st-effect-2.st-menu-open .st-effect-2.st-menu {
  472. visibility: visible;
  473. -webkit-transition: -webkit-transform 0.5s;
  474. transition: transform 0.5s;
  475. }
  476.  
  477. .st-effect-2.st-menu::after {
  478. display: none;
  479. }
  480.  
  481.  
  482.  
  483. /* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
  484. .no-csstransforms3d .st-pusher,
  485. .no-js .st-pusher {
  486. padding-left: 300px;
  487. }
  488.  
  489.  
  490.  
  491.  
  492. #holder {
  493. padding-bottom:50px;
  494. }
  495.  
  496.  
  497. .box {
  498. height: 100%;
  499. float: left;
  500. background-color: #000;
  501. overflow: hidden;
  502. border-radius: 0px;
  503. box-shadow: 0px 1px 3px rgba(0,0,0);
  504. -webkit-transition-duration: 0.5s;
  505. -moz-transition-duration: 0.5s;
  506. -o-transition-duration: 0.5s;
  507. margin:{text:Post Margin};
  508. }
  509.  
  510.  
  511. .box:hover {
  512. background-color:black;
  513. opacity:0.8;
  514. }
  515.  
  516.  
  517.  
  518.  
  519. .box:hover {
  520. opacity:0.35;
  521. -webkit-transition-duration: 0.5s;
  522. -moz-transition-duration: 0.5s;
  523. -o-transition-duration: 0.5s;
  524. }
  525.  
  526.  
  527. .wrapper {
  528. display: block;
  529. width: 100%;
  530. height:480px;
  531. float: left;
  532. background-color:#000;
  533. margin:{text:Post Margin};
  534. }
  535.  
  536. .single .box {
  537. width: 100%;
  538. height:450px;
  539. }
  540.  
  541. a {
  542. border: 0;
  543. text-decoration: none;
  544. }
  545.  
  546. /* 2 IMAGES PER WRAPPER */
  547.  
  548. .left-smaller .box:first-child {width: 30%;}
  549. .left-smaller .box:last-child {width: 70%;}
  550. .left-small .box:first-child {width: 35%;}
  551. .left-small .box:last-child {width: 65%;}
  552. .left-sma .box:first-child {width: 40%;}
  553. .left-sma .box:last-child {width: 60%;}
  554. .left-s .box:first-child {width: 45%;}
  555. .left-s .box:last-child {width: 55%;}
  556. .left-same .box:first-child, .left-same .box:last-child {width: 50%;}
  557. .left-b .box:first-child {width: 55%;}
  558. .left-b .box:last-child {width: 45%;}
  559. .left-bi .box:first-child {width: 60%;}
  560. .left-bi .box:last-child {width: 40%;}
  561. .left-big .box:first-child {width: 65%;}
  562. .left-big .box:last-child {width: 35%;}
  563. .left-bigger .box:first-child {width: 70%;}
  564. .left-bigger .box:last-child {width: 30%;}
  565.  
  566. /* 3 IMAGES PER WRAPPER */
  567.  
  568. .big-small-small .box:nth-child(2),
  569. .big-small-small .box:last-child {width:26%;}
  570. .big-small-small .box:first-child {width:48%;}
  571. .small-big-small .box:first-child,
  572. .small-big-small .box:last-child {width:26%;}
  573. .small-big-small .box:nth-child(2) {width:48%;}
  574. .small-small-big .box:first-child,
  575. .small-small-big .box:nth-child(2) {width:26%;}
  576. .small-small-big .box:last-child {width:48%;}
  577. .b-s-s .box:nth-child(2),
  578. .b-s-s .box:last-child {width:30%;}
  579. .b-s-s .box:first-child {width:40%;}
  580. .s-b-s .box:first-child,
  581. .s-b-s .box:last-child {width:30%;}
  582. .s-b-s .box:nth-child(2) {width:40%;}
  583. .s-s-b .box:first-child,
  584. .s-s-b .box:nth-child(2) {width:30%;}
  585. .s-s-b .box:last-child {width:40%;}
  586. .three-same .box:first-child,
  587. .three-same .box:nth-child(2) {width:33%;}
  588. .three-same .box:last-child {width:34%;}
  589. .b-b-s .box:first-child,
  590. .b-b-s .box:nth-child(2) {width:35%;}
  591. .b-b-s .box:last-child {width:30%;}
  592. .b-s-b .box:first-child,
  593. .b-s-b .box:last-child {width:35%;}
  594. .b-s-b .box:nth-child(2) {width:30%;}
  595. .s-b-b .box:nth-child(2),
  596. .s-b-b .box:last-child {width:35%;}
  597. .s-b-b .box:first-child {width:30%;}
  598. .big-big-small .box:first-child,
  599. .big-big-small .box:nth-child(2) {width:37.5%;}
  600. .big-big-small .box:last-child {width:25%;}
  601. .big-small-big .box:first-child,
  602. .big-small-big .box:last-child {width:37.5%}
  603. .big-small-big .box:nth-child(2) {width:25%;}
  604. .small-big-big .box:nth-child(2),
  605. .small-big-big .box:last-child {width:37.5%;}
  606. .small-big-big .box:first-child {width:25%;}
  607.  
  608.  
  609.  
  610. .box.blue, .box.box-1, .box.box-2, .box.box-3, .box.box-4 {
  611. top:0px;
  612. height:0px;
  613. width:0px;
  614. visibility:hidden;
  615. }
  616.  
  617.  
  618. </style>
  619.  
  620. </head>
  621.  
  622.  
  623.  
  624.  
  625.  
  626. <body>
  627.  
  628.  
  629.  
  630. <div id="st-container" class="st-container">
  631. <div class="st-menu st-effect-2" id="menu-2">
  632. <div class="avatar {select:Avatar Style}"><img src="{PortraitURL-128}" alt="" class="print-only invisible"></div>
  633. <h2 style="color:#ffffff;">{text:About}</h2>
  634. <div class="sidebar-text">
  635. <p>'Oh, a song, please, if the Mock Turtle would be so kind,' Alice replied, so eagerly that the Gryphon said, in a rather offended tone, 'Hm! No accounting for tastes! Sing her "Turtle Soup," will you, old fellow?'</p>
  636.  
  637. <p>The Mock Turtle sighed deeply, and began, in a voice sometimes choked with sobs, to sing this:&mdash;</p>
  638. </div>
  639. </div>
  640.  
  641. <div class="st-pusher">
  642. <div class="st-content">
  643.  
  644.  
  645. <div id="st-trigger-effects" class="column" data-0="position:fixed" data-0-top-top="position:fixed">
  646. <button data-effect="st-effect-2" data-0="position:fixed" data-0-top-top="position:fixed">三</button>
  647. </div>
  648.  
  649.  
  650.  
  651. <!--/ HEADER -->
  652.  
  653. {block:IndexPage}
  654. <header class="band" style="background-image:url('http://static.tumblr.com/m9qxvhq/ivUmscshy/sunset_and_lavender.jpg'); min-height:100%; background-size:cover;" data-0="background-position:0% 0%;" data-0-top-bottom="background-position:0% +85%;">
  655. <div class="container">
  656. <div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
  657. <h1><a href="/">Overthink Ink</a></h1>
  658. <a class="button">Two summer salts of the imagination</a>
  659. </div><!--/ columns-->
  660. </div><!--/ container-->
  661. </header><!--/ band-->
  662. {/block:IndexPage}
  663.  
  664.  
  665. {block:PermalinkPage}
  666.  
  667. {block:Posts}
  668. {block:Photo}
  669.  
  670.  
  671. <header class="band" style="background-image:url('{PhotoURL-HighRes}');" data-0="background-position:0% 0%;" data-0-top-bottom="background-position:0% +65%;">
  672. <div class="container">
  673. <div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
  674.  
  675.  
  676.  
  677. <h1><a href="/">Overthink Ink</a></h1>
  678. <a class="button">Two summer salts of the imagination</a>
  679. </div><!--/ columns-->
  680. </div><!--/ container-->
  681. </header><!--/ band-->
  682.  
  683. {/block:Photo}
  684. {/block:Posts}
  685.  
  686. {/block:PermalinkPage}
  687.  
  688.  
  689.  
  690. <!-- POSTS -->
  691.  
  692.  
  693. {block:IndexPage}
  694. <div id="holder">
  695. <div class="box blue">
  696. </div>
  697. <div class="box box-1"><span>CSS</span></div>
  698. <div class="box box-2"></div>
  699. <div class="box box-3"></div>
  700. <div class="box box-4"><span>jQuery</span></div>
  701.  
  702.  
  703. {block:Posts}
  704. {block:Photo}
  705. <div class="box" style="background-image:url('{PhotoURL-HighRes}'); background-position:center center; background-size:cover;"/> </div>
  706. {/block:Photo}
  707.  
  708.  
  709.  
  710.  
  711.  
  712.  
  713.  
  714.  
  715. {block:Photoset}
  716.  
  717.  
  718. {block:Photos}
  719. <div class="box" style="background-image:url('{PhotoURL-HighRes}'); background-position:center center; background-size:cover;"/> </div>
  720.  
  721.  
  722. {/block:Photos}
  723.  
  724. {/block:Photoset}
  725.  
  726. {/block:Posts}
  727.  
  728. {/block:IndexPage}
  729.  
  730.  
  731.  
  732.  
  733. <div class="band white">
  734. <div class="container">
  735. <div class="columns twelve offset-by-two">
  736. {block:PermalinkPage}
  737. {block:Posts}
  738. {block:Photo}
  739. {block:Caption}
  740. <div style="padding-top:50px;">{Caption}</div>
  741. {/block:Caption}
  742. {/block:Photo}
  743. {/block:Posts}
  744. {/block:PermalinkPage}
  745. </div><!--/ column-->
  746. </div><!--/ container-->
  747. </div><!--/ main-->
  748.  
  749.  
  750.  
  751.  
  752.  
  753.  
  754. <nav id="nav-arrows" class="nav-arrows">
  755.  
  756. {block:NextPage}
  757. <nav class="nav-arrows right"><a class="nav-arrow-next" href="{NextPage}" id="myLink">▶</a></nav>
  758. {/block:NextPage}
  759.  
  760. {block:PreviousPage}
  761. <nav class="nav-arrows left"><a class="nav-arrow-previous" href="{PreviousPage}" id="myLink">▶</a></nav>
  762. {/block:PreviousPage}
  763.  
  764.  
  765.  
  766.  
  767.  
  768.  
  769. {block:PermalinkPage}
  770. {block:PermalinkPagination}
  771.  
  772. {block:NextPost}<nav class="left"><a class="nav-arrow-prev" href="{NextPost}">◀</a></nav>{/block:NextPost}
  773.  
  774. {block:PreviousPost}<nav class="right"><a class="nav-arrow-next" href="{PreviousPost}">▶</a></nav>
  775. {/block:PreviousPost}
  776.  
  777. {/block:PermalinkPagination}
  778.  
  779. {/block:PermalinkPage}
  780.  
  781. </nav>
  782.  
  783.  
  784.  
  785.  
  786.  
  787. <footer class="band white">
  788. <div class="container">
  789. <div class="columns eight">
  790.  
  791. <h3>Mek 's a Brew Lad</h3>
  792. <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
  793.  
  794.  
  795. </div><!--/ column-->
  796.  
  797.  
  798.  
  799. <div class="columns eight last">
  800. <h3>Mek 's a Brew Lad</h3>
  801. <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
  802. </div><!--/ column-->
  803. </div><!--/ container-->
  804. </footer><!--/ main-->
  805.  
  806.  
  807.  
  808. </div><!-- /st-content -->
  809. </div><!-- /st-pusher -->
  810.  
  811. </div><!-- /st-container -->
  812.  
  813.  
  814.  
  815.  
  816.  
  817. <script type="text/javascript" src="http://static.tumblr.com/m9qxvhq/jbpms5i27/skrollr.js"></script>
  818. <script type="text/javascript">
  819. skrollr.init();
  820. </script>
  821.  
  822.  
  823.  
  824.  
  825.  
  826.  
  827. <script type="text/javascript" src="http://static.tumblr.com/m9qxvhq/OOlmsnnyt/modernizr.custom.js"></script>
  828.  
  829. <script type="text/javascript" src="http://dan-silver.github.io/ElementTransitions.js/js/elementTransitions.js"></script>
  830.  
  831. <script type="text/javascript" src="http://dan-silver.github.io/ElementTransitions.js/css/elementTransitions.css"></script>
  832.  
  833.  
  834.  
  835.  
  836.  
  837.  
  838.  
  839.  
  840.  
  841.  
  842.  
  843.  
  844.  
  845.  
  846. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  847.  
  848. <script>
  849. /*! Fades out the whole page when clicking links */
  850. $('a').click(function(e) {
  851. e.preventDefault();
  852. newLocation = this.href;
  853. $('body').fadeOut('slow', newpage);
  854. });
  855. function newpage() {
  856. window.location = newLocation;
  857. }
  858.  
  859. $(document).ready(function(){
  860.  
  861. /*! Fades in whole page on load */
  862. $('body').css('display', 'none');
  863. $('body').fadeIn(1000);
  864.  
  865. });
  866.  
  867.  
  868. /*! Reloads page on every visit */
  869. function Reload() {
  870. try {
  871. var headElement = document.getElementsByTagName("head")[0];
  872. if (headElement && headElement.innerHTML)
  873. headElement.innerHTML += "<meta http-equiv=\"refresh\" content=\"1\">";
  874. }
  875. catch (e) {}
  876. }
  877. /*! Reloads on every visit in mobile safari */
  878. if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
  879. window.onpageshow = function(evt) {
  880. if (evt.persisted) {
  881. document.body.style.display = "none";
  882. location.reload();
  883. }
  884. };
  885. }
  886. </script>
  887.  
  888.  
  889.  
  890.  
  891. <script type="text/javascript" src="http://static.tumblr.com/m9qxvhq/q3Vmsr0tr/sidebareffects.js"></script>
  892. <script type="text/javascript" src="http://static.tumblr.com/m9qxvhq/ICqmsr0vq/modernizr.custom.js"></script>
  893. <script type="text/javascript" src="http://static.tumblr.com/m9qxvhq/P2fmsr0um/classie.js"></script>
  894.  
  895.  
  896.  
  897.  
  898.  
  899.  
  900. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  901.  
  902. <script>
  903. $(document).ready(function() {
  904.  
  905. // Some Variables
  906. var noBoxes = $('#holder .box');
  907. var randNumber, prev;
  908. var i = 0;
  909.  
  910. //Run a while loop to go through all the boxes
  911. while(i < noBoxes.length) {
  912.  
  913. // ensure the random number is different every time
  914. do {
  915. randNumber = Math.floor(Math.random() * (4 - 2) + 2); // the random number
  916. } while(randNumber === prev);
  917. prev = randNumber;
  918.  
  919. // If i is 0, it's the first set of boxes, so wrap the first 5 in a wrapper (the header)
  920. if(i == 0) {
  921. noBoxes.slice(0, 0).wrapAll("<div class='wrapper'></div>");
  922. i+=5;
  923. }
  924. // Otherwise..
  925. else {
  926. // If i is 5 it's the second set of boxes, so ensure that the random number isn't 5.
  927. if(i == 5) {
  928. newRand = Math.floor(Math.random() * (3 - 2) + 2);
  929. noBoxes.slice(i, i+newRand).wrapAll("<div class='wrapper'></div>");
  930. i+=newRand;
  931. }
  932. // Then just run the loop normally
  933. else {
  934. noBoxes.slice(i, i+randNumber).wrapAll("<div class='wrapper'></div>");
  935. i+=randNumber;
  936. }
  937.  
  938. }
  939. }
  940.  
  941. // Since the wrappers have been made, run this function for each
  942. $('.wrapper').each(function() {
  943.  
  944. // Get the number of children in this wrapper
  945. var noChildren = $(this).children('.box').length;
  946.  
  947. // An array of the classes we're going to use
  948. var cssClass = [
  949. 'single', // 1 IMAGE PER WRAPPER
  950.  
  951. // 2 IMAGES PER WRAPPER
  952. 'left-smaller', 'left-small', 'left-sma', 'left-s', 'left-same', 'left-b', 'left-bi', 'left-big', 'left-bigger',
  953.  
  954. // 3 IMAGES PER WRAPPER
  955. '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'
  956.  
  957.  
  958.  
  959. ];
  960.  
  961. // If there is only 1 child then add this class
  962. if(noChildren == 1) {
  963.  
  964. $(this).addClass(cssClass[0]);
  965.  
  966. }
  967. else if(noChildren == 2) {
  968.  
  969. // 2 per wrapper, so get a number between 1 and 2, and add this class to this wrapper
  970. var rand = Math.floor(Math.random() * (10 - 1) + 1);
  971. $(this).addClass(cssClass[rand]);
  972.  
  973. }
  974. else if(noChildren == 3) {
  975.  
  976. // 3 per wrapper, same as before
  977. var rand = Math.floor(Math.random() * (23 - 10) + 10);
  978. $(this).addClass(cssClass[rand]);
  979.  
  980. }
  981.  
  982.  
  983.  
  984. });
  985. });
  986. </script>
  987.  
  988.  
  989.  
  990.  
  991.  
  992.  
  993.  
  994. <script type="text/javascript">
  995. //http://detectmobilebrowsers.com/ + tablets
  996. (function(a) {
  997. 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)))
  998. {
  999. //Add skrollr mobile on mobile devices.
  1000. document.write('<script type="text/javascript" src="js/skrollr.mobile.min.js"><\/script>');
  1001. }
  1002. })(navigator.userAgent||navigator.vendor||window.opera);
  1003. </script>
  1004.  
  1005.  
  1006.  
  1007. </body>
  1008. </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!