SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 💄 dynamically scale character choice page title fonts

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-11 15:21:45 +02:00
parent 980e1f0463
commit 20e79c01d8
1 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/index.webc
View file

@ -8,9 +8,10 @@
</script> </script>
<main> <main>
<header>
<h1>Welcome!</h1> <h1>Welcome!</h1>
<p>Select your character:</p> <p>Select your character:</p>
</header>
<div class="characters"> <div class="characters">
<card webc:for="char of characters" :href="`/${char}/`" webc:nokeep> <card webc:for="char of characters" :href="`/${char}/`" webc:nokeep>
@ -33,6 +34,20 @@
padding: 1em; 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 { .characters {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));