aria/aria.coffee
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

f**k ahh syling and gallery work

Browse source
This commit is contained in:
Aria 2025-04-25 04:23:45 +10:00
parent 3bf39af153
commit eedba4c364
19 changed files with 165 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/pages/about.astro
View file

@ -32,7 +32,7 @@ const currentSystem = {
const skillColor = "#F5A8B7";
---
<BaseLayout pageTitle={pageTitle}>
<BaseLayout pageTitle={pageTitle} description={description}>
<Partition>
<p>It's about time I actually write up my own website right?</p>
<br />

47
src/pages/albums.astro Normal file
View file

@ -0,0 +1,47 @@
---
import { getCollection } from "astro:content";
import BaseLayout from "../layouts/BaseLayout.astro";
import Partition from "../components/Partition.astro";
const pageTitle = "Aria's Gallery";
const description = "All of Aria's albums!";
import "../styles/aria.css";
import { Picture } from "astro:assets";
const albums = await getCollection("albums");
---
<BaseLayout pageTitle={pageTitle} description={description}>
<div class="text-center">
<h1 class="text-5xl font-bold text-center my-8">Aria's Gallery!</h1>
{
albums.map((item) => (
<Partition>
<a
href={`/gallery/${item.id}`}
class="group transition-all mb-4 block"
>
<Picture
src={item.data.cover}
alt={item.data.title}
formats={["avif", "webp", "jpeg"]}
width={638}
quality="mid"
class:list={[
"rounded-lg transition-all",
"group-hover:shadow-lg group-hover:opacity-90",
]}
/>
<div class="mt-4 text-center">
<strong class="font-normal">
{item.data.title}
</strong>
<p class="text-xs">{item.data.description}</p>
</div>
</a>
</Partition>
))
}
</div>
</BaseLayout>

2
src/pages/blog.astro
View file

@ -10,7 +10,7 @@ const pageTitle = "Aria's blog";
const description = "Aria's blog of assorted content";
---
<BaseLayout pageTitle={pageTitle}>
<BaseLayout pageTitle={pageTitle} description={description}>
<Partition>
| <a href="/tags" class="nav-btn">Browse Tags</a> |<br />
<h1 class="text-2xl">All blog posts:</h1>

4
src/pages/extreme-format-test.astro
View file

@ -5,10 +5,10 @@ import Partition from "../components/Partition.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "Extreme format test";
const description = "All of Aria's friends with 88x31 buttons for you to click on!!";
const description = "A terrible test of video formats";
---
<BaseLayout pageTitle={pageTitle}>
<BaseLayout pageTitle={pageTitle} description={description}>
<Partition>
<h3 class="text-xl font-bold text-center">"All In One"</h3>
<video controls preload="metadata">

2
src/pages/friends.astro
View file

@ -8,7 +8,7 @@ const pageTitle = "Aria's friends";
const description = "All of Aria's friends with 88x31 buttons for you to click on!!";
---
<BaseLayout pageTitle={pageTitle}>
<BaseLayout pageTitle={pageTitle} description={description}>
<Partition>
<h2>My badge:</h2>

61
src/pages/gallery/[id].astro Normal file
View file

@ -0,0 +1,61 @@
---
import { getCollection } from "astro:content";
import { getAlbumImages } from "../../utils/albums";
import { Picture } from "astro:assets";
import BaseLayout from "../../layouts/BaseLayout.astro";
import NavHeader from "../../components/NavHeader.astro";
export async function getStaticPaths() {
const albums = await getCollection("albums");
const paths = Object.values(albums).map((album) => {
return {
params: {
id: album.id,
},
props: {
album,
},
};
});
return paths;
}
import "../../styles/aria.css";
const { album } = Astro.props;
const images = await getAlbumImages(album.id);
---
<BaseLayout>
<div class="text-center my-16 mb-32">
<h1 class="text-3xl xl:text-6xl font-bold">
{album.data.title}
</h1>
<p class="text-lg xl:text-2xl my-4">
{album.data.description}
</p>
<div
class="mx-auto container my-8 sm:columns-2 md:columns-3 lg:columns-4 xl:columns-5"
>
{
images.map((image) => (
<Picture
src={image}
alt={`Image from ${album.data.title} album`}
formats={["avif", "webp", "jpeg"]}
quality={90}
class="rounded-sm mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg"
loading="lazy"
/>
))
}
</div>
<p class="text-lg my-4 text-center">
<a href="/albums/" class="text-white hover:underline">Go back</a>
</p>
</div>
</BaseLayout>

2
src/pages/index.astro
View file

@ -47,7 +47,7 @@ const age = seconds / 31556952;
<Partition>
<h1 class="text-2xl">These are cool people!!</h1>
<br />
<div class="flex outline-dotted p-5 flex-wrap justify-center">
<div class="flex outline-dotted p-5 flex-wrap justify-center max-w-4xl">
<FriendLink
name="Alyxia"
image="https://alyxia.dev/static/img/88x31/self.png"

2
src/pages/other buttons.astro
View file

@ -8,7 +8,7 @@ const pageTitle = "Aria's friends";
const description = "More 88x31 buttons of very random natures";
---
<BaseLayout pageTitle={pageTitle}>
<BaseLayout pageTitle={pageTitle} description={description}>
<Partition>
<h1 class="text-2xl">Here are some more 88x31 buttons:</h1>
<br />

2
src/pages/portfolio.astro
View file

@ -21,7 +21,7 @@ const languagesUsed = [
// languagesUsed.sort((a, b) => a.localeCompare(b.firstname))
---
<BaseLayout pageTitle={pageTitle}>
<BaseLayout pageTitle={pageTitle} description={description}>
<Partition>
<h1 class="text-4xl text-center">Portfolio</h1>

2
src/pages/special_blog.astro
View file

@ -8,7 +8,7 @@ const pageTitle = "Aria's friends";
const description = "All of Aria's friends with 88x31 buttons for you to click on!!";
---
<BaseLayout pageTitle={pageTitle}>
<BaseLayout pageTitle={pageTitle} description={description}>
<Partition>
<h1 class="text-2xl">You should not be here!!</h1>
<p>If you can see this page then something has gone a little silly!</p><br />