TA listing rounded fix
This commit is contained in:
parent
6e723abcc4
commit
5efe87dcdc
2 changed files with 21 additions and 8 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue