From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <harry.van.haaren@intel.com>
Received: from mga03.intel.com (mga03.intel.com [134.134.136.65])
 by dpdk.org (Postfix) with ESMTP id 46009C4D2
 for <web@dpdk.org>; Fri, 19 Feb 2016 15:35:09 +0100 (CET)
Received: from fmsmga004.fm.intel.com ([10.253.24.48])
 by orsmga103.jf.intel.com with ESMTP; 19 Feb 2016 06:35:08 -0800
X-ExtLoop1: 1
X-IronPort-AV: E=Sophos;i="5.22,470,1449561600"; d="scan'208,217";a="50908705"
Received: from sie-lab-212-120.ir.intel.com (HELO
 silpixa00394367.ir.intel.com) ([10.237.212.120])
 by fmsmga004.fm.intel.com with ESMTP; 19 Feb 2016 06:35:07 -0800
From: Harry van Haaren <harry.van.haaren@intel.com>
To: web@dpdk.org
Date: Fri, 19 Feb 2016 14:35:02 +0000
Message-Id: <1455892502-14350-1-git-send-email-harry.van.haaren@intel.com>
X-Mailer: git-send-email 2.5.0
Subject: [dpdk-web] [PATCH] 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 14:35:09 -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>
---

There are multiple ways to link to the Google icons, this patch
includes the stylesheet, as it its the most flexible for using
multiple icons.

Other options are to save the SVG code directly in the page
(cannot resize icon easily) or save the .svg to a file and
display it (requires adding each icon to be used manually).
Unless you feel strongly against including the stylesheet,
this is the most effective solution.


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

diff --git a/download.html b/download.html
index 2a1dedf..a86dd2e 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="well">
+						<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="well">
+						<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="well">
+						<i class="material-icons" style="font-size: 4em;">view_list</i><br/>
+						Web Interface and Old Versions</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..252370b 100644
--- a/layout.css
+++ b/layout.css
@@ -82,3 +82,15 @@ footer {
 	color: #aaa;
 	text-shadow: 1px 1px 1px #fff;
 }
+
+.well {
+	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;
+	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3);
+	border-radius: 0.7em 0.7em 0.7em 0.7em;
+	color : #00233b;
+}
-- 
2.5.0