diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/blog/index.astro | 29 | ||||
| -rw-r--r-- | src/pages/blog/tags/[tag].astro | 20 | ||||
| -rw-r--r-- | src/pages/guestbook.astro | 47 | ||||
| -rw-r--r-- | src/pages/projects.astro | 42 |
4 files changed, 66 insertions, 72 deletions
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index a6b6855..5e4c619 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -8,20 +8,21 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate --- <Page title="Blog" description="Where I post can be anything!"> <main> - {allBlogPosts.map((post) => ( - <article> - <h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1> - <small>{formatDate(post.data.pubDate)}</small> - <p>{post.data.description}</p> - <div class="tags"> - {post.data.tags.map((tag) => ( - <a href={`/blog/tags/${tag}`}>{tag}</a> - ))} - </div> - </article> - )) - } - + <div class="grid"> + {allBlogPosts.map((post) => ( + <article class="card"> + <h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1> + <small>{formatDate(post.data.pubDate)}</small> + <p>{post.data.description}</p> + <div class="tags"> + {post.data.tags.map((tag) => ( + <a href={`/blog/tags/${tag}`}>{tag}</a> + ))} + </div> + </article> + )) + } + </div> </main> </Page> <style> diff --git a/src/pages/blog/tags/[tag].astro b/src/pages/blog/tags/[tag].astro index 9d4ff86..31d9b94 100644 --- a/src/pages/blog/tags/[tag].astro +++ b/src/pages/blog/tags/[tag].astro @@ -25,14 +25,16 @@ const { posts } = Astro.props; --- <Page title=`Posts with ${tag}`> <main> - {posts && posts.map((post) => { - return ( - <article> - <h1><a href=`/blog/${post.frontmatter.slug}`>{post.frontmatter.title}</a></h1> - <small>{formatDate(post.frontmatter.pubDate)}</small> - <p>{post.frontmatter.description}</p> - </article> - ) - })} + <div class="grid"> + {posts && posts.map((post) => { + return ( + <article class="card">> + <h1><a href=`/blog/${post.frontmatter.slug}`>{post.frontmatter.title}</a></h1> + <small>{formatDate(post.frontmatter.pubDate)}</small> + <p>{post.frontmatter.description}</p> + </article> + ) + })} + </div> </main> </Page> diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro index 0827802..0aebd9c 100644 --- a/src/pages/guestbook.astro +++ b/src/pages/guestbook.astro @@ -4,16 +4,41 @@ import "../styles/cards.css"; --- <Page title="Guestbook" description="Use this page to send me a message"> <main> - <article> - <h1>John Doe</h1> - <small>January 1, 2024</small> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nam id orci non diam bibendum euismod quis sit amet purus. - Fusce fermentum facilisis placerat. Mauris varius ante elit, et - luctus enim blandit sit amet. - Pellentesque ullamcorper dapibus suscipit. - </p> - <a href="http://google.com">Website</a> - </article> + <form class="card"> + <h2>Submit Message</h2> + <label> + Name<br> + <input type="text" name="name" placeholder="Name" required /> + </label> + <br> + <label> + Email Address<br> + <input type="email" name="email" placeholder="Email Address (Optional)" /> + </label> + <br> + <label> + Your Website<br> + <input type="url" name="link" placeholder="https://example.com" required /> + </label> + <br> + <label> + Message<br> + <textarea name="message" placeholder="Message" required></textarea> + </label> + <button type="submit">Send</button> + </form> + <div class="grid"> + <article class="card"> + <h1>John Doe</h1> + <small>January 1, 2024</small> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nam id orci non diam bibendum euismod quis sit amet purus. + Fusce fermentum facilisis placerat. Mauris varius ante elit, et + luctus enim blandit sit amet. + Pellentesque ullamcorper dapibus suscipit. + </p> + <a href="https://google.com">Website</a> + </article> + </div> </main> </Page> diff --git a/src/pages/projects.astro b/src/pages/projects.astro index d609211..37cec1a 100644 --- a/src/pages/projects.astro +++ b/src/pages/projects.astro @@ -1,13 +1,14 @@ --- import Page from "../layouts/Page.astro"; import projects from "../data/projects.json"; +import "../styles/cards.css"; --- <Page title="Projects" description="Things that I have been working on in the past, and present"> - <main> + <main class="grid"> { projects.map((project) => { return ( - <div class="cards"> + <article class="card"> <h1>{project.name}</h1> <p>{project.description}</p> <div class="row"> @@ -17,51 +18,16 @@ import projects from "../data/projects.json"; ) })} </div> - </div> + </article> ) }) } </main> </Page> <style> - main { - display: grid; - grid-template-columns: repeat(2, 1fr); - } - - .cards { - display: flex; - flex-direction: column; - background-color: #3B513B; - padding: 1.2em; - border-radius: 20px; - gap: 0.5em; - margin: 0.5em; - } - - .cards h1 { - padding: 0; - margin: 0; - font-size: 1.8em; - } - - .cards p { - padding: 0; - margin: 0; - } - .row { - margin-top: 0.3em; display: flex; flex-direction: row; gap: 1em; } - - /* Mobile view */ - @media (max-width: 992px) { - main { - grid-template-columns: 1fr; - } - } - </style> |