From 0b2a63b7bdb5d79cdef2a01aa3100a22a5b13ebc Mon Sep 17 00:00:00 2001
From: PhilipWitte <witte2008@gmail.com>
Date: Sun, 8 Feb 2015 04:01:18 -0800
Subject: [PATCH] Fixed website banner HTML & Javascript Various website CSS
 improvements Added docs & learn icons Added learn articles

---
 tools/website.tmpl                   | 162 +++++++++++----------------
 web/assets/images/docs-articles.png  | Bin 0 -> 381 bytes
 web/assets/images/docs-examples.png  | Bin 0 -> 596 bytes
 web/assets/images/docs-internals.png | Bin 0 -> 621 bytes
 web/assets/images/docs-libraries.png | Bin 0 -> 335 bytes
 web/assets/images/docs-tools.png     | Bin 0 -> 636 bytes
 web/assets/images/docs-tutorials.png | Bin 0 -> 560 bytes
 web/assets/index.js                  |  34 ++++++
 web/assets/style.css                 | 126 +++++++--------------
 web/documentation.txt                |  57 ++++++----
 web/learn.txt                        |  54 ++++++---
 11 files changed, 220 insertions(+), 213 deletions(-)
 create mode 100644 web/assets/images/docs-articles.png
 create mode 100644 web/assets/images/docs-examples.png
 create mode 100644 web/assets/images/docs-internals.png
 create mode 100644 web/assets/images/docs-libraries.png
 create mode 100644 web/assets/images/docs-tools.png
 create mode 100644 web/assets/images/docs-tutorials.png
 create mode 100644 web/assets/index.js

diff --git a/tools/website.tmpl b/tools/website.tmpl
index e1fdf67012..6dce93d147 100644
--- a/tools/website.tmpl
+++ b/tools/website.tmpl
@@ -7,7 +7,6 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <title>$c.projectTitle</title>
     <link rel="stylesheet" type="text/css" href="assets/style.css" />
-
     <link rel="shortcut icon" href="assets/images/favicon.ico">
   #if len(rss) > 0:
     <link href="$rss" title="Recent changes" type="application/atom+xml" rel="alternate">
@@ -17,23 +16,23 @@
     <header id="head">
       <div class="page-layout tall">
         <div id="head-logo"></div>
-        <a id="head-logo-link" href="http://nim-lang.org/index.html"></a>
+        <a id="head-logo-link" href="index.html"></a>
         <nav id="head-links">
       #for i in 0.. c.tabs.len-1:
-      #  var name = c.tabs[i].key
-      #  var t = c.tabs[i].val
-        #if currentTab == t:
-          <a class="active" 
-        #elif t == "community" or t == "news":
-        #  continue
-        #else:
-          <a
-        #end if
-        #if t.contains('.'):
-          href="${t}" title = "$c.projectName - $name">$name</a>
-        #else:
-          href="${t}.html" title = "$c.projectName - $name">$name</a>
-        #end if
+      # let t = c.tabs[i].val
+      # if t != "community" and t != "news":
+      #   let name = c.tabs[i].key
+      #   if currentTab == t:
+            <a class="active" 
+      #   else:
+            <a
+      #   end if
+      #   if t.contains('.'):
+            href="${t}" title = "$c.projectName - $name">$name</a>
+      #   else:
+            href="${t}.html" title = "$c.projectName - $name">$name</a>
+      #   end if
+      # end if
       #end for
         </nav>
       </div>
@@ -50,10 +49,25 @@
 #  if currentTab == "index":
         <div id="slideshow">
           <!-- slides -->
-          <div id="slide0" class="">
+          <div id="slide0" class="active">
+            <h2><a name="why-should-i-be-excited">Why should I be excited?</a></h2>
+            <span class="desc">Nim is the only language that leverages automated proof technology to perform a <i>disjoint check</i> for your parallel code. Working on disjoint data means no locking is required and yet data races are impossible:</span><br><br>
+<pre>
+<span class="kwd">parallel</span>:
+<span class="tab">  </span><span class="kwd">var</span> i = <span class="val">0</span>
+<span class="tab">  </span><span class="kwd">while</span> i <= a.high:
+<span class="tab">  <span class="tab">  </span></span></span><span class="kwd">spawn</span> f(a[i])
+<span class="tab">  <span class="tab">  </span></span></span><span class="kwd">spawn</span> f(a[i+<span class="val">1</span>])
+<span class="tab">  <span class="tab">  </span></span></span><span class="cmt"># ERROR: cannot prove a[i] is disjoint from a[i+1]</span>
+<span class="tab">  <span class="tab">  </span></span></span><span class="cmt"># BUT: replace 'i += 1' with 'i += 2' and the code compiles!</span>
+<span class="tab end">  <span class="tab end">  </span></span>i += <span class="val">1</span>
+</pre>
+          </div>
+          <div id="slide1">
             <div>
               <h2>Nim looks like this..</h2>
-<pre><span class="cmt"># compute average line length</span>
+<pre>
+<span class="cmt"># compute average line length</span>
 <span class="kwd">var</span>
 <span class="tab">  </span>sum = <span class="val">0</span>
 <span class="tab end">  </span>count = <span class="val">0</span>
@@ -68,7 +82,8 @@ echo(<span class="val">"Average line length: "</span>,
             </div>
             <div>
                <h2>..and this...</h2>
-<pre><span class="cmt"># create and greet someone</span>
+<pre>
+<span class="cmt"># create and greet someone</span>
 <span class="kwd">type</span> <span class="def">Person</span> = <span class="typ">object</span>
 <span class="tab">  </span>name: <span class="typ">string</span>
 <span class="tab end">  </span>age: <span class="typ">int</span>
@@ -81,58 +96,43 @@ echo(<span class="val">"Average line length: "</span>,
 p.greet() <span class="cmt"># or greet(p)</span>
 </pre>
              </div>
-          </div>  <!-- slide0 -->
-          <div id="slide1" class="active">
-             <h2><a name="why-should-i-be-excited">Why should I be excited?</a></h2>
-             <span class="desc">
-               Nim is the only language that leverages automated proof technology
-               to perform a <i>disjoint check</i> for your parallel
-               code. Working on disjoint data means no locking is
-               required and yet data races are impossible:</span>
-             <pre>
-<span class="kwd">parallel</span>:
-<span class="tab">  </span><span class="kwd">var</span> i = <span class="val">0</span>
-<span class="tab">  </span><span class="kwd">while</span> i <= a.high:
-<span class="tab">    </span>spawn f(a[i])
-<span class="tab">    </span>spawn f(a[i+<span class="val">1</span>])
-<span class="tab">    </span><span class="cmt"># ERROR: cannot prove a[i] is disjoint from a[i+1]</span>
-<span class="tab">    </span><span class="cmt"># BUT: replace 'i += 1' with 'i += 2' and the code compiles!</span>
-<span class="tab end">    </span>i += <span class="val">1</span>
-            </pre>
           </div>
           <div id="slide2" class="">
             <div>
-            <h2>interfacing with C..</h2>
-            <pre>
-<span class="kwd">proc</span> <span class="def">unsafeScanf</span>(f: <span class="typ">File</span>; s: <span class="typ">cstring</span>)
-<span class="tab">  </span>{.importc: <span class="val">"fscanf"</span>, 
-<span class="tab end">    </span>header: <span class="val">"&lt;stdio.h&gt;"</span>, varargs.}
-
-<span class="kwd">var</span> x: cint
-unsafeScanf(stdin, <span class="val">"%d"</span>, <span class="kwd">addr</span> x)
-            </pre></div>
-
-            <div>
-              <h2>..and DSLs made easy</h2>
+              <h2>C FFI is easy in Nim..</h2>
 <pre>
+<span class="cmt"># declare a C procedure..</span>
+<span class="kwd">proc</span> <span class="def">unsafeScanf</span>(f: <span class="typ">File</span>, s: <span class="typ">cstring</span>)
+<span class="tab">  </span>{.varargs,
+<span class="tab">    </span>importc: <span class="val">"fscanf"</span>, 
+<span class="tab end">    </span>header: <span class="val">"&lt;stdio.h&gt;"</span>.}
+
+<span class="cmt"># ..and use it...</span>
+<span class="kwd">var</span> x: cint
+stdin.unsafeScanf(<span class="val">"%d"</span>, <span class="kwd">addr</span> x)
+</pre>
+              <p><span class="desc"><b>Compile and run with:</b><br>&nbsp;&nbsp;&nbsp;&nbsp;&#36; nim c -r example.nim</span></p>
+            </div>
+            <div>
+              <h2>..and DSLs are too...</h2>
+<pre>
+<span class="cmt"># a simple web server</span>
 <span class="kwd">import</span> jester, asyncdispatch, htmlgen
 
-routes:
-<span class="tab">  </span>get <span class="val">"/"</span>:
-<span class="tab end">    </span>resp h1(<span class="val">"Hello world"</span>)
+<span class="cmt"># using jester commands</span>
+<span class="kwd">routes</span>:
+<span class="tab">  </span><span class="kwd">get</span> <span class="val">"/"</span>:
+<span class="tab end">  <span class="tab end">  </span></span><span class="kwd">resp</span> h1(<span class="val">"Hello world"</span>)
 
 runForever()
-</pre><p><span class="desc">
-Compile and run with:<br />
-nim c -r example.nim<br />
-View at: localhost:5000
-</span></p>
+</pre>
+              <p><span class="desc"><b>View in browser at:</b><br>&nbsp;&nbsp;&nbsp;&nbsp;localhost:5000</span></p>
             </div>
           </div>
         </div>
         <div id="slideshow-nav">
-          <div id="slideControl0" onclick="slideshow_click(0)"></div>
-          <div id="slideControl1" onclick="slideshow_click(1)" class="active"></div>
+          <div id="slideControl0" onclick="slideshow_click(0)" class="active"></div>
+          <div id="slideControl1" onclick="slideshow_click(1)"></div>
           <div id="slideControl2" onclick="slideshow_click(2)"></div>
         </div>
 #  end
@@ -190,9 +190,12 @@ View at: localhost:5000
 				</div>
 			</div>
 		</footer>
-
-  <script>
+  
+#  if currentTab == "index":
+  <script src="assets/index.js"></script>
+# end if
 #  if c.gaId != nil:
+  <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -200,42 +203,7 @@ View at: localhost:5000
 
     ga('create', '${c.gaId}', 'nim-lang.org');
     ga('send', 'pageview');
-#  end if
-
-var timer;
-var prevIndex = 0;
-
-function setSlideShow(index, short) {
-  if (index > 2) index = 0;
-  for (var i = 0; i < 10; ++i) {
-    var x = document.getElementById("slide"+i);
-    if (!x) break;
-    x.className = "";
-    document.getElementById("slideControl"+i).className = "";
-  }
-  document.getElementById("slide"+index).className = "active";
-  document.getElementById("slideControl"+index).className = "active";
-  prevIndex = index;
-  startTimer(short ? 8000 : 32000);
-}
-
-function nextSlide() { setSlideShow(prevIndex + 1, true); }
-function startTimer(t) { timer = setTimeout(nextSlide, t); }
-
-function slideshow_enter() { clearTimeout(timer); }
-function slideshow_exit () { startTimer(16000); }
-
-function slideshow_click(index) {
-  clearTimeout(timer);
-  setSlideShow(index, false);
-}
-
-window.onload = function() {
-  var slideshow = document.getElementById("slideshow");
-  slideshow.onmouseenter = slideshow_enter;
-  slideshow.onmouseleave = slideshow_exit;
-  startTimer(8000);
-};
   </script>
+#  end if
 </body>
 </html>
diff --git a/web/assets/images/docs-articles.png b/web/assets/images/docs-articles.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f800ea33ea7ee8b218cfcf10d2acd6a9b925f67
GIT binary patch
literal 381
zcmeAS@N?(olHy`uVBq!ia0vp@3=9l>9Bd2>3}5P}U1DHhU@3O;4B_D5;Hcq9>0n@B
z;4JWnEM{Qfy$-^RP8zc-7#J8NOI#yLg7ec#$`gxH8OqDc^)mCai<1)zQuXqS(r3T3
zkz!zA_~q&17@{$8>I7TA!vO*<`z!x(a(ra!YO!#VvS4IYf533z5!0nW<s}6yE}~vl
zTv<`SCdf1hE2xU)O?bRiabuxS;<9RMYh!Ew+b2JGy%4+cC_km`?g{n9nlthhel%X%
zp!9<!E_|(|OOvt!+vmhq3vc%J^RNHhKDnd)ja-7_B#W=l5A(C?#d~RWsLnleKk;Ni
zPw@3Kb><GboqAI~8=c%?{CwUk&2wqetvkhC(l@@IynW|Ukr``NZsB~RJ6}DPy~cK3
z(38q7>l*|Gu1`*L_$w?UaMkye--{$8i;5MKtfxPYJ^fZTBmDW*CC3UDe5n^&dQRh)
h!?l2klCJ-yjhnpk_suSsXJBAp@O1TaS?83{1OQG}mSO+^

literal 0
HcmV?d00001

diff --git a/web/assets/images/docs-examples.png b/web/assets/images/docs-examples.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6d27e03487084dc6330115681992e011910fb59
GIT binary patch
literal 596
zcmeAS@N?(olHy`uVBq!ia0y~yU=UznVBq0kV_;y&es0^yz`(##?Bp53!NI{%!;#X#
zz`(#+;1OBOz`%PQgc+SQW>+vUFi4iTMwA5Sr<If^7Ns(jmzV2h=4BTrCl;jY<rk&T
zerF@az`%IX)5S4FV`A<kfA5e&k+%8Y%V#TOyz`N|=#-)PGhIu~IVxoJzJmf2*Jf?u
zQJJvMsk<n-JIh2oFkrS_^UhATGcWq;m+=QU9WlvrDtZ5Yo|xIW8GBE+Ki?x`;hyG}
zzU$QKRu?n9HS#Z5nG((>T<u(b)+=%4<?z)C)z((eY=RG%F39}gc5Kg_)|D$YN?3Kc
z_xOqU=Y@B@-p%^(M*HGTXQCIxZxGPlcS|VhrJlR(#xG7cR2R%+i@8%3^h3={oBeQ2
z5UXGFHRiu|H&=+5ACeASUp$5J(v+KLcOH8Fr{b;0tO%7ChHoy185f^xt&G1V$#&$h
z+tM8qwcQVMt(ZN-#BgOp)jAnob9w%M1&{vqtqM-OH(ln2OSZ4@d&Yu0Pw#Ju+{&AK
zi1DrQl1um1-fI7lXD*hwyjxvSmTAKk`&;SnjHI)immPhPq~>G%ULc({UdJ}zM#Z)3
zFSPW<_k3Q=;3##*B#nL1yUwf`f2>3p)eXeVV{78l+}=IQn%<Ohu!pg^^8Mcv-|oy@
zKUZ32-{vZtj=#klP9K=1xo<<HX5IbY9-RCF*Bf<H^v^~(eKHa~=++=}W3|i4y|(>V
zX1-b5Uwe){S&fbLZ-ej}iLlQ_#`fCHTmAm?PfNT!>ERDPV+IBW22WQ%mvv4FO#sbx
B{+$2-

literal 0
HcmV?d00001

diff --git a/web/assets/images/docs-internals.png b/web/assets/images/docs-internals.png
new file mode 100644
index 0000000000000000000000000000000000000000..e03a952d59a9f49e1191d53f2e0f6d77c14dce4b
GIT binary patch
literal 621
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~4mJh`2J356y%-o6Sc;uILpV4%IBGajIv5xj
zI14-?iy0VruY)k7lg8`{1_lPn64!{5;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xh
zq!<_&UwOJXhG<M|owz?cI8mf+e(`(WF5f&SSC&GJCJ$~;ofivA1PfR8{o<dIwI(mr
zML<)e<nqCVTP7+zdZv+g>EuaAuOJ;Q(=ACyqSl&cdN1&N_xgg1Z~cpz`-<b{ecpHf
z`%D#vKRJm9HnjVmmyU@}y6JB+zw1M(>GZk-d{4LXt66h=+5PpHx_zSQgnq#{EKCtP
z(Kd}Y@-NvgD4)DfDVgQt+F9PV_nD6Ci*_}otd19uGCsaf<H@pvE3fTI^tBdxGI?p=
zjdc<^5}zBilebvStYg}czQaH`^A^*CCOx*FA?zFvbgaL+CX_C|dVE{JZ^1|=E$N?c
z4wsde)l~L3S~Q&8DJnnf?Y1|wJ#6mnU@Xahld?$LxHf^iXO7Sf;{@3fvE_l^L^V(E
zxXrYjrFh=!rH^kOn%l?z`|tVb+{$ft?{E3Tx+sP3eZy*@+69`4d8X5?-u~%4kiH-@
zLxTG}<7c&fOvhD^IZrgG;4Wjk9Mf*>@a9y>{ZlUgbsUt8i#_`09ywI#cyw+1$pz0d
zOvCi{nY@|dbA9f9<86)&3iEY33&aDASFqY1T;;~uIA7s@in!IB?b`OyGDaUcDpVs(
zEcjclzKFW=Tb*;p8u1WzHlA6B)EwIvAAI+se(v|wd&l>c?|faiwoLl+Jukh|wQK(}
ZNlZR_cCxxxF#`hwgQu&X%Q~loCIHyA3D5ul

literal 0
HcmV?d00001

diff --git a/web/assets/images/docs-libraries.png b/web/assets/images/docs-libraries.png
new file mode 100644
index 0000000000000000000000000000000000000000..b14952f7dbc2c4e8ed562afad4b5635cf2ba4984
GIT binary patch
literal 335
zcmeAS@N?(olHy`uVBq!ia0vp@3=9nX9Bd2>4ED;d<qQlAEX7WqAsieW95oy%9SjT%
zoCO|{#S9F**Fl)kNn>^e0|SF(iEBhjaDG}zd16s2LwR|*US?i)adKios$PCk`s{Z$
zQVa|XXFOdTLo_Cyy<qFdlqk^fu>2UWnA+|Fw(2G38y{)Bk<zkg+}OfAL*S8N4iBgL
zf(cirX)ByO=2ACj<3o3;Z;L<c?tgO9+*oM&Wx)#~d-h7)<GC>{<)?YU$%X#L@4BA<
zYG?92v}&c%x@GSpMK~A)K8m;Ro7a3tg?&}}!dQ2WyuEkTBLAs0&2joYmnXNQir?dr
zNj$sa!T107ls6sce!E}kXhJzhdeetsr)OzaL54~T3bwBc)!KZif7<G7m+liE-2-d)
lM&z$Mb^NmaarrvN$q%ge&*-raXJBAp@O1TaS?83{1OQb=fwBMq

literal 0
HcmV?d00001

diff --git a/web/assets/images/docs-tools.png b/web/assets/images/docs-tools.png
new file mode 100644
index 0000000000000000000000000000000000000000..d83f0faaaa62770c77078cf9f5124785d8c1df74
GIT binary patch
literal 636
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~4mJh`2J356y%-o6Sc;uILpV4%IBGajIv5xj
zI14-?iy0VruY)k7lg8`{1_lPn64!{5;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xh
zq!<_&e|ow&hG<Nzon)IK%qVia{=J^O)GhDD-2&|5?8z@1BiC^FH8pj2D0DSt1g&1M
z?V1u_SCd~;Q^*QV*DeJy(>^{vS(lefI@boAR0vUQ-l#Us;p|=8c9nFKW83%k-~YYe
z-sa&0Cy#U?`?V!?`xPE*RR!Kj;9OiMm7;%2ou{@}dd`Xz;rkifhr28<Z+uujyDsI;
za|e%*IICSztB<`koMPExyCUXzLD$8ShjU_P^Zqb6wP4pVX6?`&>^ZE5mSyH#UR}}m
zJdW+ovmBls$+dCyOIg_+=4%--y<u|DT+hjx&geAn%9SNc1it5s?iKMBFY7kS4>A76
zdSP?Z69$(K3%=J3cNR>{Y+8Tib6M9b#RVKW?n^XQz0&Vp_L<+YPs7HsQqf5)g3qEY
zcHXOarVW=qTeIY^kdn9f$9|{y*<rTL@AR6Y4rmFOh4Aa7ze)e2-199ZRVgs&OQA6@
z_oUZsW^cA@9{1C|G4J^~#)oMycYD<qmm2;2y8o2Xue7z#clO_MXs|P>*gSg^|MzuY
z?yzm!BJ;!hp-cR$+D+PbDtu+LL`7}cj4sa#{IZVY5~F+D=R(I#`yGw0{w~vda6%#=
z`xJkaI=8#^g9*yY7b>_~j>fH=&#vMBRloDW@6d;C>@hbj4Awbu{m>}*aXMwwwXCp1
n6Qeou8#6B(eE-Y)pGj5d;Dq~)cHbEo7#KWV{an^LB{Ts5IXeo9

literal 0
HcmV?d00001

diff --git a/web/assets/images/docs-tutorials.png b/web/assets/images/docs-tutorials.png
new file mode 100644
index 0000000000000000000000000000000000000000..926a4b58b153684218d931fb700b6f5fe9581a74
GIT binary patch
literal 560
zcmeAS@N?(olHy`uVBq!ia0y~yVBlw9VBq6mV_;zT(B<}?fq{Xg*vT`5gM)*kh9jke
zfq{Xuz$3Dlfr0lr2s1iq%&uTyV2~_vjVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw
z{mw>;fq`+Yr;B5V#>CP|wi&^R60P%#Cwp{f=5_Nam2S1VGtEQLg}pV;RaQiOp~9>e
zO0S;rA89zcwpk&gEpL~GM`3}$l3>>y0qKAO;VzC>6Vw(sO@4gg&;4KL&VMev_qlG<
z*#|F<-F~=X-o7kL_0=K1*X1i7o_H^DU3>M8IXu_PV>iSweEU{#KSgx)<Nac>7W;0h
zduyBtJ$Gv#`<s5(m*>Pi%U3OZv9nh+E^7A1T6sfThCC@dPPJtJ8KIu$%uLdm35EN&
ziR4aETW(N%;QYVTOraZd=eieXr|Ud36h07sVQQ9U73+kP)5}k<WKFpB<C|ONE7vs}
zHg?Nz?rm7JWcQ5P8OzVQJ&wvX{LQQ|cfHHk<AF=hvd>ldS+q(rgSEu&K=F*%9czR-
zgLBm~?F0AC={hMH)ZU<Yuyfg0w#;LfbXn(w6<Y4RDxBDTyJ}7Jf_~1g)6BGuxlOFL
zn_BnuGrj+n9NoM;>wG-J-0Eo#Jl%TNC-&a|@BVM{$#A|DH}$ZF3l*kn*W1eMSf*{8
z=$=x~z{l*ZyKd^X_xZv-Yr_4w;@xCezA@Z4oZl;V_1NO+dKYp&|7TE)S@&bnx~0n*
Q7#J8lUHx3vIVCg!0CfTGQvd(}

literal 0
HcmV?d00001

diff --git a/web/assets/index.js b/web/assets/index.js
new file mode 100644
index 0000000000..f10dc603d0
--- /dev/null
+++ b/web/assets/index.js
@@ -0,0 +1,34 @@
+"use strict";
+
+var timer;
+var prevIndex = 0;
+var slideCount = 2;
+
+function setSlideShow(index, short) {
+  if (index >= slideCount) index = 0;
+  document.getElementById("slide"+prevIndex).className = "";
+  document.getElementById("slide"+index).className = "active";
+  document.getElementById("slideControl"+prevIndex).className = "";
+  document.getElementById("slideControl"+index).className = "active";
+  prevIndex = index;
+  startTimer(short ? 8000 : 32000);
+}
+
+function nextSlide() { setSlideShow(prevIndex + 1, true); }
+function startTimer(t) { timer = setTimeout(nextSlide, t); }
+
+function slideshow_enter() { clearTimeout(timer); }
+function slideshow_exit () { startTimer(16000); }
+
+function slideshow_click(index) {
+  clearTimeout(timer);
+  setSlideShow(index, false);
+}
+
+window.onload = function() {
+  var slideshow = document.getElementById("slideshow");
+  slideshow.onmouseenter = slideshow_enter;
+  slideshow.onmouseleave = slideshow_exit;
+  slideCount = slideshow.children.length;
+  startTimer(8000);
+};
\ No newline at end of file
diff --git a/web/assets/style.css b/web/assets/style.css
index da4cff05c1..5e2115ef13 100644
--- a/web/assets/style.css
+++ b/web/assets/style.css
@@ -8,10 +8,18 @@ body {
 	min-width:1030px;
 	margin:0;
 	font:13pt "arial";
-	background:#152534 url("images/bg.jpg") no-repeat fixed center top; 
+	background:#152534 url("images/bg.jpg") no-repeat center top; 
 	color:rgba(0,0,0,.8); }
 
-pre { color:#fff;}
+pre {
+  color:#fff;
+  margin:0;
+  padding:15px 10px;
+  font:10pt monospace;
+  line-height:14pt;
+  background:rgba(0,0,0,.4);
+  border-left:8px solid rgba(0,0,0,.3);
+  box-shadow:1px 2px 16px rgba(28,180,236,.4); }
 pre, pre * { cursor:text; }
 pre .cmt { color:rgb(255,229,106); }
 pre .kwd { color:#43A8CF; font-weight:bold; }
@@ -23,8 +31,14 @@ pre .val { color:#8AB647; }
 pre .tab { border-left:1px dotted rgba(67,168,207,0.4); }
 pre .end { background:url("images/tabEnd.png") no-repeat left bottom; }
 
+.page pre { background:rgba(0,0,0,.8); }
+.page pre > .Comment { color:rgb(255,229,106); }
+.page pre > .Keyword { color:#43A8CF; font-weight:bold; }
+.page pre > .StringLit,
+.page pre > .DecNumber { color:#8AB647; }
+
 .tall { height:100%; }
-.pre { padding:0 5px; font:11pt monospace; background:rgba(255,255,255,.15); border-radius:3px; }
+.pre { padding:1px 5px; font:11pt monospace; background:#96A9B7; border-radius:3px; }
 
 .page-layout { margin:0 auto; width:1000px; }
 .docs-layout { margin:0 40px; }
@@ -90,7 +104,7 @@ pre .end { background:url("images/tabEnd.png") no-repeat left bottom; }
 		right:-16px;
 		height:48px;
 		background:url("images/glow-arrow.png") no-repeat right; }
-  glow-arrow.docs { left:280px; }
+  #glow-arrow.docs { left:280px; }
 	
 	#glow-line-vert {
 		position:fixed;
@@ -102,55 +116,35 @@ pre .end { background:url("images/tabEnd.png") no-repeat left bottom; }
 	
 	#slideshow { position:absolute; top:10px; left:10px; width:700px; height: 1000px; }
 	#slideshow > div {
-	  visibility:hidden; opacity:0; position:absolute; transition:visibility 0s linear 1s, opacity 1s ease-in-out; }
+    position:absolute;
+    margin:30px 0 0 10px;
+    visibility:hidden;
+    opacity:0;
+    transition:
+      visibility 0s linear 1s,
+      opacity 1s ease-in-out; }
 	#slideshow > div.active { visibility:visible; opacity:1; transition-delay:0s; }
 	#slideshow > div.init { transition-delay:0s; }
 	#slideshow-nav { z-index:3; position:absolute; top:110px;; right:-12px; }
 	#slideshow-nav > div { margin:5px 0; width:23px; height:23px; background:url("images/slideshow-nav.png") no-repeat; }
 	#slideshow-nav > div:hover { background-image:url("images/slideshow-nav_active.png"); opacity:0.5; }
 	#slideshow-nav > div.active { background-image:url("images/slideshow-nav_active.png"); opacity:1; }
-		
-		#slide0 { margin:30px 0 0 10px; }
-		#slide0 > div { float:left; width:320px; font:10pt monospace; }
+    
+		#slide0 { float:left; width:680px; font:10pt monospace; }
 		#slide0 > div:first-child { margin:0 40px 0 0; }
 		#slide0 h2 { margin:0 0 5px 0; color:rgba(162,198,223,.78); }
-		#slide0 > div > pre {
-			margin:0;
-			padding:15px 10px;
-			line-height:14pt;
-			background:rgba(0,0,0,.4);
-			border-left:8px solid rgba(0,0,0,.3);
-			box-shadow:1px 2px 16px rgba(28,180,236,.4); }
-
-		#slide1 { margin:30px 0 0 10px; }
-		#slide1 { float:left; width:680px; font:10pt monospace; }
+		#slide0 .desc { margin:0 0 5px 0; color:rgba(162,198,223,.78); font:13pt "arial"; }
+		
+		#slide1 > div { float:left; width:320px; font:10pt monospace; }
 		#slide1 > div:first-child { margin:0 40px 0 0; }
 		#slide1 h2 { margin:0 0 5px 0; color:rgba(162,198,223,.78); }
-		#slide1 .desc { margin:0 0 5px 0; color:rgba(162,198,223,.78);
-		                font:13pt "arial"; }
-		#slide1 pre {
-			padding:7px 10px;
-			line-height:14pt;
-			background:rgba(0,0,0,.4);
-			border-left:8px solid rgba(0,0,0,.3);
-			box-shadow:1px 2px 16px rgba(28,180,236,.4); }
-
-
-		#slide2 { margin:30px 0 0 10px; }
+    
 		#slide2 > div { float:left; width:320px; font:10pt monospace; }
 		#slide2 > div:first-child { margin:0 40px 0 0; }
 		#slide2 h2 { margin:0 0 5px 0; color:rgba(162,198,223,.78); }
-		#slide2 > div > pre {
-			margin:0;
-			padding:15px 10px;
-			line-height:14pt;
-			background:rgba(0,0,0,.4);
-			border-left:8px solid rgba(0,0,0,.3);
-			box-shadow:1px 2px 16px rgba(28,180,236,.4); }
-
-		#slide2 .desc { margin:0 0 5px 0; color:rgba(162,198,223,.78);
-		                font:13pt "arial"; }
-
+    
+		#slide2 .desc { margin:0 0 5px 0; color:rgba(162,198,223,.78); font:13pt "arial"; }
+    
 		/* back when slide1 was the quote:
 		#slide1 { margin-top:50px; }
 		#slide1 > p {
@@ -166,7 +160,7 @@ pre .end { background:url("images/tabEnd.png") no-repeat left bottom; }
 			font-style:italic;
 			font-weight:bold;
 			color:rgba(93,155,199,.44); }
-	       */
+    */
 	#sidebar {
 		z-index:2;
 		position:absolute;
@@ -524,11 +518,12 @@ pre .end { background:url("images/tabEnd.png") no-repeat left bottom; }
     .standout h2 { margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed rgba(0,0,0,.8); }
     .standout li { margin:0 !important; padding-top:10px; border-top:1px dashed rgba(0,0,0,.2); }
     .standout ul { padding-bottom:5px; }
-    .standout ul.tools { list-style:url("images/docs-tools.png"); }
-    .standout ul.library { list-style:url("images/docs-library.png"); }
-    .standout ul.internal { list-style:url("images/docs-internal.png"); }
-    .standout ul.tutorial { list-style:url("images/docs-tutorial.png"); }
-    .standout ul.example { list-style:url("images/docs-example.png"); }
+    .standout ul.tools     { list-style:url("images/docs-tools.png"); }
+    .standout ul.libraries { list-style:url("images/docs-libraries.png"); }
+    .standout ul.internals { list-style:url("images/docs-internals.png"); }
+    .standout ul.tutorials { list-style:url("images/docs-tutorials.png"); }
+    .standout ul.examples  { list-style:url("images/docs-examples.png"); }
+    .standout ul.articles  { list-style:url("images/docs-articles.png"); }
     .standout li:first-child { padding-top:0; border-top:none; }
     .standout li p { margin:0 0 10px 0 !important; line-height:130%; }
     .standout li > a { font-weight:bold; }
@@ -551,48 +546,13 @@ pre .end { background:url("images/tabEnd.png") no-repeat left bottom; }
 	#foot-legal { float:right; font-size:10pt; color:rgba(255,255,255,.3); line-height:150%; text-align:right; }
 	#foot-legal a { color:inherit; text-decoration:none; }
 	#foot-legal > h4 > a { color:inherit; }
-	
-	#mascot {
-    z-index:2;
-		position:absolute;
-		top:-340px;
-		right:25px;
-		width:202px;
-		height:319px;
-		background:url("images/mascot.png") no-repeat; }
 
 
-#body pre {
-  padding:20px;
-  border-left:10px solid #8f9698;
-  background:#f3f6f8;
-  font-size:15px;
-  font-family:courier, monospace;
-  letter-spacing:0;
-  line-height:17px;
-  color: #343739;
-}
-
-#body span.pre {
-  background-color: #96A9B7;
-  padding: 1pt 3pt;
-  border-radius: 2pt;
-  -moz-border-radius: 2pt;
-  -webkit-border-radius: 2pt;
-}
-
-#body pre > .Comment { color:#858686; font-style:italic; }
-#body pre > .Keyword { color:#1cb4ec; font-weight:bold; }
-#body pre > .Operator { color:#777; }
-#body pre > .StringLit, #page pre > .DecNumber { color:#ff7302; }
-
 #body .docutils th {
     border-bottom: 2px solid #1A1A1A;
     font-weight: normal;
-    padding: 8px;
-}
+    padding: 8px; }
 #body table.docutils {
     border-collapse: collapse;
     text-align: left;
-    border-spacing: 0px;
-}
+    border-spacing: 0px; }
\ No newline at end of file
diff --git a/web/documentation.txt b/web/documentation.txt
index 0bb2b8a0fb..c32fd35bab 100644
--- a/web/documentation.txt
+++ b/web/documentation.txt
@@ -6,16 +6,22 @@ Nim's Documentation
   Standards & Guides
   ------------------
 
+  .. raw:: html
 
-  - | `Standard Library <lib.html>`_
-    | This document describes Nim's standard library.
-
-  - | `Language Manual <manual.html>`_
-    | The Nim manual is a draft that will evolve into a proper specification.
-
-  - | `Compiler user guide <nimc.html>`_
-    | The user guide lists command line arguments, special features of the
-      compiler, etc.
+    <ul class="libraries">
+      <li>
+        <a href="lib.html">Standard Library</a><br>
+        <p>This document describes Nim's standard library.</p>
+      </li>
+      <li>
+        <a href="manual.html">Language Manual</a><br>
+        <p>The Nim manual is a draft that will evolve into a proper specification.</p>
+       </li>
+      <li>
+        <a href="nimc.html">Compiler User-Guide</a><br>
+        <p>The user guide lists command line arguments, special features of the compiler, etc.</p>
+       </li>
+    </ul>
 
 
 .. container:: standout
@@ -23,12 +29,18 @@ Nim's Documentation
   Tools & Features
   ----------------
 
-  - | `Source code filters <filters.html>`_
-    | The Nim compiler supports source code filters as a simple yet powerful
-      builtin templating system.
+  .. raw:: html
 
-  - | `Tools documentation <tools.html>`_
-    | Description of some tools that come with the standard distribution.
+    <ul class="tools">
+      <li>
+        <a href="filters.html">Source-Code Filters</a><br>
+        <p>The Nim compiler supports source code filters as a simple yet powerful builtin templating system.</p>
+      </li>
+      <li>
+        <a href="tools.html">Tools Documentation</a><br>
+        <p>Description of some tools that come with the standard distribution.</p>
+      </li>
+    </ul>
 
 
 .. container:: standout
@@ -36,13 +48,18 @@ Nim's Documentation
   Internal Details
   ----------------
 
-  - | `Garbage Collector <gc.html>`_
-    | Additional documentation about Nim's GC and how to operate it in a
-    | realtime setting.
+  .. raw:: html
 
-  - | `Internal documentation <intern.html>`_
-    | The internal documentation describes how the compiler is implemented. Read
-      this if you want to hack the compiler.
+    <ul class="internals">
+      <li>
+        <a href="gc.html">Garbage Collector</a><br>
+        <p>Additional documentation about Nim's GC and how to operate it in a realtime setting.</p>
+      </li>
+      <li>
+        <a href="intern.html">Internal Documentation</a><br>
+        <p>The internal documentation describes how the compiler is implemented. Read this if you want to hack the compiler.</p>
+      </li>
+    </ul>
 
 
 Search Options
diff --git a/web/learn.txt b/web/learn.txt
index 854b316684..4ff4dcafb4 100644
--- a/web/learn.txt
+++ b/web/learn.txt
@@ -6,11 +6,18 @@ Learning Nim
   Tutorials
   ---------
 
-  - | `Tutorial (part I) <tut1.html>`_
-    | Learn the basics of Nim's types, variables, procedures, control flow, etc...
+  .. raw:: html
 
-  - | `Tutorial (part II) <tut2.html>`_
-    | Learn Nim's more advanced features such as OOP, generics, macros, etc...
+    <ul class="tutorials">
+      <li>
+        <a href="tut1.html">Tutorial (part I)</a><br>
+        <p>Learn the basics of Nim's types, variables, procedures, control flow, etc...</p>
+      </li>
+      <li>
+        <a href="tut2.html">Tutorial (part II)</a><br>
+        <p>Learn Nim's more advanced features such as OOP, generics, macros, etc...</p>
+      </li>
+    </ul>
 
 
 .. container:: standout
@@ -18,14 +25,22 @@ Learning Nim
   Examples
   --------
 
-  - | `Nim by Example <http://nim-by-example.github.io/>`_
-    | Nim by Example is an excellent starting place for beginners.
+  .. raw:: html
 
-  - | `Nim on Rosetta Code <http://rosettacode.org/wiki/Category:Nimrod>`_
-    | Many different Nim code examples comparable to other languages for reference.
-
-  - | `Nim for C/C++ Programmers <https://github.com/Araq/Nim/wiki/Nim-for-C-programmers>`_
-    | A useful cheat-sheet for those most familiar with C/C++ languages.
+    <ul class="examples">
+      <li>
+        <a href="http://nim-by-example.github.io">Nim by Example</a><br>
+        <p>Nim by Example is an excellent starting place for beginners.</p>
+      </li>
+      <li>
+        <a href="http://rosettacode.org/wiki/Category:Nimrod">Nim on Rosetta Code</a><br>
+        <p>Many different Nim code examples comparable to other languages for reference.</p>
+      </li>
+      <li>
+        <a href="https://github.com/Araq/Nim/wiki/Nim-for-C-programmers">Nim for C/C++ Programmers</a><br>
+        <p>A useful cheat-sheet for those most familiar with C/C++ languages.</p>
+      </li>
+    </ul>
 
 
 .. container:: standout
@@ -33,8 +48,21 @@ Learning Nim
   Articles
   --------
 
-  - `Dr Dobbs Nimrod Publication <http://www.drdobbs.com/open-source/nimrod-a-new-systems-programming-languag/240165321>`_
-  - `Bootstrapping Nim <http://goran.krampe.se/2014/10/15/bootstrapping-nim/>`_
+  .. raw:: html
+
+    <ul class="articles">
+      <li>
+        <a href="http://www.drdobbs.com/open-source/nimrod-a-new-systems-programming-languag/240165321">Dr Dobbs Nimrod Publication</a><br>
+        <p> </p> <!-- TODO: fix CSS so these empty paragraphs aren't needed --!>
+      </li>
+      <li><a href="http://goran.krampe.se/nim/">Göran Krampe's Nim Articles</a><br><p> </p></li>
+      <li><a href="http://hookrace.net/blog/what-is-special-about-nim/">What is special about Nim?</a><br><p> </p></li>
+      <li><a href="http://hookrace.net/blog/what-makes-nim-practical/">What makes Nim practical?</a><br><p> </p></li>
+      <li><a href="https://akehrer.github.io/nim/2015/01/05/getting-started-with-nim.html">Getting Started With Nim</a><br><p> </p></li>
+      <li><a href="https://akehrer.github.io/nim/2015/01/14/getting-started-with-nim-pt2.html">Getting Started With Nim - Part 2</a><br><p> </p></li>
+      <li><a href="https://akehrer.github.io/nim/2015/01/24/connecting-nim-to-python.html">Connecting Nim to Python</a><br><p> </p></li>
+      <li><a href="http://programmingthomas.com/blog/2015/1/27/nim-on-ios">Nim on iOS</a><br></li>
+    </ul>
 
 
 Documentation