astro-accelerator 5.10.7 → 5.10.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/public/css/main.css +5 -1
  3. package/public/js/modules/nav-mobile.js +24 -26
  4. package/src/themes/accelerator/components/Header.astro +13 -15
  5. package/src/themes/accelerator/components/Search.astro +1 -1
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "5.10.7",
2
+ "version": "5.10.9",
3
3
  "author": "Steve Fenton",
4
4
  "name": "astro-accelerator",
5
5
  "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",
package/public/css/main.css CHANGED
@@ -429,12 +429,16 @@ a.navigation-icon:focus {
429
429
  height: var(--icon-width);
430
430
  }
431
431
 
432
+ .site-header .header-icon {
433
+ text-decoration: none;
434
+ }
435
+
432
436
  .site-header .header-icon:hover,
433
437
  .site-header .header-icon:focus {
434
438
  stroke: var(--fore-link-alt);
435
439
  }
436
440
 
437
- .site-header .header-icon[data-navigationid='site-nav'] {
441
+ .site-header .header-icon[data-navigation-id='site-nav'] {
438
442
  position: relative;
439
443
  z-index: 100;
440
444
  }
package/public/js/modules/nav-mobile.js CHANGED
@@ -9,11 +9,7 @@
9
9
 
10
10
  import { qs, qsa } from './query.js';
11
11
  import { removeScroll, resetScroll } from './scrollbar.js';
12
- import {
13
- getFocusableElement,
14
- trapFocusForward,
15
- trapReverseFocus,
16
- } from './focus.js';
12
+ import { getFocusableElement, trapFocusForward, trapReverseFocus } from './focus.js';
17
13
 
18
14
  /**
19
15
  * Provides an overlay with the navigation for mobile users.
@@ -28,7 +24,7 @@ import {
28
24
  * @param {string} resizedEventName
29
25
  */
30
26
  function addMobileNav(resizedEventName) {
31
- const icons = qsa('[data-navigationid]');
27
+ const icons = qsa('[data-navigation-id]');
32
28
  for (let icon of icons) {
33
29
  addMobileNavigation(icon, resizedEventName);
34
30
  }
@@ -48,11 +44,8 @@ function addMobileNav(resizedEventName) {
48
44
  * @param {string} resizedEventName
49
45
  */
50
46
  function addMobileNavigation(icon, resizedEventName) {
51
- const navigationSelector = icon.dataset.navigationid || '';
52
- const iconType =
53
- icon.firstElementChild && icon.firstElementChild.tagName == 'svg'
54
- ? 'svg'
55
- : 'element';
47
+ const navigationSelector = icon.getAttribute('data-navigation-id') || '';
48
+ const iconType = icon.firstElementChild && icon.firstElementChild.tagName == 'svg' ? 'svg' : 'element';
56
49
 
57
50
  const originalIcon = icon.innerHTML;
58
51
  const overlay = document.createElement('div');
@@ -98,7 +91,7 @@ function addMobileNavigation(icon, resizedEventName) {
98
91
  overlay.style.display = 'block';
99
92
  menuElement.style.display = 'none';
100
93
 
101
- qsa('[id]', overlay).forEach((elem) => {
94
+ qsa('[id]', overlay).forEach(elem => {
102
95
  elem.id = 'overlay__' + elem.id;
103
96
  });
104
97
 
@@ -119,13 +112,21 @@ function addMobileNavigation(icon, resizedEventName) {
119
112
  });
120
113
 
121
114
  if (iconType === 'svg') {
122
- icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"
123
- width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5"
124
- fill="none" stroke-linecap="round" stroke-linejoin="round">
125
- <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
126
- <line x1="18" y1="6" x2="6" y2="18" />
127
- <line x1="6" y1="6" x2="18" y2="18" />
128
- </svg>`;
115
+ icon.innerHTML = `
116
+ <svg
117
+ xmlns="http://www.w3.org/2000/svg"
118
+ width="32"
119
+ height="32"
120
+ viewBox="0 0 24 24"
121
+ fill="none"
122
+ stroke-width="1"
123
+ stroke-linecap="round"
124
+ stroke-linejoin="round"
125
+ >
126
+ <path d="M18 6l-12 12" />
127
+ <path d="M6 6l12 12" />
128
+ </svg>
129
+ `;
129
130
  }
130
131
 
131
132
  document.body.appendChild(overlay);
@@ -156,14 +157,11 @@ function addMobileNavigation(icon, resizedEventName) {
156
157
  return false;
157
158
  });
158
159
 
159
- document.addEventListener(
160
- resizedEventName,
161
- function (/** @type {any} */ e) {
162
- if (e.detail.change.width > 0) {
163
- closeMobileMenu();
164
- }
160
+ document.addEventListener(resizedEventName, function (/** @type {any} */ e) {
161
+ if (e.detail.change.width > 0) {
162
+ closeMobileMenu();
165
163
  }
166
- );
164
+ });
167
165
  }
168
166
 
169
167
  export { addMobileNav };
package/src/themes/accelerator/components/Header.astro CHANGED
@@ -33,32 +33,30 @@ stats.stop();
33
33
  <a href={searchUrl} class="header-icon" title={_(Translations.header.toggle_search)}>
34
34
  <svg
35
35
  xmlns="http://www.w3.org/2000/svg"
36
- width="40"
37
- height="40"
38
- viewBox="0 0 20 19"
39
- stroke-width="1"
36
+ width="32"
37
+ height="32"
38
+ viewBox="0 0 24 24"
40
39
  fill="none"
40
+ stroke-width="1"
41
41
  stroke-linecap="round"
42
42
  stroke-linejoin="round">
43
- <path
44
- d="M19.0524 16.4267L15.3727 12.7273C15.2067 12.5603 14.9815 12.4675 14.7453 12.4675H14.1437C15.1624 11.1577 15.7676 9.5102 15.7676 7.718C15.7676 3.45455 12.3316 0 8.09097 0C3.85035 0 0.414307 3.45455 0.414307 7.718C0.414307 11.9814 3.85035 15.436 8.09097 15.436C9.87358 15.436 11.5123 14.8275 12.8151 13.8033V14.4082C12.8151 14.6456 12.9073 14.872 13.0734 15.039L16.7531 18.7384C17.1 19.0872 17.661 19.0872 18.0042 18.7384L19.0487 17.6883C19.3956 17.3395 19.3956 16.7755 19.0524 16.4267ZM8.09097 12.4675C5.48164 12.4675 3.36687 10.3451 3.36687 7.718C3.36687 5.09462 5.47795 2.96846 8.09097 2.96846C10.7003 2.96846 12.8151 5.09091 12.8151 7.718C12.8151 10.3414 10.704 12.4675 8.09097 12.4675Z"
45
- ></path>
43
+ <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
44
+ <path d="M21 21l-6 -6"></path>
46
45
  </svg>
47
46
  </a>
48
- <a href="#site-nav" data-navigationid="site-nav" class="header-icon" title={_(Translations.header.toggle_menu)}>
47
+ <a href="#site-nav" data-navigation-id="site-nav" class="header-icon" title={_(Translations.header.toggle_menu)}>
49
48
  <svg
50
49
  xmlns="http://www.w3.org/2000/svg"
51
- width="40"
52
- height="40"
50
+ width="32"
51
+ height="32"
53
52
  viewBox="0 0 24 24"
54
- stroke-width="1.5"
55
53
  fill="none"
54
+ stroke-width="1"
56
55
  stroke-linecap="round"
57
56
  stroke-linejoin="round">
58
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
59
- <line x1="4" y1="6" x2="20" y2="6"></line>x``
60
- <line x1="4" y1="12" x2="20" y2="12"></line>
61
- <line x1="4" y1="18" x2="20" y2="18"></line>
57
+ <path d="M4 6l16 0"></path>
58
+ <path d="M4 12l16 0"></path>
59
+ <path d="M4 18l16 0"></path>
62
60
  </svg>
63
61
  </a>
64
62
  </header>
package/src/themes/accelerator/components/Search.astro CHANGED
@@ -25,7 +25,7 @@ const accelerator = new Accelerator(SITE);
25
25
  <form method="GET" action={SITE.search.fallbackUrl ?? "https://www.google.com/search"} role="search" autocomplete="off" data-sourcedata={SITE.subfolder + "/search.json"}>
26
26
  <fieldset>
27
27
  <input type="hidden" name={SITE.search.fallbackSite ?? "q"} value={"site:" + siteUrl} />
28
- <input type="text" name={SITE.search.fallbackSite ?? "q"} class="site-search-query" placeholder={_(Translations.search.search_for)} spellcheck="true" autocomplete="off" />
28
+ <input type="text" name={SITE.search.fallbackSite ?? "q"} class="site-search-query" placeholder={_(Translations.search.search_for)} spellcheck="true" autocomplete="off" autofocus="autofocus" />
29
29
  <button type="submit" set:html={_(Translations.search.submit)}></button>
30
30
  </fieldset>
31
31
  </form>