docs: variablelist rendering - Mailing list pgsql-www

From Andres Freund
Subject docs: variablelist rendering
Date
Msg-id 20231103204435.tz6qgxbht3n62hi5@awork3.anarazel.de
Whole thread Raw
List pgsql-www
Hi,

The styles used to render variablelist on pages like
https://www.postgresql.org/docs/devel/install-meson.html#MESON-OPTIONS

imo make it hard to visually attribute the description of an option to the
option, as the vertical space between the description and the variable is
about the same as the to the next option.

This seems to be from

https://git.postgresql.org/gitweb/?p=pgweb.git;a=blob;f=media/css/main.css;h=80afc3d113cd1992b890ff2b90c04b991290b1b2;hb=HEAD#l1345
and a few related rules.

I'm not sure this was intended, it looks like there are a few rules
interacting with each other, some from bootstrap.

First dd has a top margin of 1 from
#docContent .variablelist dd {
  margin-top: 1rem;
}

and a bottom margin of 0.5rem from bootstrap (except for other margins it'd be
close to the next dt). Then p has a 1rem distance from both bottom and top:

#docContent .VARIABLELIST p,
#docContent .variablelist p,
#docContent .VARIABLELIST pre,
#docContent .variablelist pre {
  margin: 1rem 0 1rem 2rem !important;;
}

making the distance from both the same.


The indentation of items is also very deep - is that intended? Kinda looks
like it accidentally might have gotten doubled. There's 2rem from

#docContent .VARIABLELIST dd,
#docContent .variablelist dd {
  margin-inline-start: 2rem;
}

*and* 2 rem from

#docContent .VARIABLELIST p,
#docContent .variablelist p,
#docContent .VARIABLELIST pre,
#docContent .variablelist pre {
  margin: 1rem 0 1rem 2rem !important;;
}

which are not collapsed (I think that just happens vertically). So it's 4 rem
deep...



After adjusting this in the browser, I noticed that the itemized lists inside

https://www.postgresql.org/docs/devel/install-meson.html#CONFIGURE-WITH-UUID-MESON

ended up very deeply indented. But that actually something happening outside
of this context / without changing anything else. Check e.g.:

https://www.postgresql.org/docs/devel/btree-behavior.html

There's a 2.5rem left margin from:
#docContent ul.itemizedlist {
  margin-left: 2.5rem;
}

*and* padding - I think from the desktop browser defaults (both in firefox and
chrome on linux).  I doubt that was intended?

Greetings,

Andres Freund



pgsql-www by date:

Previous
From: emma.vriezen@kpnmail.nl
Date:
Subject: Wiki editor request
Next
From: Joe Conway
Date:
Subject: Re: Wiki editing access request