[Members] Proposal: Re-Design of the XEP HTML Pages

Jonas Schäfer jonas at wielicki.name
Wed Apr 3 16:45:02 UTC 2019

Hey folks,

(Editor Hat on)

For some reason, I was in the mood for writing CSS, and also I was a tad 
unhappy with the mobile rendering of our XEP pages. In addition, I am of  the 
opinion that they could use a bit of modernizing.

So I went ahead and created a draft of a new design for XEPs. You can take a 
look at an example here:


(All current XEPs are available there, just modify the URL. Note that these 
are not official XEP renderings and they may differ from the versions on 
xmpp.org in content for $reasons. Links from those renderings to other XEPs go 
to the official documents.)

Summary of changes:

- Completely new CSS based on yaml.de
- Removed the indent everywhere (-> renders better on small screens)
- Replaced some parts of XSL magic with HTML/CSS magic (e.g. the TOC 
- Removed legacy stuff and replaced it with modern stuff
- Added anchor links to each section, example and table so that you don’t have 
to scroll up to link to a specific thing
- Exchanged the link colour for another colour from the XSF "corporate 
- Re-organized the header a little

I would love to feedback and stuff you’d like to see in the new design. Of 
course, encouragement to continue this is also highly appreciated ;).

Things I have planned:

- Move the ToC to the left side of the screen so that it stays always visible 
if the screen is wide enough for that (should be doable without JavaScript)
- Add a "Burger Menu" style ToC menu to the top of the screen on small screens 
(may require JavaScript)
- Cleanup of the revision history section (it looks pretty bad at the moment)
- Maybe do something with the footnotes -- ideas welcome
- Adapt the margins / paddings on small screens (especially code blocks and 

kind regards,
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 833 bytes
Desc: This is a digitally signed message part.
URL: <http://mail.jabber.org/pipermail/members/attachments/20190403/9563baaf/attachment.sig>

More information about the Members mailing list