From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <harry.van.haaren@intel.com>
Received: from mga14.intel.com (mga14.intel.com [192.55.52.115])
 by dpdk.org (Postfix) with ESMTP id C99C8C564
 for <web@dpdk.org>; Fri, 19 Feb 2016 16:57:16 +0100 (CET)
Received: from fmsmga003.fm.intel.com ([10.253.24.29])
 by fmsmga103.fm.intel.com with ESMTP; 19 Feb 2016 07:57:16 -0800
X-ExtLoop1: 1
X-IronPort-AV: E=Sophos;i="5.22,471,1449561600"; 
 d="scan'208,217";a="655716318"
Received: from sie-lab-212-120.ir.intel.com (HELO
 silpixa00394367.ir.intel.com) ([10.237.212.120])
 by FMSMGA003.fm.intel.com with ESMTP; 19 Feb 2016 07:57:15 -0800
From: Harry van Haaren <harry.van.haaren@intel.com>
To: web@dpdk.org
Date: Fri, 19 Feb 2016 15:57:07 +0000
Message-Id: <1455897427-27229-1-git-send-email-harry.van.haaren@intel.com>
X-Mailer: git-send-email 2.5.0
In-Reply-To: <4769307.x4D9cxKz1O@xps13>
References: <4769307.x4D9cxKz1O@xps13>
Subject: [dpdk-web] [PATCH v2] download: add icons to main 3 links
X-BeenThere: web@dpdk.org
X-Mailman-Version: 2.1.15
Precedence: list
List-Id: website maintenance <web.dpdk.org>
List-Unsubscribe: <http://dpdk.org/ml/options/web>,
 <mailto:web-request@dpdk.org?subject=unsubscribe>
List-Archive: <http://dpdk.org/ml/archives/web/>
List-Post: <mailto:web@dpdk.org>
List-Help: <mailto:web-request@dpdk.org?subject=help>
List-Subscribe: <http://dpdk.org/ml/listinfo/web>,
 <mailto:web-request@dpdk.org?subject=subscribe>
X-List-Received-Date: Fri, 19 Feb 2016 15:57:17 -0000

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@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