docs/website: New website

This patch introduces a new buildroot website based on a modern flat
layout inspired by material design.

Each page of the old website is converted to the new css/layout, the
big bump is in main page which is completely rewritten. Content of
the old website is copied more or less verbatim, planning to add more
content in the future.

Signed-off-by: Angelo Compagnucci <angelo.compagnucci@gmail.com>
Signed-off-by: Thomas Petazzoni <thomas.petazzoni@free-electrons.com>
Signed-off-by: Peter Korsgaard <peter@korsgaard.com>

1 files changed, 114 insertions, 64 deletions

diff --git a/docs/website/docs.html b/docs/website/docs.html
index 6edc989cf6..9cee36da28 100644
--- a/docs/website/docs.html
+++ b/docs/website/docs.html
@@ -1,69 +1,119 @@
 <!--#include file="header.html" -->
 
-<div class="row">
-<div class="col-sm-10 col-sm-offset-1">
-
-<h2>Documentation</h2>
-
-<p>The Buildroot user manual is where you want to start reading if you
-wish to understand how Buildroot works, or wish to change/extend/fix
-things. It is available as:</p>
-
-<h4>Latest stable release</h4>
-<ul>
-  <li><a href="/manual.html">Online HTML</a></li>
-  <li><a href="/downloads/manual/manual.pdf">PDF document</a></li>
-  <li><a href="/downloads/manual/manual.text">ASCII text</a></li>
-</ul>
-
-<h4>Nightly build</h4>
-<ul>
-  <li><a href="http://nightly.buildroot.org/manual.html">Online HTML</a></li>
-  <li><a href="http://nightly.buildroot.org/manual.pdf">PDF document</a></li>
-  <li><a href="http://nightly.buildroot.org/manual.text">ASCII text</a></li>
-</ul>
-
-<p>If you find any errors (factual, grammatical, whatever) please
-  report them to us.</p>
-
-<h2>Training</h2>
-
-<p><a href="http://www.free-electrons.com">Free Electrons</a> offers a
-complete <a href="http://free-electrons.com/training/buildroot/">3-days
-training course on Buildroot</a>. They also make the training
-materials freely available:</p>
-
-<ul>
-  <li><a href="http://free-electrons.com/doc/training/buildroot/buildroot-slides.pdf">slides
-      (PDF)</a></li>
-  <li><a href="http://free-electrons.com/doc/training/buildroot/buildroot-labs.pdf">practical
-      labs (PDF)</a></li>
-  <li><a href="http://free-electrons.com/doc/training/buildroot/buildroot-labs.tar.xz">practical
-      labs data (.tar.xz)</a></li>
-</ul>
-
-<h2>Getting support</h2>
-
-<p>If you find that you need help with Buildroot, you can ask for
-help:</p>
-
-<ul>
-
-  <li>On the <a href="support.html">buildroot mailing list</a>
-  at <code>buildroot at buildroot.org</code></li>
-
-  <li>On the <a href="irc://freenode.net/#buildroot">Buildroot IRC
-  channel</a>, <code>#buildroot</code> on Freenode</li>
-
-  <li>On our <a href="https://bugs.buildroot.org">bugtracker</a>.</li>
-
-  <li>Through the various companies offering commercial Buildroot
-  support.</li>
-
-</ul>
-
-</div><!--/.col-sm-10 -->
-</div><!--/.row -->
+<div class="container">
+<div class="row nh">
+<div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
+
+  <div class="panel panel-primary">
+    <div class="panel-heading">Documentation</div>
+    <div class="panel-body">
+      <p>The Buildroot user manual is where you want to start reading if you
+	wish to understand how Buildroot works, or wish to change/extend/fix
+	things. It is available as:</p>
+
+      <div class="row mt centered">
+	<div class="col-sm-4">
+	  <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+	    <div class="flipper">
+	      <div class="front">
+		<a href="/manual.html"><img src="images/browser.png" width="180" alt=""></a>
+	      </div>
+	      <div class="back">
+		<a href="/manual.html"><img src="images/browser.png" width="180" alt=""></a>
+	      </div>
+	    </div>
+	  </div>
+
+	  <h3>HTML <br>
+	    <a href="/manual.html">Stable</a> |
+	    <a href="http://nightly.buildroot.org/manual.html">Nightly</a>
+	  </h3>
+
+	</div>
+
+	<div class="col-sm-4">
+	  <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+	    <div class="flipper">
+	      <div class="front">
+		<img src="images/pdf-icon.png" width="180" alt="">
+	      </div>
+	      <div class="back">
+		<img src="images/pdf-icon.png" width="180" alt="">
+	      </div>
+	    </div>
+	  </div>
+
+	  <h3>PDF <br>
+	    <a href="/downloads/manual/manual.pdf">Stable</a> |
+	    <a href="http://nightly.buildroot.org/manual.pdf">Nightly</a>
+	  </h3>
+
+	</div>
+
+	<div class="col-sm-4">
+	  <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+	    <div class="flipper">
+	      <div class="front">
+		<img src="images/text.png" width="180" alt="">
+	      </div>
+	      <div class="back">
+		<img src="images/text.png" width="180" alt="">
+	      </div>
+	    </div>
+	  </div>
+
+	  <h3>ASCII <br>
+	    <a href="/downloads/manual/manual.text">Stable</a> |
+	    <a href="http://nightly.buildroot.org/manual.text">Nightly</a>
+	  </h3>
+
+	</div>
+      </div>
+
+      <p>If you find any errors (factual, grammatical, whatever) please
+	report them to us.</p>
+    </div>
+  </div>
+
+  <div class="panel panel-primary">
+    <div class="panel-heading">Training</div>
+    <div class="panel-body">
+      <p><a href="http://www.free-electrons.com">Free Electrons</a> offers a
+	complete <a href="http://free-electrons.com/training/buildroot/">3-days
+	  training course on Buildroot</a>. They also make the training
+	materials freely available:</p>
+
+      <div class="row">
+	<div class="col-sm-8">
+	  <div class="panel panel-success">
+	    <div class="panel-heading">Slides preview</div>
+	    <div class="panel-body">
+	      <div id="slides" style="width: 100%; padding-bottom: 75%; position: relative">
+		<a href="http://free-electrons.com/doc/training/buildroot/buildroot-slides.pdf"><img src="images/buildroot-slides.png" alt="buildroot slides" style="position:absolute; width:100%; height:100%; top:0; left:0;"></a>
+	      </div>
+	    </div>
+	  </div>
+	</div>
+
+	<div class="col-sm-4">
+	  <div class="panel panel-default	">
+	    <div class="panel-heading">Training materials</div>
+	    <div class="panel-body">
+	      <ul>
+		<li><a href="http://free-electrons.com/doc/training/buildroot/buildroot-slides.pdf">slides (PDF)</a></li>
+		<li><a href="http://free-electrons.com/doc/training/buildroot/buildroot-labs.pdf">practical labs (PDF)</a></li>
+		<li><a href="http://free-electrons.com/doc/training/buildroot/buildroot-labs.tar.xz">practical labs data (.tar.xz)</a></li>
+	      </ul>
+	    </div>
+	  </div>
+	</div>
+      </div>
+    </div>
+  </div>
+
+</div>
+</div>
+</div>
 
 <!--#include file="footer.html" -->