diff options
Diffstat (limited to 'examples/blog/src/components')
| -rw-r--r-- | examples/blog/src/components/Counter.jsx | 15 | ||||
| -rw-r--r-- | examples/blog/src/components/Nav.astro | 19 |
2 files changed, 13 insertions, 21 deletions
diff --git a/examples/blog/src/components/Counter.jsx b/examples/blog/src/components/Counter.jsx deleted file mode 100644 index c9b27e1a7..000000000 --- a/examples/blog/src/components/Counter.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { useState } from 'react'; -// import confetti from 'canvas-confetti'; - -export default function Counter() { - // Declare a new state variable, which we'll call "count" - const [count, setCount] = useState(0); - // console.log(confetti()); - - return ( - <div> - <p>You clicked {count} times</p> - <button onClick={() => setCount(count + 1)}>Click me</button> - </div> - ); -} diff --git a/examples/blog/src/components/Nav.astro b/examples/blog/src/components/Nav.astro index 86919ac4d..5949adb0d 100644 --- a/examples/blog/src/components/Nav.astro +++ b/examples/blog/src/components/Nav.astro @@ -4,9 +4,13 @@ export let title; <style lang="scss"> .header { - display: flex; - align-items: center; - padding: 2rem; + text-align: center; + + @media (min-width: 600px) { + display: flex; + align-items: center; + padding: 2rem; + } } .title { @@ -18,11 +22,14 @@ export let title; } .nav { - display: flex; + text-align: center; + + @media (min-width: 600px) { + display: flex; + } } ul { - display: flex; list-style: none; margin: 0; padding: 0; @@ -44,7 +51,7 @@ a { <nav class="header"> <h1 class="title">Don’s Blog</h1> <ul class="nav"> - <li><a href="/">All Posts</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> |