New welcome page

css/style.css

@@ -0,0 +1,295 @@
+/* CSS Reset */
+
+html,body {
+	margin: 0;
+	padding: 0;
+	font: 14px "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	color: #444;
+}
+
+/* Layout */
+
+.clear {clear:both}
+
+#header {
+    margin: 60px auto;
+    margin-bottom: 20px;
+}
+
+#header .main {
+    text-align: center;
+}
+
+.teaser {
+    background: #eee;
+    border: 3px solid #ccc;
+    border-left: 0;
+    border-right: 0;
+    padding: 20px;
+    margin-bottom: 50px;
+}
+
+#tabs {
+    list-type: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding-right: 20px;
+}
+
+#tabs li {
+    margin: 0 5px;
+    display: inline;
+}
+
+a {
+    text-decoration: none;
+    color: #613823;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a.selected {
+    text-decoration: underline;
+    color: #444;
+}
+
+	
+.main {
+	width: 900px;
+	margin: 0 auto;
+}
+
+
+.column {
+    float: left;
+    width: 440px;
+    margin-right: 10px;
+}
+
+
+/* Fonts */
+
+h1, h2, h3 {
+    font-family: 'Istok Web';
+    font-weight: normal;
+    color: #442905;
+    line-height: 1.2;
+}
+
+h1 {
+    font-weight: bold;
+    color: #333;
+    text-shadow: 0px 1px 1px #FFF;
+}
+
+.teaser h1 {
+    text-align: center;
+}
+
+.box {
+    margin: 40px 0;
+    color: #777;
+}
+
+.box.doc {
+    margin-top: 70px;
+    position: relative;
+    width: 630px;
+}
+
+.box .content .warning,
+.box .content .information {
+    position: absolute;
+    right: -250px;
+    margin-top: 20px;
+    width: 200px;
+    font-size: 14px;
+    color: #222;
+    font-family: arial,helevetica,sans;
+    padding: 10px;
+    opacity: 0.7;
+    -moz-transition: opacity 0.3s;
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+}
+
+.box .content .warning:hover,
+.box .content .information:hover {
+    opacity: 1;
+}
+
+.box .content .information:before,
+.box .content .warning:before {
+    font-family: Georgia, sans-serif;
+    font-size: 28px;
+    font-style: italic;
+    position: absolute;
+    right: 0;
+    top: -21px;
+    opacity: 0.5;
+}
+
+.box .content .information:before {
+    content: "Info";
+    color: #a6b1f3;
+}
+
+.box .content .warning:before {
+    content: "Warning";
+    color: #e869e7;
+}
+
+.box .content .information {
+    background-color: #e4e8ff;
+}    
+
+.box .content .warning {
+    background-color: #f8ccf8;
+}
+
+.box .content .code {
+	background: #565656;
+	border-radius: 10px;
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	padding: 7px;
+}
+
+.box .content .code p {
+	color: white;
+}
+
+.box.first .content .left ul {
+	padding-left: 10px;
+}
+
+.box.last .content .right {
+    width: 300px;
+}
+
+.doc .box.first .content .right {
+	float: right;
+	width: 230px;
+	margin-top: 20px;
+	padding: 10px;
+	background-color: #ececec;
+	border: 1px solid #e1e1e1;
+	border-radius: 10px;
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+}
+
+.doc .box.first .content .right ol, 
+.doc .box.first .content .right ol a {
+	color: #03388a;
+}
+
+.doc .box.first .content .right ol {
+	padding: 0 0 7px 35px;
+}
+
+.doc .box.first .content .right ol li{
+	padding: 7px 0 7px 0; 
+}
+
+.doc .box.first .content .right ul a {
+	font: 15px Helvetica, Arial, sans;
+	color: black;
+}
+
+.doc .box.first .content .right ul li {
+	list-style-type: none;
+	padding: 2px 0 2px 0;
+}
+
+.trysmalltalk {
+    text-align: right;
+    padding: 10px;
+}
+
+.trysmalltalk textarea {
+    width: 850px;
+    height: 300px;
+    padding: 20px;
+    background-color: #eaeaea;
+    border: 1px solid #d3d3d3;
+    border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    font: 16px monaco, courier, monospace;
+    color: 434343;
+    line-height: 1.6em;
+}
+
+.trysmalltalk button {
+    margin: 20px 0 0 5px;
+    padding: 4px;
+    background: #75aef5;
+    border: 1px solid #7caeed;
+    border-radius: 8px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    color: white;
+    cursor: pointer;
+}
+
+.trysmalltalk .print-it {
+	background: #bebebe;
+	border: 1px solid #b2b2b2;
+}
+
+.trysmalltalk button:hover {
+	background: #3180e1;
+	border: 1px solid #518cd6; 
+}
+
+#counters {
+    border: 2px dashed;
+    text-align: center;
+    padding: 10px;
+    margin: 10px;
+    background: #ffffcc;
+    font-family: arial,helvetica,sans;
+}
+
+#counters h1 {
+    margin: 10px;
+    color: #333;
+}
+
+
+.trysmalltalk .print-it:hover {
+	background: #898989;
+	border: 1px solid #919293; 
+}
+
+#footer {
+	height: 200px;
+	border: 1px solid #ccc;
+	background: #f3f3f3 url('../images/mosquito.png') 50px 20px no-repeat;
+	margin: 0 auto;
+}
+
+#footer .main {
+	padding-top: 10px;
+}
+
+#footer p {
+	text-align: center;
+	line-height: 1em;
+	color: #aaa;
+}
+
+#footer a {
+	color: #3faae1;
+	text-decoration: none;
+}
+
+#footer a:hover {
+	text-decoration: underline;
+}
+

index.html

@@ -1,83 +1,102 @@
-<!DOCTYPE html>
-<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>Amber Smalltalk</title>
-    
-    <meta name="author" content="Nicolas Petton">
-    <link rel="stylesheet" type="text/css" href="./ide/style.css">
-    <script type="text/javascript" src="./js/amber.js"></script>
-  </head>
-  <body>
-    <script type="text/javascript">
-      loadAmber();
-    </script>
-    <script type="text/javascript">
-      jQuery(window).scroll(function() {
-      	if(jQuery(window).scrollTop() > 210) {
-		jQuery('#menu')
-      			.css('position', 'fixed')
-			.css('top', '0px')
-	} else {
-      		jQuery('#menu')
-			.css('position', 'absolute')
-      			.css('top', '210px')
-      	}
-      });
-    </script>
 
+<!DOCTYPE html> 
+<html> 
+  <head> 
+    <title>Amber Smalltalk</title> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
+    <meta name="author" content="Nicolas Petton" /> 
+    <link rel="stylesheet" type="text/css" href='css/style.css' /> 
+    <link rel="stylesheet" type="text/css" href='css/syntax.css' /> 
+    <link type="image/x-icon" rel="shortcut icon" href="/favicon.ico"/> 
+    <link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'> 
+    <script type='text/javascript' src='js/amber.js'></script> 
+  </head> 
+  <body> 
+    
     <a href="http://github.com/NicolasPetton/amber"><img style="position: absolute; top: 0; lef
-t: 0; border: 0;" src="./ide/fork_me.png" alt="Fork me on GitHub"></a>
-
-    <div id="wrapper">
-      <div id="header">
-	<div class="main">
-	  <img alt="Jtalk, the Smalltalk for web developers" src="./ide/text_header.png">
-	</div>
-      </div>
-      
-      <div id="menu">
-	<div class="main">
-	  <ul>
-	    <li><a href="http://jtalk-project.org/index.html">Overview</a></li> · 
-	    <li><a href="http://jtalk-project.org/index.html#download">Download</a></li> · 
-	    <li><a id="doc_link" href="http://jtalk-project.org/documentation.html">Documentation</a></li> ·
-	    <li><a target="_blank" href="https://github.com/NicolasPetton/jtalk">Source</a></li> 
-	  </ul>
-	</div>
-      </div>
-
-      <div id="content">
-	<div class="main">
-	  <div class="box first">
-  <div class="content">
-    <h1><img alt="Jtalk is an implementation of the Smalltalk language that runs on the JavaScript runtime." src="./ide/title_container1.png"></h1>
-    <div class="left">
-      <p>Jtalk is an implementation of the  <a href="http://en.wikipedia.org/wiki/Smalltalk">Smalltalk</a> language that runs on top of the <a href="http://en.wikipedia.org/wiki/Javascript">JavaScript</a> runtime. It is designed to make client-side development faster and easier.</p>
-      <p>Jtalk is written in itself, including the parser and compiler. Jtalk compiles into efficient JavaScript, mapping one-to-one with the equivalent JavaScript. There is no interpretation at runtime.</p>
-      <p>Try a <button onclick="smalltalk.Browser._open()"> Class browser</button> right now!</p>
-			<p>You may want to look at sample applications:
-			<ul>
-			  <li><a href="examples/trysmalltalk/index.html">Try Smalltalk in your web browser</a></li>
-				<li><a href="examples/presentation/index.html">JTalk slides</a></li>
-			</ul>
-			</p>
-    </div>
-    <div class="right"><img src="./ide/screen2.png"></div>
-    <div class="clear"></div>
-  </div>
-</div>
-
-	</div>
-      </div>
+								t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149fe06a9cc737577?repo=&url=http%3A%2F%2Fs3.amazonaws.com%2Fgithub%2Fribbons%2Fforkme_left_darkblue_121621.png&path=" alt="Fork me on GitHub"></a> 
     
-    <div id="footer">
-      <div class="main">
-	<p>Copyright © 2011 <a href="http://www.nicolas-petton.fr/">Nicolas Petton</a>. The content of this website in licensed under <a href="http://creativecommons.org/licenses/by-nc/3.0/">CC-BY-NC 3.0</a>.</p>
-	<p>Jtalk is an opensource project sponsored by <a href="http://www.objectfusion.fr/">objectfusion</a>.</p>
-	<p>The design of this website was provided by <a href="mailto:neomie.thirion@gmail.com">Noémie Thirion</a>.</p>
+    <div id="wrapper"> 
+      
+      <div id="header"> 
+	<div class="main"> 
+	  <div class="logo"> 
+	    <img src="images/amber.png"/> 
+	  </div> 
+	  
+	  <ul id="tabs"> 
+	    <li><a target="_blank" href="http://amber-lang.net/index.html">Overview</a></li> · 
+	    <li><a target="_blank" href="http://amber-lang.net/index.html#download">Download</a></li> · 
+	    <li><a target="_blank" href="http://amber-lang.net/learn.html">Learn</a></li> ·
+	    <li><a target="_blank" href="http://amber-lang.net/documentation.html">Documentation</a></li> ·
+	    <li><a target="_blank" target="_blank" href="https://github.com/NicolasPetton/amber">Source</a></li> 
+	  </ul> 
+	  
+	  <div class="clear"></div> 
+	  
+	</div> 
       </div> 
-    </div>
+      
+      <div class="teaser"> 
+	<div class="main"> 
+	  <h1>Welcome aboard!</h1> 
+	  <div class="column">
+	    <h2>What is Amber?</h2>
+	    <p>Amber, formerly known as Jtalk, is an implementation of the Smalltalk-80 language. It is designed to make client-side development faster and easier. It allows developers to write client-side heavy web applications in Smalltalk. </p> 
+	    <p>Amber includes an integrated development environment with a class browser, workspace, transcript, object inspector and debugger.</p> 
+	    <p>Amber is written in itself, including the compiler, and compiles into efficient JavaScript, mapping one-to-one with the JS equivalent.</p> 
+	    <h2>Give it a try!</h2>
+	    <p><b>Try a <button onClick="smalltalk.Browser._open()"> Class browser</button> right now!</b></p> 
+	  </div> 
+	  <div class="column">
+	    <h2>Don't know Smalltalk yet?</h2>
+	    <p>No problem! You can learn it online with <a href="http://amber-lang.net/learn.html">ProfStef</a></p>
+	    <h2>Join the community</h2>
+	    <ul>
+	      <li><a href="http://amber-lang.net">Amber's website</a></li>
+	      <li><a href="https://github.com/NicolasPetton/amber/wiki">Wiki on GitHub</a></li>
+	      <li><a href="http://groups.google.com/group/amber-lang">Mailing list</a></li>
+	      <li>Join us on IRC at #amber-lang on Freenode</li>
+	    </ul>
+	  </div>
+	  <div class="clear"></div> 
+	</div> 
+	
+	
+      </div> 
+      
+      <div id="content"> 
+	<div class="main"> 
+	  <div class="box"> 
+	    <h2>Client-side usage</h2> 
+	    <div class="content"> 
+	      <p>Load the full Amber Smalltalk environment with the IDE in your page:</p> 
+	      
+	      <code><pre>&lt;script src="js/amber.js" type="text/javascript"&gt;&lt;/script&gt;
+&lt;script type="text/javascript"&gt; loadAmber()&lt;/script&gt;</pre></code>
+	    </div> 
+	    
+	    
+	    <p>Or the deployment JavaScript file only (without the Smalltalk sources, parser, compiler and IDE):</p>
+	    <code><pre>&lt;script src="js/amber.js" type="text/javascript"&gt;&lt;/script&gt;
+&lt;script type="text/javascript"&gt; loadAmber({deploy: true})&lt;/script&gt;</pre></code>
+	  </div> 
+	  
+	  <div class="box last"> 
+	    <h2 id="download">Examples</h2> 
+	    <div class="content"> 
+	      <ul>
+		<li><a href="examples/trysmalltalk/index.html">ProfStef tutorial</a></li>
+		<li><a href="examples/presentation/index.html">Presentation at ESUG 2011</a></li>
+	      </ul>
+	    </div> 
+	  </div> 
+	  
+	</div> 
+      </div> 
+    </div> 
     
-  
-
-
-</div></body></html>
+    <script type='text/javascript'> loadAmber() </script> 
+    
+  </body> 
+</html>