Mobile layout for TA cards
All checks were successful
/ checking (push) Successful in 36s

This commit is contained in:
Firq 2024-01-03 20:28:41 +01:00
parent 2901f3fec3
commit 40e2d75e0a
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20

View file

@ -29,15 +29,21 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}> <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article> <article>
<Image src={servant_images[servantImagePath]()} alt="" class="icon" /> <Image src={servant_images[servantImagePath]()} alt="" class="icon" />
<div class="title"> <div class="title desktop">
<h2>{title}</h2> <h2>{title}</h2>
</div> </div>
<p> <p class="desktop">
<span> <span>
By {runner}<br /> • By {runner}<br /> •
</span> </span>
{formatted_date} {formatted_date}
</p> </p>
<div class="mobile">
<h2>{title}</h2>
<span>
•<br />By {runner}<br />{formatted_date}
</span>
</div>
<div class="expand-on-hover"> <div class="expand-on-hover">
<h2>{turns}</h2> <h2>{turns}</h2>
</div> </div>
@ -59,24 +65,108 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
a { a {
text-decoration: none; text-decoration: none;
width: 90%;
}
.mobile {
width: 12rem;
height: 8rem;
padding: unset;
margin: unset;
display: flex;
flex-flow: column;
color: white;
align-items: center;
padding-left: 0.5rem;
}
.mobile > h2 {
margin: 0%;
margin-top: 0.5rem;
font-size: 1.25rem;
text-align: center;
}
.mobile span {
font-size: 1.05rem;
} }
article { article {
background-color: var(--c-darkergray); background-color: var(--c-darkergray);
border-color: var(--c-darkgray); border-color: var(--c-darkgray);
padding: 10px; padding: 1rem 1.5rem;
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
height: auto; height: auto;
width: auto; width: 90%;
max-width: 8rem;
border-radius: 1.25rem; border-radius: 1.25rem;
padding-bottom: 1.5rem;
--size-value: 7rem; --size-value: 7rem;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: space-around;
}
@media (max-width: 1139px) {
.desktop {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
}
@media (min-width: 620px) {
article {
width: 15rem;
justify-content: center;
padding: 10px;
}
a {
width: unset;
}
.mobile > h2 {
font-size: 1rem;
}
}
@media (min-width: 1140px) {
.mobile {
display: none;
}
article {
max-width: 8rem;
flex-direction: column; flex-direction: column;
padding-bottom: 1.5rem;
}
.expand-on-hover {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
background-color: var(--c-duskgray);
z-index: 99;
transform: scaleY(0);
transform-origin: top;
position: absolute;
top: 90%;
left: 0px;
right: 0px;
color: white;
border-radius: 0px 0px 1.25rem 1.25rem;
}
article > .icon {
margin: 0.5rem;
}
} }
article:hover { article:hover {
@ -87,7 +177,6 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
border-radius: 1.25rem; border-radius: 1.25rem;
width: var(--size-value); width: var(--size-value);
height: var(--size-value); height: var(--size-value);
margin: 0.5rem;
} }
article:hover .title { article:hover .title {
@ -144,24 +233,6 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
flex-direction: column; flex-direction: column;
} }
.expand-on-hover {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
background-color: var(--c-duskgray);
z-index: 99;
transform: scaleY(0);
transform-origin: top;
position: absolute;
top: 90%;
left: 0px;
right: 0px;
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;