www/server/staging body-include-2.html educatio...

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 20/02/21 15:04:40

Modified files:
        server/staging : body-include-2.html education.css home.html 
                         layout.css 

Log message:
        Move some defs from education.css to layout.css;
        change color of visited links;
        layout.css: add Noto Sans fonts to nav link choices;
        update data on color contrast; adjust font sizes for narrow screens 

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/body-include-2.html?cvsroot=www&r1=1.23&r2=1.24
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/education.css?cvsroot=www&r1=1.27&r2=1.28
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/home.html?cvsroot=www&r1=1.24&r2=1.25
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/layout.css?cvsroot=www&r1=1.23&r2=1.24

Patches:
Index: body-include-2.html
===================================================================
RCS file: /webcvs/www/www/server/staging/body-include-2.html,v
retrieving revision 1.23
retrieving revision 1.24
diff -u -b -r1.23 -r1.24
--- body-include-2.html 16 Feb 2020 17:22:57 -0000      1.23
+++ body-include-2.html 21 Feb 2020 20:04:40 -0000      1.24
@@ -103,7 +103,7 @@
 <!--#else -->
   <li id="tabHelp"><a href="/help/help.html">HELP&nbsp;GNU</a></li>
 <!--#endif -->
-  <li id="more-links"><a href="#fsf-links">More&nbsp;&#9660;</a></li>
+  <li id="more-links"><a 
href="#fsf-links"><span><sup>...</sup>&nbsp;&#9660;</span></a></li>
  </ul>
  <div style="clear: both"></div>
 </div><!-- /"navigation -->

Index: education.css
===================================================================
RCS file: /webcvs/www/www/server/staging/education.css,v
retrieving revision 1.27
retrieving revision 1.28
diff -u -b -r1.27 -r1.28
--- education.css       20 Feb 2020 14:36:48 -0000      1.27
+++ education.css       21 Feb 2020 20:04:40 -0000      1.28
@@ -3,40 +3,9 @@
 This file is in the public domain. */
 
 
-/***********************************************/
-/*  Page navigation for CSS3-unaware browsers  */
-/***********************************************/
-
-/* Linear tables of contents */
-
-.toc-inline {
-   font-size: 1rem;
-   text-align: center;
-   padding: 0 3%;
-   margin: auto;
-}
-.toc-inline a {
-   display: inline-block;
-   padding: .1em .4em;
-   margin: .3em;
-   border: .1em solid #bbb;
-}
-.toc-inline h3 {
-   display: none;
-}
-.toc-inline h4 {
-   font-size: 1em;
-   margin: 1em 0 .2em;
-}
-.toc-inline h4 a {
-   border: none;
-}
-.toc-inline ul, .toc-inline li {
-   display: inline;
-   margin: 0;
-}
-
-/* Section menu */
+/*******************************/
+/*  For CSS3-unaware browsers  */
+/*******************************/
 
 #content {
    position: relative;
@@ -96,22 +65,6 @@
    padding: .25em .5em;
 }
 
-
-/* Breadcrumb */
-
-.breadcrumb {
-   line-height: 1.7em;
-   padding: .4em 0 0;
-   margin: 0 0 .5em;
-}
-.breadcrumb a { line-height: 1.6em; }
-
-@media (min-width: 25em) {
-   .breadcrumb a { display: inline-block; }
-}
-
-/* Section menu icon */
-
 a#sect-menu-button {
    float: right;
    line-height: 1.7em;
@@ -121,9 +74,9 @@
 #sect-menu-button img { height: 100%; }
 
 
-/***************************************/
-/*  Media queries for page navigation  */
-/***************************************/
+/*******************/
+/*  Media queries  */
+/*******************/
 
 @media (min-width: 55em) {
    #main, #main ~ .translators-notes {
@@ -156,26 +109,4 @@
    #main, #main ~ .translators-notes { padding-left: 16.1rem; }
 }
 
-
-/**********************/
-/*  Navigation links  */
-/**********************/
-
-.breadcrumb  a[href]:link, .breadcrumb  a[href]:visited,
-.toc-inline  a[href]:link, .toc-inline  a[href]:visited,
-#navlinks    a[href]:link, #navlinks    a[href]:visited {
-   color: #049;
-   text-decoration: none;
-}
-
-#navlinks li.current > a[href], #navlinks li.current > a[href]:hover {
-   color: #333;
-   font-style: italic;
-   text-decoration: none;
-   background: none;
-   cursor: default;
-}
-
-.breadcrumb, .breadcrumb a, #navlinks, #navlinks a {
-   font-family: "Liberation Sans", "FreeSans", sans-serif;
-}
+/* Style: see layout.css. */

Index: home.html
===================================================================
RCS file: /webcvs/www/www/server/staging/home.html,v
retrieving revision 1.24
retrieving revision 1.25
diff -u -b -r1.24 -r1.25
--- home.html   1 Feb 2020 13:02:05 -0000       1.24
+++ home.html   21 Feb 2020 20:04:40 -0000      1.25
@@ -85,11 +85,11 @@
    min-width: 8em;
 }
 .btn-left a[href], .btn-right a[href] {
-   font-family: "FreeSans", sans-serif;
+   font-family: "Noto Sans Display", "Noto Sans", "Liberation Sans", 
"FreeSans", sans-serif;
    font-size: 1.6em;
    font-weight: bold;
    text-decoration: none;
-   padding: .5em .6em .4em;
+   padding: .5em .6em;
    color: #b02500;
    background: white;
    border: .1em solid #b02500;
@@ -592,7 +592,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2020/02/01 13:02:05 $
+$Date: 2020/02/21 20:04:40 $
 <!-- timestamp end -->
 </p>
 </div>

Index: layout.css
===================================================================
RCS file: /webcvs/www/www/server/staging/layout.css,v
retrieving revision 1.23
retrieving revision 1.24
diff -u -b -r1.23 -r1.24
--- layout.css  20 Feb 2020 15:44:32 -0000      1.23
+++ layout.css  21 Feb 2020 20:04:40 -0000      1.24
@@ -35,33 +35,40 @@
 
 /* CONTRAST
 
-   source: http://springmeier.org/www/contrastcalculator/index.php (dead)
-           http://juicystudio.com/services/luminositycontrastratio.php
+   source: http://juicystudio.com/services/luminositycontrastratio.php
 
-   Color1       Color 2       contrast       Color
-                               ratio      difference
+   Color1       Color 2       Contrast      Passing
+                               ratio         level
 Black-gray
-   #000         white          21.3           765
-   #000         #ff3           19.6           561
-   #222         white          15.91          663
-   #333         white          12.63          612
-   #333         #eee           10.89          561
-   #404040      #d4d4d4         6.99          444
-   #555         white           7.46          510
+   #000         white          21.30          AAA
+   #222         white          15.91          AAA
+   #333         white          12.63          AAA
+   #333         #eee           10.89          AAA
+
 
 Red
-   #a42e2b      white           6.99          630
-   #850803      #d4d4d4         6.97
+   #a42e2b      white           6.99
 
-Blue links
-   #004caa     white            8.03          443
-   #004caa     #e4ffcc          7.45          365
-   #004caa     #fff1c0          7.11          366
-   #004caa     #f3f3f3          7.24          407
-   #004caa     #ccffcc          7.17          341
-   #004caa     #777             1.79          137
-   #004caa     #333             1.57          169
-   #004caa     black            2.61          322
+Blue (non-visited links)
+   #049         white           9.18          AAA
+                #eee            7.91          AAA
+                #ddd            6.76          AA
+                #333            1.38
+                #222            1.73
+                black           2.29
+
+Gray (visited links)
+   #595959      white           7.00          AAA
+                #222            2.27
+                black           3.00
+                #049            1.31
+
+Green (another option for visited links)
+   #360         white           6.90          AA
+                #333            1.83
+                #222            2.30
+                black           3.04
+                #049            1.33
 */
 
 
@@ -81,6 +88,8 @@
 
 /* TABLE OF CONTENTS
 
+   * Transition from previous version
+
    * PAGE STRUCTURE
      - html, body, .inner
      - header for CSS3-unaware browsers
@@ -90,21 +99,18 @@
      - media queries for header
          #fsf-frame
      - #content
-         #main-text
-         breadcrumb & edu-breadcrumb
-         article
+         Navigation (breadcrumb & edu-breadcrumb)
          byline
-         reduced-width
-         columns
-         infobox
-         trans-disclaimer
-         #outdated
-         translators-notes
-     - #mission-statement & footer
+         text of the article (reduced-width, columns, infobox)
+         for translations (trans-disclaimer, #outdated, translators-notes)
+         for the Education section (edu-cases)
+         for the Malware section (about-dir, about-page)
+     - #mission-statement
+     - #footer
 
    * BUILDING BLOCKS
      - simple text styling (small, strong, em, etc.)
-     - basic classes, mostly replacing inline elements
+     - basic classes, mostly replacing inline elements like small or em
      - blocks of text (p, blockquote, etc.)
      - h* headers
      - lists
@@ -117,13 +123,15 @@
      - text with background (layout, style)
      - text with left border (layout, style)
      - notes (layout, style)
-     - table of contents: toc & summary (layout, style)
+     - table of contents: toc, summary & toc-inline
      - media queries for note & summary
 
    * INTERACTIVE ELEMENTS
      - links (special links, style)
      - forms & buttons (layout, style)
      - navbars & back-to-top (layout, style)
+
+   * FONT FAMILY
 */
 
 
@@ -245,7 +253,7 @@
 
 .skip, #fsf-frame {
    position: fixed;
-   top: -200px;
+   top: -1000px;
 }
 
 /*** BANNER ***/
@@ -298,10 +306,6 @@
    padding: .1em;
    margin: 0;
 }
-.switch img:hover {
-   background: #eee;
-   cursor: pointer;
-}
 
 #navbar-input,  #outdated-input,
 #navbar-button, #outdated-button {
@@ -355,6 +359,7 @@
 /*****************************************/
 
 @media (min-width: 0) {
+   .inner { font-size: .94em; }
    #header, #gnu-banner, #switches { display: block; }
 
    #gnu-banner {
@@ -393,6 +398,7 @@
 }
 
 @media (min-width: 45em) {                           /* 720px */
+   .inner { font-size: 1em; }
    #gnu-banner { padding-top: .1em; }
    p#gnu-banner img { position: relative; top: .2em; }
    #gnu-banner .hide { display: inline; }
@@ -484,17 +490,17 @@
 }
 
 
-/** Navigation; see education.css **/
+/** Navigation; see also education.css **/
 
-.edu-breadcrumb {
+.breadcrumb, .edu-breadcrumb {
     line-height: 1.7em;
     padding: .4em 0 0;
     margin: 0 0 .5em;
 }
-.edu-breadcrumb a { line-height: 1.6em; }
+.breadcrumb, .edu-breadcrumb a { line-height: 1.6em; }
 
 @media (min-width: 25em) {
-   .edu-breadcrumb a { display: inline-block; }
+   .breadcrumb a, .edu-breadcrumb a { display: inline-block; }
 }
 
 
@@ -804,20 +810,20 @@
 
 /** HEADERS ON NARROW SCREENS **/
 
-@media (max-width: 30em) {    /* 480 px */
+@media (max-width: 30em) {    /* 480 px - 1em = 15px */
    h2#main-heading { border-left: .4em solid #eee; }
-   h1 { font-size: 2.0625em; }                         /* 33px */
-   h2 { font-size: 1.75em; }                           /* 28px */
-   h3 { font-size: 1.375em; }                          /* 22px */
-   .article h3 { font-size: 1.29em; }                  /* 22px */
-   h4 { font-size: 1.1875em; }                         /* 19px */
-   .article h4 { font-size: 1.12em; }                  /* 19px */
-   h5 { font-size: 1.0625em; }                         /* 17px */
-
-   .big-section h3    { font-size: 1.5em; }            /* 25px */
-   .article .big-section h3    { font-size: 1.47em; }  /* 25px */
-   .big-subsection h4 { font-size: 1.375em; }          /* 22px */
-   .article .big-subsection h4 { font-size: 1.294em; } /* 22px */
+   h1 { font-size: 2em; }                              /* 30px */
+   h2 { font-size: 1.73em; }                           /* 26px */
+   h3 { font-size: 1.4em; }                            /* 21px */
+   .article h3 { font-size: 1.32em; }                  /* 21px */
+   h4 { font-size: 1.2em; }                            /* 18px */
+   .article h4 { font-size: 1.13em; }                  /* 18px */
+   h5 { font-size: 1.07em; }                           /* 16px */
+
+   .big-section h3    { font-size: 1.53em; }           /* 23px */
+   .article .big-section h3    { font-size: 1.44em; }  /* 23px */
+   .big-subsection h4 { font-size: 1.4em; }            /* 21px */
+   .article .big-subsection h4 { font-size: 1.32em; }  /* 21px */
 }
 
 
@@ -1155,6 +1161,7 @@
    font-size: 1rem;
    padding: 1em 3% 1.7em;
    margin: 2.5em auto 1.5em;
+   background: #f5f5f5;
 }
 .summary ul, .toc ul {
    margin: 0 1.5%;
@@ -1173,9 +1180,32 @@
    .summary, .toc { max-width: 94%; }
 }
 
-/** STYLE **/
-
-.summary, .toc { background: #f5f5f5; }
+.toc-inline {
+   font-size: 1rem;
+   text-align: center;
+   padding: 0 3%;
+   margin: auto;
+}
+.toc-inline a {
+   display: inline-block;
+   padding: .1em .4em;
+   margin: .3em;
+   border: .1em solid #bbb;
+}
+.toc-inline h3 {
+   display: none;
+}
+.toc-inline h4 {
+   font-size: 1em;
+   margin: 1em 0 .2em;
+}
+.toc-inline h4 a {
+   border: none;
+}
+.toc-inline ul, .toc-inline li {
+   display: inline;
+   margin: 0;
+}
 
 
 /**************************************/
@@ -1237,36 +1267,38 @@
    text-decoration-color: #5e93d5;
 }
 a[href]:visited {
-   color: #360;
-   text-decoration-color: #7fb04e;
+   color: #595959;
+   text-decoration-color: #aaa;
 }
 a[href]:active { text-decoration: none; }
 
 /* Navigation links */
 
-#gnu-banner a {
+#gnu-banner > a {
    color: #333;
    text-decoration: none;
 }
-#gnu-banner a strong { color: #a42e2b; }
-#gnu-banner a:hover { background: none }
-
-#fsf-support { color: #555; }
-#fsf-support a[href]:link, #fsf-support a[href]:visited {
-   color: #555;
-   text-decoration: underline #888 solid;
+#gnu-banner > a strong {
+   color: #a42e2b;
 }
+#fsf-support,
+#fsf-support         a[href]:link,
+#fsf-support         a[href]:visited,
 #fssbox              a[href]:link,
 #fssbox              a[href]:visited,
 .back                a[href]:link,
 .back                a[href]:visited,
 .anchor-reference-id a[href]:link,
 .anchor-reference-id a[href]:visited {
-   color: #333;
-   text-decoration: underline #888 solid;
+   color: #595959;
+   text-decoration-color: #bbb;
 }
-#translations        a[href]:link,
-#translations        a[href]:visited,
+#languages           a[href]:link,
+#languages           a[href]:visited,
+#navlinks            a[href]:link,
+#navlinks            a[href]:visited,
+.breadcrumb          a[href]:link,
+.breadcrumb          a[href]:visited,
 .edu-breadcrumb      a[href]:link,
 .edu-breadcrumb      a[href]:visited,
 .trans-disclaimer    a[href]:link,
@@ -1275,6 +1307,8 @@
 #TOC                 a[href]:visited,
 .toc                 a[href]:link,
 .toc                 a[href]:visited,
+.toc-inline          a[href]:link,
+.toc-inline          a[href]:visited,
 .summary             a[href]:link,
 .summary             a[href]:visited {
    color: #049;
@@ -1287,20 +1321,8 @@
    background: #e7f2e2;
    text-decoration: none;
 }
-
-#fsf-support a[href]:link:hover,
-#fsf-support a[href]:visited:hover {
-   text-decoration: none;
-   background: #e7f2e2;
-}
-#fssbox              a[href]:link:hover,
-#fssbox              a[href]:visited:hover,
-.back                a[href]:link:hover,
-.back                a[href]:visited:hover,
-.anchor-reference-id a[href]:link:hover,
-.anchor-reference-id a[href]:visited:hover {
-   color: #006400;
-   text-decoration: none;
+#gnu-banner > a:hover {
+   background: none
 }
 
 
@@ -1344,7 +1366,7 @@
 }
 .button a[href]:link:hover, .button a[href]:visited:hover {
    background: #e7f2e2;
-   border: .1em solid #006400;
+   border-color: #006400;
 }
 
 #join-fsf a, #support-the-fsf a.join {
@@ -1449,9 +1471,7 @@
    padding: 1px;
    margin: 0;
 }
-li#more-links {
-   float: right;
-}
+
 
 /* For Firefox (can't set line-height when "a" is displayed inline) */
 #navigation a, ul#edu-navigation a, #fsf-links a {
@@ -1461,6 +1481,10 @@
    margin: 0;
 }
 
+#more-links { float: right; padding: 0; }
+#more-links span { font-size: 1.1em; line-height: .8em; }
+#more-links sup { font-size: 1.2em; }
+
 #back-to-top {
    float: right;
    line-height: 1.9em;
@@ -1502,9 +1526,10 @@
 ul#edu-navigation li a:hover { background: #fafafa; }
 #fsf-links        li a:hover { background: #eee; }
 
-#navigation       li.active,
+#navigation       li.active a,
 ul#edu-navigation li.active,
-ul#edu-navigation li.current {
+ul#edu-navigation li.current,
+#navlinks         li.current > a {
    font-style: italic;
    cursor: default;
 }
@@ -1517,6 +1542,11 @@
 ul#edu-navigation li.current {
    background: white;
 }
+#navlinks li.current > a[href],
+#navlinks li.current > a[href]:hover {
+   color: #333;
+   background: none;
+}
 
 
 /*====================================================================*/
@@ -1529,8 +1559,8 @@
 #fsf-frame a[href], #fssbox label, form.header input,
 .button a[href], #header a[href], #fsf-support,
 #navigation a[href], ul#edu-navigation a[href], #fsf-links a[href],
+#navlinks, #navlinks a[href],
 .edu-breadcrumb, .edu-breadcrumb a[href],
+.breadcrumb, .breadcrumb a,
 .trans-disclaimer, .trans-disclaimer a[href] {
-   font-family: "Liberation Sans", "FreeSans", sans-serif;
-}
-
+   font-family: "Noto Sans Display", "Noto Sans", "Liberation Sans", 
"FreeSans", sans-serif; }