Merge pull request #37 from markteekman/develop

Develop
markteekman · Aug 12, 2022 · 0aac9a6 · 0aac9a6
2 parents a0ce593 + cd27d9a
commit 0aac9a6
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessiblity features and tools to help you build faster.",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.dev",
   "scripts": {
@@ -11,11 +11,11 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "accessible-astro-components": "^1.5.4",
+    "accessible-astro-components": "^1.5.5",
     "astro-icon": "^0.7.1"
   },
   "devDependencies": {
-    "astro": "^1.0.0-beta.5",
+    "astro": "^1.0.3",
     "autoprefixer": "^10.4.0",
     "sass": "^1.49.9",
     "stylelint": "^13.13.1",

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -4,8 +4,8 @@ import { SkipLinks } from 'accessible-astro-components'
 ---
 
 <header>
-  <SkipLinks client:load />
-  <Navigation client:load>
+  <SkipLinks />
+  <Navigation>
     <li class="menu-item">
       <a href="/">Home</a>
     </li>

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -14,8 +14,8 @@ import { DarkMode } from 'accessible-astro-components'
           <slot />
         </ul>
       </nav>
-      <DarkMode client:load />
-      <ResponsiveToggle client:load />
+      <DarkMode />
+      <ResponsiveToggle />
     </div>
     <nav class="mobile-menu">
       <ul>

diff --git a/src/components/ResponsiveToggle.astro b/src/components/ResponsiveToggle.astro
@@ -1,5 +1,5 @@
 <button class="responsive-toggle" aria-expanded="false" aria-label="Open menu navigation">
-  <svg viewBox="0 0 512 512" aria-hidden="true" fill="var(--action-color)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>
+  <svg width="26" height="19" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"><path d="M2 1.667h24m-24 8h24m-24 8h24" stroke="var(--action-color)" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/></svg>
 </button>
 
 <script>
@@ -10,13 +10,13 @@
   const openMenu = (toggle) => {
     toggle.setAttribute('aria-expanded', true)
     toggle.setAttribute('aria-label', 'Close menu navigation')
-    toggle.innerHTML = `<svg viewBox="0 0 512 512 aria-hidden="true"" fill="var(--action-color)"><path d="m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z"></path></svg>`
+    toggle.innerHTML = `<svg width="20" height="20" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"><path d="M10 10 2 2m8 8 8 8m-8-8 8-8m-8 8-8 8" stroke="var(--action-color)" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/></svg>`
   }
 
   const closeMenu = (toggle) => {
     toggle.setAttribute('aria-expanded', false)
     toggle.setAttribute('aria-label', 'Open menu navigation')
-    toggle.innerHTML = `<svg viewBox="0 0 512 512 aria-hidden="true"" fill="var(--action-color)"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></svg>`
+    toggle.innerHTML = `<svg width="26" height="19" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"><path d="M2 1.667h24m-24 8h24m-24 8h24" stroke="var(--action-color)" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/></svg>`
   }
 
   // execution