7039f2b324
make better use of props and layouts to cut down on repeat boilerplate. correct typo in pets.md description
76 lines
2.1 KiB
Plaintext
76 lines
2.1 KiB
Plaintext
---
|
|
import BasicLayout from "../../layouts/BasicLayout.astro";
|
|
const pageTitle = "emma's guestbook"
|
|
---
|
|
<BasicLayout pageTitle={pageTitle}>
|
|
<p>
|
|
hey, just a little heads up. i'm redoing a lot of my site right now.
|
|
i made this guestbook in a bit of a hurry so some helpful things like
|
|
letting you know i got your post and will approve it aren't there just yet.
|
|
but you are welcome to sign it and i'll check every few days to approve entries
|
|
until i get around to adding a bit more friendliness to parts of this guestbook
|
|
</p>
|
|
<form id="add-comment">
|
|
<label for="name-input">name: <input type="text" id="name-input" name="name-input" required></label>
|
|
<label for="website-input">website (optional): <input type="text" name="website-input" id="website-input"></label>
|
|
<label for="math-question">what is seven plus 10: <input type="number" name="math-question" id="math-question" required></label>
|
|
|
|
<label for="message-input">message: </label>
|
|
<textarea required name="message-input" id="message-input" rows="8" cols=55"></textarea>
|
|
<button type="submit">send message</button>
|
|
</form>
|
|
|
|
<h3>comments</h3>
|
|
<ul class="comments">
|
|
</ul>
|
|
<script>
|
|
import "../../scripts/guestbook-send-comment"
|
|
</script>
|
|
<script>
|
|
import "../../scripts/guestbook-list-comments"
|
|
</script>
|
|
</BasicLayout>
|
|
|
|
<style>
|
|
p {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding-left: 0.5rem;
|
|
width: 40vw;
|
|
height: auto;
|
|
}
|
|
label {
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
#name-input {
|
|
margin-left: 8.88rem;
|
|
width: 15rem;
|
|
}
|
|
|
|
#website-input {
|
|
width: 15rem;
|
|
margin-left: 1.8rem;
|
|
}
|
|
|
|
#message-input {
|
|
margin-left: 0.6rem;
|
|
}
|
|
|
|
#math-question {
|
|
margin-left: 4.5rem;
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
button {
|
|
margin-left: 0.6rem;
|
|
padding: 0.25rem;
|
|
}
|
|
</style> |