[dpdk-web] [PATCH v4 1/2] add icons in download page

[Thomas Monjalon]

From: Harry van Haaren <harry.van.haaren at intel.com>

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

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

Defines a new .button CSS attribute for panes behind icons.

Signed-off-by: Harry van Haaren <harry.van.haaren at intel.com>
Signed-off-by: Thomas Monjalon <thomas.monjalon at 6wind.com>
---
 content.css   | 20 ++++++++++++++++++++
 download.html | 16 +++++++++++++---
 2 files changed, 33 insertions(+), 3 deletions(-)

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

v3:
- Moved button style from layout.css to content.css
- Used inline-block instead of nested float divs
- Removed margins before the first and after the last button

v4:
- Removed underline in button hover
- Removed whitespace pixels between buttons
- Reduced size of buttons
- Used whole width for buttons

diff --git a/content.css b/content.css
index 103fbf4..0069355 100644
--- a/content.css
+++ b/content.css
@@ -63,3 +63,23 @@ section#ml td {
 section#ml th {
 	text-align: right;
 }
+
+section .button {
+	display: inline-block;
+	background-color: rgba(0, 35, 60, 0.07);
+	text-align: center;
+	padding: 1em 0;
+	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3);
+	border-radius: 0.7em 0.7em 0.7em 0.7em;
+	color : #00233b;
+}
+
+section .button:hover {
+	text-decoration: none;
+	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;
+}
diff --git a/download.html b/download.html
index 2a1dedf..6a4e5ae 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,18 @@
 		</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>
+			<a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz" class="button" style="width: 28%;">
+				<i class="material-icons" style="font-size: 4em;">archive</i><br>
+				Latest Version: 2.2.0
+			</a><!-- no whitespace
+			--><a href="/doc/quick-start" class="button" style="width: 28%; margin: 0 8%;">
+				<i class="material-icons" style="font-size: 4em;">access_time</i><br>
+				Quick Start Instructions
+			</a><!-- no whitespace
+			--><a href="/browse/dpdk/refs/" class="button" style="width: 28%;">
+				<i class="material-icons" style="font-size: 4em;">view_list</i><br>
+				Other Versions & Git
+			</a>
 			<h3>Applications</h3>
 			<ul>
 				<li><a href="/browse/apps/pktgen-dpdk/refs/">pktgen-dpdk (traffic generator)</a></li>
-- 
2.7.0