diff --git a/docs/my-website/src/theme/BlogPostPage/index.js b/docs/my-website/src/theme/BlogPostPage/index.js index ab8a8a173a..05f34db24b 100644 --- a/docs/my-website/src/theme/BlogPostPage/index.js +++ b/docs/my-website/src/theme/BlogPostPage/index.js @@ -2,6 +2,19 @@ import React, {useEffect} from 'react'; import OriginalBlogPostPage from '@theme-original/BlogPostPage'; import styles from './styles.module.css'; +function BackLink() { + return ( +
+ + + Blog + +
+ ); +} + function HiringCTA() { return (
@@ -33,6 +46,7 @@ export default function BlogPostPage(props) { return ( <> + diff --git a/docs/my-website/src/theme/BlogPostPage/styles.module.css b/docs/my-website/src/theme/BlogPostPage/styles.module.css index b9a0a479eb..9666037803 100644 --- a/docs/my-website/src/theme/BlogPostPage/styles.module.css +++ b/docs/my-website/src/theme/BlogPostPage/styles.module.css @@ -1,3 +1,44 @@ +.backOuter { + position: fixed; + top: calc(var(--ifm-navbar-height, 60px) + 1rem); + left: 2rem; + z-index: 100; +} + +.backLink { + display: inline-flex; + align-items: center; + gap: 0.375rem; + font-size: 0.875rem; + font-weight: 500; + color: #6b7280; + text-decoration: none !important; + transition: color 0.15s; +} + +.backLink:hover { + color: #111827; +} + +.backArrow { + width: 1rem; + height: 1rem; + transition: transform 0.15s; + flex-shrink: 0; +} + +.backLink:hover .backArrow { + transform: translateX(-3px); +} + +[data-theme='dark'] .backLink { + color: #9ca3af; +} + +[data-theme='dark'] .backLink:hover { + color: #f9fafb; +} + .ctaOuter { max-width: 820px; margin: 0 auto;