56 lines
1.3 KiB
Text
56 lines
1.3 KiB
Text
<script webc:setup>
|
|
const characters = Object.keys($data.collections).filter((coll) => coll !== 'all');
|
|
|
|
const getCharacterName = (name) => $data.collections[name][0].data.fullName;
|
|
const getDescription = (name) => $data.collections[name][0].data.description;
|
|
const getAvatar = (name) => `src/img/${name}/avatar.png`;
|
|
const getAltText = (name) => name.charAt(0).toUpperCase() + name.slice(1) + ' Avatar';
|
|
</script>
|
|
|
|
<main>
|
|
<header>
|
|
<h1>Welcome!</h1>
|
|
<p>Select your character:</p>
|
|
</header>
|
|
|
|
<div class="characters">
|
|
<card webc:for="char of characters" :href="`/${char}/`">
|
|
<eleventy-image
|
|
slot="image"
|
|
:src="getAvatar(char)"
|
|
:alt="getAltText(char)"
|
|
:width="[500,1000]"
|
|
></eleventy-image>
|
|
<h2 slot="title" @text="getCharacterName(char)"></h2>
|
|
<p @text="getDescription(char)"></p>
|
|
</card>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
max-width: 130ch;
|
|
margin: auto;
|
|
padding: 1em;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
|
|
& h1 {
|
|
font-size: clamp(3.5em, 5vw, 7em);
|
|
margin-block: clamp(0.25em, 1.75vw, 0.375em);
|
|
}
|
|
|
|
& p {
|
|
font-size: clamp(1.25em, 1.5vw, 2.25em);
|
|
margin-block: clamp(0.25em, 10vw, 1em);
|
|
}
|
|
}
|
|
|
|
.characters {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
|
|
gap: 1.5em;
|
|
}
|
|
</style>
|