Compare commits

...

7 commits

7 changed files with 178 additions and 56 deletions

View file

@ -48,14 +48,14 @@
padding-inline: var(--card-spacing);
}
:host h2 {
:host :where(h2, h3, h4, h5, h6) {
position: relative;
font-size: 1.375rem;
margin-block: 0 0.5em;
padding-block: 0 0.5em;
}
:host h2::after {
:host :where(h2, h3, h4, h5, h6)::after {
content: '';
position: absolute;
display: block;

View file

@ -4,7 +4,7 @@
return `${fullName} — Character Reference`;
}
return "Sebin's Characters — Home";
return "The World of Sebin's Characters";
};
const getImageUrl = (char, type = 'og') =>
@ -24,7 +24,6 @@
<meta property="fediverse:creator" content="@SebinNyshkim@meow.social" />
<meta property="og:site_name" content="Sebin's Characters" />
<meta property="og:type" content="website" />
<meta property="og:url" :content="$data.base + $data.page.url" />
<meta property="og:title" :content="getTitle($data.fullName)" />

View file

@ -2,6 +2,7 @@
:root {
font-family: var(--font-family-copy);
font-size: var(--font-size);
scroll-behavior: smooth;
}
* {

View file

@ -9,8 +9,7 @@
</p>
<p>
&copy; <time @text="new Date().getFullYear()"></time> Sebin Nyshkim<br />
Got
<a :href="feedbackLink" target="_blank"> feedback </a>?<br />
Got <a :href="feedbackLink" target="_blank">feedback</a>?<br />
<a href="/privacy/">Privacy Policy</a>
</p>
</footer>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 748 KiB

After

Width:  |  Height:  |  Size: 99 KiB

Before After
Before After

View file

@ -4,5 +4,5 @@ export default {
},
layout: 'base.webc',
language: 'en_US',
description: 'Your go to place to learn all about the characters of Sebin!'
description: 'Your primary source to learn all about the anatomy, personality and backstory of my cast of characters!'
};

View file

@ -17,17 +17,26 @@
</script>
<main>
<section class="beta-note">
<p>
<strong>🏗️ Work in progress! 🚧</strong> Please note that while most of this site is close to
98% done, it is still being worked on and contents are subject to change.
</p>
<ref-button class="btn">Okie-dokie!</ref-button>
</section>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path
d="M0 324.5C-35.1 298.7 -70.1 272.9 -106.4 256.8C-142.7 240.8 -180.1 234.6 -215 215C-249.8 195.3 -282 162.2 -299.8 124.2C-317.6 86.1 -321.1 43.1 -324.5 0L0 0Z"
></path>
<path
d="M0 -324.5C47.4 -325.2 94.7 -325.9 124.2 -299.8C153.6 -273.7 165.2 -220.7 186.7 -186.7C208.2 -152.6 239.6 -137.4 264.2 -109.4C288.9 -81.5 306.7 -40.7 324.5 0L0 0Z"
></path>
</svg>
<section class="intro">
<h1>Sebin's Characters</h1>
<header>
<h1>
The World of<br />
<span>Sebin's Characters!</span>
</h1>
<p @text="description"></p>
<a href="#intro">Jump in!</a>
</header>
<section id="intro" class="intro">
<p>Hiya! 👋🏻 Welcome to my character reference page! 😊</p>
<p>
This is where you can learn all about my characters with detailed descriptions and lore about
@ -48,71 +57,185 @@
I put a lot of effort into giving all of them a home and I hope you'll find the information
provided enlightening and insightful. Have fun!
</p>
<a href="#characters">Meet the crew!</a>
</section>
<h2 class="char-select">Select Your Character</h2>
<section id="characters" class="char-select">
<h2>Select Your Character</h2>
<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>
<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>
<h3 slot="title" @text="getCharacterName(char)"></h3>
<p @text="getDescription(char)"></p>
</card>
</div>
</section>
</main>
<style>
main {
margin: auto;
padding: 1em;
svg {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
z-index: -1;
}
svg path {
--scale: 0.75;
--fill: oklch(40% 60% 220deg / 0.5);
fill: var(--fill);
@media (min-width: 32em) {
--scale: 1;
}
@media (min-width: 64em) {
--scale: 1.5;
}
@media (min-width: 80em) {
--scale: 1.75;
}
@media (min-width: 120em) {
--scale: 2;
}
@media (prefers-color-scheme: dark) {
--fill: oklch(40% 60% 220deg);
}
}
svg path:first-child {
transform: translate(100%, 0) scale(var(--scale));
}
svg path:last-child {
transform: translate(0, 100%) scale(var(--scale));
}
header {
position: relative;
display: grid;
grid-auto-rows: min-content;
justify-content: center;
justify-items: center;
align-content: center;
align-items: center;
gap: 1em;
text-align: center;
text-wrap: balance;
min-height: 100vh;
background: url('/img/home-bg.svg');
}
header h1 {
font-size: clamp(2.125em, 8vw, 4.5em);
max-width: 20ch;
margin: 0;
}
header h1 span {
--clr-accent-1: oklch(58% 0.16 33deg);
--clr-accent-2: oklch(78% 0.13 68deg);
color: transparent;
background: linear-gradient(var(--clr-accent-1) 35%, var(--clr-accent-2) 100%);
background-clip: text;
}
header p {
--font-size: 1em;
font-size: var(--font-size);
color: oklch(from var(--clr-text) 50% c h);
max-width: 65ch;
margin: 0;
@media (min-width: 35em) {
--font-size: 1.25em;
}
@media (prefers-color-scheme: dark) {
color: oklch(from var(--clr-text) 70% c h);
}
}
a:not([class])[href^='#'] {
--clr-accent: oklch(40% 60% 220deg);
display: block;
justify-self: center;
color: var(--theme-c-primary-100);
text-decoration: none;
background: var(--clr-accent);
box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow);
border-radius: 0.75em;
padding-block: 0.75em;
padding-inline: 1.25em;
transition: background-color 0.4s ease;
&:hover {
background: oklch(from var(--clr-accent) 50% c h);
}
}
.intro {
display: grid;
align-content: center;
gap: 1em;
min-height: 100vh;
max-width: 65ch;
margin: auto;
padding-inline: 1em;
}
.intro h1 {
font-size: clamp(2.125em, 10vw, 4em);
text-align: center;
.intro > * {
margin-block: 0;
}
.char-select {
display: grid;
justify-content: center;
align-content: center;
gap: 2em;
min-height: 100vh;
padding-block: 2em;
}
.char-select > h2 {
font-size: clamp(1.75em, 8vw, 3em);
text-align: center;
margin: 0;
}
.characters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
justify-content: center;
align-content: center;
gap: 1.5em;
width: 90vw;
max-width: 100ch;
margin: auto;
}
.beta-note {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: 1em;
background-color: var(--clr-box-background);
margin: auto;
border: 0.125em solid var(--clr-box-border);
border-radius: 1em;
padding: 1em;
}
.beta-note > * {
margin-block: 0;
}
</style>