Permalink
Browse files

small site changes, removed skeleton

  • Loading branch information...
Alligator committed Mar 3, 2012
1 parent 0dac03a commit d2e262dd42d9f99963f3d0d54cdbb9f2483baf06
Showing with 102 additions and 724 deletions.
  1. +102 −95 index.html
  2. +0 −335 skeleton/base.css
  3. +0 −58 skeleton/layout.css
  4. +0 −236 skeleton/skeleton.css
View
@@ -1,95 +1,102 @@
-
-<!doctype html>
-<html>
- <head>
- <title>lake.js</title>
- <link rel="stylesheet" href="reset.css" />
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script type="text/javascript" src="https://raw.github.com/Alligator/Lake.js/master/lake.js"></script>
- <script type="text/javascript">
- $(function() {
- $('#lake-img').lake({
- 'waves': 6,
- 'scale': 0.5
- });
-
- $('#lake-img2').lake();
-
- $('#lake-img3').lake({
- 'speed': 1.5,
- 'scale': 1.5
- });
- });
- </script>
- <style type="text/css">
- body { font-size: 16px; }
- h1 { font-size: 42px; }
- h2 { font-size: 24px; }
- h3 { font-size: 18px; }
-
- body { font-family: sans-serif; line-height: 1.5; }
- pre { font-family: monospace; }
- h1,h2 { font-family: 'Palatino Linotype', serif ; }
-
- strong { font-weight: bold; }
-
- p { margin-bottom: 12px; }
- h2 { margin-bottom: 12px; margin-top: 24px; }
-
- h2 { border-bottom: 1px solid #aaa; padding-bottom: 6px; }
-
- h1 { color: #269;; }
-
- canvas { float: left; }
-
- #lakes { overflow: hidden; }
- #container {
- width: 720px;
- margin: 0 auto;
- margin-top: 30px;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <h1>lake.js</h1>
-
- <h2>What is it?</h2>
- <p>This:</p>
- <div id="lakes">
- <img id="lake-img" src="lake.png" style="display: none;"/>
- <img id="lake-img2"src="lake2.png" style="display: none;"/>
- <img id="lake-img3"src="lake3.png" style="display: none;"/>
- </div>
-
- <h2>How does it work?</h2>
- <p>Like this:</p>
- <pre>
-&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;https://raw.github.com/Alligator/lake.js/master/lake.js&quot;&gt;&lt;/script&gt;
-&lt;script&gt;
-$(function() {
- $('#lake-img').lake({
- 'speed': 1,
- 'scale': 0.5,
- 'waves': 10
- });
-});
-&lt;/script&gt;
-...
-&lt;img id=&quot;lake-img&quot; src=&quot;lake.png&quot; style=&quot;display: none;&quot;/&gt;
- </pre>
- <p>Lake.js takes an img element and inserts a canvas element displaying the image and it's flipped reflection directly after the img element.</p>
- <p>The new canvas element will be the same width as the original image and double the height.</p>
- <p>
- <ul>
- <li><strong>Speed</strong> makes the waves move faster or slower.</li>
- <li><strong>Scale</strong> makes the waves higher or shallower.</li>
- <li><strong>Waves</strong> creates more or less waves.</li>
- </ul>
- </p>
-
- <p>Frames are precomputed, <strong>lake.js will slow down page loads</strong> but will perform well on lots of devices.</p>
- </div>
- </body>
-</html>
+
+<!doctype html>
+<html>
+ <head>
+ <title>lake.js</title>
+ <link rel="stylesheet" href="reset.css" />
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="https://raw.github.com/Alligator/Lake.js/master/lake.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('#lake-img').lake({
+ 'waves': 6,
+ 'scale': 0.5
+ });
+
+ $('#lake-img2').lake();
+
+ $('#lake-img3').lake({
+ 'speed': 1.5,
+ 'scale': 1.5
+ });
+ });
+ </script>
+ <style type="text/css">
+ body { font-size: 16px; }
+ h1 { font-size: 42px; }
+ h2 { font-size: 24px; }
+ h3 { font-size: 18px; }
+
+ body { font-family: sans-serif; line-height: 1.5; }
+ pre { font-family: monospace; }
+ h1,h2 { font-family: 'Palatino Linotype', serif ; }
+
+ strong { font-weight: bold; }
+
+ p { margin-bottom: 12px; }
+ h2 { margin-bottom: 12px; margin-top: 24px; }
+
+ h2 { border-bottom: 1px solid #aaa; padding-bottom: 6px; }
+
+ h1 { color: #269;; }
+
+ canvas { float: left; }
+
+ #lakes { overflow: hidden; }
+ #container {
+ width: 720px;
+ margin: 0 auto;
+ margin-top: 30px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container">
+ <h1>lake.js</h1>
+
+ <h2>What is it?</h2>
+ <p>This:</p>
+ <div id="lakes">
+ <img id="lake-img" src="lake.png" style="display: none;"/>
+ <img id="lake-img2"src="lake2.png" style="display: none;"/>
+ <img id="lake-img3"src="lake3.png" style="display: none;"/>
+ </div>
+
+ <h2>How does it work?</h2>
+ <p>Like this:</p>
+ <pre>
+&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;https://raw.github.com/Alligator/lake.js/master/lake.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+$(function() {
+ $('#lake-img').lake({
+ 'speed': 1,
+ 'scale': 0.5,
+ 'waves': 10
+ });
+});
+&lt;/script&gt;
+...
+&lt;img id=&quot;lake-img&quot; src=&quot;lake.png&quot; style=&quot;display: none;&quot;/&gt;
+ </pre>
+ <p>Lake.js takes an img element and inserts a canvas element displaying the image and it's flipped reflection directly after the img element.</p>
+ <p>The new canvas element will be the same width as the original image and double the height.</p>
+ <p>
+ <ul>
+ <li><strong>Speed</strong> makes the waves move faster or slower.</li>
+ <li><strong>Scale</strong> makes the waves higher or shallower.</li>
+ <li><strong>Waves</strong> creates more or less waves.</li>
+ </ul>
+ </p>
+ <p>Frames are precomputed, <strong>lake.js will slow down page loads</strong> but will perform well on lots of devices.</p>
+
+ <h2>Where do I get it?</h2>
+ <p>
+ Githb:
+ <a href="https://github.com/Alligator/lake.js/zipball/master">zip</a> or
+ <a href="https://github.com/Alligator/lake.js/tarball/master">tar formats.</a>
+ </p>
+
+ </div>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit d2e262d

Please sign in to comment.