This commit is contained in:
parent
2901f3fec3
commit
40e2d75e0a
1 changed files with 98 additions and 27 deletions
|
@ -29,15 +29,21 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
|
|||
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
|
||||
<article>
|
||||
<Image src={servant_images[servantImagePath]()} alt="" class="icon" />
|
||||
<div class="title">
|
||||
<div class="title desktop">
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
<p>
|
||||
<p class="desktop">
|
||||
<span>
|
||||
By {runner}<br /> •
|
||||
</span>
|
||||
{formatted_date}
|
||||
</p>
|
||||
<div class="mobile">
|
||||
<h2>{title}</h2>
|
||||
<span>
|
||||
•<br />By {runner}<br />{formatted_date}
|
||||
</span>
|
||||
</div>
|
||||
<div class="expand-on-hover">
|
||||
<h2>{turns}</h2>
|
||||
</div>
|
||||
|
@ -59,24 +65,108 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
|
|||
|
||||
a {
|
||||
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 {
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 10px;
|
||||
padding: 1rem 1.5rem;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 8rem;
|
||||
width: 90%;
|
||||
border-radius: 1.25rem;
|
||||
padding-bottom: 1.5rem;
|
||||
--size-value: 7rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
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;
|
||||
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 {
|
||||
|
@ -87,7 +177,6 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
|
|||
border-radius: 1.25rem;
|
||||
width: var(--size-value);
|
||||
height: var(--size-value);
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
article:hover .title {
|
||||
|
@ -144,24 +233,6 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
|
|||
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 {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
|
Loading…
Reference in a new issue