Add CSS to style the UI and article content
Add stylesheets (CSS) that style the UI and the content elements in the article.
The style should be grayscale except for links, which should be medium blue. A grayscale theme makes it easier for people evaluating Antora to visualize how their own style fits into the picture, which is really the whole point of the default UI.
The header / topbar should have a black background (hex 0a0a0a) with white text. The footer should have a dark gray background (hex 2c2c2c) with light gray text (hex 8a8a8a). The navigation sidebar and toolbar should have a light gray background (hex fafafa). The main content / article should have a white background with dark grey text (hex 333).
The current domain name and version should be displayed at the bottom of the navigation sidebar as a drawer. When clicked, this drawer should open to reveal a list of links to all the other domains and versions. The open drawer should cover the navigation sidebar when open.
The interface should use the font Roboto. Bold text should have a font weight of 500 instead of the default 700. Monospaced text in the article should use the font Roboto Mono.
Admonition icons should be styled such that the category is displayed as a pill in the upper-left corner of the content box. The content box should span the width of the container. The colors for the admonition categories should be as follows:
- note: hex 1f78d1
- tip: hex 1aaa55
- important: hex db3b21
- caution: hex 59598a
- warning: hex de7e00
The level-1 section title should have a bottom border (hex ddd) that spans the width of the container. When the mouse hovers over the section title, the section symbol should appear to the left of the title.
Borders should be light gray (hex ddd), such as on tables and around source code blocks.
The UI should have breakpoints at 700px and 1024px. Above those values, the visitor sees a site optimized for desktop, which reveals the navigation sidebar by default. Between those values, the visitor sees a site optimized for tablet, with the navigation sidebar sliding when the menu icon in the toolbar is clicked. Below those values, the visitor see a site optimized for mobile / phone, in which all navigation menus are presents as overlays behind toggle buttons.
Here's a mockup that shows how the UI should look:
