diff --git a/src/overrides/partials/header.html b/src/overrides/partials/header.html index 0b6058769..a50770054 100644 --- a/src/overrides/partials/header.html +++ b/src/overrides/partials/header.html @@ -81,6 +81,9 @@ + {% if page and nav and page.url == nav.homepage.url %} + + {% endif %} {% include "partials/search.html" %} {% endif %} {% if config.repo_url %} diff --git a/src/stylesheets/extra.css b/src/stylesheets/extra.css index d40c3e65f..a0ae7d680 100644 --- a/src/stylesheets/extra.css +++ b/src/stylesheets/extra.css @@ -54,4 +54,56 @@ body[dir=rtl] .metadata.page-metadata .contributors-text{ .arithmatex{ overflow-y: hidden !important; +} + +/* Keyboard hint for search ("/") */ +.kbd-hint { + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: 4px; + padding: 0 6px; + height: 22px; + border-radius: 4px; + border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.2)); + background: var(--md-default-bg-color, #fff); + color: var(--md-default-fg-color, rgba(0,0,0,.87)); + font: 500 12px/1 var(--md-text-font, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif); + opacity: .72; +} + +/* Show "/" hint inside the search input on desktop */ +.md-search__form { + position: relative; +} + +.md-search__form::after { + content: "/"; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + display: inline-flex; + align-items: center; + justify-content: center; + height: 20px; + padding: 0 6px; + border-radius: 4px; + border: 1px solid var(--md-default-fg-color--lightest, rgba(0,0,0,.2)); + background: var(--md-default-bg-color, #fff); + color: var(--md-default-fg-color, rgba(0,0,0,.87)); + font: 500 12px/1 var(--md-text-font, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif); + opacity: .72; + pointer-events: none; +} + +/* Hide hint when typing/focused so it doesn't overlap text */ +.md-search__form:focus-within::after, +.md-search__form input:not(:placeholder-shown) + .md-search__icon ~ *::after { + opacity: 0; +} + +/* Only show on wider viewports where the inline search is visible */ +@media (max-width: 959px) { + .md-search__form::after { display: none; } } \ No newline at end of file