Compare commits
13 Commits
f0f2f3f3b5
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 52ee36828d | |||
| ad980f5349 | |||
| 52fd67721f | |||
| 289da287c9 | |||
| 21494c1547 | |||
| 3f0206ba95 | |||
| 91b7718633 | |||
| c51fadab21 | |||
| 72c277f1cb | |||
| ecf8fb71cf | |||
| 5a2efd1b93 | |||
| e23c854e06 | |||
| 3d086dedf5 |
3
.gitignore
vendored
@@ -25,4 +25,5 @@ pnpm-debug.log*
|
|||||||
.wrangler
|
.wrangler
|
||||||
.drizzle.env
|
.drizzle.env
|
||||||
|
|
||||||
worker-configuration.d.ts
|
worker-configuration.d.ts
|
||||||
|
src/content/in_progress/
|
||||||
|
After Width: | Height: | Size: 6.3 MiB |
|
After Width: | Height: | Size: 7.8 MiB |
|
After Width: | Height: | Size: 7.1 MiB |
|
After Width: | Height: | Size: 5.4 MiB |
|
After Width: | Height: | Size: 5.9 MiB |
|
After Width: | Height: | Size: 6.6 MiB |
|
After Width: | Height: | Size: 5.3 MiB |
|
After Width: | Height: | Size: 5.5 MiB |
|
After Width: | Height: | Size: 3.5 MiB |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 5.3 MiB |
|
After Width: | Height: | Size: 8.1 MiB |
|
After Width: | Height: | Size: 4.6 MiB |
|
After Width: | Height: | Size: 7.4 MiB |
|
After Width: | Height: | Size: 3.2 MiB |
|
After Width: | Height: | Size: 3.0 MiB |
|
After Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 3.2 MiB |
|
After Width: | Height: | Size: 7.6 MiB |
|
After Width: | Height: | Size: 7.2 MiB |
|
After Width: | Height: | Size: 9.1 MiB |
|
After Width: | Height: | Size: 7.4 MiB |
|
After Width: | Height: | Size: 7.2 MiB |
|
After Width: | Height: | Size: 6.6 MiB |
|
After Width: | Height: | Size: 5.1 MiB |
|
After Width: | Height: | Size: 6.9 MiB |
|
After Width: | Height: | Size: 6.7 MiB |
|
After Width: | Height: | Size: 6.4 MiB |
|
After Width: | Height: | Size: 7.3 MiB |
|
After Width: | Height: | Size: 4.8 MiB |
|
After Width: | Height: | Size: 8.9 MiB |
|
After Width: | Height: | Size: 9.1 MiB |
|
After Width: | Height: | Size: 9.8 MiB |
|
After Width: | Height: | Size: 9.5 MiB |
|
After Width: | Height: | Size: 9.0 MiB |
|
After Width: | Height: | Size: 8.2 MiB |
|
After Width: | Height: | Size: 6.7 MiB |
|
After Width: | Height: | Size: 8.5 MiB |
|
After Width: | Height: | Size: 9.4 MiB |
|
After Width: | Height: | Size: 8.5 MiB |
|
After Width: | Height: | Size: 9.9 MiB |
|
After Width: | Height: | Size: 7.3 MiB |
|
After Width: | Height: | Size: 6.4 MiB |
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 5.5 MiB |
|
After Width: | Height: | Size: 9.7 MiB |
|
After Width: | Height: | Size: 9.5 MiB |
|
After Width: | Height: | Size: 6.7 MiB |
|
After Width: | Height: | Size: 9.8 MiB |
|
After Width: | Height: | Size: 7.6 MiB |
|
After Width: | Height: | Size: 9.3 MiB |
|
After Width: | Height: | Size: 7.4 MiB |
@@ -17,4 +17,18 @@ const blog = defineCollection({
|
|||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const collections = { blog };
|
const album = defineCollection({
|
||||||
|
loader : glob({base : './src/content/pictures/', pattern : '**/*.yaml'}),
|
||||||
|
schema: ({image}) =>
|
||||||
|
z.object({
|
||||||
|
title : z.string(),
|
||||||
|
description : z.string(),
|
||||||
|
cover : image()
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
export const collections = {
|
||||||
|
blog,
|
||||||
|
album,
|
||||||
|
};
|
||||||
|
|||||||
@@ -94,7 +94,9 @@ check this article often as i will be updating it
|
|||||||
- https://codeberg.org/microcad/microcad
|
- https://codeberg.org/microcad/microcad
|
||||||
|
|
||||||
# text editors
|
# text editors
|
||||||
- https://github.com/neurocyte/flow?tab=readme-ov-file
|
- https://github.com/neurocyte/flow
|
||||||
|
- https://github.com/4coder-community/4cc
|
||||||
|
- inclosed beta : https://fred-dev.tech/
|
||||||
- https://lite-xl.com/
|
- https://lite-xl.com/
|
||||||
- https://pragtical.dev/
|
- https://pragtical.dev/
|
||||||
- https://amp.rs/
|
- https://amp.rs/
|
||||||
|
|||||||
3
src/content/pictures/cottage.yaml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
title: 'island cottage'
|
||||||
|
description: 'just a small cottage i built on an island, this was really my first foray in to a more creative style of building.'
|
||||||
|
cover: '../../assets/pictures/minecraft_builds/cottage/2021-08-25_12.19.03.png'
|
||||||
3
src/content/pictures/farm-house.yaml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
title: 'large farm house'
|
||||||
|
description: 'after a while of building smaller houses and more *cozy* builds, i decided to try my hand at a larger build falling back into a more classic minecraft building pallet'
|
||||||
|
cover: '../../assets/pictures/minecraft_builds/farm-house/2024-07-18_14.42.07.png'
|
||||||
3
src/content/pictures/french-town.yaml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
title: 'french town'
|
||||||
|
description: 'after the smallness of the italian village i decided to start try my hand at larger buildings again but this time try to texture the buildings to show wear instead of texture for textures sake'
|
||||||
|
cover: '../../assets/pictures/minecraft_builds/french-town/2026-01-01_12.50.19.png'
|
||||||
3
src/content/pictures/interiors.yaml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
title: 'interiors'
|
||||||
|
description: 'just a collection all a few of the interiors ive actually furished'
|
||||||
|
cover: '../../assets/pictures/minecraft_builds/interiors/2025-12-31_16.29.26.png'
|
||||||
3
src/content/pictures/italianesque-village.yaml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
title: 'italianesque village'
|
||||||
|
description: 'trying to strech my legs a bit on a larger build, however falling back to my normal small building style, but starting to play around with alot more colour'
|
||||||
|
cover: '../../assets/pictures/minecraft_builds/italianesque-village/far_off/2025-05-02_19.49.29.png'
|
||||||
3
src/content/pictures/mountain-farm.yaml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
title: 'mountain farm'
|
||||||
|
description: 'my current attemps at making a more aesthetically pleasing farm'
|
||||||
|
cover: '../../assets/pictures/minecraft_builds/mountain-farm/2026-01-02_16.51.41.png'
|
||||||
3
src/content/pictures/tuscany-style-farm.yaml
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
title: 'tuscany style farm'
|
||||||
|
description: 'deciding my italian village need some from of food source i though it approate to create this mountain side farm'
|
||||||
|
cover: '../../assets/pictures/minecraft_builds/tuscany-style-farm/2025-09-05_18.08.14.png'
|
||||||
45
src/layouts/Album.astro
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
---
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
import type { CollectionEntry } from 'astro:content';
|
||||||
|
import BaseHead from '../components/BaseHead.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
|
||||||
|
type Props = CollectionEntry<'album'>['data'];
|
||||||
|
|
||||||
|
const { title, description, cover, } = Astro.props;
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<BaseHead title={title} description={description} />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<div class="">
|
||||||
|
<h1 class="">
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
|
<p class="">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="">
|
||||||
|
<a href="/pictures" class=""
|
||||||
|
>Go back →</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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">
|
<h1>sign the guest book</h1>
|
||||||
<label for="name">Name</label>
|
<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>
|
||||||
@@ -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>
|
||||||
37
src/pages/pictures/[id].astro
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
// useful https://jankraus.net/2024/04/05/how-to-build-a-simple-photo-gallery-with-astro/
|
||||||
|
import { type CollectionEntry, getCollection, } from 'astro:content';
|
||||||
|
import Album from '../../layouts/Album.astro';
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
export const prerender = true;
|
||||||
|
|
||||||
|
|
||||||
|
async function getAlbumImages(id : any) {
|
||||||
|
let images = import.meta.glob<{default : ImageMetadata}>("/src/assets/pictures/**/*.png")
|
||||||
|
images = Object.fromEntries(Object.entries(images).filter(([key]) => key.includes(id)));
|
||||||
|
const resolvedImages = await Promise.all(Object.values(images).map((image) => image().then((mod) => mod.default)));
|
||||||
|
return resolvedImages;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const albums = await getCollection('album');
|
||||||
|
|
||||||
|
return albums.map((album) => {
|
||||||
|
return {
|
||||||
|
params: {id: album.id,},
|
||||||
|
props: album ,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = CollectionEntry<'album'>;
|
||||||
|
|
||||||
|
const album = Astro.props;
|
||||||
|
|
||||||
|
const images = await getAlbumImages(album.id);
|
||||||
|
// console.log(images)
|
||||||
|
---
|
||||||
|
|
||||||
|
<Album {...album.data}>
|
||||||
|
{images.map((image) => <Image src={image} alt=""></Image>)}
|
||||||
|
</Album>
|
||||||
@@ -2,98 +2,107 @@
|
|||||||
import BaseHead from '../../components/BaseHead.astro';
|
import BaseHead from '../../components/BaseHead.astro';
|
||||||
import Header from '../../components/Header.astro';
|
import Header from '../../components/Header.astro';
|
||||||
import Footer from '../../components/Footer.astro';
|
import Footer from '../../components/Footer.astro';
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
import { actions } from 'astro:actions';
|
||||||
|
import { Image } from 'astro:assets';
|
||||||
|
|
||||||
import { drizzle } from "drizzle-orm/d1";
|
|
||||||
import { GuestLog } from "../../schema";
|
|
||||||
import { env } from "cloudflare:workers";
|
|
||||||
|
|
||||||
export const prerender = false
|
const albums = await getCollection('album');
|
||||||
|
|
||||||
const db = drizzle(env.DB);
|
|
||||||
|
|
||||||
if (Astro.request.method === 'POST') {
|
|
||||||
// Parse form data
|
|
||||||
const formData = await Astro.request.formData();
|
|
||||||
console.log(formData);
|
|
||||||
const name = formData.get('name');
|
|
||||||
const message = formData.get('message');
|
|
||||||
const website_link = formData.get('website_link');
|
|
||||||
|
|
||||||
if (
|
|
||||||
typeof name === 'string' &&
|
|
||||||
typeof website_link === 'string' &&
|
|
||||||
typeof message === 'string' &&
|
|
||||||
name !== "" &&
|
|
||||||
message !== ""
|
|
||||||
) {
|
|
||||||
|
|
||||||
if (message.length >= 255) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await db.insert(GuestLog).values([{
|
// console.log(albums)
|
||||||
name : name,
|
|
||||||
message : message,
|
|
||||||
website_link : website_link,
|
|
||||||
date_viewed : new Date(),
|
|
||||||
}]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let guest_logs : {id: number; name: string; message: string | null; date: Date;}[] = [];
|
|
||||||
try {
|
|
||||||
guest_logs = await db
|
|
||||||
.select()
|
|
||||||
.from(GuestLog)
|
|
||||||
.orderBy(GuestLog.date);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
|
|
||||||
guest_logs.forEach(log => {
|
|
||||||
console.log(log)
|
|
||||||
});
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<!--
|
||||||
|
albums.map(album => (
|
||||||
|
<h1>{album.data.title}</h1>
|
||||||
|
<img src=\"{album.data.cover}\" alt="">
|
||||||
|
-->
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<BaseHead title="guest book" description="a guest book of everyone who have visited my site" />
|
<BaseHead title="photo albums" description="a collection of nice photos ive taken" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Header />
|
<Header />
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
|
<h1>Albums</h1>
|
||||||
<form method="POST" style="display: grid">
|
{( albums.map(album =>
|
||||||
<label for="name">Name</label>
|
<div class="album">
|
||||||
<input id="name" name="name" />
|
<a href={"pictures/" + album.id}>
|
||||||
|
<div class="album-text">
|
||||||
<label for="website_link">Website link(optional)</label>
|
<h1>{album.data.title}</h1>
|
||||||
<input id="website_link" name="website_link" />
|
<p>{album.data.description}</p>
|
||||||
|
</div>
|
||||||
<label for="message">message</label>
|
|
||||||
<textarea id="message" name="message"></textarea>
|
|
||||||
|
|
||||||
<button type="submit">Submit</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<h1>guest book</h1>
|
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
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>
|
|
||||||
</li>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
<Image src={album.data.cover} alt="" class="album-image"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
))}
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.album {
|
||||||
|
/* display: flex; */
|
||||||
|
margin-bottom: 2em;
|
||||||
|
width: fit-content;
|
||||||
|
transition: 250ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album:hover {
|
||||||
|
transform: translateY(-1em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-image {
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-text {
|
||||||
|
position: absolute;
|
||||||
|
max-width: 20em;
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-top: 1em;
|
||||||
|
background-color: rgba(250, 235, 215, 0.2);
|
||||||
|
rotate: -3deg;
|
||||||
|
transition: 250ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-text h1 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-text p {
|
||||||
|
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>
|
||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||