From 5efe87dcdcc4e6aad6e90be2228f1d34786e8d42 Mon Sep 17 00:00:00 2001 From: Firq Date: Sat, 8 Jul 2023 14:38:36 +0200 Subject: [PATCH] TA listing rounded fix --- src/components/taCard.astro | 26 ++++++++++++++++++-------- src/layouts/taSection.astro | 3 +++ 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/taCard.astro b/src/components/taCard.astro index 6a69036..36e9879 100644 --- a/src/components/taCard.astro +++ b/src/components/taCard.astro @@ -65,27 +65,33 @@ if (user !== undefined) { transition: transform var(--speed) var(--ease); height: auto; width: auto; + border-radius: 1.25rem; + padding-bottom: 1.5rem; } article:hover { transform: scale(var(--hover-scale)); } article > .icon { - width: 128px; - height: 128px; - object-fit: cover; + border-radius: 1.25rem; + --size-value: 7rem; + width: var(--size-value); + height: var(--size-value); + margin: 0.5rem; + object-fit: contain; object-position: 0% 0%; } article:hover .icon span { - padding: 0.5rem 0.5rem; display: flex; + position: absolute; align-items: center; justify-content: center; text-align: center; background-color: var(--c-darkgray); - height: 90%; - width: 90%; + height: calc(var(--size-value) + 0.1rem); + width: calc(var(--size-value) + 0.1rem); opacity: 90%; + border-radius: 1.25rem; } article:hover span h2 { @@ -95,6 +101,7 @@ if (user !== undefined) { color: white; font-size: 18px; line-height: 150%; + padding: 0.5rem; } article span h2 { @@ -138,16 +145,19 @@ if (user !== undefined) { transform: scaleY(0); transform-origin: top; position: absolute; - top: 95%; + top: 90%; left: 0px; right: 0px; color: white; + border-radius: 0px 0px 1.25rem 1.25rem; } .expand-on-hover img { width: 3rem; height: 3rem; - margin: 0.5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + border-radius: 0.5rem; } .expand-on-hover h2 { diff --git a/src/layouts/taSection.astro b/src/layouts/taSection.astro index a93a800..317e43c 100644 --- a/src/layouts/taSection.astro +++ b/src/layouts/taSection.astro @@ -41,6 +41,9 @@ if (abovetext === undefined) { padding: 0.25rem 0.75rem; max-width: max-content; background-color: var(--c-darkgray); + padding: 0.25rem 1.5rem; + border-radius: 0.5rem; + padding-bottom: 0.5rem; } h2 { color: white;