Procházet zdrojové kódy

First version of the homepage

Nicolas Petton před 11 roky
rodič
revize
14db0df96a
19 změnil soubory, kde provedl 1114 přidání a 0 odebrání
  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ární
      favicon.ico
  12. binární
      images/amber.png
  13. binární
      images/amber_small.png
  14. binární
      images/bg.png
  15. binární
      images/github.png
  16. binární
      images/profstef.png
  17. binární
      images/zip.png
  18. 89 0
      index.html
  19. 40 0
      learn.html

+ 3 - 0
.gitmodules

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

+ 1 - 0
_config.yml

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

+ 69 - 0
_layouts/default.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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ární
favicon.ico


binární
images/amber.png


binární
images/amber_small.png


binární
images/bg.png


binární
images/github.png


binární
images/profstef.png


binární
images/zip.png


+ 89 - 0
index.html

@@ -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

@@ -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>