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

chore: tidy up markup

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-20 09:35:31 -07:00
parent ee9b7aa778
commit ebd98b1f34
No known key found for this signature in database
4 changed files with 4 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "19.5.10", "version": "19.5.11",
"description": "The source for my personal site. Built using 11ty.", "description": "The source for my personal site. Built using 11ty.",
"type": "module", "type": "module",
"scripts": { "scripts": {

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

@ -4,16 +4,14 @@
<script>{{ js }}</script> <script>{{ js }}</script>
<div class="flex-centered"> <div class="flex-centered">
<input id="menu-toggle" type="checkbox" aria-hidden="true" /> <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"> <label class="menu-button-container" for="menu-toggle" aria-expanded="false" tabindex="0">
<span id="menu-label-text" class="screen-readers-only">Toggle mobile menu</span> <span id="menu-label-text" class="screen-readers-only">Toggle mobile menu</span>
<div class="menu-closed" aria-hidden="true">{% tablericon "menu" "Menu closed" %}</div> <div class="menu-closed" aria-hidden="true">{% tablericon "menu" "Menu closed" %}</div>
<div class="menu-open" aria-hidden="true">{% tablericon "x" "Menu open" %}</div> <div class="menu-open" aria-hidden="true">{% tablericon "x" "Menu open" %}</div>
</label> </label>
<ul class="menu-primary" aria-label="Primary site navigation" id="primary-navigation" role="menu"> <ul class="menu-primary" aria-label="Primary site navigation" id="primary-navigation" role="menu">
{% for link in nav.menu %} {% for link in nav.menu %}
<li role="menu-item"> <li>{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}</li>
{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
</li>
{% endfor %} {% endfor %}
</ul> </ul>
{% render "partials/nav/theme-toggle.liquid" %} {% render "partials/nav/theme-toggle.liquid" %}

2
src/assets/scripts/menu.js
View file

@ -2,7 +2,7 @@ window.addEventListener('load', () => {
const menuInput = document.getElementById('menu-toggle') const menuInput = document.getElementById('menu-toggle')
const menuLabelText = document.getElementById('menu-label-text') const menuLabelText = document.getElementById('menu-label-text')
const menuButtonContainer = document.querySelector('.menu-button-container') const menuButtonContainer = document.querySelector('.menu-button-container')
const menuItems = document.querySelectorAll('.menu-primary li[role="menu-item"]') const menuItems = document.querySelectorAll('.menu-primary li')
const isMobile = () => window.innerWidth <= 768 const isMobile = () => window.innerWidth <= 768
const udpateMenuState = () => { const udpateMenuState = () => {

4
src/assets/styles/components/menu.css
View file

@ -73,10 +73,6 @@
} }
} }
a[role="menu-item"]:focus {
outline: none;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.menu-primary { .menu-primary {
position: absolute; position: absolute;