add initial pet graphics

This commit is contained in:
zyl 2024-06-25 00:02:11 -07:00
parent 3d97fbb73c
commit 248041bb55
No known key found for this signature in database
3 changed files with 94 additions and 4 deletions

View file

@ -1,6 +1,34 @@
#pet {
.hidden {
display: none;
#pet-display {
.the-pet {
--color: red;
--width: 250px;
--height: 250px;
background-color: var(--color);
width: var(--width);
height: var(--height);
&.egg {
background-color: white;
// egg shape from https://css-tricks.com/the-shapes-of-css/
width: 126px;
height: 180px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
&.square {
border-radius: 2px;
}
&.circle {
border-radius: 50%;
}
&.triangle {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
}
}
#debug-section [name] {
@ -10,4 +38,8 @@
button {
margin-bottom: 4px;
}
.hidden {
display: none;
}
}