Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases172 Packages1 Wiki Activity Actions

Continuing the redesign

Browse source
This commit is contained in:
Firq 2024-10-21 22:23:25 +02:00
parent 9d8493273d
commit 1f7709031c
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
9 changed files with 699 additions and 690 deletions
src/components/cards
taCard.astro

25
src/components/cards/taCard.astro
View file

@ -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>