diff options
Diffstat (limited to 'smoke/docs-main/src/components/PageContent')
| -rw-r--r-- | smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro | 55 | ||||
| -rw-r--r-- | smoke/docs-main/src/components/PageContent/PageContent.astro | 39 |
2 files changed, 71 insertions, 23 deletions
diff --git a/smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro b/smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro new file mode 100644 index 000000000..d080ce563 --- /dev/null +++ b/smoke/docs-main/src/components/PageContent/ArticleNavigationButton.astro @@ -0,0 +1,55 @@ +--- +const { item, rel } = Astro.props; +--- + +<a class={rel === 'next' ? 'rtl' : 'ltr'} rel="prev" href={new URL(item.link, Astro.site).pathname}> + {rel === 'prev' && ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32" width="32" fill="currentColor"> + <path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" /> + </svg> + )} + {rel === 'next' && ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="32" width="32" fill="currentColor"> + <path d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" /> + </svg> + )} + <div class="copy"> + <div class="heading">{rel === 'next' ? 'Next Page' : 'Back'}</div> + <div class="name">{item.text}</div> + </div> +</a> + +<style> + a { + flex-grow: 1; + flex-shrink: 0; + border: 1px solid var(--theme-divider); + padding: 1rem 1.25rem; + display: flex; + box-shadow: 0px 1px 2px var(--theme-text-lighter); + text-decoration: none; + color: var(--theme-text-lighter); + } + a:hover { + color: var(--theme-text-accent); + border: 1px solid var(--theme-accent); + } + .copy { + flex-grow: 1; + } + a.ltr { + text-align: right; + } + a.rtl { + flex-direction: row-reverse; + } + .heading { + color: var(--theme-text-light); + margin-bottom: -0.2rem; + } + .name { + font-size: 1.3rem; + font-weight: bold; + color: var(--theme-text); + } +</style> diff --git a/smoke/docs-main/src/components/PageContent/PageContent.astro b/smoke/docs-main/src/components/PageContent/PageContent.astro index 01d88a256..849ff4de4 100644 --- a/smoke/docs-main/src/components/PageContent/PageContent.astro +++ b/smoke/docs-main/src/components/PageContent/PageContent.astro @@ -1,5 +1,6 @@ --- import MoreMenu from '../RightSidebar/MoreMenu.astro'; +import ArticleNavigationButton from './ArticleNavigationButton.astro'; import TableOfContents from '../RightSidebar/TableOfContents.tsx'; import { getLanguageFromURL } from '../../util.ts'; import { SIDEBAR } from '../../config.ts'; @@ -18,33 +19,17 @@ const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null; <section class="main-section"> <h1 class="content-title" id="overview">{title}</h1> {headers && ( - <nav class="block sm-hidden"> + <nav class="block lg-hidden"> <TableOfContents client:media="(max-width: 50em)" headers={headers} /> + <MoreMenu editHref={githubEditUrl} /> </nav> )} <slot /> </section> - <nav class="block sm-hidden"> - <MoreMenu editHref={githubEditUrl} /> - </nav> {(previous || next) && ( - <aside> - {previous && ( - <div> - Previous Article:{' '} - <a rel="prev" href={new URL(previous.link, Astro.site).pathname}> - {previous.text} - </a> - </div> - )} - {next && ( - <div> - Next Article:{' '} - <a rel="next" href={new URL(next.link, Astro.site).pathname}> - {next.text} - </a> - </div> - )} + <aside class="next-previous-nav"> + {previous && <ArticleNavigationButton rel="prev" item={previous} />} + {next && <ArticleNavigationButton rel="next" item={next} />} </aside> )} </article> @@ -57,6 +42,7 @@ const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null; height: 100%; display: flex; flex-direction: column; + margin: auto; } .content > section { margin-bottom: 4rem; @@ -64,9 +50,16 @@ const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null; .block { display: block; } + .next-previous-nav { + display: flex; + flex-wrap: wrap; + width: auto; + gap: 1rem; + margin-bottom: 1.5rem; + } - @media (min-width: 50em) { - .sm-hidden { + @media (min-width: 72em) { + .lg-hidden { display: none; } } |