emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed

From: Timothy <tecosaur@gmail.com>
To: Adam Porter <adam@alphapapa.net>
Cc: emacs-orgmode@gnu.org
Subject: Re: [Worg] Proposing a few CSS changes
Date: Sun, 26 Sep 2021 03:51:44 +0800	[thread overview]
Message-ID: <87pmswe7ur.fsf@gmail.com> (raw)
In-Reply-To: <87fstud7ho.fsf@alphapapa.net>

[-- Attachment #1: Type: text/plain, Size: 1908 bytes --]

Hi  Adam,

> I’d like to propose some changes to Worg’s CSS that I think make it much
> more readable.  Here are some before/after screenshots:

Thanks for proposing these changes to Worg’s CSS. I have a few thoughts on them,
which I will share below.

> The changes are simply removing some rules, which allows the user’s
> configured browser font settings to be applied, as well as setting the
> max-width of the content to 60em.  In CSS terms, Firefox’s inspector
> provides this copy of the changes:

I’m a big fan of the shift to a fixed em-based max width. However, I’m not quite
sold on a few of the other changes, for instance the font change. While it does
vary, I must say than in particular I find the default serifed font of browsers
somewhat unattractive. Have you considered instead a sans-serif system font
stack? For example, this is what I used on the homepage:
┌────
│ -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
└────

Regarding the header colour, while I’m not much of a fan of the original grey,
perhaps this would be a chance to introduce some visual ties with the rest of
the site and the logo, for example by setting the heading colour to `#587e72' (the
dark gree from the Org logo).

I also tend to find the default font size slightly to small on most browsers.
I’d be in favour of bumping up the base fontsize to `1.2rem' and changing the
width restriction from `60em' to `60rem' so it remains constant.

Lastly, on padding, I feel you may have been a bit over-zealous in your removal
of padding from headlines. IMO a bit more space helps visually separate sections
and let them “breath”, and browsers defaults tend to pack things a bit more
densely than I would.

That’s it from me 🙂.

All the best,
Timothy

next prev parent reply	other threads:[~2021-09-25 20:09 UTC|newest]

Thread overview: 20+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2021-09-24  2:37 [Worg] Proposing a few CSS changes Adam Porter
2021-09-24  8:00 ` Eric S Fraga
2021-09-25 13:58 ` Bastien
2021-09-26  0:25   ` Adam Porter
2021-09-25 19:51 ` Timothy [this message]
2021-09-26  0:37   ` Adam Porter
2021-09-26  3:42     ` Timothy
2021-09-26  5:46       ` Adam Porter
2021-09-26  8:29         ` Stefan Nobis
2021-09-26  8:56           ` Timothy
2021-09-26 10:40             ` Stefan Nobis
2021-09-27 15:45     ` Eric S Fraga
2021-09-27 18:01       ` Thomas S. Dye
2021-09-26 12:12   ` Max Nikulin
2021-10-02  8:17 ` Timothy
2021-10-02 11:11   ` Adam Porter
2021-10-02 11:29     ` Timothy
2021-10-02 12:07       ` Adam Porter
2021-10-02 12:00     ` Eric S Fraga
2021-10-02 18:24       ` Thomas S. Dye

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

  List information: https://www.orgmode.org/

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=87pmswe7ur.fsf@gmail.com \
    --to=tecosaur@gmail.com \
    --cc=adam@alphapapa.net \
    --cc=emacs-orgmode@gnu.org \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link

Code repositories for project(s) associated with this public inbox

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).