www layout.css style.rtl.css

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 16/09/13 09:06:53

Modified files:
        .              : layout.css style.rtl.css 

Log message:
        Redefine .emph-box, .highlight(-para), .lyrics and .announcement to fix 
rendering in NetSurf.

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/layout.css?cvsroot=www&r1=1.211&r2=1.212
http://web.cvs.savannah.gnu.org/viewcvs/www/style.rtl.css?cvsroot=www&r1=1.12&r2=1.13

Patches:
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/layout.css,v
retrieving revision 1.211
retrieving revision 1.212
diff -u -b -r1.211 -r1.212
--- layout.css  5 Sep 2016 08:24:16 -0000       1.211
+++ layout.css  13 Sep 2016 09:06:52 -0000      1.212
@@ -419,50 +419,70 @@
 
 /*** NON-FLOATING INSETS AND HIGHLIGHTED STUFF ***/
 
-.emph-box {
-   padding: .5em 1.2em;
-   background-color: #f0f2f4;
-   border: 1px solid #c9cccf;
-}
-.emph-box p { font-size: .9em }
-.emph-box h4 {
-   text-align: center;
-   font-size: 1.5em;
-}
-.highlight, .highlight-para {
-   clear: both;
-   margin-bottom: 1em;
-   color: black;
-}
-.highlight {
-/* Please do not add borders. This style is applied to an in-line tag. */
-   padding: .2em .5em;
-   background-color: #fff898;
-   border: 0;
-}
+/** WITH BACKGROUND **/
+
+/* NetSurf collapses the bottom border of the last element with that of its
+   parent div, even when the div has a padding or border.
+   To fix this, strip the bottom margin of <p> and <pre>. If another element
+   comes last, it may need a special clause. */
+div.highlight-para p, div.highlight-para pre, div.highlight-para ul,
+ div.emph-box p, div.emph-box  pre, div.emph-box  ul,
+ .lyrics p { margin-bottom: 0; }
+
+/* .highlight doesn't have a border. It can be applied to in-line elements.
+   .highlight-para and .emph-box have borders. They are used for block 
elements.
+   highlight-para can be used next to .note or .summary because it only has top
+   and bottom borders. */
+
+div.highlight-para, div.emph-box { padding: .2em 1.2em 1.2em; }
+
+.highlight-para, p.highlight,
+ p.emph-box, pre.emph-box { padding: .6em 1.2em; }
+
+.highlight-para, .highlight { background-color: #ffc; }
+span.highlight { background-color: #fff898; }
 .highlight-para {
-   padding: 0 1.2em;
-   background-color: #ffc;
-   border: 2px solid #b9bcbf;
+   border-top: .1em solid #b9bcbf;
+   border-bottom: .1em solid #b9bcbf;
+}
+.emph-box, .lyrics {
+   background-color: #f0f2f4;
+   border: .1em solid #c9cccf;
 }
 .lyrics {
-   background-color: #f0f2f4; font-style: italic; width: 25em;
-   padding: 2em; border: 2px solid #e7e9eb;
-   margin-left: 2em; margin-right: 2em;
+   max-width: 25em;
+   font-style: italic;
+   padding: 1em 2em 2em;
+   margin-left: 3%; margin-right: 3%;
 }
 
-/* Announcements */
-div.announcement {
-   font-size: 1.1em; font-weight: bold;
-   padding: 0 1em;
+
+/** WITH LEFT BORDER **/
+
+.announcement blockquote { margin: 0; }
+
+.announcement {
+   font-size: 1.1em;
+   padding: .1em 1em .7em;
    margin: 1.5em 0;
    color: #333;
-   border-left: .5em solid #b9bcbf;
-}
-div.announcement blockquote {
-   margin-left: 0; margin-right: 0;
+   border-left: .3em solid #b9bcbf;
+   background: #f4f6f8;
+   background: linear-gradient(to right, #f0f2f4, white); 
+}
+/* Currently, announcements contain <p>, <ul>, and <h3>, with p or
+   ul as last element. Try to make them NetSurf-friendly. */
+.announcement p { margin: .5em 0 0; }
+.announcement ul { margin: 0 1em; }
+.announcement ul li { margin-top: .5em; }
+.announcement h3 {
+   font-size: 1.3em;
+   margin: .4em 0;
 }
 
+
+/** WITH NO BACKGROUND OR LEFT BORDER **/
+
 /* Note about Free Software Free Society */
 blockquote#fsfs p { padding: .3em 0; }
 

Index: style.rtl.css
===================================================================
RCS file: /webcvs/www/www/style.rtl.css,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -b -r1.12 -r1.13
--- style.rtl.css       5 Sep 2016 08:24:29 -0000       1.12
+++ style.rtl.css       13 Sep 2016 09:06:52 -0000      1.13
@@ -39,9 +39,10 @@
 #gnu-banner img {
    margin-left: .4em;
 }
-div.announcement {
+.announcement {
    border-left: 0;
-   border-right: .5em solid #b9bcbf;
+   border-right: .3em solid #b9bcbf;
+   background: linear-gradient(to left, #f0f2f4, white);
 }
 .note, div.summary {
    clear: left;