From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <thomas.monjalon@6wind.com>
Received: from mail-wm0-f47.google.com (mail-wm0-f47.google.com [74.125.82.47])
 by dpdk.org (Postfix) with ESMTP id 57AB7C5C0
 for <web@dpdk.org>; Sun, 21 Feb 2016 10:19:14 +0100 (CET)
Received: by mail-wm0-f47.google.com with SMTP id a4so124454364wme.1
 for <web@dpdk.org>; Sun, 21 Feb 2016 01:19:14 -0800 (PST)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
 d=6wind-com.20150623.gappssmtp.com; s=20150623;
 h=from:to:cc:subject:date:message-id:in-reply-to:references;
 bh=wk+GxpBCj13q5AXHATJtyFx4WaifM3ay8KlhamH1NVg=;
 b=uWdXfnH8M8eRWkEorPmNZVNiGz9h4zWmFIi4rB8k4cxycymyQViiSPtb1X/CduJ3lb
 CvAi1mD/wJZ0z/EBGOboEFdSC160CHGqAQZzteD4Rmo4BFmumWMbG0jnfwekEzV/iuLX
 mEZiwIBJaKItPObUiW5Dm8r6dfXjLJFXNlW1Gbl70xMcmjhnQw1QZwMcDjI5tI6Flfl5
 truVFsSaRcE3czk71j2j5mmiywOkr7vhzu5y+nPB/yhlhel0uwlDc9HcSQv2YLKPG4Ta
 uxUlvF/CwTePNYCj9E/IAklKkB55zjqjP9Qdd/W1Fm3eOONYMH778cCeX9GIoGRSaKp7
 vwYA==
X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
 d=1e100.net; s=20130820;
 h=x-gm-message-state:from:to:cc:subject:date:message-id:in-reply-to
 :references;
 bh=wk+GxpBCj13q5AXHATJtyFx4WaifM3ay8KlhamH1NVg=;
 b=HFuDrPVRmUPd3ybxkinSClKG8g4kHYxIyPQOFR+CxGM82F49du0Ccs5gPfIBqXfS5d
 lPQfIlgYHG7BWhkI0WEqfK6hPPdO5c/l4aP25AyJx5mt/9bAf2KKITBQP6lo4rNBlmX9
 Mx1kyIwX5Kx8n9AyYvXdusOfVUvVJM+TBYGr7s0Vrn3pZBz0vwUVpI4B9USqgcdHxuTM
 Mv8SZBOIsZAt1R3+r9hXMj+vS/DqRs8SpDh7cter/P951mrZsLqH5bSL+FFZK1d4DmuZ
 KCzwXz1ETwGEGPWw/mkMLerhJ1Zz2HlEQPQYVymct62Z31INg9xXj9rFl5eBdDsvFrf6
 O9FA==
X-Gm-Message-State: AG10YOR5uRpvVhZ/2/JT6ugZwrsJdNRQackogNDg4vnFen+bRsFM61vItY5ijZtERUWLs4tu
X-Received: by 10.28.226.212 with SMTP id z203mr6403258wmg.78.1456046354130;
 Sun, 21 Feb 2016 01:19:14 -0800 (PST)
Received: from XPS13.localdomain (171.36.101.84.rev.sfr.net. [84.101.36.171])
 by smtp.gmail.com with ESMTPSA id
 fv6sm15580616wjc.12.2016.02.21.01.19.12
 (version=TLSv1/SSLv3 cipher=OTHER);
 Sun, 21 Feb 2016 01:19:13 -0800 (PST)
From: Thomas Monjalon <thomas.monjalon@6wind.com>
To: harry.van.haaren@intel.com
Date: Sun, 21 Feb 2016 10:17:30 +0100
Message-Id: <1456046251-18979-1-git-send-email-thomas.monjalon@6wind.com>
X-Mailer: git-send-email 2.7.0
In-Reply-To: <1455901242-19555-1-git-send-email-thomas.monjalon@6wind.com>
References: <1455901242-19555-1-git-send-email-thomas.monjalon@6wind.com>
Cc: web@dpdk.org
Subject: [dpdk-web] [PATCH v4 1/2] add icons in download page
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: Sun, 21 Feb 2016 09:19:14 -0000

From: Harry van Haaren <harry.van.haaren@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@intel.com>
Signed-off-by: Thomas Monjalon <thomas.monjalon@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