jekyll-theme-miniplex 0.3.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a62d87e97bcc76a60a5dbc91c666fb5b5713e3965bd69db3f8eac87aaecc1ede
-  data.tar.gz: 348e4bf7f940ec454be9821d987ecd11470735ada2d5ddc58197778e4ad4fb5b
+  metadata.gz: 7c7bb9146d5165d0e9a5413fcd8ad712e1152299b9e689104587a7d28057ba32
+  data.tar.gz: b0a1b5114c139f367c2727cdfe8d8ccc9cffe487a7f244c41ebccc5d5f137f4f
 SHA512:
-  metadata.gz: 55d7c422976ae93ebcc7cfd1302e6478ab460d6031ff3350d7e3513585d174a2495723a544cfd49a4858e8903d966d1ad2ce7bf5bd3a0232bd4ec7a4097b57a0
-  data.tar.gz: 68242ad962ebb5871f483b913dd32b2f406a9bd64933c18beb2ada58cd90445db8a6cffe0d17730e10a8b994f4d7d7267de132b8be261e476ef2517bc19c15b6
+  metadata.gz: 3b898bf2b5a6d844fff3dc53939acbf38a5956e570470288d35e4bbb2f8c9216db856ba7826a09981b63284d791541ef42baf01cd72f75a67252ab856866414a
+  data.tar.gz: 10042b2fd039b19964165d5f7015fb586e49164bdb4510c95b493cbc96131722fcf121b4e667a4443d62cf6ff22923448401b0f95bca696d4164f4789eb06a8d

data/README.md

@@ -22,6 +22,9 @@ Add the following to your Jekyll site's `Gemfile`:
 ```ruby
 gem "jekyll-theme-miniplex"
 
+# jekyll-theme-miniplex depends on this.
+gem "jekyll-titles-from-headings", "~> 0.5.3"
+
 # Use the most recent version of jekyll-sass-converter, to force Dart Sass
 gem "sass-embedded"
 gem "jekyll-sass-converter", github: "jekyll/jekyll-sass-converter"
@@ -53,6 +56,18 @@ miniplex:
   mobile_nav_menu_title: "Menü"
 ```
 
+## ToDos & Missing Features
+
+- [ ] Add a post's date to the page layout, or to a separate post layout
+- [ ] Print CSS
+- [ ] Breadcrumbs
+- [ ] In-page navigation
+- [ ] Footer
+- [ ] Maximizable tables
+- [ ] Side notes, if possible
+- [ ] Dark mode
+
+
 ## License
 
 The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -6,6 +6,7 @@ title: Miniplex Theme for Jekyll
 
 plugins:
   - jekyll-coffeescript
+  - jekyll-titles-from-headings
 
 exclude:
   - .sass-cache/
@@ -23,3 +24,7 @@ exclude:
   - vendor/gems/
   - vendor/ruby/
 
+titles_from_headings:
+  enabled: true
+  strip_title: true
+  collections: true # This makes it work for posts as well

data/_includes/navigation_desktop.html

@@ -6,7 +6,7 @@
       {% assign site_pages = site.pages %}
       {% for listed_page in site_pages %}
         {% if listed_page.url == page.url %}
-          <li><a href="{{listed_page.url}}" class="active">{{listed_page.title}}</a></li>
+          <li><a href="{{listed_page.url}}" class="active">{{listed_page.title}} <span class="visually-hidden">(Current page)</span></a></li>
         {% else %}
           <li><a href="{{listed_page.url}}">{{listed_page.title}}</a></li>
         {% endif %}
@@ -19,7 +19,7 @@
       {% assign site_posts = site.posts %}
       {% for listed_post in site_posts %}
         {% if listed_post.url == page.url %}
-          <li><a href="{{listed_post.url}}" class="active">{{listed_post.title}}</a></li>
+          <li><a href="{{listed_post.url}}" class="active">{{listed_post.title}} <span class="visually-hidden">(Current page)</span></a></li>
         {% else %}
           <li><a href="{{listed_post.url}}">{{listed_post.title}}</a></li>
         {% endif %}

data/_includes/navigation_mobile.html

@@ -1,13 +1,13 @@
 <div id="transparent-nav-close-area">
 </div>
-<ul id="navigation-items">
+<ul id="navigation-items" aria-hidden="true">
   <li>Pages</li>
   <li>
     <ul>
       {% assign site_pages = site.pages %}
       {% for listed_page in site_pages %}
         {% if listed_page.url == page.url %}
-          <li><a href="{{listed_page.url}}" class="active">{{listed_page.title}}</a></li>
+          <li><a href="{{listed_page.url}}" class="active">{{listed_page.title}} <span class="visually-hidden">(Current page)</span></a></li>
         {% else %}
           <li><a href="{{listed_page.url}}">{{listed_page.title}}</a></li>
         {% endif %}
@@ -20,7 +20,7 @@
       {% assign site_posts = site.posts %}
       {% for listed_post in site_posts %}
         {% if listed_post.url == page.url %}
-          <li><a href="{{listed_post.url}}" class="active">{{listed_post.title}}</a></li>
+          <li><a href="{{listed_post.url}}" class="active">{{listed_post.title}} <span class="visually-hidden">(Current page)</span></a></li>
         {% else %}
           <li><a href="{{listed_post.url}}">{{listed_post.title}}</a></li>
         {% endif %}
@@ -31,6 +31,6 @@
 <ul id="navigation-controls">
   <li id="site-title"><a href="/">{{ site.title | default: "Your site has no title yet. Set it in _config.yml." }}</a></li>
   <li>
-    <button id="mobile-navigation-toggle">{{ site.miniplex.mobile_nav_menu_title | default: "Menu" }}</button>
+    <button id="mobile-navigation-toggle" aria-label="Open Menu" aria-expanded="false">{{ site.miniplex.mobile_nav_menu_title | default: "Menu" }}</button>
   </li>
 </ul>

data/_layouts/default.html

@@ -16,16 +16,18 @@
   </head>
 
   <body>
+    <a href="#content" class="visually-hidden" id="skiplink">Skip to Content</a>
     <div id="layout">
       <main id="content">
         <section>
+          <h1>{{ page.title }}</h1>
           {{ content }}
         </section>
       </main>
-      <nav id="navigation-desktop">
+      <nav id="navigation-desktop" role="navigation">
         {% include navigation_desktop.html %}
       </nav>
-      <nav id="navigation-mobile" data-state="closed">
+      <nav id="navigation-mobile" data-state="closed" role="navigation">
         {% include navigation_mobile.html %}
       </nav>
     </div>

data/_sass/jekyll-theme-miniplex.sass

@@ -196,7 +196,6 @@ $group_color_level_2: #dddddd
   font-style: italic
   src: url("../fonts/IBMPlexSerif-BoldItalic.woff2")
 
-
 @mixin default_font
   font-family: IBMPlexSans
   @include responsive_property(font-size, $xs: 0.875 * $unit, $s: 1 * $unit, $m: 1.125 * $unit, $otherwise: 1.125 * $unit)
@@ -220,6 +219,23 @@ $group_color_level_2: #dddddd
   font-style: italic
   color: $accent_color_1
 
+// Accessibility
+.visually-hidden
+  position: absolute
+  left: -10000px
+  top: auto
+  width: 1px
+  height: 1px
+  overflow: hidden
+
+  &:focus
+    color: $primary_foreground_color
+    display: inline-block
+    height: auto
+    width: auto
+    position: static
+    margin: auto
+
 body
   @include default_font
   background: $outer_background_color
@@ -274,18 +290,20 @@ body
         @include default_font      
         @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise:1 * $unit)
       
-      strong
+      strong, b
         font-weight: bold
         color: $heading_foreground_color
 
         
-      em
+      em, i
         font-style: italic
         
       a
         color: $interactive-color
         background-color: $interactive_background_color
         text-decoration: none
+        padding-left: math.div($unit, 4)
+        padding-right: math.div($unit, 4)
         
       h1
         @include title_font
@@ -317,12 +335,21 @@ body
       h5
         @include heading_font
         color: $heading_foreground_color
-
-        
         @include responsive_property(font-size, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
         @include responsive_property(margin-top, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
         @include responsive_property(margin-bottom, $xs: 0.75 * $unit, $s: 0.875 * $unit, $m: 1 * $unit, $otherwise: 1 * $unit)
-    
+
+      h6
+        @include heading_font
+        color: $primary_foreground_color
+        @include responsive_property(font-size, $xs: 0.625 * $unit, $s: 0.75 * $unit, $m: 0.875 * $unit, $otherwise: 0.875 * $unit)
+        @include responsive_property(margin-top, $xs: 0.625 * $unit, $s: 0.75 * $unit, $m: 0.875 * $unit, $otherwise: 0.875 * $unit)
+        @include responsive_property(margin-bottom, $xs: 0.625 * $unit, $s: 0.75 * $unit, $m: 0.875 * $unit, $otherwise: 0.875 * $unit)
+
+      hr
+        border: 0
+        border-top: 1px solid $accent_color_1
+        border-bottom: 1px solid $accent_color_1
 
       // Ordered lists
       ol
@@ -624,7 +651,11 @@ body
       width: 100vw
       height: 100vh
 
+      #transparent-nav-close-area
+        display: block
+
       #navigation-items
+        display: block
         box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba($heading_foreground_color, 0.4)
 
       #navigation-controls

data/assets/js/main.coffee

@@ -14,6 +14,7 @@ document.addEventListener "DOMContentLoaded", (DOMLoadedEvent) ->
 
   # Mobile navigation
   mobileNavigation = document.querySelector "nav#navigation-mobile"
+  mobileNavigationItems = document.querySelector "nav#navigation-mobilenav#navigation-mobile ul#navigation-items"
   navigationToggleButton = document.querySelector "button#mobile-navigation-toggle"
   transparentNavCloseArea = document.querySelector "div#transparent-nav-close-area"
   body = document.querySelector "body"
@@ -22,9 +23,13 @@ document.addEventListener "DOMContentLoaded", (DOMLoadedEvent) ->
     switch mobileNavigation.dataset.state
       when "closed"
         mobileNavigation.dataset.state = "open"
+        navigationToggleButton.setAttribute "aria-expanded", "true"
+        mobileNavigationItems.setAttribute "aria-hidden", "false"
         body.style.overflow = "hidden"
       when "open"
+        navigationToggleButton.setAttribute "aria-expanded", "false"
         mobileNavigation.dataset.state = "closed"
+        mobileNavigationItems.setAttribute "aria-hidden", "true"
         body.style.overflow = "initial"
 
   navigationToggleButton.addEventListener "click", toggleNavigation

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-miniplex
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Timo Würsch
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-28 00:00:00.000000000 Z
+date: 2023-02-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll