[wwwdocs] Suggested usability improvements for the website

[aquaglow@gmail.com]

Patch suggests changes to the main GCC website stylesheet, with the
aim of improving usability:

- Increase line-height (aids tracking lines of text)
- Set fixed-width (for large screens only), as current line length
exceeds UX guidelines for readability
- Improve homepage layout and visual appearance

Screenshot shows a preview of the new appearance:
https://i.imgur.com/2Mq6Hiv.png

Hope these suggestions are useful.

Stuart



--- gcc.css 2016-05-11 00:10:02.000000000 +0100
+++ gcc.css 2016-05-11 00:08:01.000000000 +0100
@@ -3,14 +3,40 @@
    Gerald Pfeifer <gerald@pfeifer.com>
  */

-body      { background-color: white; color: black; }
+@media (min-width: 1160px){
+  html {
+    background: rgb(230,230,230);
+  }
+
+  body {
+    width: 1100px;
+    margin: 20px auto;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);
+  }
+}
+
+body {
+  background: white;
+  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, FreeSans,
"Nimbus Sans L", "Liberation Sans", Arial, sans-serif;
+  line-height: 1.5;
+  color: rgb(60, 60, 60);
+  font-size: 90%;
+}

 a:link    { color: #0066bb; text-decoration: none; }
 a:visited { color: #003399; text-decoration: none; }
 a:hover   { color: darkorange; text-decoration: none; }

-h1        { color: darkslategray; text-align:center; }
-h2        { color: darkslategray; }
+h1 { text-align:center; }
+h1, h2, h3, h4, h5, h6 {
+  font-family: Georgia, "PT Serif", "Liberation Serif", serif;
+  font-weight: normal;
+  color: #00796b;
+}
+
+hr { border-width: 0; height: 1px; background: #bbbbbb; }

 .highlight{ color: darkslategray; font-weight:bold; }
 .smaller  { font-size: 80%; }
@@ -18,43 +44,46 @@ h2        { color: darkslategray; }
 .no-margin-top { margin-top:0; }
 .twocolumns { column-counts:2; -moz-column-count:2; }

-td.news      { width: 50%; padding-right: 8px; }
-td.news h2   { font-size: 1.2em; margin-top: 0; margin-bottom: 2%; }
+td.news      { width: 50%; padding-right: 20px; }
+td.news h2   { font-size: 1.3em; margin-top: 20px; margin-bottom:
5px; border-bottom: 2px solid #00796b; }
 td.news dl   { margin-top:0; }
-td.news dt   { color:darkslategrey; font-weight:bold; margin-top:0.3em; }
-td.news dd   { margin-left:3ex; margin-top:0.1em; margin-bottom:0.1em; }
-td.news .date { color:darkslategrey; font-size:90%; margin-left:0.1ex; }
+td.news dt   { color:black; font-weight:bold; padding-top: 10px; }
+td.news dd   { padding-bottom: 10px; border-bottom: 1px solid
#bbbbbb; margin: 0; }
+td.news .date { color:grey; font-size:90%; margin-left:0.1ex; }

-td.status    { width: 50%; padding-left: 12px; border-left: #3366cc
thin solid; }
-td.status h2 { font-size: 1.2em; margin-top:0; margin-bottom: 1%; }
+td.status    { width: 50%; padding-left: 20px; }
+td.status h2 { font-size: 1.3em; margin-top: 20px; margin-bottom:
5px; border-bottom: 2px solid #00796b; }
 td.status dl { margin-top:0; }
 td.status .version { font-weight:bold; }
 td.status .regress { font-size: 80%; }
-td.status dd { margin-left:3ex; }
+td.status dd { padding-bottom: 10px; border-bottom: 1px solid
#bbbbbb; margin: 0; }
+td.status dt { padding-top: 10px; color: black; }

 table.navitem tr:nth-child(1) {
-  border-color: #3366cc;
-  border-style: solid;
-  border-width: thin;
-  color: #f2f2f9;
-  background-color: #0066dd;
-  font-weight: bold;
+  color: white;
+  background-color: #009688;
+  line-height: 1;
+  font-family: Georgia, "PT Serif", "Liberation Serif", serif;
 }
 table.navitem tr:nth-child(2) {
-  padding-top: 3px;
-  padding-left: 8px;
-  padding-bottom: 3px;
-  background-color: #f2f2f9;
+  background: rgb(240,240,240);
   font-size: smaller;
 }
+table.navitem td { padding: 5px; }
+table.navitem tr:nth-child(2) td {
+  border-width: 0 1px 1px 1px;
+  border-style: solid;
+  border-color: rgb(210,210,210);
+}

 div.copyright {
+  margin-top: 20px;
   font-size: smaller;
-  background: #f2f2f9;
-  border: 2px solid #3366cc;
-  border-style: solid;
-  border-width: thin;
-  padding: 4px;
+  background: rgb(240,240,240);
+  border-radius: 0 0 10px 10px;
+  border: 1px solid rgb(210,210,210);
+  border-top: 2px solid #00796b;
+  padding: 10px;
 }
 div.copyright p:nth-child(3) { margin-bottom: 0; }
-------------- next part --------------
A non-text attachment was scrubbed...
Name: gcc_website_stylesheet.patch
Type: application/octet-stream
Size: 3820 bytes
Desc: not available
URL: <http://gcc.gnu.org/pipermail/gcc-patches/attachments/20160510/d34e1513/attachment.obj>