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

Compare commits

base: sirlilpanda:91b771863378912def16eb339afbdc88cbd1ad84
Branches Tags
sirlilpanda:main
...
compare: sirlilpanda:main
Branches Tags
sirlilpanda:main

6 Commits
91b7718633 ... main

Author SHA1 Message Date
sirlilpanda
52ee36828d added guest book background colours 2026-07-30 22:45:07 +12:00
sirlilpanda
ad980f5349 updated style on guest book 2026-07-30 22:44:34 +12:00
sirlilpanda
52fd67721f update styles 2026-07-30 22:44:18 +12:00
sirlilpanda
289da287c9 fixed go back link 2026-07-30 22:44:00 +12:00
sirlilpanda
21494c1547 now ignores the inprogress articles 2026-07-30 22:43:42 +12:00
sirlilpanda
3f0206ba95 fixed mobile view 2026-07-28 23:04:52 +12:00
6 changed files with 130 additions and 34 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -26,3 +26,4 @@ pnpm-debug.log*
.drizzle.env .drizzle.env
worker-configuration.d.ts worker-configuration.d.ts
src/content/in_progress/

2
src/layouts/Album.astro
View File

@@ -33,7 +33,7 @@ const { title, description, cover, } = Astro.props;
</div> </div>
<p class=""> <p class="">
<a href="/pictures/" class="" <a href="/pictures" class=""
>Go back →</a >Go back →</a
> >
</p> </p>

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

@@ -65,29 +65,33 @@ guest_logs.forEach(log => {
<Header /> <Header />
<main> <main>
<section> <section>
<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
<form method="POST" style="display: grid"> <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" /> <input id="name" name="name" />
<label for="website_link">Website link(optional)</label> <label for="website_link">Website link(optional):</label>
<input id="website_link" name="website_link" /> <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> <textarea id="message" name="message"></textarea>
<button type="submit">Submit</button> <button type="submit">🖊️sign the book🖊️</button>
</form> </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) => ( guest_logs.map((log) => (
<li> <li>
<p>[{log.date.toDateString()}] {log.name} <p class="title">[{log.date.toDateString()}] {log.name}
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""} {log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}:</p>
: {log.message}</p> <p class="message">-> "{log.message}"</p>
</li> </li>
<hr/>
)) ))
} }
</ul> </ul>
@@ -97,3 +101,76 @@ guest_logs.forEach(log => {
<Footer /> <Footer />
</body> </body>
</html> </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>

29
src/pages/index.astro
View File

@@ -39,9 +39,6 @@ const posts = (await getCollection('blog')).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
); );
--- ---
<!doctype html> <!doctype html>
@@ -82,10 +79,10 @@ const posts = (await getCollection('blog')).sort(
</a> </a>
</div> </div>
<ul class="lastest-guestbook-logs">
<h3>consider adding to the <a href="/guestBook">guestbook</a></h3> <h3>consider adding to the <a href="/guestBook">guestbook</a></h3>
<h5>heres what others had to say already</h5> <h5>heres what others had to say already</h5>
<ul class="lastest-guestbook-logs"> <hr/>
{ {
guest_logs.map((log) => ( guest_logs.map((log) => (
<li> <li>
@@ -93,6 +90,7 @@ const posts = (await getCollection('blog')).sort(
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}:</p> {log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}:</p>
<p class="message">{log.message}</p> <p class="message">{log.message}</p>
</li> </li>
<hr/>
)) ))
} }
</ul> </ul>
@@ -201,9 +199,12 @@ const posts = (await getCollection('blog')).sort(
} }
.lastest-guestbook-logs { .lastest-guestbook-logs {
padding-top: 2em;
border-radius: 2em; border-radius: 2em;
padding: 1em; padding-left: 1em;
background: var(--background-colour); padding-right: 1em;
padding-bottom: 1em;
background: var(--guest-book-background);
border-style: solid; border-style: solid;
border-color: blanchedalmond; border-color: blanchedalmond;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
@@ -212,23 +213,25 @@ const posts = (await getCollection('blog')).sort(
ul > li { ul > li {
margin-top: 1em; margin-top: 1em;
border-radius: 1em;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
border-style: solid;
border-color: blanchedalmond;
transition: 250ms; transition: 250ms;
background: var(--background-colour); list-style-type: none;
} }
ul > li:hover { hr {
color: blue;
border-top: 2px solid #1e0ff5;
}
/* ul > li:hover {
transform: translateY(-0.5em); transform: translateY(-0.5em);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
} }
ul > li:nth-of-type(odd) { ul > li:nth-of-type(odd) {
background: var(--main-background-colour); background: var(--main-background-colour);
} } */
</style> </style>

21
src/pages/pictures/index.astro
View File

@@ -84,12 +84,25 @@ const albums = await getCollection('album');
} }
.album-text p { .album-text p {
color: black; color: rgb(0, 0, 0);
}
@media (max-width: 720px) {
.album-text {
padding-right: 1em;
}
.album-text h1 {
font-size: 1.4em;
}
.album-text p {
font-size: 0.8em;
}
} }
</style> </style>

2
src/styles/global.css
View File

@@ -61,6 +61,7 @@
--main-background-colour : #fffeab; --main-background-colour : #fffeab;
--footer-colour : #f1c27c; --footer-colour : #f1c27c;
--top-footer-colour : rgb(182, 139, 46); --top-footer-colour : rgb(182, 139, 46);
--guest-book-background : linear-gradient(180deg, #FFFEED, #fff7d7);
} }
:root[data-theme="dark"] { :root[data-theme="dark"] {
@@ -80,6 +81,7 @@
--main-background-colour : #3b3b3b; --main-background-colour : #3b3b3b;
--footer-colour : #535353; --footer-colour : #535353;
--top-footer-colour : #5c5c5c; --top-footer-colour : #5c5c5c;
--guest-book-background : linear-gradient(180deg, #1a1a1a, #1f1f1f);
} }