Formatted astro files
All checks were successful
/ checking (push) Successful in 23s
/ build-site (push) Successful in 2m14s
/ release (push) Successful in 7s

This commit is contained in:
Firq 2024-01-02 23:58:10 +01:00
parent 04ec083b19
commit c5af572d38
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
9 changed files with 91 additions and 73 deletions

View file

@ -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>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
<a href={href}>
<h2>
{title}
<span>&rarr;</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>

View file

@ -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>

View file

@ -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>

View file

@ -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}`
---

View file

@ -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">

View file

@ -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>

View file

@ -15,7 +15,7 @@ export interface Props {
const icons: IconsLookup = {
home: home,
database: database
database: database,
}
const { descriptionOverride, currentpage, title } = Astro.props
@ -38,7 +38,7 @@ const mapped_navdata = navdata.map((item) => ({
}))
---
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>{title}</title>

View file

@ -9,7 +9,9 @@ const description =
'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
const questInfo = []
const fulldata = import.meta.glob<{ default: filedata }>(`../content/data/*.json`)
const fulldata = import.meta.glob<{ default: filedata }>(
`../content/data/*.json`
)
for (const [key, value] of Object.entries(fulldata)) {
const url = `${Astro.url}/${findSlug(key)}`

View file

@ -11,7 +11,7 @@ const description =
currentpage="home"
descriptionOverride={description}
>
<Hero />
<Hero />
</Layout>
<style></style>