sirlilpanda/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update styles

Browse Source
This commit is contained in:
panda
2026-07-30 22:44:18 +12:00
parent 289da287c9
commit 52fd67721f
1 changed files with 92 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/pages/guestBook/index.astro
View File

@@ -65,29 +65,33 @@ guest_logs.forEach(log => {
<Header />
<main>
<section>
<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
<form method="POST" style="display: grid">
<label for="name">Name</label>
<h1>sign the guest book</h1>
<label for="name">Name:</label>
<input id="name" name="name" />
<label for="website_link">Website link(optional)</label>
<input id="website_link" name="website_link" />
<label for="website_link">Website link(optional):</label>
<input id="website_link" class="website_link" name="website_link" placeholder="etc. https://sirlilpanda.studio", pattern="((http|https):\/\/)(www.)?"/>
<label for="message">message</label>
<label for="message">message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
<button type="submit">🖊️sign the book🖊️</button>
</form>
<h1>guest book</h1>
<ul>
<ul class="lastest-guestbook-logs">
<h3>consider adding to the guest book</h3>
<h5>heres what others had to say already:</h5>
<hr/>
{
guest_logs.map((log) => (
<li>
<p>[{log.date.toDateString()}] {log.name}
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}
: {log.message}</p>
<p class="title">[{log.date.toDateString()}] {log.name}
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}:</p>
<p class="message">-> "{log.message}"</p>
</li>
<hr/>
))
}
</ul>
@@ -97,3 +101,76 @@ guest_logs.forEach(log => {
<Footer />
</body>
</html>
<style>
label {
color: var(--text-color);
font-style: italic;
}
website_link:invalid {
border-color: red;
}
input {
background: var(--background-colour);
color: var(--text-color);
}
textarea {
background: var(--background-colour);
color: var(--text-color);
resize: vertical;
}
button {
margin-top: 1em;
width: fit-content;
padding: 1em;
font-size: 1em;
margin-left: auto;
margin-right: auto;
}
form {
background: var(--guest-book-background);
border-color: blanchedalmond;
border-style: solid;
box-shadow: var(--box-shadow);
border-radius: 2em;
padding: 2em;
}
.lastest-guestbook-logs {
padding-top: 2em;
border-radius: 2em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 1em;
background: var(--guest-book-background);
border-style: solid;
border-color: blanchedalmond;
box-shadow: var(--box-shadow);
margin-bottom: 5em;
}
ul > li {
padding-left: 1em;
padding-right: 1em;
transition: 250ms;
list-style-type: none;
}
hr {
color: blue;
border-top: 2px solid blue;
}
li > p {
margin: unset;
}
</style>