www layout.css

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 21/04/26 06:30:26

Modified files:
        .              : layout.css 

Log message:
        emph-box, highlight*, lyrics, announcement, important:
        - strip bottom margins of children for consistency;
        - adjust paddings and margins;
        - redefine lyrics as inline-block. 

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/layout.css?cvsroot=www&r1=1.287&r2=1.288

Patches:
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/layout.css,v
retrieving revision 1.287
retrieving revision 1.288
diff -u -b -r1.287 -r1.288
--- layout.css  26 Apr 2021 09:45:39 -0000      1.287
+++ layout.css  26 Apr 2021 10:30:25 -0000      1.288
@@ -1101,50 +1101,31 @@
 }
 
 
-/**************************/
-/*  TEXT WITH BACKGROUND  */
-/**************************/
+/****************************************/
+/*  TEXT WITH BACKGROUND AND/OR BORDER  */
+/****************************************/
 
-/** LAYOUT **/
+/* Strip bottom margins of children. */
+
+.emph-box *, .highlight-para *, .lyrics *,
+.announcement *, .important * { margin-bottom: 0; }
 
-/* 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 get consistent results, strip the bottom margin of the last child. */
-div.highlight-para > *:last-child, div.emph-box > *:last-child,
-.lyrics > *:last-child { margin-bottom: 0; }
 
-div.highlight-para > h3, div.emph-box > h3 { margin-top: .7em; }
+/** emph-box, highlight-para, highlight **/
 
 div.highlight-para, div.emph-box {
-   padding: 0 1.2em 1.2em;
+   padding: 0 1.2em 1.1em;
    margin: 2em 0;
 }
+p.highlight-para, p.highlight,
+p.emph-box, pre.emph-box { padding: .7em 1.2em .8em; }
 
-.highlight-para, p.highlight,
-p.emph-box, pre.emph-box { padding: .6em 1.2em; }
-
-.lyrics {
-   width: 25em;
-   width: max-content;
-   max-width: 80%;
-   font-style: italic;
-   padding: .5em 2em 1.7em;
-   margin: 2em 3%;
-}
-@media (max-width: 30em) {
-   .lyrics {
-       padding: 0 1.2em 1.2em;
-       margin: 2em auto;
-    }
+.emph-box h3, .highlight-para h3, .lyrics h3 {
+   font-size: 1.25em;  /* 20px */
+   margin: .8em 0;
 }
-
-
-/** STYLE **/
-
-/* .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 floating elements without special
-   precaution because it only has top and bottom borders. */
+pre.emph-box code, pre.emph-box kbd, pre.emph-box samp,
+p.emph-box code, p.emph-box kbd, p.emph-box samp { padding: 0; }
 
 .highlight-para, .highlight { background: #fff5d4; }
 span.highlight { background: #fff1c0; }
@@ -1153,20 +1134,35 @@
    border-bottom: .1em solid #fc7;
 }
 
-.emph-box, .lyrics {
-   background: #f2f2f2;
-   border: .1em solid #ddd;
+.emph-box {
+   background: #f2f2f2;     /* to match <code> and <kbd> */
+   border: .1em solid #bbb;
 }
 
 
-/***************************/
-/*  TEXT WITH LEFT BORDER  */
-/***************************/
+/** lyrics **/
 
-/** LAYOUT **/
+.lyrics {
+   display: inline-block;
+   font-style: italic;
+   padding: .5em 2em 1.7em;
+   background: #f4f4f4;
+   border: .1em solid #bbb;
+   border-radius: .5em;
+   margin: 1em 1.5em 1em 4%;
+}
+@media (max-width: 30em) {
+   .lyrics { margin: 1em 0; }
+}
+@media (min-width: 48em) {
+   .lyrics { margin-left: 8%; }
+}
+
+
+/** announcement, important **/
 
 .announcement, .important {
-   padding: .4em 1.5em;
+   padding: .4em 1em;
    margin: 1.5em 0;
 }
 .announcement blockquote { margin: 0; }
@@ -1174,26 +1170,22 @@
    padding: .4em 0 .5em;
    margin: 0;
 }
-.announcement ul, .important ul { margin: 0 1em; }
+.announcement > ul, .important > ul { margin: 0; }
 .announcement li, .important li {
    padding: .2em 0 .3em;
    margin-top: 0;
 }
 .announcement h3, .important h3 {
-   font-size: 1.25em;
-   font-size: 1.25rem;  /* 20px */
-   margin: .1em 0 .6em;
+   font-size: 1.25em;  /* 20px */
+   margin: .35em 0 .4em;
 }
-
-
-/** STYLE **/
-
-/* For information that isn't part of the article. The border is
-   green. */
 .announcement { border-left: .4em solid #5c5; }
-/* For important information inside an article. The border is orange. */
 .important    { border-left: .4em solid #fc7; }
 
+@media (min-width: 48em) {
+   .announcement, .important { padding: .4em 1.5em; }
+}
+
 
 /***********/
 /*  NOTES  */