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

3
.gitignore vendored
View File

@@ -25,4 +25,5 @@ pnpm-debug.log*
.wrangler
.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>
<p class="">
<a href="/pictures/" class=""
<a href="/pictures" class=""
>Go back →</a
>
</p>

107
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>
<input id="name" name="name" />
<form method="POST" style="display: grid">
<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>
<textarea id="message" name="message"></textarea>
<label for="message">message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
<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>

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(),
);
---
<!doctype html>
@@ -82,10 +79,10 @@ const posts = (await getCollection('blog')).sort(
</a>
</div>
<ul class="lastest-guestbook-logs">
<h3>consider adding to the <a href="/guestBook">guestbook</a></h3>
<h5>heres what others had to say already</h5>
<ul class="lastest-guestbook-logs">
<hr/>
{
guest_logs.map((log) => (
<li>
@@ -93,6 +90,7 @@ const posts = (await getCollection('blog')).sort(
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}:</p>
<p class="message">{log.message}</p>
</li>
<hr/>
))
}
</ul>
@@ -201,9 +199,12 @@ const posts = (await getCollection('blog')).sort(
}
.lastest-guestbook-logs {
padding-top: 2em;
border-radius: 2em;
padding: 1em;
background: var(--background-colour);
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);
@@ -212,23 +213,25 @@ const posts = (await getCollection('blog')).sort(
ul > li {
margin-top: 1em;
border-radius: 1em;
padding-left: 1em;
padding-right: 1em;
border-style: solid;
border-color: blanchedalmond;
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);
box-shadow: var(--box-shadow);
}
ul > li:nth-of-type(odd) {
background: var(--main-background-colour);
}
} */
</style>

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

@@ -84,12 +84,25 @@ const albums = await getCollection('album');
}
.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>

2
src/styles/global.css
View File

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