Merge pull request #1215 from marianoguerra/improve-docs-style

Merge PR-1215 from 'marianoguerra/improve-docs-style'

OTP-14371
Improve Documentation Style

4 files changed, 101 insertions, 115 deletions

diff --git a/system/doc/top/src/erl_html_tools.erl b/system/doc/top/src/erl_html_tools.erl
index d55c2e1164..28a0649658 100644
--- a/system/doc/top/src/erl_html_tools.erl
+++ b/system/doc/top/src/erl_html_tools.erl
@@ -387,9 +387,7 @@ subst("#copyright#", _Info, _Group) ->
     "copyright  Copyright © 1991-2004";
 subst("#groups#", Info, _Group) ->
     [
-     "<table border=0 width=\"90%\" cellspacing=3 cellpadding=5>\n",
-     subst_groups(Info),
-     "</table>\n"
+     subst_groups(Info)
     ];
 subst("#applinks#", Info, Group) ->
     subst_applinks(Info, Group);
@@ -476,16 +474,10 @@ subst_unknown_groups([{_Group,Heading,Apps} | Groups], Text0, Left) ->
 
 
 group_table(Heading,Apps) ->
-    [
-     "  <tr>\n",
-     "    <td colspan=2 class=header>\n",
-     "      <font size=\"+1\"><b>",Heading,"</b></font>\n",
-     "    </td>\n",
-     "  </tr>\n",
+    ["<h2>",Heading,"</h2>",
+     "<table class=\"group-table\">\n",
      subst_apps(Apps),
-     "  <tr>\n",
-     "    <td colspan=2><font size=1>&nbsp;</font></td>\n",
-     "  </tr>\n"
+     "</table>\n"
     ].
 
 % Count and split the applications in half to get the right sort
@@ -500,17 +492,11 @@ subst_apps([]) ->
 subst_app(App, [{VSN,_Path,Link,Text}]) ->
     [
      "  <tr class=app>\n",
-     "    <td align=left valign=top>\n",
-     "      <table border=0 width=\"100%\" cellspacing=0 cellpadding=0>\n",
-     "        <tr class=app>\n",
-     "          <td align=left valign=top>\n",
+     "    <td>\n",
      "            <a href=\"",Link,"\" target=\"_top\">",uc(App),"</a>\n",
      "            <a href=\"",Link,"\" target=\"_top\">",VSN,"</a>\n",
-     "          </td>\n",
-     "        </tr>\n",
-     "      </table>\n"
      "    </td>\n",
-     "    <td align=left valign=top>\n",
+     "    <td>\n",
      Text,"\n",
      "    </td>\n",
      "  </tr>\n"
@@ -518,27 +504,14 @@ subst_app(App, [{VSN,_Path,Link,Text}]) ->
 subst_app(App, [{VSN,_Path,Link,Text} | VerInfos]) ->
     [
      "  <tr class=app>\n",
-     "    <td align=left valign=top>\n",
-     "      <table border=0 width=\"100%\" cellspacing=0 cellpadding=0>\n",
-     "        <tr class=app>\n",
-     "          <td align=left valign=top>\n",
+     "    <td>\n",
      "            <a href=\"",Link,"\" target=\"_top\">",uc(App),
-     "</a>&nbsp;&nbsp;<br>\n",
+     "</a>\n",
      "            <a href=\"",Link,"\" target=\"_top\">",VSN,"</a>\n",
-     "          </td>\n",
-     "          <td align=right valign=top width=50>\n",
-     "            <table border=0 width=40 cellspacing=0 cellpadding=0>\n",
-     "              <tr class=app>\n",
-     "                <td align=left valign=top class=appnums>\n",
+     "                <td class=appnums>\n",
      subst_vsn(VerInfos),
-     "                </td>\n",
-     "              </tr>\n",
-     "            </table>\n"
-     "          </td>\n",
-     "        </tr>\n",
-     "      </table>\n"
      "    </td>\n",
-     "    <td align=left valign=top>\n",
+     "    <td>\n",
      Text,"\n",
      "    </td>\n",
      "  </tr>\n"
diff --git a/system/doc/top/src/otp_man_index.erl b/system/doc/top/src/otp_man_index.erl
index 12aaba1423..655d7265f7 100644
--- a/system/doc/top/src/otp_man_index.erl
+++ b/system/doc/top/src/otp_man_index.erl
@@ -154,10 +154,10 @@ gen_html(RefPages, OutFile)->
 	    SortedPages = lists:sort(RefPages),
 	    
 	    lists:foreach(fun({_,Module, App, AppDocDir, RefPagePath}) -> 
-				  io:fwrite(Out, "  <TR>\n",[]),
-				  io:fwrite(Out, "    <TD><A HREF=\"~s\">~s</A></TD>\n", 
+				  io:fwrite(Out, "  <tr>\n",[]),
+				  io:fwrite(Out, "    <td><a href=\"~s\">~s</a></td>\n", 
 					    [RefPagePath, Module]),
-				  io:fwrite(Out, "    <TD><A HREF=\"~s\">~s</A></TD>\n", 
+				  io:fwrite(Out, "    <td><a HREF=\"~s\">~s</a></td>\n", 
 					    [filename:join(AppDocDir, "index.html"), 
 					     App]),
 				  io:fwrite(Out, "  </TR>\n",[])
@@ -175,41 +175,40 @@ gen_html(RefPages, OutFile)->
 html_header() ->
     "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n"
 	"<!-- This file was generated by the otp_man_index  -->\n"
-	"<HTML>\n"
-	"<HEAD>\n"
+	"<html>\n"
+	"<head>\n"
 	"  <link rel=\"stylesheet\" href=\"otp_doc.css\" type=\"text/css\"/>\n"
-	"  <TITLE>Erlang/OTP Manual Page Index</TITLE>\n"
-	"</HEAD>\n"
-	"<BODY BGCOLOR=\"#FFFFFF\" TEXT=\"#000000\" LINK=\"#0000FF\" VLINK=\"#FF00FF\" ALINK=\"#FF0000\">\n"
-	"<CENTER>\n"
+	"  <title>Erlang/OTP Manual Page Index</title>\n"
+	"</head>\n"
+	"<body>\n"
+	"<center>\n"
 	"<!-- A HREF=\"http://www.erlang.org/\">\n"
 	"<img alt=\"Erlang logo\" src=\"erlang-logo.png\"/>\n"
-	"</A><BR -->\n"
-	"<SMALL>\n"
-	"[<A HREF=\"index.html\">Up</A> | <A HREF=\"http://www.erlang.org/\">Erlang</A>]\n"
-	"</SMALL><BR>\n"
-	"<P/><FONT SIZE=\"+4\">OTP Reference Page Index</FONT><BR>\n"
-	"</CENTER>\n"
-	"<CENTER>\n"
-	"<P/>\n"
-	"<TABLE BORDER=1>\n"
-	"<TR>\n"
-	"  <TH>Manual Page</TH><TH>Application</TH>\n"
-	"</TR>\n".
+	"</a><br -->\n"
+	"<small>\n"
+	"[ <A HREF=\"index.html\">Up</A> | <A HREF=\"http://www.erlang.org/\">Homepage</A> ]\n"
+	"</small><br>\n"
+	"<h1>OTP Reference Page Index</h1>\n"
+	"</center>\n"
+	"<center>\n"
+	"<table class=\"man-index\">\n"
+	"<tr>\n"
+	"  <th>Manual Page</th><th>Application</th>\n"
+	"</tr>\n".
 
 
 
 html_footer(Year) ->
-    "</TABLE>\n"
-	"</CENTER>\n"
-	"<P/>\n"
-	"<CENTER>\n"
-	"<HR/>\n"
-	"<SMALL>\n"
+    "</table>\n"
+	"</center>\n"
+	"<p/>\n"
+	"<center>\n"
+	"<hr/>\n"
+	"<small>\n"
 	"Copyright &copy; 1991-" ++ Year ++ "\n"
 	"<a href=\"http://www.ericsson.com/technology/opensource/erlang/\">\n"
 	"Ericsson AB</a>\n"
-	"</SMALL>\n"
-	"</CENTER>\n"
-	"</BODY>\n"
-	"</HTML>\n".
+	"</small>\n"
+	"</center>\n"
+	"</body>\n"
+	"</html>\n".
diff --git a/system/doc/top/templates/applications.html.src b/system/doc/top/templates/applications.html.src
index 1f73c44d69..7e939ddcd6 100644
--- a/system/doc/top/templates/applications.html.src
+++ b/system/doc/top/templates/applications.html.src
@@ -24,31 +24,53 @@ limitations under the License.
   <title>Erlang/OTP #version# Applications</title>
   <style type="text/css">
 <!--
-    BODY           { background: white }
+    BODY           { background: #fefefe; color: #111; }
 
-    BODY           { font-family: Verdana, Arial, Helvetica, sans-serif }
-    TH             { font-family: Verdana, Arial, Helvetica, sans-serif }
-    TD             { font-family: Verdana, Arial, Helvetica, sans-serif }
-    P              { font-family: Verdana, Arial, Helvetica, sans-serif }
+    BODY           { font-family: sans-serif }
 
-    .header        { background: #222; color: #fff }
-    .app           { background: #ccc }
+    .header        { background: #333; color: #fefefe; }
 
-    a.anum:link    { color: green; text-decoration: none }
-    a.anum:active  { color: green; text-decoration: none }
-    a.anum:visited { color: green; text-decoration: none }
+    a:link    { color: #303f9f; text-decoration: none }
+    a:active  { color: #303f9f; text-decoration: none }
+    a:visited { color: #303f9f; text-decoration: none }
 
-    a:link         { text-decoration: none }
-    a:active       { text-decoration: none }
-    a:visited      { text-decoration: none }
+    h1,h2{
+        text-align: center;
+    }
+    table {
+     margin: 1em 10%;
+     width: 80%;
+     border-collapse: collapse;
+     min-width: 50%;
+    }
+
+    table, th, td {
+     border: 1px solid #666;
+    }
+
+    th, td {
+     padding: 0.5em;
+     text-align: left;
+    }
+
+    tr:hover {
+     background-color: #f5f5f5;
+    }
+
+    tr:nth-child(even) {
+     background-color: #f2f2f2;
+    }
+
+    th {
+     background-color: #777;
+     color: #fefefe;
+    }
 -->
   </style>
 </head>
 
-<body bgcolor=white text="#000000" link="#0000ff" vlink="#ff00ff"
-      alink="#ff0000">
-<center>
+<body>
+    <h1>Erlang/OTP Applications</h1>
 #groups#
-</center>
 </body>
 </html>
diff --git a/system/doc/top/templates/index.html.src b/system/doc/top/templates/index.html.src
index d2a6736d34..b7fff0993d 100644
--- a/system/doc/top/templates/index.html.src
+++ b/system/doc/top/templates/index.html.src
@@ -29,20 +29,24 @@ limitations under the License.
 </script>
 </head> 
 
-<body bgcolor=white text="#000000" link="#0000ff" vlink="#ff00ff"
-      alink="#ff0000">
+<body>
 
 <div id="container">
 <div id="leftnav">
 <div class="innertube">
-<img alt="Erlang logo" src="erlang-logo.png"/ >
-<p/>
-<small><a href="applications.html">Applications</a><br>
-<a href="man_index.html">Modules</a></small>
-<p/>
-<a href="javascript:openAllFlips()">Expand All</a><br>
-<a href="javascript:closeAllFlips()">Contract All</a>
-<p/>
+<div class="erlang-logo-wrapper">
+ <img alt="Erlang logo" src="erlang-logo.png" class="erlang-logo"/ >
+</div>
+
+<ul class="section-links">
+ <li><a href="applications.html">Applications</a></li>
+ <li><a href="man_index.html" class="modules">Modules</a></li>
+</ul>
+
+<ul class="expand-collapse-items">
+ <li><a href="javascript:openAllFlips()">Expand All</a></li>
+ <li><a href="javascript:closeAllFlips()">Contract All</a></li>
+</ul>
 
 <ul class="flipMenu">
 <li>System Documentation
@@ -60,8 +64,8 @@ limitations under the License.
 </ul>
 </li>
 </ul>
-<b>Application Groups</b>
-<br/>
+
+<h3>Application Groups</h3>
 
 <ul class="flipMenu">
 #applinks#
@@ -73,24 +77,12 @@ limitations under the License.
 
 <div id="content">
 <div class="innertube">
-<center>
-<font size="+1"><b>Erlang/OTP #otp_base_vsn#</b></font><br>
-</center>
-<center>
-<p>
-<font size="+1">Welcome to Erlang/OTP, a complete<br>
-development environment<br>
-for concurrent programming.</font>
-</p>
-</center>
-<br>
-<br>
-<br>
-<p><b>
-<font size="+1">
-Some hints that may get you started faster
-</font>
-</b></p>
+    <h1 class="main-title">Erlang/OTP #otp_base_vsn#</h1>
+    <p class="main-description">
+    Welcome to Erlang/OTP, a complete development environment for concurrent programming.
+    </p>
+
+    <h2>Some hints that may get you started faster</h2>
 
 <ul>