doc: use spdk.io stylesheets

Some styling needs to be applied via the Doxygen stylesheet, since the
class names don't match up with what Bootstrap uses.

Change-Id: Ie7b38259496e262752750235b0630d59b00ae492
Signed-off-by: Daniel Verkamp <daniel.verkamp@intel.com>

doc/footer.html

@@ -8,5 +8,41 @@
 <!--END GENERATE_TREEVIEW-->
 <!--BEGIN !GENERATE_TREEVIEW-->
 <!--END !GENERATE_TREEVIEW-->
+<section id="community">
+  <div class="community">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-6">
+          <h2>Join Our Community:</h2>
+        </div>
+        <div class="col-lg-6">
+          <ul class="list-inline community-box-buttons">
+            <li>
+              <a href="https://01.org/spdk" class="btn btn-default btn-lg">
+                <img class="fa fa-fw" src="http://www.spdk.io/img/ico/01.png"></img>
+                <span class="box-name">01.org</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/spdk/spdk" class="btn btn-default btn-lg">
+                <img class="fa fa-fw" src="http://www.spdk.io/img/ico/github.png"></img>
+                <span class="box-name">github</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  <!-- /.container -->
+  </div>
+</section>
+<!-- /.banner -->
+
+<!-- Footer -->
+<footer>
+  <div class="container text-center">
+    <p class="copyright text-muted small">Copyright &copy; Intel Corporation. All Rights Reserved.</p>
+  </div>
+</footer>
 </body>
 </html>

doc/header.html

@@ -9,10 +9,13 @@
 <!--BEGIN !PROJECT_NAME--><title>$title</title><!--END !PROJECT_NAME-->
 <link href="$relpath^tabs.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="$relpath^jquery.js"></script>
+<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="$relpath^dynsections.js"></script>
 $treeview
 $search
 $mathjax
+<link href="http://www.spdk.io/css/bootstrap.min.css" rel="stylesheet">
+<link href="http://www.spdk.io/css/spdk.css" rel="stylesheet" type="text/css">
 <link href="$relpath^$stylesheet" rel="stylesheet" type="text/css" />
 $extrastylesheet
 </head>
@@ -20,36 +23,18 @@ $extrastylesheet
 <div id="top"><!-- do not remove this div, it is closed by doxygen! -->
 
 <!--BEGIN TITLEAREA-->
-<div id="titlearea">
+<section id="page">
-<table cellspacing="0" cellpadding="0">
+  <div class="page-header">
- <tbody>
+    <div class="container">
- <tr style="height: 56px;">
+      <div class="row">
-  <!--BEGIN PROJECT_LOGO-->
+        <div class="col-lg-12">
-  <td id="projectlogo"><img alt="Logo" src="$relpath^$projectlogo"/></td>
+          <div class="page-title">
-  <!--END PROJECT_LOGO-->
+            <h1>Storage Performance Development Kit</h1>
-  <!--BEGIN PROJECT_NAME-->
+          </div>
-  <td id="projectalign" style="padding-left: 0.5em;">
+        </div>
-   <div id="projectname">$projectname
+      </div>
-   <!--BEGIN PROJECT_NUMBER-->&#160;<span id="projectnumber">$projectnumber</span><!--END PROJECT_NUMBER-->
+    </div>
-   </div>
+  </div>
-   <!--BEGIN PROJECT_BRIEF--><div id="projectbrief">$projectbrief</div><!--END PROJECT_BRIEF-->
+</section>
-  </td>
-  <!--END PROJECT_NAME-->
-  <!--BEGIN !PROJECT_NAME-->
-   <!--BEGIN PROJECT_BRIEF-->
-    <td style="padding-left: 0.5em;">
-    <div id="projectbrief">$projectbrief</div>
-    </td>
-   <!--END PROJECT_BRIEF-->
-  <!--END !PROJECT_NAME-->
-  <!--BEGIN DISABLE_INDEX-->
-   <!--BEGIN SEARCHENGINE-->
-   <td>$searchbox</td>
-   <!--END SEARCHENGINE-->
-  <!--END DISABLE_INDEX-->
- </tr>
- </tbody>
-</table>
-</div>
 <!--END TITLEAREA-->
 <!-- end header part -->

doc/stylesheet.css

@@ -1,22 +1,9 @@
-/* The standard CSS for doxygen 1.8.10 */
-
-body, table, div, p, dl {
-	font: 400 14px/22px Roboto,sans-serif;
-}
-
 /* @group Heading Levels */
 
 h1.groupheader {
 	font-size: 150%;
 }
 
-.title {
-	font: 400 14px/28px Roboto,sans-serif;
-	font-size: 150%;
-	font-weight: bold;
-	margin: 10px 2px;
-}
-
 h2.groupheader {
 	border-bottom: 1px solid #879ECB;
 	color: #354C7B;
@@ -32,19 +19,6 @@ h3.groupheader {
 	font-size: 100%;
 }
 
-h1, h2, h3, h4, h5, h6 {
-	-webkit-transition: text-shadow 0.5s linear;
-	-moz-transition: text-shadow 0.5s linear;
-	-ms-transition: text-shadow 0.5s linear;
-	-o-transition: text-shadow 0.5s linear;
-	transition: text-shadow 0.5s linear;
-	margin-right: 15px;
-}
-
-h1.glow, h2.glow, h3.glow, h4.glow, h5.glow, h6.glow {
-	text-shadow: 0 0 15px cyan;
-}
-
 dt {
 	font-weight: bold;
 }
@@ -107,54 +81,6 @@ div.navtab {
 	margin-right: 15px;
 }
 
-/* @group Link Styling */
-
-a {
-	color: #3D578C;
-	font-weight: normal;
-	text-decoration: none;
-}
-
-.contents a:visited {
-	color: #4665A2;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a.qindex {
-	font-weight: bold;
-}
-
-a.qindexHL {
-	font-weight: bold;
-	background-color: #9CAFD4;
-	color: #ffffff;
-	border: 1px double #869DCA;
-}
-
-.contents a.qindexHL:visited {
-        color: #ffffff;
-}
-
-a.el {
-	font-weight: bold;
-}
-
-a.elRef {
-}
-
-a.code, a.code:visited, a.line, a.line:visited {
-	color: #4665A2; 
-}
-
-a.codeRef, a.codeRef:visited, a.lineRef, a.lineRef:visited {
-	color: #4665A2; 
-}
-
-/* @end */
-
 dl.el {
 	margin-left: -1cm;
 }
@@ -265,16 +191,54 @@ div.groupText {
 	font-style: italic;
 }
 
-body {
+div.contents {
-	background-color: white;
+	margin-right: auto;
-	color: black;
+	margin-left: auto;
-        margin: 0;
+	padding-left: 15px;
+	padding-right: 15px;
+	margin-top: 50px;
+	margin-bottom: 100px;
+	font-size: 18px;
+	font-weight: 400;
 }
 
-div.contents {
+div.header {
-	margin-top: 10px;
+	margin-right: auto;
-	margin-left: 12px;
+	margin-left: auto;
-	margin-right: 8px;
+	padding-left: 15px;
+	padding-right: 15px;
+}
+
+div.headertitle {
+	font-size: 36px;
+	margin-left: 0;
+	margin-right: 0;
+	margin-top: 20px;
+	margin-bottom: 10px;
+}
+
+@media (min-width: 768px) {
+	div.contents, div.header {
+		width: 750px;
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+@media (min-width: 992px) {
+	div.contents, div.header {
+		width:970px;
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+@media (min-width: 1200px) {
+	div.contents, div.header {
+		width: 1170px;
+		padding-left: 0;
+		padding-right: 0;
+	}
 }
 
 td.indexkey {
@@ -1009,20 +973,6 @@ div.ingroups a
 	white-space: nowrap;
 }
 
-div.header
-{
-        background-image:url('nav_h.png');
-        background-repeat:repeat-x;
-	background-color: #F9FAFC;
-	margin:  0px;
-	border-bottom: 1px solid #C4CFE5;
-}
-
-div.headertitle
-{
-	padding: 5px 5px 5px 10px;
-}
-
 dl
 {
         padding: 0 0 0 10px;
@@ -1095,53 +1045,6 @@ dl.section dd {
 	margin-bottom: 6px;
 }
 
-
-#projectlogo
-{
-	text-align: center;
-	vertical-align: bottom;
-	border-collapse: separate;
-}
- 
-#projectlogo img
-{ 
-	border: 0px none;
-}
- 
-#projectalign
-{
-        vertical-align: middle;
-}
-
-#projectname
-{
-	font: 300% Tahoma, Arial,sans-serif;
-	margin: 0px;
-	padding: 2px 0px;
-}
-    
-#projectbrief
-{
-	font: 120% Tahoma, Arial,sans-serif;
-	margin: 0px;
-	padding: 0px;
-}
-
-#projectnumber
-{
-	font: 50% Tahoma, Arial,sans-serif;
-	margin: 0px;
-	padding: 0px;
-}
-
-#titlearea
-{
-	padding: 0px;
-	margin: 0px;
-	width: 100%;
-	border-bottom: 1px solid #5373B4;
-}
-
 .image
 {
         text-align: center;