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

refactor: 💄 adjust icon shadows and min grid column width

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-09 19:09:13 +02:00
parent 7bd2440556
commit 2c06226078
2 changed files with 6 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/traits.webc
View file

@ -9,7 +9,7 @@
<style> <style>
.trait-list { .trait-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
gap: 0.75em; gap: 0.75em;
margin: 0; margin: 0;
@ -26,13 +26,11 @@
justify-items: start; justify-items: start;
& .icon-box { & .icon-box {
--icon-size: 2em;
position: relative; position: relative;
grid-area: icon; grid-area: icon;
width: var(--icon-size); width: 2em;
height: var(--icon-size); height: 2em;
background: linear-gradient( background: linear-gradient(
to bottom right, to bottom right,
@ -40,7 +38,7 @@
oklch(from var(--clr-box-background) l c h) 50% oklch(from var(--clr-box-background) l c h) 50%
); );
box-shadow: 0.0625em 0.0625em 0.3em oklch(from var(--clr-box-background) calc(l + 0.1) c h); box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
border-radius: 0.5em; border-radius: 0.5em;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
@ -56,8 +54,6 @@
} }
& svg { & svg {
width: 100%;
height: 100%;
padding: 0.5em; padding: 0.5em;
} }

2
src/css/colors.css
View file

@ -19,6 +19,7 @@
--clr-box-background: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h); --clr-box-background: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
--clr-box-border: oklch(from var(--theme-c-onyx) calc(l * 1.75) c h); --clr-box-border: oklch(from var(--theme-c-onyx) calc(l * 1.75) c h);
--clr-box-shadow: oklch(from var(--theme-c-night) calc(l * 4) c h);
--clr-color-box-background: oklch(from var(--theme-c-gunmetal) calc(l * 2.5) c h); --clr-color-box-background: oklch(from var(--theme-c-gunmetal) calc(l * 2.5) c h);
@ -30,6 +31,7 @@
--clr-box-background: var(--theme-c-eerie-black); --clr-box-background: var(--theme-c-eerie-black);
--clr-box-border: var(--theme-c-onyx); --clr-box-border: var(--theme-c-onyx);
--clr-box-shadow: var(--theme-c-night);
--clr-color-box-background: var(--theme-c-gunmetal); --clr-color-box-background: var(--theme-c-gunmetal);
} }