117 lines
2.7 KiB
Text
117 lines
2.7 KiB
Text
---
|
|
layout: base.webc
|
|
---
|
|
|
|
<popup-modal id="nsfw-warning" :open="isOpen">
|
|
<template webc:nokeep slot="heading"> 🔞 Whoa, Nelly! 🔞 </template>
|
|
<template webc:nokeep slot="message">
|
|
<p>Entering the kinky zone!</p>
|
|
<p>You confirm that you are of legal age to view adult content!</p>
|
|
</template>
|
|
</popup-modal>
|
|
|
|
<icon-sprite></icon-sprite>
|
|
|
|
<main :class="firstName.toLowerCase()">
|
|
<profile>
|
|
<eleventy-image
|
|
slot="avatar"
|
|
:src="`src/img/${firstName.toLowerCase()}/avatar.png`"
|
|
:alt="firstName + ' Avatar'"
|
|
:width="[100, 200, 300, 400, 500, 600]"
|
|
sizes="(min-width: 120em) 250px, (min-width: 64em) 200px, 100px"
|
|
></eleventy-image>
|
|
<template webc:nokeep slot="credit">
|
|
© <a :href="$data.avatar.href" target="_blank" @text="$data.avatar.artist"></a>
|
|
</template>
|
|
<template webc:nokeep slot="name" @text="fullName"></template>
|
|
<template webc:nokeep slot="species" @text="species"></template>
|
|
<traits :@traits="$data.getTraits()"></traits>
|
|
</profile>
|
|
|
|
<page-content :@char="$data.firstName.toLowerCase()">
|
|
<h1 @text="$data.title || $data.eleventyNavigation.key"></h1>
|
|
<template @raw="content" webc:nokeep></template>
|
|
</page-content>
|
|
|
|
<page-footer></page-footer>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
--inbox-spacing: 1rem;
|
|
|
|
display: grid;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-items: start;
|
|
gap: 1em;
|
|
grid-auto-columns: 100%;
|
|
grid-template-areas:
|
|
'info'
|
|
'content'
|
|
'footer';
|
|
|
|
margin-block: var(--container-spacing-top-safe) var(--container-spacing-bottom-safe);
|
|
margin-inline: var(--container-spacing-left-safe) var(--container-spacing-right-safe);
|
|
|
|
margin-block: var(--page-spacing);
|
|
|
|
@media (min-width: 64em) {
|
|
--inbox-spacing: 1.5rem;
|
|
|
|
grid-auto-columns: revert;
|
|
grid-template-columns: 18em minmax(0, 65ch);
|
|
grid-template-areas:
|
|
'info content'
|
|
'. footer';
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
margin-inline: var(--inbox-spacing);
|
|
}
|
|
|
|
footer {
|
|
--columns: 1fr;
|
|
|
|
grid-area: footer;
|
|
display: grid;
|
|
grid-template-columns: var(--columns);
|
|
gap: 1em;
|
|
width: 100%;
|
|
max-width: 65ch;
|
|
padding-inline: var(--inbox-spacing);
|
|
|
|
@media (min-width: 35em) {
|
|
--columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
footer p {
|
|
--text-align: center;
|
|
|
|
margin: 0;
|
|
text-align: var(--text-align);
|
|
|
|
@media (min-width: 35em) {
|
|
margin: revert;
|
|
}
|
|
}
|
|
|
|
footer p:first-child {
|
|
text-align: var(--text-align);
|
|
|
|
@media (min-width: 35em) {
|
|
--text-align: start;
|
|
}
|
|
}
|
|
|
|
footer p:last-child {
|
|
text-align: var(--text-align);
|
|
|
|
@media (min-width: 35em) {
|
|
--text-align: end;
|
|
}
|
|
}
|
|
</style>
|