add modded CSS from basic theme for footnotes/citations

[2bndy5]

resolves #312

I also noticed that the npm run check wasn't getting executed in CI; I think there were some changes in GH Actions' expressions about contains().

[jbms]

One thing I noticed is that the first line of the footnote text, if it is wrapped, gets indented more because it is pushed over by the float. This problem is addressed by the use of a table or ol element. We could also fix it in CSS though by using CSS grid without changing the html. Alternatively just increasing the padding would probably fix it in most cases.

[2bndy5]

I noticed that too. I actually decreased the padding (paragraph's margin-left) because wrapped lines looked oddly estranged. As for the floated element pushing the first line of a paragraph, I'll look into the CSS grid idea. The problem is that the footnote label/back-link(s) are not guaranteed to always be the same width (as evident by the citation example).

[2bndy5]

I ended up going with flex because CSS grids are designed to be statically oriented (based on space available) which tended to reserve more space for the footnote label/backrefs than minimally needed. I like the way this looks now:

EDIT: scratch that. A second paragraph in footnote content renders as a new column... Still investigating

[2bndy5]

Using the grid technique works pretty well:

Obviously, I have to adjust the margin of the paragraphs still...

But for citations that have a span for .label and .backrefs the grid auto expands to 2 rows to compensate for 2 span items in column 1:

[2bndy5]

Ok, I just used separate rules for specifying columns of a citation or footnote. Also, the contents are not guaranteed to be paragraphs, so I adjusted the copied p selectors from the basic theme to use :not(span.class).

locally used examples:

[2bndy5]

I found and fixed a flaw with my CSS grid attempt. Citations and footnotes now use a 3 col grid. The 2nd col is used for multiple backrefs. If there is only 1 backref, then it is incorporated into the span.label (in col 1) and col 2 is auto-shrunk to invisible width.

[jbms]

Thanks.

I'm not sure exactly what the desired formatting is. However if we want to achieve table-like formatting, where the text content is all aligned even if the label portions have different widths, then we need all of the footnotes to be contained within a single grid.

One way to achieve that is to apply display: grid to the outer aside.footnotes container, apply display: contents; to the inner aside.footnote element, and then assign the inner elements as you are currently doing. That is the technique I've used for similar things in the past.

Now that css subgrid (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) is supported by all major browsers, this could also be done in a cleaner way using CSS subgrid without having to rely on the display: contents; hack. However, I haven't used CSS subgrid myself.

[2bndy5]

I did see the subgrid docs when researching, but I didn't think it was really applicable.

Using a subgrid, the multitude of elements put in col 3 overlap each other:

When each footnote/citation is a separate grid, the multitude of elements in col 3 get a new row for each element:

I'm still trying to figure out a way to use subgrids for this. It would be easier if the footnote/citation content was encapsulated in a container element, but they aren't.

[2bndy5]

ping @jbms

TL;DR: using nested CSS grids would require monkeypatching Sphinx's output of footnotes/citations. The body of the footnote/citation needs to be contained in a separate HTML element, but instead Sphinx outputs the body within the same container element that also holds the elements describing the back-ref.

I'd rather not resort to monkeypatching just to satisfy a desired CSS design.