akemi/noway.moe
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Pages: add cat fan page

Browse source
This commit is contained in:
Akemi Izuko 2023-12-30 02:08:17 -07:00
parent 78a2b3cef8
commit bd2b183ea0
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
2 changed files with 77 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/Header.astro
View file

@ -9,6 +9,7 @@ import { SITE_TITLE } from '../consts';
<HeaderLink href="/"><img src="/akemi_silly_transparent.png" /></HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/unix">Unix</HeaderLink>
<HeaderLink href="/meow">Meow</HeaderLink>
</div>
<div class="fun-quote" style="margin: 0">
<span style="font-family: var(--font-title);" class="text-2xl">ReLUwU activated</span>

76
src/pages/meow.astro Normal file
View file

@ -0,0 +1,76 @@
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import { Image } from 'astro:assets';
const imageFiles = (await Astro.glob('../assets/cat-pics/*')).sort().reverse();
---
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<main>
<Header />
<div style="max-width: 960px;">
<h1
class="text-center mt-8 mb-4 text-6xl"
style="font-family: var(--font-title);">
Kruo Pics!
</h1>
<p class="text-center mb-4 text-xl">
This is Kruo. She's about 6 years old. She likes squishy things,
like extra towels on the bed.
</p>
<hr class="m-4" style="border: 1px solid black;" />
</div>
<div class="masonary">
{
imageFiles.map((img) => (
<div class="meow-grid">
<Image
src={img.default}
width="600"
alt="Photo of a pizza"
class="meow-image"
/>
</div>
))
}
</div>
<Footer />
</main>
<style>
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#title {
font-family: var(--font-title);
font-size: 40px;
text-align: center;
margin: 10px;
}
.masonary {
column-count: 4;
column-gap: 10px;
margin: 10px;
}
.meow-grid {
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 10px;
break-inside: avoid;
}
.meow-image {
display: block;
max-width: 100%;
border-radius: 30px;
grid-row: 1 / -1;
grid-column: 1;
}
</style>