Another attempt at a major redesign, but for real this time, i swear
This commit is contained in:
parent
676e5e2b00
commit
9d8493273d
10 changed files with 54 additions and 69 deletions
src/components/cards
|
@ -64,7 +64,8 @@ if (bond10 === false) {
|
|||
}
|
||||
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
transform: scale(1);
|
||||
border-color: var(--c-darkpurple);
|
||||
}
|
||||
|
||||
article {
|
||||
|
@ -72,14 +73,13 @@ if (bond10 === false) {
|
|||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
border: 2px var(--c-darkgray) solid;
|
||||
padding: 0em 0.75em 0.5rem 0.75em;
|
||||
width: max(40%, 100px);
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
|
||||
|
@ -98,27 +98,27 @@ if (bond10 === false) {
|
|||
}
|
||||
|
||||
.expand-on-hover {
|
||||
background-color: var(--c-duskgray);
|
||||
background-color: var(--c-darkergray);
|
||||
border: 2px var(--c-darkpurple) solid;
|
||||
border-top: 0px;
|
||||
z-index: 99;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
position: absolute;
|
||||
top: 92.5%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-radius: 0px 0px 1.25rem 1.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
article:hover .expand-on-hover {
|
||||
transform: scaleY(1);
|
||||
transition: transform 200ms ease-in-out;
|
||||
background-color: var(--c-duskgray);
|
||||
}
|
||||
|
||||
.bond-ce {
|
||||
padding-top: 0.75rem;
|
||||
width: auto;
|
||||
height: 3rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.unobtained {
|
||||
|
@ -133,16 +133,12 @@ if (bond10 === false) {
|
|||
}
|
||||
|
||||
article > img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
.bond-ce {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.expand-on-hover {
|
||||
top: 95%;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue