[dpdk-web] [PATCH v2] download: add icons to main 3 links

[Harry van Haaren]

This patch integrates icons from the Google material icon set
for the download, quick-start, and web-browsing links.

The links are layed out using panes horizontally, and re-ordered:
Download | Quick Start | Older versions and Web interface

defines a new .well CSS attribute for panes behind icons.

Signed-off-by: Harry van Haaren <harry.van.haaren at intel.com>
---

v2:
-Renamed well to button
-Updated "Other Version & Git" name
-Added Orange hover effect
-Added margin below buttons

 download.html | 22 +++++++++++++++++++---
 layout.css    | 22 ++++++++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/download.html b/download.html
index 2a1dedf..262cfe7 100644
--- a/download.html
+++ b/download.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="/reset.css" />
 		<link rel="stylesheet" href="/layout.css" />
 		<link rel="stylesheet" href="/content.css" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 		<script type="text/javascript">
 			var _gaq = _gaq || [];
 			_gaq.push(['_setAccount', 'UA-39229303-1']);
@@ -38,9 +39,24 @@
 		</header>
 		<section>
 			<h2>Download</h2>
-			<p>Latest version: <a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">2.2.0</a>.</p>
-			<p>Other versions and formats are available from the <a href="/browse/dpdk/refs/">browsing interface</a>.</p>
-			<p>Once downloaded, follow the <a href="/doc/quick-start">quick start instructions</a> to build and run a first test.</p>
+			<div style="position: relative;">
+				<a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">
+					<div style="position: relative; width: 33%; float: left;"><div class="button">
+						<i class="material-icons" style="font-size: 4em;">archive</i><br/>
+						Latest Version: 2.2.0</div></div>
+				</a>
+				<a href="/doc/quick-start">
+					<div  style="position: relative; width: 33%; float: left;"><div class="button">
+						<i class="material-icons" style="font-size: 4em;">access_time</i><br/>
+						Quick Start Instructions</div></div>
+				</a>
+				<a href="/browse/dpdk/refs/">
+					<div style="position: relative; width: 33%; float: left;"><div class="button">
+						<i class="material-icons" style="font-size: 4em;">view_list</i><br/>
+						Other Versions & Git</div></div>
+				</a>
+			</div>
+
 			<h3>Applications</h3>
 			<ul>
 				<li><a href="/browse/apps/pktgen-dpdk/refs/">pktgen-dpdk (traffic generator)</a></li>
diff --git a/layout.css b/layout.css
index df9e220..b06650e 100644
--- a/layout.css
+++ b/layout.css
@@ -82,3 +82,25 @@ footer {
 	color: #aaa;
 	text-shadow: 1px 1px 1px #fff;
 }
+
+.button {
+	background-color: rgba(0, 35, 60, 0.07);
+	text-align: center;
+	padding-top: 1em;
+	padding-bottom: 1em;
+	margin-left: 0.7em;
+	margin-right: 0.7em;
+	margin-bottom: 1.4em;
+	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3);
+	border-radius: 0.7em 0.7em 0.7em 0.7em;
+	color : #00233b;
+}
+
+.button:hover {
+	color: #fff;
+	background-color: #ef4e22;
+	-webkit-transition: background-color .08s linear;
+	-moz-transition: background-color .08s linear;
+	-o-transition: background-color .08s linear;
+	transition: background-color .08s linear;
+}
-- 
2.5.0