docs: responsive web design website

This patch migrate the layout to a responsive web design one.

* Fixing the layout of all pages to be fully responsive
* Adding panels around "Recent commints" and "Recent discussion"
* Adding fonts for glyphs in buttons

Signed-off-by: Angelo Compagnucci <angelo.compagnucci@gmail.com>
Signed-off-by: Thomas Petazzoni <thomas.petazzoni@free-electrons.com>
This commit is contained in:
Angelo Compagnucci 2014-10-31 16:50:51 +01:00 committed by Thomas Petazzoni
parent e40b9791d8
commit da9ab5e290
14 changed files with 232 additions and 163 deletions

View File

@ -1,8 +1,12 @@
<!--#include file="header.html" --> <!--#include file="header.html" -->
<div align="center"> <div class="row">
<img src="images/menuconfig.png" width="340" height="220" alt="Buildroot menuconfig" border="0"> <div class="col-sm-6 col-sm-offset-3" style="padding-bottom:10px">
</div> <img class="center-block" src="images/menuconfig.png"
style="max-width:100%;"
alt="Buildroot menuconfig" border="0">
</div>
<div class="col-sm-10 col-sm-offset-1">
<p>Buildroot is a set of Makefiles and patches that makes it easy to <p>Buildroot is a set of Makefiles and patches that makes it easy to
generate a complete embedded Linux system. Buildroot can generate any generate a complete embedded Linux system. Buildroot can generate any
@ -52,4 +56,7 @@ cross-compilation process.</p>
GENERAL PUBLIC LICENSE V2 (Or later)</a>. Stable releases are GENERAL PUBLIC LICENSE V2 (Or later)</a>. Stable releases are
delivered every three months.</p> delivered every three months.</p>
</div><!--/.col-sm-10 -->
</div><!--/.row -->
<!--#include file="footer.html" --> <!--#include file="footer.html" -->

View File

@ -1,5 +1,8 @@
<!--#include file="header.html" --> <!--#include file="header.html" -->
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h2>Contribute</h2> <h2>Contribute</h2>
<p>Buildroot is an open source project and you are very welcome to contribute to <p>Buildroot is an open source project and you are very welcome to contribute to
@ -29,4 +32,7 @@ Contributing to buildroot</a> chapter in the Buildroot manual. Thanks for your h
<p>If you need any support yourself, have a look at <a href="./support.html"> <p>If you need any support yourself, have a look at <a href="./support.html">
Support</a>.</p> Support</a>.</p>
</div><!--/.col-sm-10 -->
</div><!--/.row -->
<!--#include file="footer.html" --> <!--#include file="footer.html" -->

View File

@ -14,23 +14,33 @@ body {
div.sponsor-main { div.sponsor-main {
background: #eeeeee; background: #eeeeee;
padding: 2em; padding-top: 2em;
padding-bottom: 2em;
} }
div.sponsor { div.sponsor {
background: #eeeeee;
padding: 0.5em; padding: 0.5em;
height: 12em; height: 12em;
display: table !important; display: table !important;
} }
div.sponsor-description { div.sponsor-description {
background: #eeeeee;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
} }
div.sponsor-description img { div.sponsor-description img {
max-width: 99%;
height: 4em; height: 4em;
margin-bottom: 1em; margin-bottom: 1em;
} }
div.panel-body p {
text-overflow: ellipsis;
width: 95%;
white-space: nowrap;
overflow: hidden;
height: 1.5em;
}

View File

@ -1,5 +1,8 @@
<!--#include file="header.html" --> <!--#include file="header.html" -->
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h2>Documentation</h2> <h2>Documentation</h2>
<p>The Buildroot user manual is where you want to start reading if you <p>The Buildroot user manual is where you want to start reading if you
@ -41,5 +44,8 @@ help:</p>
</ul> </ul>
</div><!--/.col-sm-10 -->
</div><!--/.row -->
<!--#include file="footer.html" --> <!--#include file="footer.html" -->

View File

@ -1,5 +1,8 @@
<!--#include file="header.html" --> <!--#include file="header.html" -->
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h2>Download</h2> <h2>Download</h2>
<p> <p>
@ -83,4 +86,7 @@ Because you've only been granted anonymous access to the tree, you won't be
able to push your changes to the repo. Changes can instead be submitted for able to push your changes to the repo. Changes can instead be submitted for
inclusion by posting them to the buildroot mailing list. inclusion by posting them to the buildroot mailing list.
</div><!--/.col-sm-10 -->
</div><!--/.row -->
<!--#include file="footer.html" --> <!--#include file="footer.html" -->

Binary file not shown.

View File

@ -1,5 +1,5 @@
</div> <!-- /container --> </div> <!-- /container -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/buildroot.js"></script> <script type="text/javascript" src="js/buildroot.js"></script>

View File

@ -1,5 +1,7 @@
<!--#include file="header.html" --> <!--#include file="header.html" -->
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h3>Git Access</h3> <h3>Git Access</h3>
@ -39,5 +41,8 @@ Because you've only been granted anonymous access to the tree, you won't be
able to push your changes to the repo. Changes can instead be submitted for able to push your changes to the repo. Changes can instead be submitted for
inclusion by posting them to the buildroot mailing list. inclusion by posting them to the buildroot mailing list.
</div><!--/.col-sm-10 -->
</div><!--/.row -->
<!--#include file="footer.html" --> <!--#include file="footer.html" -->

View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Buildroot: making embedded Linux easy</title> <title>Buildroot: making embedded Linux easy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="The Buildroot developers"> <meta name="author" content="The Buildroot developers">
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
@ -14,21 +14,24 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<div class="navbar navbar-fixed-top"> <nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner"> <div class="row">
<div class="container"> <div class="col-sm-10 col-sm-offset-1">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <div class="navbar-header">
<span class="icon-bar"></span> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#buildroot-navbar-collapse-1">
<span class="icon-bar"></span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> <span class="icon-bar"></span>
<a class="brand" href="/">Buildroot</a> <span class="icon-bar"></span>
<div class="nav-collapse"> </button>
<ul class="nav"> <a class="navbar-brand" href="/">Buildroot</a>
</div>
<div class="collapse navbar-collapse" id="buildroot-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/news.html">News</a></li> <li><a href="/news.html">News</a></li>
<li><a href="/about.html">About</a></li> <li><a href="/about.html">About</a></li>
<li><a href="/download.html">Download</a></li> <li><a href="/download.html">Download</a></li>
@ -42,6 +45,5 @@
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
</div> </div>
</div> </nav>
<div class="container"> <div class="container-fluid">

View File

@ -1,33 +1,46 @@
<!--#include file="header.html" --> <!--#include file="header.html" -->
<div class="row">
<div class="hero-unit"> <div class="container" style="width:100%">
<div class="row-fluid"> <div class="col-sm-10 col-sm-offset-1 jumbotron">
<img src="images/logo.png" height="170" width="170" style="float: right;" <div class="row">
alt="Buildroot logo" /> <div class="col-sm-9">
<div class="span8"> <h1>Buildroot<br/><small>Making Embedded Linux Easy</small></h1>
<h1>Buildroot<br/><small>Making Embedded Linux Easy</small></h1> <p>Buildroot is a simple, efficient and easy-to-use tool to generate
<p>Buildroot is a simple, efficient and easy-to-use tool to generate embedded Linux systems through cross-compilation.</p>
embedded Linux systems through cross-compilation.</p>
</div>
<div class="button_column pull-right">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<a class="btn btn-primary btn-large" href="/about.html">Learn more &raquo;</a>
</div> </div>
<div class="btn-group"> <div class="col-sm-3">
<a class="btn btn-primary btn-large" href="/download.html">Download &raquo;</a> <img src="images/logo.png" class="center-block" style="width:170px; heigth:170px;"
alt="Buildroot logo" />
</div>
</div>
<div class="row">
<div class="col-sm-offset-5 col-sm-7">
<div class="col-sm-6" style="margin-top:1em; padding-left:0px;">
<a class="btn btn-primary btn-lg" style="width:100%;" href="/about.html"><span class="glyphicon glyphicon-info-sign"></span> Learn more »</a>
</div>
<div class="col-sm-6" style="margin-top:1em; padding-left:0px;">
<a class="btn btn-primary btn-lg" style="width:100%;"href="/download.html"><span class="glyphicon glyphicon-cloud-download"></span> Download »</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row" style="line-height: 17px;"> <div class="row">
<div class="span6" id="commit-activity"> <div class="col-sm-5 col-sm-offset-1">
<a href="http://git.buildroot.net/buildroot"><h2>Recent commits</h2></a> <div class="panel panel-default">
<div class="panel-body" id="commit-activity">
<a href="http://git.buildroot.net/buildroot"><h2>Recent commits</h2></a>
</div>
</div>
</div> </div>
<div class="span6" id="mailing-list-activity"> <div class="col-sm-5" >
<a href="http://dir.gmane.org/gmane.comp.lib.uclibc.buildroot"><h2>Recent discussions</h2></a> <div class="panel panel-default" style="min-height: 22em;">
<div class="panel-body" id="mailing-list-activity">
<a href="http://dir.gmane.org/gmane.comp.lib.uclibc.buildroot"><h2>Recent discussions</h2></a>
</div>
</div>
</div> </div>
</div> </div>

View File

@ -11,17 +11,12 @@ function load_activity(feedurl, divid) {
if (entry.title.indexOf("git commit") != -1) if (entry.title.indexOf("git commit") != -1)
continue; continue;
loaded += 1; loaded += 1;
if (loaded >= nb_display) if (loaded > nb_display)
break; break;
var div = document.createElement("p"); var div = document.createElement("p");
var link = document.createElement("a"); var link = document.createElement("a");
var d = new Date(entry.publishedDate); var d = new Date(entry.publishedDate);
var data = '[' + d.toLocaleDateString() + '] ' + entry.title var data = '[' + d.toLocaleDateString() + '] ' + entry.title
// Ensure all titles are the same length
if (data.length > 60) {
data = data.substr(0, 57)
data += '...'
}
var text = document.createTextNode(data); var text = document.createTextNode(data);
link.appendChild(text); link.appendChild(text);
link.title = entry.title; link.title = entry.title;
@ -29,6 +24,10 @@ function load_activity(feedurl, divid) {
div.appendChild(link); div.appendChild(link);
container.appendChild(div); container.appendChild(div);
} }
var empty = nb_display - loaded;
for (var i = 0; i < empty; i++) {
container.appendChild(document.createElement("p"));
}
console.log(loaded); console.log(loaded);
} }
}); });

View File

@ -1,5 +1,8 @@
<!--#include file="header.html" --> <!--#include file="header.html" -->
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h2>News</h2> <h2>News</h2>
<p> <p>
@ -1314,5 +1317,8 @@
</ul> </ul>
</div><!--/.col-sm-10 -->
</div><!--/.row -->
<!--#include file="footer.html" --> <!--#include file="footer.html" -->

View File

@ -1,146 +1,149 @@
<!--#include file="header.html" --> <!--#include file="header.html" -->
<h2>Sponsors</h2> <div class="row"><!-- current sponsor row -->
<div class="col-sm-10 col-sm-offset-1">
<h2>Sponsors</h2>
<h3>Current sponsors</h3> <h3>Current sponsors</h3>
<div class="container">
<div class="row-fluid">
<div class="span12 sponsor-main">
<div class="row-fluid">
<div class="span4">
<a href="http://mind.be">
<img src="images/mind-logo.png"/>
</a>
</div>
<div class="span8">
<p><a href="http://www.mind.be">Mind</a> is the Embedded
Software division of Essensium, which provides consultancy
and services specifically in the field of Linux and Open
Source SW for Embedded Systems.</p>
<p>Mind is sponsoring
the <a href="http://elinux.org/Buildroot:DeveloperDaysELCE2014">Buildroot
Developers Meeting</a> colocated with the Embedded Linux
Conference Europe, taking place on October 11-12 2014 in
Düsseldorf, Germany. Mind is helping with the logistics of
the meeting room, as well as the Saturday dinner for the
participants.</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
<h3>Past sponsors</h3> <div class="row"><!-- main sponsor row -->
<div class="col-sm-10 col-sm-offset-1">
<p>Throughout its history, the Buildroot project has been sponsored by <div class="col-sm-12 sponsor-main">
various companies, that we would like to thank below.</p> <div class="col-sm-4">
<a href="http://mind.be">
<div class="container"> <img src="images/mind-logo.png"/>
<div class="row-fluid"> </a>
<div class="span4 sponsor">
<div class="sponsor-description">
<a href="http://www.mind.be">
<img src="images/mind-logo.png" alt="Mind" title="Mind"/>
</a><br/>
<a href="http://www.mind.be">Mind</a> sponsored the dinner of
the FOSDEM 2014 Developers Meeting.
</div> </div>
</div> <div class="col-sm-8">
<div class="span4 sponsor"> <p><a href="http://www.mind.be">Mind</a> is the Embedded
<div class="sponsor-description"> Software division of Essensium, which provides consultancy
<a href="http://www.google.com"> and services specifically in the field of Linux and Open
<img src="images/google-logo.png" alt="Google" title="Google"/> Source SW for Embedded Systems.</p>
</a>
<br/> <p>Mind is sponsoring
<a href="http://www.google.com">Google</a> provided the the <a href="http://elinux.org/Buildroot:DeveloperDaysELCE2014">Buildroot
logistics for the FOSDEM 2013 and FOSDEM 2014 Developer Days in Developers Meeting</a> colocated with the Embedded Linux
Brussels, Belgium. Conference Europe, taking place on October 11-12 2014 in
</div> Düsseldorf, Germany. Mind is helping with the logistics of
</div> the meeting room, as well as the Saturday dinner for the
<div class="span4 sponsor"> participants.</p>
<div class="sponsor-description">
<a href="http://www.imgtec.com/">
<img src="images/imgtec-logo.png" alt="Imagination Technologies" title="Imagination Technologies"/>
</a>
<br/>
<a href="http://www.imgtec.com/">Imagination Technologies</a>
sponsored the meeting room and dinner of the ELCE 2013
Developer Days in Edinburgh, UK.
</div> </div>
</div> </div>
</div> </div>
</div><!-- /main sponsor row -->
<div class="row-fluid" style="margin-top: 1em;"> <div class="row"><!-- past sponsor row -->
<div class="span4 sponsor"> <div class="col-sm-10 col-sm-offset-1">
<h3>Past sponsors</h3>
<p>Throughout its history, the Buildroot project has been sponsored by
various companies, that we would like to thank below.</p>
</div>
</div><!--/past sponsor row -->
<div class="row"><!-- past sponsors row 1-->
<div class="col-sm-10 col-sm-offset-1">
<div class="col-xs-12 col-sm-4 sponsor">
<div class="sponsor-description"> <div class="sponsor-description">
<a href="http://circuitco.com/"> <a href="http://www.mind.be">
<img src="images/circuitco-logo.png" alt="CircuitCo" title="CircuitCo"/> <img src="images/mind-logo.png" alt="Mind" title="Mind"/>
</a> </a><br/>
<br/> <a href="http://www.mind.be">Mind</a> sponsored the dinner of
<a href="http://circuitco.com/">CircuitCo</a> sponsored the FOSDEM 2014 Developers Meeting.
several development boards for the Google Summer of Code
2013 project on Buildroot.
</div> </div>
</div> </div>
<div class="span4 sponsor"> <div class="col-xs-12 col-sm-4 sponsor">
<div class="sponsor-description"> <div class="sponsor-description">
<a href="http://boundarydevices.com/"> <a href="http://www.google.com">
<img src="images/boundary-devices-logo.png" alt="Boundary Devices" title="Boundary Devices"/> <img src="images/google-logo.png" alt="Google" title="Google"/>
</a> </a><br/>
<br/> <a href="http://www.google.com">Google</a> provided the
<a href="http://boundarydevices.com/">BoundaryDevices</a> logistics for the FOSDEM 2013 and FOSDEM 2014 Developer Days in
sponsored an i.MX6 development board for the Google Summer of Brussels, Belgium.
Code 2013 project on Buildroot.
</div> </div>
</div> </div>
<div class="span4 sponsor"> <div class="col-xs-12 col-sm-4 sponsor">
<div class="sponsor-description"> <div class="sponsor-description">
<a href="http://www.fluendo.com/"> <a href="http://www.imgtec.com/">
<img src="images/fluendo-logo.png" alt="Fluendo" title="Fluendo"/> <img src="images/imgtec-logo.png" alt="Imagination Technologies" title="Imagination Technologies"/>
</a> </a><br/>
<br/> <a href="http://www.imgtec.com/">Imagination Technologies</a>
<a href="http://www.fluendo.com/">Fluendo</a> sponsored the sponsored the meeting room and dinner of the ELCE 2013
meeting room for the ELCE 2012 Developer Days in Barcelona Developer Days in Edinburgh, UK.
Spain.
</div> </div>
</div> </div>
</div> </div>
<div class="row-fluid" style="margin-top: 1em;"> </div><!--/past sponsors row 1-->
<div class="span4 sponsor">
<div class="row"><!-- past sponsors row 2-->
<div class="col-sm-10 col-sm-offset-1">
<div class="col-xs-12 col-sm-4 sponsor">
<div class="sponsor-description"> <div class="sponsor-description">
<a href="http://www.synopsys.com"> <a href="http://circuitco.com/">
<img src="images/synopsys-logo.png" alt="Synopsys" title="Synopsys"/> <img src="images/circuitco-logo.png" alt="CircuitCo" title="CircuitCo"/>
</a> </a><br/>
<br/> <a href="http://circuitco.com/">CircuitCo</a> sponsored
<a href="http://www.synopsys.com">Synopsys</a> sponsored the several development boards for the Google Summer of Code
dinner for the ELCE 2012 Developer Days in Barcelona, Spain. 2013 project on Buildroot.
</div> </div>
</div> </div>
<div class="span4 sponsor"> <div class="col-xs-12 col-sm-4 sponsor">
<div class="sponsor-description"> <div class="sponsor-description">
<a href="http://www.calao-systems.com/"> <a href="http://boundarydevices.com/">
<img src="images/calao-logo.png"/ alt="Calao Systems" title="Calao Systems"> <img src="images/boundary-devices-logo.png" alt="Boundary Devices" title="Boundary Devices"/>
</a> </a><br/>
<br/> <a href="http://boundarydevices.com/">BoundaryDevices</a>
<a href="http://www.calao-systems.com/">Calao Systems</a> sponsored an i.MX6 development board for the Google Summer of
provided a a meeting room for the ELCE 2009 Developer Days Code 2013 project on Buildroot.
in Grenoble, France.
</div> </div>
</div> </div>
<div class="span4 sponsor"> <div class="col-xs-12 col-sm-4 sponsor">
<div class="sponsor-description"> <div class="sponsor-description">
<a href="http://www.free-electrons.com"> <a href="http://www.fluendo.com/">
<img src="images/free-electrons-logo.png" alt="Free Electrons" title="Free Electrons"/> <img src="images/fluendo-logo.png" alt="Fluendo" title="Fluendo"/>
</a> </a><br/>
<br/> <a href="http://www.fluendo.com/">Fluendo</a> sponsored the
<a href="http://www.free-electrons.com">Free Electrons</a> meeting room for the ELCE 2012 Developer Days in Barcelona
sponsored the lunch for the ELCE 2009 Developer Days in Spain.
Grenoble, France.
</div> </div>
</div> </div>
</div> </div>
</div> </div><!--/past sponsors row 2-->
<div class="row"><!-- past sponsors row 3-->
<div class="col-sm-10 col-sm-offset-1">
<div class="col-xs-12 col-sm-4 sponsor">
<div class="sponsor-description">
<a href="http://www.synopsys.com">
<img src="images/synopsys-logo.png" alt="Synopsys" title="Synopsys"/>
</a><br/>
<a href="http://www.synopsys.com">Synopsys</a> sponsored the
dinner for the ELCE 2012 Developer Days in Barcelona, Spain.
</div>
</div>
<div class="col-xs-12 col-sm-4 sponsor">
<div class="sponsor-description">
<a href="http://www.calao-systems.com/">
<img src="images/calao-logo.png"/ alt="Calao Systems" title="Calao Systems">
</a><br/>
<a href="http://www.calao-systems.com/">Calao Systems</a>
provided a a meeting room for the ELCE 2009 Developer Days
in Grenoble, France.
</div>
</div>
<div class="col-xs-12 col-sm-4 sponsor">
<div class="sponsor-description">
<a href="http://www.free-electrons.com">
<img src="images/free-electrons-logo.png" alt="Free Electrons" title="Free Electrons"/>
</a><br/>
<a href="http://www.free-electrons.com">Free Electrons</a>
sponsored the lunch for the ELCE 2009 Developer Days in
Grenoble, France.
</div>
</div>
</div>
</div><!--/past sponsors row 3-->
<!--#include file="footer.html" --> <!--#include file="footer.html" -->

View File

@ -1,5 +1,8 @@
<!--#include file="header.html" --> <!--#include file="header.html" -->
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h2>Support</h2> <h2>Support</h2>
<p>You can get support for Buildroot through three main channels:</p> <p>You can get support for Buildroot through three main channels:</p>
@ -42,4 +45,7 @@ participate to find solutions to existing problems.</p>
<p>Note: patches are only accepted through the mailing list.</p> <p>Note: patches are only accepted through the mailing list.</p>
</div><!--/.col-sm-10 -->
</div><!--/.row -->
<!--#include file="footer.html" --> <!--#include file="footer.html" -->