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>
