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

Colors and other stuff

Browse source
This commit is contained in:
Firq 2024-10-24 18:52:33 +02:00
parent aab26e63b2
commit 34e24346d1
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
25 changed files with 234 additions and 272 deletions
src/components/cards
technologyCard.astro

82
src/components/cards/technologyCard.astro
View file

@ -31,64 +31,54 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
a {
text-decoration: none;
}
article {
--size-value: 6.25rem;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 10px;
display: flex;
justify-content: center;
position: relative;
align-items: center;
justify-content: center;
text-align: center;
transition: transform var(--speed) var(--ease);
background-color: var(--c-primary-background);
border: 2px solid var(--c-primary-background);
border-radius: 1.25rem;
padding: 6px;
height: auto;
width: auto;
line-height: 100px;
border-radius: 1.25rem;
position: relative;
}
article:hover {
transform: scale(var(--hover-scale));
}
article > img {
border-radius: 1.25rem;
width: var(--size-value);
height: var(--size-value);
}
article:hover div {
article img {
border-radius: 1.25rem;
padding: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: calc(var(--size-value));
width: calc(var(--size-value) - 1rem);
opacity: 90%;
z-index: 100;
position: absolute;
border-style: solid;
border-width: 10px;
border-color: var(--c-darkgray);
}
article:hover h2 {
margin: 0;
position: absolute;
display: inline-flex;
font-weight: bold;
color: white;
font-size: 18px;
line-height: 150%;
}
article h2 {
display: none;
width: 80px;
height: auto;
}
article div {
display: none;
}
article:hover {
border-color: var(--c-accent-1);
}
article:hover div {
display: flex;
position: absolute;
margin: unset;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-primary-background);
border-radius: 1.25rem;
width: 80px;
height: 80px;
opacity: 90%;
z-index: 100;
}
article:hover h2 {
display: inline-flex;
font-size: 16px;
font-weight: 500;
color: var(--c-primary-text);
}
</style>