diff options
Diffstat (limited to 'docs/src/pages/index.astro')
-rw-r--r-- | docs/src/pages/index.astro | 251 |
1 files changed, 251 insertions, 0 deletions
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro new file mode 100644 index 000000000..e5b06cc10 --- /dev/null +++ b/docs/src/pages/index.astro @@ -0,0 +1,251 @@ +--- +import SiteSidebar from '../components/SiteSidebar.astro'; +import AstroLogo from '../components/AstroLogo.astro'; +import ThemeToggle from '../components/ThemeToggle.tsx'; +import MenuToggle from '../components/MenuToggle.tsx'; +--- + +<html lang="en-us"> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Astro Documentation</title> + <link rel="stylesheet" href="/theme.css" /> + <link rel="stylesheet" href="/code.css" /> + <link rel="stylesheet" href="/index.css" /> + <script src="/theme.js" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg"> + + <style> + body { + width: 100%; + display: grid; + grid-template-rows: 3.5rem 1fr; + --gutter: 0.5rem; + --doc-padding: 2rem; + } + + header { + position: sticky; + top: 0; + z-index: 10; + height: 56px; + width: 100%; + background-color: var(--theme-bg-offset); + display: flex; + align-items: center; + justify-content: center; + } + + .layout { + display: grid; + grid-auto-flow: column; + grid-template-columns: + minmax(var(--gutter), 1fr) + minmax(0, var(--max-width)) + minmax(var(--gutter), 1fr); + gap: 1em; + } + + .menu-and-logo { + gap: 1em; + } + + #site-title { + display: flex; + align-items: center; + gap: 0.25em; + font-size: 1.5rem; + font-weight: 700; + margin: 0; + line-height: 1; + color: var(--theme-text); + text-decoration: none; + } + + #site-title:hover, + #site-title:focus { + color: var(--theme-text-light); + } + + #site-title h1 { + font: inherit; + color: inherit; + margin: 0; + } + + .nav-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + max-width: 82em; + padding: 0 1rem; + } + + .layout :global(> *) { + width: 100%; + height: 100%; + } + + .sidebar { + min-height: calc(100vh - 3.5rem); + height: calc(100vh - 3.5rem); + max-height: 100vh; + position: sticky; + top: 3.5rem; + padding: 0; + } + + #sidebar-site { + position: fixed; + background-color: var(--theme-bg); + z-index: 1000; + } + + + #article { + padding: var(--doc-padding) var(--gutter); + grid-column: 2; + display: flex; + flex-direction: column; + height: 100%; + } + + +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(data:font/woff;base64,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) format('woff'); +} + +.npm-init-snippet { + font-family: 'Roboto Mono', monospace; + font-size: 1.6rem; + background-color: var(--theme-code-inline-bg); + color: var(--theme-text); + border-radius: 6px; + padding: 4px 14px; + margin-top: 1rem; +} + + .content { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .content > main { + margin-bottom: 4rem; + } + + #sidebar-content { + display: none; + } + .theme-toggle-wrapper { + display: none; + } + + #sidebar-site { + display: none; + } + :global(.mobile-sidebar-toggle) { + overflow: hidden; + } + :global(.mobile-sidebar-toggle) #sidebar-site { + display: block; + } + @media (min-width: 60em) { + #sidebar-site { + display: flex; + } + :global(.mobile-sidebar-toggle) { + overflow: initial; + } + :global(.mobile-sidebar-toggle) #sidebar-site { + display: flex; + } + .menu-toggle { + display: none; + } + .layout { + grid-template-columns: + 20rem + minmax(0, 1fr); + } + #article { + grid-column: 2; + } + #sidebar-site { + position: sticky; + } + #sidebar-nav { + display: flex; + } + .theme-toggle-wrapper { + display: flex; + } + } + + @media (min-width: 82em) { + .layout { + grid-template-columns: + 20rem + minmax(0, var(--max-width)) + 18rem; + padding-left: 0; + padding-right: 0; + margin: 0 auto; + } + + #sidebar-nav { + grid-column: 1; + } + #article { + grid-column: 2/4; + } + } + + + </style> + </head> + + <body class="mobile-sidebar-hidden"> + <header> + <nav class="nav-wrapper"> + <div class="menu-and-logo flex"> + <div class="menu-toggle"> + <MenuToggle client:idle/> + </div> + <a id="site-title" href="/"> + <h1>Astro Documentation</h1> + </a> + </div> + + <div /> + + <div class="theme-toggle-wrapper"> + <ThemeToggle client:idle /> + </div> + </nav> + </header> + + <main class="layout"> + <aside class="sidebar" id="sidebar-site"> + <SiteSidebar currentPage="" /> + </aside> + <div id="article"> + <article class="content"> + <AstroLogo size={160} /> + <div class="npm-init-snippet"> + npm init astro + </div> + </article> + </div> + </main> + </body> +</html> |