example site revamp

Estanislau Trepat · Estanislau Trepat · commit bc519e2c7da9 · 2010-10-29T23:43:19.000+02:00
diff --git a/README.md b/README.md
@@ -52,8 +52,11 @@ Notes:
 - All dependencies are bundled on the `lib` directory at what version they
 were when this component was written.
 
-## TODO
+## Localization
 
+Localization can be accomplished by modifying the strings present in `RangePickerOptions.Locale`
+object. Also, as this project relies on the [Datejs](http://code.google.com/p/datejs/) library for 
+date manipulation, dropping a localized *culture info file* will do the job for date formats, day names, etc.
 
 ---
 
diff --git a/example/index.html b/example/index.html
@@ -3,7 +3,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-	<title>Simple Range Picker js component | GitHub</title>
+	<title>Simple Range Picker component | GitHub</title>
 	<link rel="stylesheet" href="stylesheets/main.css" type="text/css" media="all" charset="utf-8" />
   <link rel="stylesheet" href="stylesheets/rangepicker.css" type="text/css" media="screen" charset="utf-8" />	
 </head>
@@ -42,7 +42,7 @@ <h2>Documentation</h2>
     <p><a href="https://github.com/etrepat/simple-range-picker/blob/master/README.md">README</a></p>
     
     <h2>Example</h2>
-    <p>Please, picka a date range...</p>
+    <p>Please, pick a date range from the component below:</p>
     <div id="rangepicker"></div>
     <p>Generated from the code below (check source code for more detail):</p>
     <pre><code>
@@ -66,16 +66,24 @@ <h2>Download</h2>
     </p>
     <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
       by running:
-      <pre>$ git clone git://github.com/eventmachine/eventmachine</pre>
+      <pre>$ git clone git://github.com/etrepat/simple-range-picker.git</pre>
     </p>
     
     <h2>Dependencies</h2>
+		<p>This project depends on the following libraries:</p>
+		<ul>
+			<li><a href="http://prototypejs.org" title="Prototype">Prototype</a> 1.6 or higher</li>
+			<li><a href="http://code.google.com/p/datejs/" title="Datejs">Datejs</a> 1.0 Alpha-1 or higher</li>
+			<li><em>(optional)</em> <a href="http://script.aculo.us" title="Script.aculo.us">Script.aculo.us</a> 1.8.0 o higher (If present, some effects are used)</li>
+		</ul>
     
     <h2>Localization</h2>
-    <p>Localization with <em>SimpleRangePicker</em> can be accomplished by modifying
-    the strings present in <code>RangePickerOptions.Locale</code> object.</p>
-    <p>Also, as this project uses DateJS for date manipulation, dropping a localized
-    culture info file will do the job for date formats, day names, etc.</p>
+    <p>Localization can be accomplished by modifying the strings present in <code>RangePickerOptions.Locale</code> object. Also, as this project relies on the <a href="http://code.google.com/p/datejs/" title="Datejs">Datejs</a> library for date manipulation, dropping a localized <em>culture info file</em> will do the job for date formats, day names, etc.</p>
+
+		<h2>Contact</h2>
+		<p>Coded by <a href="http://etrepat.com" title="Estanislau Trepat">Estanislau Trepat</a>. 
+			Released under the terms of the <a href="ttp://www.opensource.org/licenses/mit-license.php" title="MIT License">MIT License</a></p>
+		<p>You may reach me with questions/comments at <a href="mailto:estanis@etrepat.com" title="estanis@etrepat.com">estanis@etrepat.com</a></p>
 
     <div class="footer">
       get the source code on GitHub: 
diff --git a/example/stylesheets/main.css b/example/stylesheets/main.css
@@ -1,23 +1,13 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-
 body {
-  margin-top: 1.0em;
-  font-family: "Helvetica,Arial,FreeSans";
+	font-family: Arial, Verdana, sans-serif;
+  margin-top: 1em;
   color: #222222;
 }
-    
-#container {
-  margin: 0 auto;
-  width: 700px;
-}
-
-h1 { font-size: 3.8em; color: #333333; margin-bottom: 3px; }
+#container { margin: 0 auto; width: 700px; }
+h1 { font-size: 3em; color: #333333; margin-bottom: 3px; }
 h1 .small { font-size: 0.4em; }
 h1 a { text-decoration: none }
-h2 { font-size: 1.5em; color: #333333; }
+h2 { font-size: 1.5em; color: #333333; margin-top: 1.5em; }
 h3 { text-align: center; color: #333333; }
 a { color: #333333; }
 .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
