www layout.css

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 21/04/26 05:45:39

Modified files:
        .              : layout.css 

Log message:
        Various fixes:
        - listing: fix border for NetSurf;
        - comment: no indentation for screens < 30em;
        - notes & table of contents: adjust width, margin, padding;
        - tables of contents: center the list; smaller headings;
          increase the clickable area.

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

Patches:
Index: layout.css
===================================================================
RCS file: /webcvs/www/www/layout.css,v
retrieving revision 1.286
retrieving revision 1.287
diff -u -b -r1.286 -r1.287
--- layout.css  24 Apr 2021 07:26:49 -0000      1.286
+++ layout.css  26 Apr 2021 09:45:39 -0000      1.287
@@ -969,6 +969,9 @@
 .listing {
    /* The default table for document listings. Contains name, document
    types, modification times etc in a file-browser-like fashion */
+   width: 100%;
+   display: block;
+   overflow-x: auto;
    border: .2em solid #ccc;
 }
 .listing th {
@@ -977,6 +980,8 @@
    color: black;
    background: #fff1c0;
    border: 1px solid #999;
+   /* for browsers that don't know about border-collapse: */
+   border-bottom: 0;
 }
 .listing td {
    padding: 1em;
@@ -986,11 +991,6 @@
 .listing img {
    vertical-align: middle;
 }
-.listing {
-   width: 100%;
-   display: block;
-   overflow: auto;
-}
 .listing .odd {
    /*every second line should be shaded */
    background: transparent;
@@ -1094,10 +1094,10 @@
    with .important. */
 .comment {
    font-style: italic;
-   margin: 2em 6%;
+   margin: 1.5em 6%;
 }
 @media (max-width: 30em) {
-   .comment { margin: 1.5em 3%; }
+   .comment { margin: 1.5em 0; }
 }
 
 
@@ -1206,15 +1206,21 @@
 }
 
 /* Single <p> */
+.edu-note {
+   width: 37.7em;
+   max-width: 100%;
+}
 .edu-note p {
    font-style: italic;
-   padding: .8em 3%;
+   padding: .7em 1em .8em;
    margin: 0;
 }
 
 /* Several <p>'s */
 .note {
-   padding: .4em 3%;
+   width: 45em;
+   max-width: 82%;
+   padding: .3em 3% .4em;
    background: white;
 }
 .note p {
@@ -1234,13 +1240,21 @@
 /** LAYOUT **/
 
 .summary, .toc {
-   font-size: 1rem;
-   padding: 1.4em 3% 1.6em;
+   width: 45em;
+   text-align: center;
+   padding: 1.3em 3% 1.4em;
    margin: 2em auto;
-   background: #f5f5f5;
+   background: #f4f4f4;
+}
+.summary { max-width: 82%; }
+.toc { max-width: 94%; }
+.summary > ul, .toc > ul {
+   display: inline-block;
 }
 .summary ul, .toc ul {
-   margin: 0 1.5%;
+   text-align: left;
+   font-size: .94em;
+   margin: 0 .5em;
 }
 /* This is for displaying the list as columns without a need to
    change the padding. */
@@ -1248,16 +1262,22 @@
    margin-top: 0
 }
 .summary h3, .toc h3 {
-   font-size: 1.25em;   /* 20px */
+   font-size: 1.125em;   /* 18px */
    margin-top: 0;
-   text-align: center;
 }
 .summary h4, .toc h4 {
-   font-size: 1.125em;  /* 18px */
+   text-align: left;
+   font-size: 1em;
 }
+.summary a, .toc a {
+   display: inline-block;
+   vertical-align: top;
+   padding: .05em 0;
+}
+
 
 .toc-inline {
-   font-size: 1rem;
+   font-size: .94em;
    text-align: center;
    padding: 0 3%;
    margin: auto;
@@ -1290,27 +1310,22 @@
 
 /* Baby NetSurf (1.2) would hurt itself using these definitions.
    Place them out of reach. Too bad for its older brother (2.9). */
-@media (min-width: 0) {
-   .note, .summary { width: 30rem; }
-   .toc {
-      width: 45em;
-   }
-   .note,.summary, .toc { max-width: 94%; }
-   .edu-note {
-      width: 40em;
-      max-width: 100%;
-   }
+@media (max-width: 30em) {
+   .note, .summary { max-width: 92%; }
+   /* Override margin definition in free-sw.html. */
+   #content .note { margin-left: auto; margin-right: auto; }
 }
-@media (min-width: 45em) {
+@media (min-width: 48em) {
    .note, .summary {
       clear: right;
       float: right;
-      width: 20rem;
+      width: 20em;
       max-width: 40%;
       margin: .5em 0 1em 2em;
    }
-   .summary { padding: 1.5em 1.2em 1.6em; }
-   .note { padding: .4em 1.2em; }
+   #content .note { margin-right: 0; margin-left: 2em; }
+   .summary { padding: 1em .8em 1.1em; }
+   .note { padding: .3em .8em .4em; }
 }
 
 /* ~~~~~~~ For outdated translations of proprietary.html ~~~~~~~ */