Continuing the redesign
This commit is contained in:
parent
9d8493273d
commit
1f7709031c
9 changed files with 699 additions and 690 deletions
src/components/cards
|
@ -80,10 +80,9 @@ if (user !== undefined) {
|
|||
|
||||
article {
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
border: 2px var(--c-darkgray) solid;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 8rem;
|
||||
|
@ -97,7 +96,8 @@ if (user !== undefined) {
|
|||
}
|
||||
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
transform: scale(1);
|
||||
border-color: var(--c-darkpurple);
|
||||
}
|
||||
|
||||
article > .icon {
|
||||
|
@ -114,11 +114,12 @@ if (user !== undefined) {
|
|||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: var(--c-darkgray);
|
||||
height: calc(var(--size-value) + 0.1rem);
|
||||
width: calc(var(--size-value) + 0.1rem);
|
||||
height: var(--size-value);
|
||||
width: var(--size-value);
|
||||
padding: 1px;
|
||||
opacity: 90%;
|
||||
border-radius: 1.25rem;
|
||||
top: 1.1em;
|
||||
top: calc(0.5rem + 9px);
|
||||
}
|
||||
|
||||
article:hover .title h2 {
|
||||
|
@ -165,24 +166,24 @@ if (user !== undefined) {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
align-items: top;
|
||||
justify-content: space-evenly;
|
||||
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: 90%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
color: white;
|
||||
border-radius: 0px 0px 1.25rem 1.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.expand-on-hover img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
@ -194,6 +195,6 @@ if (user !== undefined) {
|
|||
article:hover .expand-on-hover {
|
||||
transform: scaleY(1);
|
||||
transition: transform 200ms ease-in-out;
|
||||
background-color: var(--c-duskgray);
|
||||
background-color: var(--c-darkergray);
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue