This is an automated email from the ASF dual-hosted git repository. visoar pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/bifromq-sites.git
commit a09720b3dffedcfe955cefbbafac24d837b68732 Author: Visoar <[email protected]> AuthorDate: Tue Jan 13 11:21:51 2026 +0800 Adjust theme styles and layout, and update color variables to unify visual effects. --- docusaurus.config.ts | 16 ++++- src/css/custom.css | 174 +++++++++++++++++++++++++++++++++++++++------ src/pages/index.module.css | 26 +++---- 3 files changed, 179 insertions(+), 37 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 1560f165..20a82421 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -58,7 +58,21 @@ const config: Config = { }, }, ], - 'docusaurus-theme-redoc', + [ + 'docusaurus-theme-redoc', + { + theme: { + typography: { + fontSize: '14px', + lineHeight: '1.6', + fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif", + code: { + fontFamily: "'JetBrains Mono', monospace", + }, + }, + }, + }, + ], ], presets: [ diff --git a/src/css/custom.css b/src/css/custom.css index 3a254a59..78a5e43a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -28,6 +28,7 @@ --color-text-secondary: #666666; --color-text-tertiary: #999999; --color-accent: var(--bifrost-blue); + --color-accent-rgb: 0, 122, 255; --color-signal: var(--bifrost-orange); /* Typography */ @@ -176,8 +177,8 @@ body { var(--bifrost-green) 50%, var(--bifrost-teal) 50%, var(--bifrost-teal) 62.5%, - var(--bifrost-blue) 62.5%, - var(--bifrost-blue) 75%, + var(--color-accent) 62.5%, + var(--color-accent) 75%, var(--bifrost-indigo) 75%, var(--bifrost-indigo) 87.5%, var(--bifrost-violet) 87.5%); @@ -313,25 +314,31 @@ html[data-theme='dark'] .header-github-link::before { } .markdown h1 { - font-size: clamp(2rem, 3.5vw, 3rem); + font-size: clamp(1.85rem, 3.1vw, 2.6rem); margin-top: 0; /* Remove potential top margin */ - margin-bottom: 2rem; + margin-bottom: 1.75rem; line-height: 1.1; } .markdown h2 { - font-size: 1.75rem; - margin-top: 3.5rem; - padding-bottom: 1rem; + font-size: 1.55rem; + margin-top: 3rem; + padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); - margin-bottom: 1.5rem; + margin-bottom: 1.25rem; } .markdown h3 { - font-size: 1.35rem; - margin-top: 2.5rem; - margin-bottom: 1rem; + font-size: 1.25rem; + margin-top: 2.25rem; + margin-bottom: 0.9rem; +} + +.markdown h4 { + font-size: 1.1rem; + margin-top: 1.75rem; + margin-bottom: 0.75rem; } .markdown p, @@ -344,9 +351,15 @@ html[data-theme='dark'] .header-github-link::before { font-size: 0.85em; background: var(--color-wash); padding: 0.2rem 0.5rem; - border: 1px solid var(--color-border); border-radius: var(--radius-sm); - color: var(--color-signal); + color: var(--color-accent); +} + +.markdown pre code { + background: transparent; + border: none; + padding: 0; + color: inherit; } a { @@ -366,9 +379,9 @@ button, .markdown pre { background: var(--color-wash) !important; border: 1px solid var(--color-border); - padding: 2.5rem; - border-radius: var(--radius-none); - margin: 3rem 0; + padding: 1.5rem; + border-radius: var(--radius-sm); + margin: 2.5rem 0; } .markdown img { @@ -398,7 +411,7 @@ button, height: 2px; background: linear-gradient(to right, var(--bifrost-indigo), - var(--bifrost-blue), + var(--color-accent), var(--bifrost-teal), var(--bifrost-green), var(--bifrost-yellow), @@ -436,7 +449,7 @@ button, } .footer__link-item:hover { - color: var(--bifrost-blue); + color: var(--color-accent); transform: translateX(4px); } @@ -500,7 +513,7 @@ html[data-theme='dark'] .footer__incubator-logo { } .footer__copyright a { - color: var(--bifrost-blue); + color: var(--color-accent); text-decoration: none; } @@ -550,6 +563,95 @@ html[data-theme='dark'] .footer__incubator-logo { /* Keep blog posts readable but well-padded */ } +.theme-blog-post-page .avatar__photo, +.theme-blog-post-page .avatar__photo--sm, +.blog-post-item .avatar__photo, +.blog-post-item .avatar__photo--sm, +.blog-list-page .avatar__photo, +.blog-list-page .authorImage_hzf5, +.blog-post-page .avatar__photo, +.blog-post-page .authorImage_hzf5 { + width: 20px !important; + height: 20px !important; +} + +.theme-blog-post-page .avatar__name, +.blog-post-item .avatar__name, +.theme-blog-post-page .avatar__name a, +.blog-post-item .avatar__name a, +.blog-list-page .avatar__name, +.blog-list-page .avatar__name a, +.blog-list-page .authorName_YUi6, +.blog-post-page .avatar__name, +.blog-post-page .avatar__name a, +.blog-post-page .authorName_YUi6 { + color: var(--color-text-primary) !important; + font-size: 0.9rem; +} + +.theme-blog-post-page .avatar__subtitle, +.blog-post-item .avatar__subtitle, +.blog-list-page .avatar__subtitle { + color: var(--color-text-secondary) !important; +} + +.theme-blog-post-page h1 a, +.theme-blog-post-page h2 a, +.blog-post-item h2 a, +.blog-list-page h2 a, +.blog-post-page h1 a { + color: var(--color-text-primary) !important; + text-decoration: none; + transition: color 0.2s ease, opacity 0.2s ease; +} + +.theme-blog-post-page h1 a:hover, +.theme-blog-post-page h2 a:hover, +.blog-post-item h2 a:hover, +.blog-list-page h2 a:hover, +.blog-post-page h1 a:hover { + color: var(--color-accent); + opacity: 0.9; +} + +.blog-list-page h2, +.blog-post-item h2, +.theme-blog-post-page h1, +.blog-post-page h1, +.theme-blog-post-page h1 a, +.blog-list-page h2 a, +.blog-post-page h1 a { + font-size: 2rem !important; + line-height: 1.3; +} + +.blog-list-page .tags_mmrK, +.blog-list-page .tag_oOGf { + font-size: 0.8rem; +} + +.blog-list-page .tag_oOGf { + color: var(--color-text-secondary); + border-color: var(--color-border); +} + +.blog-list-page .tag_oOGf:hover { + color: var(--color-accent); + border-color: var(--color-accent); +} + +.blog-list-page a[aria-label^='Read more'] { + font-size: 0.85rem; + font-weight: 600; + color: var(--color-text-primary); + transition: color 0.2s ease, opacity 0.2s ease; +} + +.blog-list-page a[aria-label^='Read more']:hover { + color: var(--color-accent); + opacity: 0.9; +} + ::-webkit-scrollbar { width: 6px; height: 6px; @@ -576,7 +678,33 @@ html[data-theme='dark'] .footer__incubator-logo { border-radius: var(--radius-sm); } -.button--primary:hover { - background-color: var(--bifrost-blue); - border-color: var(--bifrost-blue); -} \ No newline at end of file + .button--primary:hover { + background-color: var(--color-accent); + border-color: var(--color-accent); +} + +/* Hide Redocly branding label in API docs */ +.redocusaurus a[href*='redocly.com'] { + display: none !important; +} + +/* Redoc typography tuning */ +.redocusaurus { + font-size: 14px; + line-height: 1.6; +} + +.redocusaurus .api-info h1 { + font-size: 1.6rem; + line-height: 1.3; +} + +.redocusaurus h2 { + font-size: 1.3rem; + line-height: 1.35; +} + +.redocusaurus h3 { + font-size: 1.1rem; + line-height: 1.35; +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css index d3004050..496de1a5 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -63,7 +63,7 @@ background: linear-gradient(to right, transparent, var(--color-border) 20%, - var(--bifrost-blue) 45%, + var(--color-accent) 45%, var(--bifrost-indigo) 55%, var(--color-border) 80%, transparent); @@ -109,7 +109,7 @@ width: 150%; height: 400px; background: radial-gradient(ellipse at center, - rgba(0, 122, 255, 0.15) 0%, + rgba(var(--color-accent-rgb), 0.15) 0%, rgba(88, 86, 214, 0.1) 30%, transparent 70%); filter: blur(80px); @@ -154,16 +154,16 @@ left: 0; right: 0; height: 2px; - background: linear-gradient(to right, var(--bifrost-blue), var(--bifrost-indigo), var(--bifrost-violet)); + background: linear-gradient(to right, var(--color-accent), var(--bifrost-indigo), var(--bifrost-violet)); opacity: 0.6; } .heroBadgeDot { width: 6px; height: 6px; - background: var(--bifrost-blue); + background: var(--color-accent); border-radius: 0; - box-shadow: 0 0 10px var(--bifrost-blue); + box-shadow: 0 0 10px var(--color-accent); } .heroTitle { @@ -369,7 +369,7 @@ font-weight: 700; text-transform: uppercase; letter-spacing: 0.4em; - color: var(--bifrost-blue); + color: var(--color-accent); margin-bottom: 16px; } @@ -427,7 +427,7 @@ html[data-theme='dark'] .bifrostCard { html[data-theme='dark'] .bifrostCard:hover { background: rgba(26, 29, 35, 0.6); - border-color: var(--bifrost-blue); + border-color: var(--color-accent); } .cardIcon { @@ -452,7 +452,7 @@ html[data-theme='dark'] .bifrostCard:hover { html[data-theme='dark'] .cardIcon { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); - color: var(--bifrost-blue); + color: var(--color-accent); } .bifrostCard:hover .cardIcon { @@ -461,9 +461,9 @@ html[data-theme='dark'] .cardIcon { } html[data-theme='dark'] .bifrostCard:hover .cardIcon { - background: var(--bifrost-blue); + background: var(--color-accent); color: white; - border-color: var(--bifrost-blue); + border-color: var(--color-accent); } .cardTitle { @@ -486,7 +486,7 @@ html[data-theme='dark'] .bifrostCard:hover .cardIcon { left: 0; width: 100%; height: 2px; - background: var(--bifrost-blue); + background: var(--color-accent); opacity: 0; transition: opacity 0.3s ease; } @@ -556,7 +556,7 @@ html[data-theme='dark'] .bifrostCard:hover .cardIcon { } .prompt { - color: var(--bifrost-blue); + color: var(--color-accent); margin-right: 16px; } @@ -564,7 +564,7 @@ html[data-theme='dark'] .bifrostCard:hover .cardIcon { display: inline-block; width: 10px; height: 24px; - background: var(--bifrost-blue); + background: var(--color-accent); vertical-align: middle; animation: blink 1s step-end infinite; }
