Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 69 Packages Wiki Activity Actions

TA listing rounded fix

Browse source
This commit is contained in:
Firq 2023-07-08 14:38:36 +02:00
parent 6e723abcc4
commit 5efe87dcdc
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
2 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/taCard.astro
View file

@ -65,27 +65,33 @@ if (user !== undefined) {
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
height: auto; height: auto;
width: auto; width: auto;
border-radius: 1.25rem;
padding-bottom: 1.5rem;
} }
article:hover { article:hover {
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));
} }
article > .icon { article > .icon {
width: 128px; border-radius: 1.25rem;
height: 128px; --size-value: 7rem;
object-fit: cover; width: var(--size-value);
height: var(--size-value);
margin: 0.5rem;
object-fit: contain;
object-position: 0% 0%; object-position: 0% 0%;
} }
article:hover .icon span { article:hover .icon span {
padding: 0.5rem 0.5rem;
display: flex; display: flex;
position: absolute;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
background-color: var(--c-darkgray); background-color: var(--c-darkgray);
height: 90%; height: calc(var(--size-value) + 0.1rem);
width: 90%; width: calc(var(--size-value) + 0.1rem);
opacity: 90%; opacity: 90%;
border-radius: 1.25rem;
} }
article:hover span h2 { article:hover span h2 {
@ -95,6 +101,7 @@ if (user !== undefined) {
color: white; color: white;
font-size: 18px; font-size: 18px;
line-height: 150%; line-height: 150%;
padding: 0.5rem;
} }
article span h2 { article span h2 {
@ -138,16 +145,19 @@ if (user !== undefined) {
transform: scaleY(0); transform: scaleY(0);
transform-origin: top; transform-origin: top;
position: absolute; position: absolute;
top: 95%; top: 90%;
left: 0px; left: 0px;
right: 0px; right: 0px;
color: white; color: white;
border-radius: 0px 0px 1.25rem 1.25rem;
} }
.expand-on-hover img { .expand-on-hover img {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
margin: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-radius: 0.5rem;
} }
.expand-on-hover h2 { .expand-on-hover h2 {

3
src/layouts/taSection.astro
View file

@ -41,6 +41,9 @@ if (abovetext === undefined) {
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
max-width: max-content; max-width: max-content;
background-color: var(--c-darkgray); background-color: var(--c-darkgray);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
} }
h2 { h2 {
color: white; color: white;