@@ -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; }
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 .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; }