Fixed TA site part

This commit is contained in:
Firq 2024-10-23 17:28:06 +02:00
parent 5dfbd2cccd
commit 3b500c8b45
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
3 changed files with 64 additions and 96 deletions

View file

@ -46,26 +46,6 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
</article>
<style>
.heading {
display: flex;
height: 4rem;
width: 100%;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
font-weight: bold;
}
.servants-container {
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
}
article:hover {
transform: scale(1);
border-color: var(--c-darkpurple);

View file

@ -36,118 +36,93 @@ const servant_images = import.meta.glob<GlobImage>(
const loadedServantImage = plsLoadImage(servant_images, servantImagePath)
const loadedTargetImage = plsLoadImage(target_images, targetImagePath)
let hasuser = ''
if (user !== undefined) {
hasuser = 'hasuser'
}
const hasuser = user !== undefined ? 'display: flex' : 'display: none'
---
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article>
<Image src={loadedTargetImage} alt={title} class="icon" />
<div class="imagecontainer">
<Image src={loadedTargetImage} alt={title} />
<div class="title">
<h2>{title}</h2>
</div>
</div>
<p>
<span class={hasuser}>
By {user}<br /> •
</span>
<span style={hasuser}>By {user}<br />•</span>
{formatted_date}
</p>
<div class="expand-on-hover">
<Image src={loadedServantImage} alt="" />
<h2>{turns}</h2>
</div>
</article>
</a>
<style>
div {
display: none;
}
span {
display: none;
}
.hasuser {
display: flex;
}
a {
text-decoration: none;
}
article {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: var(--c-darkergray);
border: 2px var(--c-darkgray) solid;
padding: 10px;
text-align: center;
width: max(30%, 100px);
height: auto;
width: auto;
max-width: 8rem;
border-radius: 1.25rem;
padding-bottom: 1.5rem;
--size-value: 7rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 1;
}
article:hover {
a:hover {
transform: scale(1);
border-color: var(--c-darkpurple);
z-index: 10;
}
article > .icon {
.imagecontainer {
display: flex;
width: 90%;
height: auto;
position: relative;
}
.imagecontainer > img {
width: 100%;
height: auto;
border-radius: 1.25rem;
width: var(--size-value);
height: var(--size-value);
margin: 0.5rem;
}
article:hover .title {
a:hover .title {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: var(--size-value);
width: var(--size-value);
padding: 1px;
width: 100%;
height: 100%;
opacity: 90%;
box-shadow: 0px 0px 0px 1px var(--c-darkgray);
border-radius: 1.25rem;
top: calc(0.5rem + 9px);
}
article:hover .title h2 {
margin: 0;
a:hover .title h2 {
margin: 4px;
display: inline-flex;
font-weight: bold;
font-weight: 500;
color: white;
font-size: 18px;
font-size: 1rem;
line-height: 150%;
padding: 0.5rem;
}
article .title h2 {
a .title {
display: none;
}
article .title {
display: none;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
}
p {
display: flex;
flex-wrap: wrap;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
@ -155,11 +130,8 @@ if (user !== undefined) {
text-decoration: none;
color: white;
font-size: 1rem;
font-weight: bold;
padding-top: 0.5rem;
margin: 0.5rem 0px;
flex-wrap: wrap;
flex-direction: column;
font-weight: 400;
margin: 0.5rem 0px 0.25rem 0px;
}
.expand-on-hover {
@ -176,14 +148,16 @@ if (user !== undefined) {
transform-origin: top;
position: absolute;
top: 90%;
padding-top: 0.5rem;
margin-top: 0.2rem;
color: white;
border-radius: 0px 0px 1.25rem 1.25rem;
width: 100%;
}
.expand-on-hover img {
width: 3rem;
height: 3rem;
width: 2.5rem;
height: auto;
margin-bottom: 0.5rem;
border-radius: 0.5rem;
}
@ -192,9 +166,22 @@ if (user !== undefined) {
margin: 0.5rem;
}
article:hover .expand-on-hover {
a:hover .expand-on-hover {
transform: scaleY(1);
transition: transform 200ms ease-in-out;
background-color: var(--c-darkergray);
}
@media (min-width: 512px) {
a {
padding: 10px;
width: auto;
height: auto;
}
a > .imagecontainer {
width: 112px;
height: 112px;
}
}
</style>

View file

@ -24,12 +24,13 @@ if (abovetext === undefined) {
<style>
div > div {
row-gap: 1.5em;
column-gap: 1.5em;
display: flex;
position: relative;
flex-flow: row wrap;
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
display: flex;
flex-flow: row wrap;
padding: 1em;
}
h1 {