jekyll-theme-amethyst 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae1f567530a5c557779c453ab8ea18940c3620baa598d0362fe922bd2b6fff2f
-  data.tar.gz: 1c202be8204ee0d9073f337cff0b5145a3ef7019b8b1c59e835e750fe1353c72
+  metadata.gz: 38574e61b505ed9369e00635883fa96c647777477a4948f2014cddc262294347
+  data.tar.gz: 3615fc09dd924333280fe835755d20bee3b6b961c8e212faab0a14f03f3c1b58
 SHA512:
-  metadata.gz: f633624fe399ba7a0258b0109c530d3c45155d2b6c350b3bb655895e36beb07b844275f9b479d3b37794bb98b0ac833120c79be16a9a609f5d5e8605849844f8
-  data.tar.gz: 0102d31b93866380a0018c5529c0c78e018ba10833eb8fa57300fe2463acfc3de746ba4d64894cfe1d4b5bf8e201bab107dbd6e1f677b57f37abb1600df8f26f
+  metadata.gz: c0c56a50b0bcd33d9a638d4c9fe933a63c404a5c9fef7b0172056516cd2072cfd9f703bebd0bd05eab33f6467de7e58cf1480529edf08685028f961e585c2128
+  data.tar.gz: a7da06f4ff9453c14cdf8d1c9d61f62c5cf27be9d9e1aa81f06400c8f935bd016f828e8bc328701ab3921e17421afe4a59ebbecc9fe2a666024882489257c45a

data/_data/sitenav.yml

@@ -1,10 +1,13 @@
 - name: Guides
-  href: /guides/
   sub:
     - name: Getting Started
       href: /intro/
 - name: Documentation
-  href: /api/
+  sub:
+    - name: Foobar
+      href: /api/foo/
+    - name: Lorem ipsum
+      href: /api/lorem/
 - name: Blog
   href: /blog/
 - name: About

data/_layouts/wrapper.html

@@ -21,13 +21,15 @@
             <nav class="site-nav"><ul class="site-nav-list">
                 {%- for item in site.data.sitenav -%}
                     <li class="site-nav-item{%- if item.sub %} has-sub-list{% endif %}">
-                        <a class="site-nav-link{%- if item.sub %} has-sub-list{% endif %}" href="{{ item.href | relative_url | escape }}">{{ item.name }}</a>
                         {%- if item.sub -%}
+                        <span class="site-nav-link has-sub-list" tabindex="0">{{ item.name | escape }}</span>
                         <ul class="site-nav-sub-list">
                             {%- for sub in item.sub -%}
                             <li><a class="site-sub-nav-link" href="{{ sub.href | relative_url | escape }}">{{ sub.name | escape }}</a></li>
                             {%- endfor -%}
                         </ul>
+                        {%- elsif item.href -%}
+                        <a class="site-nav-link" href="{{ item.href | relative_url | escape }}">{{ item.name | escape }}</a>
                         {%- endif -%}
                     </li>
                 {%- endfor -%}
@@ -104,29 +106,5 @@
 {%- if site.amethyst.algolia.search_only_api_key -%}
     {%- include search-js.html -%}
 {%- endif -%}
-<script type="module">
-window.addEventListener('DOMContentLoaded', function setupSubNav() {
-    const siteNav = document.querySelector('.site-nav-list');
-    const closeSubNav = () => {
-        const prevSub = siteNav.querySelector('.is-open');
-        if (prevSub) {
-            prevSub.classList.remove('is-open');
-        }
-    }
-    siteNav.addEventListener('click', (event) => {
-        if (event.target.classList.contains('has-sub-list')) {
-            event.preventDefault();
-            event.stopPropagation();
-
-            if (event.target.parentNode.classList.contains('is-open')) {
-                closeSubNav();
-            } else {
-                closeSubNav();
-                event.target.parentNode.classList.add('is-open');
-            }
-        }
-    });
-});
-</script>
 </body>
 </html>

data/_sass/amethyst.scss

@@ -367,6 +367,7 @@ table {
     height: 100%;
     padding: $size-1;
     text-decoration: none;
+    cursor: pointer; // For non-link <span> with sub list
 
     @media (min-width: $screen-m) {
         color: $color-bright;
@@ -413,7 +414,21 @@ table {
     }
 }
 
-.site-nav-item.is-open .site-nav-sub-list {
+// Modern browsers support focus-within.
+// Open menu on clicking the entry link, and stay open until
+// a click outside the menu or a click on a different menu.
+// Specifically, when using accessibility tools to focus links
+// in the submenu (thus not focussing the entry link any more),
+// the menu must stay open.
+.site-nav-item:focus-within .site-nav-sub-list {
+    display: block;
+}
+// In older browsers, fall back to opening on click,
+// and trying to stay open so long as the cursor is within the menu.
+// This must be a separate selector block.
+// <https://css-tricks.com/solved-with-css-dropdown-menus/>
+.site-nav-link:focus ~ .site-nav-sub-list,
+.site-nav-sub-list:hover {
     display: block;
 }
 

data/amethyst.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |spec|
   spec.name     = "jekyll-theme-amethyst"
-  spec.version  = "0.2.0"
+  spec.version  = "0.2.1"
   spec.summary  = "https://github.com/qunitjs/jekyll-theme-amethyst"
   spec.authors  = ["Timo Tijhof", "Trent Willis"]
   spec.files    = `git ls-files -z`.split("\x0")

data/docs/config.md

@@ -17,6 +17,7 @@ timezone: UTC
 # Amethyst theme options are documented at:
 # https://github.com/qunitjs/jekyll-theme-amethyst/blob/main/docs/config.md
 #
+theme: jekyll-theme-amethyst
 amethyst:
   # Default: "/favicon.svg"
   favicon:

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-amethyst
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Timo Tijhof
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-09-06 00:00:00.000000000 Z
+date: 2021-09-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -189,7 +189,6 @@ files:
 - docs/config.md
 - docs/getting-started.md
 - favicon.svg
-- guides.md
 - index.md
 - intro.md
 - lib/jekyll-theme-amethyst.rb

data/guides.md

@@ -1,11 +0,0 @@
----
-layout: page
-title: Guides
----
-
-<p class="lead">The following guides are here to help you.</p>
-
-## [Getting Started](./intro.md)
-
-A guided introduction. If you've never before, or need a refresher on the basics, this is for you.
-