bug#47671: Small tweaks & fixes for Emacs/GNU ELPA websites

bug#47671: Small tweaks & fixes for Emacs/GNU ELPA websites

[Sebastian Urban]

Hello!

First, GNU ELPA website. According to the LAYOUT.CSS
(http://git.savannah.gnu.org/cgit/emacs/elpa.git/plain/html/layout.css):

body {
   font-family: "fira sans", sans;
   (...)
}

pre {
   font-family: "Fira Mono";
   (...)
}

Website should set Fira fonts, but if external fonts are not allowed,
it loads the default font (usually a serif font, e.g. Times New Roman
on Windows) for everything, because for example Firefox expects
"sans-serif" instead "sans", while "pre" section is missing
"monospace". Additionally, ".tt, code" don't have defined fonts, hence
on the main page "Fira Sans" is used (for keys and commands) instead of
monospace font.

The DIFF:

--- old/elpa/html/layout.css	2021-04-08 14:13:47.982155600 +0200
+++ new/elpa/html/layout.css	2021-04-09 12:27:15.610503900 +0200
@@ -47,7 +47,7 @@
  /* End of reset */
  
  body {
-  font-family: "fira sans", sans;
+  font-family: "Fira Sans", sans-serif;
    line-height: 1.5em;
    font-size: 1.2em;
    color: #333;
@@ -92,6 +92,7 @@
  }
  
  tt, code {
+  font-family: "Fira Mono", monospace;
    background-color: rgb(238, 238, 238);
    border: 1px solid rgb(187, 187, 187);
    padding: 0px 6px;
@@ -99,7 +100,7 @@
  }
  
  pre {
-  font-family: "Fira Mono";
+  font-family: "Fira Mono", monospace;
    font-size: 14px;
    background: #fafafa;
    padding: 15px;



Second, "A Guided Tour of Emacs" website. According to the LAYOUT.CSS
(https://www.gnu.org/software/emacs/layout.css):

pre {
   font-family: monospace;
   (...)
   font-size: 1.2em;
}

This is used in the "Download" section, actually. It's missing "Fira
Mono", and I don't think font-size is needed there at all.

body {
   font-family: "fira sans", sans;
   (...)
}

Basically the same problem, as above (1st point).

tt, code, kbd {
   background: #efeadc;
   border: 1px solid #ccc;
   padding: 2px 6px 0px;
   border-radius: 4px;
   /* color: #ddd; */
}

No font-family defined, commands are printed with "Fira Sans"/"the
default font" depending on the permission.

The DIFF:

--- old/emacs/layout.css	2017-10-13 11:34:01.000000000 +0200
+++ new/emacs/layout.css	2021-04-08 23:15:06.111355600 +0200
@@ -59,7 +59,7 @@
  }
  
  pre {
-  font-family: monospace;
+  font-family: "Fira Mono", monospace;
    padding: 10px;
    background: #efeadc;
    margin: 20px 0px;
@@ -71,7 +71,7 @@
  /* End of reset */
  
  body {
-  font-family: "fira sans", sans;
+  font-family: "Fira Sans", sans-serif;
    line-height: 1.5em;
    font-size: 1.1em;
    color: #4E4742;
@@ -135,6 +135,7 @@
  }
  
  tt, code, kbd {
+  font-family: "Fira Mono", monospace;
    background: #efeadc;
    border: 1px solid #ccc;
    padding: 2px 6px 0px;

Finally, there is an "inline" style for "kbd" inside INDEX.HTML
(view-source:https://www.gnu.org/software/emacs/tour/index.html):

kbd {
   font-size: larger;
   background: #ffe;
}

It makes "kbd" elements, well, larger. I just think it looks better
without it, but this is just my opinion.



Third, there are leftovers after bug#43000:

--- old/emacs/emacs.html	2021-03-25 13:18:26.000000000 +0100
+++ new/emacs/emacs.html	2021-04-08 23:54:08.903893300 +0200
@@ -231,7 +231,7 @@
                          <li>New minor mode 'electric-quote-mode' for using curved quotes as you
                              type.</li>
                          <li>Character folding support in isearch.el.</li>
-                        <li>New and improved facilities for inserting Unicode characters: <tt>C-x 8</tt> now has
+                        <li>New and improved facilities for inserting Unicode characters: <kbd>C-x 8</kbd> now has
                              shorthands for several chars, such as U+2010 (HYPHEN), U+2011 (NON-BREAKING HYPHEN), and U+2012 (FIGURE DASH).</li>
  			<p>For more information, read the <a href="news/NEWS.25.1">News</a> file.</p>
                  </div>

Unfortunately, due to background colour for the "Releases" section,
visibility is rather bad. Possible solutions:
A. Remove background colour from ".releases" (this one: "background:
#F0EBDE;") AND set inline style for "kbd" like in the Emacs Tour (this
also means more consistency for "kbd"), i.e.:

kbd {
   background: #ffe;
}

B. Only set inline style for "kbd" as above.

--- old/emacs/documentation.html	2018-11-23 11:20:01.000000000 +0100
+++ new/emacs/documentation.html	2021-04-09 00:31:23.789193400 +0200
@@ -64,7 +64,7 @@
                          Reference Manual</cite> and several other manuals documenting major
                          modes and other optional features, can also be read online.  They are
                          also distributed with Emacs in
-                        <a href="/software/texinfo/">Info</a> format; type <tt>C-h i</tt> in
+                        <a href="/software/texinfo/">Info</a> format; type <kbd>C-h i</kbd> in
                          Emacs to view them.</p>
  
                      <ul>
@@ -95,7 +95,7 @@
                          appear on the other as well.</p>
                      <h2>Reporting bugs</h2>
                      <p>To report bugs, or to contribute fixes and improvements, use the
-                        built-in Emacs bug reporter (<tt>M-x report-emacs-bug</tt>) or send
+                        built-in Emacs bug reporter (<kbd>M-x report-emacs-bug</kbd>) or send
                          email to <a id="YouHelp" href=
                                      "http://mail.gnu.org/mailman/listinfo/bug-gnu-emacs">bug-gnu-emacs@gnu.org</a>.
                          You can browse our bug database at

Here, for consistency with the Emacs Tour, inline "kbd" could be added
as well.


-- 
S. U.

bug#47671: Small tweaks & fixes for Emacs/GNU ELPA websites

[Stefan Kangas]

tags 47671 fixed
close 47671
thanks

Sebastian Urban <mrsebastianurban@gmail.com> writes:

> First, GNU ELPA website. According to the LAYOUT.CSS
> (http://git.savannah.gnu.org/cgit/emacs/elpa.git/plain/html/layout.css):

Thanks for these fixes, they are now applied.  Please verify that
everything looks okay but note that it might take a day or two for the
websites to update.  See below for details.

> --- old/elpa/html/layout.css	2021-04-08 14:13:47.982155600 +0200
> +++ new/elpa/html/layout.css	2021-04-09 12:27:15.610503900 +0200
> @@ -47,7 +47,7 @@
>  /* End of reset */
>    body {
> -  font-family: "fira sans", sans;
> +  font-family: "Fira Sans", sans-serif;
>    line-height: 1.5em;
>    font-size: 1.2em;
>    color: #333;
> @@ -92,6 +92,7 @@
>  }
>    tt, code {
> +  font-family: "Fira Mono", monospace;
>    background-color: rgb(238, 238, 238);
>    border: 1px solid rgb(187, 187, 187);
>    padding: 0px 6px;
> @@ -99,7 +100,7 @@
>  }
>    pre {
> -  font-family: "Fira Mono";
> +  font-family: "Fira Mono", monospace;
>    font-size: 14px;
>    background: #fafafa;
>    padding: 15px;

Applied.

> --- old/emacs/layout.css	2017-10-13 11:34:01.000000000 +0200
> +++ new/emacs/layout.css	2021-04-08 23:15:06.111355600 +0200
> @@ -59,7 +59,7 @@
>  }
>    pre {
> -  font-family: monospace;
> +  font-family: "Fira Mono", monospace;
>    padding: 10px;
>    background: #efeadc;
>    margin: 20px 0px;
> @@ -71,7 +71,7 @@
>  /* End of reset */
>    body {
> -  font-family: "fira sans", sans;
> +  font-family: "Fira Sans", sans-serif;
>    line-height: 1.5em;
>    font-size: 1.1em;
>    color: #4E4742;
> @@ -135,6 +135,7 @@
>  }
>    tt, code, kbd {
> +  font-family: "Fira Mono", monospace;
>    background: #efeadc;
>    border: 1px solid #ccc;
>    padding: 2px 6px 0px;

Applied.

> Finally, there is an "inline" style for "kbd" inside INDEX.HTML
> (view-source:https://www.gnu.org/software/emacs/tour/index.html):
>
> kbd {
>   font-size: larger;
>   background: #ffe;
> }
>
> It makes "kbd" elements, well, larger. I just think it looks better
> without it, but this is just my opinion.

Yup, applied.

> Third, there are leftovers after bug#43000:
>
> --- old/emacs/emacs.html	2021-03-25 13:18:26.000000000 +0100
> +++ new/emacs/emacs.html	2021-04-08 23:54:08.903893300 +0200
> @@ -231,7 +231,7 @@
>                          <li>New minor mode 'electric-quote-mode' for using curved quotes as you
>                              type.</li>
>                          <li>Character folding support in isearch.el.</li>
> -                        <li>New and improved facilities for inserting Unicode characters: <tt>C-x 8</tt> now has
> +                        <li>New and improved facilities for inserting Unicode characters: <kbd>C-x 8</kbd> now has
>                              shorthands for several chars, such as U+2010 (HYPHEN), U+2011 (NON-BREAKING HYPHEN), and U+2012 (FIGURE DASH).</li>
>  			<p>For more information, read the <a href="news/NEWS.25.1">News</a> file.</p>
>                  </div>

Applied.

> Unfortunately, due to background colour for the "Releases" section,
> visibility is rather bad. Possible solutions:
>
> A. Remove background colour from ".releases" (this one: "background:
> #F0EBDE;") AND set inline style for "kbd" like in the Emacs Tour (this
> also means more consistency for "kbd"), i.e.:
>
> kbd {
>   background: #ffe;
> }

Fixed this in a slightly different way: I styled ".releases kbd" in the
same way as ".releases tt" was previously.

> B. Only set inline style for "kbd" as above.
>
> --- old/emacs/documentation.html	2018-11-23 11:20:01.000000000 +0100
> +++ new/emacs/documentation.html	2021-04-09 00:31:23.789193400 +0200
> @@ -64,7 +64,7 @@
>                          Reference Manual</cite> and several other manuals documenting major
>                          modes and other optional features, can also be read online.  They are
>                          also distributed with Emacs in
> -                        <a href="/software/texinfo/">Info</a> format; type <tt>C-h i</tt> in
> +                        <a href="/software/texinfo/">Info</a> format; type <kbd>C-h i</kbd> in
>                          Emacs to view them.</p>
>                        <ul>
> @@ -95,7 +95,7 @@
>                          appear on the other as well.</p>
>                      <h2>Reporting bugs</h2>
>                      <p>To report bugs, or to contribute fixes and improvements, use the
> -                        built-in Emacs bug reporter (<tt>M-x report-emacs-bug</tt>) or send
> +                        built-in Emacs bug reporter (<kbd>M-x report-emacs-bug</kbd>) or send
>                          email to <a id="YouHelp" href=
>                                      "http://mail.gnu.org/mailman/listinfo/bug-gnu-emacs">bug-gnu-emacs@gnu.org</a>.
>                          You can browse our bug database at
>
> Here, for consistency with the Emacs Tour, inline "kbd" could be added
> as well.

Applied.

bug#47671: Small tweaks & fixes for Emacs/GNU ELPA websites

[Sebastian Urban]

Everything looks good. Thanks, but...

> Second, "A Guided Tour of Emacs" website. According to the
> LAYOUT.CSS (https://www.gnu.org/software/emacs/layout.css):
>
> pre { font-family: monospace; (...) font-size: 1.2em; }
>
> This is used in the "Download" section, actually. It's missing "Fira
> Mono", and I don't think font-size is needed there at all.

I'm not sure what happened to the "font-size: 1.2em". I mean, I'm not
sure whether you skipped it or missed. I know, I forgot to add it to
the diff...

Inside "pre" you could also reduce "padding" from 10px to 5px.

>> Unfortunately, due to background colour for the "Releases" section,
>> visibility is rather bad. Possible solutions:
>>
>> A. Remove background colour from ".releases" (this one:
>> "background: #F0EBDE;") AND set inline style for "kbd" like in the
>> Emacs Tour (this also means more consistency for "kbd"), i.e.:
>>
>> kbd { background: #ffe; }
>
> Fixed this in a slightly different way: I styled ".releases kbd" in
> the same way as ".releases tt" was previously.

Well, that's simpler and works, although I was trying to make it
look similar to the "kbd" on the Tour website.


Other than that, I just wonder why "Fira Sans" is not capitalized,
while "Fira Mono" is?


--
S. U.

bug#47671: Small tweaks & fixes for Emacs/GNU ELPA websites

[Stefan Kangas]

Sebastian Urban <mrsebastianurban@gmail.com> writes:

> Everything looks good. Thanks, but...

Excellent, thanks for your continued attention to detail.

>> Second, "A Guided Tour of Emacs" website. According to the
>> LAYOUT.CSS (https://www.gnu.org/software/emacs/layout.css):
>>
>> pre { font-family: monospace; (...) font-size: 1.2em; }
>>
>> This is used in the "Download" section, actually. It's missing "Fira
>> Mono", and I don't think font-size is needed there at all.
>
> I'm not sure what happened to the "font-size: 1.2em". I mean, I'm not
> sure whether you skipped it or missed. I know, I forgot to add it to
> the diff...

Sorry, I missed it.  I thought you meant that it was merely redundant,
when you were in fact suggesting a visual improvement.

Fixed now; it looks much better.

> Inside "pre" you could also reduce "padding" from 10px to 5px.

I think it looks better with the slightly larger padding here, as I feel
it allows the text room to breathe.

There is of course room for subjective opinion here.  FWIW, I took a
look at the GitHub documentation for reference (they presumably have
actual designers doing their stuff) and they use a much larger 16px for
their pre-tags.

> Other than that, I just wonder why "Fira Sans" is not capitalized,
> while "Fira Mono" is?

I noticed that, but didn't bother as the result was the same here.
But we might as well capitalize it, so I did that now.

Thanks again for these suggestions!

bug#47671: Small tweaks & fixes for Emacs/GNU ELPA websites

[Sebastian Urban]

Alright, I have no further suggestions, so we can end this conversation.
Thanks for the upgrades.


--
S. U.