diff --git a/README.md b/README.md index 6bfb19bded..6173d02e2d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,16 @@
- Redoc logo + + + + + + Redoc 3.0 is coming — one renderer for OpenAPI 3.2, AsyncAPI, GraphQL, and MCP + + + + **[Learn what's coming in Redoc 3.x →](https://redocly.com/redoc-ce)** + + # Generate beautiful API documentation from OpenAPI diff --git a/demo/index.html b/demo/index.html index 8d751a6b1e..819fc59f6f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -29,6 +29,71 @@ redoc { display: block; } + + .demo-banner { + position: sticky; + top: 0; + z-index: 11; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + padding: 8px; + background: #99cdff; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-size: 14px; + line-height: 22px; + color: #000; + } + + .demo-banner[hidden] { + display: none; + } + + /* Horizontal padding keeps the centered text clear of the absolutely + positioned close button on narrow viewports. */ + .demo-banner p { + margin: 0; + padding: 0 30px; + text-align: center; + } + + .demo-banner a { + color: inherit; + text-decoration: underline; + text-underline-position: from-font; + text-decoration-skip-ink: none; + } + + .demo-banner button { + position: absolute; + top: 50%; + right: 8px; + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + padding: 3px; + border: 0; + border-radius: 8px; + background: transparent; + color: #000; + cursor: pointer; + } + + .demo-banner button:hover { + background: rgba(0, 0, 0, 0.08); + } + + /* The demo nav is also sticky at the top, so offset it by the banner's height + to keep the banner visible while scrolling. The height is measured in JS + rather than hardcoded because the banner text wraps on narrow viewports. */ + #container nav { + top: var(--demo-banner-height, 0px); + } +
+

A new home for Redoc is on the way. Take a look →

+ +
+ + +