Subject: bug#42815: [GNUzilla home page] Proposed changes

From: Thérèse Godefroy <[email-masked]>
Date: Wed, 12 Aug 2020 17:42:15 +0200

Le 12/08/2020 à 15:59, Thérèse Godefroy a écrit :
[...]
>> I'm thinking of going the other way, pulling the logo up on the same
>> line as the title, something like <https://www.gnu.org/software/emacs/>,
>> and making it a bit smaller maybe.  I'll experiment with that later
>> tonight and see how it turns out.
>>
> I like your idea, Bill. I may give it a try too.
[...]

See gnuzilla.1.diff, attached.

The text wraps, otherwise it would look like a long tail. I don't think
the ice cat has such a long one.

The logo and the text will stay side by side down to 19em (304px). Below
that, they are centered.

Thérèse

Index: index.html
===================================================================
RCS file: /webcvs/gnuzilla/gnuzilla/index.html,v
retrieving revision 1.74
diff -U 2 -r1.74 index.html
--- index.html	11 Aug 2020 22:49:33 -0000	1.74
+++ index.html	12 Aug 2020 15:30:55 -0000
@@ -4,8 +4,17 @@
 <title>GNUzilla and IceCat - GNU Project - Free Software Foundation</title>
 <style type="text/css" media="print,screen"><!--
+  #main-heading {
+    width: 18em;
+    max-width: 100%;
+    margin: 0 auto 2em;
+  }
+  h2 {
+    max-width: 6em;
+    float: right;
+    margin: .2em 0 0 1em;
+  }
   img#logo {
-    display:block;
-    width:8em;
-    margin:1.25em auto 2.5em;
+    width: 5.6em;
+    margin: 0;
   }
   #features {
@@ -22,11 +31,26 @@
   h4 { font-size: 1.125em; }
   #content .button { margin-bottom: 1.5em; }
+
+@media (max-width: 19em) {
+  #main-heading {
+    width: 100%;
+    text-align: center; }
+  h2 {
+    float: none;
+    width: 100%;
+    margin: 0 auto .5em;
+  }
+}
+@media (min-width: 30em) {
+  #main-heading { width: 21em; }
+  img#logo { width: 6.5em; }
+}
 --></style>
 <!--#include virtual="/server/gnun/initial-translations-list.html" -->
 <!--#include virtual="/server/banner.html" -->
 <div class="reduced-width">
-<h2 class="c">GNUzilla and IceCat</h2>
 
-<p>
+<div id="main-heading">
+<h2>GNUzilla and IceCat</h2>
   <a href="icecat.png">
     <img src="icecat-128.png" 
@@ -34,6 +58,6 @@
          alt=" [GNU IceCat logo] " />
   </a>
-</p>
-
+</div>
+<div style="clear: both"></div>
 
 <p>