mirror of
https://github.com/docker-mailserver/docker-mailserver.git
synced 2024-01-19 02:48:50 +00:00
docs(styles): Add external link icon workaround
Adds some third-party CSS as`mkdocs-material` doesn't seem interested in a PR to upstream this feature to the community. --- Uses a font icon approach for the external link as alternatives like SVG was reported in PR as breaking on Chrome. The logo has been made larger than theme default, it needs a little push from the left to align well with the tabs below it. --- Unrelated: Additionally experiment with the Instant Navigation feature. --- docs(styles): Various improvements Multiple related commits from original PR have been squashed into this. Some messages may be redundant due to loss of history. --- docs(styles): Minor improvements - Use relative path for external-link - UI enhancement for version selector - Improve inline documentation for `customizations.css` Make separate styling sections more evident (since we're not using multiple files or build tools). --- docs(styles): Replace permalink to fix UX bug --- docs(styles): Replace permalink feature for alternative approach Previous commit already switched `permalink` for `anchorlink` option, but the `#` symbol had UI concerns regarding font-size/scale and fitting into the gutter. Gutter change reverted, switch to REM units and symbol replaced by thin vertical rectangle scaled by font height, far better consistency for placement. --- docs(styles): Refactor the heading link style Effectively ended up making a border-left line style, just not as consistent and more complicated. Fixed that by adjusting styles. Adds optional background fill and restores inline code style for headings.
This commit is contained in:
polarathene
parent
251a87e622
commit
f13df19b87
84
docs/content/assets/css/customizations.css
Normal file
84
docs/content/assets/css/customizations.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/* This file adds our styling additions / fixes to maintain. */
|
||||
|
||||
/* ============================================================================================================= */
|
||||
|
||||
/* External Link icon feature. Rejected from upstreaming to `mkdocs-material`.
|
||||
Alternative solution using SVG icon here (Broken on Chrome?): https://github.com/squidfunk/mkdocs-material/issues/2318#issuecomment-789461149
|
||||
Tab or Nav sidebar with non-relative links will prepend an icon (font glyph)
|
||||
If you want to append instead, switch `::before` to `::after`.
|
||||
*/
|
||||
/* reference the icon font to use */
|
||||
@font-face {
|
||||
font-family: 'external-link';
|
||||
src: url('../fonts/external-link.woff') format('woff');
|
||||
}
|
||||
|
||||
/* Matches the two nav link classes that start with `http` `href` values, regular docs pages use relative URLs instead. */
|
||||
.md-tabs__link[href^="http"]::before, .md-nav__link[href^="http"]::before {
|
||||
display: inline-block; /* treat similar to text */
|
||||
font-family: 'external-link';
|
||||
content:'\0041'; /* represents "A" which our font renders as an icon instead of the "A" glyph */
|
||||
font-size: 80%; /* icon is a little too big by default, scale it down */
|
||||
}
|
||||
|
||||
/* ============================================================================================================= */
|
||||
|
||||
/* UI Improvement: Header bar (top of page) adjustments - Increase scale of logo and adjust white-space */
|
||||
/* Make the logo larger without impacting other header components */
|
||||
.md-header__button.md-logo > img { transform: scale(180%); margin-left: 0.4rem; }
|
||||
/* Reduce the white-space between the Logo and Title components */
|
||||
.md-header__title { margin-left: 0.3rem; }
|
||||
|
||||
/* ============================================================================================================= */
|
||||
|
||||
/* UI Improvement: Add light colour bg for the version selector, with some rounded corners */
|
||||
.md-version__current {
|
||||
background-color: rgb(255,255,255,0.18); /* white with 18% opacity */
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* ============================================================================================================= */
|
||||
|
||||
/*
|
||||
UX Bugfix for permalink affecting typography in headings.
|
||||
Upstream will not fix: https://github.com/squidfunk/mkdocs-material/issues/2369
|
||||
*/
|
||||
|
||||
/* Headings are configured to be links (instead of only the permalink symbol), removes the link colour */
|
||||
div.md-content article.md-content__inner a.toclink {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
/* Instead of a permalink symbol at the end of heading text, use a border line on the left spanning height of heading */
|
||||
/* Includes optional background fill with rounded right-side corners, and restores inline code style */
|
||||
/* NOTE: Headings with markdown links embedded disrupt the bg fill style, as they're not children of `a.toclink` element */
|
||||
div.md-content article.md-content__inner a.toclink {
|
||||
display: inline-block; /* Enables multi-line support for both border and bg color */
|
||||
border-left: .2rem solid transparent; /* transparent placeholder to avoid heading shift during reveal transition */
|
||||
margin-left: -0.6rem; /* Offset heading to the left */
|
||||
padding-left: 0.4rem; /* Push heading back to original position, margin-left - border-left widths */
|
||||
transition: background-color 200ms,border-left 200ms;
|
||||
|
||||
/* Only relevant if using background highlight style */
|
||||
border-radius: 0 0.25rem 0.25rem 0;
|
||||
padding-right: 0.4rem;
|
||||
}
|
||||
|
||||
div.md-content article.md-content__inner a.toclink:hover,
|
||||
div.md-content article.md-content__inner :target > a.toclink {
|
||||
border-left: .2rem solid #448aff; /* highlight line on the left */
|
||||
background-color: #b3dbff6e; /* background highlight fill */
|
||||
transition: background-color 200ms,border-left 200ms;
|
||||
}
|
||||
|
||||
/* Upstream overrides some of the `code` element styles for headings, restore them */
|
||||
div.md-content article.md-content__inner a.toclink code {
|
||||
padding: 0 0.3em; /* padding to the left and right, not top and bottom */
|
||||
border-radius: 0.2rem; /* 0.1rem of original style bit too small */
|
||||
background-color: var(--md-code-bg-color);
|
||||
}
|
||||
|
||||
.highlight.no-copy .md-clipboard { display: none; }
|
||||
|
||||
/* ============================================================================================================= */
|
||||
BIN
docs/content/assets/fonts/external-link.woff
Normal file
BIN
docs/content/assets/fonts/external-link.woff
Normal file
Binary file not shown.
|
|
@ -16,6 +16,10 @@ theme:
|
|||
features:
|
||||
- navigation.tabs
|
||||
- navigation.expand
|
||||
- navigation.instant
|
||||
|
||||
extra_css:
|
||||
- assets/css/customizations.css
|
||||
|
||||
# We do not use `mike`, but enabling this will enable the version selector UI.
|
||||
# It references `versions.json` on `gh-pages` branch,
|
||||
|
|
@ -26,7 +30,7 @@ extra:
|
|||
|
||||
markdown_extensions:
|
||||
- toc:
|
||||
permalink: ⚓︎
|
||||
anchorlink: true
|
||||
- abbr
|
||||
- attr_list
|
||||
- admonition
|
||||
|
|
|
|||
Loading…
Reference in a new issue