www/server/staging education.css body-include-1...

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 19/12/09 11:34:41

Modified files:
        server/staging : education.css body-include-1.html 

Log message:
        Hide translist and searcher under icons (no JS).

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/education.css?cvsroot=www&r1=1.7&r2=1.8
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/body-include-1.html?cvsroot=www&r1=1.4&r2=1.5

Patches:
Index: education.css
===================================================================
RCS file: /webcvs/www/www/server/staging/education.css,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -b -r1.7 -r1.8
--- education.css       8 Dec 2019 16:00:52 -0000       1.7
+++ education.css       9 Dec 2019 16:34:41 -0000       1.8
@@ -76,53 +76,72 @@
 
 #toplinks {
     float: none;
+    width: 94%;
+    font-size: .9em;
     line-height: 1.2em;
     font-family: sans-serif;
-    padding: .5em 3%;
+    text-transform: uppercase;
     background: #edf7fe;
+    padding: .5em 3% 0;
     margin: 0;
 }
-#skip, #set-language {
+
+#searcher {
     display: inline-block;
-    font-size: .9em;
-    padding: 0 1em .5em 0;
+    text-align: left;
+    font-size: inherit;
+    background: #edf7fe;
+    padding: 0 1em .3em 0;
+    margin: 0;
 }
-#skip a {
-    color: #555;
+form.header input[type="text"] {
     font-weight: normal;
+}
+form.header input[type="submit"] {
     text-transform: uppercase;
+}
+
+#toplinks a {
+    font-weight: normal;
+    font-size: inherit;
     margin: 0;
 }
-#skip span {
-    display: none;
+#skip, #set-language {
+    display: inline-block;
+    padding: 0 1em .3em 0;
+    margin: 0;
 }
-#set-language a {
-    font-size: .9em;
-    text-transform: uppercase;
-    font-weight: normal;
+#skip a, #set-languages a {
+    color: #555;
     margin: 0;
 }
+#skip span {
+    display: none;
+}
 
 #page-languages {
     display: inline-block;
-    font-size: .9em;
     line-height: 1.2em;
+    padding: 0;
+    margin: 0;
 }
-#translations {
-    display: inline-block;
-    font-size: inherit;
-    margin: 0 0 .5em;
+#page-languages form {
+    display: none;
 }
-#translations p {
+#translations {
     display: inline;
+    font-size: .9em;
+    padding: 0;
     margin: 0;
 }
 #translations span {
+    display: inline;
     font-size: inherit;
+    text-transform: none;
 }
 #translations span a {
     font-size: inherit;
-    font-weight: normal;
+    text-transform: uppercase;
     padding: 0;
     margin: 0;
 }
@@ -130,21 +149,8 @@
     font-weight: bold;
 }
 
-#searcher {
-    float: right;
-    font-size: .9em;
-    background: #edf7fe;
-    padding: 1px 0 .5em 1em;
-    margin: 0;
-}
-form.header input[type="text"] {
-    font-weight: normal;
-}
-form.header input[type="submit"] {
-    text-transform: uppercase;
-}
-
 #skip a, #set-language a, #translations {
+    display: inline-block;
     padding: .25em .7em;
     background: white;
     border: .1em solid #ccc;
@@ -154,8 +160,114 @@
     -webkit-border-radius: .3em;
     -opera-border-radius: .3em;
 }
-#translations {
-    padding-right: 0;
+
+input#search-button, input#language-button {
+    display: none;
+}
+#searcher img {
+    display: none
+}
+#page-languages img {
+    display: none;
+}
+
+@media (min-width: 0) {
+    #toplinks {
+        display: table;
+        text-align: center;
+        position: relative;
+    }
+
+    #searcher {
+        display: table-cell;
+        text-align: center;
+        vertical-align: top;
+        padding: 0 .5em;
+    }
+
+    #skip, #set-language {
+        display: table-cell;
+        vertical-align: top;
+    }
+    #skip {
+        padding-right: 0 .5em 0 0;
+    }
+    #set-language {
+        padding: 0 .5em;
+    }
+
+    #page-languages {
+        display: table-cell;
+        padding: 0 0 0 .5em;
+    }
+    #page-languages img {
+        height: 2em; min-height: 2em;
+    }
+    #translations {
+        position: absolute;
+        top: 100%; right: 3%;
+        z-index: 2;
+        font-size: inherit;
+        padding: 0 .5em;
+    }
+    #translations p {
+        display: block;
+        line-height: 1em;
+    }
+    #translations span {
+        display:  block;
+        font-size: inherit;
+    }
+    #translations span a {
+        font-size: inherit;
+        font-weight: normal;
+    }
+
+    input#search-button, input#language-button {
+        display: none;
+    }
+    #page-languages img {
+        display: inline;
+    }
+    #searcher img {
+        display: none
+    }
+    #translations {
+        display: none;
+    }
+    #page-languages input#language-button:checked ~ #translations {
+        display: block;
+    }
+}
+
+@media (max-width: 40em) {
+    #searcher img {
+        display: inline;
+        height: 1.9em; min-height: 1.9em;
+    }
+    #searcher form {
+        display: none;
+    }
+    #searcher input#search-button:checked ~ form {
+        display: block;
+    }
+    #searcher form {
+        position: absolute;
+        top: 100%; right: 3%;
+        z-index: 3;
+    }
+}
+
+@media (max-width: 30em) {
+    body { font-size: .9em; }
+    #gnu-banner span { display: none; }
+}
+
+@media (min-width: 60em) {
+    #toplinks {
+        width: 60%;
+        padding: .5em 20% 0;
+    }
 }
 
 /*** From graphics.css ***/

Index: body-include-1.html
===================================================================
RCS file: /webcvs/www/www/server/staging/body-include-1.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -b -r1.4 -r1.5
--- body-include-1.html 8 Dec 2019 16:00:52 -0000       1.4
+++ body-include-1.html 9 Dec 2019 16:34:41 -0000       1.5
@@ -12,25 +12,33 @@
  <span id="skip"><a title="Skip to main text"
  href="#content"><span>Skip to main text </span>&#9660;</a></span>
 
-<div id="searcher">
+<div id="searcher" title="Search www.gnu.org with your keywords">
+ <input type="checkbox" id="search-button" />
+ <label for="search-button">
+  <img src="/server/staging/layout/search.png"
+       alt="&nbsp;[search-icon]&nbsp;" style="height: 1.5em" />
+ </label>
  <form method="get" action="//www.gnu.org/cgi-bin/estseek.cgi" class="header">
   <div>
-  <input title="Enter keywords"
-         name="phrase" id="phrase" type="text" size="18" accesskey="s"
+   <input name="phrase" id="phrase" type="text" size="18" accesskey="s"
          value="Why GNU/Linux?" onfocus="this.value=''" />
-  <input title="Search www.gnu.org"
-         type="submit" value="Search" />
+   <input type="submit" value="Search" />
   </div>
  </form>
 </div><!-- /searcher -->
 
- <div id="set-language">
+<div id="set-language">
  <span class="gnun-split"></span>
  <!--#echo encoding="none" var="language_selector" -->
  Set language<span class="gnun-split"></span><!--#echo encoding="none"
  var="closing_anchor"--></div>
 
 <div id="page-languages" title="Available languages for this page">
+ <input type="checkbox" id="language-button" />
+ <label for="language-button">
+  <img src="/server/staging/layout/language.png"
+       alt="&nbsp;[Translation icon]&nbsp;" />
+ </label>
 <!--#echo encoding="none" var="TRANSLATION_LIST" -->
 <!--#elif expr="$INITIAL_TRANSLATIONS_LIST = included" -->
 <!-- if initial translation list isn't included before banner.html,