Web: rounded corners and related CSS tweaks (issue 206790043 by address@hidden)

[paulwmorris]

Reviewers: ,

Message:
Please review, thanks!

Description:
Web: rounded corners and related CSS tweaks

rounded corners on columns and other boxes
adjust spacing in column headers
news-item border on top not bottom
some minor color adjustments

Please review this at https://codereview.appspot.com/206790043/

Affected files (+23, -33 lines):
  M Documentation/css/lilypond-website.css


Index: Documentation/css/lilypond-website.css
diff --git a/Documentation/css/lilypond-website.css  
b/Documentation/css/lilypond-website.css
index  
8538a39eaa243182b60e8469c35edc1616676750..ca445710ae6a447d46d8a278e808b907993bd2f4  
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;