diff options
| author |  Tony Sullivan <tony.f.sullivan@outlook.com>
| 2022-11-01 16:20:04 +0000 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-11-01 16:20:04 +0000 |
| commit | 4e2bd173932c231697a17a3098dc22ef3e481525 (patch) | |
| tree | 0cf7877436a1463d78dad231ef28ebd8116225fc /examples/hackernews/src/components/Nav.astro | |
| parent | bb6e8800094dc59841eb3b345fcb8baca9e17ce9 (diff) | |
| download | astro-4e2bd173932c231697a17a3098dc22ef3e481525.tar.gz astro-4e2bd173932c231697a17a3098dc22ef3e481525.tar.zst astro-4e2bd173932c231697a17a3098dc22ef3e481525.zip | |
Adds a Hackernews example site (#5213)
* adds the hackernews example - TODO add readme content
* refactor: moving styles from root.css into components
* chore: add README content
* chore: lint fixes + prettier-plugin-astro@0.4.0
* Update examples/hackernews/README.md
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
* lint: remove unused variable
* nit: adding check command to example
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Diffstat (limited to 'examples/hackernews/src/components/Nav.astro')
| -rw-r--r-- | examples/hackernews/src/components/Nav.astro | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/examples/hackernews/src/components/Nav.astro b/examples/hackernews/src/components/Nav.astro new file mode 100644 index 000000000..10bf0f899 --- /dev/null +++ b/examples/hackernews/src/components/Nav.astro @@ -0,0 +1,97 @@ +--- +interface Link { + href: string; + text: string; +} + +const links: Link[] = [ + { href: '/', text: 'HN' }, + { href: '/new', text: 'New' }, + { href: '/show', text: 'Show' }, + { href: '/ask', text: 'Ask' }, + { href: '/job', text: 'Jobs' }, +]; +--- + +<header> + <nav aria-label="Main menu"> + {links.map(({ href, text }) => ( + <a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}> + <strong>{text}</strong> + </a> + ))} + <a class="github" href="http://github.com/withastro/astro" target="_blank" rel="noreferrer"> + Built with Astro + </a> + </nav> +</header> + +<style> + header { + background-color: rgb(107 33 168); + position: fixed; + z-index: 999; + height: 55px; + top: 0; + left: 0; + right: 0; + } + + nav { + max-width: 800px; + box-sizing: border-box; + margin: 0 auto; + padding: 15px 5px; + } + + nav a { + color: rgba(248, 250, 252, 0.8); + line-height: 24px; + transition: color 0.15s ease; + display: inline-block; + vertical-align: middle; + font-weight: 300; + letter-spacing: 0.075em; + margin-right: 1.8em; + } + + nav a:hover { + color: rgb(248 250 252); + } + + nav [aria-current='page'] { + color: rgb(248 250 252); + font-weight: 400; + } + + nav a:last-of-type { + margin-right: 0; + } + + .github { + color: rgb(248 250 252); + font-size: 0.9em; + margin: 0; + float: right; + } + + @media (max-width: 860px) { + nav { + padding: 15px 30px; + } + } + + @media (max-width: 600px) { + nav { + padding: 15px; + } + + a { + margin-right: 1em; + } + + .github { + display: none; + } + } +</style> |