Web: rounded corners and related CSS tweaks

Issue 4298

Rounded corners on columns and other boxes.
Adjust spacing in column headers.
news-item border on top not bottom.
Some minor color adjustments.

1 files changed, 23 insertions, 33 deletions

diff --git a/Documentation/css/lilypond-website.css b/Documentation/css/lilypond-website.css
index 8538a39eaa..ca445710ae 100644
--- a/Documentation/css/lilypond-website.css
+++ b/Documentation/css/lilypond-website.css
@@ -363,8 +363,8 @@ div.news-item {
 
 .news-item .subsubheading {
   text-align: left;
-  padding: 0 0 0 0.5em;
-  border-bottom: 1px solid #5b7f64;
+  padding: 0.5em 0.5em 0 0.5em;
+  border-top: 1px solid #5b7f64;
   margin: 0;
   overflow: hidden;
 }
@@ -399,34 +399,31 @@ div#latestVersion {
   position: absolute;
   top: 16em;
   right: 0;
-  width: 12em;
-  text-align: center;
-  border-left: 1px solid #5b7f64;
 }
 
 div#wildCardBox {
   position: absolute;
-  top: 0.0em;
+  top: 0;
   right: 0;
-  width: 12em;
-  text-align: center;
-  border-left: 1px solid #5b7f64;
 }
 
-#latestVersion .subheading {
-  background: #5b7f64;
-  color: #fff;
+div#latestVersion,
+div#wildCardBox {
+  width: 12em;
   text-align: center;
-  padding: 0 0.5em;
-  margin: 0;
+  border-left: 1px solid #5b7f64;
+  border-top-left-radius: 5px;
 }
 
+#latestVersion .subheading,
 #wildCardBox .subheading {
   background: #5b7f64;
   color: #fff;
   text-align: center;
   padding: 0 0.5em;
   margin: 0;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 
 /* this might not work in certain browsers */
@@ -446,7 +443,7 @@ a[name="Unstable"] + h4 {
 }
 
 #latestVersion .subsubheading {
-  padding: 0.08em 0.25em;
+  padding: 0.25em 0.25em 0;
   border-bottom: 1px solid #5b7f64;
   margin: 0;
 }
@@ -534,7 +531,7 @@ h1.unnumbered, h2.unnumberedsec, h3.unnumberedsubsec {
 table {
   text-align: left;
   padding: 0 0 0 0.5em;
-  border-left: 3px solid green;
+  border-left: 3px solid #5b7f64;
   margin: 1em 0 0 1em;
 }
 
@@ -674,6 +671,7 @@ div.float-right a.clickable {
 .column-right-top,
 .column-right-bottom {
   background: #f5fffa;
+  border-radius: 5px;
 }
 
 /* color1 */
@@ -727,8 +725,10 @@ div.float-right a.clickable {
 .column-right-top h3,
 .column-right-bottom h3 {
   text-align: left;
-  padding: 0 0.5em;
+  padding: 3px 0.5em 0;
   margin: 0;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 
 .column-center-top h4,
@@ -841,36 +841,26 @@ div.float-right a.clickable {
   overflow: auto;
 }
 
-.warning {
+.warning,
+.contactBox {
   background: #eef;
   text-align: left;
-  padding: 0;
-  border: 1px solid green;
-  /* Experimental rounded corners */
-  border-radius: 10px;
   margin: 1em;
-}
-
-.warning p {
-  padding: 0.5em;
-  margin: 0;
+  padding: 0;
+  border: 1px solid rgb(160, 160, 175);
+  border-radius: 5px;
 }
 
 .contactBox {
   float: left;
-  background: #eef;
-  text-align: left;
-  border: 1px solid green;
-  padding: 0;
-  margin: 1em;
 }
 
+.warning p,
 .contactBox p {
   padding: 0.5em;
   margin: 0;
 }
 
-
 .hide {
   position: relative;
   text-indent: -999em;