Formatted astro files
This commit is contained in:
parent
04ec083b19
commit
c5af572d38
GPG key ID:
3ACC61C8CEC83C20
9 changed files with 91 additions and 73 deletions
|
|
@ -1,63 +1,65 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
title: string
|
||||
body: string
|
||||
href: string
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
const { href, title, body } = Astro.props
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
background-color: white;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 0.6rem;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
background-color: white;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 0.6rem;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: 1rem 1.3rem;
|
||||
border-radius: 0.35rem;
|
||||
color: #111;
|
||||
background-color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
color: #444;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: 1rem 1.3rem;
|
||||
border-radius: 0.35rem;
|
||||
color: #111;
|
||||
background-color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
color: #444;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,17 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
|
|||
In the future, it will be used to catalogue information around FGO TA and the
|
||||
game in general.
|
||||
<br />
|
||||
<a href="https://firq.dev" target="_blank" rel="noopener noreferrer">Feel free to check out my own site.</a>
|
||||
<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 class="version"
|
||||
>(Website version: <a
|
||||
href={release}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">{version}</a
|
||||
>)</span
|
||||
>
|
||||
</span>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,23 @@
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
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}")`;
|
||||
const hamburger_src_url = `url("${hamburger.src}")`
|
||||
---
|
||||
|
||||
<header>
|
||||
<a href="/" rel="noopener noreferrer" aria-label="Home">
|
||||
<Image src={logo} alt="Website Logo"/>
|
||||
<Image src={logo} alt="Website Logo" />
|
||||
</a>
|
||||
<ul class="desktop">
|
||||
<slot />
|
||||
</ul>
|
||||
<button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()">
|
||||
<button
|
||||
class="mobile"
|
||||
aria-label="Navigation Button"
|
||||
tabindex="0"
|
||||
onclick="this.focus()"
|
||||
>
|
||||
<ul>
|
||||
<slot />
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ if (currentPage === slug) {
|
|||
currPage = 'current'
|
||||
}
|
||||
|
||||
const icon_src_url = `url("${icon.src}")`;
|
||||
const icon_src_url = `url("${icon.src}")`
|
||||
const fulllink = `/${slug}`
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@ const options_date: Intl.DateTimeFormatOptions = {
|
|||
day: '2-digit',
|
||||
}
|
||||
const { shortdescription, questReleaseDate, url, title } = Astro.props
|
||||
const render_date = new Date(questReleaseDate).toLocaleDateString('en-GB', options_date)
|
||||
const render_date = new Date(questReleaseDate).toLocaleDateString(
|
||||
'en-GB',
|
||||
options_date
|
||||
)
|
||||
---
|
||||
|
||||
<a href={url} rel="noopener noreferrer">
|
||||
|
|
|
|||
|
|
@ -2,16 +2,15 @@
|
|||
import type { ImageMetadata } from 'astro'
|
||||
import { Image } from 'astro:assets'
|
||||
export interface Props {
|
||||
title: string,
|
||||
link: string,
|
||||
date: string,
|
||||
servant: string,
|
||||
turns: string,
|
||||
title: string
|
||||
link: string
|
||||
date: string
|
||||
servant: string
|
||||
turns: string
|
||||
runner: string
|
||||
}
|
||||
|
||||
const { turns, runner, date, servant, link, title } =
|
||||
Astro.props
|
||||
const { turns, runner, date, servant, link, title } = Astro.props
|
||||
|
||||
const options_date: Intl.DateTimeFormatOptions = {
|
||||
year: 'numeric',
|
||||
|
|
@ -25,12 +24,11 @@ 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"/>
|
||||
<Image src={servant_images[servantImagePath]()} alt="" class="icon" />
|
||||
<div class="title">
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue