Major rewrite for 0.1.6 - Dynamic database entry generation based on json files, dynamic run page generation and more
This commit is contained in:
parent
e75a575417
commit
7fe9e8c25f
GPG key ID:
3ACC61C8CEC83C20
28 changed files with 2954 additions and 45 deletions
|
|
@ -1,4 +1,7 @@
|
|||
---
|
||||
import packagejson from '../../package.json'
|
||||
const version = packagejson.version
|
||||
const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/tag/${version}`
|
||||
---
|
||||
|
||||
<div>
|
||||
|
|
@ -9,6 +12,8 @@
|
|||
game in general.
|
||||
<br />
|
||||
<a href="https://firq.dev" target="_blank" rel="noopener noreferrer">Feel free to check out my own site.</a>
|
||||
<br />
|
||||
<span class="version">(Website version: <a href={release} target="_blank" rel="noopener noreferrer">{version}</a>)</span>
|
||||
</span>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -30,5 +35,10 @@
|
|||
a {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--c-darkpurple);
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
import logo from '../assets/logo.svg'
|
||||
import hamburger from 'iconoir/icons/menu.svg'
|
||||
const hamburger_src_url = `url("${hamburger.src}")`;
|
||||
---
|
||||
|
||||
<header>
|
||||
<a href="/" rel="noopener noreferrer" aria-label="Home">
|
||||
<img src="/assets/logo.svg" alt="" />
|
||||
<Image src={logo} alt="Website Logo"/>
|
||||
</a>
|
||||
<ul class="desktop">
|
||||
<slot />
|
||||
|
|
@ -13,11 +17,11 @@
|
|||
<slot />
|
||||
</ul>
|
||||
<div class="placeholder"></div>
|
||||
<i class="iconoir-menu"></i>
|
||||
<div class="hamburger-menu"></div>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
<style define:vars={{ hamburger_src_url }}>
|
||||
header {
|
||||
z-index: 1000;
|
||||
position: sticky;
|
||||
|
|
@ -79,16 +83,6 @@
|
|||
height: 64px;
|
||||
}
|
||||
|
||||
.mobile > i {
|
||||
position: static;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
align-self: flex-start;
|
||||
padding-right: 1em;
|
||||
padding-top: 1.15rem;
|
||||
}
|
||||
|
||||
.mobile > ul {
|
||||
display: none;
|
||||
padding: 0px;
|
||||
|
|
@ -111,6 +105,17 @@
|
|||
justify-self: top;
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
mask: var(--hamburger_src_url) no-repeat center;
|
||||
background-color: white;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
position: static;
|
||||
align-self: flex-start;
|
||||
padding-right: 1em;
|
||||
padding-top: 2.5em;
|
||||
}
|
||||
|
||||
@media (min-width: 1140px) {
|
||||
.mobile {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ export interface Props {
|
|||
currentPage?: string
|
||||
link: string
|
||||
text: string
|
||||
icon: string
|
||||
icon: ImageMetadata
|
||||
}
|
||||
|
||||
const { icon, text, link, currentPage } = Astro.props
|
||||
|
|
@ -17,6 +17,7 @@ if (currentPage === slug) {
|
|||
currPage = 'current'
|
||||
}
|
||||
|
||||
const icon_src_url = `url("${icon.src}")`;
|
||||
const fulllink = `/${slug}`
|
||||
---
|
||||
|
||||
|
|
@ -28,12 +29,12 @@ const fulllink = `/${slug}`
|
|||
class={currPage}
|
||||
tabindex="0"
|
||||
>
|
||||
<i class={icon}></i>
|
||||
<div class="icon"></div>
|
||||
{text}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
<style define:vars={{ icon_src_url }}>
|
||||
li {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -41,7 +42,9 @@ const fulllink = `/${slug}`
|
|||
display: flex;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
li > a {
|
||||
display: inline-flex;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
justify-content: center;
|
||||
|
|
@ -49,11 +52,29 @@ const fulllink = `/${slug}`
|
|||
font-size: 1.4em;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
gap: 0.2em;
|
||||
}
|
||||
|
||||
li > a:hover {
|
||||
color: var(--c-purplepink);
|
||||
}
|
||||
|
||||
li > a:hover > .icon {
|
||||
background-color: var(--c-purplepink);
|
||||
}
|
||||
|
||||
.current {
|
||||
color: var(--c-darkpurple);
|
||||
color: var(--c-darkpurple) !important;
|
||||
}
|
||||
|
||||
.current > .icon {
|
||||
background-color: var(--c-darkpurple) !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
mask: var(--icon_src_url) no-repeat center;
|
||||
background-color: white;
|
||||
width: 1.4em;
|
||||
height: 1.4em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
103
src/components/questListing.astro
Normal file
103
src/components/questListing.astro
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
export interface Props {
|
||||
url: string | undefined
|
||||
title: string
|
||||
questReleaseDate: string
|
||||
shortdescription: string
|
||||
}
|
||||
|
||||
const options_date: Intl.DateTimeFormatOptions = {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: '2-digit',
|
||||
}
|
||||
const { shortdescription, questReleaseDate, url, title } = Astro.props
|
||||
const render_date = new Date(questReleaseDate).toLocaleDateString('en-GB', options_date)
|
||||
---
|
||||
|
||||
<a href={url} rel="noopener noreferrer">
|
||||
<div class="circle"></div>
|
||||
<article>
|
||||
<h2>{title}</h2>
|
||||
<h3>{render_date}</h3>
|
||||
<p>{shortdescription}</p>
|
||||
</article>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.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;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
height: auto;
|
||||
margin: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
text-align: left;
|
||||
font-size: 1.1em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
article > h2 {
|
||||
margin: 0.3rem 0.5rem;
|
||||
color: var(--c-darkpurple);
|
||||
font-size: 1.5rem;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
article > h3 {
|
||||
margin: 0.2em 0.5rem;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
article {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
justify-content: center;
|
||||
background-color: var(--c-darkergray);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
min-height: 100%;
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
a:hover > article {
|
||||
transform: scaleY(102.5%) scaleX(101%);
|
||||
}
|
||||
</style>
|
||||
184
src/components/taCard.astro
Normal file
184
src/components/taCard.astro
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
---
|
||||
import type { ImageMetadata } from 'astro'
|
||||
import { Image } from 'astro:assets'
|
||||
export interface Props {
|
||||
title: string,
|
||||
link: string,
|
||||
date: string,
|
||||
servant: string,
|
||||
turns: string,
|
||||
runner: string
|
||||
}
|
||||
|
||||
const { turns, runner, date, servant, link, title } =
|
||||
Astro.props
|
||||
|
||||
const options_date: Intl.DateTimeFormatOptions = {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
}
|
||||
|
||||
const servantImagePath = `/src/assets/ta_servants/${servant}.png`
|
||||
|
||||
const formatted_date = new Date(date).toLocaleDateString('de-DE', options_date)
|
||||
const servant_images = import.meta.glob<{ default: ImageMetadata }>(
|
||||
'/src/assets/ta_servants/*.png'
|
||||
)
|
||||
|
||||
---
|
||||
|
||||
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
|
||||
<article>
|
||||
<Image src={servant_images[servantImagePath]()} alt="" class="icon"/>
|
||||
<div class="title">
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
<p>
|
||||
<span>
|
||||
By {runner}<br /> •
|
||||
</span>
|
||||
{formatted_date}
|
||||
</p>
|
||||
<div class="expand-on-hover">
|
||||
<h2>{turns}</h2>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article {
|
||||
background-color: var(--c-darkergray);
|
||||
border-color: var(--c-darkgray);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
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;
|
||||
}
|
||||
|
||||
article:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
}
|
||||
|
||||
article > .icon {
|
||||
border-radius: 1.25rem;
|
||||
width: var(--size-value);
|
||||
height: var(--size-value);
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
article:hover .title {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: var(--c-darkgray);
|
||||
height: calc(var(--size-value) + 0.1rem);
|
||||
width: calc(var(--size-value) + 0.1rem);
|
||||
opacity: 90%;
|
||||
border-radius: 1.25rem;
|
||||
top: 1.1em;
|
||||
}
|
||||
|
||||
article:hover .title h2 {
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
line-height: 150%;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
article .title h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article .title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.expand-on-hover h2 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
article:hover .expand-on-hover {
|
||||
transform: scaleY(1);
|
||||
transition: transform 200ms ease-in-out;
|
||||
background-color: var(--c-duskgray);
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue