[dpdk-web] [PATCH] download: add icons to main 3 links
Harry van Haaren
harry.van.haaren at intel.com
Fri Feb 19 15:35:02 CET 2016
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 at 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
More information about the web
mailing list