cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improved tab navigation

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-18 15:32:25 -07:00
parent 7943179e16
commit ccce1537fd
No known key found for this signature in database
20 changed files with 171 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_includes/partials/header.liquid
View file

@ -1,7 +1,7 @@
<section class="main-title">
<h1>
{% if page.url != '/' %}
<a href="/">{{ meta.siteName }}</a>
<a href="/" tabindex="0">{{ meta.siteName }}</a>
{% else %}
{{ meta.siteName }}
{% endif %}

8
src/_includes/partials/media/watching/grid.liquid
View file

@ -10,9 +10,11 @@
<div class="header">{{ item.title }}</div>
<div class="subheader flex-centered">
{{ item.year }}
{% if rating and item.rating %}
<span class="rating"> ({{ item.rating }})</span>
{% endif %}
{% unless item.favorite %}
{% if item.rating %}
<span class="rating"> ({{ item.rating }})</span>
{% endif %}
{% endunless %} %}
</div>
{% else %}
<div class="header">{{ item.name }}</div>

2
src/_includes/partials/nav/link.liquid
View file

@ -9,7 +9,7 @@
{% endif %}
</span>
{% else %}
<a class="{% if icon %}{{ icon | downcase }} icon {% endif %}{{ class }}" href="{{ categoryUrl }}">
<a class="{% if icon %}{{ icon | downcase }} icon {% endif %}{{ class }}" href="{{ categoryUrl }}" tabindex="0">
{% if icon %}
{% tablericon icon link %}
<span>{{ link }}</span>

3
src/_includes/partials/nav/linked-icon.liquid
View file

@ -2,6 +2,7 @@
class="{{ icon }}"
href="{{ link | downcase }}"
rel="me"
title="{{ name }}">
title="{{ name }}"
tabindex="0">
{% tablericon icon name %}
</a>

18
src/_includes/partials/nav/menu.liquid
View file

@ -1,12 +1,18 @@
{% capture js %}
{% render "../../../assets/scripts/menu.js" %}
{% endcapture %}
<script>{{ js }}</script>
<div class="flex-centered">
<input id="menu-toggle" type="checkbox" />
<label class="menu-button-container" for="menu-toggle">
<div class="menu-closed">{% tablericon "menu" "Menu closed" %}</div>
<div class="menu-open">{% tablericon "x" "Menu open" %}</div>
<input id="menu-toggle" type="checkbox" aria-hidden="true" />
<label class="menu-button-container" for="menu-toggle" aria-controls="primary-navigation" aria-expanded="false" tabindex="0">
<div class="menu-closed" aria-hidden="true">{% tablericon "menu" "Menu closed" %}</div>
<div class="menu-open" aria-hidden="true">{% tablericon "x" "Menu open" %}</div>
</label>
<ul class="menu-primary" aria-label="Primary site navigation">
<ul class="menu-primary" aria-label="Primary site navigation" id="primary-navigation" role="menu">
{% for link in nav.menu %}
<li>{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}</li>
<li role="menu-item">
{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
</li>
{% endfor %}
</ul>
{% render "partials/nav/theme-toggle.liquid" %}

4
src/_includes/partials/nav/theme-toggle.liquid
View file

@ -1,9 +1,7 @@
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
<span class="client-side">
<theme-toggle>
<button
class="theme-toggle"
aria-label="Toggle site theme">
<button class="theme-toggle" aria-label="Toggle site theme" role="menuitem" tabindex="0">
<span class="light">
{% tablericon "sun" "Toggle light theme" %}
</span>