Home Explore Help
Register Sign In
amber
/
amber-website
2
1
Fork 1
Files Issues 5 Pull Requests 0 Wiki
Browse Source

First version of the homepage

Nicolas Petton 11 years ago
parent
5a896332e2
commit
14db0df96a
19 changed files with 1114 additions and 0 deletions
Split View Show Diff Stats
  1. 3 0
      .gitmodules
  2. 1 0
      _config.yml
  3. 69 0
      _layouts/default.html
  4. 107 0
      _layouts/index.html
  5. 1 0
      amber
  6. 321 0
      css/documentation.css
  7. 75 0
      css/profstef.css
  8. 299 0
      css/style.css
  9. 61 0
      css/syntax.css
  10. 48 0
      documentation.html
  11. BIN
      favicon.ico
  12. BIN
      images/amber.png
  13. BIN
      images/amber_small.png
  14. BIN
      images/bg.png
  15. BIN
      images/github.png
  16. BIN
      images/profstef.png
  17. BIN
      images/zip.png
  18. 89 0
      index.html
  19. 40 0
      learn.html

+ 3 - 0
.gitmodules
View File 

@@ -0,0 +1,3 @@
 
+[submodule "amber"]
 
+	path = amber
 
+	url = git://github.com/amber-smalltalk/amber.git

+ 1 - 0
_config.yml
View File 

@@ -0,0 +1 @@
 
+pygments: true

+ 69 - 0
_layouts/default.html
View File 

@@ -0,0 +1,69 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <title>{{ page.title }}</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='amber/js/amber.js'></script>
 
+    <script type="text/javascript">
 
+
 
+      var _gaq = _gaq || [];
 
+      _gaq.push(['_setAccount', 'UA-2246313-6']);
 
+      _gaq.push(['_trackPageview']);
 
+
 
+      (function() {
 
+      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 
+      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 
+      })();
 
+
 
+    </script>
 
+  </head>
 
+  <body>
 
+
 
+    <a href="http://github.com/NicolasPetton/amber"><img style="position: absolute; top: 0; lef
 
+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="wrapper">
 
+
 
+    <div id="header">
 
+      <div class="main">
 
+	<div class="logo">
 
+	  <img src="images/amber.png"/>
 
+	</div>
 
+
 
+	<ul id="tabs">
 
+	    <li><a href="index.html">Overview</a></li> · 
+	    <li><a href="index.html#download">Download</a></li> · 
+	    <li><a href="learn.html">Learn</a></li> ·
 
+	    <li><a id="doc_link" href="documentation.html">Documentation</a></li> ·
 
+	    <li><a target="_blank" href="https://github.com/NicolasPetton/amber">Source</a></li> 
+	</ul>
 
+
 
+	<div class="clear"></div>
 
+
 
+      </div>
 
+    </div>
 
+
 
+    
+    <div id="content">
 
+      <div class="main">
 
+	{{ content }}
 
+      </div>
 
+    </div>
 
+    
+    <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>Amber is an opensource project sponsored by <a href="http://www.objectfusion.fr">objectfusion</a>.</p>
 
+      </div> 
+    </div>
 
+    
+    <script type='text/javascript'> loadAmber() </script>
 
+        
+  </body>
 
+</html>

+ 107 - 0
_layouts/index.html
View File 

@@ -0,0 +1,107 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <title>{{ page.title }}</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=Arapey:400italic,400' rel='stylesheet' type='text/css'>
 
+    <script type='text/javascript' src='amber/js/amber.js'></script>
 
+    <script type="text/javascript">
 
+
 
+      var _gaq = _gaq || [];
 
+      _gaq.push(['_setAccount', 'UA-2246313-6']);
 
+      _gaq.push(['_trackPageview']);
 
+
 
+      (function() {
 
+      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 
+      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 
+      })();
 
+
 
+    </script>
 
+  </head>
 
+  <body>
 
+
 
+    <div id="wrapper">
 
+
 
+      
+      <div id="social">
 
+
 
+	<a class="FlattrButton" style="display:none;" rev="flattr;button:compact" href="http://jtalk-project.org"></a>
 
+	<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="NicolasPetton">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 
+
 
+	<script type="text/javascript">
 
+	  /* <![CDATA[ */
 
+    (function() {
 
+        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
 
+        s.type = 'text/javascript';
 
+        s.async = true;
 
+        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
 
+        t.parentNode.insertBefore(s, t);
 
+    })();
 
+/* ]]> */
 
+	</script>
 
+      </div>
 
+
 
+      <div id="header">
 
+	<img class="logo" src="images/amber.png" alt="Amber"/>
 
+	<div class="main">
 
+	  <h1>Amber</h1>
 
+	  <h2>A Web developer's best friend.</h2>
 
+	</div>
 
+	<div id="links">
 
+	  <a href="https://github.com/amber-smalltalk/amber"><img src="images/github.png" alt="Github"/></a>
 
+	  <a href="http://github.com/amber-smalltalk/amber/zipball/master"><img src="images/zip.png" alt="Download"/></a>
 
+	</div>
 
+	  <ul id="tabs">
 
+	    <li><a href="index.html">Overview</a></li>
 
+	    <li><a href="index.html#getstarted">Get started</a></li>
 
+	    <li><a href="index.html#getinvolved">Get involved</a></li>
 
+	    <li><a href="learn.html">Interactive tutorial</a></li>
 
+	    <li><a id="doc_link" href="documentation.html">Documentation</a></li>
 
+	    <li><a target="_blank" href="https://github.com/amber-smalltalk/amber">Source</a></li> 
+	  </ul>
 
+	</div>
 
+      </div>
 
+
 
+      <div class="teaser">
 
+	<div class="main">
 
+	  <h2>A <span class="info">new language</span> and <span class="info">live environment</span> made for the web.</h2>
 
+
 
+	  <div class="row">
 
+	    <p>The Amber language is deeply inspired by Smalltalk. It is designed to make client-side development faster and easier.
 
+	    Amber includes a live development environment with a class browser, workspace, transcript, object inspector, debugger and unit test runner.</p>
 
+	  </div>
 
+	  
+	  <div class="row">
 
+	    <p>Amber is written in itself, including the compiler, and compiles into efficient JavaScript, mapping one-to-one with the JS equivalent.</p>
 
+	    <p class="try">
 
+	      <span class="info">Click around. Don't worry about making a mess or breaking anything, just have fun!</span><br>
 
+	      <button class="huge" onClick="smalltalk.Browser._open()">Try Amber!</button>
 
+	    </p>
 
+	  </div>
 
+	  <div class="clear"></div>
 
+	</div>
 
+      </div>
 
+      
+      <div id="content">
 
+	<div class="main">
 
+	  {{ content }}
 
+	</div>
 
+      </div>
 
+
 
+      <div id="footer">
 
+	<div class="main">
 
+	  <p>Copyright © 2011-2013 <a href="http://www.nicolas-petton.fr">Nicolas Petton</a> and <a href="https://github.com/amber-smalltalk/amber/contributors">Amber contributors</a>.</p> 
+	  <p>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>Amber is released under the <a href="https://github.com/amber-smalltalk/amber/blob/master/LICENSE">MIT</a> license.</p>
 
+	</div> 
+      </div>
 
+      
+      <script type='text/javascript'> loadAmber() </script>
 
+      
+  </body>
 
+</html>

+ 1 - 0
amber 

@@ -0,0 +1 @@
 
+Subproject commit 6c640fbd23e4f44bddd84a5d0c504c0253bcc056

+ 321 - 0
css/documentation.css
View File 

@@ -0,0 +1,321 @@
 
+/* 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;
 
+}
 
+
 
+#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;
 
+}
 
+
 
+
 
+
 
+
 
+#wrapper {
 
+    margin-left: 350px;
 
+    text-align: left;
 
+}
 
+
 
+#header {
 
+    text-align: left;
 
+    margin: 20px 0;
 
+}
 
+
 
+#header .left {
 
+    float: left;
 
+    margin-right: 20px;
 
+}
 
+
 
+#header h1 {
 
+    margin: 10px 0;
 
+}
 
+
 
+.documentation {
 
+    border-top: 1px solid #999;
 
+}
 
+
 
+.documentation a {
 
+    color: #C71212;
 
+    cursor: pointer;
 
+}
 
+
 
+.documentation a:hover {
 
+    color: white;
 
+    background: #D15E5E;
 
+    text-decoration: none;
 
+}
 
+
 
+.documentation pre {
 
+    border-radius: 3px;
 
+    border: 1px solid #ccc;
 
+    background: #eee;
 
+    padding: 5px;
 
+    margin: 0 20px;
 
+}
 
+
 
+.documentation code {
 
+    background: #eee;
 
+    padding: 0 5px;
 
+}
 
+
 
+
 
+.documentation .menu {
 
+    position: fixed;
 
+    left: 0;
 
+    bottom: 0;
 
+    top: 0;
 
+    width: 300px;
 
+    background: #ddd;
 
+    overflow-y: scroll;
 
+}
 
+
 
+.documentation .doc_chapter {
 
+    position: absolute;
 
+    background: #fafafa;
 
+    left: 300px;
 
+    right: 0;
 
+    padding: 0 20px;
 
+}
 
+
 
+.documentation .doc_chapter a {
 
+    background: #eae3c6;
 
+}
 
+
 
+.documentation .doc_chapter a:hover {
 
+    background: #D15E5E;
 
+    color: white;
 
+}
 
+
 
+.documentation .doc_chapter .links {
 
+    border-top: 1px solid #999;
 
+    margin-top: 10px;
 
+    padding-top: 10px;
 
+}
 
+
 
+.documentation .doc_chapter h2 {
 
+    border-bottom: 1px solid #999;
 
+}

+ 75 - 0
css/profstef.css
View File 

@@ -0,0 +1,75 @@
 
+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;
 
+}
 
+
 
+/* Fonts */
 
+
 
+h1, h2, h3 {
 
+    font-family: 'Istok Web';
 
+    font-weight: normal;
 
+    color: #442905;
 
+    line-height: 1.2;
 
+}
 
+
 
+h1 {
 
+    text-align: center;
 
+    font-weight: bold;
 
+    text-shadow: 0px 1px 1px #FFF;
 
+}
 
+
 
+
 
+.main {
 
+    width: 900px;
 
+    margin: 0;
 
+    border: 0;
 
+    text-align: center;
 
+    margin: 0 auto;
 
+}
 
+
 
+.main img {
 
+    margin: 30px 0;
 
+}
 
+
 
+a#back {
 
+    color: #666;
 
+    padding: 20px 0;
 
+}
 
+
 
+#tutorial {
 
+    padding: 20px 40px;
 
+    margin: 30px 0;
 
+    text-align: left;
 
+    border: 12px solid #aaa;
 
+    border-radius: 8px;
 
+    -webkit-border-radius: 8px;
 
+    -moz-border-radius: 8px;
 
+}
 
+
 
+#tutorial .CodeMirror-scroll {
 
+    overflow: auto;
 
+    height: auto;
 
+}
 
+
 
+#footer .main {
 
+    	border-top: 1px dashed #bbb;
 
+	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;
 
+}

+ 299 - 0
css/style.css
View File 

@@ -0,0 +1,299 @@
 
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
 
+   License: none (public domain)
 
+*/
 
+
 
+html, body, div, span, applet, object, iframe,
 
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
+a, abbr, acronym, address, big, cite, code,
 
+del, dfn, em, img, ins, kbd, q, s, samp,
 
+small, strike, strong, sub, sup, tt, var,
 
+b, u, i, center,
 
+dl, dt, dd, ol, ul, li,
 
+fieldset, form, label, legend,
 
+table, caption, tbody, tfoot, thead, tr, th, td,
 
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
 
+time, mark, audio, video {
 
+	margin: 0;
 
+	padding: 0;
 
+	border: 0;
 
+	font-size: 100%;
 
+	font: inherit;
 
+	vertical-align: baseline;
 
+}
 
+/* HTML5 display-role reset for older browsers */
 
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
 
+	display: block;
 
+}
 
+body {
 
+	line-height: 1;
 
+}
 
+ol, ul {
 
+	list-style: none;
 
+}
 
+blockquote, q {
 
+	quotes: none;
 
+}
 
+blockquote:before, blockquote:after,
 
+q:before, q:after {
 
+	content: '';
 
+	content: none;
 
+}
 
+table {
 
+	border-collapse: collapse;
 
+	border-spacing: 0;
 
+}
 
+
 
+
 
+body {
 
+    background: #FAF8F1 url(../images/bg.png) repeat;
 
+    font-family: Georgia, "Times New Roman", serif;
 
+    font-size: 17px;
 
+    color: #333;
 
+}
 
+
 
+a {
 
+    color: #e22c29;
 
+    text-decoration: none;
 
+}
 
+
 
+a:hover {
 
+    text-decoration: underline;
 
+}
 
+
 
+p {
 
+    margin-bottom: 15px;
 
+}
 
+
 
+pre {
 
+    font-family: monospace;
 
+    margin: 15px 0;
 
+    padding: 10px;
 
+    background: white;
 
+    border: 1px dashed #aaa;
 
+}
 
+
 
+h1, h2 {
 
+    color: #222;
 
+    font-family: Georgia;
 
+    font-size: 40px;
 
+    margin: 30px 0;
 
+}
 
+
 
+h2 {
 
+    font-size: 32px;
 
+    border-bottom: 1px solid #aaa;
 
+    padding-bottom: 10px;
 
+}
 
+
 
+h3 {
 
+    font-size: 22px;
 
+    color: #666;
 
+    margin: 10px 0;
 
+    margin-top: 40px;
 
+}
 
+
 
+#header {
 
+    width: 900px;
 
+    text-align: center;
 
+    margin: 0 auto;
 
+    padding: 80px;
 
+    padding-bottom: 60px;
 
+}
 
+
 
+#header .logo {
 
+    margin-bottom: -30px;
 
+    margin-right: 20px;
 
+}
 
+
 
+#header #links {
 
+    margin-top: 50px;
 
+}
 
+
 
+#social {
 
+    position: fixed;
 
+    top: 6px;
 
+    right: 10px;
 
+    z-index: 10;
 
+}
 
+
 
+#links a {
 
+    opacity: 0.6;
 
+    transition: all .5s;
 
+    -webkit-transition: all .5s;
 
+    -moz-transition: all .5s;
 
+    -o-transition: all .5s;
 
+    -ms-transition: all .5s;
 
+}
 
+
 
+#links a:hover {
 
+    opacity: 1;
 
+}
 
+
 
+#links a img {
 
+    height: 80px;
 
+}
 
+
 
+#header .main {
 
+    display: inline-block;
 
+    text-align: left;
 
+}
 
+
 
+#header h1 {
 
+    text-align: left;
 
+    font-family: Georgia, serif;
 
+    font-size: 80px;
 
+    margin: 10px 0;
 
+    color: #000;
 
+}
 
+
 
+#header h2 {
 
+    text-align: left;
 
+    font-family: Arapey;
 
+    font-size: 30px;
 
+    font-style: italic;
 
+    color: #333;
 
+    margin: 10px 0;
 
+    border-bottom: 0 none;
 
+}
 
+
 
+#tabs {
 
+    position: fixed;
 
+    top: 0;
 
+    left: 0;
 
+    right: 0;
 
+    list-style: none;
 
+    text-align: center;
 
+    padding: 5px;
 
+    background: #fff;
 
+    font-size: 13px;
 
+    border-bottom: 2px solid #5a3808;
 
+    box-shadow: 0 0 2px 2px #999;
 
+}
 
+
 
+#tabs li {
 
+    display: inline;
 
+}
 
+
 
+#tabs li a {
 
+    padding: 5px 10px;
 
+    display: inline-block;
 
+    text-decoration: none;
 
+    border-radius: 20px;
 
+    color: #d27324;
 
+    border: 1px solid transparent;
 
+}
 
+
 
+#tabs li a:hover {
 
+    background: #faa732;
 
+    color: white;
 
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 
+    box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.0470588) 0px 1px 2px 0px;
 
+    background-image: -webkit-linear-gradient(top, rgb(251, 180, 80), rgb(248, 148, 6));
 
+    background-image: -moz-linear-gradient(top, rgb(251, 180, 80), rgb(248, 148, 6));
 
+    background-image: -o-linear-gradient(top, rgb(251, 180, 80), rgb(248, 148, 6));
 
+    background-image: -ms-linear-gradient(top, rgb(251, 180, 80), rgb(248, 148, 6));
 
+    background-image: linear-gradient(top, rgb(251, 180, 80), rgb(248, 148, 6));
 
+    border-color: rgba(0, 0, 0, 0.0980392);
 
+    border: 1px solid #faa732;
 
+}
 
+
 
+.teaser {
 
+    padding: 20px;
 
+    background: white;
 
+    border-top: 2px solid #5a3808;
 
+    border-bottom: 2px solid #5a3808;
 
+}
 
+
 
+.teaser .main {
 
+    width: 900px;
 
+    margin: 0 auto;
 
+}
 
+
 
+.teaser .main h2 {
 
+    border: 0 none;
 
+    padding-bottom: 0;
 
+}
 
+
 
+.teaser p {
 
+    font-family: Georgia, serif;
 
+    line-height: 1.5em;
 
+    font-size: 16px;
 
+    color: #666;
 
+    margin: 10px 0;
 
+}
 
+
 
+.teaser p.try {
 
+    text-align: center;
 
+}
 
+
 
+.teaser p.try button {
 
+    box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.0470588) 0px 1px 2px 0px;
 
+    border: 1px solid #333;
 
+    padding: 10px 20px;
 
+    border-radius: 8px;
 
+    font-size: 22px;
 
+    background-color: rgb(81, 163, 81);
 
+    background-image: -webkit-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
 
+    color: #fff;
 
+    text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px;
 
+    cursor: pointer;
 
+}
 
+
 
+.teaser p.try button:hover {
 
+    background-image: none;
 
+}
 
+
 
+span.info {
 
+    font-style: italic;
 
+    background: lightyellow;
 
+    margin: 10px;
 
+    display: inline-block;
 
+}
 
+
 
+.box {
 
+    width: 900px;
 
+    margin: 50px auto;
 
+    line-height: 1.5em;
 
+}
 
+
 
+.box dt {
 
+    float: left;
 
+    width: 300px;
 
+    font-style: italic;
 
+    font-family: Georgia, serif;
 
+    font-size: 18px;
 
+}
 
+
 
+.box dt:before {
 
+    content: "★";
 
+    padding-right: 10px;
 
+    font-size: 12px;
 
+}
 
+
 
+.box dd {
 
+    display: inline-block;
 
+    width: 500px;
 
+    margin-bottom: 30px;
 
+}
 
+
 
+#footer {
 
+    font-size: 12px;
 
+    text-align: center;
 
+}
 
+
 
+#footer .main {
 
+    width: 900px;
 
+    margin: 0 auto;
 
+}
 
+
 
+.box li {}
 
+
 
+.box li:before {
 
+    content: "★";
 
+    padding-right: 10px;
 
+    font-size: 12px;
 
+}

+ 61 - 0
css/syntax.css
View File 

@@ -0,0 +1,61 @@
 
+.highlight { background: #ffffff; }
 
+.highlight .c { color: #999988; font-style: italic } /* Comment */
 
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 
+.highlight .k { font-weight: bold } /* Keyword */
 
+.highlight .o { font-weight: bold } /* Operator */
 
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
 
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
 
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
 
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
 
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
 
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
 
+.highlight .ge { font-style: italic } /* Generic.Emph */
 
+.highlight .gr { color: #aa0000 } /* Generic.Error */
 
+.highlight .gh { color: #999999 } /* Generic.Heading */
 
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
 
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
 
+.highlight .go { color: #888888 } /* Generic.Output */
 
+.highlight .gp { color: #555555 } /* Generic.Prompt */
 
+.highlight .gs { font-weight: bold } /* Generic.Strong */
 
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
 
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
 
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
 
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
 
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
 
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
 
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
 
+.highlight .m { color: #009999 } /* Literal.Number */
 
+.highlight .s { color: #d14 } /* Literal.String */
 
+.highlight .na { color: #008080 } /* Name.Attribute */
 
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
 
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
 
+.highlight .no { color: #008080 } /* Name.Constant */
 
+.highlight .ni { color: #800080 } /* Name.Entity */
 
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
 
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
 
+.highlight .nn { color: #555555 } /* Name.Namespace */
 
+.highlight .nt { color: #000080 } /* Name.Tag */
 
+.highlight .nv { color: #008080 } /* Name.Variable */
 
+.highlight .ow { font-weight: bold } /* Operator.Word */
 
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
 
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
 
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
 
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
 
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
 
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
 
+.highlight .sc { color: #d14 } /* Literal.String.Char */
 
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
 
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
 
+.highlight .se { color: #d14 } /* Literal.String.Escape */
 
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
 
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
 
+.highlight .sx { color: #d14 } /* Literal.String.Other */
 
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
 
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
 
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
 
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
 
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
 
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
 
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
 
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
 
+

+ 48 - 0
documentation.html
View File 

@@ -0,0 +1,48 @@
 
+<!DOCTYPE html> 
+<html> 
+  <head> 
+    <title>Amber Smalltalk - Documentation</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/documentation.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='amber/js/amber.js'></script> 
+    <script type='text/javascript' src='amber/js/lib/showdown.js'></script> 
+    <script type="text/javascript">
 
+
 
+      var _gaq = _gaq || [];
 
+      _gaq.push(['_setAccount', 'UA-2246313-6']);
 
+      _gaq.push(['_trackPageview']);
 
+
 
+      (function() {
 
+      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 
+      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 
+      })();
 
+
 
+    </script>
 
+  </head> 
+  <body> 
+    
+    <div id="wrapper"> 
+      
+      <div id="header"> 
+	<img class="left" src="images/amber_small.png"/> 
+	<div class="left">
 
+	  <h1>Amber Smalltalk - documentation</h1>
 
+	  <h2>Version 0.9.1</h2>
 
+	</div>
 
+	<div class="clear"></div>
 
+      <ul id="tabs"> 
+	<li><a href="index.html">← Back to amber-lang</a></li> · 
+	<li><a target="_blank" href="https://github.com/amber-smalltalk/amber">Source</a></li> 
+      </ul>
 
+
 
+      
+      <div class="clear"></div> 
+    </div>
 
+    <script type='text/javascript'> loadAmber({files: ['Documentation.js']}) </script> 
+    
+  </body> 
+</html>

BIN
favicon.ico
View File


BIN
images/amber.png
View File


BIN
images/amber_small.png
View File


BIN
images/bg.png
View File


BIN
images/github.png
View File


BIN
images/profstef.png
View File


BIN
images/zip.png
View File


+ 89 - 0
index.html
View File 

@@ -0,0 +1,89 @@
 
+---
 
+layout: index
 
+title: Amber Smalltalk
 
+---
 
+
 
+
 
+<div class="box">
 
+  
+  <h2>Amber...</h2>
 
+
 
+  <dl>
 
+    <dt>So...What is it about again?</dt>
 
+    <dd>
 
+      <p>Amber is a language (derived from <a href="http://en.wikipedia.org/wiki/Smalltalk">Smalltalk</a>) and environment built for the web.</p>
 
+With Amber, client-side web development finally gets the power and productivity that exists in other Smalltalk dialects.</p>
 
+    </dd>
 
+
 
+    <dt>Why should I care?</dt>
 
+    <dd>
 
+      <p>Having a true live & incremental development environment where you can build your application interactively in the browser is unbeatable.</p>
 
+    </dd>
 
+
 
+    <dt>Why a Smalltalk dialect?</dt>
 
+    <dd>
 
+      <p>Smalltalk stands head and shoulders above most other languages for clarity, conciseness, and human-friendliness.</p>
 
+      <p>As a language, it is immensely clean and mature, both syntactically and semantically. It is a pure OO language, with objects all the way down.</p>
 
+    </dd>
 
+
 
+    <dt>But what about all the JS ecosystem?</dt>
 
+    <dd>
 
+      <p>Amber plays very well with the outer world. You can interact with JavaScript objects seemlessly, and even inspect them as any Amber object.</p>
 
+      <p><a href="https://github.com/amber-smalltalk/amber/wiki/From-smalltalk-to-javascript-and-back">Evaluating JavaScript object methods</a> is transparent and makes using libraries a breeze.</p>
 
+    </dd>
 
+
 
+    <dt>Quick links</dt>
 
+    <dd>
 
+      You can read the <a href="documentation.html"> documentation</a> online. The <a href="https://github.com/amber-smalltalk/amber/wiki">Wiki on GitHub</a> includes a <a href="https://github.com/amber-smalltalk/amber/wiki/Getting-started">Getting started</a> tutorial for OSX, Linux and Windows.
 
+    </dd>
 
+
 
+  </dl>
 
+
 
+</div>
 
+
 
+<div class="box" id="getstarted">
 
+
 
+  <h2>Client-side usage</h2>
 
+  <div class="content">
 
+    <p>Load the full Amber Smalltalk environment with the IDE in your page:</p> 
+    
+    {% highlight html %}<script src="js/amber.js" type="text/javascript"></script>
 
+<script type="text/javascript"> loadAmber()</script>{% endhighlight %}
 
+
 
+    <p>Or the deployment JavaScript file only (without the Smalltalk sources, parser, compiler and IDE):</p>
 
+    {% highlight html %}<script src="js/amber.js" type="text/javascript"></script>
 
+<script type="text/javascript"> loadAmber({deploy: true})</script>{% endhighlight %}
 
+
 
+    <p>Read the <a href="documentation.html">documentation</a> to learn more about writing applications in Amber.</p>
 
+  </div>
 
+</div>
 
+
 
+
 
+<div class="box" id="getinvolved">
 
+  <h2> Get involved!</h2>
 
+
 
+  <h3>Contributing to the project</h3>
 
+  <p>In a sharing mood? Contributions to Amber are very much welcome!</p>
 
+  <ul>
 
+    <li>The Amber source code is hosted on <a href="https://github.com/amber-smalltalk/amber">Github</a>. You can fork the main repository and send pull requests.</li>
 
+    <li>The <a href="https://github.com/amber-smalltalk/amber/wiki/Contributions">contributions</a> page lists some possible contributions that which contributors might "adopt" and realize.</li>
 
+    <li>You can also submit issues on the <a href="https://github.com/amber-smalltalk/amber/issues?sort=created&state=open">bug tracker</a>.</li>
 
+  </ul>
 
+
 
+  <h3>Meet the people behind Amber</h3>
 
+  <ul>
 
+    <li>Most of Amber discussion and help happens on the <a href="http://groups.google.com/group/amber-lang"> Google Group</a>.</li>
 
+    <li>Amber hackers can be found on the #amber-lang IRC channel on freenode. You can use the <a href="http://webchat.freenode.net/">Freenode web client</a>.</li>
 
+  </ul>
 
+</div>
 
+<div class="box last">
 
+  <h2 id="download">Download</h2>
 
+  <div class="content">
 
+    <p>You can get a copy of Amber from github or clone the <a href="http://github.com/amber-smalltalk/amber">git repository</a>.</p> 
+    <a href="http://github.com/amber-smalltalk/amber/zipball/master">
 
+      <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
 
+    <a href="http://github.com/amber-smalltalk/amber/tarball/master">
 
+      <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
 
+  </div>
 
+</div>
 
+

+ 40 - 0
learn.html
View File 

@@ -0,0 +1,40 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
+    <title>Learn Smalltalk with ProfStef</title>
 
+    <link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'> 
+    <meta name="author" content="Nicolas Petton">
 
+    <link rel="stylesheet" type="text/css" href="css/profstef.css">
 
+    <script type="text/javascript" src="./amber/js/amber.js"></script>
 
+  </head>
 
+  <body>
 
+
 
+    <div class="main">
 
+      <a id="back" href="/"> &larr; back to amber-lang.net </a>
 
+      <img src="images/profstef.png"/>
 
+      <h1>Hey there! Got 5 minutes? I'm prof Stef and I want to teach you Smalltalk. I promise, it won't take long!</h1> 
+      
+      <div id="tutorial"><h2>Loading...</h2></div>
 
+      <script> 
+	function loadTutorial() {
 
+		jQuery('#tutorial').empty();
 
+		smalltalk.TrySmalltalkWidget._new()._appendToJQuery_(jQuery('#tutorial'));
 
+	}
 
+      </script>
 
+    </div>
 
+    
+    <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>Amber is an opensource project sponsored by <a href="http://www.objectfusion.fr/">objectfusion</a>.</p>
 
+      </div> 
+    </div>
 
+
 
+    <script type="text/javascript">
 
+      loadAmber({files: ['TrySmalltalk.js'], prefix: 'examples/trysmalltalk/js', ready: loadTutorial});
 
+    </script>    
+
 
+
 
+  </body>
 
+</html>