diff options
Diffstat (limited to 'examples/blog-multiple-authors/src/components/Nav.astro')
| -rw-r--r-- | examples/blog-multiple-authors/src/components/Nav.astro | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/examples/blog-multiple-authors/src/components/Nav.astro b/examples/blog-multiple-authors/src/components/Nav.astro new file mode 100644 index 000000000..a7ef0985f --- /dev/null +++ b/examples/blog-multiple-authors/src/components/Nav.astro @@ -0,0 +1,63 @@ +--- +export interface Props { + title: string; +} +const { title } = Astro.props; +--- + +<style lang="scss"> +.header { + text-align: center; + + @media (min-width: 600px) { + display: flex; + align-items: center; + padding: 2rem; + } +} + +.title { + margin: 0; + font-size: 1.2em; + letter-spacing: -0.03em; + font-weight: 400; + margin-right: 1em; +} + +.nav { + text-align: center; + + @media (min-width: 600px) { + display: flex; + } +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +li { + margin: 0; +} + +a { + display: block; + font-size: 1.2em; + letter-spacing: -0.02em; + margin-left: 0.75em; + margin-right: 0.75em; +} +</style> + +<nav class="header"> + <h1 class="title">Don’s Blog</h1> + <ul class="nav"> + <li><a href="/">Home</a></li> + <li><a href="/posts">All Posts</a></li> + <li><a href="/author/don">Author: Don</a></li> + <li><a href="/author/sancho">Author: Sancho</a></li> + <li><a href="/about">About</a></li> + </ul> +</nav> |