Fixed TA site part
Some checks failed
/ get-version (push) Successful in 3s
/ astro-check (push) Successful in 13s
/ check-tag (push) Failing after 2s
/ checking (push) Has been skipped
/ build-site (push) Successful in 1m10s
/ create-release (push) Successful in 6s
/ run-unlighthouse (push) Successful in 0s
/ auto-deploy-dockge (push) Successful in 27s

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

View file

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