Finishing Touches

This commit is contained in:
Firq 2023-07-08 15:02:07 +02:00
parent 4da3f4323c
commit 4aa3865148
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
6 changed files with 76 additions and 24 deletions

View file

@ -24,15 +24,27 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
text-decoration: none;
}
article div {
border-radius: 1.25rem;
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
--size-value: 6.25rem;
width: var(--size-value);
height: var(--size-value);
}
article:hover span {
padding: 0.5rem 0.5rem;
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: 85%;
width: 100%;
height: calc(var(--size-value) + 0.1rem);
width: calc(var(--size-value) + 0.1rem);
opacity: 90%;
}
@ -51,16 +63,8 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
article span {
display: none;
}
article div {
background-size: contain;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
article {
border-radius: 1.25rem;
display: flex;
align-items: center;
justify-content: center;

View file

@ -110,7 +110,7 @@
justify-self: top;
}
@media (min-width: 1120px) {
@media (min-width: 1140px) {
.mobile {
display: none;
}

View file

@ -33,28 +33,32 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
height: auto;
width: auto;
line-height: 100px;
border-radius: 1.25rem;
}
article:hover {
transform: scale(var(--hover-scale));
}
article > div {
border-radius: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
background-size: contain;
width: 100px;
height: 100px;
--size-value: 6.25rem;
width: var(--size-value);
height: var(--size-value);
}
article:hover span {
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: 100%;
width: 100%;
height: calc(var(--size-value) + 0.1rem);
width: calc(var(--size-value) + 0.1rem);
opacity: 90%;
}