jekyll-theme-miniplex 0.12.0 → 0.12.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b445d75ca4335ea4609745587abb18d8be0499067c0f3ccdf86f2828f507239b
-  data.tar.gz: 41c53aada8811b213c6720140f44d0232f87fa2390713e8580ba8e9bdfe45c76
+  metadata.gz: 5f1ab9dc8b592c92d3965aa0fe9344c3e375c14f01f973f80b9cdf33a079e767
+  data.tar.gz: 1723b9f2f7c59944209952462163581d941ed29b4b88e80814230fc8031b13ce
 SHA512:
-  metadata.gz: 1ccd95ac50abe0b6c7f2bf6c9465b7b4dcf452f36cb6c1f01dbd7904876bd0a363e3585373050eee1d177880a2681c0a4084404e9981818707828ff1125d3099
-  data.tar.gz: 3ddf6ca45f392ea7b56e9ff36375f3dd42a0342cf9e05f655e6516e4f56e8ef66154076632c5cf2ca3f4344921f4b20b3265602eb43fdfdadc6f971807f8c6a3
+  metadata.gz: fd276a2608f125119bac29acbb6164875fe2562eeb8459d41bc574711c0f7b9de4fe3111011ded081c7e2f9472b5b7e617c69f5cb12cb1ae7483e99c0c26d130
+  data.tar.gz: a7269b37cf85927bbd95ca61e3c361156d238498ebb6e1f08d48f341efcac27144dee08f58699ed1dd0a4d85f4ec30ff6d2ebb9b897c948c4c1668faa1c2ef2e

data/README.md

@@ -90,8 +90,9 @@ Optionally, put any of the following files into the `_includes` folder to overri
 
 ## ToDos & Missing Features
 
-- [ ] In-page navigation
+- [ ] Font legibility & weights optimizations
 - [ ] Maximizable tables
+- [ ] In-page navigation
 - [ ] Breadcrumbs, if possible
 - [ ] Side notes, if possible
 
@@ -100,6 +101,9 @@ Optionally, put any of the following files into the `_includes` folder to overri
 
 Most recent at the top.
 
+- [X] Tests & fixes for mobile navigation. Issues:
+  - [X] Chrome on Android: Navigation bar position (floating or hidden)
+  - [X] Missing shadow on mobile nav
 - [X] Footer
 - [X] Dark mode
 - [X] Print CSS

data/_sass/jekyll-theme-miniplex.sass

@@ -2,6 +2,7 @@
 @use "sass:map"
 @use "sass:math"
 @use "sass:list"
+@use "sass:color"
 
 @import "reset"
 
@@ -247,6 +248,8 @@ $large_breakpoint: $medium_breakpoint + $large_minimum_left_navigation_width + 2
   // Colors for light mode
   --primary_foreground_color: #444444
   --heading_foreground_color: #333333
+  // Needs to be written as RGB, not hex, so that CSS rgba() works
+  --shadow_color: 51, 51, 51, 0.4
   --interactive_color: #777777
   --interactive_background_color: #eeeeee
   --accent_color_1: #777777
@@ -259,6 +262,8 @@ $large_breakpoint: $medium_breakpoint + $large_minimum_left_navigation_width + 2
   @media (prefers-color-scheme: dark)
     --primary_foreground_color: #ffffff
     --heading_foreground_color: #eeeeee
+    // Needs to be written as RGB, not hex, so that CSS rgba() works
+    --shadow_color: 255, 255, 255, 1.0 
     --interactive_color: #eeeeee
     --interactive_background_color: #777777
     --accent_color_1: #dddddd
@@ -283,10 +288,20 @@ body
 
     @include below_large_mode
       display: flex
+      position: fixed
+      height: 100vh 
+      width: 100vw
+      max-height: 100%
+      top: 0
+      left: 0
+      bottom: 0
+      right: 0
+      overflow-y: scroll
+
       flex-flow: column nowrap
       align-items: stretch
       justify-content: space-between
-      height: 100vh 
+      
     
     main#content
       background: var(--content_background_color)
@@ -755,7 +770,9 @@ body
 
     // Mobile Navigation, start state
     nav#navigation-mobile
+      position: -webkit-sticky
       position: sticky
+      align-self: stretch
 
       @include print_mode
         display: none
@@ -769,7 +786,7 @@ body
         display: none
 
       #navigation-controls
-        box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--heading_foreground_color), 0.4)
+        box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--shadow_color))
 
         button#mobile-navigation-toggle
           --icon-url: url("/assets/images/menu-outline.svg")
@@ -783,7 +800,7 @@ body
 
       #navigation-items
         display: block
-        box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--heading_foreground_color), 0.4)
+        box-shadow: 0 math.div($unit, 2) math.div($unit, 1) rgba(var(--shadow_color))
 
       #navigation-controls
         button#mobile-navigation-toggle

data/assets/js/main.coffee

@@ -26,13 +26,13 @@ document.addEventListener "DOMContentLoaded", (DOMLoadedEvent) ->
         # Open navigation
         mobileNavigation.dataset.state = "open"
 
-        body.style.overflow = "hidden"
-
         mobileNavigation.style.position = "fixed"
         mobileNavigation.style.width = "100vw"
         mobileNavigation.style.height = "100vh"
         mobileNavigation.style.removeProperty("grid-template-rows")
 
+        body.style.overflow = "hidden"
+
         navigationToggleButton.setAttribute "aria-expanded", "true"
         mobileNavigationItems.setAttribute "aria-hidden", "false"
         
@@ -41,13 +41,14 @@ document.addEventListener "DOMContentLoaded", (DOMLoadedEvent) ->
         navigationToggleButton.setAttribute "aria-expanded", "false"
         mobileNavigation.dataset.state = "closed"
 
-        body.style.overflow = "initial"
-
         mobileNavigation.style.position = "sticky"
         mobileNavigation.style.removeProperty("width")
         mobileNavigation.style.removeProperty("height")
         mobileNavigation.style.gridTemplateRows = "[transparent-nav-close-area] 0 [navigation-items] 0 [navigation-controls] min-content"
 
+        body.style.overflow = "initial"
+
+        navigationToggleButton.setAttribute "aria-expanded", "false"
         mobileNavigationItems.setAttribute "aria-hidden", "true"
 
         mobileNavigation.scrollIntoView {block: "end"}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-miniplex
 version: !ruby/object:Gem::Version
-  version: 0.12.0
+  version: 0.12.1
 platform: ruby
 authors:
 - Timo Würsch
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-06 00:00:00.000000000 Z
+date: 2023-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll