nebula/404.html

452 lines
14 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-layout="default" data-shoelace-version="0.0.10">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The page you were looking for couldn't be found." />
<title>Page Not Found</title>
<meta name="turbo-cache-control" />
<link rel="stylesheet" href="/assets/styles/docs.css" />
<link rel="stylesheet" href="/assets/styles/code-previews.css" />
<link rel="stylesheet" href="/assets/styles/search.css" />
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="shoelace_style" />
<meta name="twitter:image" content="https://nebulaui.org/assets/images/og-image.png" />
<meta property="og:url" content="https://nebulaui.org/404.html" />
<meta property="og:title" content="Page Not Found" />
<meta property="og:description" content="The page you were looking for couldn't be found." />
<meta property="og:image" content="https://nebulaui.org/assets/images/og-image.png" />
<link rel="stylesheet" href="/dist/themes/light.css" />
<link rel="stylesheet" href="/dist/themes/dark.css" />
<script type="module" src="/dist/shoelace-autoloader.js"></script>
<script>
(() => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = localStorage.getItem('theme') || 'auto';
document.documentElement.classList.toggle(
'sl-theme-dark',
theme === 'dark' || (theme === 'auto' && prefersDark)
);
})();
</script>
<script src="/assets/scripts/turbo.js" type="module"></script>
<script src="/assets/scripts/docs.js" defer=""></script>
<script src="/assets/scripts/code-previews.js" defer=""></script>
<script src="/assets/scripts/lunr.js" defer=""></script>
<script src="/assets/scripts/search.js" defer=""></script>
</head>
<body>
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
Skip to main content
</a>
<button id="menu-toggle" type="button" aria-label="Menu">
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
</g>
</svg>
</button>
<div id="icon-toolbar">
<a
href="https://github.com/onsonr/nebula"
title="View Nebula on GitHub"
class="external-link"
rel="noopener noreferrer"
target="_blank"
>
<sl-icon name="github"></sl-icon>
</a>
<a
href="https://twitter.com/shoelace_style"
title="Follow Nebula on Twitter"
class="external-link"
rel="noopener noreferrer"
target="_blank"
>
<sl-icon name="twitter"></sl-icon>
</a>
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
<sl-button slot="trigger" size="small" variant="text" caret="" title="Press \ to toggle">
<sl-icon class="only-light" name="sun-fill"></sl-icon>
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
</sl-button>
<sl-menu>
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
<sl-divider></sl-divider>
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
</sl-menu>
</sl-dropdown>
</div>
<aside id="sidebar" data-preserve-scroll="">
<header>
<a href="/">
<img src="/assets/images/wordmark.svg" alt="Nebula" />
</a>
<div class="sidebar-version">0.0.10</div>
</header>
<div class="sidebar-buttons">
<sl-button
size="small"
class="repo-button repo-button--github"
href="https://github.com/onsonr/nebula"
target="_blank"
>
<sl-icon slot="prefix" name="github"></sl-icon> Code
</sl-button>
<sl-button
size="small"
class="repo-button repo-button--star"
href="https://github.com/onsonr/nebula/stargazers"
target="_blank"
>
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
</sl-button>
<sl-button
size="small"
class="repo-button repo-button--twitter"
href="https://twitter.com/shoelace_style"
target="_blank"
>
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
</sl-button>
</div>
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
<sl-icon name="search"></sl-icon>
<span>Search</span>
</button>
<nav>
<ul>
<li>
<h2>Getting Started</h2>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/getting-started/installation">Installation</a></li>
<li><a href="/getting-started/usage">Usage</a></li>
<li><a href="/getting-started/themes">Themes</a></li>
<li><a href="/getting-started/customizing">Customizing</a></li>
<li><a href="/getting-started/form-controls">Form Controls</a></li>
<li><a href="/getting-started/localization">Localization</a></li>
</ul>
</li>
<li>
<h2>Frameworks</h2>
<ul>
<li><a href="/frameworks/react">React</a></li>
<li><a href="/frameworks/vue">Vue</a></li>
<li><a href="/frameworks/angular">Angular</a></li>
</ul>
</li>
<li>
<h2>Resources</h2>
<ul>
<li><a href="/resources/community">Community</a></li>
<li>
<a
href="https://github.com/onsonr/nebula/discussions"
class="external-link"
rel="noopener noreferrer"
target="_blank"
>Help &amp; Support</a
>
</li>
<li><a href="/resources/accessibility">Accessibility</a></li>
<li><a href="/resources/contributing">Contributing</a></li>
<li><a href="/resources/changelog">Changelog</a></li>
</ul>
</li>
<li>
<h2>Components</h2>
<ul>
<li>
<a href="/components/alert"> Alert </a>
</li>
<li>
<a href="/components/animated-image"> Animated Image </a>
</li>
<li>
<a href="/components/animation"> Animation </a>
</li>
<li>
<a href="/components/avatar"> Avatar </a>
</li>
<li>
<a href="/components/badge"> Badge </a>
</li>
<li>
<a href="/components/breadcrumb"> Breadcrumb </a>
</li>
<li>
<a href="/components/breadcrumb-item"> Breadcrumb Item </a>
</li>
<li>
<a href="/components/button"> Button </a>
</li>
<li>
<a href="/components/button-group"> Button Group </a>
</li>
<li>
<a href="/components/card"> Card </a>
</li>
<li>
<a href="/components/carousel"> Carousel </a>
</li>
<li>
<a href="/components/carousel-item"> Carousel Item </a>
</li>
<li>
<a href="/components/checkbox"> Checkbox </a>
</li>
<li>
<a href="/components/color-picker"> Color Picker </a>
</li>
<li>
<a href="/components/copy-button"> Copy Button </a>
</li>
<li>
<a href="/components/details"> Details </a>
</li>
<li>
<a href="/components/dialog"> Dialog </a>
</li>
<li>
<a href="/components/divider"> Divider </a>
</li>
<li>
<a href="/components/drawer"> Drawer </a>
</li>
<li>
<a href="/components/dropdown"> Dropdown </a>
</li>
<li>
<a href="/components/format-bytes"> Format Bytes </a>
</li>
<li>
<a href="/components/format-date"> Format Date </a>
</li>
<li>
<a href="/components/format-number"> Format Number </a>
</li>
<li>
<a href="/components/icon"> Icon </a>
</li>
<li>
<a href="/components/icon-button"> Icon Button </a>
</li>
<li>
<a href="/components/image-comparer"> Image Comparer </a>
</li>
<li>
<a href="/components/include"> Include </a>
</li>
<li>
<a href="/components/input"> Input </a>
</li>
<li>
<a href="/components/menu"> Menu </a>
</li>
<li>
<a href="/components/menu-item"> Menu Item </a>
</li>
<li>
<a href="/components/menu-label"> Menu Label </a>
</li>
<li>
<a href="/components/mutation-observer"> Mutation Observer </a>
</li>
<li>
<a href="/components/option"> Option </a>
</li>
<li>
<a href="/components/popup"> Popup </a>
</li>
<li>
<a href="/components/progress-bar"> Progress Bar </a>
</li>
<li>
<a href="/components/progress-ring"> Progress Ring </a>
</li>
<li>
<a href="/components/qr-code"> QR Code </a>
</li>
<li>
<a href="/components/radio"> Radio </a>
</li>
<li>
<a href="/components/radio-button"> Radio Button </a>
</li>
<li>
<a href="/components/radio-group"> Radio Group </a>
</li>
<li>
<a href="/components/range"> Range </a>
</li>
<li>
<a href="/components/rating"> Rating </a>
</li>
<li>
<a href="/components/relative-time"> Relative Time </a>
</li>
<li>
<a href="/components/resize-observer"> Resize Observer </a>
</li>
<li>
<a href="/components/select"> Select </a>
</li>
<li>
<a href="/components/skeleton"> Skeleton </a>
</li>
<li>
<a href="/components/spinner"> Spinner </a>
</li>
<li>
<a href="/components/split-panel"> Split Panel </a>
</li>
<li>
<a href="/components/switch"> Switch </a>
</li>
<li>
<a href="/components/tab"> Tab </a>
</li>
<li>
<a href="/components/tab-group"> Tab Group </a>
</li>
<li>
<a href="/components/tab-panel"> Tab Panel </a>
</li>
<li>
<a href="/components/tag"> Tag </a>
</li>
<li>
<a href="/components/textarea"> Textarea </a>
</li>
<li>
<a href="/components/tooltip"> Tooltip </a>
</li>
<li>
<a href="/components/tree"> Tree </a>
</li>
<li>
<a href="/components/tree-item"> Tree Item </a>
</li>
<li>
<a href="/components/visually-hidden"> Visually Hidden </a>
</li>
</ul>
</li>
<li>
<h2>Design Tokens</h2>
<ul>
<li><a href="/tokens/typography">Typography</a></li>
<li><a href="/tokens/color">Color</a></li>
<li><a href="/tokens/spacing">Spacing</a></li>
<li><a href="/tokens/elevation">Elevation</a></li>
<li><a href="/tokens/border-radius">Border Radius</a></li>
<li><a href="/tokens/transition">Transition</a></li>
<li><a href="/tokens/z-index">Z-index</a></li>
<li><a href="/tokens/more">More Tokens</a></li>
</ul>
</li>
<li>
<h2>Tutorials</h2>
<ul>
<li><a href="/tutorials/integrating-with-astro">Integrating with Astro</a></li>
<li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
<li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
<li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<main>
<a id="main-content"></a>
<article id="content" class="content">
<div class="content__body">
<div style="text-align: center">
<h1>Page Not Found</h1>
<p><img src="/assets/images/undraw-taken.svg" alt="A UFO takes one of the little worker monsters" /></p>
<p>The page you were looking for couldnt be found.</p>
<p>Press <kbd>/</kbd> to search, or <a href="/">head back to the homepage</a>.</p>
</div>
</div>
</article>
</main>
</body>
</html>