From: Thomas Monjalon <thomas.monjalon@6wind.com>
To: harry.van.haaren@intel.com
Cc: web@dpdk.org
Subject: [dpdk-web] [PATCH v3] add icons in download page
Date: Fri, 19 Feb 2016 18:00:42 +0100 [thread overview]
Message-ID: <1455901242-19555-1-git-send-email-thomas.monjalon@6wind.com> (raw)
In-Reply-To: <1455897427-27229-1-git-send-email-harry.van.haaren@intel.com>
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 | 19 ++++++++++++++++---
2 files changed, 36 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
diff --git a/content.css b/content.css
index 103fbf4..8cfcbeb 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-top: 1em;
+ padding-bottom: 1em;
+ 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 {
+ 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..0c79b1c 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,21 @@
</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 class="button" style="width: 30%; margin-right: 4%;"
+ href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">
+ <i class="material-icons" style="font-size: 4em;">archive</i><br>
+ Latest Version: 2.2.0
+ </a>
+ <a class="button" style="width: 30%; margin-right: 4%;"
+ href="/doc/quick-start">
+ <i class="material-icons" style="font-size: 4em;">access_time</i><br>
+ Quick Start Instructions
+ </a>
+ <a class="button" style="width: 30%;"
+ href="/browse/dpdk/refs/">
+ <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
next prev parent reply other threads:[~2016-02-19 17:02 UTC|newest]
Thread overview: 10+ messages / expand[flat|nested] mbox.gz Atom feed top
2016-02-19 14:35 [dpdk-web] [PATCH] download: add icons to main 3 links Harry van Haaren
2016-02-19 15:36 ` Thomas Monjalon
2016-02-19 15:41 ` Thomas Monjalon
2016-02-19 15:57 ` [dpdk-web] [PATCH v2] " Harry van Haaren
2016-02-19 17:00 ` Thomas Monjalon [this message]
2016-02-21 9:17 ` [dpdk-web] [PATCH v4 1/2] add icons in download page Thomas Monjalon
2016-02-21 9:17 ` [dpdk-web] [PATCH v4 2/2] indent apps and tools Thomas Monjalon
2016-02-22 11:51 ` Van Haaren, Harry
2016-02-22 11:50 ` [dpdk-web] [PATCH v4 1/2] add icons in download page Van Haaren, Harry
2016-02-24 12:51 ` Thomas Monjalon
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=1455901242-19555-1-git-send-email-thomas.monjalon@6wind.com \
--to=thomas.monjalon@6wind.com \
--cc=harry.van.haaren@intel.com \
--cc=web@dpdk.org \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for NNTP newsgroup(s).