Fixed weird issue on database page

This commit is contained in:
Firq-ow 2024-01-09 19:09:53 +01:00
parent 62e3869ce9
commit 9f607ff14d
Signed by: Firq
GPG key ID: BC5CE35A72BDB4AB
4 changed files with 37 additions and 33 deletions
src/components

View file

@ -33,30 +33,6 @@ const render_date = questReleaseDate.toLocaleDateString(
.circle {
display: none;
}
@media (min-width: 900px) {
.circle {
margin: 1rem 1rem 1rem 0rem;
position: relative;
display: flex;
visibility: visible;
height: 1.5rem;
width: 1.5rem;
border-radius: 40%;
background-color: var(--c-darkpurple);
transition: transform var(--speed) var(--ease);
}
a:hover > .circle {
height: 1.75rem;
width: 1.75rem;
translate: -0.125rem;
margin-right: 0.825rem;
}
article {
margin-left: 0.5rem;
}
}
a {
align-items: center;
@ -92,8 +68,8 @@ const render_date = questReleaseDate.toLocaleDateString(
flex: 1;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
align-items: center;
align-content: center;
justify-content: center;
background-color: var(--c-darkergray);
padding: 10px;
@ -102,7 +78,35 @@ const render_date = questReleaseDate.toLocaleDateString(
min-height: 100%;
border-radius: 1.25rem;
}
a:hover > article {
transform: scaleY(102.5%) scaleX(101%);
}
@media (min-width: 900px) {
.circle {
margin: 1rem 0.5rem 1rem 0.5rem;
position: relative;
display: flex;
visibility: visible;
height: 1.5rem;
width: 1.5rem;
border-radius: 40%;
background-color: var(--c-darkpurple);
transition: transform var(--speed) var(--ease);
}
a:hover > .circle {
height: 1.75rem;
width: 1.75rem;
translate: -0.125rem;
margin-right: 0.825rem;
}
article {
align-items: flex-start;
align-content: flex-start;
margin-left: 0.5rem;
}
}
</style>