Fixes for Apple and Accessibility #23

Merged
Firq merged 7 commits from dev into main 2024-01-01 20:30:17 +00:00
14 changed files with 738 additions and 687 deletions

1329
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,7 +1,7 @@
{ {
"name": "@firq/fgosite", "name": "@firq/fgosite",
"type": "module", "type": "module",
"version": "0.1.20", "version": "0.1.21",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

View file

@ -9,19 +9,21 @@ export interface Props {
} }
const { imageFile, link, site } = Astro.props const { imageFile, link, site } = Astro.props
const logoAltText = `${site} Logo`
const imagePath = `/src/assets/social/${imageFile}` const imagePath = `/src/assets/social/${imageFile}`
const images_logos = import.meta.glob<{ default: ImageMetadata }>( const images_logos = import.meta.glob<{ default: ImageMetadata }>(
'/src/assets/social/*.{png,webp}' '/src/assets/social/*.{png,webp}'
) )
--- ---
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={site}> <a href={link} target="_blank" rel="noopener noreferrer" aria-label=`${site} - new window`>
<article class="contact do-hover"> <article class="contact do-hover">
<Image src={images_logos[imagePath]()} alt="" /> <Image src={images_logos[imagePath]()} alt={logoAltText} />
<div> <div>
<h2>{site}</h2> <h2>{site}</h2>
</div> </div>
</article> </article>
<span class="visually-hidden">{logoAltText}</span>
</a> </a>
<style> <style>

View file

@ -14,7 +14,7 @@ const imagePath = `/src/assets/favourites/${imageFile}`
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/favourites/*.{png,webp}') const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/favourites/*.{png,webp}')
--- ---
<a href={link} target="_blank" rel="noopener noreferrer"> <a href={link} target="_blank" rel="noopener noreferrer" aria-label=`${name} - new window`>
<div class="heading">{name}</div> <div class="heading">{name}</div>
<Image src={images[imagePath]()} alt={name} /> <Image src={images[imagePath]()} alt={name} />
<h2 class="subtext"> <h2 class="subtext">

View file

@ -6,18 +6,19 @@ const hamburger_src_url = `url("${hamburger.src}")`;
--- ---
<header> <header>
<a href="/" rel="noopener noreferrer" aria-label="Home"> <a href="/" rel="noopener noreferrer" aria-label="Home" role="navigation">
<Image src={logo} alt="Website Logo"/> <Image src={logo} alt="Firq Website Logo"/>
<span class="visually-hidden">Firq Website Logo</span>
</a> </a>
<ul class="desktop"> <ul class="desktop">
<slot /> <slot name="desktop"/>
</ul> </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()" role="navigation">
<ul> <ul>
<slot /> <slot name="mobile"/>
</ul> </ul>
<div class="placeholder"></div> <div class="placeholder"></div>
<div class="hamburger-menu"></div> <div class="hamburger-menu" role="navigation"></div>
</button> </button>
</header> </header>
@ -108,12 +109,12 @@ const hamburger_src_url = `url("${hamburger.src}")`;
.hamburger-menu { .hamburger-menu {
mask: var(--hamburger_src_url) no-repeat center; mask: var(--hamburger_src_url) no-repeat center;
background-color: white; background-color: white;
width: 2em; width: 2rem;
height: 2em; height: 2rem;
position: static; position: static;
align-self: flex-start; align-self: flex-start;
padding-right: 1em; margin-right: 1rem;
padding-top: 2.5em; margin-top: 1rem;
} }
@media (min-width: 1140px) { @media (min-width: 1140px) {

View file

@ -1,12 +1,13 @@
--- ---
export interface Props { export interface Props {
currentPage?: string currentPage?: string
navtype: "mobile" | "desktop"
link: string link: string
text: string text: string
icon: ImageMetadata icon: ImageMetadata
} }
const { icon, text, link, currentPage } = Astro.props const { icon, text, link, navtype, currentPage } = Astro.props
let currPage = '' let currPage = ''
const slug = link.replace(new RegExp('/', 'g'), '') const slug = link.replace(new RegExp('/', 'g'), '')
@ -19,6 +20,8 @@ if (currentPage === slug) {
const icon_src_url = `url("${icon.src}")`; const icon_src_url = `url("${icon.src}")`;
const fulllink = `/${slug}` const fulllink = `/${slug}`
let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
--- ---
<li> <li>
@ -27,7 +30,8 @@ const fulllink = `/${slug}`
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label={text} aria-label={text}
class={currPage} class={currPage}
tabindex="0" role="navigation"
{...extraattributes}
> >
<div class="icon"></div> <div class="icon"></div>
{text} {text}

View file

@ -9,6 +9,7 @@ export interface Props {
} }
const { imageFile, link, title } = Astro.props const { imageFile, link, title } = Astro.props
const logoAltText = `${title} Logo`
const imagePath = `/src/assets/technologies/${imageFile}` const imagePath = `/src/assets/technologies/${imageFile}`
const images_logos = import.meta.glob<{ default: ImageMetadata }>( const images_logos = import.meta.glob<{ default: ImageMetadata }>(
'/src/assets/technologies/*.{png,webp}' '/src/assets/technologies/*.{png,webp}'
@ -17,11 +18,12 @@ const images_logos = import.meta.glob<{ default: ImageMetadata }>(
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}> <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article> <article>
<Image src={images_logos[imagePath]()} alt="" /> <Image src={images_logos[imagePath]()} alt={logoAltText} />
<div> <div>
<h2>{title}</h2> <h2>{title}</h2>
</div> </div>
</article> </article>
<span class="visually-hidden">{logoAltText}</span>
</a> </a>
<style> <style>

View file

@ -77,7 +77,12 @@ const mapped_navdata = navdata.map((item) => ({
<Navbar> <Navbar>
{ {
mapped_navdata.map((item) => ( mapped_navdata.map((item) => (
<NavbarEntry currentPage={currentpage} {...item} /> <NavbarEntry currentPage={currentpage} navtype="desktop" {...item} slot="desktop"/>
))
}
{
mapped_navdata.map((item) => (
<NavbarEntry currentPage={currentpage} navtype="mobile" {...item} slot="mobile"/>
)) ))
} }
</Navbar> </Navbar>
@ -102,4 +107,15 @@ const mapped_navdata = navdata.map((item) => ({
background: var(--c-lightgray); background: var(--c-lightgray);
margin: 0px; margin: 0px;
} }
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style> </style>

View file

@ -6,6 +6,9 @@ description: 'A handful of observations from the cernunnos fight'
author: 'Requiem & Firq' author: 'Requiem & Firq'
tags: ['fgo', 'lostbelt 6', 'cernunnos'] tags: ['fgo', 'lostbelt 6', 'cernunnos']
--- ---
import thumbnail_firq from "../../assets/thumbnails/WrHudtdfivA.jpg"
import thumbnail_requiem from "../../assets/thumbnails/O1f-go7uJQM.jpg"
import YoutubeEmbed from "../../components/youtubeEmbed.astro"
## Foreword ## Foreword
@ -45,3 +48,19 @@ On the first break Cernunnos skill seals your servants. This means on turn 2 you
As an example: As an example:
Let's say I used Alteras third skill turn 1. She has to wait 5 turns to reuse it and on turn 3 Vitch gives her 2 times cooldown reduction. Let's say I used Alteras third skill turn 1. She has to wait 5 turns to reuse it and on turn 3 Vitch gives her 2 times cooldown reduction.
Ideally you would be able to reuse her third skill on turn 4 but because she gets skill sealed she can't do it. Ideally you would be able to reuse her third skill on turn 4 but because she gets skill sealed she can't do it.
## Resulting runs
Both Requiem and I managed to get unique TAs done with Scathach (Requiem even with more servants). Those runs are embedded here:
### Firq
This run doesn't use the support Castoria provided by the game and instead makes use of Sherlock instead.
<YoutubeEmbed id="WrHudtdfivA" thumbnail={thumbnail_firq.src}/>
### Requiem
A frontline only run with double Castoria
<YoutubeEmbed id="O1f-go7uJQM" thumbnail={thumbnail_requiem.src}/>

View file

@ -310,5 +310,21 @@
"date": "2023-12-16", "date": "2023-12-16",
"servantImageFile": "shishou.png", "servantImageFile": "shishou.png",
"turns": "3T" "turns": "3T"
},
{
"title": "Tunguska - Beast of Taming 4T (FLO)",
"link": "https://www.youtube.com/watch?v=g6aASJeL-ao",
"targetImageFile": "koyanskayaofdark.png",
"date": "2023-12-26",
"servantImageFile": "shishou.png",
"turns": "4T"
},
{
"title": "Tunguska - Beast IV:L 4T",
"link": "https://www.youtube.com/watch?v=brz21NKMMsY",
"targetImageFile": "beast_4_l.png",
"date": "2023-12-31",
"servantImageFile": "shishou.png",
"turns": "4T"
} }
] ]