diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 4095d259b..4bfb3075e 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -51,8 +51,14 @@
- GitHub - Download + + GitHub + repo + + + Download + latest +
diff --git a/docs/assets/terminal.css b/docs/assets/terminal.css index 2e9ae34f7..58bb59578 100644 --- a/docs/assets/terminal.css +++ b/docs/assets/terminal.css @@ -210,44 +210,70 @@ body::after { gap: 10px; } -.titlebar__link { +.titlebar__cta { display: inline-flex; align-items: center; - padding: 9px 12px; + gap: 8px; + padding: 8px 12px 8px 10px; border-radius: 12px; - background: color-mix(in oklab, var(--panel) 92%, transparent); - border: var(--border) solid var(--frame-border); + background: + linear-gradient(140deg, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%), + color-mix(in oklab, var(--panel) 92%, transparent); + border: var(--border) solid color-mix(in oklab, var(--frame-border) 80%, transparent); color: var(--text); text-decoration: none; - font-family: var(--font-pixel); - letter-spacing: 0.12em; - font-size: 12px; - text-transform: uppercase; - box-shadow: 0 6px 0 -3px rgba(0, 0, 0, 0.25); + box-shadow: + 0 6px 0 -3px rgba(0, 0, 0, 0.25), + inset 0 0 0 1px color-mix(in oklab, var(--panel2) 55%, transparent); } -.titlebar__link:hover { +.titlebar__cta:hover { border-color: color-mix(in oklab, var(--accent2) 45%, transparent); - box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent2) 30%, transparent); + box-shadow: + 0 0 0 2px color-mix(in oklab, var(--accent2) 30%, transparent), + 0 6px 0 -3px rgba(0, 0, 0, 0.25); } -.titlebar__link:active { +.titlebar__cta:active { transform: translateY(1px); box-shadow: 0 4px 0 -3px rgba(0, 0, 0, 0.25); } -.titlebar__link:focus-visible { +.titlebar__cta:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent2) 60%, transparent); outline-offset: 2px; } -.titlebar__link--accent { +.titlebar__cta--accent { background: - linear-gradient(120deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%), + linear-gradient(120deg, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%), color-mix(in oklab, var(--panel) 88%, transparent); border-color: color-mix(in oklab, var(--accent) 60%, var(--frame-border)); } +.titlebar__cta-label { + font-family: var(--font-pixel); + letter-spacing: 0.12em; + font-size: 12px; + text-transform: uppercase; +} + +.titlebar__cta-meta { + display: inline-flex; + align-items: center; + justify-content: center; + height: 20px; + padding: 0 8px; + border-radius: 999px; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.08em; + background: var(--code-bg); + color: var(--code-accent); + border: 1px solid color-mix(in oklab, var(--code-accent) 30%, transparent); + box-shadow: inset 0 0 12px color-mix(in oklab, var(--code-accent) 25%, transparent); +} + .theme-toggle { display: inline-flex; align-items: center;