tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Mostly accessibility stuff (#344)

Browse Source
This commit is contained in:
stairman06
2022-01-20 22:21:13 -06:00
committed by GitHub
parent 98c85441f8
commit 643cd87706
13 changed files with 212 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
layouts/default.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="layout">
<header class="site-header">
<section class="navbar columns">
<section class="logo column">
<NuxtLink to="/">
<ModrinthLogo aria-label="modrinth" class="text-logo" />
<header class="site-header" role="presentation">
<section class="navbar columns" role="navigation">
<section class="logo column" role="presentation">
<NuxtLink to="/" aria-label="Modrinth home page">
<ModrinthLogo aria-hidden="true" class="text-logo" />
</NuxtLink>
</section>
<section class="nav-group columns">
<section class="nav">
<section class="nav-group columns" role="presentation">
<section class="nav" aria-label="Page links">
<div class="styled-tabs">
<NuxtLink to="/mods" class="tab">
<span>Mods</span>
@@ -18,25 +18,34 @@
</NuxtLink>
</div>
</section>
<section class="column-grow user-outer">
<section class="column-grow user-outer" aria-label="Account links">
<section class="user-controls">
<button class="control-button" @click="changeTheme">
<MoonIcon v-if="$colorMode.value === 'light'" />
<SunIcon v-else />
<button
class="control-button"
title="Switch theme"
@click="changeTheme"
>
<MoonIcon
v-if="$colorMode.value === 'light'"
aria-hidden="true"
/>
<SunIcon v-else aria-hidden="true" />
</button>
<nuxt-link
v-if="$auth.user"
to="/create/project"
class="control-button"
title="Create project"
>
<PlusIcon />
<PlusIcon aria-hidden="true" />
</nuxt-link>
<nuxt-link
v-if="$auth.user"
to="/notifications"
class="control-button"
title="Notifications"
>
<NotificationIcon />
<NotificationIcon aria-hidden="true" />
<div v-if="$user.notifications.length > 0" class="bubble">
{{ $user.notifications.length }}
</div>
@@ -202,8 +211,8 @@
<Nuxt />
</main>
<footer>
<div class="logo-info">
<ModrinthLogo aria-label="modrinth" class="text-logo" />
<div class="logo-info" role="region" aria-label="Modrinth information">
<ModrinthLogo aria-hidden="true" class="text-logo" />
<p>
Modrinth is open source software. You may view the source code at
<a
@@ -217,8 +226,8 @@
<p>modrinth/knossos {{ version }}</p>
<p>© Guavy LLC</p>
</div>
<div class="links">
<h4>Legal</h4>
<div class="links" role="region" aria-label="Legal">
<h4 aria-hidden="true">Legal</h4>
<nuxt-link to="/legal/terms">Terms</nuxt-link>
<nuxt-link to="/legal/privacy">Privacy</nuxt-link>
<nuxt-link to="/legal/rules">Rules</nuxt-link>
@@ -229,23 +238,21 @@
License
</a>
</div>
<div class="links">
<h4>Resources</h4>
<div class="links" role="region" aria-label="Resources">
<h4 aria-hidden="true">Resources</h4>
<a target="_blank" href="https://blog.modrinth.com">Blog</a>
<a target="_blank" href="https://discord.gg/EUHuJHt">Discord</a>
<a target="_blank" href="https://github.com/modrinth/knossos">GitHub</a>
<a target="_blank" href="https://docs.modrinth.com">Docs</a>
</div>
<div class="buttons">
<nuxt-link to="/settings/privacy">
<button class="iconified-button">
<ShieldIcon />
Privacy settings
</button>
<nuxt-link to="/settings/privacy" class="iconified-button">
<ShieldIcon aria-hidden="true" />
Privacy settings
</nuxt-link>
<button class="iconified-button" @click="changeTheme">
<MoonIcon v-if="$colorMode.value === 'light'" />
<SunIcon v-else />
<MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
<SunIcon v-else aria-hidden="true" />
Change theme
</button>
</div>
@@ -886,7 +893,7 @@ html {
margin-right: auto;
&:hover,
&:focus {
&:focus-visible {
background-color: var(--color-button-bg-hover);
}
}